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

Mapping

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

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

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

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

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

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

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.

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.

Contribute

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