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

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.

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

Design

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

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

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

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

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.

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

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.

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

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

Contribute

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