5 HTML5 Features you need to know. Posted at daker.me HTML5 has been around for a while now, it introduces lots of new and exciting new JavaScript and HTML APIs for both mobile and desktop, so in this post you will discover some HTML5 features that will enhance your web apps and will save you a lot of time. DNS Prefetching DNS hostname resolution is one of the issues that can make any website slow. Modern browsers start to be very smart when it comes to DNS resolution, they try to resolve domain names then cache them before the user tries to follow any link on the webpage. With the dns-prefetch feature you are allowed to manually control this operation by telling the browser which domain names to resolve : Link Prefetching Download Attribute The HTML5 download attribute allows developers to force a file to download rather than go to that specific page, you no longer need to rely on server side code to do that: Regular Expressions Datalist Element Further reading datalist Experiment 7 HTML5 features that you may not know about.
Essential Audio and Video Events for HTML5. The <video> and <audio> elements provide a comprehensive range of events. While some are quite straightforward, like the self-explanatory play event, others can be rather more tricky to understand, especially the progress event. So let's examine some of the most important media events, looking at when and how they fire and what properties are relevant to them. We'll also try to navigate the quirks of their behavior in current browsers (well, you didn't think they'd all be the same, did you?). (For reference testing, I'll be using the latest public versions of the most common browsers — Opera 12, Chrome 28, IE10, Firefox 22, Safari 5 (desktop) and Mobile Safari 6 (iOS).
So wherever a browser is referred to only by name (e.g. Opera) it means this latest version.) Playback Events The playback events are those which fire in response to playing or pausing the media. There are media functions that correspond with the first two events - unsurprisingly called play() and pause(). Loading Events.
Customize an HTML5 Webpage using the Bootstrap Framework. Many web developers are familiar with Twitter Bootstrap and have seen this library on a number of projects. The Bootstrap core is fantastic when you need a CSS reset along with other common layout features. It may not be the right fit on projects where you need a whole lot of customization. But for landing pages and smaller websites I think Bootstrap has become one of the easiest resources to start using. In this tutorial I want to demonstrate how we can build a simple homepage layout design using Bootstrap.
I have included a myriad of popular components which you will likely use in other layouts. Most of the CSS classes and HTML structures are well documented on the main Bootstrap website. But the process of building & designing your own layout from scratch can be a greater learning experience. Downloading Bootstrap Right from the hosted Github project page you should be able to download a copy of Bootstrap. The HTML5 doctype is the best supported option for modern browsers.
View Demo. Introducing HTML’s new template element. You may have heard of Web Components, a suite of emerging standards that make it possible to build secure reusable widgets using web platform technologies. One of the first specs to make its way into implementation is HTML Templates, embodied by the template element, which as I write this is implemented in Chrome Canary and Firefox Nightly.
If you've used Mustache, Handlebars or any similar front-end templating library you'll be quite familiar with how the template element works: you just include it in your document (it's apparently legal inside head or body), perhaps with a unique id for easy reference and add some markup inside it; for example: The template element will be parsed by the browser but not rendered in the page; the markup inside is considered completely inert, meaning no style rules will be applied and no assets loaded.
In order to use the template markup you'll need to activate it by placing it into the DOM using JavaScript. View Demo. Responsive Tables. A few smart folks have already put together their thoughts on responsive tables and, while I think the proposed methods are pretty good, I think there might be room for improvement. As such, I've been tinkering for a while and came up with the following strategy when it comes to tables. Step 1: Use data-* attributes to hold information about the column header(s) associated with the markup: Step 2: When the screen is below a certain threshold, set the table elements to display: block (thereby linearizing the table), hide the thead where assistive tech won't see it and use generated content to expose the data-* attributes.
Here's a snippet of SASS & Compass that does that: We’ve been using this approach on a number of sites currently in development and it works really well. Notes: View Demo. HTML Tools. Datalist Experiment. Posted at *Chrome feature By using <datalist>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves. Options can be tagged with datalist and referenced from the input element using list attribute by its id.
Input[type=text] datalist For text type, datalist simply suggests list of words. input[type=range] datalist For range type, datalist suggests recommended value as ticks. Input[type=color] datalist For color type, datalist suggests the recommended color on the swatch palette. Input[type=date] datalist For date type, datalist suggests a list of recommended dates. Input[type=time] datalist For time type, datalist suggests a list of recommended times. Input[type=month] datalist For month type, datalist suggests a list of recommended months. Input[type=week] datalist For week type, datalist suggests a list of recommended weeks. HTML5 Placeholder Fallback using jQuery. Getting HTML5 Ready - ContentEditable. In the prior editions of this series, we took a look at HTML5 parsing and CORS.
This week, we'll take a look at a feature that, by itself, doesn't do anything terribly useful but, when combined with other features, can be used to do some interesting things. That feature is ContentEditable and it can be used to allow you to make any document regions editable, allowing a user to modify the text on the page. contenteditable and designmode There is really more than one aspect to contenteditable. While contenteditable can control making a specific DOM element editable, designmode makes the entire document editable, except those regions specifically marked as not editable. On its own, this may not sound terribly useful since any changes you make to the page only last until you leave or refresh the page. Examining the spec The spec also defines an isContentEditable property that, as expected, will tell you whether the element in question is editable or not by returning true or false.
Designmode. Add Telephone Number Links With HTML5. Posted at Paulund Normally telephone numbers are adding to web pages as just static text of digits which doesn't offer any interaction to your visitors. With more and more people using the internet on their mobile it's time to change your telephone numbers to clickable areas to call the number directly from your mobile phone. On your phone if you want to call a number of a web page you would have to copy and paste the number into your phone to dial it. With this new features you can make telephone numbers links to dial just like you can with emails. To allow your visitors to directly email you from a web page you place a link on the page and use the mailto: in the href. <a href="mailto:example@example.com">Example Email</a> Once clicked this link will open up your default mail client and create a new email with the to address populated with the email address is the href. HTML5 for Creatives. By now, professional web designers and developers have got a fairly good grip of “HTML5”.
Yes, we know most of what is referred to as HTML5 is not strictly HTML5 at all, indeed a good deal is not even HTML, rather CSS and the DOM. But we know what it is, what we can do with it, what drawbacks and challenges exist. However when it comes to others we work with — clients, Creative Directors, CIOs and CTOs, well, let’s face it, there’s a good chance they’ve heard the term, perhaps some of the myths, and want to know more, but they aren’t as well versed in the nitty gritty. Don’t worry, we’re here to help. HTML5 for Creatives (a free PDF ebook) takes a high level, yet in depth, look at the capabilities, use cases, strengths and limitations of the whole suite of related technologies that are broadly referred to as “HTML5”. So if you need to know more about what HTML5 is, and what it can do for you, then grab a copy. In short we’ll cover: But first, why bother with HTML5 at all?
HTML5 Tutorial - Welcome. HTML Canvas Deep Dive. Old School Cassette Player with HTML5 Audio. Vintage format meets modern web tech: an HTML5 audio player with realistic controls. Today we want to share an audio player with you that looks like an old school music cassette. View demo Download source If you don’t know what a cassette is, you were probably born in the digital high-tech era, an era that is undoubtedly exciting and innovative. On the other hand, if you know what an audio cassette is, you belong to the older generation, the analog dinosaurs that know the painful connection between a pen and a cassette tape. The invention of the compact cassette tape happened 50 years ago, so it’s time to celebrate: “In 1962 Philips invented the compact audio cassette medium for audio storage, introducing it in Europe in August 1963 (at the Berlin Radio Show), and in the United States (under the Norelco brand) in November 1964, with the trademark name Compact Cassette.”
Compact Cassette, Wikipedia The songs in the demo are by the highly talented Blue Ducks and Blank & Kytt: HTML5 Boilerplate. pForm - Free HTML Form Builder - Create Web Form Template Online. HTML5 Audio element maker. HTML5 Template Generator. Periodic Table of the Elements - Josh Duck. List of Videos for HTML5. Modernizr to solve cross-browser challenges. 1514Days 1514 days since this post was last revised. Specific details are likely out of date. This piece is intended to help users who are comfortable with HTML and CSS but not so confident using JavaScript. I’ll (hopefully) demonstrate how you can use the incredible open-source Modernizr JavaScript library to solve cross-browser design challenges and conditionally load assets (CSS or JS files) based on a number of tests.
If the thought of writing JavaScript makes you shudder. If you’re looking for some more advanced documentation on Modernizr, there are a few great tutorials out there. Before we start we’ll need two things: the latest jQuery and the latest Modernizr. Introduction If you build websites, you’ve probably heard of Modernizr. What Modernizr does: By default, Modernizr ‘feature tests’ the browser. Modernizr: “Oh, hi browser.
Browser: “I got a head full of cache but other than that I’m good. Modernizr: “OK, fine. Browser: “Features?” Browser: “Please! Modernizr: “Box shadows?” HTML5 Presentation. In March 1936, an unusual confluence of forces occurred in Santa Clara County. A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches. Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white.
Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet. Then came the wind. It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley.