• Web font loading detection, without timers

    After writing my first post about how to be notified when specific font-families downloaded and rendered on a web page, I kept thinking that this approach wasn’t too efficient. The fact that the time taking to download and render fonts on a web page depends on many different factors like the network latency and processing power of the client device, makes it difficult to choose the right time interval for sampling dimensions of elements. Using too long interval may introduce extra waiting time if the font was loaded just after new timer iteration was started. On the other hand, using too short interval may present processing time overhead when trying to get the dimensions of elements by obtaining layout triggering properties like offsetWidth and offsetHeight. So I kept thinking how you can force the browser to notify you when custom font is loaded without polling the dimensions of “font container” element.

    Following event timeline overview show the difference between the events fired in web page when using typekit’s Web Font Loader that uses timeouts, and the events fired when using method that does not use timeouts, as explained in this post. These event timelines are taken from the chrome developer tools.

    typekit events timeline (with timeouts)

    typekit events timeline (with timeouts)

    fontloader event timeline (without timeouts)

    fontloader event timeline (without timeouts)

    If you just want to use the FontLoader without reading this post you can download it on Github:

      Download on Github

  • Customizing appearance of UISegmentedControl

    You are probably familiar with the UISegmentedControl and its default look which is found in many native iOS apps:

    Generic segmented control

    This UI control can be created using the UISegmentedControl Class which is available in the UIKit framework. The appearance of this control can be easily customized yet doing so is not always obvious to new iOS developers. I was recently asked to create a row of separate buttons that would behave in a similar manner to UISegmentedControl - where only one segment could be selected at any given time. The design looked something like this (specifically this one I took from dribbble):

    Custom segmented control

  • h2o – The HTML Molecule

    A JavaScript utility that generates a DOM tree and an object with references to flagged elements by parsing HTML string. This utility eases the process of acquiring reference to elements when inserting HTML into a DOM tree and makes the code cleaner.

    html = '<div>' +
               '<span ref="mySpan">some text</span>' +
               '<ul>' +
                   '<li ref="listItems[]">list item 1</li>' +
                   '<li ref="listItems[]">list item 2</li>' +
               '</ul>' +
    documentFragment = h2o(html, refObj = {});
    refObj.mySpan.innerHTML === "some text"; // true

      Download on Github

  • JavaScript Profiler

    Every web developer who developed web applications or sites for mobile devices aware of the lack of tool to profile JavaScript execution times. Although there are some developer tools available for mobile debugging, such as iWebInspector and weinre (WEb INspector REmote), non of them give the ability to profile JavaScript execution times on remote devices as it can be done in Developer Tools in Chrome and Safari or in Firebug in Firefox.

  • Waiting for web fonts to load

    While working on a project where I was required to sample dimensions of HTML elements with specific web fonts, I have bumped into a problem. There wasn’t any DOM event that signaled that specific fonts are loaded and rendered. Even though all the fonts were base64 encoded and inserted into a web page immediately after XMLHttpRequest response, it didn’t indicated that these fonts were actually rendered and that elements enclosing them received their final dimensions.