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?
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.
Jake casts a scrutinising eye over the way that browsers load and parse scripts …and looks at what we can do about it.
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.
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!
A handy one-stop-shop for tips on improving front-end performance.
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.
Related to my rant on links that aren’t actually links: buttons that aren’t actually buttons.
This is handy: a look at which DOM properties and methods cause layout thrashing (reflows).
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.
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.
All the talks from this year’s excellent Full Frontal conference in Brighton, available in audio form for your huffduffing pleasure.
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.
A terrific write-up of this year’s Full Frontal conference, with a descriptive rundown of each talk.
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.
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.
A great in-depth description by Paul of how he optimised his site. More of this please!
Let’s spend the day after Full Frontal programming flying robots with JavaScript. Clearleft is sponsoring a drone; want to play with it?
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?
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.
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).
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.
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).
This is rather marvellous: a book review from Robin Sloan that requires you to type commands into a JavaScript console.
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.
Stuart on the importance of View Source.
This is possibly the most horrifying piece of JavaScript ever written. The license is good too.
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.
Well, well, well. It turns out that building your entire application, content’n’all, in JavaScript isn’t so good for performance.
I really like this trend of small standalone scripts rather than plug-ins that require the presence of a library.
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.
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.
This responsive image technique has a lot of moving parts but it seems pretty solid.
A great step-by-step tutorial from Brad on developing a responsive site with a Content First mindset.
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.
A smart response to the little conundrum I posted on my blog yesterday about detecting media-query quarantined CSS properties from JavaScript.
A fantastic taste of what you can expect in Seb’s Creative Coding workshop.
In amongst all the shiny demos on this site, this one could actually be useful.
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!
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.
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?
The slides from Phil’s excellent South by Southwest presentation on URLs, JavaScript, and progressive enhancement.
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”.)
Jeff documents some of the techniques he’s using to tackle responsive design, with some tips specifically for SASS.
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.
Pretty!
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.
Some valuable musings from Ben on how browsers could be better — and I don’t mean the usual moaning about performance or device APIs.
This cracked me up. There are two possibilities: either this is really is very funny or I am very nerdy.
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.
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.
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.
A competitor to Prezi built with HTML, CCS and JavaScript.
An in-depth look at browser polyfills: what they are, how they work, and how you can make your own.
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!
A great reminder from Christian that making JavaScript a requirement for using a website just doesn’t make much sense.
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.
This looks like a nice progressive enhancement pattern: convert a select element into an auto-completing input element (a country selector in this case).
Jake Archibald has a blog now. Subscribed.
Jason continues his look at responsive images techniques by diving into the nitty-gritty of the various options out there.
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).
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?
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.
An ingenious loading indicator that uses JavaScript instead of an animated .gif.
A valiant attempt to polyfill support for hyphenation in browsers other than the latest Safari and Firefox.
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.
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.
A collection of experiments in typography using canvas, SVG, JavaScript and whatever else it takes.
In an attempt to “optimise” performance, T-Mobile and Orange are actually breaking jQuery.
This is your one-stop shop for envelope-pushing in the browser:
The very best of creative JavaScript and HTML5.
A look at some of the new HTML5/JavaScript additions coming in the next version of Mobile Safari.
A handy little tool for testing responsive designs by automatically changing your browser viewport size.
A superb post by Dan on the bigger picture of what’s wrong with hashbang URLs. Well written and well reasoned.
All of the most irritating uses of JavaScript gathered together into one library.
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.
Buy. This. Book.
I mean it.
Rebecca Murphey on the continuing evolution and maturity of the JavaScript world.
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.
A handy little JavaScript selector—IDs, classes and attribute selectors are supported—for those situations when all of jQuery or Sizzle would be overkill.
A supremely useful tool from Google for measuring performance.
This could be a handy: a client-side spellchecker. The dictionary files are a bit big of course—maybe local storage could help.
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 code could be useful in determining a user’s bandwidth.
A nice’n’small lazy loader that should make life easier when it comes to pollyfilling browser support for nifty HTML5 or CSS3 features.
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.
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.
Good advice for generating markup with jQuery. As usual, there’s more than one way to do it.
A great little jQuery script to automatically assign ARIA roles to HTML5 elements with the corresponding semantics.
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.
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.
A handy shim for audio: it uses the native implementation where possible and Flash as a fallback.
Some very smart ideas here for responsively enhancing image requests.
Kenny Meyers on the ubiquity of JavaScript.
Handy! A JavaScript API for accessing microformats in a document, based on Mozilla's implementation for extensions.
This looks like it could be a handy little tool for creating test cases with HTML, CSS and JavaScript.
Drag the text 'round for a bit of fun.
An entire platform game in 1024 bytes. Impressive. Most impressive.
A great little platform game that is entirely Flash-free. Canvas all the way.
A JavaScript/SVG library for displaying maps in a variety of interesting ways.
A fantastic bit of image manipulation JavaScript from Dave.
This is the plain vanilla look.
You can subscribe to the RSS feed of links.