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.
What tools are the best for web development these days? It depends, of course, on what you do and what your personal preferences are. But let me tell you what I use and what works best for me, and most importantly, why I think it works best for me.
These days are over! Or are they? — (cc) ajmexico
Software
IDEs are not my kind of idea of how software should be developed. If your programming language, toolkit or library is so extensive and complicated that you need an IDE to develop, something is wrong. Small is beautiful. A plain old text editor is enough to make the world’s most amazing web applications.
My development work basically falls into two distinct categories, bugs/features for existing products and open source software; and rapid prototyping (there’s also a huge chunk of administrative work of course).
Bugs and features for our existing products/OSS
MacVIM rules supreme as my editor of choice here, not only it has great customizability and comes loaded with all sorts of helpers, it also can run full-screen, which makes it easy to concentrate on a bit of code, figuring out bugs, and so on. Be sure to grab PeepOpen, the ideal companion app.
I develop exclusively in Safari. Safari’s Web Inspector is quite an amazing tool to help you get stuff done. I know that many developers prefer Google Chrome, but most just subscribe to Google’s Kool-Aid, while overlooking the issues it has. It’s not as stable as it could be (at least on OS X), doesn’t support hardware-acceleration and 3D CSS properly (I do a lot of work with advanced animations), has inferior typography and the JavaScript engine is actually slower than Safari’s in a lot of real-world situations. Firefox, sadly, is no longer an option as Firebug tends to be buggy and sluggish (Firefox 4 is coming along rather nicely, tho!)
For cross-browser testing, I use VMware Fusion. I have 5 virtual machines installed, side-by-side, Windows XP with IE6, Windows XP with IE7, Windows 7 with IE8, Windows 7 with IE9 RC, and the latest Ubuntu. These machines are set up in a way to be able to connect to the host (OS X) operating system’s file and Apache servers.
Adobe Photoshop and Illustrator are still pretty much a given for any serious web design; with some contenders lining up to (hopefully) change this in the not too distant future.
Rapid prototyping of new products
As above, but I prefer TextMate here. For rapid prototyping I have a much more visual approach on where to add code and files, and TextMate’s project window is pretty great for this.
Hardware
There are two options, either you need to be fully mobile or not. Right now, I’m travelling a lot and basically live in two places, so I need a complete development setup on me. There are some constraints here:
The hardware must be powerful enough not to make me wait in most if not all situations
I need to be able to run multiple Virtual Machines (see Software, above), without slowdown (also, these need quite a lot of hard drive space)
Needs to run cool and quiet (I hate fans), with good battery life
Need to support all of the previously mentioned software
Screen size should be big enough to comfortably work on for extended periods of time
For cross-browser testing, you need to be able to run certain browser/OS combinations: IE6, 7, 8, 9 on Windows; Firefox on Linux, Windows, Mac; Safari on Windows, Mac; Chrome on Linux, Windows, Mac; and perhaps Opera and other exotic browsers, too.
For mobile web development, simulators or emulators for iOS, Android and webOS should be available.
Basically, what I have is the latest model maxed-out MacBook Pro 15″, with the largest possible SSD drive. I update my computer about once a year. This may seem excessive, but it’s the single most expensive tool I use, and in the overall scheme of things, it’s what I’m sitting in front of every day, for hours. If you’re not getting the very best thing that’s out there, you’re just hurting yourself in the long run.
Your health, well-being, happiness and productivity will be worth the investment.
If you’re asking yourself whether or not to get an SSD, you’re asking the wrong question. Ask yourself whether or not you want to copy 20GB in 3 minutes, if you want to boot in 10 seconds, if you want applications to start instantly, if you want the laptop to be inaudible, if you want no head crashes and if you want longer battery life. The answer is, of course you do, so get the SSD. I just use the Apple-provided 512GB SSD, but if you feel more adventurous you can get even better 3rd-party SSD drives.
One reason to not get 3rd-party stuff is Apple’s incredible support. Anywhere I travel in the world where there’s either Apple Stores or approved resellers, I can get my laptop fixed if something breaks, usually in no time at all. No other manufacturer provides service like this, so conveniently. If all the stuff that’s in the laptop was part of my original order, it’s easier for them and for me to repair it.
In both of my offices, I have external screens, and I can highly recommend the 27″ Cinema Display, because the screen size and ratio is really comfortable to work with, the picture quality is amazing, and the built-in camera, speakers and power for the laptop make it super-convenient.
I use the Apple full-size keyboard (US layout) and a Magic Mouse. I also do use the Magic Trackpad some, as I find it works very well in tools like Photoshop when I need precise control. It just feels more direct than using the mouse there.
For backing up important files I use Dropbox, just don’t be their marketing droid and get the paid plan and be happy. Plus, I’ve time machine backups in place on both sides of the Atlantic, using this 2TB external hard drive.
If I was to live in just one place, I’d probably get an iMac or a Mac Pro; and a MacBook Air for mobile use. The next gen MacBook Airs that are rumored for June might just make me do the switch to a 13″ Air from the MacBook Pro, as these should be powerful enough for my multiple-VM setup.
Oh, and I have an old-school desktop calculator as I just like pressing real buttons from time to time. And headphones. And I’m a sucker for great desk lighting.
But wait, there’s one more thing…
Software development is so much more than just computers and software and hardware.
You want to be in a place that sparks your creativity, that gets you off your lazy ass, that inspires you and where you can relax, too.
More important than any computer you can ever buy is surrounding yourself with the right people. If you’re working from an office cubicle, with all your co-workers just waiting for 5pm so they can go home, you just can’t create great software. Same goes if you’re stting at home, all by yourself, brooding over the keyboard. Not possible. We found our development nirvana in Philadelphia, at IndyHall.
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!
