Libraries and frameworks

png.js (by Devon Govett) is a png decoder in JavaScript using Canvas (also see bmp.js, which he released around the same time, but understandably got less attention)
pouchDB (by Mikeal Rogers) is a JavaScript implementation of CouchDB. Check out ReadWriteWeb’s writeup
Sprite3D: simple controls on top of CSS transitions and transforms
yal.js is a micro JS loader (but it doesn’t seem to perform very well compared to LABjs)
mobiscroll is a wheel date/time picker jQuery plugin for mobile
VisualSearch.js is a cool little input box enhancer. Perhaps there’s a bit too many dependencies though (jQuery, jQuery UI, Underscore, Backbone)?

Tidbits

Chrome Developer Tools: Put JavaScript memory under control – nice guide to finding leaks
Fixing the JavaScript typeof operator (JavaScript, JavaScript…)
Understanding JavaScript Function Invocation and “this” (Yehuda Katz)
Introduction to the Page Visibility API (Nicholas Zakas) (see the W3C working draft)
Javascript Unit Test Environment (JUTE) Now Open!
Functional Parameters – a neat JavaScript Design Pattern
Kind of a pointless activity, but Stoyan Stefanov has compiled a list of 535 ways to reload a page with JavaScript, and someone has built a script based on it that uses over 1600 ways to do the same thing. Oh dear!
Building Mobile JavaScript WebApps With Backbone.js & jQuery: Part I
31 days of Canvas tutorials
Huge debate about script loaders on GitHub (via reddit)
Are We Fast Yet? (for HTML5 games) is a look at the problems with garbage collection pauses, with the conclusion that requestAnimationFrame isn’t (yet) practically useful for games compared to setTimeout or setInterval.
Data URI and Deferreds For Great Justice
Let’s Make a Framework: JSLint, Makefiles
Sencha Touch now has interactive charts
Extending built-in native objects. Evil or not? (by kangax)
Moz JS Team Newsletter 7/29-8/9

Multimedia

(audio) NodeUp episode 3 has been released
(slides) Javascript Everywhere From Nose To Tail
(video) Google HTML5 Web App Hackathon
(video) Node.js Meetup: Distributed Web Architectures
(video) YUI Open Hours (August 11, 2011)
(slides) Mobile WebKit Optimizations & Tools (Glan Thomas and Andrew Hedges)
(slides) The Rise of PhoneGap
(video) Nodester: Create & Deploy a Node.JS App in Less than 2 Min!

GitHub Most Watched This Week (JavaScript)

html5-boilerplate
chosen
pouchdb
node
html5media

Releases

node 0.5.4
SproutCore 2.0 (via JavaScript Weekly)
HTML5 Boilerplate 2.0

Upcoming Events

innerHTML’s storied past, and HTML’s shiny future (Paul Irish) (SF Tech Talks) (August 16, 2011 in San Francisco, CA, USA)
GamesJS: Javascript and HTML5 Games Kickoff Meeting (August 17, 2011 in San Francisco, CA, USA)
Dojo Skills Workshop (August 18-19, 2011 in Austin, TX, USA)
Intro to JavaScript and jQuery (Girl Develop It Austin) (August 20, 2011 in Austin, TX, USA)
High Performance Mobile (Steve Souders) (August 30, 2011 in Mountain View, CA, USA)
NodeConf Summercamp (September 5-7, 2011 in Walker Creek Ranch, CA, USA)
jQuery, JS Mobile and Paul Irish on HTML5 (SFJS) (September 6, 2011 in San Francisco, CA, USA)
Frontend Conference (September 9-10, 2011 in Zurich, Switzerland)
dojoconf (September 16, 2011 in Arlington, VA)
CapitolJS (September 18, 2011 in Washington DC)
onGameStart (September 22-23, 2011 in Warsaw, Poland)
Node.js Conference Italy (September 24, 2011 in Brescia, Italy)
jQuery Conference Boston (October 1-2, 2011 in Boston, US)
HTML5.tx (October 8, 2011 in Austin, Texas, USA)
SenchaCon 2011 (October 23-26 in Austin, TX, USA)
Full Frontal JavaScript Conference (November 11, 2011 in Brighton, UK)
indieconf 2011 (November 19, 2011 in North Carolina, US)

Listen to this week’s podcast

Tidbits

