Tingle's Technology Notes. Image Wipes. Alernating, Automatic, Angled Rollover, Straight Photos. Demo: Pure CSS folded-corner effect. Tantek Çelik: “HTML5: Right Here, Right Now” (56 min.) About Validator.nu. 28 HTML5 Features, Tips, and Techniques you Must Know. Badass JavaScript - Has.js: UA Sniffing Is Dead. Long Live JavaScript Feature Detection! Pete Higgins and a few other JS ninjas have been working on a new library for doing JavaScript feature detection. Browser sniffing and feature inference are flawed techniques for detecting browser support in client side JavaScript. The goal of has.js is to provide a collection of self-contained tests and unified framework around using pure feature detection for whatever library consumes it. It is similar to Modernizr, but instead of testing for HTML5/CSS3 features, it tests for JavaScript features such as: ES5 array, string, and object featuresNative JSON supportNative console supportActiveXNative XHRSome DOM and event features There are a lot of tests available, with even more being added daily.
If(has("function-bind")){ // your enviroment has a native Function.prototype.bind }else{ // you should get a new browser. } Has.js was also designed to allow other libraries to include the tests and provide their own API. Has.add("some-other-test", function(){ return false; }) VexFlow - HTML5 Music Engraving. HTML. Ordering CSS3 Properties. When writing CSS3 properties, the modern wisdom is to list the "real" property last and the vendor prefixes first: Why is this method of ordering properties so commonly taught?
Here is what it would look like "the wrong way": Even doing it "the wrong way", won't the border radius be the same no matter what, forever? A quick investigation might lead you to conclude that it will, and this ordering of properties is rather nonsense. The Long Long Ago: None of the properties are supported, order doesn't matter.The Past: Only vendor prefixes are supported, order doesn't matter.The Now: Both vendor prefixes and actual property are supported. Here's a simple chart with this concept at work. Woah there, Cowboy The fact is, the ordering of CSS3 properties is important, and the above is fundamentally flawed. Why does that matter? The spec or "real" version will render the top left and bottom right corners at 30px and the top right and bottom left corners at 10px. See here Share On. Pusher - Realtime client push powered by HTML5 websockets, beyond AJAX.
HTML 5 innerShiv. Start Using HTML5 WebSockets Today. One of the coolest new features of HTML5 is WebSockets, which let us talk to the server without using AJAX requests. In this tutorial, we'll review the process of running a WebSocket server in PHP, and then building a client to send and receive messages to it over the WebSocket protocol. What are WebSockets? WebSockets is a technique for two-way communication over one (TCP) socket, a type of PUSH technology. At the moment, it's still being standardized by the W3C; however, the latest versions of Chrome and Safari have support for WebSockets. What do WebSockets Replace? Websockets can replace long-polling. Many Ajax applications makes use of the above – this can often be attributed to poor resource utilization. Wouldn't it be great if the server could wake up one morning and send its data to clients who are willing to listen without some sort of pre established connection?
Step 1: Get the WebSocket Server This tutorial will focus more on the client building rather than server implementation. Periodic Table of the Elements - Josh Duck. 5lide: HTML5-based Slides Maker. At last week's GTUG campout, a 3-day long HTML5 hackathon, I signed up to be a TA for the weekend. That meant I spent most of my time wandering around answering random questions and helping developers debug their hacks. But, I can't be surrounded by a bunch of people hacking on cool shit and not join in myself -- it's just way too tempting.
So, on Friday night, after coming home from the pitches and discovering that drinking 2 Dr. Pepper's was not in fact a good way to avoid jet lag, I stayed up into the wee hours hacking on an idea I'd been brewing for a few weeks. As some of you know from my posts about Prezi and Ignite, I am a fan of alternative slide formats and presentation techniques. Early last year, the HTML5 advocates started using a set of slides that both showed off HTML5 features and were written in HTML5 - so they could do interactive samples and harness the power of HTML5 at the same time.
Happy 5lide-ing! HTML5 Doctor, helping you implement HTML5 today.
Location.hash is dead. Long live HTML5 pushState! For a long time, location.hash was a way for AJAX applications to get back button and bookmarking support, and libraries like jQuery BBQ from Ben Alman made dealing with it cross browser a cinch. Now, with HTML5 coming of age, there is a new feature that aims to replace the use of location.hash with a better solution: pushState. Over on the Spoiled Milk blog, Jamie Appleseed describes the API as “a way to change the URL displayed in the browser through JavaScript without reloading the page.” It works on the history object like this: window.history.pushState(data, "Title", "/new-url"); The last argument is the new URL. In order to support the back and forward buttons you must be notified when they are clicked. Currently, pushState has support from the latest versions of Safari and Chrome, and Firefox 4 will be supporting it as well.
If you’d like to read a more in depth overview of these new features, you should check out the aforementioned blog post by Jamie Appleseed. HTML5 presentation. Canvas demo. Expanding Images using HTML5′s contenteditable tabindex. HTML5 has a new attribute, contenteditable, which can be applied to any element which allows it to be edited directly in the browser window.
Think of text input with a predefined value, but it can literally be any element. Form elements like text inputs support the :focus pseudo class, which allow us to style those elements when they are clicked upon or otherwise navigated to. Giving an element the contenteditable attribute means it also now supports the :focus pseudo class, which opens up some interesting possibilities! We'll exploit this little trick to make an expanding image (like a lightbox without the overlay) right within some content. UPDATE: Even better, you can give attributes a tabindex attribute, like you would a form element, which allow allows :focus without the editability. This article has been updated to go that route instead. HTML5 Markup HTML5 has nice elements for including captioned images. We just give the figure element tabindex, so that it can be in focus. The Images.
Plan B: Font Fallbacks « coding@scribd. This is the fourth post in our series about Scribd’s HTML5 conversion. The whole process is neatly summarized in the following flowchart: In our previous post we wrote about how we encode glyph polygons from various document formats into browser fonts. We described how an arbitrary typeface from a document can be sanitized and converted to a so called “@font-face”- a font that browsers can display. The next challenge the aspiring HTML5 engineer faces is if even after hand-crafting a @font-face (including self-intersecting all the font polygons and throwing together all the required .ttf, .eot and .svg files ), a browser still refuses to render the font. Luckily enough, HTML has for ages had a syntax for specifying font fallbacks in case a @font-face (or, for that matter, a system font) can’t be displayed: There’s a number of fonts one can always rely on to be available for use as fallback: Arial (+ bold,italic) Courier (+ bold,italic) Georgia (+ bold,italic) Times (+ bold,italic) Like this:
The Future of Web Apps - Single Page Applications | The Worm Hole. The Future of Web Apps – Single Page Applications Mark Boas The world wide web is constantly evolving and so is the way we write the applications that run upon it. The web was never really designed as a platform for today’s applications, nevertheless we continue to bend it to our will. Due to differing paradigms we are forced to design our web apps in a completely different way to native apps.
Some of the most obvious constraints are those imposed by using the traditional multiple page model, when employed this model clearly illustrates the difference in performance between native and web apps. The price is high. In this article I propose that we can have our cake and eat it. But first let’s take a look at the advantages of a single-page approach. 1. What we are essentially talking about here is having an application where ‘virtual pages’ are loaded into one single web-page, which means switching between pages need not involve a trip to the server and so the switch occurs almost instantly. 2 Common infrastructure — HTML5. 1 Introduction 1.1 Where does this specification fit? This specification defines a big part of the web platform, in lots of detail. Its place in the web platform specification stack relative to other specifications can be best summed up as follows: 1.2 Is this HTML5?
This section is non-normative. In short: Yes. In more length: the term "HTML5" is widely used as a buzzword to refer to modern web technologies, many of which (though by no means all) are developed at the WHATWG. 1.3 Background HTML is the World Wide Web's core markup language. 1.4 Audience This specification is intended for authors of documents and scripts that use the features defined in this specification, implementers of tools that operate on pages that use the features defined in this specification, and individuals wishing to establish the correctness of documents or implementations with respect to the requirements of this specification. 1.5 Scope The scope of this specification is not to describe an entire operating system. .
HTML5 Forums :: View topic - Microdata implementation. Ajaxian. HTML5 Peeks, Pokes and Pointers.
Video. HTML5 JS APIs. Hello HTML5. 2/19/2010 04:13:00 PMPosted by Ian Fette, Gears Team If you've wondered why there haven't been many Gears releases or posts on the Gears blog lately, it's because we've shifted our effort towards bringing all of the Gears capabilities into web standards like HTML5.
We're not there yet, but we are getting closer. In January we shipped a new version of Google Chrome that natively supports a Database API similar to the Gears database API, workers (both local and shared, equivalent to workers and cross-origin wokers in Gears), and also new APIs like Local Storage and Web Sockets. Other facets of Gears, such as the LocalServer API and Geolocation, are also represented by similar APIs in new standards and will be included in Google Chrome shortly.
We realize there is not yet a simple, comprehensive way to take your Gears-enabled application and move it (and your entire userbase) over to a standards-based approach. SproutCore - Home. HTML5 input placeholder= via YUI) Modernizr.