HTML5/CSS3

Facebook Twitter

Tingle's Technology Notes. Image Wipes. Demo: Pure CSS folded-corner effect. Tantek Çelik: “HTML5: Right Here, Right Now” (56 min.) In one of the outstanding sessions of YUIConf 2010, author and standards expert Tantek Çelik, formerly of Technorati, discusses the current state of HTML5 specifications and their readiness for use in shipping web applications.

Tantek Çelik: “HTML5: Right Here, Right Now” (56 min.)

(Tantek also joined a special YUIConf panel discussion on the future of frontend engineering.) If the video embed below doesn’t show up correctly in your RSS reader of choice, be sure to click through to watch the high-resolution version of the video on YUI Theater. About Validator.nu. 28 HTML5 Features, Tips, and Techniques you Must Know.

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Nettuts+.

28 HTML5 Features, Tips, and Techniques you Must Know

This tutorial was first published in August, 2010. This industry moves fast -- really fast! If you're not careful, you'll be left in its dust. So, if you're feeling a bit overwhelmed with the coming changes/updates in HTML5, use this as a primer of the things you must know. 1. 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.

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. 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.

Start Using HTML5 WebSockets Today

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. 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.

5lide: HTML5-based Slides Maker

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. A showcase of sites using HTML5 markup. HTML5 Doctor, helping you implement HTML5 today.

Frameworks

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.

location.hash is dead. Long live HTML5 pushState!

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.

Expanding Images using HTML5′s contenteditable tabindex

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. Plan B: Font Fallbacks « coding@scribd. This is the fourth post in our series about Scribd’s HTML5 conversion.

Plan B: Font Fallbacks « coding@scribd

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. The Future of Web Apps - Single Page Applications. 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 Future of Web Apps - Single Page Applications

The web was never really designed as a platform for today’s applications, nevertheless we continue to bend it to our will. 2 Common infrastructure — HTML5. 1 Introduction 1.1 Background This section is non-normative.

2 Common infrastructure — HTML5

The World Wide Web's markup language has always been HTML. HTML was primarily designed as a language for semantically describing scientific documents, although its general design and adaptations over the years have enabled it to be used to describe a number of other types of documents. The main area that has not been adequately addressed by HTML is a vague subject referred to as Web Applications. 1.2 Audience This specification is intended for authors of documents and scripts that use the features defined in this specification, implementors 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.

View topic - Microdata implementation. Ajaxian. HTML5 Peeks, Pokes and Pointers.

HTML5 Demos

Video. HTML5 JS APIs. Hello HTML5. SproutCore - Home. HTML5 input placeholder= via YUI) Modernizr.