Tags: javascript

439

sparkline

First impressions of React

I’m following Remy’s experiments with great interest—his approach sounds like the holy grail:

I’m trying to build a web app that uses progressive enhancement as a design principle with state as a core value to the coding approach.

Web development as a hack of hacks - QuirksBlog

PPK reads a Hacker News thread so you don’t have to.

Why we use progressive enhancement to build GOV.UK | Technology at GDS

This is a terrific read that gets to the heart of why progressive enhancement is such a solid methodology: progressive enhancement improves resilience.

Meeting our many users’ needs is number one on our list of design principles. We can’t know every different setup a person might use while building our systems, but we can build them in a way that gives all of our users the greatest chance of success. Progressive enhancement lets us do this.

The article is full of great insights from a very large-scale web project.

CanvasSwirl: An animated spirograph experiment in JavaScript and canvas by xhva.net

But, like, have you have ever really looked at your hand?

Cross-origin Service Workers: Experimenting with Foreign Fetch | Web Updates - Google Developers

This one is definitely for service worker nerds only. I’ve been trying to get my head around this idea of “foreign fetch” which allows third parties to install service workers—could be handy for sites with APIs like Huffduffer and The Session. This article does a good job of explaining the somewhat tangled process.

lyzadanger/pragmatist-service-worker: Pragmatist’s Guide to Service Worker

Lyza put together some example code for her Smashing Conference talk on service workers. If you haven’t written a service worker before, these are really nice examples of how to grok it bit by bit.

MarkApp: Building apps with HTML

Here’s an interesting collection from Lea: small JavaScript libraries that do their configuration declaratively via HTML, rather than in JavaScript.

What is React?

I’m in a similar position to Remy:

I don’t use React. I don’t really gravitate towards larger frameworks, only because my daily work doesn’t require it, and I’m personally more interested in the lower level techniques and parts of the web and JavaScript.

But, like Remy, I’m interested in knowing what are the ideas and techniques embedded within large frameworks that will end up making their way into the web stack:

What I want to know is: what should I be taking away from React into my own continued evolution as a web developer?

There are some good responses in the comments.

cursory hack

Sorcery!

(well technically, JavaScript + canvas, but y’know, to-may-to, to-mah-to)

Creating An Accessible Modal Dialog

In the same vein as Hugo’s script, Ire walks through the steps involved in making an accessible modal window. Seeing all the thinking and code required for this really highlights the need for a way of making the document in the background inert.

Stuff I wish I’d known sooner about service workers

Some helpful “gotchas” that could save you some frustration if you’re starting out with service workers.

Progressive Enhancement for JavaScript App Developers | De Voorhoede

Build JS apps responsibly - cover your basics, render strategically and enhance into true apps.

sw-toolbox

If you’re going to dip your toes into the world of service workers, this handy library from the Chrome team is a good place to start.

Service worker meeting notes - JakeArchibald.com

Jake has written up the notes from the most recent gathering to discuss service workers. If you have any feedback on any of the proposed changes or additions to the spec, please add them. This proposal is the biggie:

We’re considering allowing the browser to run multiple concurrent instances of a service worker.

React Isomorphic Demo

It is possible to use React without relying completely on client-side JavaScript to render all your content—though it’s certainly not the default way most tutorials teach React. This ongoing tutorial aims to redress that imbalance.

Besides the main benefit of server rendering giving faster page loads, it also enables large amounts of the site to run without JavaScript. There are many reasons why you would want this, but my personal reasons are that it allows you to completely drop support JavaScript in older browsers, but still have the site function.

Adding Service Worker to a simple website - rossta.net

A nice little walkthrough of a straightforward Service Worker for a content-based site, like a blog.

The Service Worker Lifecycle

The life cycle of a Service Worker—with all its events and states—is the one bit that I’ve never paid that much attention to. My eyes just glaze over when it comes to installation, registration, and activation. But this post explains the whole process really clearly. Now it’s starting to make sense to me.

Teaching web development to design students (Phil Gyford’s website)

Phil’s write-up of teaching web development to beginners is immensely valuable in the run-up to the Codebar workshop that Charlotte is running this weekend. This bit gave both us a real “a-ha!” moment:

It only occurred to me at the end that I should have encouraged the students to try and fix each other’s bugs. If anyone had problems I’d go round and help people and often it’d be a little typo somewhere. Helping each other would acknowledge that this is entirely normal and that a second pair of eyes is often all that’s needed.

EmberCamp London Keynote 2016 // Speaker Deck

I really, really like what Ember is aiming for here:

First, we deliver the raw content, ensuring those on slow connections or without JavaScript get they’re after as soon as possible. Next, we load the minimum set of JavaScript needed to interactivity for that page, keeping transfer time and parsing time low. Once the user has an interactive page, we can start preemptively loading other parts of the application, including frequently-accessed data.

That’s how you get the holy grail of resilience and performance:

Subsequent visits and interactions are therefore nearly instantaneous, because they don’t rely on the network.

I sincerely hope other frameworks are paying attention to this layered approach.

Oh, and I also like this observation:

There’s an age-old argument about the difference between “web pages” and “web apps”. In reality, there’s a continuum between the two.

Rivets.js — Lightweight and powerful data binding + templating solution for building modern web applications

Mark recommended this JavaScript library as lightweight alternative to Vue.js …itself a kind of lightweight alternative to React. Basically I’m interested in the data-binding stuff.

Things to Know (and Potential Dangers) with Third-Party Scripts | CSS-Tricks

Third-party scripts can provide powerful functionality, but they also bring risks to privacy, security, performance, and page behavior.

» Service Workers at Scale, Part II: Handling Fallback Resources Cloud Four Blog

This ongoing series about the nuts’n’bolts of implementing Service Workers is really good. This one is great for getting to grips with the cache API.

Enhancing Optimistically | Filament Group, Inc., Boston, MA

I love the thinking that Scott puts into all aspects of building on the web. Here, he outlines a really robust approach to cutting the mustard for progressive enhancement.

Making your JavaScript Pure · An A List Apart Article

I really like this piece by Jack. All the things he’s talking about—pure functions and referential transparency—are terms I was previously unfamiliar with …but the concepts smell familiar. It’s good to have terminology (and reasoning) to apply to the way I structure my JavaScript.

Progressive Enhancement and Modern JavaScript ― Caolan

I think JavaScript frameworks have been blinkered to the needs of many developers (most websites are not SPAs or run by Node, nor should they be) for too long. We need to find a way to apply the lessons of modern frameworks to the rest of the web - it would be sad if everyone had to run JavaScript on their server and good-old resilient HTML was considered only as a fallback.

Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders | Lea Verou

You’re supposed to be able to create two-handled sliders with input type="range" but the browser support isn’t there yet. In the meantime, Lea has created a nice lightweight polyfill.

turbolinks/turbolinks: Turbolinks makes navigating your web application faster

I really, really like the approach that this JavaScript library is taking in treating Ajax as a progressive enhancement:

Turbolinks intercepts all clicks on a href links to the same domain. When you click an eligible link, Turbolinks prevents the browser from following it. Instead, Turbolinks changes the browser’s URL using the History API, requests the new page using XMLHttpRequest, and then renders the HTML response.

During rendering, Turbolinks replaces the current body element outright and merges the contents of the head element. The JavaScript window and document objects, and the HTML html element, persist from one rendering to the next.

Here’s the mustard it’s cutting:

It depends on the HTML5 History API and Window.requestAnimationFrame. In unsupported browsers, Turbolinks gracefully degrades to standard navigation.

This approach matches my own mental model for building on the web—I might try playing around with this on some of my projects.

Vanilla List: The Vanilla Javascript Repository

Here’s a handy directory of scripts that set out to solve one problem without any dependencies. Useful for poking at, picking apart, and learning from.

Developing Dependency Awareness – Smashing Magazine

A typically superb article by Aaron. Here, he breaks down a resilient approach to building for the web by examining the multiple ways you could add a button to a page. There’s a larger lesson here too:

We don’t control where our web-based products go or how our users access them. All we can do is imagine as many less-than-perfect scenarios as possible and do our best to ensure our creations will continue to do what they’re supposed to do. One of the easiest ways to do that is to be aware of and limit our dependencies.

Building Web Apps for Everyone - O’Reilly Media

Here’s a fantastic and free little book by Adam Scott. It’s nice and short, covering progressive enhancement, universal JavaScript, accessibility, and inclusive forms.

Download it now and watch this space for more titles around building inclusive web apps, collaboration, and maintaining privacy and security.

Did I mention that it’s free?

Responsive Product Comparison Table

Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.

Why Javascript Development is Crazy

The state of Javascript development is overwhelming and confusing because everyone is overengineering their apps by default without even realizing it.

Node: Up and Running

One of these days I’m going to step outside of my PHP comfort zone and actually build something in Node. One of these days. When I do, this book looks like a good place to start (and the online version is free).

simpl.info

This is a very handy resource—a collection of minimum viable implementations of HTML5 features and JavaScript APIs.

NPM & left-pad: Have We Forgotten How To Program? | Haney Codes .NET

Not to sound all “Get off my lawn, kids!” but I think there might be something to this. When you’re requiring hundreds of dependencies to do little tasks that you should be able to code yourself, something’s not right.

But, for the love of all that is programming, write your own bloody basic programming functions. Taking on dependencies for these one-liners is just nuts.

That said, you don’t want reinvent hundreds of wheels either (as most of the comments point out). There’s a balance to be had.

