Web Tools Weekly Issue #70 (encoding URIs, JS Utils, Testing, Images)

Issue #70 (encoding URIs, JS Utils, Testing, Images)11/20/14

JavaScript has a few different methods available for dealing with URL (or URI) strings, and strings that are intended to be portions of a URI. These strings can be encoded or decoded, to ensure they are valid in the context for which they're going to be used.

Here's a simple example demonstrating the encodeURI() and decodeURI() methods:

var uri = 'http://webtoolsweekly.com/archive link.html#top';

uri = encodeURI(uri);
console.log(uri);
// http ://webtoolsweekly.com/archive%20link.html#top

uri = decodeURI(uri);
console.log(uri);
// http ://webtoolsweekly.com/archive link.html#top

(Note that I've broken up the URLs in the comments, so they aren't clickable in email clients)

Here the URI string has, technically, an invalid character: a space. To remedy this, we encode it, allowing the illegal character to be escaped. Then we can convert it back by decoding it.

Notice that the encodeURI() method didn't touch any of the other characters, including the slashes and the colon. These are ignored because they are understood by the method to be meaningful in a URI.

Notice, however, that the URI contains a pound/hash sign (#), which is also ignored. If you need to encode/decode a hash symbol, you would use encodeURIComponent() and its opposite method:

var uri = 'http://webtoolsweekly.com/archive link.html',
    uriCom = '#top';

uriCom = encodeURIComponent(uriCom);
console.log(uri + uriCom);
// http ://webtoolsweekly.com/archive link.html%23top

uriCom = decodeURIComponent(uriCom);
console.log(uri + uriCom);
// http ://webtoolsweekly.com/archive link.html#top

In this case, I'm encoding/decoding only the portion of the URI that gets appended to the end, which is how these latter two methods should be used.

Some points to keep in mind:

These methods replace the now deprecated escape() and unescape() methods.
encodeURI() ignores ASCII letters and digits and certain ASCII punctuation characters (hyphen, underscore, tilde, etc.)
As mentioned, encodeURI() also ignores the characters that can be commonly found in URIs, like the slash, question mark, at-sign, etc.
I'm not entirely sure, but I believe browser support for these goes back to at least IE9, and maybe earlier.

There's lots more we could talk about with these. Here are some relevant links:

Now on to this week's tools!

Support Web Tools Weekly: 384 pages of CSS for $7

JavaScript Utilities and Mini Libraries

window.fetch polyfill
"The global fetch function is an easier way to make web requests and handle responses than using an XMLHttpRequest."

Nome
"Direct access to location and weather data from an exposed JavaScript API allowing you to create context driven websites that deliver information relevant to your audience."

Dexie.js
"A Minimalistic Wrapper for IndexedDB."

angular-locker
A simple and configurable abstraction for local/session storage in AngularJS projects.

Alasql.js
"A lightweight client-side in-memory SQL database designed to work in browser and Node.js."

Contents
"Automatically generate table of contents for a given area of content." No dependencies.

Purplecoat.js
"Lets you create labeled overlays that can be triggered with a click. And you don't need to write a single line of JavaScript."

ProgressBar.js
"Beautiful and responsive progress bars with animated SVG paths."

Shoestring
"A lightweight, simple DOM utility made to run on a tight budget."

JuliusJS
"A speech recognition library."

Illookinati.js
Love the name/wordplay in this one. "Helps any element watch the mouse.. constantly."

ScaleDrone
A push messaging API to give your app real-time capabilities.

zoomwall.js
"A content-focused photo gallery using a horizontal masonry layout that scales up in lightbox mode."

Testing and Debugging Tools

QUAIL
"A jQuery plugin for checking content against accessibility guidelines."

Snap Tomato
"Your HTML, on your device, instantly. It's time to re-invent the way we test HTML5 on any device."

stats.js
A JavaScript performance monitor available as a widget or bookmarklet.

Karma
"On the AngularJS team, we rely on testing and we always seek better tools to make our life easier. That's why we created Karma – a test runner that fits all our needs."

Tenon.io
A website accessibility online checker and API.

Framote
Give someone a unique "Framote" URL and change the content on the fly, and the user doesn't need to reload the page or revisit the link, because the content will be updated automatically.

Reqres
"Test your front-end against a real API. A hosted REST-API ready to respond to your Ajax requests."

JS-Interpreter Demo
"A sandboxed JavaScript interpreter written in JavaScript. It allows for execution of arbitrary JavaScript code line by line. Execution is completely isolated from the main JavaScript environment."

Doorbell
"Gather in-app user feedback for free. Available on websites, iOS, and Android."

TMI
"Discover your image weight on the web."

Pretty Diff
An online code comparison tool.

Multimedia Tools

Polarr
"The world's most advanced online photo editor, free."

pngquant
"A command-line utility and a library for lossy compression of PNG images."

ZorroSVG
"Gives you the power of transparent PNGs for the size of a JPEG."

vivus
A small JavaScript library, with no dependencies, to make animating SVGs easy.

SoundKit
"A professional sound library designed for UI projects."

lazysizes
"A fast (jank-free) lazyloader for images (including responsive images), iframes and scripts/widgets."

JPEG Stripper
"Lossless removal of all metadata from JPEGs including geotagging, camera make/model and others."

Let's make thumbnails
Online, client-side, drag-and-drop tool that converts a group of images into a zip file of thumbnails.

Support Web Tools Weekly: 384 pages of CSS for $7

A Tweet for Thought

Developer Stefan Baumgartner tweeted an image humorously illustrating the different reactions team members have when a bug is found in a project.

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

This is pretty cool: NerdyData - A search engine for front-end source code.

Thanks to all for subscribing and reading!

Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly