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 :)

*
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.

*
Comments

August 27, 2007

Interesting stuff around the Web

Christian Decker wrote this in the late afternoon:
This section includes some of the most interesting articles I read in the last few days. They are not focused on any topic, but I’d like to share them with you as they are insightful and helpful.

*
Comments

November 17, 2006

Essential JavaScript

Christian Decker wrote this in the early evening:
Getting tired of those 250 KB Libraries? Robert Nyman got the answer:
The web is littered with full-blown JavaScript libraries who say they will save your day and make your web development life much easier. You get encouraged to include these “mere 80 KB” libraries that is supposed to be the solution to all your needs, and practically make the web site work by itself. Needless to say, I’m not a big follower of JavaScript libraries,, especially since they almost always include lots of superfluous code, so I thought I’d put together a tiny library with only essential JavaScript functions. The result of that is EJ - Essential JavaScript. EJ consists of functions that I use all the time and they make writing JavaScript go faster and the result is being able to do work more efficiently. It is also about having the things you would write again and again for every web site you produce in one neat and tiny file instead, to be able to focus on the new things you need to address. Here are the functions included:
He only includes the most used functions:
  • $. The old favourite. No fancy arrays here though
  • getElementsByClassName
  • addClassName
  • removeClassName
  • getElementsByAttribute
  • preventDefaultBehavior
  • getStyle
everything more is too much :D

*
Comments

November 16, 2006

YUI Blog on JavaScript

Christian Decker wrote this in the early evening:
Even if you aren’t a user of the Yahoo User Interface library this post from Douglas Crockford can be really insightful as it explains the main differences between Object Oriented Languages (like Java) and Javascript (which is a prototyped language):
Do not use new Function to create function values. Use function expressions instead. For example, 
frames[0].onfocus = new Function("document.bgColor='antiquewhite'")
is better written as 
frames[0].onfocus = function () {document.bgColor = 'antiquewhite';};
The second form allows the compiler to see the function body sooner, so any errors in it will be detected sooner. Sometimes new Function is used by people who do not understand how inner functions work.

*
Comments