Ian Rose

Designer & Developer

Resources

List of Resources

Curated list of resources for design, development and process

Table of Contents

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