Resources

List of Resources

Curated list of resources for design, development and process in the newsroom.

Table of Contents
  1. Code Editors
  2. SVG
  3. Mapping
  4. Design
  5. Charting
  6. CMS
  7. Conversion
  8. Audio and Video
  9. Animation
  10. Datasets
  11. Typography
  12. Color Theory
  13. CDNs
  14. Testing
  15. Templates
  16. Bots
  17. UX
  18. Resources
  19. Utilities
  20. Hosting
  21. Email
  22. Lists
  23. Contribute

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.

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.

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

Design

  • Gravit Designer: Free powerful design tool on any platform
  • Solis: Live Design Output that integrates seamlessly with your favourite code editor.

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
  • d3 workbench: a d3.js-powered workbench for rapid visualization prototyping
  • Data Illustrator: Create infographics and data visualizations without programming.

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

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

Audio and Video

  • 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

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

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

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.

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

CDNs

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

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

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
  • ChatFuel: Build a Facebook bot without coding

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.

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.

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

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.
  • Newsroom.Tools: Explore our curated digital toolbox built by journalists, for journalists
  • D3 Discovery: finding D3 plugins with ease

Contribute

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