I felt like linking up this talk that I gave on Track B of JSConf in Portland this past year. I feel passionately about the value of writing code that serves no useful purpose other than to bring joy and skills to its implementors and users.
I decided to try my hand at doing a screencast. I have been told my old cross-domain talk slides have always needed a little more context, so I did that. Hopefully I’ll get in the habit of doing these, they’re not so difficult. Enjoy!
Sorry for the half-vid, and low quality, but I figured it was worth putting out there, as I’ve had a few requests for it and I’m running out of hard drive space. Perhaps with any pressure, I’d do a screencast.
Also, this was the day that I took two green nyquil pills thinking that GREEN meant DAY (for dayquill). So I may be a little more relaxed than normal. I’m sure the beer didn’t help either. I rather liked it, if I recall.
One of the most common examples of this situation happens with tabbed interfaces, and more specifically the jQuery UI Tab widget. You give it your group of divs and links to turn them into the tabs, but that code doesn’t run until domready. Before the dom is ready, you’re original content all shows on the page, then when the tab code runs, it gets hidden.
Please don’t set them to hidden in your CSS in order to stop this from happening. This hurts accessibility, SEO, and the laws of white-hat web development, because without JavaScrpt, this content can never be seen. Instead, try this little trick:
So there. Now we’re using the noscript tag to conditionally override our CSS hiding of the elements. You can technically do this with link tags as well, but since you need to put the noscript version in a separate place than the original style (which can be anywhere), it’s probably not worth the extra http request. Just make sure the noscript override version runs after the initial setting. Cascading at it’s finest.
I know what 2 of you are thinking: “OMG Gross. This does not validate, because a style tag can’t be anywhere except in the head element” - well, you could put it in the head element, but that could be weird. In other words, I don’t really care. It works everywhere.