The Sea of Ideas

‘How to change the world’ series: Dedication

A couple weeks ago, I started with my the first entry in this series. If you missed it, read it first to learn more about what this is all about and the first keyword, motivation. Directly followed by motivation comes dedication!

Dedication

When you are motivated, you start working on something. But to actually finish the job, you need dedication. Unfortunately, dedication and motivation are a bit hard to describe individually, but let’s try with some metaphors. Imagine drinking a bottle of cold water after a crazily hot day. The motivation in this case is the bottle. The technique you use to get it into your body (hopefully through swallowing) is the first part of the dedication – you’re making sure the motivation is converted into something that gets the job done. Unfortunately, you need to drink again in a couple hours – to think about it, and get a new bottle of water in advance, is the second part. So in other words, the two fundamental pieces of dedication consist of converting your motivation into creative energy and maintaining the motivated state.

Focus & Distraction

Focus and distraction is often considered as good and evil, but there’s a little twist to it. In general of course, you need to focus on your current task to keep being dedicated, and the worst thing that can happen then is to loose that focus again. Especially for most us (the internet generation), distraction is a real problem. The Web 2.0 gave us thousands and thousands of new opportunities to get distracted. Don’t worry though – there’s an answer to every problem.

Here’s a example list of things that will likely make you forget about your task, and how to solve them effectively:

• Twitter
  Ok, this one is simple. First off, do not twitter in the middle of a task, unless it’s specifically related to solving the task. For instance, if you have a technical question that you can’t solve, it’s perfectly fine to ask for it through twitter. Secondly, try to get twitter off your PC, and onto another device, and only use it from there (i.e. your phone). It helps you to completely (re)move the focus.
• Social communities
  Again, think about if using this particular community helps solve your specific task. If it doesn’t (Facebook for instance likely is a good candidate for wasted time – unless of course you’re developing a FB app), then simply don’t use it. If the community can actually help you getting your work done, then that’s great!
• Family (if you’re working remotely)
  It is extremely important to have a seperate office with a door that you can close. Make sure the process is the same than driving to another city – and make sure your family knows about how important it is not to get you distracted. Have them understand you’re collaborating with collegues online and via Skype, and let them contact you only if it’s really urgent.
• Instant messanging
  Set up seperate groups or accounts for work and freetime. Set your status to ‘Working’, and let your coworkers know that this is just to tell people you’re ‘in the office’.  Do not answer to IM’s from other contacts – or tell them politely that you can’t chat during business hours.
• RSS Feeds
  This one is dangerous, since chances are that most of the information is somehow important and relevant to you and your job, but not in this exact moment. That’s why I suggest to make sure to only open your newsreader once a day – after all, you wouldn’t bring a printed newspaper to the office and peek at it every half hour, would you?
• Everything else in your head
  To clear your entire head from everything else, I still highly suggest the GTD (’Getting things done’) method and sort everything you have in your head into seperate todo lists that you can access at anytime. This basically is the essence of GTD.

Positively distracted

As mentioned above, it is possible to use distration as a tool to keep motivation and dedication flowing, and I highly suggest to use at least one or two of the following examples to relax during work hours, or to get into a different thinking mode.

• Music
  Music can be very inspiring and motivating if used right. Make sure though not to listen to audio books and songs that are focussing solely on the text – since listening actively distracts you too much.
• Collegues
  Talk to your collegues every hour or two, even if you think they can’t solve your problem. Ask them what they’re working on. It’ll most likely move your brain waves into another direction, and you’ll get fresh new ideas. Also try pair programming of you’re a programmer!
• Walking around in the office
  This especially goes well with pinging collegues. Don’t just shout around in the room, but relax your muscles a bit by getting out of your chair and walking around a bit. If you think it looks too silly, go outside and grab something to drink.

Goal orientation

Of course, there are thousand more ways to keep you in the flow, but some of them I feel are especially helpful. First off, try to split up your current task in the smallest possible pieces to work them off easily and always have an immediate feeling of accomplishment. Second, try to think about the goal! If you’re paid hourly for your work and your objective is money, think about what you earned already in the next couple of hours, and how much you’ll earn in the next ones. If you work in a team, think about how much your current work will help other people finish their job, and how much they’ll like you for it. There are many individual goals if you think about it, and those two are very generic, so try to apply them.

