Interviewed for DZone/Web Builder Zone
I have been interviewed for DZone/Web Builder Zone, where I mainly talk about DOMAssistant. Hopefully you get answers to some questions you have possibly had. 🙂
I have been interviewed for DZone/Web Builder Zone, where I mainly talk about DOMAssistant. Hopefully you get answers to some questions you have possibly had. 🙂
Today I thought we’d talk about how, or rather were in the document, to include JavaScript files.
Writing about whether people validate their CSS, it made me wonder about how/if people ensure the quality of their JavaScript code.
For some time, I’ve wanted to play around with Adobe AIR and see what it’s like. I’m also a sucker for very simple, yet addictive, games, so now was the time!
When developing JavaScript, performance is one of the vital things. Therefore, I thought I’d share the performance of loops with JavaScript, and give some advice.
The new version of DOMAssistant, 2.7, is finally out and my impression is that it is a very stable and solid release. Faster CSS selector performance, new features while at the same time a smaller file size.
Today I though it would be a good time to tell you about two web developers who I would really like to recommend to you: Lim Cheng Hong and Pelle Wessman (Pelle’s blog).
A number of exciting things have been going on in the DOMAssistant camp, so I thought I’d fill you in with some of the latest. We’re talking plugins, developer tools and taking a glimpse into the future.
For those of you who have missed it, IE 8 beta is now available for download. Let’s take a quick look on what’s in it.
The other day, I encountered a form
submission behavior I didn’t expect, nor don’t have any solution for.
Almost a month ago, I wrote a hesitant post about DOMAssistant in DOMAssistant – Why bother?, so it’s about time to talk about that again.
Maybe I’m just writing this because I’ve been feeling a bit low lately, but I do wonder if there’s any idea that I put any more time into DOMAssistant.
I’ve had some people worrying about the GPL license I’ve used for DOMAssistant, and it being too strict so they can’t use it in their commercial project.
Therefore, DOMAssistant has now changed to a MIT License, which basically means you can pretty much do anything with it! 🙂
Enjoy!
I just released DOMAssistant 2.5.5 yesterday, but with the feedback given, some tweaks had to be made to the new AJAX module post
method. Instead of updating the same version multiple times, which is wrong, I’ve new made a new minor release where the issues have been taken care of.
So, download the new 2.5.6 version if you’re using DOMAssistant.
Just as mentioned by chenghong, I made a mistake and stripped the URL in AJAX GET requests as well. Something I knew, but that’s what I get for preaching about assertions but not applying it properly to my own code. I guess my intuition took overhand for a while. 😉
Anyway, I’ve released a 2.5.7 version of DOMAssistant now (available for download) where everything should be sorted. If you’re using the 2.5.5 or 2.5.6 version, everything should be working fine but the AJAX module’s get
and post
methods, but please update to make sure you have the latest working version.
I sincerely apologize for any inconvenience this might cause you.
I have just released DOMAssistant 2.5.5, which contains some very useful features and improvements, and a CSS selector bug fix.
Last year in November, Andy Hunt, of The Pragmatic Programmer and Agile Manifesto, was invited to speak exclusively to our company, and some things he said made me start thinking.
Quite recently I finished reading the book AdvancEd DOM Scripting by Jeffrey Sambells, together with Aaron Gustafson.
After listening to a number of JavaScript developers, seeing how they work in real life and analyzing their needs, I’m happy to provide the heavily updated DOMAssistant 2.5!
What’s in an award, really? Swedish computer magazine Internetworld has just given the Sweden’s Best Web Site 2007 award to the supposedly best web site in Sweden.
As promised in my @media Ajax – Journeys and stories post (now updated with pictures!), this one will focus on the presentations during the conference.
I’m just back from @media Ajax, which was a great experience! I thought I’d split up my stories in two posts: this one about the journey and social aspects, and the next one about the presentations. This post will be long enough anyway, so get a drink, lean back, and enjoy the ride. 🙂
I’ve always wondered when non-functioning web sites will start to be replaced by good ol’ real-life stores, which people will go to instead of using the online service. Yesterday it happened with Ticnet.se
Since the CSS support in Internet Explorer, especially in versions prior to Internet Explorer 7, has been lagging quite substantially, clever web developers have started using CSS expressions to mimic CSS functionality. However, few realize how this affects performance.
November 18th-20th, I will be in London to attend the @media Ajax conference.
I’m sure you follow web standards, write semantic HTML and separate content (HTML) from presentation (CSS) and interaction (JavaScript). It’s all accessible and lean at the same time. So, what’s the next step. Performance, I tell you!
The DOMAssistantCompressed JavaScript file has been updated. My compression approach was a little too effective for the special DOMReady fix for Internet Explorer, so necessary code for optimal performance was unfortunately removed. This has now been addressed, so please download the new version if you use the compressed file.
The DOMAssistantCompressed JavaScript file is updated again. I noticed a problem with the elmsByAttribute
method in IE where the compression resulted in a wrong reference, returning incorrect results. Download the new version and it will be fine.
Tired but proud, I would like to announce the 2.0 release of DOMAssistant! Refactored code and new features will improve what is already a vital and must-have JavaScript library for me.
So, this post is just about selling DOMAssistant to you. However, it is also a way for me to express gratitude for the mentioning and usage of it in two recent cases.
I don’t know why, but problems seem to always be especially good at showing their ugly face at work in Friday afternoons/evenings. This time around, IE (big f**king surprise) displayed an odd behavior when using the addEvent
method on the window
object.
Just a small note to those of you who use my getElementsByClassName script: it has been updated for performance reasons and flexibility reasons.
I’m so used to having a $
method for accessing elements. Nevertheless, the idea is of course that FlashReplace
should be stand-alone, so I replaced it with the standard document.getElementById
.
Although I didn’t encounter any problems with not using an embed
element (to have valid HTML code output), it has been strongly recommend that I use it to ensure maximum compatibility. Therefore, it has been added and the file size is now 2.1 kb.
I’ve gotten a few e-mails asking how to add variables to the Flash movie, so here are some options:
The simplest way is to just do it through a querystring. I.e. “movieFileName.swf?testVar=hello”.
Another option is to reference the movie and do it something like this:
document.getElementById("movieName").SetVariable("testVar", "hello");
Ok, everyone and his mother are creating scripts to include Flash into a web page. I wanted to have my own version, but with less and more readable code, so here’s my JavaScript to include flash : FlashReplace.
Ok, I’ve added a couple of features and settings based on the comments I’ve got. The additional settings are:
hideResultsOnDocumentClick
document
should hide the results list.itemInsertValueSetFocusToInput
input
element, once an item has updated the input
element’s value (by initially having the itemInsertValueIntoInputClassName
CSS class).hideResultsWhenInsertValueIsSelected
input
element’s value is updated.Another additional feature is that if you use the arrow keys to navigate the results list, arrow up from the first item as well as arrow down from the last, will set the focus back to the input
element.
Changed the license to a Creative Commons Deed.
I got an e-mail with the suggestion to turn off the web browser autocompletion feature of the input
element. I think it was a good idea, so I have now added it as a setting:
turnAutoCompleteOff : true
When most people need some kind of intellectual challenge, they do crosswords, sudokus, IQ tests, read up on philosophy or something similar. Me? I write some JavaScript. 🙂
Recently in a project I’ve been working on, I stumbled across something that I haven’t seen before: one AJAX call was possible to make in the web page, but after that it stopped working.
One of my top annoyances when surfing around is when some “clever” web developer has chosen to use a script that resizes the web browser window to what they think suits their web site. Stop doing that! The size of my web browser window is the one I like, and I very much like to keep it that way.
Do you hate when this happens to? Please sign the petition (or, rather, write a comment) below, to state:
No, we don’t accept you resizing our web browser window anymore! You resize, and we’ll leave your web site forever.
One thing that I’ve always taken for granted how to do is the indentation of code. Sure, people place characters like {
either on the same line as the CSS rule/JavaScript function name, or on the following, and that’s just fine. But what I mean here is how to accomplish the actual indentation.
When developing web sites with heavy interactivity, your scripting skills are really put to the test. And, sooner or later, you will be put in a situation where it’s a fine line between following web standards and what’s best from a performance and structure perspective. One question that follows that is: is it ok to apply invalid attributes via script to elements?
After I released DOMAss, I’ve gotten a number of e-mails from people telling me how happy they are with it and how well it compares to other libraries. They only have one problem: the name. What they’re saying is that they can’t use such a name, albeit funny, in production for large web sites and in their customers’ code.
Happy to oblige, the library is now renamed, with added side-by-side compatibility for other JavaScript libraries such as Prototype and jQuery.
For a time now, I’ve wanted to read an advanced book about JavaScript, to perhaps fill in the blanks, and to get some inspiration and different perspective on how to implement various features.
Therefore, after some consideration, I picked up Pro JavaScript Techniques by John Resig.
DOMAss now has a new name, DOMAssistant, and it is also possible to run it side-by-side with other JavaScript libraries such as Prototype and jQuery. For more information, please read: DOMAss renamed to DOMAssistant, with added Prototype/jQuery compatibility.
Per Zimmerman made me aware of the fact that I wasn’t as consistent when checking for names and whitespace in the addClass
and removeClass
as I am in the hasClass
method, so this has been fixed to address any potential issues you might have had. Just download the DOMAssistantCSS JavaScript file and you should be good to go. 🙂
Changed the license to a Creative Commons Deed.
Minor fix for strange behavior in IE when using the addEvent
method on the window
object. For more information, please see DOMAssistant fix for addEvent method peculiarity in IE.
PDF documentation added, kindly created by Michael Frühmann.
The DOMAssistantCompressed JavaScript file has been updated. My compression approach was a little too effective for the special DOMReady fix for Internet Explorer, so necessary code for optimal performance was unfortunately removed. This has now been addressed, so please download the new version if you use the compressed file.
The DOMAssistantCompressed JavaScript file is updated again. I noticed a problem with the elmsByAttribute
method in IE where the compression resulted in a wrong reference, returning incorrect results. Download the new version and it will be fine.
When I released my EJ code, while I felt that it contained very useful functions, it didn’t feel properly packaged. Also, I’ve always wanted a proper base to stand on for various DOM interaction, so I didn’t have to start from scratch in every project.
So now, I proudly present DOMAss!
Some people like to proclaim that the so-called web standards war, i.e. a wide-spread usage of web standards, is over. Let me take a couple of web sites as example why I don’t agree:
Once every now and then you come across code that is so ghastly, so terrible, that it almost makes you go blind! While fighting the pain, you (think) you can be almost sure of one thing: this must have been done on purpose!
I think that in (almost) every project I work in, when a web page contains one or more form elements, the most common question is: should we set initial focus to the first element in the form when the page has loaded? Heated debates follow, where people argue very convincingly for their view on it.
However, to me it isn’t an easy black or white-question.
Personally, I’ve never been a fan of huge JavaScript libraries, an opinion that was probably clear from what I wrote in my EJ – The only JavaScript library you’ll ever need post. Even if they’re written by very competent web developers, they almost always consist of more functions and methods that are necessary.
However, I’d like to take this opportunity to explain the important difference between the two major types of JavaScript libraries: concept and code libraries.
If you like this code, I sincerely recommend that you take a look at the DOMAssistant JavaScript library.
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.
Have you dabbled with JavaScript for a long time but feel that you don’t really know how to get to the next level? Or are you one of the recent converts that till only recently only knew HTML and CSS, but has come to the realization just how cool and funky things you can achieve with JavaScript?
If you want to get really good at JavaScript and definitely move on to the next level, I have something for you to read.
With GLT, a side-effect happened in Firefox when using GLT for any link; the status text simply wasn’t shown in the web browser status field. This issue has now been addressed. Just download the new JavaScript file and things should work fine.
Please let me know if you encounter any problems.
When I wrote Looking for a good interface developer? Here’s what to ask to make sure you’ve got the right person, I wasn’t sure if I should reveal the answers to you or just let you do the research yourselves. However, I came to the conclusion that this web site is really about sharing knowledge, and also that some of you might have some good extra input on my answers.
So, here are some answers and links to more information about the questions:
When developing a web site, amongst the initial questions is what level of accessibility one wants for it and what eventual extra measures are needed to achieve that. Sure, if you’re an experienced interface developer, you naturally write semantic HTML, use alt
texts and try to avoid making the web site in question JavaScript dependant, and so on.
But, let me tell you something: you can be the best damned interface developer in the world and then still, in the end, you stand there with an inaccessible web site. What happened?
Changed so it will work fine under https as well in Internet Explorer.
If you like this, you might also be interested in DOMAssistant.
Most people who have worked with JavaScript has cursed the time it takes to apply JavaScript to the document (events, for instance) because you’ve waited for the whole document to load. The problem is that we have relied on the onload
event to be triggered and that doesn’t happen until all HTML code and every image and other dependency has loaded. In most cases, we want to have our scripts as soon as the DOM has finished loading and not wait for images and their likes.
Therefore, I have with great interest followed the work of Dean Edwards, together with Matthias Miller and John Resig, and the exciting conclusion they came to in window.onload (again).
I really like the gist of it and the implications it brings, but I wanted to make it more flexible for any number of load events. Therefore I created ELO – Encapsulated Load Object.
Apparently Opera’s claim to support document.all
in conjunction with not mimicking it exactly like IE led to some problems in Opera 9 when I use my getElementsByAttribute
function. Thanks to Ash Searle who tipped me about this and also explained what the problem was. The code in the JavaScript file to download has been updated.
Also, Harmen asked an interesting question about nested elements with the title
attribute. It didn’t work initially, but now I’ve updated the GLT JavaScript file with support for that as well.
I did some thinking how to address the faulty technical implementation in IE to display values in the alt
attribute as a tooltip, and if I should suppress it on images that have a title
attribute as well. I decided to implement a setting for it and then it’s up to you to choose. The GLT JavaScript file now contains one more setting: suppressAltTooltipsInIE : true
.
I’ve done a very minor change to the event handling to cover up for a bug in IE’s garbage collector (something I hear will be addressed automatically in IE 7). In 99,9% of the cases you won’t notice any difference, but if you use it in a very advanced web site/web application it might make things better and less resource intensive.
Just as Chris commented, the script didn’t consider if the custom tooltip would disappear if it was positioned too far to the right. It is now updated with a fix for this.
A side-effect happened in Firefox when using GLT for any link; the status text wasn’t shown in the web browser status field. This issue has now been addressed.
Just as Jordan Ambra pointed out to me, there were cases when you could mouse out from the element just when the GLT element was shown, and making it stick and not fade out. This was just because of a tiny typo by me in the code, but it has now been fixed.
Bob pointed out a typo of me in the code, where the result was that you couldn’t turn off the fading in through the fadeInTitle
property. The code has been updated and can be downloaded in the GLT web page.
Added an extra check to prevent any eventual error that occurred when hovering a GLT element in the middle of the loading of the page.
As of lately it seems like I’m giving you a new JavaScript library every second day. But don’t worry, I will be fairly busy in the upcoming months so this one is probably the last one for a while. 🙂
Anyway, tooltips in a web page, maybe more commonly known as what will be displayed when using the title
attribute on an element, have some shortcomings that I wanted to address.
I’ve done a very minor change to the event handling to cover up for a bug in IE’s garbage collector (something I hear will be addressed automatically in IE 7). In 99,9% of the cases you won’t notice any difference, but if you use it in a very advanced web site/web application it might make things better and less resource intensive.
When I added the lightbox-like feature to JaS I was talking to my friend Teddy Zetterlund explaining how it worked. His response was:
I know a lot of situations that this could be useful in then.
I agreed with him and have now created the mother of all focusing scripts: FaT – Focus At This! 🙂