Mozilla’s David Mandelin has started a weekly newsletter of JS engine updates

browserify lets you run node-like require() statements on the client side (in the browser)

Candy is a multi-user chat client built for Jabber

Octopress is written in Ruby, not JavaScript, but it’s worth a look. It simplifies getting jekyll set up, which lets you write blog posts in Markdown.

Chosen is a library for making select dropdowns more user-friendly. Anyone who’s used a country dropdown (everyone?) knows what a pain it is to scroll down through the list of countries (wait, did they put the United States on the top or the bottom this time?!). This simplifies the process by adding some sugar: a textfield that allows the user to start typing, resulting in something that acts almost more like an autocomplete. In any case, it’s good stuff for the user experience! It supports jQuery and Prototype.

Back in December 2010 WebSockets started to get disabled by default on browsers because of a security vulnerability. The spec has now been updated to address the vulnerability, and Chrome has now re-enabled WebSockets. Bad news: it’s not backwards-compatible. Update your code!

Adobe has fully embraced HTML/CSS/JS with Adobe Edge, providing Flash-like timeline-based editing tools (and similar to Sencha Animator). And why do they use the DOM instead of Canvas? Performance reasons, as developer Mark Anders points out in the forums.

speak.js is a JavaScript port of the eSpeak voice synthesizer (C++)

Terrific is a OOCSS-inspired JavaScript framework for jQuery. The idea is that you write what JS modules different parts of your page need based on the class string. For instance, <div class="mod modNews"></div> will pull in a module called Tc.Module.News. Maybe I’m a bit old-fashioned, but this looks like muddling the separation between styling (CSS) and interaction (JS). I’m all for more modular code, but I don’t want my class names to take on a life of their own outside of just styling. But that’s just me.

Mozilla’s August Dev Derby encourages hacks with the History API.

Elijah Manor has written up some tips for using the Chrome developer tools, including a few JS tips (stuff that’s been added relatively recently, such as live code editing and execution, pretty printing, JS breaking when DOM elements are modified, etc.)

JavaScript Creator Says the Language Wasn’t Just Dumb Luck

Dojo 1.7 has support for AMD modules (see the AMD proposal)

Principles of Writing Consistent, Idiomatic JavaScript is a very opinionated piece on writing good JS code. Warning: you will probably not agree with all of it.

git.js is a Git implementation in (you guessed it) JavaScript

With Dustin Diaz’s latest post and Michael Bolin’s JSConf talk, it looks like JavaScript’s with statement might be making a comeback, despite Crockford’s warnings

Connecting Web Apps with Web Intents – Chrome and Android introduce the concept of “intents” in JavaScript, an API which allows web apps to utilize shared utilities, such as a photo editing service or URL shortener.

There’s been a few articles recently lamenting the lack of progressive enhancement in new shiny “HTML5″ demos: one by Bruce Lawson and another by an unknown developer.

Multimedia (audio, video, etc.)

TXJS 2011 videos

London Ajax Mobile Event videos

Ben Galbraith and Dion Almaer have launched a podcast for FunctionSource

(Video) Ryan Dahl’s keynote from NodeConf 2011 has been posted

(Slides) Javascript done right (Dirk Ginader) from Open Web Camp III

ES6 Lives! (A Minute with Brendan) – ECMAScript 6 (ES6) is targeted for end of 2013

GitHub Most Watched This Week (JavaScript)

deployinator
chosen
jquery
octopress
node

Releases

Zepto 0.7
Node 0.5.3
jQuery Mobile Beta 2

Upcoming Events

AT&T Mobile App Hackathon (August 6, 2011 in San Jose, CA, USA)
JavaScript Leeds (August 10, 2011 in Leeds, UK)
Dojo Skills Workshop (August 18-19, 2011 in Austin, TX, USA)
Intro to JavaScript and jQuery (Girl Develop It Austin) (August 20, 2011 in Austin, TX, USA)
NodeConf Summercamp (September 5-7, 2011 in Walker Creek Ranch, CA, USA)
Frontend Conference (September 9-10, 2011 in Zurich, Switzerland)
dojoconf (September 16, 2011 in Arlington, VA)
CapitolJS (September 18, 2011 in Washington DC)
onGameStart (September 22-23, 2011 in Warsaw, Poland)
Node.js Conference Italy (September 24, 2011 in Brescia, Italy)
jQuery Conference Boston (October 1-2, 2011 in Boston, US)
SenchaCon 2011 (October 23-26 in Austin, TX, USA)
Full Frontal JavaScript Conference (November 11, 2011 in Brighton, UK)
indieconf 2011 (November 19, 2011 in North Carolina, US)

