vienna.js Vienna JavaScript User Group

User Groups are fun! And a JavaScript group was really missing in Vienna! So we founded one. 🙂 Everyone is welcome, just bring enthusiasm and open minds (and laptops!).

The first meetup will be on February 10, 2010, at Metalab.

If you like to join us for our first meetup, please RSVP!

We’re looking for a presentation of something awesome & JavaScripty, so any volunteers please step forward for fame and glory (please mail me at thomas@fesch.at!).

More information and updates on http://viennajs.org/ and on Twitter @viennajs.

JavaScript Master Class Vienna, March 2010

Amy Hoy and I proudly present our fourth JavaScript Master Class, this time it’s where we live, in beautiful Vienna, Austria!

Do you…

• know all the ins and outs of JavaScript’s object model by heart?
• eat prototypes (‘little p’) for breakfast?
• use closures and anonymous functions—but only in a memory-safe way?
• secure internal code from API users, when necessary? (without obfuscation?)
• curry functions?
• practice safe namespacing?
• dream about DOM reflow?
• crawl through the DOM tree with practiced ease?
• bubble or capture events from scratch—without peeking at the manual?
• architect your large projects like a pro?
• manage your code with an iron fist?
• build your deployment process with tools other than FTP?
• test your JavaScript with a unit testing framework?

Don’t worry if you don’t—yet. You will after you put yourself through our JavaScript Master Class, whether you use Prototype, jQuery, Mootools, or just your own naked cleverness.

The day is half about JavaScript the language, with topics ranging from functional programming patterns, closures and anonymous functions, object-orientation and prototypes all the way to building domain-specific languages and APIs in JavaScript; and half about the ecosystem, encompassing code organization, getting deployment right, creating great documentation, and having proper unit testing in place.

Our full-day class is limited to 20 seats, so you get to to pick Amy and my brains to the fullest (and afterwards we’ll socialize over a beer or two!).

Head over to http://javascriptmasterclass.com/ to learn more and register!

PS, we’re expecting to sell out! We’d hate to hear from you that you wanted to come but didn’t get a seat in time, so if you want to attend, please don’t hesitate! Register early!

Web development’s next decade

Goodbye 2000’s, hello 2010’s. What does the next decade on the web have in store for us?

Let’s start by looking at what happened in the last decade.

In the Year 2000…

At the beginning of the year 2000 (shiver!), the current version of Internet Explorer was 5.0. (Though people were largely still using version 4.) IE’s market share was approximately 75% for all versions, slightly more than today.

Netscape had a market share of about 20%, thanks to a rapid decline following its last release (version 4.08 in November, 1998).

There were no alternatives in sight.

Flash was at version 4 (and didn’t get video support until mid-2002!), and JavaScript was at 1.3 (1.5 was released later in 2000).

Front-end web development was a horrible, evil mess. There were almost no debugging tools available for HTML or CSS. Forget about debugging JavaScript. (Though browsers were already pretty powerful, that power was largely wasted on tickers and animated cursors).

Many people took ActiveX seriously.

Snap back to the present—and the future

Here are some predictions of how I think the Web and development tools will keep progressing through the next decade:

First of all, most web sites/apps will suck most of the time. Still. This is not a problem technology can solve, only devotion and effort on the behalf of people who make web sites.

Furthermore, we’ll still see lots of compatibility problems. But nothing like what we have today, much less 5 years ago.

Browser Marketshare

And that’s despite the fact that Internet Explorer’s market share will continue to drop, to maybe 20-40% by the end of the decade. This will be caused largely by a shift to more specialized browsing devices (mobile phones, tablets), with IE used mainly for in-house legacy “web” business applications.

Conversely, Firefox will gain some more market share, but it will eventually yield to WebKit-based browsers, with many more WebKit-based browsers from various vendors being released. (You can see this trend now with Apple’s Safari, Google Chrome, Nokia’s Starlight project, and more.)

Interactive Environments & Developer Tools

JavaScript, CSS animations, and related graphics & I/O systems will take over. (Graphics will include Canvas, WebGL & SVG, but possibly also things we don’t foresee yet.)

We’ll see IDEs for development with JavaScript-based Flash-like graphics engines, that will use Canvas and WebGL, and SVG (Microsoft just announced it joined the SVG working group). Plus, these IDEs will also target non-browsers, by compiling the results into a browser runtime with deployment to various mobile platforms.

There will also be a dramatic increase of hybridized local/web software, such as Single Serving Browsers (SSBs), and “real” desktop-land software that syncs to, and interacts with, cloud services.

Browsers will eventually stop supporting Flash (at least out of the box), but Flash will stay as a development platform for mobile devices.

Mobile Devices

On the mobile side of things, I fully expect the landscape to be utterly different from now. The iPhone is just 3 years old now and changed pretty much everything in the “smartphone” space, and who knows what Tablet goodness 2010 will bring.

Language Dominance

And of course, JavaScript will continue to be the world’s #1 programming language, being supported (exclusively!) by anything that runs/is based on a web browser runtimes.

We’ll also see dramatically increasing use of server-side JavaScript technologies as well.

Translation: If you aren’t already comfortable with JavaScript as a language, you better learn it now.

Computers

I’m pretty certain that the basic form factor of computers that most people use today (laptops) won’t change that much (my 2002 Titanium PowerBook was not that much different from my current-generation MacBook Pro, except for speed/storage increase).

It is quite possible that desktop computers will experience a renaissance, with people switching to a desktop machine at home/work and tablets to lug around.

Disclaimer

And yeah, I’m probably horribly wrong. 🙂

(Big thanks to Amy for the input and some added sections on this article!)

Extreme JavaScript Performance video