Thomas Fuchs proposes a middle ground for JavaScript.

The copy & paste guide to your first Service Worker

Minimum viable Service Worker tutorial. Copy, paste, and don’t ask questions.

Also:

Exhibit A

Exhibit B

Introduction to Ember FastBoot by Tom Dale on Vimeo

I’m so happy that Ember is moving to a server-side rendering model. Not only that, but as Tom points out here, it’s crucial that the server-side rendering is the default and the client-side functionality than becomes an enhancement.

Instagram-style filters in HTML5 Canvas | Viget

Una’s [Instagram filters in CSS}(https://github.com/una/CSSgram) are great, but the browser support for CSS filters isn’t as good as, say, the browser support for canvas. Here’s a clever bit of scripting to polyfill filters using canvas.

Introducing A11y Toggle

Here’s a bit of convergent evolution: Hugo’s script is similar to what I wrote about recently.

He also raises a point that Kevin mentioned:

I would like to investigate on the details and summary elements as they are basically a native implementation for content toggles.

For some reason details never got much browser love, even though it’s clearly paving a well-trodden cowpath.

Widespread XSS Vulnerabilities in Ad Network Code Affecting Top Tier Publishers, Retailers - Randy Westergren

An a revelation that comes as a shock to absolutely no one, the JavaScript injected by ad networks can be used as a vector for attack.

This industry-wide problem serves as a great example of how 3rd-party components can compromise the security of an otherwise secure site.

One more reason to install an ad blocker.

An update (March 2016) on the current state & recommendations for JavaScript …

Making web apps? Care about SEO? Here’s Google’s advice:

Use feature detection & progressive enhancement techniques to make your content available to all users.

A Year Without jQuery

In many ways, moving to vanilla JavaScript highlights the ugliness of working with the DOM directly, and the shortcomings of native Element object — shortcomings which Resig solved so incredibly eloquently with the jQuery API.

Having said that, the lessons I’ve learned over the last year have made me a better developer, and the tools built in the process have opened my eyes and given me enough confidence and understanding of vanilla JavaScript that the only scenario where I would personally consider using jQuery again would be a project needing IE8 support.

Maybe we could tone down the JavaScript / fuzzy notepad

Accept that sometimes, or for some people, your JavaScript will not work. Put some thought into what that means. Err on the side of basing your work on existing HTML mechanisms whenever you can.

If you’re going to override or reimplement something that already exists, do some research on what the existing thing does first. You cannot possibly craft a good replacement without understanding the original.

Remember that for all the power the web affords you, the control is still ultimately in end user’s hands.

Dyslexia

An attempt to convey the experience of (one kind of) dyslexia through code.

EnhanceConf - Stefan Tilkov - How to embrace the browser - YouTube

The videos from EnhanceConf are started to go up already. Stefan’s talk really struck me—all the talks were great but this one had the most unexpected insight for me. It really clarifies a lot of ideas that I’ve been trying to articulate, but which Stefan crystalises by taking the long-zoom view.

hunt

This looks like it could be quite a handy (and relatively lightweight) script for attaching events—like animations—to an item’s visibility, so the events only trigger when the item is scrolled into view.

Frontend Design | Brad Frost

Well, this pretty much sums up the front-end team at Clearleft:

Frontend design involves creating the HTML, CSS, and presentational JavaScript code that makes up a user interface.

I’ve often said that at Clearleft, development is always in the service of design. And like Brad, I often find myself defining that work by what it isn’t:

They understand UX principles and best practices, but may not spend their time conducting research, creating flows, and planning scenarios

They have a keen eye for aesthetics, but may not spend their time pouring over font pairings, comparing color palettes, or creating illustrations and icons.

They can write JavaScript, but may not spend their time writing application-level code, wiring up middleware, or debugging.

They understand the importance of backend development, but may not spend their time writing backend logic, spinning up servers, load testing, etc.

Making A Service Worker: A Case Study – Smashing Magazine

Lyza has written an excellent deep dive into Service Workers, complete with code.

I’m really chuffed that she gave me a shout-out to my exhortation:

So if you decide to play around with Service Workers, please, please share your experience.

By the way, I like her point about this being a good opportunity to use ES6/ES2015/HipsterScript features like arrow functions in the browser: any browser that supports Service Workers also supports the latest JavaScript.

The accessibility stack: making a better layer cake » Simply Accessible

A great description of a solid architectural approach to building on the web (and not just for accessibility either).

Introducing Soundslice offline mode | The Soundslice Blog

Adrian documents how he’s using Service Workers on Soundslice. I could imagine doing something similar for The Session.

JavaScript web apps considered valuable · molily

A response to a rant I linked to recently.

The solution for bad JavaScript web apps is not to abandon them altogether, but to make better ones.

I couldn’t agree more. The tools have evolved and we now have frameworks and practices that allow us to render from the server and use the same code to render on the client, progressively enhancing from a solid robust base.

JavaScript is the best technology to build excellent interactivity in the browser. Still, the most important skill of a client-side JavaScript developer is to know when not to solve a problem with client-side JavaScript. It’s always more robust to solve a problem further down in the stack.

The problem is that I don’t see a willingness from developers to embrace this way of thinking. Instead I see it dismissed as being unrealistic or more expensive.

Still, it always takes time for behaviour to change so maybe things will only get better. I certainly hope so.

Don’t tell me what my browser can’t do! by Christian Heilmann

A great piece by Christian on taking a responsible, customer-focused approach to building on the web.

You don’t have to support old browsers and terrible setups. But you are not allowed to block them out. It is a simple matter of giving a usable interface to end users. A button that does nothing when you click it is not a good experience. Test if the functionality is available, then create or show the button.

Yes, this is an argument for progressive enhancement. No, that does not mean you can’t use JavaScript.

You can absolutely expect JavaScript to be available on your end users computers in 2016. At the same time it is painfully naive to expect it to work under all circumstances.

Why I hate your Single Page App by Stefan Tilkov

A linkbaity title for a ranty post. But it’s justified.

My point is that from an architectural perspective, most single page apps are the result of making the wrong choices and missing important opportunities.

Feature.js

A lightweight alternative to Modernizr. It doesn’t add classes to your markup so it’s up to what you do with the results of any test.

It’s perfect for cutting the mustard on a case-by-case basis.

Delicious Changes | The Official Delicious Blog

The first big change you’ll notice is our transition from the javascript front-end framework that has been powering the content at https://www.delicious.com. The engineers who crafted this version of the site are incredibly talented, and their code is amazing. It’s beautiful and powerful, but it has posed several significant challenges for us. For example, the search engines have a real problem reading our content, hindering users’ efforts to use Google or Bing to find what they’re looking for on Delicious.

VerbalExpressions/JSVerbalExpressions

Regular expressions are my kryptonite so I can definitely imagine using the PHP port of this plain English syntax.

Reimagining Single-Page Applications With Progressive Enhancement – Smashing Magazine

Some really great thinking here by Heydon on how to make single page apps but using HTML for the views instead of relying on client-side JavaScript for the rendering. He explains the code he’s using, but what really matters here isn’t the specific solution; it’s the approach. Smart!

The Problem with Progressive Enhancement by Alex Lande

I think that “Do we want to support users without JS?” is the wrong question. Progressive enhancement has benefits that reach far beyond that user group.

Specifically:

  1. Performance—”Progressively enhanced behaviors like using links that point to real URLs, or server-side form submission handling, allow users to perform important actions before JavaScript loads.”
  2. Resilience—”If users can perform critical tasks when your JS breaks, it’s a minor inconvenience instead of a show stopper.”
  3. Business, Business, Business.

ScrollReveal

A nice self-contained script for animating items into view as the document scrolls.

I’d like be interested to hear what Graham thinks of this code—he’s my go-to person for smooth scroll-based animations.

(I’m very confused by the tagline for ScrollReveal—”Easy scroll animations for web and mobile browsers”—eh? Mobile browsers are web browsers …”web” is not a synonym for “desktop”.)

JavaScript: 2015 in Review

Use a framework if you must but never presume it’s viable over the long-term. Newer and better alternatives will appear before you’re half-way through your project. Never forget frameworks are an option — you don’t have to use one.

getify/You-Dont-Know-JS

Graham—whose opinion I trust completely—has been raving about these books. And Kyle Simpson is a super-smart guy. So I reckon I should make these JavaScript tomes my holiday reading.

Photo upload and progressive enhancement for FixMyStreet / mySociety

Matthew describes a very nice bit of progressive enhancement for drag’n’drop file uploads (similar to the CSS Tricks article I linked to recently).

It uses the Dropzone JS which looks like it aligns nicely with the progressive enhancement approach.

Interactive Storytelling | Codrops

I think this might be the most tasteful, least intrusive use of scroll events to enhance a Snowfallesque story. It’s executed superbly.

You can read all about the code. Interestingly, it’s using canvas to render the maps even though the maps themselves are being stored as SVG.

(There’s a caveat saying: “This is a highly experimental project and it might not work in all browsers. Currently there is no IE support.” I don’t think that’s true: the story works just in IE …that browser just doesn’t get the mapping enhancements.)

Simplified JavaScript Jargon

An A-Z of JavaScript jargon (although some of the “explanations” could do with de-jargonifying themselves).

Autumn-Earth/serviceWorker.js

Here’s a really nice addition to my Service Worker script—opportunistically add non-critical CSS, JavaScript, and fonts to a cache as you go.

Progressive Enhancement—Ain’t Nobody Got Time for that | GlückPress

Two sides of a debate on progressive enhancement…

Andrey “Rarst” Savchenko wrote Progressive enhancement — JS sites that work:

If your content website breaks down from JavaScript issue — it is broken.

Joe Hoyle disagrees:

Unlike Rarst, I don’t value progressive enhancement very highly and don’t agree it’s a fundamental principle of the web that should be universally employed. Quite frankly, I don’t care about not supporting JavaScript, and neither does virtually anyone else. It’s not that it doesn’t have any value, or utility - but in a world where we don’t have unlimited resources and time, one has to prioritise what we’ll support and not support.

Caspar acknowledges this:

I don’t have any problem buying into pragmatism as the main and often pressing reason for not investing into a no-JS fallback. The idealistic nature of a design directive like progressive enhancement is very clear to me, and so are typical restrictions in client projects (budgets, deadlines, processes of decision making).

But concludes that by itself that’s not enough reason to ditch such a fundamental technique for building a universal, accessible web:

Ain’t nobody got time for progressive enhancement always, maybe. But entirely ditching principle as a compass for resilient decision making won’t do.

See also: Mike Little’s thoughts on progressive enhancement and accessibility.

Cutting the Mustard Revisited — sixtwothree.org

Jason revisits some cutting-the-mustard techniques, as started by the BBC and refined by Jake. This kind of feature-testing is indispensable for progressive enhancement.

Personally though, I’m still uncomfortable with the assumptions baked into equating particular features with particular browsers …maybe I’ve known PPK too long.

I much prefer to cut the mustard on a case-by-case basis by feature testing the actual APIs I’m about to use in a script. I realise that might be harder to scale, and it’s more verbose, but it’s the only way to be absolutely sure.

The “Blur Up” Technique for Loading Background Images | CSS-Tricks

Quite a few moving parts in this technique from Emil, but it’s very clever.

Bliss.js — Heavenly JavaScript!

A small little JavaScript helper from Lea.

The helper library for people who don’t like helper libraries.

Universal React ◆ 24 ways

I have no hands-on experience with React, but this tutorial by Jack Franklin looks like a great place to start. Before the tutorial begins he succinctly and clearly outlines the perfect architecture for building on the web today:

  • The user visits www.yoursite.com and the server executes your JavaScript to generate the HTML it needs to render the page.
  • In the background, the client-side JavaScript is executed and takes over the duty of rendering the page.
  • The next time a user clicks, rather than being sent to the server, the client-side app is in control.
  • If the user doesn’t have JavaScript enabled, each click on a link goes to the server and they get the server-rendered content again.

YES!!!

Y’know, I had a chance to chat briefly with Jack at the Edge conference in London and I congratulated him on the launch of a Go Cardless site that used exactly this technique. He told me that the decision to flip the switch and make it act as a single page app came right at the end of the project. I think that points to a crucial mindset that’s reiterated here:

Now we’ll build the React application entirely on the server, before adding the client-side JavaScript right at the end.

Progressive enhancement needs better advocacy • Zetafleet

A rousing call to arms for progressive enhancement. I agree with the sentiment, but I’m less comfortable making assumptions about the reasons why developers don’t use progressive enhancement:

However, what’s actually happening is that “universal access to content” is being subversively replaced with “universal access for a limited subset of users that I care about”.

Honestly, I think that plenty of developers just aren’t thinking about it—especially if they’re relying on a particular tool or framework to save them time and effort (which is not a crime). So that’s why I agree with the title of this piece: let’s talk about this more; let’s make sure developers understand what they’re doing when they make JavaScript a requirement for basic functionality.

I particularly like the point in here about content blockers like NoScript:

In fact, it’s probably more likely that a user will try browsing the Web today without scripting than at any other time since the 1990s.

Performance Calendar » Reducing Single Point of Failure using Service Workers

This is a nifty use of Service Workers—using a cache to mitigate unresponsive Content Delivery Networks.

The stuff in here about Promise.race is particularly useful for “lie-fi” scenarios: instead of thinking about the network connection in a binary way (either it’s available or it isn’t), considering the scenario of a crappy network connection seems more realistic.

Drag and Drop File Uploading | CSS-Tricks

This is a terrific example of progressive enhancement in action: going from a simple file input to a lovely interactive drag’n’drop interface.

The code uses jQuery but it could be easily adapted to vanilla JavaScript, and anyway, it’s not so much the code that matters, it’s the approach.

Blocked! - O’Reilly Radar

Following on from that Wired article I linked to about disabling JavaScript, Simon St. Laurent brings in another factor—content blockers on iOS:

Apple offers its users the power to turn off much of the Web: fonts, styles, scripts, and more.

He rightly points out that the answer to building a robust, resilient web has been here all along:

Turning off web fonts, CSS, and images will frustrate designers and limit user interface possibilities, but turning off JavaScript might mean that we have to reconsider the architecture of our applications. Without JavaScript, the Web returns to its foundations of HTTP requests returning pages, with links and form submissions as the backbone of application structure.

HTML5: The New Flash

A new presentation from the wonderfully curmudgeonly Steven Pemberton, the Nosferatu of the web. Ignore the clickbaity title.

I don’t agree with everything he says here, but I strongly agree with his preference for declarative solutions over (or as well as) procedural ones. In short: don’t make JavaScript for something that could be handled in markup.

This part really, really resonated with me:

The web is the way now that we distribute information. We will need the web pages we create now to be readable in 100 years time, just as we can still read 100-year-old books.

Requiring a webpage to depend on a particular 100-year-old implementation of Javascript is not exactly evidence of future-thinking.

I Turned Off JavaScript for a Whole Week and It Was Glorious | WIRED

When someone’s web browsing experience can be so drastically improved by simply switching off JavaScript, you know it’s time for an intervention with web developers.

This is our fault. Client-side JavaScript gave us enormous power and we abused that power.

Aerotwist - The Cost of Frameworks

Here’s Paul’s write-up of his excellent talk at FF Conf.

Previously I’ve used the term “developer convenience” when describing the benefits of using a framework. Paul uses the term “ergonomics” to describe those benefits. I like that. I worry sometimes that the term “developer convenience” sounds dismissive, which isn’t at all my intention—making our lives as developers less painful is hugely important …but it’s just not as important as improving the lives of the end users (in my opinion …and Paul’s).

As I look at frameworks, I see the ergonomic benefits (and those are important, I agree!), but I can’t help but feel that, for many developers, investing in knowledge of the web platform itself is the best long-term bet. Frameworks come and go, it just seems to be the ebb and flow of the web, and, as I said above, they do contribute ideas and patterns. But if you ever find that the one you use no longer works for you, or has a bug that remains unfixed, being able to understand the platform that underpins it will help enormously.

You should use [insert library/framework], it’s the bestestest! / Paul Lewis - YouTube

This was one of favourite talks at this year’s FF Conf. But I will readily admit there’s a hefty dollop of confirmation bias in my enjoyment.

Best viewed with - Velocity Amsterdam 2015 // Speaker Deck

Are we doomed to see history repeat itself? With the amount of client-side MVC frameworks and the upcoming implementation of the ES6 syntax, will we soon be seeing a repeat of the “browser wars.” Will more websites only work in a select number of browsers with the capabilities to run their code?

An Offline Experience with Service Workers | Brandon Rozek

A great walkthrough of setting up a Service Worker for a blog. The code is here but more importantly, as Brandon says:

I wouldn’t be able to implement this myself if it wasn’t for some of the awesome people I mentioned earlier sharing their experience. So share, share, share!

Moodboard — a small JavaScript library for presenting image moodboards on the web

A lovely little script from Nat to create a nice montage of images. It works by progressively enhancing a regular series of images in the markup.

Making a Simple Site Work Offline with ServiceWorker | CSS-Tricks

Another clear explanation by Nicolas of using Service Worker, this time on CSS Tricks.

The State of JavaScript on Android in 2015 is… poor - Discourse Meta

There’s something quite Kafkaesque about reading through the comments on Jeff Atwood’s request for an alternative to Ember.js …for rendering some text on a screen.

Every now and then someone pipes up with “server-rendered HTML?”, there’s a pause, and then a response of “naahhhhh.”

Surreal.

Official Google Webmaster Central Blog: Deprecating our AJAX crawling scheme

It’s official: hash bang URLs are an anti-pattern, and if you want your content indexed by Google, use progressive enhancement:

Since the assumptions for our 2009 proposal are no longer valid, we recommend following the principles of progressive enhancement.

Responsive News — AMP and Responsive Web Design

Tom’s thoughts on what AMP means for developers and publishers. He was initially sceptical but now he’s cautiously optimistic. Like me, he’s hoping that AMP can force the hand of those third-party advertisers to get their act together.

Publisher’s development teams are very capable of creating fast experiences for mobile users, but they don’t have the clout to coordinate all the additional cruft that is added to the page. However, if all the different publishers dev team’s got together and put their weight behind a single implementation, then we can force third parties to change their habits.

A fictional conversation about progressive enhancement

So a web app is defined as a system that requires the JavaScript excesses for it to work. And the argument for the JavaScript excesses is that we need it to build web apps. That sounds a teeny bit circular to me.

180: Panel on “Inline Styles” - ShopTalk on Huffduffer

Shop Talk Show is trying a new panel format. They got me on to join in the discussion about adding inline styles with JavaScript instead of using Cascading Style Sheets.

Confidence and Overwhelm

Following on from her great conversation with Jen on The Web Ahead podcast, Rachel outlines a strategy to avoid feeling overwhelmed by the deluge of tools, frameworks, libraries, and techniques inundating front-end developers every day:

Learn your core skills well. Understand HTML and CSS, be able to build a layout without leaning on a framework. Get a solid understanding of how a website actually gets from the server to a browser, an understanding of security and accessibility. These are the basics, the constants. These things change slowly. These things sit underneath all the complexity and the tooling, the CMSs and the noise of thousands of people all trying to make their mark on this industry.

She also makes this important point:

As you are doing this don’t forget to share what you know.

Dave Shea – – beyond tellerrand DÜSSELDORF 2015 on Vimeo

A wonderful, wonderful history of the web from Dave at this year’s Beyond Tellerrand conference. I didn’t get to see this at the time—I was already on the way back home—so I got Dave to give me the gist of it over lunch. He undersold it. This is a fascinating story, wonderfully told.

So gather round the computer, kids, and listen to Uncle Dave tell you about times gone by.

The ethics of modern web ad-blocking – Marco.org

Yes! Yes! YES!

Marco makes the same comparison I did between the dark days of pop-up windows and the current abysmal state of bloated ads and tracking on today’s web.

This won’t be a clean, easy transition. Blocking pop-ups was much more incisive: it was easy for legitimate publishers to avoid one narrowly-useful Javascript function to open new windows. But it’s completely reasonable for today’s web readers to be so fed up that they disable all ads, or even all Javascript. Web developers and standards bodies couldn’t be more out of touch with this issue, racing ahead to give browsers and Javascript even more capabilities without adequately addressing the fundamental problems that will drive many people to disable huge chunks of their browser’s functionality.

Amen!

I have one more thing to add to this list…

But publishers, advertisers, and browser vendors are all partly responsible for the situation we’re all in.

…developers. Somebody put those harm-causing script elements on those pages. Like I said: “What will you be apologising for in decades to come?”

In a few years, after the dust has settled, we’re all going to look back at today’s web’s excesses and abuses as an almost unbelievable embarrassment.

You might not need jQuery plugins

From the people who brought you youmightnotneedjquery.com comes youmightnotneedjqueryplugins.com.

Don’t get me wrong—jQuery is great (some of the plugins less so) but the decision about whether to use it or not on any particular project should be an informed decision made on a case-by-case basis …not just because that’s the way things have always been done.

These sites help to inform that decision.

Designing with Progressive Enhancement — sixtwothree.org

The full text of Jason’s great talk at this year’s CSS Summit. It’s a great read, clearing up many of the misunderstandings around progressive enhancement and showing some practical examples of progressive enhancement working at each level of the web’s technology stack

It’s time to progress

Many believe we should leave the term “progressive enhancement” behind and start anew, but why not educate developers, clients and stakeholders and change many of the misconceptions surrounding it? Changing the name won’t change anything unless we address the real fundamental problems we have when describing the underlying concepts.

as days pass by — Availability

Stuart writes up his thoughts on progressive enhancement following the great discussions at Edge Conf:

So I’m not going to be talking about progressive enhancement any more. I’m going to be talking about availability. About reach. About my web apps being for everyone even when the universe tries to stop it.

Practical Questions around Web Components - Ian Feather

An in-depth look at where web components stand today, together with some very good questions about where they might be heading tomorrow.

Tiny two way data binding

I really like this approach that Remy is taking: write some code to one thing, and just one thing. I much prefer my JavaScript to be small pieces loosely joined rather than monolithic.

More of this kind of thing, please!

How we built the new gocardless.com — GoCardless Blog

A classic example of the holy grail of web performance and robustness—start with regular HTML sent from the server, enhance once it’s in the browser …if the browser is capable of it. In this case, it’s using JavaScript (React) on both the server and the browser.

The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement

Progressive Enhancement remains the best option for solving web development issues such as wide-ranging browser support, maintenance and future-proofing your application.

Killer page load performance – Async

This Async event at 68 Middle Street on June 11th looks like it’s going to good (and relevant to my interests).

Everyone has JavaScript, right?

And that’s why you always use progressive enhancement!

screen shot from the TV series Arrested Development, showing a character whose catchphrase began 'And that's why...'

Progressive enhancement with handlers and enhancers | hiddedevries.nl

I like this declarative approach to associating JavaScript behaviours with HTML elements.

Keeping it simple: coding a carousel by Christian Heilmann

I like this nice straightforward approach. Instead of jumping into the complexities of the final interactive component, Chris starts with the basics and layers on the complexity one step at a time, thereby creating a more robust solution.

If I had one small change to suggest, maybe aria-label might work better than offscreen text for the controls …as documented by Heydon.

Let Links Be Links · An A List Apart Article

A superb piece by Ross Penman on the importance of being true to the spirit of the web.

JavaScript and Archives | inkdroid

Thoughts on the long-term viability of sites that use JavaScript to render their content.

A JS framework on every table - Allen Pike

The Tower of JavaScript Babel.

js;dr = JavaScript required; Didn’t Read.

Because in 10 years nothing you built today that depends on JS for the content will be available, visible, or archived anywhere on the web.

yurivictor/typebetter

A really nifty little bit of JavaScript that converts to smart quotes, apostrophes, ellipses, and em dashes.

(Initially it required jQuery but I tweaked it to avoid those dependencies and Yuri very kindly merged my pull request—such a lovely warm feeling when that happens.)

Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

Lea wasn’t happy with the lack of styling and extensibility of the datalist element, so she rolled her own lightweight autocomplete/type-ahead widget, and she’s sharing it with the world.

Making the case for Progressive Javascript — The Millstone — Medium

I think we can all agree that “isomorphic JavaScript” is a terrible name for a good idea. I quite like calling it “portable JavaScript”, but here’s a good case for calling it “progressive JavaScript.”

(Right up until the end when the author says “But mainly, it’s pretty safe to assume JavaScript will just work. Everywhere.” …which is precisely the kind of unfounded assumption that leads to the very problems that isomorphic/portable/progressive JavaScript can help fix.)

Designing Experience Layers — sixtwothree.org

The engineering benefits of building websites with a layered approach.

Why, yes, I am talking about progressive enhancement yet again! Why do you ask?

The “Web Application” Myth — Medium

Sensible words from Christian.

Web applications don’t follow new rules.

And frameworks will not help:

A lot of them are not really fixing fundamental problems of the web. What they do is add developer convenience. … This would be totally OK, if we were honest about it.

Client-side MVC’s major bug - TimKadlec.com

I’ve said it before: if your client-side MVC framework does not support server-side rendering, that is a bug. It cripples performance.

The Emularity « ASCII by Jason Scott

Jason documents some pretty amazing levels of emulation in JavaScript:

That’s Netscape 1.0n, released in December of 1994, running inside Windows 3.11, released in August of 1993, running inside of Google Chrome 39.0.2171.99 m, released about a week ago, on a Windows 7 PC, released in 2009.

But when it comes to trying to navigate the web with that set-up, things get a bit depressing.

Front end and back end - QuirksBlog

This!

The difference between back-enders and front-enders is that the first work in only one environment, while the second have to work with myriad of environments that may hold unpleasant surprises.

Yes!

I feel that the subconscious assumption that a complex JavaScript-driven web site or web app will run in only one monolithic environment is the root cause of many problems front-enders see in back-end-driven web-based projects.

The problem with Angular - QuirksBlog

I have doubts about Angular 1.x’s suitability for modern web development. If one is uncharitably inclined, one could describe it as a front-end framework by non-front-enders for non-front-enders.

Taunus

I like the thinking behind this isomorphic JavaScript library: start with the (Node.js) server and then take over on the client side after the initial page load.

Implement Server-Side Rendering for SEO · Issue #9938 · emberjs/ember.js

The motivation seems entirely misplaced to me (SEO? Really?) but never mind: the end result could be the holy grail of JavaScript MVC frameworks — code that runs on the server and the client. That would get you the reach and initial rendering speed of progressive enhancement, combined with the power of client-side application logic once the page has loaded.

Watch this space.

Researching the Performance costs of JavaScript MVC Frameworks

The Filament Group run the numbers on how long it takes browsers to parse the JavaScript of popular MVC frameworks: Backbone, Angular, and Ember. The results—especially on mobile browsers—are not encouraging.

You Don’t Need jQuery! – Free yourself from the chains of jQuery by embracing and understanding the modern Web API and discovering various directed libraries to help you fill in the gaps.

The tone is a bit too heavy-handed for my taste, but the code examples here are very handy if you’re weaning yourself off jQuery.

Websites of Christmas Past, Present and Future ◆ 24 ways

A superb article by Josh on planning for progressive enhancement—clearly laid out and carefully explained.

HTML5’s “Dirty Little Secret”: It’s Already Everywhere, Even In Mobile - ReadWrite

I’m an advocate for progressive enhancement. Tom Dale is not. But even though we may disagree on that, there’s a lot to like in his sensible, balanced answers to some sensationalist linkbaity questions.

It’s not that the pace of innovation on the Web is slower, it’s just solving a problem that is an order of magnitude more challenging than how to build and distribute trusted apps for a single platform. As we saw on the desktop, it may take a few years to catch up to all of the capabilities of a native, proprietary platform, but in terms of the impact it will have on humanity, forgive me for not losing sleep if we have to wait a few years for it to arrive.

You’re So Smart You Turned JavaScript into XHTML

Web developers overwhelmingly rejected the draconian error-handing of XML …and yet today, web developers are embracing that very same error-handling model by rendering everything with JavaScript.

I don’t think it’s the way of the web to have your site fail and show a blank screen because some third-party dependency doesn’t load, JavaScript is turned off or because your developer left a trailing comma in a JavaScript object and didn’t test in Internet Explorer.

7 Principles of Rich Web Applications

High-level design principles for JavaScript on the web.

Spotlight – a pure JavaScript application for GOV.UK Performance

Progressive enhancement with isomorphic JavaScript, as practiced at Government Digital Services.

Stop Breaking the Web

Angry, but true.

Don’t lock yourself into a comprehensive technology that may just die within the next few months and leave you stranded. With progressive enhancement you’ll never go wrong. Progressive enhancement means your code will always work, because you’ll always focus on providing a minimal experience first, and then adding features, functionality, and behavior on top of the content.

JS Parse and Execution Time - TimKadlec.com

Tim’s been running the numbers on how long it takes various browsers on various devices to parse JavaScript—in this case, jQuery. The time varies enormously depending on the device hardware.

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.

[this is aaronland] upload.js

A really handy bit of code from Aaron for building a robust file uploader. A way to make your web-based photo sharing more Instagrammy-clever.

A Fundamental Disconnect, From the Notebook of Aaron Gustafson

I think Aaron is spot-on here. There’s a tendency to treat web development these days as just the same as any other kind of software development—which is, on the one hand, great because it shows just how far JavaScript and browsers have come …but on the other hand, that attitude is missing a crucial understanding of the fundamental nature of the web’s technology stack (that we should be treating HTML, CSS, and JavaScript as layers; not as one big ball of webby, timey-wimey stuff).

AurelioDeRosa/HTML5-API-demos

A collection of device APIs—which, despite the title, are all JavaScript, not HTML. Each API in the list has a link to its spec, an explanatory article, a demo, and the current level of support.

Tablesaw - A Flexible Tool for Responsive Tables

Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.

Meet the Online Tracking Device That is Virtually Impossible to Block - ProPublica

Well, thanks to the ass-hattery of AddThis, the use case of your site’s visitors switching off JavaScript for (legitimate) security reasons just became a lot more plausible.

But you’re using JavaScript as an enhancement, right? You’re not relying on it for core tasks, right?

Breach - A browser for the HTML5 era

A new browser on the block (though not a new rendering engine), this one is written is written entirely in JavaScript. It’s worth taking it for a spin to see some of the interesting interface ideas around tabs and loading indicators.

Personally, I’m all for more browsers. The more, the merrier.

Web 2024 | Robin Berjon

Here’s a dystopian vision of the web in ten years time, where professional developers are the only people able to publish on the web.

This is why it worries me when I come across very smart people who don’t seem to see a problem with the creation of web pages being taken out of the reach of any human being with an internet connection and a smattering of declarative languages—HTML, CSS—and into the hands of an elite minority of JavaScript programmers.

simpl.info

A handy reference for HTML, CSS, and JavaScript features. Each feature has a bare-bones demo at a nice guessable URL e.g. http://simpl.info/datalist/

The Developer’s Dystopian Future – The Pastry Box Project

My interest in rich client-side apps has almost entirely reversed, and now I’m more interested in doing good ol’ server rendering with the occasional side of progressive enhancement, just like we did it in 2004.

This post resonates with me 100%.

Where will I be in 10 years? I don’t know. I hope I still will have some in-demand skills to pay the bills. But it feels like all I see are DevOps and JavaScript, and I know less and less every day about those things.

Marginalia | Parallel Transport

A brilliant idea (and implementation) from Kartik. By combing webmentions and fragmentions, it’s possible to allow a kind of distributed marginalia: you post a comment on your site about a specific passage in a post on my site and a smattering of CSS and JavaScript can display it in the right context.

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.

Using Encapsulation for Semantic Markup on CSS-Tricks

I really hope that this is the kind of usage we’ll see for web components: enhancements for the browsers that support them without a good ol’ fashioned fallback for older browsers.

Introducing drawpath - Josh Emerson

A lovely little from Josh that allows you to draw shapes in a canvas element and then copy the resulting code.

Labelmask | Brad Frost Web

I really like this interface idea from Brad that provides the utility of input masks but without the accessibility problems.

The Sticky Pagination Fixer

If you insist on having a fixed header on your site, please, please, please add this script to your site. I often use the spacebar to page down so this would be a life-saver.

Spotlight – a pure JavaScript application for GOV.UK Performance | Technology at GDS

A nice tale of progressive enhancement from gov.uk, talking about how they made their analytics dashboards (which are public, by the way) using JavaScript on the server and on the client.

I believe this is what the kids are calling isomorphic JavaScript.

Node School in Brighton

Tom is running a Node School at 68 Middle Street on the evening of March 27th. I plan to attend and finally wrap my head around all this Node stuff.

Responsive tables

An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.

madgex/lazy-ads

Great stuff from James Wragg and the gang at Madgex: a way of lazy-loading ads for responsive sites without messing with the ad code.

Why we left AngularJS: 5 surprisingly painful things about client-side JS

It’s funny: while I agree with the warning that this article provides (“rich client-side JavaScript frameworks aren’t a good fit for every site, especially content sites”), the reasons given here aren’t the reasons that I have any issues with.

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.

Why is Progressive Enhancement so unpopular? — All in the head

Like Drew, I’ve noticed some real hostility to the idea of progressive enhancement recently. Like Drew, I don’t really understand where this attitude comes from. It’s not like progressive enhancement prevents you from doing anything you would do otherwise: it’s just another way of approaching the way you build for the web.

I hope I’m wrong, but I suspect that some developers are letting their tools dictate their principles—the tail wagging the dog (where the tail is Angular, Ember, etc.).

A Dive Into Plain JavaScript

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

Bulletproof Accessible Icon Fonts | Filament Group, Inc., Boston, MA

An in-depth look at using icon fonts without any nasty edge-cases ruining your day.

OriDomi - origami for the web

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

Type Rendering Mix

I got excited when Tim Brown announced this at An Event Apart today: a small JavaScript tool for detecting what kind of rasterising and anti-aliasing a browser is using, and adding the appropriate classes to the root element (in much the same way that Web Font Loader does).

Alas, it turns out that it’s reliant on user-agent string sniffing. I guess that’s to be expected: this isn’t something that can be detected directly. Still, it feels a little fragile: whenever you use any user-agent sniffing tool you are entering an arms race that requires you to keep your code constantly updated.

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.

The (other) Web we lost

John shares his concerns about the increasing complexity involved in developing for the web.

Building for the device agnostic web | Talks | Decade City

Some excellent practical advice on progressive enhancement.

Jeremy Keith – The Power Of Simplicity – border:none

This is the talk I gave at the border:none event in Nuremberg last month. I really enjoyed it. This was a chance to gather together some thoughts I’ve been mulling over for a while about how we approach front-end development today …and tomorrow.

Warning: it does get quite ranty towards the end.

Also: it is only now that the video is released that I see I spent the entire talk looking like a dork with a loop of wire sticking out of the back of my head.

Laying The Groundwork For Extensibility—Smashing Coding

The authors of the Extensible Web Manifesto explain the thinking behind their …uh… thinking.

There’s a lot to like here, with some practical examples of where we’ve seen a disconnect between JavaScript APIs and declarative HTML (looking at you, Geolocation).

Prerender - AngularJS SEO, BackboneJS SEO, or EmberJS SEO

I despair sometimes.

Here’s a ridiculous Heath-Robinsonesque convoluted way of getting the mighty all-powerful Googlebot to read the web thangs you’ve built using the new shiny client-side frameworks like Angular, Ember, Backbone…

Here’s another idea: output your HTML in HTML.

That solution works for machines and humans. As a bonus, outputting your HTML in HTML avoids turning JavaScript into a single point of failure.

isMobileDevice and the death of innocence

A nice bit of sleuthing to trace the provenance of one piece of ill-advised user-agent sniffing JavaScript code.

Good luck getting that script updated for the thousands of sites and applications, you say to yourself, where it’s laying dormant just waiting to send devices the wrong content based on a UA substring.

Wallop Slider

I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.

How many people are missing out on JavaScript enhancement? | Government Digital Service

The research behind GDS’s research that one in every 93 users of gov.uk is not receiving JavaScript …and it’s not because of JavaScript being disabled in their browser either. As ever, progressive enhancement is most useful in dealing with the situations you don’t anticipate.

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.

Sigh, JavaScript

A great little Tumblr blog from Dan Mall: a collection of sites that don’t work at all if JavaScript isn’t available.

‘Sfunny, I was talking about just this kind of thing at An Event Apart today.

Should JavaScript devs build real things?

This post is about the pros and cons of using JavaScript to programme hardware, but within it is a great summation of what makes JavaScript so powerful:

In my opinion the greatest strengths of JavaScript are its immediacy and its accessibility. It has plenty of weakness (insanely weak typing, implicit casting for comparison, terrible problems with numbers, fluid syntax, I could go on…). Regardless, these weaknesses are entirely overcome by those two points above.

Having taught quite a few people to code, the benefit of being able to open a text editor or a browser console and type code that can immediately and reliably be executed is incredible. The power this brings to the learner is unmatched. When trying to learn new things it’s important to get positive reinforcement very quickly and JavaScript has this ability in spades.

Executing console.log(“hello world”) or window.alert(2+5-20) brings immediate feedback, makes you feel as though you’re getting somewhere and that you are interacting directly with the computer as a programmer. For those of you old enough to own a Spectrum, C64 or Vic20 – BASIC (itself heavily derided) had the same benefit.

Technical Machine

This looks rather exciting: Tessel is Rasperry Pi-like piece of hardware, but running JavaScript (Node.js) by default.

Not Real Programming by John Allsopp

A terrific long-zoom look at web technologies, pointing out that the snobbishness towards declarative languages is a classic example of missing out on the disruptive power of truly innovative ideas …much like the initial dismissive attitude towards the web itself.

Media Query Events Example

A page to demonstrate the conditional CSS technique I documented a while back.

Progressive enhancement is still important by Jake Archibald

Another great post on using progressive enhancement for JavaScript, this time by Jake. He does a great job of explaining the performance bottleneck that is created when you start doing everything on the client side.

Progressive Enhancement: Still Not Dead. - That Emil

A great post by Emil on the importance of using progressive enhancement for JavaScript — an increasingly unpopular position in today’s climate of client-side-only frameworks and libraries.

There’s something fundamental and robust about being able to request a URL and get back at least an HTML representation of the resource: human-readable, accessible, fault tolerant.

Enough with the JavaScript already!

A great set of slides from Nicholas, all about the disturbing trend in “modern” web apps to depend entirely on JavaScript as a single point of failure.

How to get your tweets displaying on your website using JavaScript, without using new Twitter 1.1 API

A little piece of JavaScript to strip out the styling from Twitter widgets.

Oh, no! How horrid! Now Twitter won’t control the “user experience” of that widget!

Instead, the person who actually posted the tweets in the first place gets to decide how they should be displayed. Crazy idea, isn’t it?

Leveraging Advanced Web Features in Responsive Design

A terrific case study in progressive enhancement: starting with a good ol’ form that works for everybody and then adding on features like Ajax, SVG, the History API …the sky’s the limit.

Deep dive into the murky waters of script loading

Jake casts a scrutinising eye over the way that browsers load and parse scripts …and looks at what we can do about it.

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.

Responsive Nav — Responsive Navigation Plugin

This looks like a handy little bit of JavaScript for progressively enhancing navigation lists to show/hide them on smaller screens. And it’s not a jQuery plug-in!

How to lose weight (in the browser)

A handy one-stop-shop for tips on improving front-end performance.

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.

You can’t create a button by Nicholas Zakas

Related to my rant on links that aren’t actually links: buttons that aren’t actually buttons.

On layout and web performance by Kelly Norton

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

Front-end performance for web designers and front-end developers by Harry Roberts

A really good introduction to front-end performance techniques. Most of this was already on my radar, but I still picked up a handy tip or two (particularly about DNS prefetching).

At this stage it should go without saying that you should be keeping up with this kind of thing: performance is really, really, really important.

Implementing off-canvas navigation for a responsive website by David Bushell

This off-canvas demo is a great practical example of progressive enhancement from David. It’s also a lesson in why over-reliance on jQuery can sometimes be problematic.

Audio clips from Full Frontal 2012 | Lanyrd

All the talks from this year’s excellent Full Frontal conference in Brighton, available in audio form for your huffduffing pleasure.

The Vanilla Web Diet | Smashing Coding

I wholeheartedly agree with Christian’s diagnosis of the average web page: it’s overweight to the point of obesity. Fortunately Dr. Heilmann has some remedies.

Fear and Coding in Brighton : Full Frontal 2012

A terrific write-up of this year’s Full Frontal conference, with a descriptive rundown of each talk.

isolani - Web Standards: Web App Mistakes: Condemned to repeat

Some great thoughts from Mike Davies about the strengths of the web, prompted by some of the more extreme comments made by James Pearce at Full Frontal last week.

I should point out that James was being deliberately provocative in order to foment thought and discussion and, judging from this blog post, he succeeded.

The Web’s independence from the hardware and software platform people use is a feature. It’s better than cross-platform frameworks which are constantly criticised for not producing exact native-feeling apps on the multitude of platforms they run on. The Web is above that pettiness.

Going Full Frontal — Acko.net

Steven Wittens, who gave a terrific talk all about maths at last week’s Full Frontal conference, describes his experience at that most excellent event.

Trimming the Fat — Paul Robert Lloyd

A great in-depth description by Paul of how he optimised his site. More of this please!

NodeCopter Brighton

Let’s spend the day after Full Frontal programming flying robots with JavaScript. Clearleft is sponsoring a drone; want to play with it?

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

Creative JavaScript Training on Vimeo

I’m going to be attending Seb’s CreativeJS and HTML5 course in Brighton on September 13th and 14th …and I strongly suspect that it’s going to be great.

If Hemingway wrote JavaScript by fat xxx

This is a rather lovely way to show that in JavaScript, as in Perl, there’s always more than one way to skin a cat (in whatever idiom you prefer).

Summer Reading… and Programming

This is rather marvellous: a book review from Robin Sloan that requires you to type commands into a JavaScript console.

bandwidth (tecznotes)

Mike compares the bandwidth usage of the sites he most frequently visits. The results are grim.

The worst sins of the Flash years are coming back with a vengeance, in the form of CSS Frameworks and the magic dollar sign. There has seriously got to be a better way to do this.

Things that compile to JavaScript

Stuart on the importance of View Source.

mattdiamond/fuckitjs

This is possibly the most horrifying piece of JavaScript ever written. The license is good too.

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.

Twitter Engineering: Improving performance on twitter.com

Well, well, well. It turns out that building your entire application, content’n’all, in JavaScript isn’t so good for performance.

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.

JS Hotline: (877) 300-2187

I love this! A volunteer-run hotline for answering JavaScript questions (set up by the awesome Garann Means, who literally wrote the book on Node.js).

I think I might volunteer my services.

Springload: OnMediaQuery - Responsive Javascript

This is nice: the solution I blogged about for conditional CSS (reading media queries from JavaScript) all wrapped up in a nice small reusable bundle.

tubalmartin/riloadr

This responsive image technique has a lot of moving parts but it seems pretty solid.

Creating a Mobile-First Responsive Web Design - HTML5 Rocks

A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.

Mobile Battery Performance

This is my short explanation of Remy’s explanation of a BBC news article which is an explanation of an academic paper about battery performance of mobile devices when accessing websites.

Breakpoint Checking in Javascript with CSS User Values | Sparkbox

A smart response to the little conundrum I posted on my blog yesterday about detecting media-query quarantined CSS properties from JavaScript.

CreativeJS for non-coders on Vimeo

A fantastic taste of what you can expect in Seb’s Creative Coding workshop.

Paperfold CSS | Demo Studio | Mozilla Developer Network

In amongst all the shiny demos on this site, this one could actually be useful.

An Ajax-Include Pattern for Modular Content | Filament Group, Inc., Boston, MA

Scott walks through the code and thinking behind the conditional loading pattern on The Boston Globe site. This is such a useful and valuable pattern!

Stop solving problems you don’t yet have | this is rachelandrew.co.uk

I completely agree with everything Rachel says here. I see far too many projects that start out with pre-emptive conditional comments, JavaScript libraries and polyfills, without knowing whether or not they’re actually going to be needed.

Kicksend/mailcheck · GitHub

A handy little script that attempts to check email inputs for misspelled domain names. I’m pretty sure it doesn’t need to be written as a jQuery pug-in, though: anyone want to fork it and create a non-jQuery version too?

Excessive Enhancement - SXSW2012 // Speaker Deck

The slides from Phil’s excellent South by Southwest presentation on URLs, JavaScript, and progressive enhancement.

Progressive enhancement is a barrier to progress | Opinion | .net magazine

I can’t remember the last time I read something I disagreed with so fundamentally. This sums up the tone of the article:

Accessibility is not a right; it’s a feature.

I do not agree. I do not agree at all.

(Also, the pre-emtive labelling of anyone who may disagree with your point of view as defending a “sacred cow” is as tired and misguided as labelling anyone who disagrees with your viewpoint as a “fanboy”.)

How I’m implementing Responsive Web Design – JeffCroft.com

Jeff documents some of the techniques he’s using to tackle responsive design, with some tips specifically for SASS.

nathanford/pngy - GitHub

A script that attempts to detect connection speed (by requesting a test file three times in a row) in order to determine whether hi-res images should be requested or not.

HTML5 Please

This looks like a handy resource with a shitty, shitty name. Count the number of items that are in HTML (or JavaScript or APIs). Now count the number of items that are in CSS.

» 21 January 2012, baked by Ben Ward @ The Pastry Box Project

Some valuable musings from Ben on how browsers could be better — and I don’t mean the usual moaning about performance or device APIs.

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.

A plea for progressive enhancement | Stephanie Rieger

Yes! Yes! Yes!!!

Progressive enhancement is the only sane approach to today’s massively divergent landscape of devices. It can’t be repeated often enough.

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.

The Mobile Case for Progressive Enhancement | Brad Frost Web

A great, great reminder from Brad on the importance of progressive enhancement especially on mobile. There seems to be a real mindset amongst developers working on mobile sites that JavaScript is a requirement for building anything (and there’s a corresponding frustration with the wildly-varying levels of JavaScript support). It ain’t necessarily so!

That “JavaScript not available” case | Christian Heilmann

A great reminder from Christian that making JavaScript a requirement for using a website just doesn’t make much sense.

InstaCSS | Instant CSS Documentation Search

A fantastically useful resource! Don’t let the name fool you: this provides instant access to documentation for CSS and HTML and JavaScript!

Put this one on speed dial.

Redesigning the Country Selector - Baymard Institute

This looks like a nice progressive enhancement pattern: convert a select element into an auto-completing input element (a country selector in this case).

Cream of tag soup - Ramblings about frontend stuff

Jake Archibald has a blog now. Subscribed.

Responsive IMGs Part 2 — In-depth Look at Techniques « Cloud Four

Jason continues his look at responsive images techniques by diving into the nitty-gritty of the various options out there.

Responsive design and JavaScript - QuirksBlog

Unfortunately this article from PPK is flawed from the start: his first point (upon which all the subsequent points are based) is fundamentally flawed:

Right now responsive design is graceful degradation: design something for desktop and tablet, and remove stuff for mobile.

That’s not the way I’m doing responsive design. Responsible responsive design marries it with a mobile first approach (or more accurately, content first).

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?

Responsive HTML images

If you’re trying to retrofit an existing desktop-centric site for small screens, this server-side image-resizing technique might be useful but is definitely not the right tool for a content-out, small-screen-first approach.

spin.js

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

davidnewton.ca | The Current State of Hyphenation on the Web

A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.

HTML5 Rocks - How Browsers Work: Behind the Scenes of Modern Web Browsers

Insanely in-depth look at how browsers work, right down to the nitty gritty. You’d think there’d be a lot of engineering talk, but actually a lot of it is more about linguistics and language parsing.

OLO

This is a thoroughly enjoyable, frustratingly addictive two-player game for the iPad.

Oh, and it just happens to be made with HTML, CSS and JavaScript.

Web Typography for the Lonely

A collection of experiments in typography using canvas, SVG, JavaScript and whatever else it takes.

mySociety » Blog Archive » Mobile operators altering (and breaking) web content

In an attempt to “optimise” performance, T-Mobile and Orange are actually breaking jQuery.

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.

resizeMyBrowser

A handy little tool for testing responsive designs by automatically changing your browser viewport size.

danwebb.net - It’s About The Hashbangs

A superb post by Dan on the bigger picture of what’s wrong with hashbang URLs. Well written and well reasoned.

Annoying.js: How to be an asshole • Javascript • Kilian Valkhof

All of the most irritating uses of JavaScript gathered together into one library.

The Story of the HTML5 Shiv « Paul Irish

This dovetails nicely with my recent post about the spirit of distributed collaboration. Here’s a great little bit of near-history spelunking from Paul, all about styling new HTML5 elements in pesky older versions of Internet Explorer.

Modern JavaScript - rmurphey

Rebecca Murphey on the continuing evolution and maturity of the JavaScript world.

Client-side routing, the teenage years // James Aylett’s diary

James follows up on his previous excellent post on hashbangs by diving into the situations where client-side routing is desirable. Watch this space for a follow-up post on performance.

Qwery - The Tiny Selector Engine

A handy little JavaScript selector—IDs, classes and attribute selectors are supported—for those situations when all of jQuery or Sizzle would be overkill.

Page Speed Online

A supremely useful tool from Google for measuring performance.

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.

HTTP Archive

This is wonderful stuff: a long-term project to track the performance of high-traffic sites over time: oodles of lovely data and some quite shocking stats.

this, is boomerang

This code could be useful in determining a user’s bandwidth.

yepnope.js | A Conditional Loader For Your Polyfills!

A nice’n’small lazy loader that should make life easier when it comes to pollyfilling browser support for nifty HTML5 or CSS3 features.

ongoing by Tim Bray · Broken Links

Tim Bray calmly explains why hash-bang URLs are a very bad idea.

This is what we call “tight coupling” and I thought that anyone with a Computer Science degree ought to have been taught to avoid it.

isolani - Javascript: Breaking the Web with hash-bangs

Excellent, excellent analysis of how URLs based on fragment identifier (a la Twitter/Gawker/Lifehawker) expose an unstable tottering edifice that crumbles at the first JavaScript error.

So why use a hash-bang if it’s an artificial URL, and a URL that needs to be reformatted before it points to a proper URL that actually returns content?

Out of all the reasons, the strongest one is “Because it’s cool”. I said strongest not strong.

Beautiful Element Creation with jQuery — Article — The Nerdary

Good advice for generating markup with jQuery. As usual, there’s more than one way to do it.

accessifyhtml5.js at master from yatil’s accessifyhtml5.js - GitHub

A great little jQuery script to automatically assign ARIA roles to HTML5 elements with the corresponding semantics.

Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8

Adding CSS3 support to legacy versions of Internet Explorer using JavaScript. I like the fact that, although it requires a JavaScript library, it works with multiple libraries.

CssUserAgent (cssua.js)

This script adds user-agent information in class names to the document’s root element so that those user agents can be targeted with CSS. It could be useful, but only in direst need.

audio.js

A handy shim for audio: it uses the native implementation where possible and Flash as a fallback.

filamentgroup/Responsive-Images - GitHub

Some very smart ideas here for responsively enhancing image requests.

You Must Learn JavaScript — Article — The Nerdary

Kenny Meyers on the ubiquity of JavaScript.

Microformat Shiv

Handy! A JavaScript API for accessing microformats in a document, based on Mozilla's implementation for extensions.

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.

David DeSandro

Drag the text 'round for a bit of fun.

Bouncing Beholder [JS1k entry]

An entire platform game in 1024 bytes. Impressive. Most impressive.

Biolab Disaster

A great little platform game that is entirely Flash-free. Canvas all the way.

Polymaps

A JavaScript/SVG library for displaying maps in a variety of interesting ways.

PaintbrushJS v0.1 Demo Page

A fantastic bit of image manipulation JavaScript from Dave.

HTML5 Boilerplate - A rock-solid default for HTML5 awesome.

Another set of default HTML/CSS/JS templates with some very clever ideas built in (courtesy of the always-brilliant Paul Irish).

HTML5 Reset

Barebones templates for HTML5 documents. It needs a bit of work but it's a nifty idea.

jQuery Fundamentals

A free-as-in-beer book on jQuery from Rebecca Murphey, released under a Creative Commons Attribution Share-Alike license.

The Creation Engine No. 2: HTML 5 multimedia

Jim experiments with canvas and audio.

The All-In-One Almost-Alphabetical No-Bullshit Guide to Detecting Everything - Dive Into HTML5

A really handy list of really short JavaScript code for HTML5 feature detection.

HTML 5 Asteroids | Doug McInnes

Asteroids in canvas. Works a treat. Now I want Battlezone.

Async | The Brighton JavaScript meetup group

A new geek gathering in Brighton, every second Thursday, all about JavaScript.

Code Standards | Isobar

A very detailed set of coding standards and guidelines.

HTML5 Geolocation with Fallback to Google Ajax API: HTML5

An excellent way to do geolocation even in browser that don't support it natively.

Bulletproof HTML5 <details> fallback using jQuery · Mathias Bynens

A good example of the correct way to approach new interactive elements in HTML5 (the details element in this case): test for native support and then emulate with JavaScript if required.

Akihabara

A framework for creating old-school arcade games in the browser, using HTML5.

Bruce Lawson’s personal site : HTML5 details element, built-in and bolt-on accessibility

An excellent piece by Bruce on why the details element needs to be in HTML5.

Plugging the CSS History Leak at Mozilla Security Blog

Mozilla aims to plug the :visited/getComputedStyle bug/feature.

Demo jPlayer 1.1.0 : jQuery audio player plugin

A nice-looking jQuery plugin for HTML5's audio element, with fallback to a Flash player. I might just end up using this on Huffduffer.

Douglas Crockford Facts

Screw Chuck Norris. Douglas Crockford is the true originator of awesomeness in the audience.

Color Picker — Raphaël

A very nice colour picker from the brilliant Dmitry Baranovskiy.

jQuery 1.4 iPhone reference app - O! Mr Speaker!

A great portable jQuery reference. No app store required — this uses offline storage.

Another World JS - Megidish.net

Quite astonishing use of canvas: the game Another World ported to JavaScript.

JsMag - the magazine for JavaScript developers

There is a magazine for JavaScript. I did not know that.

Full Frontal JavaScript 2009

Remy recounts the Jedi mind trick I used to get him to move Full Frontal to the Duke of Yorks cinema.

Adding “1UP notification” with jQuery - O! Mr Speaker!

A jQuery plug-in inspired by the interaction feedback on Huffduffer, which was in turn inspired by retro games.

Ident Engine

Glenn has taken Google's Social Graph API, YQL and various parsers, and he's wrapped it all up in one JavaScript library. The demos are mind-boggingly impressive.

LAZEROIDS!

Asteroids implemented using HTML5's canvas.

JSConf.eu - The JavaScript Conference

A two day JavaScript conference in Berlin in November. Looks like it could be very good (although it'll have to be very good indeed to top the Full Frontal conference, also in November).

BallDroppings

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

Let's make the web faster - Google Code

A whole heap of optimisation techniques from Google for faster CSS, JavaScript, markup and PHP.

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.

Hallvord R. M. Steen - Most expensive javascript ever?

How one line of JavaScript cost a hardware vendor millions. Browser sniffing is bad, m'kay?

BBC - Glow JavaScript Library

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

HTML5 Demos

Courtesy of Remy. Doesn't he ever sleep?

Space Invaders

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

chartbeat - real-time website analytics and uptime monitoring

This looks like an interesting approach to web analytics: a JavaScript function pings the service every 10 seconds allowing for a near realtime overview.

Fluid Images — Unstoppable Robot Ninja

Ethan follows up his Fluid Grids article with an equally excellent piece on resizing images.

IE6 Update

This is kinda sneaky but quite clever. Subtly encourage IE6 users to upgrade.

Psychic Origami » Blog Archive » A Huffduffer Widget

John Montgomery has created an embeddable Huffduffer widget that you can add to your own site with one line of JavaScript. Hurrah! ...I really need to get 'round to documenting the (somewhat primitive) Huffduffer API.

arc90 lab : experiments : Readability

An excellent bookmarklet designed to help you read more easily on the web (by hiding all that filthy, filthy advertising).

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?

Canvas Test

Conway's Game of Life executed using the canvas element.

Populating forms with YQL, jQuery and Microformats

Demo for a neat piece of code that will auto-populate form fields from an hCard-carrying URL.

polaroiderizer - a slideshow from your flickr tags

A great little Flickr slideshow from Phil Hawksworth.

FireScope

This addition to Firebug is rather excellent: a built in reference for whatever you're inspecting.

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

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

Unobtrusify.com - Unobtrusive Javascript for Progressive Enhancement

A simple and powerful message, beautifully delivered (itself an example of unobtrusive JavaScript). Bravo, Phil Hawksworth!

MaxMind - GeoIP Javascript Web Service

A JavaScript API that returns location information based on IP.

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.

isolani - Javascript: @Media Ajax - Day one

Mike has published his notes from day one of @media Ajax in London.

Tetris with jQuery

A decent version of Tetris written using jQuery.

JavaScript Rock Star

Guitar done with YouTube and JavaScript. John Resig is nuts, nuts I tell ya!

hCard Wizard [Matthew Levine]

Words cannot describe how brilliant this is. In response to a whinging Twitter post I made, Matthew Levine created a bookmarklet to quickly and easily create simple hCards for easy adding to blog posts. It works beautifully.

Call for Review: Updated WAI-ARIA Specification from Shawn Henry on 2008-08-06 (w3c-wai-ig@w3.org from July to September 2008)

Shawn at the W3C wants feedback on the ARIA working draft, particularly "feedback on host language embedding, that is, how ARIA is implemented in HTML, XHTML, SVG, and other host languages." If you don't chime in now, don't bitch later.

Introduction to WAI ARIA - Opera Developer Community

A good overview of ARIA from the mighty Gez Lemon. There seems to be quite a bit of overlap with some HTML5 ideas here.

Nihilogic : WolfenFlickr 3D - Wolfenstein 3D / Flickr JavaScript Mashup

This mashup serves no purpose other than to make me cackle with glee. Navigate Flickr pics on the walls of Castle Wolfenstein.

Spacius! A Space Adventure

Get nostalgic with this old-school shoot 'em up. Oh, and it's written in JavaScript.

Nihilogic: JavaScript Super Mario Kart

A JavaScript version of Super Mario Kart? Crazy!

Twitter / Simon Willison: javascript:(function(){var ...

Copy this bit of JavaScript code. Visit your website of choice in Safari. Paste said code into the address bar. Giggle with glee.

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.

John Resig - Processing.js

John gave us a sneak peak of this at @media Ajax last November: Processing ported to JavaScript using canvas. Check out the demos and be amazed.

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

The Highly Extensible CSS Interface

Cameron has put all the materials from his four-part series together in one handy spot.

John Resig - Classy Query

You have to be really, really geeky to find this funny. I find this funny.

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!

hCardMapper - How to use hCards to fill in forms

An open source project for parsing hCards to add to sign-up forms.

XFN encoding, extraction, and visualizations - Opera Developer Community

Brian has written an excellent article that not only explains how to write XFN but also how to parse it.

John Resig - Most Bizarre IE Quirk

The title of "most bizarre IE quirk" is hotly contested, given just how many of them there are. But John has found a real humdinger here.

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

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

AJAX and Screen Readers - Content Access Issues - The Paciello Group Blog

Steve Faulkner gives a rundown of the current state of play between screen readers and Ajax.

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.

John Resig - Secrets: Table of Contents

It looks like John's next book will be superb.

Dean Edwards: IE7.js version 2.0 (beta)

A new version of Dean's IE7 script is available. Given my daily frustrations with IE6, I hope its marketshare declines enough that I can use this as a magic bullet in front-end development.

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.

danwebb.net - @media Ajax

The slides from Dan's excellent presentation on metaprogramming JavaScript.

QuirksBlog: @media Ajax

PPK delivers his report on the excellent @media Ajax conference.

QuirksBlog: VTM slides

Here are the slides from PPK's talk this morning at the Voices That Matter conference. It's all good JavaScript advice.

Humanized Messages for jQuery at Binary Bonsai

A nice little extension to jQuery from Michael Heilemann for displaying unobtrusive feedback messages.

Microformats Bookmarklet › Left Logic

Have I told you lately how much I love this microformats bookmarklet? Yes? Well, I'm telling you again.

Juicy Studio: WAI-ARIA in HTML

How to get ARIA working in HTML (no namespaces in HTML, remember). Once again, Gez is providing superb documentation in the area of JavaScript and accessibility.

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.

Styling File Inputs with CSS and the DOM // ShaunInman.com

A clever little technique by Shaun for faux-styling file input elements using a mixture of CSS and JavaScript.

UT| Event delegation without a JavaScript library

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

[this is aaronland] Trying not to cut down the trees for an inability to see the forest

Aaron weighs in with his thoughts on JavaScript, web apps, the iPhone, dashboard, the papernet and more. Oh, and he's built a machine-tag mashup.

Thirteen Simple Rules for Speeding Up Your Web Site

The justification behind YSlow. If you've heard Nate Koechley speak, some of this will be familiar to you. It's all solid advice as far as I can tell.

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").

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.

Medallia Blog: jQuery Reference Widget Archives

Use jQuery? Use a mac? Here's a handy dashboard reference.

JavaScript Libraries: The Big Picture

Simon's slides from his talk at XTech on JavaScript libraries (which I missed). Good stuff contained within.

Newsvine - Newsvine Relaunches... Announcing Evergreen

Mike and the team have redesigned/realigned Newsvine with some nice customisation of the front page.

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.

FlashAid version 1.0 released at Aral Balkan

Aral has been busy whipping FlashAid into shape. Now let's get busy kicking the tyres.

Showdown - Markdown in Javascript

A JavaScript port of John Gruber's excellent Markdown. I use Markdown for my blogging CMS so I may incorporate this into the GUI.

YUI Version 2.2.0 Released: Browser History Manager, DataTable, and Button Components, New Versioning, and More » Yahoo! User Interface Blog

Roll up and get it: hot off the presses; the new version of the Yahoo User Interface library. Happy birthday, YUI.

Pie Chart (JavaScript edition)

Dmitry built an incredibly cool JavaScript pie chart. It also integrates with Flickr using Ajax to do a Flickr version of googlefight. Great stuff!

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.

Flickr Services

You can now get responses from the Flickr API formatted as JSON.

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.

Max Kiesler - How to Make Your AJAX Applications Accessible - 40 Tutorials and Articles

A lot of these articles are more about JavaScript in general than Ajax per se, but it's good to have all these resources gathered together in one place.

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.

Devlounge | Cameron Adams aka The Man In Blue

Cameron shares his thoughts on Ajax, Hijax, libraries and having fun.

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.

Yahoo! 360° - The Department of Style - Choose Your Ajax

Douglas Crockford proposes an acid test for JavaScript libraries - "If JSLint finds problems in a library, then dump it and move on to the next one."

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!

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.

Google Maps API Official Blog: Google Maps API Version 2

Version 2 of Google's Maps API is out. Changes, changes, read all about it.

JSONRequest

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

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.

Jesus and Mo

A comic strip about Jesus and Mohamed that uses my JavaScript image gallery.

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.

Progressive Layout

Using JavaScript to serve up fixed or liquid layout based on browser width.

How to Use Google Maps EZ

A handy guide to using a wrapper for the Google Maps API.

Tim's WSG Ajax Presentation

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

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.

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.

Brendan's Roadmap Updates: JavaScript 1, 2, and in between

Brendan Eich, inventor of JavaScript, weighs in with some thoughts on JavaScript 2.

JavaScript meetup

Stuart has posted an excellent round-up of the London JavaScript meetup.

Rico

A library of JavaScript for rich internet applications.

The Strange Zen Of JavaScript: Ajaxed out

A nice round-up of the Ajax summit.

Juicy Studio: Generic Form Validation Routine

A nice bit of unobtrusive DOM scripting for validating just about any form.

Google News customisation widget

Google now offer a DOM-driven widget for dragging and dropping page sections.

Six Ounce Board Store: Board gallery

A nice implementation of my JavaScript image gallery on a really nicely designed site

AJAX and Accessibility

Some good practical tips for improving accessibility in AJAX apps.

PSP Browser Objects

Steve has documented the JavaScript support in the Playstation Portable.

PSP Browser Objects

Steve has documented the JavaScript support in the Playstation Portable.

Custom checkboxes

A truly excellent piece of DOM scripting by Steve Chipman that replaces checkboxes with images.

Resizable textareas with JavaScript

Anders "Robots" Pearson demonstrates a useful technique.

Annelie's FotoAlbum

A nice homey implementation of my JavaScript image gallery script.

Vashnevdesign Portfolio

A nice use of my JavaScript slideshow.

Galeria de imagenes en Javascript

A Spanish translation of my JavaScript Image Gallery article from A List Apart.

Interesting Javascript Experiment

Based loosely on my slideshow script, here's a very cool zooming effect in JavaScript by Tyler Karaszewski.