Listen to this week’s podcast (July 29, 2011) (proper podcast XML feed coming soon(ish))

hascan

For years we’ve been quite content shipping “dead code” to browsers regardless of their supported features. The best example of this is really every desktop library built to normalize features in browsers (read: usually normalizing between IE and other browsers). This is why code sent down to a user browsing with Firefox or Chrome will get references to nonstandard IE methods such as attachEvent (even if that code will never run, thus why these branches of code are dead weight). And that’s why users of jQuery Mobile browsing on iOS and Android will get the same references, because jQuery Mobile rests on top of jQuery. But what a waste of bandwidth, which is especially noticeable in the case of mobile devices and networks!

There are ways around this. Fortunately, some libraries such as YUI will perform feature tests and only load things that need to be sent down the wire (for example, a browser with native JSON support won’t get blindly sent a JSON polyfill that will never get executed). Some folks write special hacks in their code that make browser-specific branches, but end up being unnatural or unwieldy to maintain (Rebecca Murphey mentions the problem of maintaining this sort of code in one of her recent posts).

And then along came Joe Hewitt’s hascan, to little fanfare unfortunately. Hascan uses has.js, Node, and Browserscope to produce tailor-made versions of code delivered to browsers with only the code they need! A little controversial is the use of user agent sniffing, which has seemed to overshadow how awesome this tool really is (see the comments on FunctionSource’s article for more details). Don’t let the user agent sniffing scare you – I believe hascan is worth a serious look and I hope its general approach to eliminating “dead code” will catch on and gain more support.

jsfx

jsfx (by Egon Elbre) is a JavaScript sound effect generator that can dynamically create a whole range of sounds. It’s not exactly new, but it’s made the rounds a bit on Twitter this week, so it’s worth a mention! Since it’s been around a little bit, some folks have made stuff using it, including a drum sequencer and some crazy trippy audiovisual thing that seems to be like an animated technicolor Zen rock garden with the NBC chime as the soundtrack. Or something. Yeah. Oh yeah, if you just want to play around with jsfx itself, load up the handy demo and just click “Randomize” to your heart’s content. You’ll be surprised at the amount of diverse sounds you can get out if it.

html2canvas

html2canvas (by Niklas von Hertzen) is a mad scientist’s attempt at capturing a “screenshot” of webpages in canvas. Ok, Niklas isn’t a mad scientist, but in my mind he might as well be. Html2canvas doesn’t actually take a screenshot, but rather goes through the DOM element by element, inspecting computed styles added to each element, and attempts to translate that to Canvas. It does it amazingly well, as the examples show in their A-B comparisons.

Tidbits

JavaScript Enlightenment by Cody Lindley has been released (not to be confused with his other work, jQuery Enlightenment) (see a sample chapter here)

Callbacks, synchronous and asynchronous

Some more JSConf2011 videos have been posted

browserify – write client-side javascript server-side

CreativeJS is a new site that aims to demo some of the very best in JavaScript and HTML5.

JointJS

grumble.js is a jQuery plugin for tooltips without north/east/south/west positioning limitations

javascript-ipv6 is a library for parsing and manipulating IPV6 addresses in JavaScript

Tom Hughes-Croucher has released his Node.js Workshop slides from OSCON 2011

Improving DOM Performance for HTML5 Games

Easy functional programming in JavaScript with Underscore.js — part 1

The JavaScript Show

Node.js on Windows (or JavaScript for the backend)

(Slides) JavaScript is everywhere by Stoyan Stefanov

Understanding The Complex And Circular Relationships Between Objects In JavaScript

GitHub Most Watched This Week (JavaScript)

html2canvas
octopress
jquery-boilerplate
hook.io
agility

Releases

Backbone 0.5.2

YUI 3.4.0 Preview Release 3

Upcoming Events

