Tags: scripting

Using ServiceWorker in Chrome today - JakeArchibald.com

It’s very early days for ServiceWorker, but Jake is on hand with documentation and instructions on its use. To be honest, most of this is over my head and I suspect it won’t really “click” until I try using it for myself.

Where it gets really interesting is in the comments. Stuart asks “What about progressive enhancement?” And Jake points out that because a ServiceWorker won’t be installed on a first visit, you pretty much have to treat it as an enhancement. In fact, you’d have to go out of your way to make it a requirement:

You could, of course, throw up a splash screen and wait for the ServiceWorker to install, creating a ServiceWorker-dependant experience. I will hunt those people down.

Learn JavaScript & jQuery - a book about interactive front-end web development

This looks like it could be a great book for anyone looking to get starting with JavaScript.

Comparing two ways to load non-critical CSS

Scott’s trying to find out the best ways to load critical CSS first and non-critical CSS later. Good discussion ensues.

You Might Not Need jQuery

A handy resource if you’re used to using jQuery for everything but you want to try going JavaScript commando.

Don’t get me wrong: jQuery is great, but for a lot of projects, you might not need 90% of the functionality it provides. So try starting with vanilla JS and only pulling in jQuery if and when you need it.

A Dive Into Plain JavaScript

A nice introduction to writing vanilla JavaScript, especially if you’re used to using jQuery.

OriDomi - origami for the web

A fun little JavaScript library for folding the DOM like paper. The annotated source is really nicely documented.

Why I’m turning JavaScript off by default

Another good ol’ rant from Tom. It’s a bit extreme but the underlying lamentation with the abandonment of progressive enhancement is well founded.

Progressive Enhancement. Still Alive and Kickin’

Dan explains the reasoning behind his “Sigh, JavaScript” Tumblr blog, and provides an excellent example of progressive enhancement in the process.

Go, Dan, go!

intention.js

This smells bad: adding a JavaScript dependency for responsive layouts.

I disapprove.

I know jQuery. Now what?

A terrific piece by Remy—based on a talk he gave—on when he uses jQuery and, more importantly, when he doesn’t. His experiences and conclusions pretty much mirror my own, but of course Remy is far more thoughtful and smart than I.

Really good stuff.

The Vanilla Web Diet by Christian Heilman

I like the sound of the book that Chris is writing for Smashing Magazine. It sounds like a very future-friendly approach to front-end development.

On layout and web performance by Kelly Norton

This is handy: a look at which DOM properties and methods cause layout thrashing (reflows).

phuu/sparksvg · GitHub

Remember when I made that canvas sparkline script? Remember when Stuart grant my wish for an SVG version? Well, now Tom has gone one further and created a hosted version on sparksvg.me

Not a fan of sparklines? Bars and circles are also available.

digitalBush » Masked Input Plugin

This looks like a handy way of enhancing forms to have input masks (Luke W. would approve). Right now it’s a jQuery plug-in but I’m sure someone as smart as you would be able to create a standalone version, right?

DOM Enlightenment

This looks great! It’s a CC-licensed book by Cody Lindley (whose work I’ve admired for many years) aimed at teaching DOM Scripting for modern browsers. You can read the whole thing online or wait for the paper version from O’Reilly.

If all your JavaScript currently consists of writing jQuery plugins, I highly recommend you read this.

Responsive Measure: A jQuery plugin for responsive typography

Here’s something that Josh debuted at Smashing Conference: a script for responsive designs to adjust font-sizes based on a desired line-length.

Inevitably, it’s a jQuery plugin but I’m sure somebody could fork it to create a standalone version (hint, hint).

filamentgroup/Southstreet

This is excellent! Scott, Wilto, and the gang at Filament Group have released the tools they use to help them craft performant responsive sites. Lots of excellent resources for conditional loading here.

Microjs: Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!

I really like this trend of small standalone scripts rather than plug-ins that require the presence of a library.

Wat — Destroy All Software Talks

This cracked me up. There are two possibilities: either this is really is very funny or I am very nerdy.