See you soon!

The problem with Twitter

Twitter is wonderful, since it allows us to post all these tiny bits of information that can be expressed in less than 140 characters. Blog posts are usually considered if you have a lengthy topic to blog about, and you want to provide real value and detail. But what about everything inbetween? What happens with all the content and ideas that I want to share, but are too lenghty for Twitter, but too feel to short for a blog post?

It gets lost.

This blog post is a wonderful example. If I hadn’t realized the fact above, you’d never read about this – since it’s a short blog post, but too long for Twitter. The constraint that you’re setting on yourself is dangerous, and you can see it here on this blog. I love talking about what I do, and I talk to people everyday, but as a matter of fact, very few things end up here.

The key to remember is that what counts is always quality, not quantity. If you have something in your mind that you think provides real value, then please write about it. Yes, even if it’s just one character more than your tweet can hold.

See you soon with more short blog posts!

‘How to change the world’ series: Motivation

So I decided to blog more, since one fundamental ability that was failing for me was partially communication the last couple of years (other topic in this series btw!). Along that, I decided it’d be more interesting if I write about everything that’s important to me, even if that means some entries will be non technical. Hope you’ll enjoy reading anyway!

‘How to change the world‘ sounds a bit high level, but everyone with high ambitions in his personal and business life is likely to share a common vision of wanting to work on something that makes a significant impact. To start off, it could of course also be read as ‘How to change yourself to change the world‘. The first entry in this series, and the most important one of all is motivation. But let’s first explain the order of how things work.

The productivity cycle

Visualization of the productivity cycle

Being productive is something many people can’t grasp easily. There are however a couple of directions to follow, and I personally call it the productivity cycle. I’ll go into detail for each of these in subsequent blog posts.

1. Inspiration
2. Motivation (today’s topic)
3. Dedication
4. Communication
5. Recreation

Very quick explanation: Before you can even start to work on anything, you have to be inspired. When you are inspired, you have to become really motivated to start working on it, and then you need dedication to stay on focus and do the job. After a couple hours, you need a recreation phase to start over with the whole process, but before that, make sure you communicate today’s work with your boss, comrades, coworkers to maximize the impact (sometimes you can leave out inspiration and motivation on the next cycles for a couple days).

Why motivation?

People who truly internalize those fundamentals can solve more tasks in 4 hours than a ‘normal’ worker could finish in 12. Even better, the guru won’t be exhausted mentally. Obviously, it’s a long way, but if you get today’s topic right, chances are that the others will come to you automatically.

That being said, off all things, motivation is the trickiest to master. You know it yourself. Even if you really love your job, you’re only motivated randomly, and it comes and goes. And when you’re not motivated, everything seems to take longer. Wait – it doesn’t seem to take longer, it does take longer! It happens to me all the time: I have this great idea (->Inspiration), I start working on it, get distracted, and the motivation’s gone. At that point, I still enjoy the original idea, but somehow my killer energy is gone. Sounds familiar? Don’t worry, all hope is not lost my friend!

Getting motivated

1. Set a goal

   If you don’t know your goal, you’re drifting and chances are you’ll circle around with your efforts and thoughts. If you have a great inspiration and a following idea, set yourself a uber nice but realistic goal, best with an attached date. Deadlines generate pressure, but no deadlines make you idle – the first is always preferable.

2. Make sure the outcome justifies the effort

   Only very few people like to work on projects just for the sake of their own satisfaction, most likely you have a greater objective. In many cases it’s money, but it can also be reputation, fame, power or the greater good. Whatever works for you, but make sure thinking about the possible outcome makes you feel great – it’s a motivational key factor.