Omaha Front-end Web & jQuery (August 2, 2011 in Omaha, NE, USA)
SoCal Node.js Meetup (August 4, 2011 in Los Angeles)
Introducing DNode and Hook.io (Bay Area Node.js Meetup) (August 4, 2011 in San Francisco)
AT&T Mobile App Hackathon (August 6, 2011 in San Jose, CA, USA)
NodeConf Summercamp (September 5-7, 2011 in Walker Creek Ranch, CA, USA)
Frontend Conference (September 9-10, 2011 in Zurich, Switzerland)
dojoconf (September 16, 2011 in Arlington, VA)
CapitolJS (September 18, 2011 in Washington DC)
onGameStart (September 22-23, 2011 in Warsaw, Poland)
Node.js Conference Italy (September 24, 2011 in Brescia, Italy)
jQuery Conference Boston (October 1-2, 2011 in Boston, US)
SenchaCon 2011 (October 23-26 in Austin, TX, USA)
Full Frontal JavaScript Conference (November 11, 2011 in Brighton, UK)
indieconf 2011 (November 19, 2011 in North Carolina, US)

Tidbits

SugarJS is a framework for working with native JavaScript objects, and controversial because it knowingly adds to the prototype of native objects

TameJs is written by the folks at OkCupid, and introduces a cleaner way to write asynchronous code

JavaScript is Assembly Language for the Web: Part 2 – Madness or just Insanity?

socket.io and Express. Tying it all together

melonJS is a lightweight HTML5 game engine

has.io is a site that uses Modernizr to show you what features your browser supports

John J. Barton of Firebug is moving on to the Chrome browser team

Waldo: Search the JavaScript Object Model in under 1 KB

wii-js is a library for event-based interaction with Wiimotes (on the Nintendo Wii browser)

jsSHA is a JavaScript implementation of the entire family of SHA hashes

Essential JavaScript Design Patterns For Beginners, Volume 1 by Addy Osmani

Understanding Hardware Acceleration on Mobile Browsers

Behind The Scenes Of Nike Better World

Tweaking the viewport apparently dramatically increases the speed of Canvas rendering in iOS

The Node Beginner Book (Manuel Kiessling) is now complete

Upcoming Events

SoCal Node.js Meetup (August 4, 2011 in Los Angeles)
Introducing DNode and Hook.io (Bay Area Node.js Meetup) (August 4, 2011 in San Francisco)
AT&T Mobile App Hackathon (August 6, 2011 in San Jose, CA, USA)
NodeConf Summercamp (September 5-7, 2011 in Walker Creek Ranch, CA, USA)
Frontend Conference (September 9-10, 2011 in Zurich, Switzerland)
dojoconf (September 16, 2011 in Arlington, VA)
CapitolJS (September 18, 2011 in Washington DC)
onGameStart (September 22-23, 2011 in Warsaw, Poland)
Node.js Conference Italy (September 24, 2011 in Brescia, Italy)
jQuery Conference Boston (October 1-2, 2011 in Boston, US)
SenchaCon 2011 (October 23-26 in Austin, TX, USA)
Full Frontal JavaScript Conference (November 11, 2011 in Brighton, UK)
indieconf 2011 (November 19, 2011 in North Carolina, US)

Podcast!

JSMag News Roundup for July 10, 2011

This week the podcast returns! Thanks for listening! Still working on getting a proper podcast XML setup, so stay tuned in.

Lessons from a rewrite

Whenever a famous JavaScript person writes a post, they usually get a lot of attention, and sometimes undeservedly so. However, Rebecca Murphey has been writing good posts lately that do deserve your attention, because they address practical problems that we’re all facing as a community at the moment. Namely: how do you write large-scale JavaScript applications and get all the pieces to fit together nicely?

Her latest post “Lessons from a rewrite” deals with the issue of tackling an existing piece of software that’s been built, or scrapping it and rewriting it all from scratch. There’s also good discussion on writing large JavaScript applications in general (with Dojo code, but applicable anywhere).

Enable CORS

Enable CORS is a simple little informational site to evangelize CORS, cross-origin resource sharing, what you might know better as cross-domain XHR. The same-origin restriction on XHR is the most frustrating thing about XHR, and what prompted the creation of techniques such as JSONP, which require the service to be rewritten to support adding a callback function. For modern browsers that support cross-origin XHR, the only thing a service needs to do is set a specific header (Access-Control-Allow-Origin).

