Dan Maharry

Writing about web development since 1997

The Client Side #011

Trying it organised slightly different today – let me know what you think

Articles

Tutorials

Demos

The Client Side #010

Covering last Friday and the weekend.

To Read

  • Progress on HTML5 Microdata Could Revolutionize Web Queries
    At the end of a popular week for microdata, Scott M. Fulton, III tries to establish where the future lies for it, with specs for it being written both by W3C and WHAT-WG as well as a competing standard RDFa.
  • News roundup: png.js, pouchDB, finding memory leaks in JavaScript, Page Visibility API
    David Calhoun presents another week's roundup of releases, articles and upcoming events in Javascript
  • How to create a spinning, zooming effect on images with CSS3
    Arisson Pauxis uses (only) CSS transforms and transitions to spin and zoom into an image once they are mouseover-ed.
  • CSS3 Shapes
    A 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 Transparency
    Alvaro 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
  • jWorldmaps: The Anatomy of a jQuery Mapping Plugin
    G. Andrew Duthie looks at how to embed rich functionality into a jQuery plugin by working through the creation of a plugin which encapsulates the Worldmaps functionality.
  • jQuery Mobile : Page pre-fetch
    Yousef Jadallah invetsigates the Page prefetch feature of jQuery Mobile beta 2
  • Persistent Headers
    Chris 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.js
    Matt 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

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 Maximizer
    Michael 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

The Client Side #009

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 Principles
Luke 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 Practices
LUKE 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 Maps
Tanya 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 2
Tommy 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 Properties
Louis 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 design
Patrick 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.

Find the jQuery Bug #1: Chicken or the Egg
In the first of a new series, Elijah Manor looks at a typical case of treating asynchronous code as synchronous and the side effects it can have

HTML 5 Updates for .NET 4
Scott Hunter highlights two updates for the .NET Framework v4 which improve ASP.NET support for HTML5, including one released this week as part of patch Tuesday

To Hear

Creating the HTML5tx.com design with Drifting Creatives Gavin Braman and Martin Hooper
DeveloperSmackdown announces show #56 and discusses the design and build of html5tx.com with its creators.

Design Festival Podcast #14: CSS3 Gradients or SVG Backgrounds
Simon Pascal Klein chats to Alex Walker of Sitepoint to talk about the pros and cons of CSS3 gradients versus SVG backgrounds

To Try

MooTools Wall Plugin \ jQuery Chosen Plugin \ Drag and Drop MooTools File Uploads
David Walsh has been busy demonstrating with code and live pages three new plugins, two for MooTools and one for jQuery.

Opera Dragonfly 1.1 release candidate 1
David 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.

The Client Side #008

Of Note

Anatomy of a HTML5 Mobile App
Brian Fling breaks down what makes an HTML5 Mobile App and analyzes how different an HTML5 app is from an HTML website. Well worth reading.

To Read

Beginner’s Guide to Responsive Web Design
Nick Pettit takes a completely fresh look at what responsive Web Design is and how to implement a responsive web site for beginners.

Techniques For Gracefully Degrading Media Queries
Lewis 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 API
Chris 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 polyfills
Addy 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.

5 Benefits of Developing JavaScript Sites & Apps
The KendoUI team discuss why you might want to build\migrate using Javascript (frameworks) rather than traditional server-side technologies such as Ruby, PHP or ASP.NET

The BackboneJS and Knockout Danceoff
Rob Conery compares the pros and cons of using backboneJS versus using knockout.js as a client-side framework.

Moz JS Team Newsletter 7/29-8/9
David Mandelin blogs this weeks newsletter from the Mozilla Javascript engine (SpiderMonkey) team

To Try

How to : Create Pendulum Clock Using Pure CSS
Steve at WebDeveloperJuice demos a CSS3 animated clock along with full CSS code

jQuery delete / disappear
Cliff 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 Released
A 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.

The Client Side #007

It is amazing how much you much change your day’s agenda to avoid being around city centre riots.

Of Note

  • HTML5: Edition for Web Authors First Working Draft Released
    The W3C has released the first working draft of the HTML5 spec for web developers only, i.e. without all the info for browser developers. This is analogous to the What-WG version for webdevs athttp://developers.whatwg.org/
  • “Responsive Web Design” Book Review and Giveaway
    Webdesigntuts+ has a review of and  a competition to win a copy of Ethan Marcotte’s Responsive Web Design book. Closing date is Aug 13.
  • Book : HTML5 Media
    Shelley Powers new introductory book on the HTML5 Media elements. "[It] shows you how to add HTML5 media elements to your web pages, and how to provide custom controls for letting web visitors interact with the content. You’ll also learn how to provide subtitles and captions, using file formats that work in browsers now."
  • Book : Using the HTML5 Filesystem API
    Eric Beidelman's new introductory book to the HTML5 Filesystem API is now available. "You'll learn how to provide your applications with a true file system that enables them to create, read, and write files ands folders in a sandboxed section of the user's local filesystem."

To Read

  • The details and summary elements
    Tom Leadbetter looks at the HTML5 details element, the built-in element for toggling visible content. He presents demos of both simple and nested details elements, notes existing polyfills for crowser-browser support and the current state of accessibility for it.
  • Indeterminate Checkboxes
    Chris Coyier looks briefly at how to implement a third state for a checkbox in addition to (un)checked - indeterminate - and gives a use case for it.
  • TO DO Application Using Local Storage
    Fadi Hania demonstrates the Web Storage API by building an online to-do list that saves its contents locally.
  • Introducing the Knockout.Unobtrusive Plugin
    Brandon Satrom announces the first release of Knockout.Unobtrusive which enables script-based bindings in the knockout.js MVVM framework in addition to the default data-bind syntax
  • Developing a Digg-Style Input Form With CSS3 and jQuery
    Jake Rocheleau takes a blank page and demonstrates how to create forms with the same aesthetics as the new-look Digg submission form using CSS3 and jQuery
  • Working with HTML Fragments in jQuery
    Mike at MoreTechTips presents a couple of quick jQuery functions to help deal with HTML fragments returned in an AJAX query. The first creates a wrapper around the fragment and the second prevents the contents of iframes and images in the fragment being loaded automatically by the browser before you've processed them
  • Why (And How) You Should Use HTML5 Microdata
    Stephen Bradley looks at using Microdata - part of HTML5 rather than additional like microformats - to add semantic meaning and structure to the data on your web pages. The three main microdata attributes are demonstrated along with the use of schema.org itemtypes to make these annotations search engine friendly.

To Try

  • 10 of the Best CSS3 Code Generators
    Criag Buckler looks at ten of the best online tools to generate your CSS3 code for you.
  • Saving generated files on the client-side
    Eli Grey has made available FileSaver.js. This implements the W3C saveAs() FileSaver interface in browsers that do not natively support it. To demonstrate, he has written canvas-toBlob.js that saves the contents of a canvas to the local filesystem
  • New HTML5 BBC iPlayer for TV
    The BBC Internet blog announces a new version of the BBC's iPlayer. Initially only for PS3 users, there's a video demo for the rest of us