Dan Maharry

On Hold

by DanM

The Client Side is now on hold until such time as I can definitely commit the hour or two a day it takes to fill the firehose and generate the highlights of the day. I hope I will be able to make that commitment sooner rather than later.

In the meantime, thank you to the some 150 people who had already subscribed to this feed.

Introducing the firehose feed

by DanM

As I noted in Client Side #015, there were quite a few relevant items to log while I was out of action. 100+ in fact. Bearing that in mind, I’ve made a few little changes. You’ll now find two RSS feeds for The Client Side which will always be available and linked to in headers and in the UI.

If you’re patient enough to wait for me to wade through it all, subscribe to the highlights feed. If you’re happy to wade through it all yourself, subscribe to the fire hose feed.

Thanks, Dan

The Client Side #015

by DanM

Note to self: being offline for three weekdays doing sleep studies means a lot of blog posts in scan through. I’ll be playing catch up for a few days I think

Of Note


  • Social Plugins’ Memory Usage
    Shawn Wilsher highlights a bug in Firefox whereby it nearly doubles the memory used to support two of the same Facebook Like buttons on one page when it should re-use the same resources. He also notes that Facebook requires downloading the same large chunk of script for each like button on the page - something for FB to address.


  • Fiddler In Action - Part 1
    Mehdi Khalili starts his look at the free Web Debugging Proxy tool fiddle. He begins by explaining how it works, and then presents an overview of its four basic features, monitoring and comparing web sessions, inspecting individual requests and responses, and decrypting https traffic
  • Fiddler In Action - Part 2
    In the second half of his Fiddler tutorial, Mehdi Khalili looks at some of the more advanced features it offers. He covers using the QuickExec feature to run any of a set of simple commands for filtering sessions based on a set of criteria, setting breakpoints on individual or groups of requests, and changing items sent to the requesting browser on the fly from both request and response breakpoints. He also covers the AutoResponder, RequestBuilder, Filters tab and FiddlerCap tool for capturing traffic and sending the logs to someone else.
  • How to Use HTML5 Drag & Drop (4 Parts)
    Craig Buckler looks at using the W3C File API to enable the dragging and dropping of files from desktop to browser. In part one, he lays plain the browser support for this functionality and the basic html form and css for the demo which contains a file input element. Then he enables the basic drag and drop functionality with some javascript calling File API methods and XmlHttpRequest.upload. In part two, he looks at how to open the selected files – perhaps for pre-processing (resizing images etc) – before uploading to the server using script and the File API. In part three, he shows how to upload each selected (and now processed) file to the server asynchronously in the background. Note that to achieve this, he calls a PHP page to perform the actual save to server. Finally, part four looks at creating a progress bar for the users to keep track of the file upload’s progress.
  • More Dojo Tutorials from SitePen as they count down to DojoConf 2011. In this batch, we have Using Custom Modules with a CDN, Connecting a dojo Object Store to a Dojo Tree, and dojo.NodeList Extensions
  • Replacing Subtle Flash Animations with CSS3
    Louis Lazaris uses the 84Colors website as a case study to demonstrate how CSS keyframe animation and transforms can easily replace their flash animation equivalents while falling back to unanimated variants for non-supporting browsers.
  • Adding Weather to Your Site with jQuery and YQL
    Nathan Rohler demonstrates how to combine a jQuery's AJAX support with a Yahoo Query Language (YQL) request to Yahoo's local weather service feeds to create a client-side Weather widget for your website

Code Demos \ Downloads

The Client Side #014

by DanM

Of Note

  • Firefox Aurora Build 8 is here
    Mozilla have released v8 of their Aurora build of Firefox - somewhere between raw nightlies and a beta of Firefox 7. It includes support for cross-origin textures in WebGL, insertAdjacentHTML() and reduced resource requirements for media elements. A complete list of changes in at the linked page.
  • Bootstrap, from Twitter
    Twitter have released an open source webdev toolkit called Bootstrap. It contains a baseline css and html framework for your sites that looks not dissimilar to Twitter and full documentation as well.



Code Demos \ Downloads

The Client Side #013

by DanM

Not a new item, but Mike Woloszynowicz’s notes on three levels of understanding Javascript is very good. How well do you know it? Honestly?

Of Note

Last Call for Comments on CSS Speech module
Anyone interested in adding comments to the CSS Speech module specification now has until Sep 30 to do so. The W3C has issued its last working draft of the spec designed to match the model described by the Speech Synthesis Markup Language v1.1.