Not too long ago I requested this feature from the Closure Compiler service and they were happy to implement it, because it took minimal effort. So now the challenge for you all: request this feature from your favorite service!

RIP conditional comments in IE

Conditional comments, the handy proprietary HTML only available in Internet Explorer, are on their way out in IE10, Microsoft announced recently. This seems sad, but it’s encouraging, as it shows that IE (as of version 10) might finally be ready to be standards-compliant enough that we can rely on simply feature detection, like we do in other browsers.

Conditional comments have been useful, especially for targeting strange CSS bugs that only appear on certain versions of IE. It’s sad not being able to do things using our handy familiar techniques, but it’s something that had to be done eventually to bring IE in line with the other browsers. It’s one of many things Microsoft has done recently to open up to being more standards-compliant. And that’s the bottom line, really: conditional comments are by definition not standards-compliant.

Releases

pdf.js 0.2 – greatly improved rending

Backbone.js 0.5.0 now supports pushState (with degradation to hash tags for older browsers)

Libraries, frameworks, etc.

DropKick is a jQuery plugin for creating custom dropdowns

leaflet is an open-source interactive map library that uses OpenStreetMap tiles

jsplumb is a framework to build flowcharts and diagrams

Cuepoint JS is a plugin for adding cue-points and subtitles to videos

The code for jQuery’s fixed toolbars has been extracted and made to work without depending on jQuery Mobile (it does however seem to still depend on jQuery).

Tidbits

YUI and Loader changes for 3.4.0

Socketbug is a new remote debugging tool for mobile web applications

jslibs has a wiki with some interesting advanced JavaScript tips and tricks

(slides) jQuery Proven Performance Tips And Tricks

Handy chart comparing the HTML5 video players out there

The folks at Sencha have checked out the HTML5 capabilities of the HP Touchpad and found it to be “rough around the edges”, but shining in some places, such as blazing fast Canvas rendering.

The this keyword in JavaScript is a good article that explains the sometimes peculiar nature of “this” in JavaScript, and how it changes in ECMAScript 5 strict mode.

Node.js

kue is a redis-backed priority job queue for node.js

What is Node.js is another good introduction to Node

Upcoming Events

Open Web Camp III (July 16, 2011 in Palo Alto, CA)
SoCal Node.js Meetup (August 4, 2011 in Los Angeles, CA)
NodeConf Summercamp (September 5-7, 2011 in Walker Creek Ranch, CA)
Frontend Conference (September 9-10, 2011 in Zurich, Switzerland)
dojoconf (September 16, 2011 in Arlington, VA)
CapitolJS (September 18, 2011 in Washington DC)
onGameStart (September 22-23, 2011 in Warsaw, Poland)
Node.js Conference Italy (September 24, 2011 in Brescia, Italy)
indieconf 2011 (November 19, 2011 in North Carolina, US)

Libraries

paper.js

RPG-JS

morf is a library that allows you to use even more easing functions than just the standard CSS3 ones (linear, ease-in, ease-out, etc.)

fathom.js

Meow is a Growl-inspired notifier for webpages (requires jQuery)

Tidbits

Beating 60fps in Javascript

test262: Industry JavaScript Standards Test Available

Refactoring Javascript with kratko.js (kangax)

New JavaScript Engine Module Owner (Brenden Eich’s blog)

Poll: Have you moved from JavaScript to CoffeeScript? (Hacker News)

Why is JSON so popular? Developers want out of the syntax business

My gripes with JavaScript

Multiple object extend pattern in JavaScript

r/bookmarklets is a bookmarklets enthusiast community on reddit

Node.js tidbits

Synchronizing HTML5 Slides with Node.js

Couchtato – A CouchDB Document Utility Tool Written In Node.js

socketstream

Porting Node to Windows With Microsoft’s Help

Creating chat roulette with node.js, socket.io, and OpenTok

Upcoming Events

GothamJS (July 9, 2011 in New York City)
Open Web Camp III (July 16, 2011 in Palo Alto, CA)
SoCal Node.js Meetup (August 4, 2011 in Los Angeles, CA)
NodeConf Summercamp (September 5-7, 2011 in Walker Creek Ranch, CA)
Frontend Conference (September 9-10, 2011 in Zurich, Switzerland)
dojoconf (September 16, 2011 in Arlington, VA)
CapitolJS (September 18, 2011 in Washington DC)
onGameStart (September 22-23, 2011 in Warsaw, Poland)
Node.js Conference Italy (September 24, 2011 in Brescia, Italy)
indieconf 2011 (November 19, 2011 in North Carolina, US)

