Recently, Google introduced Schemas in Gmail messages to allow developers to deliver a more interactive email experience integrated with their web app. Schemas in emails can be used to represent various types of entities and actions. Email clients that understand schemas, such as Gmail, can render entities and actions defined in the messages with a consistent user interface. In the case of Gmail, this means that the emails can display quick action buttons that let users take actions directly from their inboxes, essentialy allowing them to tie their web app with Gmail for a more integrative experience.
(more…)
html
Building a self-correcting email input field
Email is one of the common input fields in any web form. Many sites use two email fields to make sure that the user has entered correct email ids. This is a common idiom in web design, and it is surprising that it has not changed over all these years. One of the interesting alternative I found is the ‘MailCheck’ JavaScript library. The library enables you to offer the user a suggestion for the domain name if he makes a mistake while entering. A demo is shown below.
(more…)
Printing selective DOM elements on a page
Printing web pages from JavaScript, although not a common scenario, can be easily accomplished with some simple code. On the other hand, selectively printing some elements from a web page – like a div or a paragraph, can be challenging. Fortunately there are libraries available that can make the task easier. One such useful jQuery plugin is jQuery PrintElement, which allows you to selectively print a DOM element. Usage is extremely easy; just select any element from a webpage and fire the ‘printElement’ method.
(more…)
Rendering PDF in HTML5 Canvas
pdf.js is an HTML5 technology experiment from Mozilla that explores building a faithful and efficient Portable Document Format (PDF) renderer using Canvas without any native code support. The goal of the project is to create a general-purpose, web standards-based platform for parsing and rendering PDFs, and eventually to release a PDF reader extension powered by pdf.js. Integration with Firefox is a possibility if the experiment proves successful.
(more…)
The HTML5 keygen element
There is some confusion among users regarding the new HTML5 keygen element. The keygen element generates a public/private key pair and then creates a certificate request. Many users want to know the exact use of the element when SSL is available. This is my take on the subject. Correct me if I’m wrong.
<form action="process.cgi" method="post" enctype="multipart/form-data"> <p><keygen name="key"></keygen></p> <p><input type=submit value="Submit key..."/></p> </form> |
Transform websites to mobile sites quickly
Mobilize.js allows web developers create mobile sites out of existing websites with little effort. It supports the following features:
Automatically detect mobile browsers.
Easy to integrate – no server side changes needed.
Open source – no expensive software or licenses needed.
Familiar HTML5, Javascript and JQuery Mobile tools used.
Supports iPhone, Android, Blackberry, Opera Mini and other browsers and devices.
If you have a WordPress site, plugins are available for the same. To see exactly how mobile.js works, check this section of the documentation.
Semantic markup for better search results
Search-engines have reached a impasse with respect to understanding of HTML data. Although most sites, especially databases centric sites use structured data in the backend, once the data is rendered as HTML the data looses all its structure and makes it difficult for search engines to understand them correctly. Until now most search engines have relied on extracting keyword text from the web pages and ranking the pages accordingly, taking the context around the keyword into consideration. This obviously has its limitations and it can only take you so far.
(more…)
Sharing data across windows using localStorage
One of a common requirement in some web applications is that of sending messages and data across windows (of the same origin). Doing this is not easy and requires the help of cookies and a bit of JavaScript. Now with HTML5 and its localStorage feature we can accomplish this quite easily.
(more…)
Adding HTML5 Geolocation to your web applications
One of the interesting and useful addition to the HTML5 specification is the Geolocation API. The Geolocation API allows users to share their location with web applications so that they can enjoy the benefits of various location-aware services.
Geolocation enables you as a developer or website owner to figure out where a particular user is located on the planet. This can be helpful in various web applications; for example in social networking, where you can find out where your various friends are currently located or in advertising where you can display targeted ads based on the users location.
(more…)