• Synchronizing rotation animation between the keyboard and the attached view

    Hi, today I would like to show you how to make a UIView to stay attached to the top of the iPhone’s keyboard while the keyboard is animated. But not only when the keyboard is animated while it is being presented or dismissed but also when it is animated when the iPhone is rotated and the interface orientation is changed.

    Although many answers could be found explaining how to make a UIView to stay attached to the keyboard while the keyboard is being animated when it is presented or dismissed. I have not found any solutions that also make that UIView to stay attached to the keyboard when device is rotated and rotation of the interface orientation is animated.

  • 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>' +
           '</div>';
    documentFragment = h2o(html, refObj = {});
    someElement.appendChild(documentFragment);
    
    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.