title	List of Resources
autotoc	true
published	true
layout	list
description	Curated list of resources for design, development and process

Code Editors

• 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.

SVG

• 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

Mapping

• 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.world: 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

Design

• 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.

Charting

• 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
• 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

CMS

• 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.

Conversion

• 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
• 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

Audio and Video

• Soundcite: Inline audio players
• AutoEdit: Text Based Video Editing, node NWJS Os X desktop app, with Backbone front end.
• 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.

Animation

• 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.

Datasets

• 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
• Google Trends: Download and play with key datasets from Google Trends
• 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
• Awesome JSON Datasets: a curated list of awesome JSON datasets that don't require authentication

Typography

• 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 Theory

• 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.

CDNs

• CDNjs: Will host any production version of any JavaScript/CSS library, subject to license permissions.
• JSDelivr: The advanced open source public CDN
• Skypack: CDN was built to serve the 60,000+ npm packages written in ES Module (ESM) syntax.

Testing

• 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.

Templates

• AdminLTE: A fully responsive admin template. Based on Bootstrap 3 framework.
• Boilrplate: A curated directory of boilerplates to help you start your projects.

Bots

• BotKit: Open-source toolkit for creating bots for messaging platforms

UX

• The Accessibility Cheatsheet: Extensive guidelines and highlight some practical examples of what we can do to implement them and make our websites more accessible.

Resources

• 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

Utilities

• 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.
• Lax.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.

Hosting

• 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.

Database

• 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.

Email

• 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

Version Control

• 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

Lists

• 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.
• D3 Discovery: finding D3 plugins with ease

Analytics

• 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