April 29, 2008

The seven rules of unobtrusive JavaScript

Christian Decker wrote this terribly early in the morning:
Christian Heilmann has written a great article about why Unobtrusive JavaScript is the way to go and what the best practices are. I strongly recommend that you head over and read it through. For me the most important points are:
  • You don’t expect JavaScript to be available but make it a nice-to-have rather than a dependency: definitely true as JavaScript should be an enhancement rather than the show itself.
  • You expect other scripts to try to interfere with your functionality and keep the scope of your scripts as secure as possible: true, that’s one of my main criticisms about JavaScript. Not having clean separation seems a big step backwards in evolution.
  • Traversing the DOM is expensive and can be slow, that is why it is a good idea to leave it to a technology that is already in use in browsers. I like to spray hooks on the finished HTML when I need to have simple ways to access DOM-elements. Also I really like caching elements that I searched earlier in variables so I don’t have to search for them again.
  • Using CSS to do manipulation on many elements at once without having to search for the elements (section 3): this is really a great idea, new to me, but I’m sure it’ll come in handy.
  • A really important part of unobtrusive JavaScript is to understand how browsers work (and especially how browsers fail) and what users expect to happen. It is easy to go overboard with JavaScript and create a completely different interface with it. Drag and Drop interfaces, collapsible sections, scrollbars and sliders can all be created with JavaScript, but there is much more to those than just the technical implementation. Agreed! Don’t overdo it, or the users will find it hard to use.
  • The other thing to remember is that you can stop events from being reported to parent elements and you can override the default action HTML elements like links have. However, sometimes this is not a good idea, as browsers apply them for a reason. An example would be links pointing to in-page targets. Allowing for them to be followed makes sure that users can bookmark the state of your script. Oh how many times have I seen <a href=”#” onclick=”…”> to respond to an event. Don’t do it, please.
  • Wrapping functionality in objects provides namespaces and isolation of your code. Better yet: you can define public interfaces! (section 6)
So thank, you very much, Christian, for this article, let’s hope many developers start applying your tips, because they make the world a better place. I know I will :)

*
No Comments

September 4, 2007

Ajax, CSS, DOM and JS-related resources

Christian Decker wrote this at around evening time:
Ajaxian today has a feature about the most useful information sources on Ajax, CSS, DOM and JavaScript (or as many will know them: the basis on which the whole Web 2.0 is built :) ), so I’ve skimmed through my del.icio.us account looking for stuff to add and here are my favorites: So that’s it from my side, if you have more resources you’d like to share with the rest of the world post them on the original article.
70-442, certification exams are valuable in providing knowledge and skills of designing and optimizing data access with the usage of Microsoft SQL Server 2005. 642-652, Wide Area Application Services for Field Engineers exam (WAASFE) is very beneficial for IT engineers and technicians to promote their skills. 642-445 certification exams are also associated with Cisco IP Communications Support Specialist certifications to promote IP telephony networking system. 642-565 cisco exams are designed to assess the abilities of candidates how to tackle cisco security products with the use of latest technology. 642-176 certification exams enable the candidates to get job successfully as SMB engineer. 640-816 stands for Interconnecting Cisco Networking Devices Part 2 (ICND2), having direct association with Cisco Certified Network certification exams. 156-310 exams are designed for the assessment of professional and technical abilities of the candidates.

*
* 1 Comment

August 23, 2007

9 must have Firefox Extensions

Christian Decker wrote this in the late afternoon:

