Web Tools Weekly
What a Tool!

Issue #222  (Data URIs, JS Utils, Library Tools, React)10/19/17

Most of you have probably used or seen used data URIs in CSS and inline in your HTML. They're normally used to embed images in a way that saves HTTP requests, thus improving page performance.

The format for a data URI looks like this in CSS:

body {
  background: url(data:image/gif;base64,[data here]);

It consists of the data: scheme as the prefix, then a MIME type, optional base64 token if the data is non-textual, and then the data. In the above example, I've omitted the data, which is usually a very long string of characters. The ugliness of a data URI in your code is probably the only real drawback to using these.

While that's the most common use for data URIs, here are some other facts and tips on using them that you might not be aware of:
  • You can embed an HTML page in an iframe using a data URI, using the text/html MIME type, as shown in this JS Bin.
  • The HTML can also include a script element, which can run JavaScript, as shown in this JS Bin. Click inside the iframe to trigger the click event defined in the data URI.
  • Mozilla recently wrote about the security problems with allowing scripts to access the parent window from an iframe, which has been fixed in newest versions of Firefox. I believe this is also fixed in Chrome, though I'm not sure about other browsers.
  • If the data URI contains plain text, you would use the text/plain MIME type and you can enter the text in the data section with the appropriate encoded characters (e.g. %20 represents a space).
  • In Chrome, to find any image's data URI, open the image so it's by itself in a new tab, then inspect the image in DevTools. Right-click on the image URL in the Elements pane and choose "Open in Application panel". The data URI will be in the right pane of the Application panel.
  • In Firefox, it's a little easier: Inspect any image in the developer tools, right-click the image in the DOM Inspector, and choose "Copy - Image Data-URL.
  • You can include a data URI for an image without using base64, which uses more characters. Nicholas Zakas explains this with an example in his 2009 post on data URIs.
You can find tools online to encode/decode base64 data. But in most cases, you'll be doing this with images, so you'll need a tool to convert the image to base64 for use in a data URI.

For more on data URIs see MDN's article and the other links included above. 

Now on to this week's tools!
Did you buy my previous JavaScript/DOM tips book? Here's the latest one...
70 JavaScript & DOM Tips for $5 (Volume 2)

JavaScript Modules and Utilities

WebExtension browser API Polyfill
Allows extensions written for the Promise-based WebExtension/BrowserExt API being standardized by W3C to be used without modification in Google Chrome.

Redux Resource
A tiny but powerful system for managing 'resources': data that is persisted to remote servers.

Accessible W3C-conformant accordion script written in ES6.

Module used at eBay to load custom web fonts. It uses a strategy to avoid both FOUT and FOIT. A precursor to CSS's font-display descriptor.

A lightweight, responsive, modern drag-and-drop library.

Words To Numbers
Convert words to numbers. Optionally fuzzy match the words to numbers.

A small library to create easily create page transitions.

The world's most versatile desktop notifications framework, with support for ES2015, third-party plugins, and more.

Immutable data structures that are backwards-compatible with normal arrays and objects.

Repository-ish pattern for your data, that implements best practices for working with and storing data on the client-side. 

A tiny (337b), reusable, and fast date formatter.

Expressive static types and invariant checks for JavaScript.

JavaScript Library Tools

A library of tree views implementations for well known front-end reactive frameworks such as Angular or React.

A tiny (~2.2Kb gzipped) wrapper built around fetch, written in TypeScript, with an intuitive syntax.

a Higher Order Component for Preact that resolves (async) values from a model and passes them down as props.

A TypeScript library for enums, inspired by Java enums and forked from Enumify.

Create GraphQL Server
A scaffolding tool that lets you generate a new Mongo/Express/Node.js GraphQL server project from the command line.

Explore, visualize, and prototype your UI components in Meteor.

CustomEase for GSAP
GreenSock plugin to free you from the limitations of canned easing options for animations. Create literally any ease imaginable.

Do you like this newsletter? Here's an option to show your support...
Make a One-time Donation via PayPal.me/WebToolsWeekly

React Tools

A simple and powerful React framework with minimal API and zero boilerplate.

Number Picture
A collection of low-level React components for declaratively composing animated, interactive SVG visualizations.

React Device Battery
Notifies your React app of the device battery status, based on the Battery Status API.

React CSS layout debugger.

Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, dropdown, select, combobox components.

A powerful React component that creates an abstraction over flexbox so you can create any layout in any browser.

Lets you write your forms as stateless function components, taking care of managing the local form state as well as the validation.

Flux with actions at center stage. Write optimistic updates, cancel requests, and track changes with ease.

React.js plugin for building animated draggable and customizable charts.

A Tweet for Thought

An oldie but a goodie for those working in QA.

Suggestions / Corrections

Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.

Before I Go...

Handy Bird. Now we're just getting silly.

Thanks to all for subscribing and reading!

Keep tooling,