Tags: javascript

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!

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.

impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz

A competitor to Prezi built with HTML, CCS and JavaScript.

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.

New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5 | David B. Calhoun – Developer Blog

A look at some of the new HTML5/JavaScript additions coming in the next version of Mobile Safari.

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.

Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement — Easy Readers

Buy. This. Book.

I mean it.

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.

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

A $15 PDF book on jQuery from Cody Lindley.

LAZEROIDS!

Asteroids implemented using HTML5's canvas.

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?