No podcast this week, but there’s a ton of links to pore over! Have a great week, and tune in next time!

Libraries

pdf.js reads PDFs with JavaScript (wow!)

jsmad is a JavaScript port of libmad, which can play MP3s! Right in your browser! (FF 4+ and Chrome 13 with Web Audio API enabled through about:flags)

flow.js aims to be a DOM Level 3 polyfill. Is it a good idea? Some think not.

Here’s a really nice roundup of a ton of bookmarklets floating around out there.

Jtalk: Smalltalk implemented in JavaScript

Apple Appstore-friendly version of JavaScriptCore (so you can compile it as part of your app)

jarvis is a JavaScript unit testing framework built in JavaScript

Tidbits

JavaScript Memory Management – now a bigger deal than before because of single-page apps (via JavaScript Weekly)

Another JavaScript quiz!

Wheels of Steel is Scott Schiller’s latest musical creation – a turntable in the browser.

Chrome 12 has a built-in JavaScript de-obfuscator

Choose Your Mobile App Framework (Joe McCann’s TXJS slides)

What are the most interesting HTML/JS/DOM/CSS hacks that most web developers don’t know about? (a Quora post with mostly JavaScript answers, including some contributed by yours truly)

Quick thoughts on concurrent JavaScript execution

Node.js Tidbits

nodejitsu has a blog that’s updated with Node.js articles every week

node.cloud is a collection of Node.js resources

Cluster is a library for multi-core server management in Node.js

Instagram Realtime Demo with Node.js, Redis and Web Sockets

Nodecamp.eu resources (presentations, videos, etc.)

(audio) EventEmitter2 – Namespaced events in Node.js and the Browser (The Changelog)

Upcoming Events

TXJS (June 11, 2011 in Austin, Texas)
An Event Apart Atlanta (June 13–15, 2011, Atlanta)
High Performance JavaScript with Nicholas Zakas (Web Performance SF) (June 23, 2011 in San Francisco, CA)
GothamJS (July 9, 2011 in New York City)
Open Web Camp III (July 16, 2011 in Palo Alto, CA)
SoCal Node.js Meetup (August 4, 2011 in Los Angeles, CA)
NodeConf Summercamp (September 5-7, 2011 in Walker Creek Ranch, CA)
dojoconf (September 16, 2011 in Arlington, VA)
CapitolJS (September 18, 2011 in Washington DC)
onGameStart (September 22-23, 2011 in Warsaw, Poland)
Node.js Conference Italy (September 24, 2011 in Brescia, Italy)
indieconf 2011 (November 19, 2011 in North Carolina, US)

Listen to this week’s news podcast (June 11, 2011)

Tons of new stuff and new conferences up!

By the way, don’t forget to take advantage of O’Reilly’s 50% discount deal on JavaScript books during the next few days. (EDIT: the discount applies to ebooks only)

yokul

yokul is an attempt at using the Google Charts API locally using canvas. It’s still in the early stages, but the creator seems optimistic that the API can be replicated with just Canvas. The nice thing is that browsers without Canvas can simply fall back to using the actual Charts API via a network request, using the same API.

This is nice in a few ways: it reduces the application’s dependence on the network (which is nice for devices that aren’t always connected to the network). It also reduces a burden on the servers hosting the API, which costs money! It’s easier and cheaper to scale something if the cost of computation is shifted to the client.

Log.io

log.io (on GitHub) is a real-time log monitoring library built in node.js. It has the ability to grab the changes to logfiles across multiple systems and aggregate them into one server that sends out updates to subscriber’s dashboards using socket.io. In real-time!

hook.io

hook.io is an input/output framework written in node.js that can spawn separate node.js processes and provides a Messaging API to help them talk to each other.

Why JavaScript haters should learn JavaScript

Why a JavaScript hater thinks everyone needs to learn JavaScript in the next year is an article written by Mike Loukides. He goes over a couple of key points, talking about the rise of Node.js, the importance of JavaScript in HTML5, and JavaScript’s influence over the world of NoSQL databases such as CouchDB.