3. Enlightening your office enlightens your thoughts

   This one is a very practical advice. Most living beings, including humans, need light, preferably sunlight (with more ‘blue‘ in it) to stay awake and feel comfortable. Scientists have proven already the receptors that fire off when light reaches our eyes stop the production of the sleep inducing hormone melantonin. But even if you forget science, light is, like fire, one of the greatest phenomena for all cultures. It gives us security and warmth, and it often stands as a symbol for intelligence. So start using it!

4. Communicate

   I can’t stress this one enough, being the most useful resource of all. Talk to people that likely want to listen to your ideas. It could be your wife, your children, your collegues or you best friend. Meet all those people before you start a big project, and encourage them to participate in a discussion. You will receive positive and negative critism, doubt and more inspirations, but most often they’ll back you up and encourage you. Even better, it works for the inspirational part of the productivity cycle as well. Remember those times when you met a former collegue for dinner and got your brain spinning again? It’s no coincidence. Inspiration through communication will be discussed in detail when we cover the topic.

Keep being motivated

So you’re motivated now. Excellent! The next step is to keep being motivated, or how I call it in the productivity cycle, dedication. It’s the next topic I will cover, along with the first missing piece – how do you actually find out what you’d like to do (read inspiration). See you soon!

Meet the Uberplayer.

Finally I can present you one of my newer interface experiments that has grown to something quite nice in the meantime.  With the transition from small movieclips to longer and bigger full length flicks, sites like Youtube still don’t really get the idea that the movie player has to give the user space, feel a bit like a theater for a overall greater experience. What we still receive is a bloated page with thousands of comments below, tags and whatever – things the user really doesn’t need or want to see while watching. This is why I started a new experiment – building a movieplayer for the web that doesn’t suck.

Shows only what’s needed

The first idea of the interface was that everything that’s not required during movie playback will simply not be visible. This effectively means that if the video is playing, nothing else should be shown. Under that requirement, I thought it will also need at least movie information somewhere, and a search interface.

The Uberplayer has slide-in elements for controlling the video. Every function or visibility can be controlled through either the mouse or the keyboard. At initialization and pause, all controls are automatically shown, since you’re not focussing on the video. During video playback, move your mouse towards the bottom and the search slides in – move it to the top and you’ll see current video information and the search bar.

Coverflow

I can also proudly state that this is the first time I actually integrated my experimental Coverflow plugin into an actual application. After you entered a search term and pressed return, the bottom view slides in and presents the search result thumbnails in a really nice flowing coverflow like view if you are using a webkit enabled browser. If not, don’t worry – the fallback looks nice nontheless! Additionally, the click-through rate is minimized by switching coverflow states on mouse over – clicking opens the new movie.

Integration with Youtube

I choose to integrate with Youtube because it allows me to do searches to their API’s through their JSON API. What does that mean? It means that the Uberplayer is completely backendless, therefore doesn’t need any server software / logic. It’s all JavaScript, baby!

The second reason was that Youtube has a nice chromeless player, which worked really well for my kind of interface. The only drawback is that the chromless player doesn’t support HD playback at this point, but I hope they’ll give us that feature eventually.

Feature overview

To get an idea, here’s a quick walk through all features that are probably worth mentioning and explain how the player works.

• Full-screen playback at all times (toggle full screen mode on your browser for a better experience)
• Fluid slide-in interface (move your mouse towards the bottom or top to blend in controls)
• Click on the video to toggle pause state and blend in all controls
• Rich keyboard interaction
  • ‘down‘ toggles the search results view
  • ‘up‘ toggles movie information and search bar
  • ‘space‘ toggles pause state
  • ‘s‘ focusses search bar and let’s you type in a new search (’escape’ cancels)
  • ‘left‘,’right‘ let’s you navivate through search results when the search results view is active
  • ‘return‘ opens a new movie when the search results view is active
• Automatically generates hash urls that you can bookmark or send to someone – they will not only open the movie, but also the attached search results
• Completely backendless through Youtube’s JSON API

What’s left to do

This is a very early preview release, so please be merciful. Some things I would like to do for the next version is a playlist manager (sliding in from the left), and if I only could get access to a chromeless Vimeo player, that would totally kick ass.

Anyway, check it out, and leave a comment!

The usability series: Responsiveness

Usability is something I consider a major part of my professional life. I even tend to think of it as the key to any good website or application. If it’s unusable, it doesn’t help if it can spit out flying dragons. That’s why rather than doing one summary post on the fundamentals, I decided to discuss one usability pattern at a time and dig into it really deep. As first entry in this series, I decided to go with a key fundamental often forgotten even by the pro’s – responsiveness.

What’s it all about?

For real people to actually use your application in daily life, it’s not enough to bundle it with a nice UI and a bunch of cool features, it has to be really responsive as well. The reasoning is simple – people hate to wait. People hate to wait in
lines (except the British, hehe), they hate to wait for their salary, they hate to wait for the weekend to arrive and they
hate to wait for the next season of their beloved TV series. Ok, sometimes the anger can transform into excitement (and vica versa) – but raise your hopes too much, this seldom happens in the case of web apps. Yes, people hate to wait after the click.

Responsiveness is often described by how quickly an application reacts upon a user triggered action. Basically everything we do in the web is interaction – the website or application waits for an user action and then replies. There has been already a lot of research on today’s topic, concluding for instance that people already get the feeling they’re waiting if the result doesn’t come up in less than 0.5 seconds. But the answer to the problem is the tricky bit.

The obvious solution: Performance optimizations

Many of todays apps and websites are Ajax driven, to the extend that a user initiated action triggers a request to the server. This is why the most obvious solution coming to mind is to improve the time each request takes. Be careful though – this is also exactly why responsiveness is so often forgotten in the frontend planning. People tend to think of it as something non-visual, therefore they let the backend guys do the work.

Now after you speeded up the requests and your backend, you have to take the frontend really serious. The JavaScript powering your website is often the most visible bottleneck because it’s directly happening on the client, even before any backend request can happen. And it’s not only JavaScript – heavy usage of CSS Frameworks (especially resets) for instance can horribly slow down any application as well. Remember – if your frontend performs bad, the backend guys don’t even have a chance to make up for it. Of course I could go into detail how to actually optimize your code, but that’s content for another blog post.

Transparency and disguise

In the last couple years I noticed a general pattern when designing a responsive experience. There are essentially two ways to tackle it: The first is total transparency – the user should never be clueless, and if the application is in a loading state, tell it to your user so he doesn’t get annoyed too much. The second, and to me the one with almost unlimited potential is illusion.

Fixing the experience without fixing the implementation

Something only very few people I met realized is that an application can be improved even without fixing the implementation. There is really only one thing that matters to the user – how the application feels. Yes, let me repeat that: Your implementation doesn’t have to be responsive – it just has to feel that way.

Apple – masters of illusion

The best way to describe what I mean by making your application *feel* responsive is through a perfect example. It’s the best illusion of responsiveness I’ve ever seen so far. I’m talking about the iPhone.

The iPhone runs a very sophisticated operating system based on Mac OS X, with thousands of API’s for developers to use. Combined with the fact that the iPhone isn’t running particularly fast hardware (more than a standard cellphone, but way less than any netbook), simple performance optimizations could only get you so far here, and this is is where the magic comes in.

Almost every interaction on the iPhone uses an animation to transition from one state to another. You’ll see animations when you launch or quit applications, when you slide through screens and on many other instances, sometimes so tiny you don’t realize it. Since they’re very well integrated into the general flow of the interaction, they not only excite users but serve as visual cue helpers that let the user ‘grasp’ what’s happening. But the key is what happens during the animation: Any application you launch or close on the iPhone needs time to initialize and to de-initialize. You guessed it already: It’s all done when the user is distracted by a beautiful zoom effect. How cool is that?

As a summary: At the cost of slowing down the operating system in technical terms (every animation takes a fixed amount of time), Apple improved the whole user experience and made the iPhone feel extremely responsive.

Loading indicators

As a conclusion to the illusion technique, in 90% of all cases a loading indicator is evil. Why on earth would you want to highlight the slow parts of your application? That being said, a loading indicator is always better than a frozen state and a clueless user. As a general rule, only add a loading indicator to your application if all other improvements fail. For instance, there are situations where you absolutely can’t predict when the result will arrive. Imagine a multiplayer game with two players, and you’re waiting for the other player to select his character. In this case you have to notify the user that the game is waiting for a response.

See you next time!

Defer document.write

I was asked today if there was a way to somehow proxy or defer document.write calls. Many advertising solutions still use this outdated way of writing banners into a website, and sometimes it would be handy just to load all the page first, and then all the advertising, to drastically improve the user experience.

I gave it some thought, and after a bit of experimenting, I actually found a solution for this problem many people tried to solve before. Let’s walk through!

1. Overwriting document.write

Yes – this sounds dirty, but you can in fact just overwrite document.write and it works across all popular browsers. Here’s my first round:

var _write = document.write;
	document.write = function(t) {
	return _write(t);
}

This simple proxy pattern, directly forwarding the call to the original method, only worked in Internet Explorer though. To whatever reason it returns the following exception in Firefox: “Illegal operation on WrappedNative prototype object”. After a bit of more experimenting, I found that document.write in FF has a ‘call’ method attached that I could use to run the native write in the document scope. So here’s the slightly modified version using the excellent IE check recently posted on Ajaxian (we can’t use the call method in IE, it doesn’t exist on document.write):

var _write = document.write;
	document.write = function(t) {
	return 'v'=='v' ? _write(t) : _write.call(document, t);
}

2. Deferring document.write, or how to keep the context

Nice, we now have a cross-browser proxy function that delegates to the original function. But that doesn’t help much – after all, we want to delay all the writes until my page is fully loaded.

This one was an expecially tricky problem to solve, because we couldn’t just save the content to an Array or something, then echo it to the page at a later point. The reason is that we couldn’t save the context. document.write is a unique function, because it executes in the actual context, meaning on the actual line the call happens. This information, unfortunately, cannot be retrieved in any way. The obvious answer was that we have to write it to the document immediately to not loose the context information. However, we still don’t have to show it!

The final solution I came up with therefore enclosures the original write into a HTML comment block and then writes it out immediately. Of course, when the time comes, we have to resolve that comment block again through a regular expression. Here’s how our modified function looks:

var _write = document.write;
document.write = function(t) {
	t = '<!--##DEFER'+t+'DEFER##-->';
	return 'v'=='v' ? _write(t) : _write.call(document, t);
}

3. The final implementation

(function() {
	var _write = document.write;
	document.write = function(t) {
		t = '<!--##DEFER'+t+'DEFER##-->';
		return 'v'=='v' ? _write(t) : _write.call(document, t);
	}
})();

function resolve() {
	document.body.innerHTML = document.body.innerHTML.replace(/<!--##DEFER(.+)DEFER##-->/g, '$1');
}

I’ve additionally added a closure around the document.write proxy to save a global variable (_write is private this way), and also attached a function (I know I know, it’s lazy) called ‘resolve’ (rename it to whatever you want), that at a later point grabs the innerHTML of the body and resolves all the created comment blocks into their original content, at the right line.

Update: The innerHTML way of simply replacing the body is really lazy and should only be used for testing purposes. In a realistic setup, you mostly know where the write’s happen, and it will be much better to loop through them (i.e. using childNodes) in the DOM and filtering out comment nodes this way.

Enjoy!

The technique behind the jQuery UI demos

I’ve decided to start blogging more about the actual things I’m working on everyday, and in this series, I want to first talk about the updated and improved demos of jQuery UI. The first important thing to understand is that the demos that come with the development package, and that you can browse from the trunk, and the demos you see at the jQuery UI website are the same.

The standalone demos

To me, the new demos are truly outstanding. Let’s talk a bit about why. If you download the development package, or browse the trunk, you’ll see a demos/ folder, with sub directories for every individual plugin. If you open one of these sub-directories, you’ll see a index.html, a default.html and named individual demos, i.e. containment.html. Each of these demos:

1. Is a standalone demo
2. Includes all the files it needs (JavaScript / Theming )
3. Displays a description of the current demo at the bottom

This means that those demos are excellent for learning how to do something – they come completely uncluttered, so you can copy and paste JavaScript and markup easily. Additionally, the default.html shows you the most simple state of the plugin (usually without any provided options), and the index.html provides a easy named listing to all these sub demos. Even better, if you open demos/index.html, you’ll see a page that looks very similar to the website demos section, but works like this:

1. If you click on a plugin in the left hand navigation, i.e. ‘draggable’,
2. it fetches the content of demos/draggable/index.html using Ajax and displays it as right hand sub navigation
3. if you click on one of those links, the created iframe in the middle updates itself

The website demos

For the website demos, it got a bit more sophisticated. We removed the beautiful but unusable demo carousel, and created a unified demo section that automatically pulls the standalone demo files from the repository, therefore it’s never out of sync. However, the simple iframe approach couldn’t be used because of the incredible amount of server requests made that way. Here’s the technique behind it:

1. include the theme and jQuery UI once
2. include demos/index.html using PHP, filter out any script/style tags and the header
3. now using JavaScript, rewrite all links to plugins to point to /demos/plugin

This shows you the index file. Perfect. What happens if you click on a link in the left hand navigation now?

1. A server-side rewrite rule resolves demos/draggable to demos/?load=draggable
2. in PHP:
   1. we export the ‘load’ information to Smarty, so we can access it in the template
   2. we then retrieve default.html and display it in a div frame, but filter out any script/style tags and header
   3. and we do the same for draggable/index.html, to show the right hand sub navigation
3. in JavaScript:
   1. we loop through all demo links in the right hand nav and define click events,so the link isn’t triggered, but instead, a hash is set (for easy bookmarking) and
   2. the selected file is pulled in via ajax – again, we filter out any script/style tags with src attributes, and the header/footer, and update the frame div
   3. at last, we pull out the description at bottom of every file, and display it below the ‘frame’

So, with a little more work involved, we not only made the demos extremely responsive and fast, but also reduced the requests to the server dramatically. Every time you click on a demo, only one single request is made, to fetch the actual html page.

Pretty cool eh? Enjoy!

Site updates

I finally found the time to refresh many little things concerning this blog, making the overall experience much better.

• I got away from the almost too minimalistic theme, while still keeping the nice graphics of myself presenting at both sides.
• Wordpress now runs from SVN (so, 2.8 bleeding edge now, and yeah, it uses jQuery UI!)
• I updated the RSS 2 feed to use FeedBurner, so I know about who’s actually reading my feeds.
• I integrated a lifestream consisting mostly of Twitter updates into the sidebar.
• I removed old and added new projects to the “Projects” Section.
• I added convenient links to the sidebar to connect via LinkedIn / Twitter or SlideShare.
• And finally, I re-introduced the laboratory, a link collection pointing to experimental stuff I made.

Enjoy!

The Library Detector

I’m happy to announce my first Firefox extension called Library Detector. Similar to a greasemonkey script I published to the jQuery mailing lists a couple months ago that showed if jQuery is running (which proved to be pretty useful to extend the Sites using jQuery page), the library detector is able to detect multiple libraries, currently including the following:

• jQuery
• jQuery UI
• Dojo
• Prototype
• Scriptaculous
• MooTools
• Spry
• YUI
• Qooxdoo

If one of these is found on the current page, it displays their favicon in the statusbar, and if you hover it, a tooltip will show with additional information (In most cases the version of the library, in the case of jQuery UI the plugins being used, and for Dojo if Dijit is being used).

Of course, there’s one catch in some libraries: If the developer renamed the scope of the Library (i.e. window.dojo) to something entirely different, the test fails (however, usually that’s not the case).

So, if you want to know what websites use your favorite library (or which do not), go ahead and grab the Library Detector from its download page.

Additionally, I’d love to see feedback, and if you think there’s a library missing, or if you have an idea how to improve a test / show additional information, please leave me a comment.

Cheers!

Taking Usability to another level

So I love that my main interest is finally a hot topic, and recently, Aza Raskin continued doing a great job evangelizing Usability in web and application design, making it more popular than ever.

However, our efforts to usability are still limited to one single angle: The actual end user experience. While this is unquestionably the most important part, we can’t ignore another: Usability for developers. Since tackling the whole world of development is too much for one blog post, we’ll only investigate web development here.

Syntax & API

Why are certain programming languages more popular than others? Usually not because they’re faster – not even because the input or output is smaller. A single argument counts most: The easiest understandable, the one with the greatest learning curve wins.

Think about it – while binary approaches to languages and data formats are much more efficient, it’s a pain to work with. Take JavaScript – due to it’s flexible and dynamically typed nature, it’s not always the most efficient way to code – however, it’s the most popular.

Let’s think about a higher abstraction: JavaScript libraries. jQuery, for once, is highly popular amongst web developers because the API has a natural, language-oriented aspect. It’s almost neurologic – by looking at a certain block of jQuery code, you start to almost guess what the other functions could be named like.

Now, as soon as you have a good concept of the API using real-world language, easy to understand by simply looking at it, there needs to be a next step: Make the learning curve as small as possible. This can be done by providing a complete and solid documentation, demonstration of every feature, walkthrough tutorials and ways to communicate within the community (forums, mailing lists).

So, in other words, for a web programming language or toolkit/framework to be developer friendly, the following arguments (at the very least) need to apply:

• Real-world language when naming API calls (do, write, make, etc)
• A high learning curve, achieved by
  • Good documentation
  • Good demonstration
  • Good communities around the project (forums, mailing lists, etc)
  • A strict API design with no or little exceptions

Of course there’s more to it, but this should give you a good start (by the way, this works for most development, not only web development).

Tools

The second very important field where usability needs to be improved are the actual tools web developers use to create applications and websites. It’s no wonder Dreamweaver is ridiculously successful – it’s not necessarily something that outputs great results (although it can, if you’re disciplined!), but it’s simply so damn easy to use.

Web developers usually have to use tools for the following tasks, and the sub lists tell you how these need to be  improved:

• Writing the source code (IDE’s, Editors)
  • Better versioning integration
  • Helpers for refactoring
  • Integration with the browser engine
• Creating and designing the frontend (WYSIWYG Editors)
  • Integration with the browser engine, instead of faulty preview modes (Dreamweaver CS4 has that, but they didn’t remove the preview mode yet)
  • Smart control panels that utilize a framework’s documentation to create fields / controls
  • Tight framework integration
  • Integration with actual design applications (i.e a bridge to Photoshop from Dreamweaver, allowing “live slices” to be be embedded into the Dreamweaver source, that update automatically as soon as I change the overall image in Photoshop)
• Testing (End-platform, various browsers, Selenium [automated tests])
  • Semi-automated testing frameworks that run in a browser and serve a click-through for testers and mainly create experience surveys
  • Automated user tests, creating a ‘fake’ user that executes clicks and drags on actual websites and applications
• Debugging (often integrated in IDE’s, our in the actual platform, i.e. Browsers)
  • One tool that debugs across various browsers, instead of great tools for each browser, i.e. Firebug, Dragonfly, the IE8 Debugger.

While there are some solutions that are clean, well designed and integrated for application development (see iPhone development), web developers still suffer. Especially testing and debugging is still a pain in the arse, and needs to be improved.

Conclusion

In the end, I think there is a lot that needs to be done to make the actual developers happy before those can make the end users happy. A developer in an inspiring environment can create things you wouldn’t even imagine.

On the jQuery UI side of things for instance, there’s still a lot that needs to be done, but what’s really great is that we realized that our development cycle sucked. We have started to make developer tasks as easy as possible – there’s a new jquery.simulate plugin that triggers actual clicks and drags to ease testing, there are new commit hooks that will clean trailing whitespaces and there will be a project tool in the future that aids in documentation, testing and API design. We were also proud to be the first framework to announce web widgets in Dreamweaver.

So if you’re involved into a product that helps developers, think about how usable it is (instead of all it’s cool features), and help me and my comrades to make developer lifes easier, so they can create the great products we all love.