Firefox is certainly one of the best browsers to browse the Web, but out of factory it is lacking some features I really like, luckily there are a variety of extensions that provide just that functionality. These are the extensions no one should miss:

  • AdBlock PlusAdBlock Plus:Ever been annoyed by all those ads and banners on the internet that often take longer to download than everything else on the page? Install Adblock Plus now and get rid of them. After installing it you will be asked which blocklist to download, after which you will see far less advertisements.
  • All-in-one-Sidebar: we all hate popups, they are annoying, catch our attention right when we were reading something and did I mention that they are annoying? But what about the browsers own popups, when a download starts, to manage the bookmarks, extensions, themes and the like? We want to see them but we don’t want them to jump in our face. This is what All-in-one sidebar does, it puts all the stuff that would usually require an extra window in the sidebar.
  • Download StatusbarDownload Statusbar: as mentioned above we don’t want download popups all over our desktop, yet we want to see when a download finishes. Download Statusbar puts all the needed information (and even more) into the status bar, where it is visible, but not annoying.
  • FirebugFirebug: Firebug is probrably the best extension for Web developers ever. It is unobtrusive yet powerfull, with it’s DOM-Inspector, HTML-Inspector, Javascript Console, JavaScript debugger, it even allows you to tweak the CSS on the fly and for those worried about the last millisecond in loading times it has a network monitor that tells you exactly when an element started loading, how long it took and how big it was. I don’t know how I survived without Firebug for so long.
  • Fission (Firefox Extension)Fission: actually just a visual gadget that displays the loadstatus in the address bar instead of the statusbar on the bottom. I really love this unobtrusive little piece that was borrowed from Safari. With this little png it looks even more like Safari
  • Gmail Manager: I love GMail, this is no secret, but I’m not one of those that keep a browser tab open for it, yet I want to know immediately when new messages have arrived. GMail Manager allows you to monitor multiple accounts in the statusbar, when hovering over the icon it even shows you the subjects and a short extract of the mails. This is an absolute must have for all GMail lovers!
  • Google Browser Sync:Using Firefox on different machines I’d really like to have the passwords, bookmarks and sessions across all of my Browsers, and right then Google Browser Sync comes along: Google Browser Sync for Firefox is an extension that continuously synchronizes your browser settings – including bookmarks, history, persistent cookies, and saved passwords – across your computers. It also allows you to restore open tabs and windows across different machines and browser sessions.
  • GreasemonkeyGreasemonkey: Sometimes single sites don’t have all the features that would be nice to have and that’s about it what Greasemonkey does. Greasemonkey allows you to customize the way a webpage displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of poular sites, are already available at http://userscripts.org. You can write your own scripts, too. Mark Pilgrim’s definitive Greasemonkey guide, diveintogreasemonkey.org will show you how.
  • Secure Login: A login extension similar to Opera’s Wand login. It uses the built-in password manager, but deactivates the prefilling of login forms. Instead, you are now able to login with one click or a keyboard shortcut (ALT+N - changeable via settings). Just add the Secure Login toolbar button to your toolbar, or use the provided statusbar icon.

With these FireFox should get even more usefull, becoming a true allrounder and great productivity tool.
What about you? What are your favorite extensions?

*
* 1 Comment

October 25, 2006

Dojo 0.4 has been released

Christian Decker wrote this mid-afternoon:
The Developers of the Dojo Toolkit have realeased their newest version 0.4. This might not yet be exciting enough, but they added a lot of new features, fixed many (really many) bugs. And there is another candy for Dojo Developers: the first release of the documentation tool.

Core

  • GFX library - graphics library (see demos and tests)
  • New charting engine, details To Be Announced.
  • JS Linker - essentially done as alpha release, won’t be integrated into dojo build process for 0.4 release
  • I18N Infrastructure
  • event normalization of keyboard events (new “onKey” event)
  • html-refactor
  • onDomLoad - dojo is initialized as soon as DOM finishes loading w/out waiting for images etc. to finish downloading
  • jum - Various enhancements being made in combination with new unit test runtime tool using rhino api directly. Unit tests can now be written and used on projects outside dojo. Semantics for grouping/setup/teardown/etc still being designed/thought about.
  • major dojo.lfx improvements. Wipe and fade animations are now chain()-able among other improvements.
  • dojo.html.metrics - scrollbar width measurement, current font size measurements, the ability to get how much of an HTML fragment will fit on a single line in a container, and to populate a container node with as much of an HTML fragment as will fit into it. Also included is a way of measuring the dimensions of a node if one was to populate it with a specific HTML fragment.
  • dojo.debug.console - improved debugging with Firebug on FF/Safari, with fallback to Opera error console, if available.
  • HtmlDragCopy? - copy an element instead of moving it from source to target, with ability to specify if a copy can be copied again.
  • dojo.debug.console - console logger for Firefox (using Firebug), Safari and Opera. Deprecated dojo.debug.Firebug.
  • API documentation -inline code docmentation) added to many files.

Widget Infrastructure

  • Namespace support and refactoring of how to declare widgets, and automatic widget/manifest loading feature
  • high-contrast mode infrastructure, and support for a few widgets (checkbox and tab container complete)
  • subwidgets in templates
  • widget-refactor - changing everything to widget/ directory, etc.

Widgets

The roadmap has also been updated, showing 0.4.1, 0.5 and beyond.

*
No Comments

October 4, 2006

Dynamic Graphics in the Browser

Christian Decker wrote this in the wee hours:
Mahemoff has just pubblished an article over at Software As She’s Developed comparing the different ways of client side rendering images:
The ability to create rich graphics on the fly is one of the critical gaps in Ajax. There are indeed techniques to do it, albeit far from perfect, and some are do-able today if you take a pragmatic view of things and keep graceful degradation in mind.

Here I list all the techniques I can think of to create graphics and images dynamically when you’re creating an Ajax/DHTML/Javascript web app, with varying degrees of portability and usability. Starting with the obvious and ending with the obscure. Please submit any other techniques you’re aware of!!!
He covers a total of eight different techniques and goes into detail about the problems and advantages of:
  1. SVG
  2. Canvas
  3. Dynamic images from the server
  4. VML
  5. Richer Plugin (e.g. Flash)
  6. CSS/DOM
  7. data: resource
  8. XBM
I see that there might be certain applications, but I don’t think that there will be a major move from served images towards client generated images, it just adds too much of a hassle.

Technorati Tags: , ,

*
No Comments