Of Note

Firefox 6 is hereVersion 6 of the Mozilla browser has been released – the first under its new ‘release more often’ strategy and eight weeks after Firefox 5. “The most notable addition to this new release are the <progress> element, touch events, Server-Sent Events as well as the return of WebSockets.” according to Mozilla Hacks which gives a brief rundown of these features as well as a full list of many other new items. Sitepoint also highlights its favourite new features and .net magazine asks whether the quick release schedule is good for devs or not? Scott Gilbertson at WebMonkey also highlights Scratchpad, the new Javascript editor in Firefox 6.

XMLHttpRequest Level 2 - New Working DraftA new working draft of the spec has been released. The XMLHttpRequest Level 2 specification enhances the XMLHttpRequest object with new features, such as cross-origin requests, progress events, and the handling of byte streams for both sending and receiving.

Tutorials

Improving HTML5 Canvas PerformanceBoris Smus looks at how to optimize canvas performance on a web page (rather than how to use it). He looks at eleven different techniques that may improve performance as well as suggesting to use JSPerf to verify your results.

Integrating Canvas into your Web AppDavid Tong looks at how to use the HTML5 canvas element to create, edit, open and export images. He also looks at using HTML5 LocalStorage for saving canvas elements, saving the whole canvas as a binary file on the server, and suggests a few JS libraries to give all browsers the same experience

When Visitors Print — About That Print StylesheetTim Connell looks at print stylesheets, covering tips for removing items that don't need to be printed, using better fonts for printed matter, adding branding to the printout, dealing with links and other interactive elements, and using the jQuery Print Preview plugin

Articles

Promise.js 2.0 – Promise Framework for JavaScript - inventive title - Site Home - MSDN BlogsPromise is a programming model that deals with deferred results in concurrent programming. The basic idea around promises are that rather than issuing a blocking call for a resource (IO, Network, etc.) you can immediately return a promise for a future value that will eventually be fulfilled. This allows you to write non-blocking logic that executes asynchronously without having to write a lot of synchronization and plumbing code.

Tutorials

HTML5 And The Document Outlining AlgorithmDerek Johnson looks at the Document Outlining Algorithm, how it should work against a HTML document using Heading content, Sectioning content, Untitled sections, sectioning roots, and untitled documents.

How To Use CSS nth-childPaul demonstrates how to use the nth-child and last-child CSS selectors correctly. He uses several variants on nth-child to cover its various methods of use

CSS3 ShapesA neat reference site that covers how to create shapes using only CSS. Basic shapes such as circles, ellipses and squares are covered through to speech bubbles, eggs and even pacman.

CSS3 vs Photoshop: Opacity and TransparencyAlvaro Guzman compares the Opacity and Transparency features of CSS in browsers against the corresponding features in Photoshop. He also looks at CSS-transitions to fade in a graphics opacity and a slightly more complex demo that combines the two

Persistent HeadersChris Coyier present a quick technique to keep the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you've scrolled past that relevant section.

Make a Rotatable 3D Product Boxshot with Three.jsMatt Doyle looks at the Three.js 3d-rendering javascript library. He covers how to set it up, create renderers, scenes, cameras, lights, materials, textures, cuboids and meshes. He also looks at how to animate 3D scenes using render() and requestAnimationFrame(), and learned how to detect WebGL

To Hear

SitePoint Podcast #125: Taming the Stylesheet with Jonathan SnookThe latest Sitepoint podcast talks with Jonathan Snook about his recent work for Yahoo on their Web apps like their Mail service and Flickr, and the benefits of using CSS3. He also talks about his recent communication with the W3C Working Group on ideas and changes happening in the CSS3 spec.

To Try

YSlow for Opera, out now!Opera's Developer Relations Team announce that Yahoo's excellent website performance tool is now available as an Opera extension.

CSS3 MaximizerMichael Deal announces CSS3 Maximizer, an online utility in the same vein as Prefixr but which goes a little further, not only adding in any missing vendor prefixed properties for you but also the values which work best against that browser

As ever, if you’ve any links you think I’ve missed, please give me a shout and let me know. I’m concentrating mainly on HTML, CSS and Javascript at the moment, but if you think I should be listing SVG or WebGL articles as well for example, let me know that too.

To Read

An Event Apart: Design PrinciplesLuke Wroblewski : "In his Design Principles presentation at An Event Apart in Minneapolis, MN 2011 Jeremy Keith outlined the design principles behind the World Wide Web and how they continue to shape its future. Here are my notes from his talk"

An Event Apart: CSS Best PracticesLUKE WROBLEWSKI: “In her ‘Our Best Practices Are Killing Us’ presentation at An Event Apart in Minneapolis MN, Nicole Sullivan walked through common CSS best practices that have outlived their usefulness and what we can do instead to improve CSS performance and maintenance long term. Here’s my notes from her talk:”

Mozilla and WebKit to support Source MapsTanya Combrick reports that debugging minified Javascript may become a lot easier for non-IE users as Mozilla and Webkit are both working to support Source Maps. These map the minified code back to the unminified version allowing for much easier debugging.

Architecting Your App in Ext JS 4, Part 2Tommy Maintz continues his tutorial on using the ExtJS MVC architecture to build a Pandora-style application. In this part, he defines the basic areas of the site, and incorporates JSON classes, stores and models for songs, stations and search results into the code.

The “inherit” Value for CSS PropertiesLouis Lazaris discusses the purpose of the CSS inherit attribute, when you might use it, how IE6 and IE& don't support it, and importantly, gives a list of CSS properties inherited from parent to child elements by default

How to tame forms in web designPatrick MacNeil looks at the issues in cross-browser form design, and the Formalize, Uniform, Niceforms, and Wijmo plugins you can use to ease the pain. He also quickly covers a few options for additional form controls such sliders, uploaders, slider-style checkboxes and jQuery UI buttons.

Opera Dragonfly 1.1 release candidate 1David Storey announces RC1 for Opera Dragonfly v1.1, the built-in suite of developer tools that ships inside Opera. You can find it in the current experimental builds of Opera.

To Read

Techniques For Gracefully Degrading Media QueriesLewis Nyman looks at five techniques that deal with browsers which do not support the media queries you’ll be adding to your responsive web designs of the future: doing nothing, conditional IE stylesheets, circumventing media query conditions, respond.js and css3-mediaqueries-js.

Microdata & the microdata DOM APIChris Mills looks at HTML5 microdata in depth, from its basic syntax to using it in several different scenarios (nesting, non-unique data, creating a vocabulary for your items and others) to the a brief looks at the microdata API. Demos are included.

Writing your own cross-browser polyfillsAddy Osmani investigates why, when and how to write your own cross-browser polyfill script to add browser support for a new feature in newer browsers to their older predecessors.

To Try

jQuery delete / disappearCliff Boit demonstrates how to use "jQuery’s animate function to animate the deleting of content on a web page by highlighting the div with a different background color and eventually sliding it up and thus hiding it from view."

HTML5 Boilerplate v2 ReleasedA year to the day after v1 was released, HTML5 Boilerplate v2 is with us containing some 299 commits. Notable changes include replacing the reset stylesheet with normalize.css, 80% faster build script, @import inlining, appcache generation, and including respond.js. Full changelog is on the site and an executive summary is on Paul Irish’s blog.