| title | autotoc | published | layout | description |
|---|---|---|---|---|
List of Resources |
true |
true |
list |
Curated list of resources for design, development and process |
- HyperDev: Developer playground for building full-stack web apps, fast
- CodePen: Playground for the front end side of the web
- Blockbuilder: Make it easier for you to make blocks
- StackBlitz: The online IDE for web applications. Powered by VS Code.
- Web Maker: an offline playground for your web experiments
- Nodebook: Multi-Language REPL with Web UI + CLI code runner
- Graviton: A cross-platform code editor.
- CodeSandbox: an online editor that helps you create web applications, from prototype to deployment.
- Electron Fiddle: lets you create and play with small Electron experiments.
- Crowbar: Bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file
- svgsaver: works with C3.js
- Vivus: Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn
- SVG-Morpheus: JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions.
- xvg: A Chrome extension for debugging SVG paths by converting them to outlines and displaying anchors, control points, handles and arc ellipses.
- Sketch Interactive Export: plugin to make it easy to use JavaScript to add interactivity to SVGs exported from sketch.
- SVG.js: A lightweight library for manipulating and animating SVG
- rMaps Interactive Maps from R: makes it easy to create, customize and share interactive maps from R
- Datamaps.js: Customizable SVG map visualizations for the web in a single Javascript file using D3.js
- Mapstarter: A tool for turning a geographic data file into a map for the web
- Awesome Base Layers
- Locator: A customizable, in-browser locator map creator.
- Mapshaper: Tools for editing Shapefile, GeoJSON and TopoJSON files
- Datamaps.co: A free and simple platform for creating visualizations with data maps
- Mapinseconds: Turns your spreadsheet data into maps
- geojson.io: a quick, simple tool for creating, viewing, and sharing maps.
- SRTM 90m Digital Elevation Data: The CGIAR-CSI GeoPortal is able to provide SRTM 90m Digital Elevation Data for the entire world.
- SRTM Tile Grabber: This interface attempts to ease the pain of downloading elevation data from the Shuttle Radar Topography Mission.
- Sentinel Playground: Global coverage of the Earth's land surface every 10 days at resolutions up to 10 meters.
- Tilezen: Open source tiles and libraries, sponsored by Mapzen
- Geo Maps: High Quality GeoJSON maps programmatically generated
- gdal_hillshade_tutorial: Tutorial for rendering hillshades with GDAL
- GPS Visualizer's Address Locator: Geocoder, convert multiple addresses to GPS coordinates
- QGIS Uncovered: a QGIS video tutorial on YouTube
- The United States Census: Boundary data for every US state, plus counties, roadways, water features, and so much more
- Natural Earth: a massive collection of geographic data for both cultural/political and natural features
- Distillery: a simple GUI for TopoJSON
- World Atlas TopoJSON: pre-built TopoJSON from Natural Earth
- U.S. Atlas TopoJSON: pre-built TopoJSON from Natural Earth
- Ogre: a web client (service) that translates spatial files into GeoJSON using the ogr2ogr command line tool for use in JavaScript web applications and frameworks
- Geo Code Zip: Maps and their API examples, using OpenLayers API/OpenStreetMaps and Google Maps
- Gravit Designer: Free powerful design tool on any platform
- Solis: Live Design Output that integrates seamlessly with your favourite code editor.
- Modulz: The visual code editor for designing and building digital products—without writing code.
- Data Populator: A plugin for Sketch and Adobe XD CC to populate your design mockups with meaningful data.
- Tumult Hype: Powerful HTML5 animation capabilities. Create compelling, pixel-perfect infographics quickly.
- C3.js: D3-based reusable chart library
- RAW: The missing link between spreadsheets and vector graphics.
- Vega-lite: Provides a concise JSON syntax for supporting rapid generation of visualizations to support analysis
- dc.js: Dimensional Charting Javascript Library
- TauCharts: Flexible javascript charting library for data exploration.
- Koto.js: A d3 framework for reusable charts
- Britecharts: Client-side reusable Charting Library based on D3.js v4 that allows easy and intuitive use of charts and components that can be composed together creating amazing visualizations.
- Billboard.js: Re-usable easy interface JavaScript chart library, based on D3 v4+.
- idyll: a tool that makes it easier to author interactive narratives for the web
- Frappé Charts: Simple, responsive, modern SVG Charts with zero dependencies
- d3 workbench: a d3.js-powered workbench for rapid visualization prototyping
- Data Illustrator: Create infographics and data visualizations without programming.
- Muze: Muze is a data visualization library which uses a layered Grammar of Graphics (GoG) to create composable and interactive data visualization for web
- The Google Drive CMS: The Google Drive CMS is a Google Sheet with a custom menu option to publish the content of that spreadsheet to your site's API.
- Cosmic: API first CMS
- headlesscms: A List of Content Management Systems for JAMstack Sites
- Strapi: Node.js Content Management Framework (headless-CMS) to build API
- static api generator: Generate a static JSON API from a tree of directories and files
- Daptin: A developer oriented CMS
- JSON Server: Get a full fake REST API with zero coding in less than 30 seconds
- GrapesJs: Free and Open Source Web Builder Framework
- GraphQL Designer: A developer web-app tool to rapidly prototype a full stack CRUD implementation of GraphQL with React.
- Vapid: an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML
- Sheety: Turn any Google sheet into an API instantly, for free.
- Stein: Kick off projects, design custom Google Forms, and manage your content in a familiar interface. Power your project with the fully open source Stein.
- npoint: Set up a lightweight JSON endpoint in seconds, then add a schema to edit your data safely at any time
- Autoserver: Create a full-featured REST/GraphQL API from a configuration file.
- Automad: Automad is a flat-file content management system and template engine.
- Browserling Dev Tools: A collection of the most popular developer tools all in one place
- HTML Compress: This online HTML compression tool will save space in your HTML files
- JSON Escape: Escape for JSON and Javascript online tool
- Mr. Data Converter: convert your Excel data into one of several web-friendly formats, including HTML, JSON and XML
- OpenRefine: is a powerful tool for working with messy data: cleaning it; transforming it from one format into another; and extending it with web services and external data
- Soundcite: Inline audio players
- AutoEdit: Text Based Video Editing, node NWJS Os X desktop app, with Backbone front end.
- Convert to Webm: How to convert any video into webm format using libvpx with vp8 codec for video
- Handbrake: is a tool for converting video from nearly any format to a selection of modern, widely supported codecs
- wavesurfer.js: is a customizable audio waveform visualization, built on top of Web Audio API and HTML5 Canvas
- Kap: An open-source screen recorder built with web technology
- howler.js : makes working with audio in JavaScript easy and reliable across all platforms
- Soundkit: a UI sound library designed for all of your interface needs.
- Appsounds Pro: sound packs for apps, games or any other digital products.
- RCP Tones: UI and Menu sounds for your app.
- Sonics: a sound library of 175 UI sounds and sound effects
- 8ve: Octave - A free library of UI sounds, handmade for iOS.
- Facebook Sound Kit: A collection of interaction sounds for prototypes.
- Mo.js: Motion graphics toolbelt for the web
- anime.js: a lightweight JavaScript animation library
- Popmotion: A functional JavaScript motion library
- two.js: library for two-dimensional drawing in modern browsers, rendering to SVG, canvas, and WebGL
- paper.js: framework for rendering vector graphics to canvas
- FAT.js: Web's fastest and most lightweight animation tool.
- Zdog: Round, flat, designer-friendly pseudo-3D engine for canvas & SVG
- Anix: is a lightweight and easy-to-use animation library with excellent performance and good compatibility for modern browsers.
- Awesome Public Datasets: An awesome list of high-quality open datasets in public domains (on-going)
- Data Portals: A Comprehensive List of Open Data Portals from Around the World
- Data Ipsum: Realistic placeholder data generator
- Draw My Data: Just click in the scatter plot below to add point
- ExtendsClass: A random JSON Data Generator
- Google Trends: Download and play with key datasets from Google Trends
- NICAR Data Library: The following is a list of databases maintained by NICAR.
- ProPublica Data Store: Browse data sets about Health, Criminal Justice, Education, Politics, Business, Transportation, or Military.
- Enigma: Enigma puts private and public data to work to solve the world's most challenging operational problems.
- The Dataverse Project: Open source research data repository software
- Lists: A gallery of real data ready to be placed in your design. Kind of like an App Store for fake content.
- Awesome JSON Datasets: a curated list of awesome JSON datasets that don't require authentication
- WhatFont: The easiest way to identify fonts on web pages.
- Typewolf: Helps designers choose the perfect font combination for their next design project
- TypeMotion: A bookmarklet that helps setting typographic rythm in a text
- CSS Tricks Line Length: Bookmarklet to Colorize Text Between 45 and 75 Characters (for line-length testing)
- TypeSample: A bookmarklet for identifying and sampling webfonts.
- Datalegreya: Font that mingles charts with text
- Butler: Free serif typeface inspired by a mix between both Dala Floda & the amazing Bodoni family.
- Anderson Grotesk: Free sans-serif typeface
- Fontplop: OSX/macOS application which takes ttf and otf files and outputs a webfont bundle: woff2, woff, tff, svg, and eot.
- Spectral: Spectral is a new and versatile serif face available in seven weights of roman and italic, with small caps.
- Spark: a typeface for creating sparklines in text
- Inter UI: a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens.
- Optician Sans: A free font based on the historical eye charts and optotypes used by opticians world wide.
- Trispace: a free variable font that is available in nine weights and five widths.
- The Best Contemporary Free Fonts: a subjective curated selection of contemporary free fonts.
- Font Pair: a typography site dedicated to helping creators use beautiful typography for their creative projects.
- Color.hailpixel: An easy way to create and share color palettes with just a swipe of your finger.
- Awesome-list Colorful: A curated list of awesome resources to choose your next color scheme
- Palettable: Generate beautiful color palettes, even with no prior design knowledge
- ColorBrewer: Web tool for guidance in choosing choropleth map color schemes
- Open Color: Open color is an open-source color scheme optimized for UI like font, background, border, etc.
- Data Color Picker: create a series of colors that are visually equidistant
- Color Oracle: a free color blindness simulator for Windows, Mac and Linux
- Colorbox: color systems for accessible UIs that scale
- Copy Palette: generate a consistent monochromatic color palette
- Leonardro Color: Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors.
- CDNjs: Will host any production version of any JavaScript/CSS library, subject to license permissions.
- JSDelivr: The advanced open source public CDN
- RawGit: Serves raw files directly from GitHub with proper Content-Type headers.
- Pika: CDN was built to serve the 60,000+ npm packages written in ES Module (ESM) syntax.
- HTML Code Sniffer: A client-side script that checks HTML source code and detects violations of a defined coding standard
- tota11y: an accessibility visualization toolkit
- Lighthouse Budget Calculator: A budget.json file can be used with the Lighthouse CLI to set performance budgets.
- Emmet Re:view: A browser extension for displaying responsive web-pages in a side-by-side views to quickly test how it looks at different resolutions and devices.
- AdminLTE: A fully responsive admin template. Based on Bootstrap 3 framework.
- Boilrplate: A curated directory of boilerplates to help you start your projects.
- BotKit: Open-source toolkit for creating bots for messaging platforms
- ChatFuel: Build a Facebook bot without coding
- The Accessibility Cheatsheet: Extensive guidelines and highlight some practical examples of what we can do to implement them and make our websites more accessible.
- Unsplash: Free (do whatever you want) high-resolution photos.
- Unsplash it: Beautiful placeholders using images from unsplash
- PlaceholdIt: A quick and simple image placeholder service.
- HTML Arrows: A comprehensive reference website for finding HTML symbol codes and entities
- Creating Styleguides: All about creating design style guides
- NYT Why we are Doing Fewer Interactives: New York Times presentation on three rules for visual storytelling
- Emoji Unicode Tables: Commonly-supported Emoji that map to standardized Unicode characters
- Citysets: A growing collection of free city-based icon sets
- Visual Vocabulary: There are so many ways to visualise data - how do we know which one to pick?
- HTML5 Pattern: a source of regularly used regex Input-Patterns.
- CSS Reference: a visual guide to CSS
- Libraries.io: The Open Source discovery search.
- Docute: Effortlessly documentation done right
- How to implement scrollytelling with six different libraries: How to tackle a simple scroll-driven chart using six different libraries
- Feather Icons: open-source icons
- Data Viz Project: This is a website trying to present all relevant data visualizations, so you can find the right visualization and get inspiration on how to do it.
- Learn JS Data: Data cleaning, manipulation, and wrangling in JavaScript
- Pexels: Best free stock photos in one place
- Burst: Download free photos to fuel your next project
- ISO Republic: Free Stock Photos for Creative Professionals
- Devhints: a modest collection of cheatsheets
- Data Viz Design Guide: Use these simple checklists to turn terrible visualizations into stunningly adequate ones.
- weepeople: A typeface of people sillhouettes, to make it easy to build web graphics featuring little people instead of dots
- HEAD: a free guide to
<head>elements - Design Systems: A resource for learning, creating and evangelizing design systems.
- Visualization Universe: What types of visualization do we search for and why? What tools and books influence our decisions?
- Ikonate: fully customisable & accessible*, well-optimised vector icons.
- Ouch: Free illustrations to class up your project
- Programming Design Systems: A free digital book that teaches a practical introduction to the new foundations of graphic design.
- A Visual Reference For D3: a visual representation of my understanding of D3.
- Mixkit Art: art & illustration for you to use, completely free of charge.
- Glaze: Memorable products, brands, & presentations start with our curated royalty-free illustration library
- Illustrations: Open source illustrations kit
- Pym iFrames: Embeds and resizes an iframe responsively (width and height) within its parent container
- Sticky State: A high performant module making native position:sticky statefull and polyfilling the missing sticky browser feature
- Comma Chameleon: A desktop CSV editor for data publishers
- Scrollanim: A CSS3 and JavaScript library to create stunning scroll animations that work everywhere
- ScrollStory: A jQuery plugin for building scroll-based stories
- Swiper: A modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity
- Graph Scroll: Simple scrolling events for d3 graphs. Based on stack
- Choreographer.js: A simple library to take care of complicated animations.
- Modaal: An accessible dialog window library for all humans.
- object-fit-polyfill: A Javascript polyfill for browsers that don't support the object-fit CSS property.
- blueimp Gallery: Touch-enabled, responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
- regexgen: Generate regular expressions that match a set of strings.
- scrollMonitor: A simple and fast API to monitor elements as you scroll
- ScrollMagic: helps you to easily react to the user's current scroll position.
- Rellax: Lightweight, vanilla javascript parallax library
- Tachyons TLDR: Quick lookup for tachyon classes, scales and colour palette
- Scotty JS: Deploy static websites and single page apps to AWS S3 and CloudFront with a single command
- envup: Node CLI tool to configure environment variables
- Scrollama: JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
- Adobe CC Scripts Panel: Scripting Panel for After Effects, Illustrator, and Photoshop
- Shuffle.js: Categorize, sort, and filter a responsive grid of items
- Filterizr: is a jQuery plugin that sorts, shuffles and applies stunning filters over responsive galleries using CSS3 transitions and custom CSS effects
- Gifski: converts video frames to GIF animations using pngquant's fancy features for efficient cross-frame palettes and temporal dithering. It produces animated GIFs that use thousands of colors per frame
- Sketch.The.Ripper: It rips a .sketch file and extracts the objects, not just shows an embedded preview
- jsonstore.io: a free, secured and JSON based cloud datastore for small projects
- Duotones Generator: image duotone effect generator
- Dayjs: 2KB immutable date library alternative to Moment.js with the same modern API
- Luxon: A library for working with dates and times in JS
- ArchieML Preview: This addon assists in using Google Docs as an editor for a human-friendly markup language called "ArchieML."
- enter-view: Dependency-free JavaScript library to detect when element enters into view. It uses requestAnimationFrame in favor of scroll events for less jank.
- Lazyestload: load images only when they are in (and remain in) the viewport
- Tabulator: Interactive Tables and Data Grids for JavaScript
- Sal: Performance focused, lightweight scroll animation library
- Teutonic CSS: A modern CSS framework — versatile, well documented
- Destyle.css: Opinionated reset stylesheet that provides a clean slate for styling your html.
- Laxxx.js: Simple & light weight (3kb minified & zipped) vanilla javascript plugin to create smooth & beautiful animations when you scroll.
- Unpoly.js: The unobtrusive JavaScript framework for server-side web applications.
- Cloudquery: Turn any website to API by several clicks (serverless and support SPA!)
- Remix Icon: a set of open-source neutral-style system symbols elaborately crafted for designers and developers.
- Stencil: is a toolchain for building reusable, scalable Design Systems.
- Zero Server: a web framework to simplify modern web development.
- Editor.js: Next generation block styled editor.
- Lazyload: a fast, lightweight and flexible script that speeds up your web application by loading your content images, videos and iframes only as they enter the viewport.
- light-server: A lightweight cli static http server and it can watch files, execute commands and trigger livereload
- Collect.js: Convenient and dependency free wrapper for working with arrays and objects.
- Raster Grid: Minimal and straight-forward CSS grid system utilizing descriptive HTML rather than semantic CSS.
- Modern CSS Reset: A bare-bones CSS reset for modern web development.
- Line Awesome: Swap Font Awesome for modern line icons in one line of code.
- Stout: It takes a website and uploads it to S3 in a more reliable way than other tools.
- Netlify: CDN, Continuous deployment, 1 click HTTPS, and all the services you need.
- Staticland: Static sites with free, automatic SSL for custom domains.
- 1mb: a free website host designed to make web development feel more approachable.
- Render: Render is a unified platform to build and run all your apps and websites with free SSL, a global CDN, and auto deploys from GitHub.
- Rxdb: A realtime Database for JavaScript Applications.
- AlaSQL: JavaScript SQL database for browser and Node.js. Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or Excel.
- Buttondown: The easiest way to start and grow your newsletter.
- Tinyletter: TinyLetter is a personal newsletter service brought to you by the people behind MailChimp
- Fork: a fast and friendly git client for Mac and Windows
- Kactus: design version control without changing your tools. Manage changes, document work and keep your team in sync
- Get Git: Just pay $15 once. We’ll set up your own private Gitea installation with everything you need.
- Auto: CLI tools to help facilitate semantic versioning based on GitHub PR labels
- The New School's Journalism Design: Journalism and design resources
- Awesomeness Search: To retrieve all amazing awesomeness from Github
- List of List: The definitive list of lists (of lists) curated on GitHub
- Web Field Manual: A curated list of resources focused on documenting only the best knowledge for designing experiences and interfaces on the web.
- Unheap: A tidy repository of javascript plugins
- Awesome Interactive Journalism: A list of awesome interactive journalism projects
- markapp: The goal of this site is to collect and promote JS libraries that can be used without writing any JS.
- lists.design: A gallery of real data ready to be placed in your design. Kind of like an App Store for fake content. Want to design with real data ? There's a list for that.
- Newsroom.Tools: Explore our curated digital toolbox built by journalists, for journalists
- D3 Discovery: finding D3 plugins with ease
- Insights:Privacy-Focused Analytics Platform.
- Fathom: a simple yet powerful website analytics platform.
- Ackee: Self-hosted, Node.js based analytics tool for those who care about privacy
If you want to add to this list please make a pull request: GitHub Source