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!
|
JavaScript 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.
handorgel
Accessible W3C-conformant accordion script written in ES6.
ebay-font
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.
draggable
A lightweight, responsive, modern drag-and-drop library.
Words To Numbers
Convert words to numbers. Optionally fuzzy match the words to numbers.
LookForward.js
A small library to create easily create page transitions.
Push
The world's most versatile desktop notifications framework, with support for ES2015, third-party plugins, and more.
seamless-immutable
Immutable data structures that are backwards-compatible with normal arrays and objects.
SuperRepo
Repository-ish pattern for your data, that implements best practices for working with and storing data on the client-side.
tinydate
A tiny (337b), reusable, and fast date formatter.
Forall.js
Expressive static types and invariant checks for JavaScript.
|
JavaScript Library Tools
Bosket
A library of tree views implementations for well known front-end reactive frameworks such as Angular or React.
Wretch
A tiny (~2.2Kb gzipped) wrapper built around fetch, written in TypeScript, with an intuitive syntax.
Wiretie
a Higher Order Component for Preact that resolves (async) values from a model and passes them down as props.
Ts-Enums
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.
Chromatic
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.
|
React Tools
Mirror
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-x-ray
React CSS layout debugger.
downshift
Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, dropdown, select, combobox components.
FlexView
A powerful React component that creates an abstraction over flexbox so you can create any layout in any browser.
Revalidation
Lets you write your forms as stateless function components, taking care of managing the local form state as well as the validation.
Microcosm
Flux with actions at center stage. Write optimistic updates, cancel requests, and track changes with ease.
Chartify
React.js plugin for building animated draggable and customizable charts.
|
|