A Fix for the iOS Orientationchange Zoom Bug | Filament Group, Inc., Boston, MA

That Scott is one smart cookie. He has come up with a workaround (using the accelerometer) for that annoying Mobile Safari orientation/zoom bug that I blogged about recently.

I still want Apple to fix this bug as soon as possible—the fact that such smart people are spending so much effort on ingenious hacks shows just how much of a pain-point this is.

Vanilla JavaScript FTW

I’ve found myself using jQuery less and less recently. Partly to avoid the extra download and file size but also—as shown here—when it comes to DOM manipulation, there’s a lot you can do straight out of the box.

Polyfilling The HTML5 Gaps With JavaScript

An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.

Cream of tag soup - Ramblings about frontend stuff

Jake Archibald has a blog now. Subscribed.

Creating responsive images using the noscript tag | Head

Now this is intriguing: putting your default images inside a noscript element, then do your viewport measuring and image-swapping before removing the noscript tags. But when I tried this a while back, I couldn’t get access to the noscript elements with JavaScript (which makes sense, when you think about it).

I wonder if it’s the use of class names or jQuery that allows it to work here?

spin.js

An ingenious loading indicator that uses JavaScript instead of an animated .gif.

Chromium Blog: Connecting Web Apps with Web Intents

A quick overview and explanation of web intents.

CreativeJS | The very best of creative JavaScript and HTML5

This is your one-stop shop for envelope-pushing in the browser:

The very best of creative JavaScript and HTML5.

Announcing Typo.js: Client-side JavaScript Spellchecking

This could be a handy: a client-side spellchecker. The dictionary files are a bit big of course—maybe local storage could help.

You Must Learn JavaScript — Article — The Nerdary

Kenny Meyers on the ubiquity of JavaScript.

Create a new Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

This looks like it could be a handy little tool for creating test cases with HTML, CSS and JavaScript.

jQuery Enlightenment | by Cody Lindley | 1st Edition | based on jQuery 1.3.2

A $15 PDF book on jQuery from Cody Lindley.

LAZEROIDS!

Asteroids implemented using HTML5's canvas.

BallDroppings

Brendan Dawes pointed me to this wonderfully playful creation. It's Flash-free, believe it or not.

arc90 lab : experiments : HashMask - Another (More Secure!) Experiment in Password Masking

Here's an interesting idea: generating a sparkline when you input a password ...familiarity with the generated sparkline acts as a visual aid to the user.

BBC - Glow JavaScript Library

The BBC have released their JavaScript library. This one is worth paying attention to for its wide browser support base.

Space Invaders

The classic arcade game, recreated using the JavaScript/SVG library Raphaël.

jQuery vs MooTools: Choosing Between Two Great JavaScript Frameworks

A detailed comparison of jQuery and MooTools.

as days pass by, by Stuart Langridge — A WAI-ARIA “stylesheet”

Stuart has an interesting take on ARAI attributes. Why can't they be set declaratively in an external file in the same way as we set styles?

AJAX APIs Playground

A nice way to play around with Google's APIs. Example code is provided which you can edit and immediately see the results.

Play School: Easy Ajax - load | jQuery for Designers - Tutorials and screencasts

Remy teaches non-techies how to use jQuery in a responsible way.

Douglas Crockford: "Ajax Performance" on Yahoo! Video

An excellent overview of Ajax and optimisation.

jCquard: The Do Less, Punch More JavaScript Library

This is certainly the most backwards-compatible JavaScript library out there.

JS-909

Cameron made a drum machine in JavaScript. This is further proof that the man in blue is possibly even more insane than John Resig. Nuts! Nuts, I tell you!

jQuery.timepickr.js

John Resig offers an alternative user interface for selecting a time.

northtemple - JavaScript and screen readers

An in-depth look at the intersection of JavaScript and screen readers, concentrating on events in particular.

JSSpeccy

Holy crap! A ZX Spectrum emulator built entirely in JavaScript. I cannot adequately describe the Proustian sensation I get from playing Manic Miner in a browser.