Somewhat in a similar vein of thought, Joyent’s Chief Architect James Duncan was interviewed on the rise in popularity of JavaScript. He explains that part of the reason for its success is that it’s so widespread on client’s machines. He also explains the shift away from viewing JavaScript as a toy language, which started when Google Maps was implemented and offered a very nice implementation compared to its competitors (Mike Loukides also touches on Google Maps in his article).

Upcoming Events

TXJS (June 11, 2011 in Austin, Texas)
An Event Apart Atlanta (June 13–15, 2011, Atlanta)
High Performance JavaScript with Nicholas Zakas (Web Performance SF) (June 23, 2011 in San Francisco, CA)
GothamJS (July 9, 2011 in New York City)
Open Web Camp III (July 16, 2011 in Palo Alto, CA)
SoCal Node.js Meetup (August 4, 2011 in Los Angeles, CA)
NodeConf Summercamp (September 5-7, 2011 in Walker Creek Ranch, CA)
dojoconf (September 16, 2011 in Arlington, VA)
CapitolJS (September 18, 2011 in Washington DC)
onGameStart (September 22-23, 2011 in Warsaw, Poland)
Node.js Conference Italy (September 24, 2011 in Brescia, Italy)

Releases

Ext JS 4.0.2
SproutCore 1.6

Libraries / Frameworks

StronglyTyped is a JavaScript library by Lea Verou that attempts to tame the loosely-typed nature of JavaScript

Mibbu is a JavaScript game framework

node-google-voice is an API for Google Voice built for node.js (via @derek)

Tidbits

Chop is like pastebin for commenting on code

Client Performance Monitoring with Boomerang and CouchDB

James Padolsey has written up a blog of some JavaScript interview questions, and Nathan Smith has posted up a reply with even more questions to study!

WURFL (mobile detection catalog) has now gone commercial, and is now owned by ScientiaMobile

link elements block DOM parsing too (not just script tags!)

CSS Panic is a game made WITHOUT JavaScript (only HTML/CSS!)

what does v8 do with that loop? (deep dive into V8)

News

No audio podcast or major story summaries this week, just tidbits, releases, and some new events added to the calendar. See you next week!

Upcoming Events

TXJS (June 11, 2011 in Austin, Texas)
An Event Apart Atlanta (June 13–15, 2011, Atlanta)
GothamJS (July 9, 2011 in New York City)
Open Web Camp III (July 16, 2011 in Palo Alto, CA)
NodeConf Summercamp (September 5-7, 2011 in Walker Creek Ranch, CA)
dojoconf (September 16, 2011 in Arlington, VA)
CapitolJS (September 18, 2011 in Washington DC)

Releases

YUI 3.4.0 Preview Release 1
Processing.js 1.2 (improvements to WebGL performance)
Modernizr 2

Tidbits

emscripten is a Low Level Virtual Machine (LLVM) to JavaScript Compiler. A Firefox Mobile developer ported Doom to the browser using it, although the link to the game seems to not be working anymore (boo!)

A fresh look at JavaScript Mixins (JavaScript, JavaScript…)

ppk has updated his compatibility tables for browsers that respond to a dynamically changed viewport tag (read his blog post as well)

Addy Osmani has published an article giving an overview on the publish/subscribe (pubsub) pattern in JavaScript (scriptjunkie)

Christophe Portneneuve tells us the ins and outs of script concatenation (scriptjunkie)

EveryJS is a site inspired by microns, but this site’s goal is to give a once-over summary of each major JavaScript library or framework, and the major reasons why you should use each of them.

plax is a jQuery-powered library to implement a mouse-driven parallax effect (such as that seen on Github’s 404 error page)

js2coffee is a JavaScript to CoffeeScript transpiler. The big question: why?

Client Performance Monitoring with Boomerang and CouchDB

Four tools in Chrome to peek into JavaScript memory usage (Chromium Blog)

How Javascript Prototypal Inheritance Really works (with commentary via Hacker News) (h/t to JavaScript Weekly)

Listen to this week’s audio podcast

Of microlibraries and nanolibraries

If you’ve been following along lately, you know that there’s been a plethora of small JavaScript libraries that have been released, particularly by the prolific Dustin Diaz. Previously we’ve seen a proliferation of jQuery plugins, but it seems that the JavaScript world is finally growing up a bit and starting to realize that jQuery isn’t always a given. Not everyone has a need to load a huge library and all the cruft that comes along with it, and there seems to be a trend towards some folks who want to mix-and-match components rather than loading the whole kitchen sink. (Side note: this has brought to light some serious architecture issues, particularly with dependency management).

I think this trend is a good thing, especially since the world is starting to develop for mobile and realizing that page weight is more relevant than ever before.

Microjs is an attempt by Thomas Fuchs to wrangle up these microframeworks and microlibraries and categorize them. 140 bytes is an attempt at collecting even smaller scripts which can be contained in just Tweets (140 bytes), in perhaps a more academic pursuit (read: impractical pursuit).

TermKit

TermKit is an experimental Terminal that runs on WebKit and node.js. It’s a novel concept, and takes advantage of things we’ve been using on webpages for years. For instance, when we’re looking at code in the terminal, why not display it with a syntax highlighter we use on websites and blogs? And this is what TermKit does (using SyntaxHighlighter).

In addition to this, TermKit has a lot of nice graphical elements. Think of it as a compromise between a full-blown mouse-driven GUI and and plain old terminal like we’re used to.

I made a quick video demo so you can see TermKit in action.

JSONSelect

jQuery’s CSS-based selector engine laid the ground for simple and clean selectors in JavaScript, which inspired other libraries and eventually inspired what has become part of JavaScript itself (querySelector).

JSONSelect takes this philosophy a bit further: why not use the same semantics to target data in JSON objects? This seems to make sense on first glance, and selectors such as first-child and last-child immediately spring to mind as being handy.

On further inspection the idea seems not as intuitive. What made jQuery-like selectors so intuitive is that they were targeting the same DOM we were targeting with syntax we already knew from CSS. Both implementations targeted the DOM itself. But JSON objects targeted by JSONSelect aren’t the DOM. We’re not targeting IDs, classes, attributes, or anything else resembling the DOM, so it seems a bit unnatural.

In any case, it’s definitely worth a look so you can make up your own mind!

Scrollability

Scrollability is one of the first fruits of Joe Hewitt’s recent departure from Facebook. It’s another attempt to reproduce native iOS scrolling in web apps, something that’s been done even by Apple itself (viewable in the iPhone user guide, which used to run on their proprietary PastryKit framework, and now runs on iAd, which is a PastryKit 2.0 of sorts).

What’s unique about Scrollability is its independence from any library, which is unique apart from perhaps iScroll 4.

I made a quick video demo which shouldn’t yield too many surprises, but at least gives you an idea of the degree of progress that’s been made.

Fun with old JS APIS

Some folks are rediscovering ancient JavaScript APIs that were used as convenience methods to turn strings into HTML tags. It turns out that these APIs still work in newer browsers. For instance, ‘foo’.bold() returns the string ‘<b>foo</b>’. Similarly with ‘foo’.italics(). You can even implement the infamous blink tag: ‘foo’.blink() (which returns ‘<blink>foo</blink>’). To see the other little-known APIs, type String.prototype into your nearest JS console.

Though these tags are deprecated (or redefined, as in the case of the bold and italics tags), it seems that the API has a good intention behind it, the very beginnings of a sort of HTML templating API. Maybe it would have been useful to have a more generic function for creating arbitrary HTML tags, in a forward-looking way. This way we theoretically would’ve been able to write code like this: ‘foo’.tag(’footer’) that returned ‘<footer>foo</footer>’.

Oh well, in any case these are minor convenience methods that are pretty trivial to implement on our own, if we really want them.

Upcoming Events

TXJS (June 11, 2011 in Austin, Texas)
An Event Apart Atlanta (June 13–15, 2011, Atlanta)
dojoconf (September 16, 2011 in Arlington, VA)
CapitolJS (September 18, 2011 in Washington DC)

Tidbits

LABjs 2.0 beta has been released

calipso seems to be the first big CMS (content management system like Wordpress) based on NodeJS. DailyJS has done a code review of Calipso, for those interested.

Mozilla has a good resource for learning JavaScript (this is separate from the JavaScript Reference) (via @nathansmith)

Scope lookup + closure creation = performance hit

Paul Irish has written up the history of the HTML5 Shiv

Textify.it converts images to something similar but one step beyond ASCII art. The result is something somewhat impressionistic.

Lawnchair now supports indexedDB