50 performance tricks to make your HTML5 apps and sites faster. 5 More HTML5 APIs You Didn’t Know Existed. The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.
Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers. Regardless of API strength or purpose, anything to help us better do our job is a step in the right direction. I recently shared with you 5 HTML5 APIs You Didn’t Know Existed in the hope that some of them would inspire you to improve your own web apps.
I'd like to share with you 5 more lessor known HTML5 APIs -- hopefully you find some of them useful! Fullscreen API The awesome Fullscreen API allows developers to programmatically launch the browser into fullscreen mode, pending user approval: Any element can be pushed to fullscreen, and there's even a CSS pseudo-class to allow some control over the screen while in fullscreen mode. Page Visibility API var hidden, state, visibilityChange; if (typeof document.hidden ! GetUserMedia API Battery API Link Prefetching There's five more HTML5 APIs to research and tinker with. Easy Form Validation using HTML5. Writing validation logic using JavaScript in an HTML form is not an easy thing to do.
We all have seen it in HTML4 but what’s new in HTML5? Will it provide us with an easy way to validate a form by writing just a small piece of code? Today we will be talking about this validation stuff in HTML5. But as usual, all the browsers don’t support all of them but it is a good start to think for future. Reference: Easy Form Validation using HTML5[^] Introduction In HTML4, we had a single input type for entering text but in HTML5 we have different input types for entering different data types, e.g., we have email data type for email address, url data type for entering a website URL, number for numeric inputs, and text data type for strings.
Not only this, HTML5 also supports placing a watermark text as a place holder text of any textbox. As usual, HTML still has an issue in terms of browser support. Here is a comparison chart of HTML5 Validation support in different web browsers: Playing with code. Extracting substring from an HTML tag. A Unified Approach to Client-Side Storage. Papa's Perspective A Unified Approach to Client-Side Storage By John Papa08/31/2012.
WhatKey? keydown event. Build New Games. Working with CSS Media Queries and Media Types, Part 1. RELATED: "HTML5 and CSS3 Feature Detection with Modernizr" and "HTML5 Is in Style: Working with CSS3 and HTML5" The latest statistics on Internet consumption show that close to 9 percent of all web traffic now comes from mobile devices.
That percentage is a significant increase over previous years and is certain to increase even more as consumers continue to purchase more and more devices. Working with CSS Media Queries and Media Types, Part 2. With more and more Internet traffic now coming from mobile devices, it's time to start thinking about how your website can be optimized to look good and function well on phones, tablets, and other devices, if you haven't thought about it already.
Although there's no magic pill to transform a site to look good across multiple devices, you can start the process by integrating Cascading Style Sheets (CSS) media queries into your site. Media queries provide a way to dynamically reorganize content in a page using pure CSS. Although they aren't the only thing to consider when creating mobile-optimized sites, CSS media queries do provide a simple way to repurpose existing content without changing back-end code. In the previous article of this series, "Working with CSS Media Queries and Media Types, Part 1," I introduced the concept of CSS media queries and discussed the fundamentals of how you can use media queries to target different screen sizes. Figure 2: Widget Masters sample website. Twitter Reader.