DerekAllard.com

Firefox 4 alert boxes

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.

Firefox 4 alert box

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).

Firefox 3 alert

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.

Javascript badass

Added:

jQuery.fn.utterlyDestroy = function() 
    
var jQuery(this[0]).remove();

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

jQuery("#some-div").utterlyDestroy(); 

Getting the value of a selected radio button out of a radio group in jQuery

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.

$("input[name=radio_group]:checked").val(); 

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.

 

Adding time to jQuery UI Datepicker

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

mm/dd/yyyy 

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.
jQuery datepicker

Cool Stuff for Cool People

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

Things worth reading

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.

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.

jQuery hosted on Google and some implications for developers

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.

jQuery User Interface is officially out

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

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

jQuery on DerekAllard.com

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.

<script type="text/javascript" src="/js/mootools.js"></script> 

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

<a rel="lightbox" href="something">...</a

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 ;)

Quick Link: Three Layers of the Web

Three Layers of the Web 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.