This is a collection of tricks, tools, libraries, APIs and data sources for creative projects. It's a reference as well as a compendium of things you can do in the browser and the command line.
Although this is a list of mostly Github-hosted tools, it's different from awesome-* lists in that I try to avoid having several things with overlapping purposes and only include what I consider to be the excellent ones: tools that are easy to install, elegant to work with, and well documented β plus some quirky outliers for good fun.
I've been inspired to keep this list, and name it as such, by javierarce/toolbox, which serves a similar purpose and contains great resources that I recommend you check out.
Contributions to this list are welcome via issues and pull requests β I'm always looking for new ideas!
QuaggaJS is a barcode-scanner entirely written in JavaScript supporting real-time localization and decoding of various types of barcodes such as EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5 and CODABAR. The library is also capable of using getUserMedia to get direct access to the user's camera stream. Although the code relies on heavy image- processing even recent smartphones are capable of locating and decoding barcodes in real-time.
For reading barcodes with a webcam or phone camera. See also JSBarcode for generating barcodes.
A JavaScript visualization library for HTML and SVG.
The tool of choice for any data visualization project. To draw standard charts with D3, take a look at some libraries built on top of it: MetricsGraphics, plottable, d3plus, victory, semiotic. Further reading:awesome-d3.
Vega-Lite is a high-level grammar of interactive graphics. It provides a concise JSON syntax for rapidly generating visualizations to support analysis.
Built on top of graphlib by the same author, dagre helps you build directed graphs that you can then plug into D3 or cytoscape. See the excellent wiki for details.
Much like D3 is the tool of choice for data visualization, three.js is the established library for working in 3D. See also pre3d (although it hasn't been worked on in ages).
Inspired by three.js and ammo.js, and driven by the fact that the web lacks a physics engine, here comes cannon.js. The rigid body physics engine includes simple collision detection, various body shapes, contacts, friction and constraints.
WebMidi.js helps you tame the Web MIDI API. Send and receive MIDI messages with ease. Control instruments with user-friendly functions (playNote, sendPitchBend, etc.). React to MIDI input with simple event listeners (noteon, pitchbend, controlchange, etc.)
NexusUI is a JavaScript toolkit for easily designing musical interfaces in web browsers and mobile apps, with emphasis on rapid prototyping and integration with web audio.
Fast, JavaScript DSP library that creates JIT optimized audio callbacks using code generation techniques
Library behind Gibberβͺ β an audiovisual live coding environment for the browser. See also interface.jsβͺ by the same author β a GUI library for music / arts applications that works with touch, mouse and motion events.
howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms.
Cross-browser audio/video/screen recording. It supports Chrome, Firefox, Opera and Microsoft Edge. It even works on Android browsers. It follows latest MediaRecorder API standards and provides similar APIs.
Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
This works as a React (or Vue) playground that lets you focus on writing components.
artoo.js is a piece of JavaScript code meant to be run in your browser's console to provide you with some scraping utilities.
Allows you to create custom bookmarklets to scrape a web page from your browser; I could see this being used in places where on a server you'd have to jump through some hoops, e.g. getting your Facebook saved links.
A framework for extracting meaning from web pages.
Seems to be still a work in progress, but it will ultimately be a tool for understanding where some particular type of content is on a page: "Where is the body? The title? Is this a 'next page' button? Is this a comment form, and are there comments here? By better understanding the parts of a page, we can improve our understanding of how a user interacts with it." β source
"Natural" is a general natural language facility for nodejs. Tokenizing, stemming, classification, phonetics, tf-idf, WordNet, string similarity, and some inflections are currently supported. At the moment, most of the algorithms are English-specific.
parse5 provides nearly everything you may need when dealing with HTML. It's the fastest spec-compliant HTML parser for Node to date. It parses HTML the way the latest version of your browser does.
Use this to get a barebones representation of your HTML
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs.
contains over 10 million geographical names and consists of over 9 million unique features whereof 2.8 million populated places and 5.5 million alternate names.
The Wordnik API lets you request definitions, example sentences, spelling suggestions, related words like synonyms and antonyms, phrases containing a given word, word autocompletion, random words, words of the day, and much more.
Provides information about companies, IP geolocation, validation for CIF / CNP / IBAN / BIC, exchange rate, postal codes, singular and plural forms of Romanian words
pup is a command line tool for processing HTML. It reads from stdin, prints to stdout, and allows the user to filter parts of the page using CSS selectors.
Should work great with wget for web page data extraction.
Observable is a better way to code. Discover insights faster and communicate more effectively with interactive notebooks for data analysis, visualization, and exploration.
This is the simplest way I found to write React code like you would in a notepad. You can't save your work, but it's perfect for quick sketching. It also loads the latest version of React (16.2.0 at the moment).
geojson.io is a quick, simple tool for creating, viewing, and sharing maps. geojson.io is named after GeoJSON, an open source data format, and it supports GeoJSON in all ways - but also accepts KML, GPX, CSV, GTFS, TopoJSON, and other formats.
A web-based data filtering tool for OpenStreetMap. With overpass turbo you can run Overpass API queries and analyse the resulting OSM data interactively on a map. There is an integrated Wizard which makes creating queries super easy.
Miscellaneous tips & tricks
Start a server for a folder
Run python -m SimpleHTTPServer in your project folder to make it available at http://localhost:8000.
Note: The syntax above is for the Python 2.x that comes preinstalled with macOS and Linux. The equivalent syntax for Python 3 is python -m http.server.
If you're using Node.js, you can also use the serve package, which you can run without installing with npx (it comes with recent versions of npm):
To use a S3 bucket to keep a bunch of files and make them publicly available, you need to make a bucket policy. This is under Permissions section on the Properties tab for your bucket. Paste this into the bucket policy (myBucketName should be the name of your bucket):
All the files inside will typically be available at http://myBucketName.s3.amazonaws.com/path/to/file but you can grab the exact URL from the Static Website Hosting section in the Properties tab.
Extra credit: This is super-useful for hosting video files, since S3 supports partial content requests which is needed to loop <video> on your web pages.
The standard command-line tools available on Unix-based systems are wonderful, if occasionally inscrutable. This page contains some commands I found useful.