Announcing YUI 3.4.0 and the new YUILibrary.com
George Puckett announces v3.4.0 of the YUI is now on CDN and to download along with a completely revised and revamped YUILibrary.com to provide documentation for the same. He highlights several new beta features and those moved from beta to GA status, as well as providing links to full release notes

HTML5-Powered VNC Implementation noVNC Let's You Access Remote Systems
Rey Bango highlights an HTML5-powered VNC client called noVNC written by Joel Martin and available to download from github. The client is based on WebSockets and Canvas. A demo video is included.

Mozilla Labs introduces new beta site
Pascal Finette announces the beta launch of the new look Mozilla Labs site, the aims of the site and how to provide feedback to the dev team


11 hard truths about HTML5
Peter Wayner steps into pop our bubble of HTML5 love and point out that there are still some serious pain points and limitations to the new standard and its implementations

Into the Ring with knockout.js
Dan Wellman demonstrates how to use knockout.js to build a simple interface that displays a list of contacts and then allows the user to filter and sort it. This part one of the tutorial

Into the Ring with knockout.js: Part 2 – the Rematch
In part 2 of his tutorial, Dan Wellman continues to build upon his knockout.js-based contact list, adding paging and "dependant observables" (events on sets of properties) to the application.

KnockoutJS Needs a Better Set of Tutorials
In response to some of the code in part two of Dan Wellman’s tutorial, Rob Conery calls out for better tutorials and clean code from Knockout.js writers, and…

The Backbone.js Todo List Sample, Refactored
Rob Conery takes a two part look at the Todo list tutorial that's listed on backbone.js central git repository and attempts to refactor what he finds there. Part two of his article is here.

Real World CSS Practices
Matt Ward lists out and explains eight rules he has developed over several years for working with CSS, from code format to conventions to simple typography rules


A New Tutorial Everyday until DojoConf
As part of the countdown until DojoConf 2011 on Sep 16 in Arlington, VA, SitePen has announced they will be releasing a new Dojo tutorial every day until then. They have already released three, Form management with dojox.form.manager, Data modelling for MVC Applications, and Using Dojo Data

speak.js: Text-to-Speech on the Web
azakai highlights a new javascript library called speak.js. This is a port of the eSpeak open source text-to-speech synthesizer. He gives a brief demo and asks for help to improve it

Four essential HTML5 canvas tips
Hakim El Hattab gives four quick tips to improve your use of the canvas: reusing as many pixels as possible between frames, using composite modes, working around anti-aliasing for crisper line drawing, and clearing the canvas by resizing it.

Hyphenation arrives in Firefox and Safari
Fontdeck explains what hyphenation is and shows how to use the CSS3 Hyphenation attributes which Firefox and Safari have just begun to support

postcard from Paris – css3 keyframes animations in use
PeHaa demonstrates CSS3 Keyframe Animation by creating an animated greetings card of Eiffel Tower.

CSS Selectors: Just the Tricky Bits
Joshua Johnson walks through the various CSS selectors we can use and how they can be combined. He explains parents, children, siblings, descendants and ancestors, the child and sibling selectors, selector chaining, the universal selector, attribute and pseudo-class selectors

Little-Known CSS3 Typographic Features
Louis Lazaris looks at three new properties in the CSS3 fonts module - font-stretch, font-size-adjust & font-kerning - and reminds us of the alternate values for font-weight

Custom AJAX Content Handling with the Dojo Toolkit
David Walsh demonstrates how to use dojo.contentHandlers for handling the results of AJAX requests.


The Javascript Show Episode 11: JavaScript prototypes, understanding "this", extending native objects (30:04)

CSS-Tricks #100 : Let’s write semantic markup! We spend an entire hour looking at a Photoshop design and writing HTML5 markup that describes what we see. We try and be as semantic as we can and discuss the challenges of that as they come up.  (62:07)

Design Festival Podcast #15: Web Accessibility with Dennis Lembrée (47:36)

Lullabot Podcast #95: Who is Jeffrey Zeldman? The reigning king of web standards, Jeffrey Zeldman, speaks with Lullabot's Jared Ponchot and Jeff Robbins about the evolution and future directions of web technology (71:35)

Function Source Episode 2 : Charles Jolley of Strobe/SproutCore/MobileMe talks about App Delivery Networks (like CDNs but for apps) and the HP WebOS announcement

Code Demos \ Downloads

Create Spinning Progress Indicator with Spin.js – Ray Cheung

Rendering HTML+CSS to Canvas – Rob Evans

Kendo UI overview video now live – Kendo UI team

The Golden Grid System - A folding grid for responsive design – jonikorpi

Cross Browser CSS Box Shadows – David Walsh