QuirksBlog: Slides from acessible Ajax workshop at Fundamentos Web

Download a PDF of PPK's slides from his JavaScript workshop at Fundamentos Web. There's some good advice contained therein.

United States Patent: 6941562

A wonderful example of why the patent system is so totally b0rked and completely unsuited to software. Someone patent Ajax (or Remote Scripting, if you prefer) back in 2001. Un. Bel. Eeeevable.

Scripting Enabled

Christian is using the prize money he won at Mashed to put on an event in London in September devoted to "ethical hacking": creating mashups to make social networks more accessible.

AJAX Libraries API - Google Code

Google is now hosting all the major JavaScript libraries. The caching benefits should be good news for your users.

Google Doctype - Google Code

This looks like it could be a very valuable resource indeed: a user-contributed and edited reference for HTML, CSS and JavaScript.

Cubescape - Your own digital landscape

Cam's latest experiment is insane but brilliant ...sort of like Cam himself.

Unobtrusive JavaScript with jQuery

Simon's slides and demos from his half-day workshop at XTech.

Stop using Ajax! - Opera Developer Community

Ignore the attention-grabbing headline. Brothercake is something more nuanced here (and he's backing it up with examples).

NOSCRIPT for nerds. Stuff that disappears. -

Okay, you have to be a real JavaScript/HTML geek to find this funny but check this out: document.write('<noscript>...'); Madness!

jQuery 1.2 Cheat Sheet :: www.gscottolson.com/weblog/

A handy cheat sheet of jQuery methods to print out and keep on hand.

Easy as Pie Ajax Requests - Create compelling ajax in minutes with simple examples. | Notes from Phazm

This is a good straightforward hands-on explanation of Ajax: succinct and clear.

W3C DOM Compatibility - HTML

PPK has once again been doing sterling work. He's updated the DOM compatibility chart and things are actually looking pretty good.

jQuery UI: Widgets, Components, and Interactions

From the people who brought you jQuery comes a set of widgets built using jQuery complete with documentation and tutorials.

UT| Event delegation without a JavaScript library

A nice succinct explanation of how to roll your own JavaScript event delegation from Andy Hume.

dpaste: #15223: LOLDOM, by Jeremy Keith

Okay, this started as a joke but then I couldn't resist writing a bit of code. Usage: OH_HAI.I_CAN_HAS_ELEMENT_BY_ID("Id") and OH_HAI.I_CAN_HAS_ELEMENTS_BY_TAG_NAME("tag").

Channy’s Blog - » 『DOM 스크립트』 출간 이벤트!

DOM Scripting... now also available in Korean.

Viget Labs Is Hiring - Join Our Design Team

What excellent taste this web design shop has. I don't mean the fancy scrolling—I'm talking about what's on the bookshelf.

MiniAjax.com / A showroom of nice looking simple downloadable DHTML and AJAX scripts

A collection of scripts. There might be some good stuff here but use with care and discretion.

Monkey Bites

A brilliant list of New Year's Resolutions for Coders.

Dear JavaScript Library Developers… - Wait till I come!

Christian's wish list for JavaScript libraries.

rikrikrik: Wasted Javascript

How much page weight is being wasted on JavaScript. It's time to shed those pounds.

danwebb.net - RailsConf Presentation Slides and Example Code

A PDF of Dan's slides from RailsConf. Looks like it was an excellent presentation.

Brown University

Interesting use of unobtrusive JavaScript for front page navigation. Bonus points are awarded for the hAtom and hCard markup.

vanillart » A List Apart » Séparation Comportementale

A French translation of my most recent article for A List Apart.

Adobe Labs - Spry Data Set and Dynamic Region Overview

The Spry framework from Adobe looks like it could be worth further investigation. I certainly like the underlying philosophy: lightweight, standards-based, and declarative.

Infovore : <%= javascript_include_tag :defaults %> considered harmful?

A cautionary note to Rails coders from Tom. The default JavaScript includes can really add to your page weight. Only include them if you really need all of them.

Vitamin Features » Go forth and API

Cameron has written a great article on using APIs with Ajax. I love the idea of using .htaccess to fake a proxy and get around the same-site restriction.

The JavaScript Library World Cup [JavaScript & DHTML Tutorials]

Dan Webb does an excellent job of comparing the big four JavaScript libraries that were discussed at @media.

Cheat Sheets for the YUI Utilities » Yahoo! User Interface Blog

If you use the Yahoo JavaScript libraries a lot, these cheat sheets (inspired by those of fellow Brightonian, Dave Childs) should come in very handy.

Garrett Dimon / Front-End Architecture: AJAX & DOM Scripting

Garret gives an excellent, excellent round-up of the factors involved in the behaviour layer of front-end architecture (that's 'building websites' to you and me).

YUI Tetris!

Dustin has written Tetris in JavaScript (using the Yahoo library). Nifty!

Hijax: Progressive Enhancement with Ajax

The slides of the Hijax talk from the Ajax Developer's Day at XTech 2006 in Amsterdam.

Bite Size Standards

John has been working behind the scenes on this for quite a while and now it's ready for launch. Lots of yummy standards-based goodness in bite-sized chunks.

JSONRequest

Douglas Crockford has written a wrapper function to allow the easy interchange of JSON data between servers.

Respect the DOM t-shirt

Respect the DOM t-shirt

Buzzword Bingo

This <a href="http://bingo.adactio.com/">looks familiar</a>. Great minds think alike. (For some reason, this page has 76 divs and 50 tables. Yikes!)

12 perfect cases for Ajax

Yes, Ajax is over-used but here are some cases where it really helps.

perl.com: Using Ajax from Perl

My fellow Brightonian geek, Dom, has written an article about using Perl and Ajax.

Dave Shea London Geek Dinner - 23rd January 2006

A transcript of the Q&A session with Dave.

For Many AJAX is Not Degrading, But it Must :: Off the Top :: vanderwal.net

"...it must degrade well. It must still be accessible. It must be usable. If not, it is a cool useless piece of rubbish for some or many people."

24 ways

One great web development tip for every day in the Advent calendar, courtesy of Drew McLellan

rest/ahah - Microformats

Who knew? The way I do my Ajax is a microformat. AHAH: Asynchronous HTML and HTTP.

Web API Working Group Charter

The W3C proves that it can move with the times: "The mission of the W3C Web API Working Group is to develop specifications that enable improved client-side application development on the Web." This is very good news indeed.

Tim's WSG Ajax Presentation

Download the PDF of the slides and play around with the demo from Tim Lucas' recent presentation.

Simon Bisson: Old dog learns new tricks

Ajax in The Guardian.

Progetto NINFEA

Here's a really nice implementation of my JavaScript slideshow script.

EBA: Web ComboBox V3 - AJAX - Fuzzy Search Autocompletion - LiveSearch

Yet another Ajax implementation, but this one is making some bold claims regarding accesibility. I must investigate further.

AJAX: Usable Interactivity with Remote Scripting

A nice introduction the XMLHttpRequest object by Cameron Adams.

Behaviour : Using CSS selectors to apply Javascript behaviours

An excellent alternative to the inline cruft so common in most Ajax applications.

Google Maps API Documentation

Documentation for the new Google Maps API. Unlike most web services, this one is run entirely over JavaScript.

Auto Zoom Greasemonkey script

A Greasemonkey version of my zoom layout bookmarklet. Great stuff!

script.aculo.us - web 2.0 javascript

A library of JavaScript classes: not very unobtrusive, not much graceful degradation. I think we need a bit less hype and a bit more questioning.

Robert’s talk » Rise, Lord JavaScript

So it begins... dispelling the myths and spreading the good word about DOM Scripting.

Content with Style: Fixing the Back Button and Enabling Bookmarking for AJAX Apps

Mike Stenhouse tackles the usability concerns raised by Ajax apps, specifically the breaking of the back button functionality.