Monthly Archives: August 2014

His 3-month sabbatical: “The original plan was to devote a month to getting my life back in order again, both mentally and physically”

Freelancer Jonnie Hallman’s fresh perspectives after a 3-month sabbatical


His key learnings included:

1. Establish routines that keep you focused and healthy. Join a gym and eat healthy.

2. Have the confidence and restraint to say no to clients. Empower yourself with the ability to turn down offers–even good offers.

3. Go at a reasonable pace to avoid burnout. Don’t be afraid to take things slowly.

4. Recognize that your sanity comes at a monetary cost–less work means less income. But decide that it is worth it.


HTML5 Prefetch: predict users actions and optimistically load resources ahead of time for better performance

Use HTML to tell the browser to prefetch content or even prerender a page


DNS prefetching is supported by IE9+ and all other major browsers. is already using dns prefetching on its web site:

Subresource prefetching is supported by Chrome. Example:

Content prefetching is supported by IE10+, Chrome and Firefox. Example:

Page prerendering is supported by IE11 and Chrome.

Read more from the source: Medium

HTML5 mockups of popular devices, to showcase your portfolio and spice up your website

You know those fancy device photos designers use in mockups? Well now you can use them in HTML.


Thanks to Tomi Hiltunen and Angelos Arnis you can superimpose your working HTML mockups onto a realistic rendering of devices including iPhone, iPad, iMac, MacBookPro, Galaxy S3, Surface.

There is even an element positioned over the device button to allow the button to do something.

Read more from the source:

Waldo: Search the JavaScript Object Model in under 1 KB

Have you ever needed to find a property or value buried in the catacombs of your JavaScript objects? Waldo to the rescue!


Here’s a tiny util that you can save as a bookmarklet and use to crawl the JavaScript object model of any web site. Waldo (thanks to @shinypb for the name!) lets you find and inspect instances by name, type or value, and it can be easily customized to add additional tests. It runs in the console on Chrome, Firefox, Safari and IE>8. It’s sourced on github. Feel free to fork it if you want to add more search methods or a spiffy UI.

Loading the Waldo script will create a global object called find which invokes a set of utility methods: byName, byNameContains, byType, byValue, byValueCoerced and custom. Each method will crawl the entire runtime JavaScript model from window down (unless otherwise specified) and report every object that matches the search term argument. There is also an optional options argument for specifying a) the root object for the search and b) the root of the object path that will display in the search results (the latter option is purely cosmetic).

Read more from the source: JavaScript, JavaScript…

The TC39 group (the panel charged with delivering ES6) has reached consensus on an abbreviated syntax for JavaScript function expressions

Watch for fat arrow syntax in ES6 along with its hard binding of the this keyword


Some notable characteristics of fat-arrow functions:

1. No prototype property and can’t be used as constructors

2. The `arguments` object is not available

3. They are always anonymous

4. `this` is hard bound to the parent scope where the function is declared

Some practical examples:

//return a new array containing the squares of the original…

[1, 2, 3, 4, 5].map(x => x * x);

//[1, 4, 9, 16, 25]


[‘caption’, ‘select’, ‘cite’, ‘article’].map(word => word.toUpperCase());


Read more from the source: JavaScript, JavaScript…

Why You Should Consider A Ligature Icon Font For Your Next Project

Taking advantage of ligatures allows you to create an icon font where the text “Cart” renders a shopping cart


From the article by Dudley Storey

However, there are three fundamental disadvantages to icon fonts, two of which are also shared by image sprites:

1. Most icon fonts are not accessible: typing “L” to produce a Like button means that visitors who use a text-to-speech service to read your site will only hear “L” as a description of the icon. While there are solutions to this issue, they use CSS tricks that are, in this author’s humble opinion, somewhat convoluted and better left behind.

2. Search engines are confronted with the same issue, as they read text, not icons, and “L” makes little sense to Google.

3. Looking up codes for icons and typing in HTML entities to produce them is a pain: as an example, see the character map for Entypo.

Ligature icon fonts eliminate both of these issues. As I’ve explained previously, ligatures are joined or merged letter forms that are generated to produce smoother type with better spacing: a single glyph to replace the otherwise ungainly “fi” letter pairing, for example.

Read more from the source: