TLDR

The code can be found here: bdadam/custom-icons.

The usage looks like this:

<x-icon type="some-icon"></x-icon>
...
<script src="icons.js" async></script>

The script basically puts an svg element inside the x-icon tag. This svg element can then - for example - be styled with CSS.

<style>
    [type="happy"] path {
        fill: red;
    }
</style>
...
<x-icon type="happy">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
        <path fill="#444" d="..."></path>
    </svg>
</x-icon>

The longer version

I have to admit that I always had a pain when I had to include a set of icons on webpages.

• I didn't want to use icon fonts, because they are sometimes problematic: accessibility problems, blurrines, etc.
• I didn't want to use inline SVGs either, because of cacheability and duplication.
• I didn't want to include a bunch of IMG tags, because of the many extra HTTP-requests.

So I was searching for a better way when I found out that I could have all the advantages of those techniques above. I always thought it would be pretty neat if we had some dedicated HTML element for icons. Like this here:

<x-icon type="some-icon"></x-icon>

This looks quite semantic and self explaining. We could use any tag name which is a valid name for custom elements - e.g. it must include a dash. There is a type attribute which defines which icon is shown. Easy. Bot how to achieve this?

JavaScript and WebPack for the rescue

The technique is behind the scenes quite simple. The input is just some SVG files. The output is a single JavaScript file which includes the content of all the SVG files and some loader code.

For the source code of a sample implementation please check out this GitHub repository: bdadam/custom-icons

The only magic what we need is WebPack with a custom loader: svgo-loader. This loader automagically loads the content of the required SVG files, minimizes it and provides it as normal string variable in the code.

It's hard to explain, please check out the sources.

Supported browsers

This technique works in all modern browsers. Though document.registerElement is only supported in recent versions of Chrome, we can already use this API now with a very smart polyfill from WebReflection. Thanks to the polyfill we have support back to IE9 and Android 2.2.

Browsers without native SVG support are unfortunately out for now. Maybe in the future if somebody still needs this, one can create a fallback JavaScript file with PNGs.

What is event delegation?

With event delegation we only set one event handler function, which then analyzes the event's target element and executes the intended handler function. This way we have better code readability and performance improves. There is no need to set new event handlers when the content dynamically changes. This is very handy for lists or tables.

In jQuery code we could just call

jQuery('#list').on('click', '.item', eventHandler)

Example: there is a list with 100 items. We want our eventHandler function to be called whenever a list item is clicked.

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>...</li>
    <li>100</li>
</ul>
<script>
    var list = document.getElementById('list');
    list.addEventListener('click', function eventHandler(event) {
        // one item in the list was clicked
        console.log(event.target); // this is that item
        event.target.style.backgroundColor = '#f00';
    });
</script>

This is just event bubbling, isn't it?

This first example was not very spectacular. It just uses event bubbling, which is natural in JavaScript.

But we can go further. What if only some specific elements should trigger our eventHandler function? This is also possible. With jQuery the code looks like this:

<ul id="list">
    <li class="yes">1</li>
    <li class="no">2</li>
    <li class="no">3</li>
    <li>...</li>
    <li class="yes">100</li>
</ul>
<script>
    $('#list').on('click', '.yes', function eventHandler(e) {
        // this function is only called,
        // when a list item with 'yes' class is called
        console.log(e.target); // this is the clicked list item
    });
</script>

What if I don't have jQuery?

That's absolutely fine. I don't use jQuery either anymore. Here we have some vanilla JavaScript code:

<ul id="list">
    <li class="yes">1</li>
    <li class="no">2</li>
    <li class="no">3</li>
    <li>...</li>
    <li class="yes">100</li>
</ul>
<script>
    function on(elSelector, eventName, selector, fn) {
        var element = document.querySelector(elSelector);

        element.addEventListener(eventName, function(event) {
            var possibleTargets = element.querySelectorAll(selector);
            var target = event.target;

            for (var i = 0, l = possibleTargets.length; i < l; i++) {
                var el = target;
                var p = possibleTargets[i];

                while(el && el !== element) {
                    if (el === p) {
                        return fn.call(p, event);
                    }

                    el = el.parentNode;
                }
            }
        });
    }

    on('#list', 'click', '.yes', function(e) {
        // this function is only called, when a list item with 'yes' class is called
        console.log(e.target); // this is the clicked list item
    });
</script>

Demo

Click on any list item. Where it says "click me!", the click will trigger an alert() message.

• won't work
• won't work
• click me!
• click me!
• won't work
• click me!
• click me!
• won't work
• won't work
• click me!

Use-cases

1. Large tables with many fields
2. Lists - the content of the parent element can be changed freely (paging), the event listener must be set only once
3. etc.

Browser Support

This code uses two core DOM API call Element.addEventListener and Element.querySelectorAll. These are supported in every modern browser and IE9+.

More resources on events

• Bubbling and Capturing @ javascript.info
• addEventListener @ MDN
• Event Order @ QuirksMode
• Events Advanced @ QuirksMode

What do you think, would you use this code in your projects? Tell me your thoughts in the comments.

In 2014 amongst other things I ...

• published 34 articles
• researched better webfont loading 1, 2
• learned static site generation with node.js tools 1, 2, 3, 4
• began using Instantclick.io for providing better percieved performance 1
• pimped up the good old textarea 1, 2
• wrote about some JavaScript thingies 1, 2, 3, 4, 5, 6, 7, 8
• discovered a simple usability improvement for Google Maps 1

Top 10 most popular posts

1. Loading webfonts with high performance on responsive websites
2. Better webfont loading with using localStorage and providing WOFF2 support
3. A simple usability trick for Google Maps
4. Demystifying AngularJS' dependency injection
5. Panning and scrolling background images using the canvas element
6. Worth watching: Douglas Crockford speaking about the new good parts of JavaScript in 2014
7. Building desktop apps with node.js and web technologies
8. Finding a random document in MongoDB (with benchmarks)
9. Loading web pages really fast - optimistic page loading with Instantclick.io
10. Automatically loading Grunt tasks with matchdep

What I learned from blogging in 2014?

• Blogging is fun
• No matter how much I understand the topic I'm writing about, it still takes a lot of time and effort to publish a post
• A few times I really used my blog to gather information about things I would have forgotten otherwise
• I want to go on and publish betters posts and more often

Resources:

Happy new year photo: Wikimedia Commons

Expectations

1. The users must see the text as soon as possible.
2. As longs as the font is loading, the text must be rendered with the fallback font so that users can see and read it.
3. Users shouldn't be annoyed with flickering text on each page load.
4. Modern browsers with WOFF2 support should receive the fonts in WOFF2 format. This means ca. 30% less filesize.

How to do this?

• Loading fonts as CSS asynchronously solves expectaions 1 and 2. But unfortunately it causes flickering on every pageload. The browsers already have rendered the text in the fallback font when they finish loading the webfont. So they replace the texts and this causes some flashing.

• The idea is to only load a font from the server once. Then we store the data into the localStorage. On subsequent requests we load the font directly from localStorage. This eliminates the flashing on subsequent page loads. Only the first load is affected by the flashing. So no. 3 is also solved now.

• It is quite hard to detect WOFF2 support in the browser if we don't want to rely on user agent detection. The best I could find is a very clever script from Filament Group which uses the font loading API. It's not 100% correct, but it doesn't provide false positives, only false negatives which is really acceptable in this case.

Overview of the script

1. We let the old browsers stop early. Testing for window.addEventListener or some knows user agents (older Android stock browser, Opera Mini, etc.) is good enough.
2. In some cases localStorage can be unreachable, although the browser supports WOFF fonts. For theses cases I provide some fallback.
3. Then we check whether the font is already stored in localStorage. If it is, we load it immediately.
4. If it hasn't been loaded before, we load it with an AJAX call. But first we check for WOFF2 support.
5. Then we store the data into localStorage and load the css text into a style element.

Lets take a look at the script

//This script must be placed in the HEAD above all external stylesheet declarations (link[rel=stylesheet])
function loadFont(fontName, woffUrl, woff2Url) {
    // 0. Many unsupported browsers should stop here
    var nua = navigator.userAgent;
    var noSupport = !window.addEventListener // IE8 and below
            || (nua.match(/(Android (2|3|4.0|4.1|4.2|4.3))|(Opera (Mini|Mobi))/) && !nua.match(/Chrome/)) // Android Stock Browser below 4.4 and Opera Mini

    if (noSupport) { return; }

    // 1. Setting up localStorage
    var loSto = {};
    try {
        // We set up a proxy variable to help with localStorage, e.g. when cookies are disabled
        // and the browser prevents us accessing it.
        // Otherwise some exceptions can be thrown which completely prevent font loading.
        loSto = localStorage || {};
    } catch(ex) {}

    var localStoragePrefix = 'x-font-' + fontName;
    var localStorageUrlKey = localStoragePrefix + 'url';
    var localStorageCssKey = localStoragePrefix + 'css';
    var storedFontUrl = loSto[localStorageUrlKey];
    var storedFontCss = loSto[localStorageCssKey];


    // 2. Setting up the <style> element, that we are using to apply the base64 encoded font data
    var styleElement = document.createElement('style');
    styleElement.rel = 'stylesheet';
    document.head.appendChild(styleElement);
    // Setting styleElement.textContent must be after this line, because of IE9 errors


    // 3. Checking whether the font data is already in localStorage and up-to-date
    if (storedFontCss && (storedFontUrl === woffUrl || storedFontUrl === woff2Url)) {
        // the css is still in the localStorage
        // AND it was loaded from one of the current URLs

        // 4. Applying the font style sheet
        styleElement.textContent = storedFontCss;
    } else {
        // The data was not present, or loaded from an obsolete URL
        // So we have to load it again

        // 5. Checking for WOFF2 support to know which URL we should use
        var url = (woff2Url && supportsWoff2())
            ? woff2Url // WOFF2 URL provided and supported
            : woffUrl; // only WOFF support


        // 6. Fetching the font data from the server
        var request = new XMLHttpRequest();
        request.open('GET', url);
        request.onload = function() {
            if (request.status >= 200 && request.status < 400) {

                // 7. Updating localStorage with the fresh data and applying the font data
                loSto[localStorageUrlKey] = url;
                loSto[localStorageCssKey] = styleElement.textContent = request.responseText;
            }
        };
        request.send();
    }

    function supportsWoff2() {
        // Source: https://github.com/filamentgroup/woff2-feature-test
        if (!window.FontFace) {
            return false;
        }

        var f = new FontFace('t', 'url("data:application/font-woff2,") format("woff2")', {});
        f.load();

        return f.status === 'loading';
    }
}

The full script and some Grunt tasks for minification are available on Github/bdadam/OptimizedWebfontLoading. There are also some demo files.

Where to put the script?

The script has to be in the HEAD of your page above all stylesheet declarations (link[rel=stylesheet]) so that it doesn't block page rendering (the browser doesn't have to wait for the CSSOM to be ready).

What happens when localStorage is not available?

This mostly happens when cookies are disabled or the website is loaded inside a WebView container in a native app. In this case the code still works and falls back to normal browser caching. The CSS file is requested on each pageload, but served from the browser cache - as long as the CSS file is served with proper caching headers.

Fallback font

I thinkt it is enough to only provide webfonts for those browsers which support the WOFF or WOFF2 format. This means ca. 90% of the users world wide. Other browsers should get the text rendered in a fallback font.

The users with these older browsers are going to be thankful, because we don't waste their limited resources (CPU, memory) on some fancy stuff.

Demo

Although the technique shown in this article is at the moment my preferred way of loading webfonts, for comparision I provide two more techniques.

1. Loading webfonts as CSS (async), then storing into localStorage for subsequent pageloads requests
2. Loading webfonts as CSS (async), but not using localStorage
3. Loading webfonts from external woff and woff2 files

Comparision

I ran some tests on webpagetest.org with 3G connection.

The first visit was basically the same for both the localStorage and the async CSS solution. They both first rendered the text in the fallback font, and then switched over to the webfont. Causing blinking once. Loading the fonts from external files lead to invisible text until the fonts were loaded. This deleayed rendering with 0.6 seconds.

No. 1 and 2 in the lead.

The second visit comparision also shows some differences between localStorage and async CSS. We can clearly see, that loading from localStorage doesn't cause any rerendering. Once the HTML is downloaded, the page is rendered immediately.

The async CSS way renders the page in the default font and then rerenders it with the webfont. This causes flickering for the user on every pageload.

No. 1 is the winner in this regard.

To illustrate the differences here are some filmstrip views:

Async CSS loading, using localStorage. No re-rendering.

Async CSS loading, without localStorage. Re-rendering visible.

Loading fonts externally. Rendering delayed until fonts are loaded.

Resources

• My prevoius article about webfont loading on responsive sites
• Woff2 feature test by Filament Group
• WOFF2 support @ caniuse.com
• Font loading support @ caniuse.com
• Web Fonts Performance: Making Pretty, Fast - By Ilya Grigorik
• Improving Smashing Magazine’s Performance: A Case Study
• How we make RWD sites load fast as heck

What do you think of this technique? Do you have some ideas to improve it? Please leave a comment.

Update

As @CrocoDillon recommended, I added the third (optional) argument to
new FontFace(..., ..., {}) when checking for WOFF2 support. Otherwise some browsers throw an exception (Chrome 35 and 36, Opera 22 and 23). Take a closer look at the pull request.

The "good parts" he identified in ES6

• ES6's new (proper) tail call optimization. So that "JavaScript becomes a real functional programming language".
• Ellipsis aka rest operator for variable number of function arguments.
  function x(...params) {}
• Modules - to come away from global variables
• The let statement for block scope variables -> "let is the new var"
• Destructoring let {a, b} = obj equals in ES5 var a = obj.a, b = obj.b;
• WeakMap which has a terrible name -> nobody wants to use something which is weak, everybody wants strong things

The bad parts

He admits that all the ES6 things are new and it's hard to decide whether they are going to be good or bad. But there are definitely things, where he feels they are going to be bad.

• The worst is class. It's only for Java programmers, who don't want to learn JavaScript. For those "Who don't know how miserable they are."

• Generators - which add much complexity but little value

• He also talks about that he changed his mind. There are things, which he considered to be good parts, but they aren't anymore.

• He stopped using the new keyword years ago. He uses Object.create instead.
• But he also stopped using Object.create (although it was only added for him to the language).
• It all only happened, because he stopped using this. So he doesn't need those.
• He also stopped using null, because it doesn't make any sense to have two kinds of undefined: null and undefined.
• He stopped using falsiness.
• He doesn't use for statements anymore, just the new native array methods or Object.keys.

  Object.keys(obj).forEach(function(key) { /* ... */ });

He made some thoughts about the next language after JavaScript

• Neither of Dart or TypeScript is the forward looking thing we need.
• Getting adoption of a new language is going to be extremely difficult, because programmers are as emotional as other people. Also every change needs a decade to get accepted.
• Getting away from classes is a good thing, but he's not an advocate of prototypal inheritance anymore.

• He proposes class-free object oriented programming aka using closures when writing objects. Like this:

  function constructor(spec) {
    let { member } = spec,
        { other } = other_constructor(spec),
        method = function() {
            // member, other, methid, spec
        };
  
    return Object.freeze({
        method,
        other
    });
  }

• He also proposes a new number type for the next generation programming languages. It's called DEC64. With this new - one and only - number type he wants to fight against problems like 0.1 + 0.2 != 0.3. (Binary Floating Points originating from 1950's) He also talks about the two types of requirements, business vs. sceintific - exact cent values vs. approximate values.

I think it was a very interesting talk. Douglas Crockford had many interesting points about programming in modern JavaScript. There are some points which are maybe debatable. What do you think? Do you agree with him? Do you have better ideas? Please share your thoughts in the comments below.

But also textareas have a big problem: they have a fixed height per default. You can either set the rows attribute to tell how many rows should be displayed, or you can set their style.height properties. But unfortunately there is no auto-height property.

The idea

After every change in the text we have to measure how high the content is. Fortunately there is a method to do it. element.scrollHeight gives us the height of the content, regardless of visible scrollbars. To be able to decrease the size we set the height each time back to zero so that scrollHeight reports the required minimum and not more. E.g. when the user deletes a line.

We also have to calculate the size of the border and outline, so that we don't give any chance for the content to be cut off, or that a scrollbar is shown.

Then we set the style.height property to the calculated height.

To do this every time, we use the oninput event, which is fired every time the text content changes. Contrary to onchange which only fires when the users clicks away.

Show me the code

<textarea data-adaptheight rows="3" cols="40" placeholder="Your input" style="padding: 16px; line-height: 1.5;"></textarea>
<script>
(function() {
    function adjustHeight(textareaElement, minHeight) {
        // compute the height difference which is caused by border and outline
        var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
        var diff = outerHeight - el.clientHeight;

        // set the height to 0 in case of it has to be shrinked
        el.style.height = 0;

        // set the correct height
        // el.scrollHeight is the full height of the content, not just the visible part
        el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';
    }


    // we use the "data-adaptheight" attribute as a marker
    var textAreas = [].slice.call(document.querySelectorAll('textarea[data-adaptheight]'));

    // iterate through all the textareas on the page
    textAreas.forEach(function(el) {

        // we need box-sizing: border-box, if the textarea has padding
        el.style.boxSizing = el.style.mozBoxSizing = 'border-box';

        // we don't need any scrollbars, do we? :)
        el.style.overflowY = 'hidden';

        // the minimum height initiated through the "rows" attribute
        var minHeight = el.scrollHeight;

        el.addEventListener('input', function() {
            adjustHeight(el, minHeight);
        });

        // we have to readjust when window size changes (e.g. orientation change)
        window.addEventListener('resize', function() {
            adjustHeight(el, minHeight);
        });

        // we adjust height to the initial content
        adjustHeight(el, minHeight);

    });
}());
</script>

Demo

Just type in some text and see it for yourself. Initial height is 3 rows.

Tradeoffs

Every keypress causes repaints. Because we set the height of the textarea to 0 and then to the calculated value. This should however be negligible, because most users can only type at most a few characters a second. Therefore it shouldn't cause any noticeable performance drawbacks.

Where to use it for?

There are many cases in which this can be useful. Amongst others:

• Text editors
• Code editors
• Comment boxes

Do you like it? Do you already use it? Just leave a comment below - the comment box is auto adjusted by default. :)

Here is my simple guide on what to do, to offer the optimal user experience without having to avoid the expensive accessories (aka webfonts).

0. TLDR

The essence of the technique:

1. Only serve fonts in woff format
2. Other browsers get the old "websafe" fonts
3. Download the font in "binary" format and optimize it
4. Serve the fonts yourself
5. Serve them as CSS files - base64 encoded data URIs
6. If the user doesn't have the font, load it asynchronously and store in localStorage
7. Otherwise load it from localStorage without accessing the server
8. Have fun because your site renders much faster and your users have a much better usability experience

For those who are still reading here are my explanations for the points above.

Update - 2014/10/09

If you don't believe in this optimization, I created two demo pages. Just test them and take a look at how resources are loaded, what is blocking, what isn't.

1. Demo page: Loading from Google Fonts
2. Page Speed Insights: Loading with Google Fonts (79/100)
3. Demo page: Loading Asynchronously and serving from localStorage later on
4. Page Speed Insights: Async loading/localStorage (100/100)

1. Browser support

According to caniuse, 84% of users' browsers support woff format. The only exceptions are the usual old browsers - IE8 and old stock android browsers. Therefore it is mostly enough to only provide webfonts for the modern browsers which support the woff format. The old ones should only show a fallback font (e.g. Arial). The users will also be thankful for having better performance browsing your website. Just try to find something which fits in your design.

2. Don't use external providers like Google Fonts or Typekit

They either cause many extra blocking requests or annoying blinking if loading asynchronously. We'll see shortly that there is a much better way of serving webfonts.

3. The licence matters

Choose a webfont which you can serve yourself. Unfortunately not every licence allows this. Fortunately there are many which do - like the open source ones. Some of them are Open Sans or Source Sans Pro. When you found your font, download the "binary" files (otf or ttf).

4. Optimizing, reducing size, generating the CSS

Head on over to the Font Squirrel Webfont Generator.

When choosing expert mode we can choose to remove some charsets. You have to decide which character sets you really need. Is your content only in english? Then you just need a basic subset. Is your content in chineese? Then you most probably need everything.

It is important to choose the option to generate CSS files which contains the base64 encoded fonts. This file is what we really need.

5. Serving the CSS file

This file is going to be quite large (up to 100-300 kB) depending on your choice on charsets and the other options. Therefore it is important to gzip it correctly and setting strong cacheability when serving it to the users.

Fortunately you are going to serve this file only once for your visitors. The first time, when the user doesn't have the font file, their browser downloads it asynchronously and stores it in localStorage. This time users with slower connections can see when the browsers repaints the fallback fonts with your webfonts, but it only happens at most once. Many users won't notice anything at all.

From the second page load on you just load the CSS file from the localStorage. Which is reasonably fast (5-50ms). The users won't see any blinking, because all the operations are synchronous, but only take a couple of milliseconds.

6. Show me the code

Since we store the file in localStorage this technique only needs client side code. Here you are.

<head>
...
<script>
(function(){
    function addFont() {
        var style = document.createElement('style');
        style.rel = 'stylesheet';
        document.head.appendChild(style);
        style.textContent = localStorage.sourceSansPro;
    }

    try {
        if (localStorage.sourceSansPro) {
            // The font is in localStorage, we can load it directly
            addFont();
        } else {
            // We have to first load the font file asynchronously
            var request = new XMLHttpRequest();
            request.open('GET', '/path/to/source-sans-pro.woff.css', true);

            request.onload = function() {
                if (request.status >= 200 && request.status < 400) {
                    // We save the file in localStorage
                    localStorage.sourceSansPro = request.responseText;

                    // ... and load the font
                    addFont();
                }
            }

            request.send();
        }
    } catch(ex) {
        // maybe load the font synchronously for woff-capable browsers
        // to avoid blinking on every request when localStorage is not available
    }
}());
</script>
...
</head>

7. What did we achieve

1. Eliminated at least one - but typically many - blocking requests
2. At most one blinking for the user when the fallback font gets replaced by the webfont (first visit, first request)
3. Faster render time on the first page request
4. Better score on Google Page Speed Insights and WebPageTest.org

8. See it in action

This technique is used on my blog. You can test it with your smartphone, tablet or laptop. It's fast, I promise. :)

There are still some fine details which are missing from this post. If you have questions or feedback, you are welcome to leave a comment.

Update - 2014/10/11

A Twitter user, @Kseso, made me aware of another method, which also proceeds to a 99/100 score on Google Page Speed Insights. The method is to inline the CSS what Google Fonts delivers.

I advise against this method, because it delays text rendering quite a lot. So let's take a deeper look what happens here.

1. We define font faces directly in the HTML file like this:

   <head>
   ...
   <style>
   @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
   src: local('Source Sans Pro'),
     local('SourceSansPro-Regular'),
     url(http://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlBBHWFfxJXS04xYOz0jw624.woff) format('woff');
   }
   </style>
   ...
   </head>

2. The browser doesn't start to fetch the font file, until it doesn't know whether it is needed at all somewhere in the page.
3. The browser waits until DOM and CSSOM are constructed
4. The browser starts to fetch the font file from Google Fonts (please notice, there is also an extra DNS request for fonts.gstatic.com). This timeline shows that the browser only starts fetching the font file, just before the DOMContentLoaded event.
5. If this wasn't bad enough, most browsers will just render blank text, where those font faces are used:
   1. Only IE starts rendering immediately with the fallback font
   2. Firefox and Chrome35+ wait for the font download to complete with a 3 seconds timeout (after which the fallback font is used)
   3. Safari and Chrome pre 35 wait for the font download to complete without any timeout

Therefore on slow connections you will delay rendering of your text content up to 3 seconds in most browsers. In worst case, if your font takes ages to load (e.g. because of bad mobile connection), Safari users will never see your text content and just leave your page. Your users can end up seeing a white page until the timeout kicks in.

More info can be found on Ilya Gregorik's blog.

I also created a test page, where you can check it out yourself.

Resources

• Web Fonts Performance: Making Pretty, Fast - By Ilya Grigorik
• Improving Smashing Magazine’s Performance: A Case Study
• How we make RWD sites load fast as heck

Translations

This article was translated to Russian by Максим Усачев.

As web developers we usually want to anything to load pages faster for the user. What about if started loading a page, before the user clicks a link?

Optimistic page loading

It is absolutely possible to make the user experience much better by loading content much faster. The trick is, to start (optimistically) loading the page when the user only just hovers over a link. There is a significant delay between hovering and clicking - usually more then 100 ms. We can use this time to prefetch the next page which is behind the link, so that we can show it right after the click event was fired.

You can see this trick in action for example on this blog. Just click on some links on the page.

Instantclick.io

You can get this tool here: http://instantclick.io/.

Just put a single script into your page and you should be almost fine. Maybe you need some blacklisting/whitelisting, so that some links are not prefetched automatically. Or maybe you want some scripts to execute on every request. Everything is easily doable. Just head over to the downloads section. There are some useful information about the integration.

They also have a test page, where you can measure how much time you can shave off of the load time. It measures the time difference between mosuedown event and click event - and also between touchstart event and click event.

Mousedown instead of hover

If a web page has many links, it is better to only prefetch when the user really pressed the mouse button. It still gives a decent advantage over the traditional way.

Touch support

The library comes with touch support out of the box.

Do you like it? Do you already use this library? Tell me about your experience in the comments.

This small library is called jsfx. Info on usage and a demo site can be found on its GitHub page.

How does it work?

This lib generates wave files as data URIs and then feeds them to an <audio> element.

Demo

Just click on the buttons to play the corresponding sound effects.

This blog is also statically generated. Statically generating websites has many advantages. Some of these are

1. These sites can be hosted everywhere
2. No backend to be hacked
3. Outstanding performance
4. etc.

The boilerplate code can be found on GitHub: bdadam/static-site-boilerplate

What can this boilerplate do for you?

1. It generates html from markdown files with the help of Assemble.
2. It generates minified and optimized css file(s) with less and uncss
3. It generates minified and optimized JavaScript files with RequireJS
4. During development the affected files are regenerated when something changes (GruntJS watch task)
5. Local webserver with Livereload to immediately see what changes and what does it look like

How to use it?

1. Clone this repository git clone https://github.com/bdadam/static-site-boilerplate
2. Install node dependencies npm install
3. Install bower dependencies bower install
4. Simply run grunt build to see that everything works
5. Run grunt for starting "development mode"
6. Then edit some files in the content folder and watch the html being regenerated and automatically refreshed in the browser

What is planned for future releases?

1. Automatically running JavaScript unit tests with Jasmine
2. Supporting browserify for building JavaScript files
3. Adding some Handlebars helpers
4. Maybe some more partials and templates
5. Some real examples where you can see it in action

I would be glad to hear your feedback in the comments.

What is matchdep?

Matchdep is a tool which can filter node.js dependencies, which are in the package.json file.

Installing it is very easy: npm install --save matchdep

Automatically loading GruntJS tasks

require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

What we are doing here is: basically reading all (dev)dependencies from the package.json and filtering those out which begin with 'grunt-'. These are tasks like all Grunt contrib tasks (grunt-contrib-concat, grunt-contrib-less, grunt-contrib-copy, etc.) and other Grunt specific tasks (like grunt-browserify or grunt-hashres). After filtering we load them as tasks.

What can matchdep be used for besides loading Grunt tasks?

Honestly I must say, I have no idea. But this is still pretty cool, that we don't have to include each grunt plugin individually.

Usability problem

If you embed Google Maps via its JavaScript API, there is usually a usability question: What should happen, when the users scroll over the map with their mouse wheels? The API defaults say: the user should zoom the map.

But that's in many cases not what users would expect. Especially when the map is large. Sometimes they just want to scroll the page without zooming the map or having any interaction with it at all.

How to solve it

There is a possible solution which is very easy and works for many users:

1. Before they had any interaction with the map, disable zooming with the mouse wheel
2. After they had an interaction, enable zooming with the mouse wheel
3. When they click away, or interact with other parts of the page, disable zooming with mouse wheel again

Demo

1. Just scroll with the mouse wheel over the map
2. Click onto the map
3. Start zooming in and out with the mouse wheel
4. Click somewhere outside of the map
5. Scroll with mouse wheel over the map to just scroll the page
6. Repeat these steps [at most a few times - no endless loop :)]

Update (16/03/2014)

I edited the source code to use mousedown event instead of click. This helps when the user drags the map - dragging counts also as an interaction with the map.

Source code

var el = $('#map');
var map;

function enableScrollingWithMouseWheel() {
    map.setOptions({ scrollwheel: true });
}

function disableScrollingWithMouseWheel() {
    map.setOptions({ scrollwheel: false });
}

function init() {
    map = new google.maps.Map(el[0], {
        zoom: 10,
        center: new google.maps.LatLng(47.49840560, 19.04075779),
        scrollwheel: false // disableScrollingWithMouseWheel as default
    });

    google.maps.event.addListener(map, 'mousedown', function(){
        enableScrollingWithMouseWheel()
    });
}

google.maps.event.addDomListener(window, 'load', init);

$('body').on('mousedown', function(event) {
    var clickedInsideMap = $(event.target).parents('#map').length > 0;

    if(!clickedInsideMap) {
        disableScrollingWithMouseWheel();
    }
});

$(window).scroll(function() {
    disableScrollingWithMouseWheel();
});

For this mini tutorial I'm using this pattern from subtlepatterns.com

 

Before on the left, after on the right

Here is what to do:

1. Open the picture in Gimp
2. Get the hex code of the color, which you want to switch (in this case fac564)
3. Then go to Colors > Color to Alpha... (If it's grayed out, just switch the Image > Mode from Indexed to RGB)
4. After this you should see the same image, just with transparent background color. So now we create a new background layer with the desired color.
5. At the end just export the new image and have fun

The steps as images

There are two common scenarios for simple 2D games:

• There is a huge background image for the entire level. All the activities have this same background image, but the viewport's position is chaging
• There is a small image which is scrolled all the time (tipically from right to left) as the player advances

Panning the viewport inside the background image

Demo

Please click on the button to start the animation.

How it works

We have a function which is called for every frame our game draws. In this method we calculate the position of the viewport. For this basic example I chose to derive the position from the elapsed time. Therefore the camera takes an elliptical path.

function draw(delta) {
    totalSeconds += delta;
    var x = -1 * (img.width - canvas.width) / 2 * (1 + Math.cos(totalSeconds / Math.PI));
    var y = -1 * (img.height - canvas.height) / 2 * (1 + -Math.sin(totalSeconds / Math.PI));

    context.drawImage(img, x, y);
}

Scrolling the background image infinitely

In the second case the background image is scrolling infinitely as time and the player advances. It's like when playing Mario, but the camera is centered on Mario the whole time.

In the animation above we can see, that for this effect we need at least 2 images (can be the same) or more, depending on the viewport size.

Demo

Please click on the button to start the animation. The vertical black lines mean the edges of the single images. For this example I'm using the same image and we have a constant speed of 100 pixels/sec.

How it works

The background position is also derived from the elapsed time (constant speed).

1. We calculate how many images are needed to cover the viewport: Math.ceil(canvas.width / img.width) + 1
2. We calculate the current X-position: totalSeconds * vx % img.width. Please note the modulo operator here.
3. We store the current context state and translate our canvas to make the drawing easier.
4. We draw the images - one after the other.

5. We restore the context's state.

   function draw(delta) {
    totalSeconds += delta;
   
    var vx = 100; // the background scrolls with a speed of 100 pixels/sec
    var numImages = Math.ceil(canvas.width / img.width) + 1;
    var xpos = totalSeconds * vx % img.width;
   
    context.save();
    context.translate(-xpos, 0);
    for (var i = 0; i < numImages; i++) {
        context.drawImage(img, i * img.width, 0);
    }
    context.restore();
   }

All the code which calls our draw() function

In order for this to work, we have some more work to do. This is the setup code I used for these examples.

1. I used some basic requestAnimationFrame polyfill
2. The animation gets only started after the image is loaded successfully (onload).
3. Some start/stop logic and button
4. And the loop() function which gets called in every frame when our animation is running. Here we need requestAnimationFrame().

(function() {
    window.requestAnimationFrame = window.requestAnimationFrame
            || window.webkitRequestAnimationFrame
            || window.mozRequestAnimationFrame
            || function(callback) { window.setTimeout(callback, 1000 / 60); };

    var canvas = document.getElementById('bg');
    var context = canvas.getContext('2d');
    var looping = false;
    var totalSeconds = 0;

    var img = new Image();
    img.onload = imageLoaded;
    img.src = 'IMG_SOURCE';

    function imageLoaded() {
        draw(0);

        var btn = document.getElementById('btnStart');
        btn.addEventListener('click', function() {
            startStop();
        });
    }

    var lastFrameTime = 0;

    function startStop() {
        looping = !looping;

        if (looping) {
            lastFrameTime = Date.now();
            requestAnimationFrame(loop);
        }
    }

    function loop() {
        if (!looping) {
            return;
        }

        requestAnimationFrame(loop);

        var now = Date.now();
        var deltaSeconds = (now - lastFrameTime) / 1000;
        lastFrameTime = now;
        draw(deltaSeconds);
    }


    function draw(delta) {
        /* Here happens some magic. */
    }
}());

In order to see the full source code, please view these pages

1. Panning the viewport inside the background image
2. Scrolling the background image

Finding one random document - Method 1

1. First of all you have to count how many documents you have in the collection. Optionally you can provide a filter condition (query).

   N = db.myCollection.count(query)

2. Then you have to generate a random number which is less than the number you counted before.

   R = Math.floor(Math.random() * N)

3. Then skip that many records and retrieve the next one. If you provided a query at the first step, here you have to use it as well.

   db.collection.find(query).limit(1).skip(R))

Let's see an example

var query = { state: 'OK' };
var n = db.myCollection.count(query);
var r = Math.floor(Math.random() * n);
var randomElement = db.myCollection.find(query).limit(1).skip(r);

Pro:

The data can be intact, no preparation is needed.

Con:

• This one is the slowest method. But this approach may still be OK, depending on the case. It definitely has tradeoffs when the collection has a large amount of documents: The skip command has to scan at least R number of documents. If the number of documents retrieved by the query is large, the random number R is also going to be large.

Finding one random document - Method 2

For this method to work, the data has too meet some constraints:

• Each document should have a field with a random number, e.g. when saving db.myCollection.save({ name: 'name', ..., rnd: Math.random() })
• The collection should have an index on this field, e.g. db.myCollection.ensureIndex({ rnd: 1 })

When the data is all set up, querying is rather easy:

var query = {
    state: 'OK',
    rnd: {
        $gte: Math.random()
    }
};

var randomElement = db.myCollection.findOne({ $query: query, $orderby: { rnd: 1 } });

Pro:

• Not having to skip any document.

Con:

• Data has to have field with a random number stored in it
• This random field should also have an index
• Sorting reduces performance

Finding one random document - Method 2.5

There is a simpler variant of the second method. It doesn't retrieve a truly random document, but it may be enough for the specific case.

var query = {
    state: 'OK',
    rnd: {
        $gte: Math.random()
    }
};

var randomElement = db.myCollection.findOne(query);

Please note that there is no $orderby. This can improve performance. The price is that documents are sorted in "find order" rather than "random order". But this could be fine in many cases.

Pro:

• Not having to skip any document
• Performance

Con:

• Not truly random document
• Data has to have a field with a random number stored in it
• This field also should have an index

Benchmarks

I created a very simple benchmark. The setup looks like this:

var i = 1000000;
while(i) {
    db.test.save({
        name: "some lorem ipsum not important",
        rnd: Math.random()
    });
    i--;
}
db.test.ensureIndex({ rnd: 1 });

Then I ran all the three methods on my computer with a local database, 10000 times each.

var startDate = new Date();
var i = 10000;
while (i) {
    var n = db.test.count();
    var r = Math.floor(Math.random() * n);
    var randomElement = db.test.find().limit(1).skip(r);
    i--;
}
var t1 = new Date() - startDate;


var startDate = new Date();
var i = 10000;
while (i) {
    var query = {
        rnd: {
            $gte: Math.random()
        }
    };

    var randomElement = db.myCollection.findOne({ $query: query, $orderby: { rnd: 1 } });
    i--;
}
var t2 = new Date() - startDate;


var startDate = new Date();
var i = 10000;
while (i) {
    var query = {
        rnd: {
            $gte: Math.random()
        }
    };

    var randomElement = db.myCollection.findOne(query);
    i--;
}
var t3 = new Date() - startDate;


print(t1, t2, t3);

And the winner is "Method 2.5"

Here are my benchmark results:

Although the differences are not quite big, the winner is definitely "Method 2.5". I think, when using more realistic data, the differences are also going to be much larger.

Do you have your own benchmark results with different data? Please feel free to comment it.

Why would you track clicks on a website?

I think the answer to this question is very easy: to know, what users are clicking and where they are clicking. You maybe have questions like these:

• Are users using the breadcrumbs?
• Are users clicking on 'back to' links?
• Do they click on the images in the gallery?
• What works better, a button or a link?
• Are red buttons working better than green buttons on a specific page?
• etc.

Let's find the answers

<button id="playVideo">Play video</button>
<script>
    $('#playVideo').click(function() {
        video.play(); // doing some work

        _gaq.push(['_trackEvent', 'Videos', 'Play', video.title]); // the 'old' way, when using the old tracking code
        /* or */
        ga('send', 'event', 'Videos', 'Play', video.title); // when using Universal Analytics
    });
</script>

This way you track events in Google Analytics which show up under Behaviour > Events on your Dashboard. In the example above we are always generating an event when somebody clicks on the play button. With these events we also store what really happened: category=Videos, action=Play, label='title of video'.

Which link was clicked?

We just have to set the arguments properly, and then we exactly know which link was clicked.

<a href="/my-cool-page.html" class="greenButton">Go to my cool page</a>
...
<a href="/my-cool-page.html" class="redButton">Go to my cool page</a>
...
<a href="/my-cool-page.html" class="blueButton">Go to my cool page</a>

<script>
$('.greenButton, .redButton, .blueButton').click(function() {
    var className = this.className;

    _gaq.push(['_trackEvent', 'Click', 'Link', className]); // the 'old' way, when using the old tracking code
    /* or */
    ga('send', 'event', 'Click', 'Link', className); // when using Universal Analytics
});
</script>

This method is also perfectly suitable for A/B testing. We just have to take care of displaying each variant equally for the visitors of our site.

What the docs don't say

The modern browsers are quite fast. When users click on links, it happens quite often, that Google Analytics has not finished tracking the event. But the browser navigates away from the page, and at the end the event doesn't get registered at all.

What to do?

With listening to mousedown event, we can reduce the number of lost events:

$('.myButton').mousedown(function() {
    // track click
});

Or using a little hack, we can track even more events. But this one has a tradeoff: the user has to wait more till the new page is loaded. In some situations it is maybe acceptable, but try to avoid this because slower loading pages usually mean worse user experience. Which means less pageviews, more frustrated users and less conversion.

Here is the hack:

$('.myLink').click(function() {
    var href = this.href; // getting the URL of the next page

    setTimeout(function() {
        window.location.href = href; // after a timeout of 250ms we navigate to the URL, where the user wanted to go
    }, 250);

    return false; // preventing default behaviour, so that the browser doesn't navigate away
});

References:

• Event tracking with Universal Analytics
• Event tracking with ga.js

Comparing two variables almost like in plain JavaScript

Thankfully I found a similar question on Stack and a superb answer from a user called Jim.

Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
    switch (operator) {
        case '==':
            return (v1 == v2) ? options.fn(this) : options.inverse(this);
        case '===':
            return (v1 === v2) ? options.fn(this) : options.inverse(this);
        case '!==':
            return (v1 !== v2) ? options.fn(this) : options.inverse(this);
        case '<':
            return (v1 < v2) ? options.fn(this) : options.inverse(this);
        case '<=':
            return (v1 <= v2) ? options.fn(this) : options.inverse(this);
        case '>':
            return (v1 > v2) ? options.fn(this) : options.inverse(this);
        case '>=':
            return (v1 >= v2) ? options.fn(this) : options.inverse(this);
        case '&&':
            return (v1 && v2) ? options.fn(this) : options.inverse(this);
        case '||':
            return (v1 || v2) ? options.fn(this) : options.inverse(this);
        default:
            return options.inverse(this);
    }
});

Here is how one would use it:

\{{#ifCond value "===" value2}}
    Values are equal!
\{{else}}
    Values are different!
\{{/ifCond}}

Update

As Eugene Mirotin pointed out, this solution could be much DRYer, so here is an improved variant of the code which does the same thing:

(function() {
    function checkCondition(v1, operator, v2) {
        switch(operator) {
            case '==':
                return (v1 == v2);
            case '===':
                return (v1 === v2);
            case '!==':
                return (v1 !== v2);
            case '<':
                return (v1 < v2);
            case '<=':
                return (v1 <= v2);
            case '>':
                return (v1 > v2);
            case '>=':
                return (v1 >= v2);
            case '&&':
                return (v1 && v2);
            case '||':
                return (v1 || v2);
            default:
                return false;
        }
    }

    Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
        return checkCondition(v1, operator, v2)
                    ? options.fn(this)
                    : options.inverse(this);
    });
}());

var a = [0, 1, 2, 3, 4, 5, 6];
console.log(a[3]); // 3
console.log(a[[3]]); // 3
console.log(a[[[3]]]); // 3
console.log(a[[[[3]]]]); // 3
console.log(a[[[[[3]]]]]); // 3
console.log(a["3"]); // 3

console.log(3 == [3]); // true
console.log(3 == [[3]]); // true

console.log(3 === [[3]]); // false

3 === Number([3].valueOf().toString()) // true
console.log([3].valueOf()) // [3]
console.log([3].valueOf().toString()) // 3
console.log(Number("3")) // 3
// therefore:
3 === Number([3].valueOf().toString()) // true

Resources - questions on Stack Overflow:

• Strangest language feature
• Why does 2 == [2] in JavaScript?

function whatDoesThisReturn() {
    try {
        return false;
    } finally {
        return true;
    }
}

console.log(whatDoesThisReturn());

Basically the finally block is called after the try block, therefore it overrides the return value.

So this function returns true.

I tried to install the pm2 package on an Ubuntu 12.04 Server (sudo npm install -g pm2@latest), but the package just didn't want to install correctly. I kept getting gyp error messages and this one: "OSError: [Errno 13] Permission denied". I thought it was impossible to get this error since I was running the install command as root (sudo).

Installing modules with the unsafe-perm flag

And after a while I found the solution: using the unsafe-perm flag. sudo npm install -g pm2@latest --unsafe-perm

What the docs say about this flag:

If npm was invoked with root privileges, then it will change the uid to the user account or uid specified by the user config, which defaults to nobody. Set the unsafe-perm flag to run scripts with root privileges.

And it worked for me like a charm!

Honestly, I have to admit, that it is not 100% clear to me, why it made any difference in this case. I suspect that it was because of gyp. Does anybody maybe have a better explanation?

Defining properties on objects with Object.defineProperty()

var obj = {};

Object.defineProperty(obj, "myProperty", {
    enumerable: false,
    configurable: false,
    writable: false,
    value: 13
});

The first two arguments are very obvious, but the third one is where all the magic happens. This argument is a property descriptor. Let's see what we can do with it.

Enumerable

This attribute simply tells whether the property should show up in enumerations like for ... in loops or in Object.keys().

Defaults to false.

Configurable

This attribute sets whether the property can be reconfigured at a later point in the code or whether it can be deleted from the object.

Defaults to false.

Writable

This attribute sets whether a property is read-only or not.

Defaults to false except in Google Chrome.

Value

The value of a property can be anything, any valid JavaScript value (Number, Date, Array, Function, etc.).

Defaults to undefined.

Defining getter and/or setter functions

It is also very easy to define getter and setter functions. Let's take a look at the example below:

var obj = {};
var propValue = 100;
Object.defineProperty(obj, "prop", {
    get: function(){ return propValue; },
    set: function(newValue){ propValue = newValue; },
    enumerable : true,
    configurable : true
});

Invalid cases

var obj = {};
Object.defineProperty(obj, 'undeletable', { value: 100, configurable: false });
console.log(obj.undeletable); // 100
delete obj.undeletable;
console.log(obj.undeletable); // 100

var obj = {};
Object.defineProperty(obj, 'notWorking', {
    value: 100,
    get: function() { return 300; }
});
// TypeError: Invalid property. A property cannot both have accessors and be writable or have a value, #<Object>

var obj = {};
Object.defineProperty(obj, 'notWorking', {
    get: function() { return 300; },
    writable: true
});
// TypeError: Invalid property. A property cannot both have accessors and be writable or have a value, #<Object>

Defining multiple properties on the same object

var obj = {};

Object.defineProperties(obj, {
    "hello": {
        value: "Hello",
        writable: true
    },
    "world": {
        value: "World!",
        writable: false
    }
});

Browser support

Good news, the Object.defineProperty() is supported in all modern browsers. The only problematic one is Internet Explorer 8, which only allows to define properties on DOM objects).

Performance

At the moment, using Object.defineProperty() is definitely slower than using basic properties like in the old days - but not that much. For more detailed performance tests take a look at jsperf.com.

Resources:

• Object.defineProperty() on MDN
• Object.defineProperties() on MDN

Screenshot from the game

I found a very interesting project on Github: FullScreenMario. As the creator says:

An HTML5 remake of the original Super Mario Brothers - expanded for wide screens.

The official website of the game is not working anymore, since Nintendo complained about copyright infridgement.

Good news

We can still play the game. We just have to download the sources (or clone the repository), start a webserver locally and navigate to the local url.

1. Download this: master.zip
2. Extract the files
3. cd path/to/files
4. Start a webserver (e. g. serve serve)
5. Navigate to the game

Have fun!

Screenshot of a hello world app created with node-webkit

A few hours ago I found this project called node-webkit. It seems to be living and mature enough to use it. But since I don't need it now, I blog about it, so that I can remember it in the appropriate moment.

How does it work?

1. Write your application.
2. Create a zip file of all your assets (call it package.nw).
3. You can just ship this file along with the node-webkit executable file
4. Alternatively you can create an executable file from the package with a few dll files along
5. If you want to have a single executable file, it's recommended to box the files with Enigma Virtual Box

Attack of the contexts

There is a concept which might be a little crazy at first sight. There are different contexts with different global object for node modules and UI windows. In the web context we have a window object (or many if we have multiple windows), which we don't have in a node module. If we have to reach the window object of the current UI context, we have to pass it to the node module. We get most of the problem with instanceof because the constructors like Array or Date are children of the context-dependent global object. After just quickly building a "hello world" app I can't really tell to what extent this can be a problem or difficulty.

Supported platforms

There are prebuilt binaries for Windows, OSX and Linux.

References:

• For more details and docs take a look at the project's Github site. The features are well-documented.
• Creating Desktop Applications With node-webkit
• WebApp to DesktopApp with Node-Webkit

Redirecting www to non-www with if statement

server {
    listen 80;

    server_name www.example.com example.com;

    if ($host = 'www.example.com' ) {
        # redirecting www.example.com to example.com
        # path, query string are retained
        rewrite  ^/(.*)$  http://example.com/$1  permanent;
    }
}

Please note that if is considered evil inside NGINX configuration, but it is perfectly OK in this case. The official docs say, that there are two cases when if is "100% safe":

• redirect (our case)
• return

if ($request_method = POST ) {
    return 405;
}
if ($args ~ post=140){
    rewrite ^ http://example.com/ permanent;
}

Redirecting www to non-www without if statement

The trick in this case is that we have to define two server blocks.

server {
    listen       80;
    server_name  www.example.com;

    # redirecting www.example.com to example.com
    # path, query string are retained
    return       301 http://example.com$request_uri;
}

server {
    listen       80;
    server_name  example.com;
    ...
}

Redirecting non-www to www

server {
    listen       80;
    server_name  example.com;

    # redirecting example.com to www.example.com
    # path, query string are retained
    return       301 http://www.example.com$request_uri;
}

server {
    listen       80;
    server_name  www.example.com;
    ...
}

Installing bower is as simple as typing npm install -g bower. If you don't know bower, here is what the docs say about it:

Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat.

Requirements for a bower package:

• The package sources should be hosted in a git repository
• Each package has to have a JSON manifest
• Using semver git tags

Registration steps

1. Generate a JSON manifest with bower init. During the process we have to answer some questions.
2. Check the generated bower.json file and fill in the missing parts if needed (e.g. dependecies, keywords, author, etc.)
3. Commit the json file and set a semver tag with git tag -a v1.0.0 -m 'my version 1.0.0'
4. Register your package with calling bower register packageName git://packageRepository-url
5. When everything goes fine, the package should be registered now

At the end of the process everybody should be able to install your package with bower install packageName. For a more detailed example you can take a look at my PubSub package.

If you don't know what does dependency injection look like with AngularJS, here is an example:

<div ng-controller="GreetCtrl">
    Hello {{name}}!
</div>
<script>
function GreetCtrl($scope, $rootScope) {
    $scope.name = 'World';
    $rootScope.department = 'Angular';
}
</script>

We just have to put $scope and $rootScope into the function arguments, and when Angular calls the controller (GreetCtrl) it knows with parameters it has to call the function.

How do they do it?

It's fairly easy in JavaScript to get the source code of the every function. We just have to call the .toString() method of the function objects.

function sum(x, y) {
    alert(x + y);
}

console.log(sum.toString()); // prints the complete code of the function

Here we go. We just have to find a way to extract the argument list of our function.

// The following simplified code is partly taken from the AngularJS source code:
// https://github.com/angular/angular.js/blob/master/src/auto/injector.js#L63

function inject(fn, variablesToInject) {
    var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m;
    var FN_ARG_SPLIT = /,/;
    var FN_ARG = /^\s*(_?)(\S+?)\1\s*$/;
    var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;

    if (typeof fn === 'function' && fn.length) {
        var fnText = fn.toString(); // getting the source code of the function
        fnText = fnText.replace(STRIP_COMMENTS, ''); // stripping comments like function(/*string*/ a) {}

        var matches = fnText.match(FN_ARGS); // finding arguments
        var argNames = matches[1].split(FN_ARG_SPLIT); // finding each argument name

        var newArgs = [];
        for (var i = 0, l = argNames.length; i < l; i++) {
            var argName = argNames[i].trim();

            if (!variablesToInject.hasOwnProperty(argName)) {
                // the argument cannot be injected
                throw new Error("Unknown argument: '" + argName + "'. This cannot be injected.");
            }

            newArgs.push(variablesToInject[argName]);
        }

        fn.apply(window, newArgs);
    }
}

function sum(x, y) {
    console.log(x + y);
}

inject(sum, {
    x: 5,
    y: 6
}); // should print 11

inject(sum, {
    x: 13,
    y: 45
}); // should print 58

inject(sum, {
    x: 33,
    z: 1 // we are missing 'y'
}); // should throw an error: Unknown argument: 'y'. This cannot be injected.

So it's really not a big deal, is it?

Google Drive officially supports hosting static files (like web pages and their assets). According to a discussion on Stack Exchange it doesn't violate the TOC when hotlinking these resources (free CDN?).

Here is what to do:

1. Create a new folder in Google Drive
2. Change its visibility options to: "Public on the web"
3. Upload your files (html, css, js, images, swf, etc.)
4. It's recommended to place an index.html file into the folder, which will be the default document in the directory
5. Grab the URL of your folder (currently shown on the right under "HOSTING" when you select your newly created folder)
6. There you go, just enter this URL into the browser. It should be something like https://googledrive.com/host/12345678901234567890abcd/
7. You should be able to reference files directly inside that folder, e.g. https://googledrive.com/host/12345678901234567890abcd/css/main.min.css

Please note that this method is really meant to host static files. There is no support for backend code.

Resources

• Official Google Drive documentation (little bit obsolete)
• Stack Exchange discussion

server {
    location ~* \.(?:ico|css|js|gif|jpe?g|png)$ {
        root /var/www/mysite;
        expires max;
        add_header Cache-Control "public";
        access_log off;
        break;
    }
}

Of course after modifying the config file we have to reload the configs (e. g. on Ubuntu we have to type sudo /etc/init.d/nginx reload)

There are a few things to note here:

• we set the "expires" header to max age, which means these resources can stay in the browser cache 'forever'
• we are setting the "Cache-Control" header to "public", which means that the resource "may be cached in public shared caches"
• we turn off access logging here, because these requests are in many cases not that important
• if you set expiration to max-age, you have to be sure that the requested resources really never change (some kind of cache busting)
• these settings can live in the location section or in the server section of an nginx config file

Have you already enabled strong caching for yout asset files?

Update: Maybe you noticed the lookahead in the regex. It has a reason to be there: this way the regex engine doesn't create a capture group (no $1) so it has better performance.

Additional bonus: the following code examples also work in node.js not just in the browsers.

Throwing Errors

Throwing errors is very simple, we just need the throw statement.

function throwsAnError() {
    throw new Error('An error occured');
}

try {
    throwsAnError();
} catch(ex) {
    console.log(ex.message); // An error occured
}

Theoretically it's possible to throw any kind of object, but it's not really recommended throwing anything else than Error or one of its derived (custom) types. The reason for this is, that browsers not always work as you would expect. Some of them (IE, Safari) only show "uncaught exception" and don't show the object which was thrown.

Default error types in JavaScript

There are six predefined error types in JavaScript:

• EvalError: when an error occurs in the eval() function
• RangeError: when a parameter or variable is not in its valid numeric range
• ReferenceError: when an invalid reference is de-referenced (e.g. using a variable which has not been defined)
• SyntaxError: when there is a syntax error in some scripts
• TypeError: when a parameter or variable is not of a valid type
• URIError: when passing invalid parameters to URI function (encodeURI() or decodeURI())

Handling specific errors

Here comes the instanceof operator handy, when our codes runs into a catch. With its help we can check which type does the exception belong to.

try {
    // doSomethingWithNumbersAndURIs();
} catch (ex) {
    if (ex instanceof RangeError) {
        alert('Value not in range!');
    } else if (ex instanceof URIError) {
        alert('Value not an URI!');
    } else {
        // some basic error handling
    }
}

Throwing custom errors

This is also very simple, we just have to create a constructor for our error type which is derived from Error. There's one little catch though, line numbers are shown incorrectly.

function CustomError(message) {
  this.name = "CustomError";
  this.message = message || "Some default message";
}
CustomError.prototype = new Error();
CustomError.prototype.constructor = CustomError;

try {
    throw new CustomError('An error occured!');
} catch(ex) {
    console.log(ex.name); // CustomError
    console.log(ex.message); // Ann error occured!
}

If you are interested in more details:

1. Mozilla Developer Network Documentation
2. NCZOnline

The code detects when the user presses TAB or SHIFT+TAB - the current line gets indented or unindented. Source code for the example can be found here: gist.github.com/bdadam/8721698.

<!doctype html>
<html>
<head>
    <meta name="charset" content="utf-8"/>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="author" content="Adam Beres-Deak"/>
    <meta name="viewport" content="width=device-width"/>
    <style>
        body {
            padding: 40px;
        }
        textarea {
            width: 100%;
            height: 350px;
            font-family: CourierNew, Courier;
        }
    </style>
</head>
<body>
    <textarea id="tx"></textarea>
    <script>
    function enableTab(id) {
        var shiftPressed = false;
        var ctrlPressed = false;
        var tabChar = '    ';

        function checkSpecialKeys(e) {
            switch(e.keyCode) {
                case 16:
                    shiftPressed = !shiftPressed;
                    break;
                case 17:
                    ctrlPressed = !ctrlPressed;
            }
        }

        document.addEventListener('keydown', checkSpecialKeys);
        document.addEventListener('keyup', checkSpecialKeys);

        function addTab(textarea) {
            // caching some values, because they are changing as text changes
            var value = textarea.value,
                start = textarea.selectionStart,
                end = textarea.selectionEnd;

            // adding tab character to actual cursor position
            textarea.value = value.substring(0, start) + tabChar + value.substring(end);

            // putting cursor back to its original position
            textarea.selectionStart = textarea.selectionEnd = start + tabChar.length;
        }

        function removeTab(textarea) {
            var curPos = textarea.selectionStart,
                lines = textarea.value.split('\n'),
                newValue = '',
                done = false,
                cnt = 0;

            for (var i = 0, l = lines.length; i < l; i++) {
                // iterating through each line
                var line = lines[i];
                cnt += line.length;
                if (cnt >= curPos && !done) {
                    // cursor is in this line
                    var newLine = line.replace(new RegExp('^' + tabChar, ''), '');

                    if (newLine !== line) {
                        // there was a tab at the beginning of the line, replace was succesfull, cursor must be moved backwards some
                        line = newLine;
                        curPos -=tabChar.length;
                    }

                    done = true; // only one substitution per run
                }

                newValue += line + '\n';
            }

            // setting new value
            textarea.value = newValue;

            // putting cursor back to its original position
            textarea.selectionStart = textarea.selectionEnd = curPos;
        }

        var textArea = document.getElementById(id);
        textArea.addEventListener('keydown', function(e) {
            if (e.keyCode === 9) {

                if (!shiftPressed) {
                    addTab(this);
                } else {
                    removeTab(this);
                }

                return false; // preventing losing focus
            }
        });
    }

    enableTab('tx');
    </script>
</body>

What can it do for you?

Just simply serve you files over http:// protocol. Besides static files it supports jade templates, stylus and less. I usually use it, when I need an ad-hoc web server, like when downloading some sources from github and I want to check out the examples. They sometimes need a 'real web server', because of the limitations of the file:// protocol.

How to use it?

Install it the usual way with npm install -g serve and you should be fine. Then just simply cd into the directory which you want to be able to access from http://localhost and run serve. Default port is 3000 but, as many things, it's configurable. That's it.

For more documentation visit the github/serve project page.

I have to say one thing I really like, when I'm working with C#, is LINQ and the lambda expressions. If you don't know what they are, here is an example:

var areThereAnySportsCars = cars.Where(x => x.HorsePower > 300 && x.Seats == 2).Any(y => y.Color == 'RED');

I think it's very easy to see what this expression does: it filters the cars array for cars which have more than 300 HP and exactly 2 seats, then checks whether there are any red ones.

How does it look like in JavaScript?

var sportsCars = cars.where(x => x.horsePower > 300 && x.seats === 2).any(y => y.Color === 'RED');

Do you notice any differences (besides triple = signs and casing)? No there isn't.

Where is the catch?

Unfortunately there is a catch: Currently this syntax is only supported in Firefox. Althought Firefox has been supporting it for more than a year now (almost two), its support is completely missing in Chrome. But the syntax is in the ES6 Draft, so we can hope that Google also decides to support it.

More examples

var sqaure = function(x) { return x * x; };
var squareNew = x => x * x;

var sum = function(a, b) {return a + b};
var sumNew = (a, b) => a + b;

domElement.addEventListener('click', function(event) { handleEvent(event.target); });
domElement.addEventListener('click', event => handleEvent(event.target));

[1,2,3].map(function(x) { return x + 1; });
[1,2,3].map(x => x + 1);

What's this?

One of the most complicated things when teaching people JavaScript is to teach what is the value of this. With fat arrows we get a function expression which has some limitations:

1. this is bound to the context, where you use the fat arrow
2. they cannot be used as a constructor (they throw an error)

Some examples:

// With conventional function definitions
var obj = {
    logThis: function() {
        console.log(this); //this is obj
        var log = function() {
            console.log(this); //this is the global object (window)
        };

        log();
    }
};

myObj.logThis();
/*
This call logs:
Object { logThis=function() }
Window
*/

// With fat arrows
var obj = {
    logThis: function() {
        console.log(this); //this is obj
        var log = () => console.log(this); //this is also obj

        log();
    }
};

obj.logThis();
/*
This call logs:
Object { logThis=function() }
Object { logThis=function() }
*/

var X = a => a*3;

new X(); // TypeError: X is not a constructor

OK - but where is LINQ?

There have always been many LINQ-like implementations in JavaScript. They usually simply take a function expression as a parameter, so it's not a big deal to use fat arrows instead of conventional function expressions.

var isThereAnySportsCar = cars.where(function(car) { return car.horsePower > 300; }).any(function(c) { return c.seats === 2; });

var isThereAnySportsCar = cars.where(car => car.horsePower > 300).any(c => c.seats === 2);

But LINQ is not just about the syntax. In LINQ every item of the original array goes through the whole pipeline, so that the original array is only iterated once. In plain old JavaScript (ECMAScript 3) this was impossible. In ES6 generators are coming, which are solving this issue. I'm not going to go into details now, lets have it for another blog post.

There is one LINQ implementation which I really like. It's far awy from feature completeness, but it shows how it should be done.

What did I need?

I wanted to have a website where I can show, who I am. I also wanted to write some articles and then publish them. I wanted to have some sort of statistics about my users. That's all, not that much.

Lets take a look at what I was planning

I knew I wanted to have some static pages like 'about me', 'contact' and some dynamic pages like blog posts. So I need a database, right? Lets get one instance at MongoLab.

Then I was sure I need some continuous integration (CI) environment and a LIVE environment. That was fine, since I already have a web server. So I knew I wanted to write and edit my articles. So I need a 'members area', with an editor, with https connection and authentication? Then I thought it's too much for this small site. Lets look for something smaller.

First I found markdown again

I always knew that markdown is very convenient (at least for a coder). Then I came across stackedit.io. It the best markdown editor I have ever seen. Maybe better then a plain text editor. So I was sure I wanted to write my articles in markdown. So I don't need to have an editor myself, Stackedit does the job for me.

I remembered I saw something

This thing was called Wintersmith. A static website generator for node.js. Unfortunately written in CoffeeScript. What a shame. But I started to use it. It was almost working but I didn't like it.

So I was looking for alternatives. And then I found Assemble. It is also a static website generator, actually a GruntJS task. But I liked it better and for templating it uses handlebars instead of Jade.

Here I am now

Now I am using Assemble to generate my site. But I am not absolutely happy with it. I am missing some features, which I'm going to need in a few weeks. Therefore I think I will build my own static website generator.

What are the benefits of statically generating this site?

1. It's fast. Every page is generated once on my desktop computer and then hosting is cheap and easy. No more surprises when a blog post accidentally hits the top of Hackernews.
2. Deployment is also very easy. I just have to copy some files over SCP and that's it.
3. Less things can be hacked. :)
4. No need for caching. Almost every web-server does this for us out of the box.
5. In the end less things can go wrong.

There are also some tradeoffs

Editing and publishing is definitely more complex than just hitting a button called "Publish". I cannot do them conveniently over my smart phone, I need my laptop.

How does my workflow look like?

1. I write my article in markdown.
2. I (re)generate the html files.
3. Then I push the changes to my code repository
4. At last I copy the files to my webserver and check whether everything is fine. That's all.

Why is my code repository publicly available on GitHub?

1. I don't need to hide it in a private repository, since every page in this blog is public.
2. It is a good example for others who are also using (or planning to use) Assemble and are looking for some examples.
3. It doesn't cost a thing.

So I think this is the best for my tiny blog. But I am not affraid of changes. I definitely will change everything.

Do you also like static site generation?

TLDR

I believe that publish/subscribe (PubSub) is a very powerfull pattern. Therefore I have recently open sourced my implementation of it in JavaScript. The full source code can be found on GitHub: github.com/bdadam/PubSub. It's completely dependency-free and very small (under 1kb).

What is PubSub?

In software architecture, publish–subscribe is a messaging pattern where senders of messages, called publishers, do not program the messages to be sent directly to specific receivers, called subscribers. Instead, published messages are characterized into classes, without knowledge of what, if any, subscribers there may be. Similarly, subscribers express interest in one or more classes, and only receive messages that are of interest, without knowledge of what, if any, publishers there are. Pub/sub is a sibling of the message queue paradigm, and is typically one part of a larger message-oriented middleware system. Source: Wikipedia

Differences between DOM events and PubSub

PubSub is very similar to the DOM events, except: there is only one object which fires events and accepts listeners. When using DOM events, a listener is registered on the DOM node which fires the event.

document.getElementById('someId').addEventListener('click', function() { /* event listener */ });

In a PubSub architecture a publisher doesn't know its subscribers and a message receiver doesn't know where the message comes from. Both parties only know a mediator object which handles the broadcasting of the messages.

// PubSub is the global mediator object

PubSub.subscribe('anEvent', function(eventName, eventData) {
    console.log(eventName); // "anEvent"
    console.log(eventData.something); // 1
    console.log(eventData.someOtherThing); // 2
});

PubSub.publish('anEvent', { something: 1, someOtherThing: 2 });

The power of PubSub

This pattern allows us to decouple modules from each other. E.g. think of an online shop, where users can add products to their carts. When adding a product, the website usually has to do some things:

• update number of items
• update total price
• do some tracking (e.g. Google Analytics)
• highlight the newly added product
• maybe play a small animation or even some sound effect (don't do it)
• etc.

If a customer clicks on the "Add to cart" button, the button sends a message with the corresponding product as a payload. All the other components can listen to this event and act accordingly (update shopping cart, play animation, track it in Google Analytics and so on).

Are there any disadvantages?

Yes, there are indeed. All the disadvantages come from the main advantage: publishers are decoupled from subscribers. This means:

1. There is no guarantee that a message is delivered. PubSub is a fire and forget pattern.
2. The publisher doesn't know, when a subscriber stops working.

What does all this look like in JavaScript code?

// What the button does
$("#addProductButton").click(function() {
    PubSub.publish("productAdded", {
        product: {
            id: 1234,
            name: 'A Super Product',
            price: 9900 // in cents
        },
        user: {
            country: "DE",
            loggedIn: true,
            membershipStatus: "premium"
        }
    });
});

// Total price module increases the displayed total price when a product is added
PubSub.subscribe('productAdded', function(eventData) {
    increaseTotalPrice(eventData.product.price);
});

// Play the sound when Mario collects a coin
PubSub.subscribe('productAdded', function() {
    playSound('mario-coin');
});

// Tracking module
PubSub.subscribe('productAdded', function(eventData) {
    _gaq.push([
        '_trackEvent',
        'Products',
        'Buy',
        eventData.product.name,
        eventData.product.price
    ]);
});

How to install it?

If you use bower, just execute bower install pubsub and then include pubsub.min.js in your code. E.g: <script src="/bower_components/pubsub/pubsub.min.js"></script>

If you don't use bower then you can download pubsub.min.js and include it. E.g.: <script src="/libs/pubsub/pubsub.min.js"></script>

You can also use it with require-js:

require(['pubsub'], function(PubSub) {
    console.log(typeof PubSub.publish); // "function"
    console.log(typeof PubSub.subscribe); // "function"
    console.log(typeof PubSub.unsubscribe); // "function"

    /* Please note: when using require js, the PubSub module doesn't register itself as a global object */
    console.log(typeof window.PubSub); // "undefined"
});

I think I am not the only one, who loves the simplicity and elegance of PubSub. If you do it as well, please consider using my implementation. It's free and it's published under the MIT license.