I mentioned on Twitter that I’m impressed so far with Firefox 4. Here’s a very minor, change I’ve noticed, that I’m a fan of; the treatment of javascript terminal dialogs.

The overlay makes it clear to the user that they need to interact with the alert box before they can use the page. Much nicer than the old style, where the page remained unaltered and the alert dropped from the top (at least on a Mac, I understand Windows versions appeared mid-screen).

There’s still some room for improvement here, and I don’t think this style of modal will (or even should) replace current solutions for modal windows, but I like how the Mozilla team is working to draw more attention to the box.

That said, I hope the Firefox team doesn’t give in to the inevitable cries from either the “we hate any and all change” camp, or the “now I want to use an image as the overlay and control the opacity” camp.

Added:

to my global js file… because it makes me feel like a badass to write code like:

Just a quick tip, I needed to get the value of the selected radio button from a radio group using jQuery. While several custom selectors are available for forms, there isn’t a simple way to do it that I could find. I ended up using a solution that I quite like, and wanted to share.

Have I mentioned that I love jQuery?

Edit: This entry was directly attacked by the robots, and all comments were lost. Please leave one again if you left it earlier, and accept my sincerest of apologies.

For some work I’m doing right now I needed the current time output into the input field that the (excellent) jQuery datepicker uses, but I don’t need it selectable by the user.  The default format is

but can be formatted using the formatDate parameter.  The list of formatting options is considerable, including predefined setups for ATOM, COOKIE, ISO_8601, various RFC dates, RSS, TIMESTAMP and even W3C.  Unfortunately none of the predefined formats, nor the large list of date components includes time.

Read on for my solution to this dilemna.

Man there’s good stuff on the net, and sometimes I even get a moment to read it!

• Jamie Rumbelow‘s, got a good start to a series of CodeIgniter articles with his first part of The Guide to CI Databases.
• From the “D’uh, why didn’t I think of that!” department comes the excellent (and funny) CleverAndy.  You know all those designs you do that your clients pass on for one reason or another?  CleverAndy helps you find them homes so they don’t go to the island for misfit toys (or um… whatever the design equivalent is).
• 36 seconds!  Fedor Emelianenko… wow.  You are a bad, bad man.  But seriously… Megadeth?
• Learning ExpressionEngine?  Micheal Boyink (he of the mighty pogo) has put together Train -EE just for you.  Fantastic resources, including instructor led workshop training.  Congrats Mike, this is the way it’s meant to be done!
• jQuery sparklines.  Looks to sweet to pass on.

I've been kind of in isolation the last week or so, (more on that in another post) and I've not even taken the time to read my RSS feeds latesy, only skimming a few things here and there, or marking things for reading later. So today, I had a bit of time, and boy am I glad I took the time to re-visit those! Here are a few wonderful things worth your time to read.

• How To Make An IP-To-Country Tool With PHP and MySQL. Mathew Pennel, web monster and editor of Digital Web Magazine has written up a wonderful article here. I find myself linking to one article every month or two that this guy writes and nodding my head knowingly. This guy is great.
• Doctor Jones has completely made me re-examine Apple's Spaces with his article My Day With the New Spaces.
• jQuery for Designers has written up Coda Slider Effect. Its sexy as all get out. GREAT work there Remy. This is super well done. I will be stealing inspired by you soon!
• Continuing on the jQuery train of thought here is the always excellent jQuery blog. Recently they wrote jQuery UI v1.5 Released, Focus on Consistent API and Effects which contained a few big tidbits in there. Biggest? API standardization. Unless you're a nerd of pretty high-order, that's probably not as cool to you as it is to me, but something that everyone can enjoy - Enchant (the effects library) is being rolled into jQuery proper. I think this is an immensely smart choice if only for marketing jQuery to new users. New users tend to compare feature by feature and make decisions, well now there's a big checkbox in that column. Nice work guys!
• And finally, Block Quotes and Pull Quotes: Examples and Good Practices from Smashing Magazine.

Man, there was some good stuff on tap! Something from each of those will be making their way into my work in the very near future.

I finally made the long discussed flip over to jQuery.  It took me about 4 and a half minutes.  It should have been a 30 second process, but I had a few lightbox images relationships named incompatibly.  Anyhow, all fixed up.  I also decided to implement the much talked about Google hosted Javascript library.  In a nutshell, Google is hosting some popular Javascript libraries.  The idea is that if enough people are using the hosted libraries, then there’s a good chance that your visitor has already locally cached the files, and your page will (give the illusion of) load faster.

As a handy extra, they take care of compressing and minifying for you, and are committed to keeping a library online permanently after it is hosted.

That said, I’m not sure how long I’ll keep it.  There are a few things that I think every responsible webmaster has to think about first.  Personally, I would only use it as part of an informed company strategy (I could see a savings on a big site like ExpressionEngine.com in terms of bandwidth and perceived load time).  But there are still some downsides I just haven’t fully reconciled yet.  Let me address the three most relevant ones that I see.

Well, I was greeted pleasantly by my RSS feeds today, it seems that the jQuery User Interface project has officially released. 

This is great news, and I have to say (I’ve been using the UI components in beta) that they are brilliantly done.

I’ve been saying for a little while now that I’ve fallen in love with jQuery, and I mean, who hasn’t?  I’m so impressed with it, and so are the other smart people at EllisLab, that we’re integrating it into CodeIgniter, and into ExpressionEngine.  But this blog still doesn’t use it.  If you poke into the source code, you’ll see Mootools.

So I’ve been wanting to migrate my own code to recently out of Moo, and into jQuery.  This will let me do a few things, not the least of which is apply the CI jQuery library in another real-world test case.  So why haven’t I moved it yet?  Well, a quick audit of my code, and the only thing I’m using Moo for is the fancy lightbox effect on my about page, and several posts.  It actually is Slimbox, a clone of Lokesh Dhakar’s excellent (and popular) Lightbox.  So the short answer, is that I didn’t want to migrate the legacy code.

Then it dawned on me, my code is all semantic and clean, there’s no javascript hooks, the only markup used to implement lightbox is

so it should be an easy replacement.  Then yesterday, (via Ed Finkler’s Funkatron), I found the jQuery Lightbox plugin.  How is it that I only just yesterday found this?

A quick look, and it seems to be solidly written, the semantics are the same, and it should be (apologies to Ron Popeil) the “set it and forget it” solution I’ve been looking for.

So in the next few days, the plan is to migrate DerekAllard.com to jQuery, and start adding a bit more sexiness into the robot.

Next post: my favourite jQuery plugins ;)

Kevin Yank has an article posted on Sitepoint entitled “Simply JavaScript: The Three Layers of the Web”.  What I love about it, is that he does a masterful job of outlining the separation of content from presentation from behaviour.  I was just talking about this the other day, how HTML, CSS and Javascript make up the 3 legged table of the web; each is required if you are trying to build something stable.

These days, everyone seems to understand separating presentation from markup, but I still see <a href=”#” onclick=“doSomething();”> all over the place.  Hopefully, as more and more people keep repeating the message, separating behaviour, the same way we separate presentation, will work its way into our collective folk-knowledge.

If you are a beginning webmaster, spend some serious time reading about these separations - you’ll be a better webmaster for it.