Tags: javascript

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.

Links are not buttons. Neither are DIVs and SPANs by Karl Groves

Yes! THIS!

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.

Koalas to the Max dot Com

Pretty!