Hi, I'm Thomas Fuchs. I'm the author of the script.aculo.us user interface JavaScript library, a member of the Prototype core team and a Ruby on Rails core alumnus.
You're using my JavaScript work every day, even if you're not aware of it!
Safari 5.1′s (on Mac OS X Lion) rubber-band scrolling is teh awesome for websites and “classic” web apps like good ol’ Freckle time tracking, but for those newfangled single-page apps (like our upcoming email & twitter support app, Charm) that have their own page layout and aim to look more like desktop apps it can quickly get in the way; that is when you use vertically scrolling sub-elements (like lists) in your app.
Never fear, this little CSS snippet will disable rubber-band scrolling:
html, body {
height: 100%;
overflow: hidden;
}
This of course, disables all scrolling of the body element, so you’ll need a wrapper div that is overflow: auto around your respective content (elements with overflow: auto don’t use rubber-band scrolling).
Of note, setting overflow: scroll will make it look like the vertical scrollbar is not going all the way to the bottom. This is because there’s room left for a horizontal scrollbar that’s not needed in most cases—the solution to this is to use overflow-y: scroll or just the overflow: auto on the scrolling content wrapper div.
Related to this, the new -webkit-overflow-scrolling: touch property will enable single-finger rubber-band scrolling of elements within a page, but only on Mobile Safari in the next release of iOS. This property doesn’t change the behavior of scrolling on desktop Safari (yet? I wish it would be supported there too).
Today we launched HTML5 Mobile Pro Download Edition — a great way to learn how to code HTML5 sites and apps for mobile devices, especially those that sport WebKit-based browsers. Based off our successful workshops, you can now enjoy the videos and materials at any time you wish—and for just $99 while we’re in beta (it’s the full product, but we’ll ship a polished version in August, which you will get for free if you get the beta!). That’s just a third of the price of our regular workshop costs!
The 1.3GB download comes with 3+ hours of video-based teaching with Amy Hoy and yours truly, hundreds of slides (PDF, full-screen and print-ready versions), and tons and tons of demo code.
Best of all, and kind of sad that I need to stress this, the videos can be easily transferred to your iPad, phone or other device, as we haven’t crippled HTML5 Mobile Pro Download Edition with any kind of silly DRM. You can also print and copy+paste from the PDFs to your heart’s content, no silly passwords required.
Here’s a fancy video (browser that supports HTML5 video required to play):
Psst! As a reader of my blog I’ll give you extra $15 off, just use coupon code HTML5YAY. That’s $15 off the beta price, so you’ll save $45 off the final price when we ship the final version in August!
To learn a language by heart, try to set some time aside to explore it! Set yourself a specific goal—for example, find three ways to convert a character code to a string in JavaScript.
Here’s the basic set up, with what probably makes the most sense in almost any situation.
var charCode = 65;
String.fromCharCode(charCode) // => "A"
Where to go from here? It seems, at first that there is no other way to achieve this, right? Wrong, of course.
As a scripting language, JavaScript has powerful ways to evaluate generated code. Let’s try using the eval function to do this. Remember that JavaScript strings can contain escape sequences, for example in the form of \xAB, where AB is a hexadecimal character code:
eval("'\\x"+charCode.toString(16)+"'") // => "A"
An here’s a third way to do it, using the unescape DOM method:
unescape('%'+charCode.toString(16)) // => "A"
There are even more possible ways to achieve this conversion—try to find one!
lots of cleanups and improvements across the board; especially regarding Ajax and Events
More stuff is coming as we are nearing v1.0, and big names are starting to pick it up; for example the next iteration of Zappos’ mobile site will use Zepto (not online yet!). Learn a bit more by having a look at my recent presentation on Zepto at JSConf 2011.
Also of note, Zepto now has experimental compatibility with Firefox mobile (proceed with caution—largely untested!).
Big thanks to all the contributors—please keep it coming!
I’m thrilled to announce the launch of microjs, a directory of JavaScript Micro-Frameworks and Micro-Libraries, something that grew out of some reactions to my post on micro-frameworks in early April.
How much library code do you really need — 50K? 100K? 150K? More? How much of that do you really use?
Sure, we all love our favorite monolithic frameworks, and sometimes we even use them fully. But how often do we reach for the ride-on John Deere tractor with air conditioning and six-speaker sound system, when a judiciously applied pocketknife would do the trick better, faster, slicker?
Micro-frameworks are definitely the pocketknives of the JavaScript library world: short, sweet, to the point. And at 5k and under, micro-frameworks are very very portable. A micro-framework does one thing and one thing only — and does it well. No cruft, no featuritis, no feature creep, no excess anywhere.
Want to add your own? Fork it on GitHub, add your framework to data.js and submit a pull request.
Microjs was released as part of JSConf 2011 in Portland, Oregon, and I will release my talk slides and comments in an additional blog post later this week.
A big thank-you goes out to Dustin Diaz of Twitter who helped me sanity-check everything and is busy improving Microjs; and my awesome wife Amy Hoy for providing great copy and moral support!
Last but no least, thanks to all the contributors who already added their favorite libraries—keep it coming!
In the beginning there were the script kiddies and everyone saw that things were pretty bad. So people dismissed the ideas of mouse trails and wobbly status lines and, more-or-less quickly, moved on to actually useful libraries, the first of which being Prototype.js back in 2005, followed by many others. Over the years, one of these libraries, jQuery has become the de-facto standard for JavaScript frameworks on the web (but others continue to be used).
All of these monolithic libraries have one thing in common: they try to solve the same problem, and the scope of this problem is a big one. It’s not easy to provide a fully cross-browser environment and API for DOM manipulation, data crunching, class-based OO and more. And this shows in code bloat. These libraries are HUGE, being 100+ kilobytes in code size, and even minified and gzipped they are pretty big.
What’s wrong with that? A whopping 100% of sites or apps using these libraries don’t use all the features they provide. That wouldn’t be so bad if we didn’t have to transfer these libraries to the client every time. Some solutions exist for making it better (say, Google’s Libraries API), but it doesn’t really get down to the root of the problem.
I for one welcome our new micro-framework overlords—small frameworks and libraries that do one thing only, not trying to solve each and every problem, just using pure JavaScript to do it. Easy to mix and match, and to customize to your needs.
(cc) jans canon — Micro-framework group hug!
Here is just a small selection of these micro-frameworks (this list is far from complete):
There’s even work being done on meta-micro-frameworks, like Ender.js that strive to provide a “homogenized” mix of useful micro-frameworks that gets you started quickly, but you can later cut off parts or replace modules.
So with all the super-modern new amazing, astonishing technology at our fingertips—how hard could it be to play a single sound effect in a web browser?
The answer is: it’s hard, painful, and you can’t get it to work in all cases anyway.
Of course there’s the venerable SoundManager 2 library. But that’s 3000 lines of JavaScript code, plus a Flash file and more code, and… I just don’t think that you need 3000 lines of code just to play a sound effect. I refuse.
Why play sounds? Some user interfaces really benefit from audio feedback. In my case, it’s a feature so that people that use the Freckle Timer will get an audible ping every 15 minutes so they don’t forget that it’s still running (it’s optional of course!).
Anyway, script.aculo.us (version 1) actually came with experimental sound support, but that code is from a time when there was no HTML5, yet alone HTML5 audio yet. Let’s go with that code but update it to use HTML5 when possible.
Here’s look at various browsers and what they support:
Internet Explorer
Surprisingly, it’s pretty easy to play a mp3 on IE, even on version 6. The little known bgsound element does it for you, no questions asked. On IE9, with all the amazing HTML5 support, you can also use an audio tag, but IE9 misreports that it can play mp4 files when it can’t.
Safari
Can play mp3′s and m4a’s just fine with the audio tag, but behold: On Windows, if QuickTime is not installed also, not only will it not play any codecs, but the audio tag simply doesn’t exist, and the Audio object in JavaScript doesn’t either.
Firefox
Has support since 3.5, but it will only play OGG and WAVE files. Go figure.
Chrome
Has broad support and will play most stuff thrown at it. Also, no cross-platform differences.
Mobile devices
You can’t auto-play sounds, so forget about playing sounds as part of the UI now. On some devices (namely recent iOS devices) you can play sounds as a result of a direct user interaction (e.g. tap). It’s out of the scope of this article really.
It all boils down to:
When HTML5 is there, do this:
First, you need mp3, mp4 and ogg versions of your sound.
Basically, this will attempt to play a sound through an audio tag, and knows about IE9′s problem of misreporting that it plays mp4s. If all else fails, it will still attempt to play the mp3 version of the sound.
Basically, the code tries to use QuickTime, Windows Media and RealPlayer to play back the sound. You could add a Flash failover, but for that you need specially crafted Flash files, and then you get yourself into the whole Flash blocker madness. Avoid.
JavaScript libraries don’t have to big and clunky to be useful. Often, less is more. I’m doing a lot of work with single-page apps and short-lived event sites and visualizers—often coming up with some helper code while doing it, because it’s faster to implement small things yourself then to search for existing solutions, with none of them really doing what you want.
An example? Templating. While there’s a gadzillion more or less awesome templating engines for JavaScript out there, in one case I needed something übersimple—and tried to fit it into a tweet (for no particular reason).
function t(s,d){
for(var p in d)
s=s.replace(new RegExp('{'+p+'}','g'), d[p]);
return s;
}
Call it like this:
t("Hello {who}!", { who: "JavaScript" });
// "Hello JavaScript!"
t("Hello {who}! It's {time} ms since epoch.", { who: "JavaScript", time: Date.now });
// "Hello JavaScript! It's 1299680443046 ms since epoch."
If I’d need larger templates, I’d probably go with one of the engines that allows you to store HTML templates in <script> tags, but for my use case (just some messages) this worked beautifully.
DOM Monster is now at 1.3, and this version brings support for Jdrop, a “JSON in the cloud” service launched by fellow performance guru Steve Souders.
It’s easy— just go to Jdrop, connect with Twitter or Google, and then use the good old DOM Monster bookmarklet anywhere. You’ll notice that there’s a new “save to Jdrop” link. Just click it and boom! — it stores the results on Jdrop, so you can revisit the results later.
The most awesome thing about this is that you can use the DOM Monster on your mobile device, and then visit Jdrop on your desktop browser to easily analyze the results!
Also new are some updates and bug fixes to better parse JavaScript library version numbers, and we have more cool stuff planned! Feel free to participate by submitting bug reports, patches and documentation on the DOM Monster’s GitHub site.
The aerogel-weight mobile JavaScript framework, which also works great for Safari and Chrome extensions. The jQuery-compatible API makes it easy to pick up, and it's just 5k to 7k in size!
The JavaScript UI framework used on sites like Apple, CNN.com and NASA. Open source goodness so you can use it too!
Next-generation HTML-based visual effects for a more delicious web.
Beautiful sub-pixel antialiased font rendering for the Web.
slash7 is Amy Hoy and Thomas Fuchs. We produce the interface uncommon: useful, stunning, revealing, unexpected & mesmerizing interactive software.
