I’m constantly baffled why most companies and web developers don’t understand, or care about, the importance of using good semantic URLs. Therefore, I though I’d outline some reasons to help you understand why you really should care.
When done properly and in a serious manner, SEO is truly a fascinating field! However, I have some wonderings about how Google and other search engines treat and index certain things.
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?
One of the web sites I’m currently working on has a lot of line dividers, and they had been added somewhat inconsistently. Therefore, I decided to go the semantic route and throw out all div and p elements, and replace them with one single class-free hr. Oh man, did I open up a can of worms…
When I got my first computer back in 1996, it was an IBM PC with Windows 95 on. Since then I got into web developing and I’m living a fairly computer-intense life (at least in the daytime), and I’ve realized more and more that I’m phasing out one Microsoft product after another from the software I’m using.
Yes, people, it’s time again: get ‘yer geek on! March 29th we will have yet another Geek Meet with nice people, beer for our throats and pizza for our overworked bodies!
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.
This artice is also available in a French translation.
When developing web sites, we naturally want to offer our end users the option to freely resize the text size in their web browser of choice to their liking. What I would like to do here is present what I’ve found to be most consistent way to achieve this with CSS.
I’ve always liked semantics and to choose how to properly mark up content to convey the information the best way possible. But, and I know this might sound weird, as of lately, I’ve had a harder and harder time to find the suitable content for one specific element: the H1.
I’ve recently started on a new assignment (which is mainly the reason that I haven’t been able to muster any extra strength to blog, besides from my family being sick…), and I’m hired as a subcontractor. This means that I’ve been introduced to a lot of people the last couple of days, and it has almost exclusively been with a term that I hate:
The HTML guy.
Vlad Alexander has written an article entitled X/HTML 5 Versus XHTML 2, discussing what he likes respectively dislikes.
An alternative suggested solution is using FlashReplace.
Hopefully, you’re someone who cares about web standards and wants to have valid code for the sake of web browsers’ rendering and for you as a web developer, to more easily spot errors right away. Then, when including Flash content in your web page, the default code output from various tools and web sites out there is invalid (at least when it comes to using them with a strict DOCTYPE, which I’d really recommend you to go with).
So, what should a poor caring web developer do?
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.
Ever been in the situation where you want to put some HTML on top of Flash movie? You’ve cursed the designers for using Flash, and stated that it is impossible? If that’s the case, I’ll advise you to reconsider.
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:
The hunt for getting a good search engine ranking affects more and more companies. A higher ranking equals more visitors equals (most likely) more customers. More customers, in turn, equals more money, which is what business is about.
But sometimes, the hunt hurts the quality of a web site.
Recently I got a bug report from marketing (don’t all bug reports come from there? 😉 ), about an unexpected problem in Firefox in Mac OS X. The end users had problems tabbing through the web page, and especially through forms. Since I, at the time, sat on a PC, I couldn’t test with my settings, although I knew I hadn’t seen the problem on my Mac at home.
If you develop a web page nowadays, you don’t use br tags, right? Or do you? And if you do, is it wrong, or the most efficient and pragmatic way to implement a desired line break in some text?
Let’s take a look at this from a number of perspectives:
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!
In November last year, Aleksandar Vacić wrote his post Insert HTML page into another HTML page (found through No more iframes?). Basically, what it is about is finding a way to use an object element instead of an iframe to get the correct behavior in Internet Explorer.
Right about now, I guess your questions are why, how and is it necessary?
So, 2006 is almost over and it’s time to look ahead at 2007. Will it be an exciting year? No doubt, we have to wait to see just how riveting it can get! I thought I’d go through some notable things that happened in 2006, not just web-related, and scribble down some words about them…
I thought I’d take on a slightly different approach with this post. I mean, all bloggers try to write about facts, rant or go to other lengths to get their message through. Therefore, in true TV preacher style (imagine someone with James Brown’s personality), let me tell you about Google:
Ok, this is apparently a lazy post since it won’t contain much information. Also, as of lately, it seems like I’m just asking you what you think instead of writing a more detailed post, so bear with me; I’ll write more soon where you don’t have to answer all the time! 🙂
Anyway, here goes:
Without expressing my opinions on it, what’s your take on the World Usability Day?
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.
Scenario: you run into a problem when coding, or in some other way have a question about, or problem with, a certain application. Let us, for the sake of argument, say that you have no colleagues or friends to ask where you are at the moment, nor through e-mail or over IM. What do you do?
In my case, 9 times out of 10, I search Google. If you’ve encountered a problem, there’s always someone else who has as well; someone who is or has been in the exact spot as you are in right now.
But that’s just me. What do you do?
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.
This might sound condemning, but I’m thinking of establishing a weekly award: Web Site Most Likely To Have Been Built By An Intern. It is about large companies targeting a lot of users who, in this day and age, still don’t have any clue about web standards, accessibility or semantics. If, for instance, a web site only works in one web browser (guess which one…) on one platform, something is fundamentally wrong!
Without further ado, let me probably announce this week’s winner: MSN Music.
PS. A little tip: first try it in Internet Explorer on a PC, and then in any other web browser on any platform. DS.
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.
Just before I started blogging I got to know Tommy Olsson, through his now resting blog Autistic Cuckoo. I was impressed with his technical expertise and inspired by his respectful comments and discussions with his readers, and it was something I set up as a goal and role model for my relations with the readers of my web site.
Unfortunately, Tommy doesn’t write anymore on his blog, but he has now made an interesting contribution to SitePoint about HTML.
Say that you’re using a web page and you find the text, the images or the layout in general too small. What do you do? Some web browser makers understand just how important this issue is and some don’t; some have set a good example and some still linger on under the impression that being able to resize text is sufficient.
Who are the good guys here? Microsoft and Opera.
I was thinking about whether to write this post or not, but here it is. I have a confession to make: I have coded naked. No, not at work or amongst other people, so don’t worry… 🙂
To me, a blog with no possibility to comment isn’t a real blog. The web is such a living medium with possibilities for everyone to control their content, give feedback in numerous ways and basically have every web site relation as some kind of dialog with the web site owner.
Then we have the people who blog and doesn’t accept comments…
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.
When you write your CSS code, do you use upper- or lowercase hexadecimal codes? I.e., does it look like this: #F2F2F2 or this: #f2f2f2? Personally, I used to go the uppercase route but has now officially switched to lowercase.
What’s your preference?
Now that Microsoft has released Internet Explorer 7 and the whole web development world is trying to figure out what works in it, and, more importantly, what doesn’t (let’s just not go there right now, ok?), I thought I’d give you some solace to your doubts whether to install it or not on your main Windows machine (most likely you have doubts what will happen to IE 6, which you, unfortunately, still need to test in and cater to, for a long time to come).
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:
In July this year, Amnesty International published their report Undermining freedom of expression in China – The role of Yahoo!, Microsoft and Google, where they discuss and analyze these companies values compared to their actual actions (direct PDF link, 32 pages, 504 kb).
For those out there who are interested in statistics, or want to know more about the other readers of this web site, I’ve put together a little overview of the visitors.
It contains information about countries people come from, what platform they’re on and what web browsers they are using.
Are you perhaps looking for a talented interface developer? You’ve heard that web standards and perhaps accessibility is good to have experience with, but you don’t know how to determine the applicants’ experience.
Don’t worry anymore, I’ve put together a check list of what to ask to make sure they’re suitable and in the loop with proper and modern web interface development.
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?
Last night we had Geek Meet in Stockholm, and we had an amazing turnout! Over 30 people showed up, and to tell you the truth, it was a blast! Many familiar faces but also a lot of new ones that seemed to enjoy themselves.
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.
Are you a fairly skilled web developer? Get enough money to make ends meet, maybe have some benefits kicked in too? You’re content with life in general and is a nice person?
You know what? I think it’s time for you to give something back.
Every time a new web site is to be designed; every time I open a magazine about building web pages; every customer I meet. It’s always there, the ridiculous question:
How big monitors do people have nowadays?
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 could just stack argument after argument why using frames when designing a web page is a bad idea, but frankly, I’m too lazy to do it once again. Let’s turn this around:
Why would anyone see the need to use frames nowadays?
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! 🙂
A friend of mine using JaS said that he sometimes had the scenario that he wanted to load all the images but then preload a certain tag, hence initially hiding all the pictures that doesn’t match that criteria. I though it was a simple task so I created an add-on script for those interested.