Dan Maharry

Writing about web development since 1997

Introducing the firehose feed

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

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

Articles

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

Tutorials

  • 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

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.

Articles

Tutorials

Code Demos \ Downloads

The Client Side #013

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

Articles

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

Tutorials

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.

Podcasts

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

The Client Side #012

Of Note

Articles

Tutorials

  • Improving HTML5 Canvas Performance
    Boris 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 App
    David 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 Stylesheet
    Tim 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
  • dat.gui: Exceptional JavaScript Interface Controller
    David Walsh takes a flying tour around dat.gui, "a lightweight controller library that allows you to easily manipulate variables and fire functions on the fly."
  • Leverage CSS when resizing HTML elements using JavaScript
    Milan Adamovsky looks at why frameworks use only javascript to resize html elements, why this isn't the best solution and how to leverage CSS to do it better

Code Demos