DerekAllard.com

Inspired by Lightbox: Anatomy of a Modal Window

Ugh... that just might be the worst title I've ever written...

For a "ultra-top secret"™ web application I've been working on, I need to take all focus away from the browser screen, and allow/force the user to interact with a window before being able to continue. Commonly, these are called modal windows, and gained some credibility for having practical uses with Lokesh Dhakar's wonderful Lightbox script (incidently, I use a variation of it on this script on DerekAllard.com).

There are many variations of modal windows running around, but I wanted a simple, unanimated "overlay" would would require a user's interaction, so I set about to build my own. The first thing I needed, was an alpha transparent div to sit on top of the whole screen. I stole was inspired by Matthew Pennel's great article on Easy Cross Browser Transparency, and began building from there. The ultimate alpha transparent solution I chose was a pure CSS base.

Quick Link: Firebug Exploit… upgrade time

One of my very favourite-est Firefox extensions, Firebug, has a security update

About an hour ago I received word of a 0-day security exploit that has been discovered and reported. I have just released a new Firebug (version 1.03) with a fix for this bug, and I recommend that everyone install it as soon as possible.

 

Writing personal content, and other assorted thoughts

This is one of those “a little bit of everything posts”.  I’m re-writing my business site, building an ExpressionEngine tutorial and impressed by beautiful javascript, and I’m too sexy for my shirt (so sexy it hurts).  Let’s tackle these in order shall we?

So I’m rebuilding my business website (no links right now, but its not exactly a secret URL).  Through a series of unfortunate events (that would seem much funnier if they had happened to someone else) I lost every non-textual asset from my site 3 months ago.  Every image, pdf, a few flash files… gone.  Backups you say?  Of course I had backups... and I can prove it.  I’ll just get them out… I know they’re around here somewhere… maybe in this directory… no, well I know they must be… hmmm… Found them!  And you doubted me?  Oh wait, it seems this backup (and all my backups) have images from my site from 2 generations ago!  Sigh… so now, only html pages, which means text and styles intact only. 

So I took it as an excuse to rebuild, but then I got sidetracked when I was hired by Ellislab, and other work picked up, and I started getting really active bug squashing in CodeIgniter and well, you know how these things go.  So I finally finished off the design, rebuilt the site using CI on my test server, and now all I have to do is drop in the content.  The problem is of course, that the only content I have right now is probably 4 years old, and I’m not happy with what I wrote.  So I’m off to re-write it now.

Let me just say that writing content for a website is hard work.  No wonder getting clients to hand it over is always such a struggle.  And writing for your own website is twice as hard.  On top of all the normal “extra things to think about” when writing for the web (be brief, summarize, use headings and bullets) when you’re writing your own content you have to walk that fine line between “promote yourself” and “I’m a self aggrandizing attention whore”.  Its a finer line then you’d think at first.

Quick Link: Plotr javascript graphing library

A beautiful piece of work!  Bas Wenneker has written Plotr, a charting engine in Prototype that uses canvas.  Now if only IE would support SVG, my world would be complete (until I found something else to complain about). The library is released under a BSD license, and requires prototype to run.

The rendered graphs are not bitmap graphics (no GIFs or PNGs here), but rather plotted using SVG or Explorer Canvas, as is appropriate. And if I may say so, the output is sexy as hell.
Example of a Plotr Graph

Conditionally Sticky Sidebar

If you use pretty much any browser except IE 6 (more on that later) when you visit this site, you've probably noticed that the dark-grey sidebar scrolls with you just until the banner and menu are off the page, and then locks itself into position or "sticks". When you scroll back to the top, if the menu and/or banner need to be seen again, the sidebar politely resumes its normal scrolling duties. Go ahead, try it now, I'll wait. Fun isn't it? I've had a number of people comment on that, so I thought I would outline how I accomplished it.

Thoughts on a Javascript Library Integration with Code Igniter

For reasons I'll disclose in the near future, I've recently been convinced that Scriptaculous, despite my thoughts on its "bloat", is in fact the best library for me to focus in on if I'm going to integrate it with Code Igniter. I'm currently committed to a project that I'm just finishing off that I've been developing using Mootools, but when its done any work I do in this area will probably be on Scriptaculous integration.  I'll release the mootools library when I'm done of course!

Quick Link: Javascript object literal namespacing

Tim McCormack has an excellent summary of Javascript object literal namespacing.