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.

The talk is pretty short :D

All the cool kids are staticly generating these days. I’m in.

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!

Breaking The Cross Domain Barrier from SlexAxton on Vimeo.

I gave a talk at TXJS and AustinJS about cross domain communication in JavaScript. Here is a video that stopped halfway through that talk.

Breaking The Cross Domain Barrier from yayQuery on Vimeo.

The slides are available here: Breaking The Cross Domain Barrier

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.

There are a lot of different reasons why you might see content flash on your page before it's done loading. The flash that I'm talking about usually happens when you are trying to build a JavaScript widget that gracefully degrades when JavaScript is off. You probably feel pretty cool about yourself for writing your JS in an accessible way, but you are sad that it hurts the user experience.

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:

<style type="text/css">
/*
Obviously this is not a real class name, but here you would just
set all the elements you want to hide as display:none.
You should probably make this style whatever the JavaScript ends
up setting them to. That way you don't accidentally add weird styles.
*/
.stuffIDontWantToFlash {
  display:none;
}
</style>

<noscript>
<style type="text/css">
/*
Inside of this noscript block, show the elements, this should behow
you want it to look for people without JS - it could even be styled
totally different for them if you'd like to lay it out differently without
tabs...
*/
.stuffIDontWantToFlash {
  display:block;
}
</style>
</noscript>

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.

<3z

Alex