Posted on

Enhance website performance by resource prefetching

Resource Prefetching is a type of performance enhancing technique, this is implemented by using resource hints. Resource hints is a way to tell the browser about a resource that might be needed in future requests.


Resource hints are declared as HTML Link Element (<link>) :

dns-prefetch

<link rel=”dns-prefetch” href=”//example.com”>

Tells browser to initiate an early connection (DNS lookup) with the host which might be needed in future requests, this eliminates the time taken by browser in resolving the domain for the future requests.

Browser support

preconnect

<link rel=”preconnect” href=”//example.com”>
<link rel=”preconnect” href=”//cdn.example.com” crossorigin>

Tells browser to initiate an early connection with the host, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, this prepares browser in advance and can deliver the assets from that host faster, masking the high latency costs of establishing a connection.

Browser support


prefetch

<link rel=”prefetch” href=”//example.com/next-page.html” as=”html” crossorigin=”use-credentials”>
<link rel=”prefetch” href=”/library.js” as=”script”>

Tells browser to fetch a resource that might be required by the next navigation (browser will not execute any prefetched file) so that it can be delivered faster when needed.

Browser support

prerender

<link rel=”prerender” href=”//example.com/next-page.html”>

Tells browser to fetch and execute a resource that might be required by the next navigation so that it can be delivered faster when needed.

Browser support

Reference: https://www.w3.org/TR/resource-hints/

Posted on

Creating a jQuery popup with an overlay

Create a basic popup and overlay with minimal styling and without any additional settings using jQuery/HTML and CSS.


Creating Overlay using HTML and CSS : 
Overlay is a container with some translucent background color which cover the whole page and user is unable to click on any functional part of the site below it.

HTML

<div id="overlay"></div>

CSS

#overlay {
 display:none; /*hidden on pageload*/
 position:fixed; /*this will disable it from scrolling*/
 width:100%; /*this will give the full width*/
 height:100%; /*this will give the full height*/
 z-index:999; /*this will keep it above all elements in the page*/
 left:0; /*this will align it to the left*/
 top:0; /*this will align it to the top*/
 background:#000; /*this will give it a black background*/
}

Creating Popup using HTML and CSS : 

HMTL

<div class="popup" id="popup1">
<a href="#" class="close">X</a>
<p>
this is a demo popup
</p>
</div>

CSS

.popup {
 display:none; /*hidden on pageload*/
 width:200px; /*width of popup*/
 height:200px;  /*height of popup*/
 padding:10px; /*padding for popup*/
 background:#fff; /*background of popup*/
 border:1px solid #000; /*border of popup*/
 position:absolute; /*this will keep it relative to the body*/
 z-index:9999; /*this will keep it above the overlay*/
 top:50%; /*keep popup in center*/
 left:50%; /*keep popup in center*/
 margin-left:-110px; /*keep popup in center (it is the - total width / 2)*/
 margin-top:-110px; /*keep popup in center (it is the - total height / 2)*/
}
.popup .close { /* close link*/
 float:right;
 color:#000;
 text-decoration:none;/*remove underline from the close link*/
}
.popup p { /*popup text*/
 padding:10px 0;
}

Creating button to trigger the popup with overlay :

<a href="#" class="displayPopup">Display Popup</a>

Creating Functionality using jQuery: 

$(function() { //document ready
    $(".displayPopup").on("click", function() { //click event of the button
        $("#overlay").fadeTo(100, .3); //this will show the overlay awith a crossbrowser transparency
        $("#popup1").show(); // show popup1
        return false; //disable event propogation (avoid addition of "#" to url)
    })

    $(".popup .close").on("click", function() { //click event of the close button in popup
        $("#overlay").hide(); //hide overlay
        $(".popup").hide(); //hide popup
        return false; //disable event propogation (avoid addition of "#" to url)
    })
})

Download code files

Posted on

Toolkits for developing Hybrid Apps.

In the previous post I described about the difference between Native Apps, Web Apps, and Hybrid Apps. So if I opt for Hybrid Apps, how can I start the development?. Here is the start, with the toolkit’s required for developing Hybrid Apps.


Hybrid Apps are developed partly with the native development environment and partly in WEB language (HTML5).These are native apps with embedded HTML. They have most of the benefits of native apps. Like native apps, they live in an app store and can take advantage of the many device features available (including GPS, camera, gestures, and notifications)

The HTML, CSS and JavaScript can be developed using some of the same tools used to ​develop web apps, but you’ll probably want to use a mobile JavaScipt framework (such as jQuery Mobile), and then you’ll need a tool to take all that code and turn it into a mobile app. Converting web app into a mobile app is accomplished by wrapping the HTML, CSS and JavaScript inside a special container: usually the “web view” component provided by the standard mobile SDKs, along with some extra bits, such as JavaScript APIs to give the developer access to device features that the web view component doesn’t provide (e.g. access to the device’s GPS, camera, gestures, and notifications). Some of these wrappers expect you to use their mobile JavaScript framework, whereas others let you use whatever JavaScript framework you prefer.

Toolkit’s available : 

– Adobe AIR for HTML/JS Developers
– Alpha Anywhere
– AMPchroma
– IBM Worklight
– Intel XDK (formerly appMobi)
– KonyOne
– PhoneGap / Apache Cordova (probably the most widely used)
– Sencha Touch 2​
– Spot Specific
– The M Project
– Trigger.io​


PhoneGap / Apache Cordova is so widely used that there are services where you can upload your HTML, CSS and JavaScript, they use PhoneGap to package it into apps for various OSes, then they send the packaged apps back to you.

– appMobi PhoneGap XDK (also a web-based IDE)
– Application Craft (also a web-based IDE)
– Icenium
– Nomad (a Visual Studio extension)
– PhoneGap Build
– Tiggzi (also a web-based IDE)
Posted on

Native Apps, Web Apps, and Hybrid Apps. What is the difference?

In the mobile world, terms like native app, web app and hybrid app are very common but What’s the difference? Here’s a tiny bit of explanation.

Native Apps : 
– Apps that are fully programmed in the development environment specific to each operating system.
– Stored on a device and require installation.
– Tend to have better graphics and a smooth user experience due to the interface with the device.
– Have full access to the device-specific features, including GPS, camera, gestures, and notifications.
– More expensive to develop, as they need to be developed for each specific operating system
– Take longer to develop. Maintaining apps on multiple operating systems is also expensive and time consuming.

Web Apps : 
– Apps that are written entirely with web technologies (HTML5). and the code is executed by the browser and installation is optional.
– Content is a lot more discoverable on the web.
– Platform independent.
– Use features that are available in HTML5 like the GPS, the tap-to-call feature and native features remain inaccessible.

Hybrid Apps : 
– Developed partly with the native development environment and partly in WEB language (HTML5).
– These are native apps with embedded HTML. They have most of the benefits of native apps.
– Like native apps, they live in an app store and can take advantage of the many device features available (including GPS, camera, gestures, and notifications)
– Platform independent, Increasingly rising in popularity as operating systems become more fragmented.

Conclusion : A web app will run on (almost) all smartphones, while native apps need to be developed specifically for each operating system (and even for different versions of these), and hybrids require at least the development of the native “container” that hosts the web language.

However it will depend on the project characteristics whether to opt for Native or Hybrid App but Personally, I will be opting for Hybrid apps as they combine the advantages of web and native apps separately (simplification, uniformity, flexibility, user interface adaptation) however they also combine the disadvantages of both (fragmentation, difficult maintenance, complex performance optimization, increased initial investment and costs).

So if I opt for Hybrid Apps, how can I start the development?. Here is the start, with the toolkit’s required for developing Hybrid Apps.

Posted on

Local storage, Cookies. What to use ?

Sometimes web pages are more than just static sources of information; sometimes they want to interact with and know something about their users. In order to do this websites need to store data locally on the client-side. The solution for this for a while has been cookies, which are small text-files that store name:value pairs.The newest solution is HTML5 local storage.

Cookies : 

Pros
– Legacy support (it’s been around forever)
– Persistent data
– Expiration dates

Cons
– Each domain stores all its cookies in a single string, which can make parsing data difficult
– Data is unencrypted
– Cookies are sent with every HTTP request Limited size (4KB)
– SQL injection can be performed from a cookie

Local Storage : 

Pros
– Support by most modern browsers
– Stored directly in the browser
– Same-origin rules apply to local storage data
– Is not sent with every HTTP request
– ~5MB storage per domain (that’s 5120KB)

Cons
– Not supported by anything before:
IE 8
Firefox 3.5
Safari 4
Chrome 4
Opera 10.5
iOS 2.0
Android 2.0
– If the server needs stored client information you purposefully have to send it.

Cookies and local storage really serve difference purposes. Cookies are primarily for reading server-side, local storage can only be read client-side. So the question is, in your app, who needs this data — the client or the server?

If it’s your client (your JavaScript), then by all means switch. You’re wasting bandwidth by sending all the data in each HTTP header.

If it’s your server, local storage isn’t so useful because you’d have to forward the data along somehow (with Ajax or hidden form fields or something). This might be okay if the server only needs a small subset of the total data for each request.

Local storage is easier to work with because you don’t have to parse a string to get data. Instead you can make a call for the variable name and it’s value is returned. The same applies with creating and deleting data as well.But until everyone on the Web starts using HTML5-compatible browsers cookies will still be king.

For more information on Cookies read here
For more information on HTML5 Web Storage read here and here.

Posted on

em, px, pt, percent. What is the difference ?

CSS offers a number of different units for expressing length and sometimes its confusing to relate them with each other, Here’s a tiny bit of explanation.
Em’s (em) :
– Scalable unit that is used in web document media.
– 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
– The size can be calculated from pixels to em using this formula: pixels/16=em
– Due to scalability and mobile-device-friendly nature Ems are becoming increasingly popular in Responsive Websites.

Pixels (px) :
– It is not related to the current font and are fixed-size units that are used in screen media.
– Your screen resolution specifies how many pixels your screen/display is made of. So when you specify: font-size: 12px;, you’re basically telling the browser that each letter should be 12 pixels high
– Used in web documents in order to produce a pixel-perfect representation of sites as it is rendered in the browser.
– Not scalable

Points (pt):
– Points are traditionally used in print media.
– 1pt (point) is 1 / 72 of an inch. Setting font-size: 12pt; sets the height of your characters to 12 / 72 inches.
– Fixed-size units and cannot scale in size.

Percent (%):
– Much like the “em” unit.
– The current font-size is equal to 100% (i.e. 12pt = 100%), font-size: 50%; sets the font size of your element to 50% of the font size of its parent element.
– Fully scalable for mobile devices and for accessibility.

Relation between the units : 
1em = 12pt = 16px = 100%
i.e.
pt = 3/4*px
em = pt/12
% = pt*100/12

Check this online tool for easy unit conversions.