/resources

Curated list of resources for design, development and process.

title autotoc published layout description
List of Resources
true
true
list
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

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

Contribute

If you want to add to this list please make a pull request: GitHub Source