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

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