The nice folks from JSConf.eu have posted more and more videos of the conference talks, and here’s my talk on Extreme JavaScript performance!
For reference, here are the talk slides, if you want to see an enlarged version/download them:

Finally, here’s a PDF (750k) of the slides, if you want to read it offline and/or in dead tree form, and there’s a Github Gist of the example code, so you can run it yourself.

Wish you have a happy holiday season & and write lots of fast JavaScript code in 2010! 🙂

Need JavaScript-fu? JavaScript Masterclass Philadelphia in January 2010

Need some JavaScript-fu? Tired of being stuck with not knowing what those magic framework functions do? Want to tweak your code for ultimate performance? Or a mad programming skillz boost for the new Year?

Come visit our full-day JavaScript Masterclass in Philadelphia, on Monday, January 25, 2010, at National Mechanics.

Amy Hoy, teacher extraordinaire and yours truly will show you how to really make JavaScript your bi, ah, strive towards JavaScript excellence.

There are just 20 seats (we like small classes where everyone gets to interact with us!), and we will sell out! We’d hate to hear from your that you wanted to attend but couldn’t grab a seat! 🙂

The course is framework-agnostic, so whether you use and love jQuery, Prototype, Scriptaculous, dojo, YUI or bare-bones JavaScript, you’ll walk away enthused with JavaScript knowledge, and can directly use it in your projects!

Book now and take advantage of our early bird rate of just $349. For that, you’ll get to participate in our full-day workshop plus a free copy of our JavaScript performance ebook “JavaScript Performance Rocks!” (if you already have it, you can gift it to someone else!). Plus we also excel in socializing, so yes, you can have beers with us! 🙂

Simplest Prototype & scripty Slideshow

Here’s a more extended version of my comment on Jonathan Snook’s post on the simplest jQuery Slideshow (good article!).

So here’s my version of the simplest slideshow (done in Prototype/script.aculo.us 1.8), compare to Jonathan’s version in jQuery.

I’ve optimized what’s going on by only fading on element at a time (versus a more processor-hungry crossfade).

The code:

setInterval(function(){
  var imgs = $$('.fadein img'), 
   visible = imgs.findAll(function(img){ return img.visible(); });
  if(visible.length>1) visible.last().fade({ duration: .3 });
    else imgs.last().appear({ duration: .3, 
      afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show');  } });
}, 3000);

I don’t really like either my Prototype/scriptaculous nor the jQuery version (which seems too magic for my taste, plus it does two animations at the same time). The main issue with my code is that the CSS has to be reset after a cycle is complete, and this ends up to be quite complicated.

I guess it’s food for thought. 🙂

Sneak preview on scripty2 UI controls

So how’s scripty2 progressing? To give you some more insight than just “Very well, thank you”, here’s a status update.

Next to the big chunks for the effects engine which has been stable for quite a while now, and the support for multi-touch input (hat tip to Nokia), several additions are queued up, the most important being the “UI behaviours”/”controls” part.

A big Thank You! to Andrew Dupont for adding the first batch of controls goodness to scripty2, including buttons, dialogs, overlays, sliders, autocompleters, and yes, an accordion.

Try the scripty2 UI demos! (alpha version, so there are some kinks!)

Those controls are written with the super-nice Prototype class system and custom events, so they’re super-tweakable and make it a snap to create extensions and customized versions. More controls are in the works, and there should be a beta release this year (or grab the code from github).

They support full keyboard navigation and provide accessibility hooks through WAI-ARIA.

The best thing is that they’re compatible with Themeroller (from jQuery UI) themes! So you can just reuse/tweak existing themes very easily, plus scripty2 comes with a special scriptaculous theme, thanks to Samo Korošec.

Bonus– here are two new sightings of scripty2 in the wild:

• derStandard.at Express, experimental site by leading austrian newspaper Der Standard
• Ford Fusion 41, made by Amy and me

Enjoy, and hope you’ll build something cool with scripty2, too!

6 easy things you can do to improve your JavaScript runtime performance

Here are the slides from my “Extreme JavaScript Performance” talk that I gave at JSConf.eu on November 7 in Berlin.

I’m talking about 6 easy things you can do to improve your JavaScript runtime performance, ranging from simple things (function inlining) to some quite surprising findings on how JavaScript engines deal with loops.

There’s benchmarks for the four most common JavaScript engines, SpiderMonkey (Firefox 3.5), JavaScriptCore (Safari 4), JScript (Internet Explorer 8) and V8 (Google Chrome).

Be cautious however! Only do these optimizations if you have to, and, please, for the love of all the JavaScript gods, do not, ever, optimize prematurely. 🙂

Finally, here’s a PDF (750k) of the slides, if you want to read it offline and/or in dead tree form, and there’s a Github Gist of the example code, so you can run it yourself.

I welcome any comments, and findings you might have had with optimizing your JavaScript code.

A 50 Lines-of-Code JavaScript Animation Framework: Say Hello to Émile

At my talk at Fronteers, I introduced Émile, a JavaScript animation framework, that’s framework-agnostic, and just takes up about 50 lines of code. With Gzipping, and minification, it’s well under 1k in size. Consider it experimental, but most things you’d ever need are supported, supporting IE6 and up, and modern web browsers (Firefox, Safari, Chrome), of course.

Here’s the source, MIT-licensed and waiting for your patches and comments!

And here’s a Presentation (4MB PDF) about the details of the implementation, also a good starting point if you want to write your own animation framework. Enjoy!

Last chance for a seat at JavaScript Masterclass Berlin!

Just 6 days now until our second JavaScript Masterclass in Berlin, Germany! We’ve only two seats left so act fast if you’d like to join on in on a day of advanced JavaScript.

As a special treat for my readers, use coupon code readerluv for €30 off the regular price!

Head over to javascriptmasterclass.com to grab your ticket! 🙂