Technology
This has consumed me for the last two weeks. Seriously. I’ve done practically nothing else. I wasn’t even fully aware that it was mid November. Things I’ve done in the past two weeks?
That about covers it. I really need to get out more. 
Don’t delete a critical file while working on a complex web application before making a backup. 
Like nearly every web designer and developer on the planet Internet Explorer has long been the bane of my existence. Each version consistently botches W3C specifications in some way, leaving out support for or mishandling technologies and features that other browsers have supported for years. Countless hours have been wasted creating browser check scripts, workarounds, and CSS hacks to support an outdated piece of software that many people still refuse to abandon despite obvious (and harmful) deficiencies.
There are, however, two things that Microsoft did correctly with Internet Explorer. The first is conditional comments, which allow knowledgeable web designers and developers to gracefully hide any CSS hacks or special IE code in simple HTML comments that other browsers ignore.
The second, and slightly less renowned, is the IE box model.
Understanding the box model can take a little effort if you aren’t already familiar with web design and development, so let’s use an example. We’re going to have a friend build a box for us, and it needs to be four feet wide exactly. We need exactly one foot of space around whatever it is we’re going to stick inside this box for padding material. And just for the sake of argument, let’s say that the box we’re building has really thick one-inch sides (it’s an awesome box).
Our box-building friend needs certain information from us to build this box, specifically the width, the padding (space between what we’ll be putting in the box and the box edges), and the border (or sides) of the box. We know that our box border is going to be an inch thick, and we want a foot of padding. We also know that the box has to be exactly four feet wide. How wide is the box?
If that looks like a trick question, you’re right. Anyone with any sense would say that the box is four feet wide. If we were to describe our box using CSS, it’d look something like this:
.box {
border: 1in solid;
padding: 12in;
width: 48in;
}
How wide is the box? According to the CSS specification, the box we just created is actually six feet and two inches wide. This is because CSS defines the total width of a box as the width plus the padding plus the border (48in + 12in * 2 + 1in * 2). To get a box that is exactly four feet wide, we actually need to do this:
.box {
border: 1in solid;
padding: 12in;
width: 22in;
}
As you can imagine, this is incredibly counter-intuitive. It also prevents us from doing cool things with relative dimensioning. Let’s try a more abstract example, shall we? We need two boxes this time, and like our last box we want a foot of padding around the contents of our boxes. They also need to have those one inch sides. We’re going to stick them into a storage room, and each box needs to take up exactly half of the width of the storage room. Unfortunately, we have no idea how large the storage room is going to be. All we can tell our box building friend is that each box needs to be half the width of the storage room (or 50%). How wide are our boxes?
Again, this probably looks like a trick question, and it is. Regardless of the size of our storage room, our boxes need to be exactly half as wide as the storage room, or 50% of the storage room width. If we were to describe these boxes using CSS, they might look something like this:
.box1,.box2 {
border: 1in solid;
padding: 12in;
width: 50%;
}
But wait! We already know that CSS determines the total width of a box by adding the width, padding, and border together. That means that these boxes are actually half the width of the storage room plus another two feet and two inches. This is also where the CSS spec fails us, as there’s no way to figure out what the actual “width” of these boxes without knowing the exact width of the storage room.
This is also where the IE box model steps up to the challenge. The IE box model is actually a rendering bug, one that has resulted in at least a few CSS hacks to alleviate. It also makes a lot more sense than the CSS spec, however, because when we tell Internet Explorer that the width of the boxes is fifty percent it assumes we mean the total width. Any additional padding or borders are subtracted from this width, not added to it. With the Internet Explorer box model, we can get exactly the boxes we need, regardless of the size of our storage room.
All modern browsers (including IE8, shockingly) support a “box-sizing” property of some kind that allows us to us the IE box model for creating boxes. Ironically enough, the only browser that doesn’t support “box-sizing” is Internet Explorer 7 and below. And unfortunately, the IE box model bug was corrected in Internet Explorer 6 (previous versions are essentially always stuck in Quirks Mode). So what if we want to use this more flexible, intuitive way of creating boxes in more recent versions of IE?
The answer is Quirks Mode. It’s actually really easy to get Internet Explorer 6 into Quirks Mode; including anything before the DOCTYPE declaration will do it, and the XHTML specification states that an XML prolog should be included prior to the DOCTYPE declaration. By sticking this simple, completely valid line of code into our documents, IE6 switches over to Quirks Mode and we get the desired box model.
Quirks Mode also “corrects” a number of other IE rendering issues. In fact, by forcing Internet Explorer into Quirks Mode, we’re essentially limiting our design and development needs to only two browsers: standards compliant browsers and legacy (Internet Explorer) browsers. Quirks Mode has it’s own set of, uh, quirks, but overall it’s much easier to correct for these than to spend hours implementing various hacks that may or may not break with the next version of Internet Explorer.
I’ve been doing a lot with Javascript and PHP lately thanks to a personal project. I’ve finally wrapped my head around object-oriented programming (sort of) in PHP, as well as figured out how to use jQuery for some nifty dynamic stuff. One of the requirements of this project is a dynamic site theming engine… thing… that allows the user a good deal of customization with three basic options: Default, Automatic, and Custom. Default sticks to the default site theme, while Custom allows a user to tweak the available options independently.
Automatic, however, themes the site based on the current season (Autumn, Winter, Spring, or Summer) as well as using special themes for holidays (Christmas, New Year’s, etc.). Most holidays fall on the same date every year, so this is really easy to do. Some are a little trickier, though. Thanksgiving, for example, is the fourth thursday of November, a target that can shift from year to year.
A little searching came up with a simple PHP function that’ll determine when Thanksgiving actually is during any given year using the strtotime() function. We can give it something like “thursday, novemeber 2008 + 3 weeks” and it’ll spit out the appropriate timestamp for Thanksgiving in 2008. Easy.
Easter is a little trickier, though; there’s no simple way to get the “first Sunday after the first full moon on or after March 21.” Just reading that makes it sound like it would take some kind of archaic, trance-inducing mysticism to figure out (assuming you don’t have a calendar handy). What’s one to do? Why, use the easter_date() function of course!
easter_date — Get Unix timestamp for midnight on Easter of a given year
Just give it a year and this bad boy spits out Easter like there’s no tomorrow. Or something. It’s not perfect but it gets the job done well enough, and I nearly died of laughter when I saw it. I just love the fact that there’s a dedicatd PHP function for computing what day Easter falls on in a given year.
Now that Chrome has been unleashed there’s a lot of talk going on about what it is, what it could be, and what it all means for Firefox. Let’s be clear: Chrome is beta software. That doesn’t usually mean much coming from Google—Gmail alone has been in beta for over four years now—but Chrome definitely qualifies as a beta release. As such, it isn’t completely fair to compare Chrome to Firefox, a browser that has gone through three major revisions.
Still, Chrome is very polished, and after just a couple days of use I don’t see any reason to return to Firefox. Part of the problem (with me and Firefox, that is) is that I’ve never been huge on add-ons. I don’t care that I can use Firefox as a feed aggregator, MP3 player, instant messenger, etc, etc. I get it, I really do, and I just don’t care. Chrome gives me exactly what I want a super-fast, elegant web browser that lets me interact with the web.
The only add-ons I actually used were Adblock Plus, Delicious Bookmarks, Firebug, and Google Notebook. I imagine Chrome will get some kind of integration with Google’s web services in the future, Notebook included. I use Delicious largely because of the Firefox add-on, and Google Bookmarks integration with Chrome seems like a no brainer that will show up sometime in the future. That leaves Adblock Plus and Firebug, both of which I really can live without. Chrome already looks to include some interesting developer features; it’s doubtful they’re up to Firebug levels yet, but as with many Chrome features there’s room for improvement (Chrome is only at version 0.2 here, folks).
That leaves Adblock Plus, and while I love it, my ad blindness has gotten to the point that I glaze over pretty much anything that looks even remotely like an add unless it blares sound at me. In that case, I immediately close the page and never return to the offending site.
For what I use a web browser for—that’d be browsing the web—Chrome is already a better choice than Firefox. And if (when?) Google gets around to integrating their various web services into the browser it’ll be a truly killer application.
Update: This article over at cnet is interesting, not least of which because if you read the list closely enough—or even just sort of glance at each point—it sounds very much like the author wants Chrome to be Firefox. The only point I even kind of agree with is #4: Saved Sessions. Chrome hasn’t crashed on me yet but there always the chance it will (especially this early in the game), and with my luck it’ll happen when I have thirty mission-critical tabs open. As for the other points…
ChromeUnless you’ve somehow completely avoided tech news for the last two days you’ve no doubt heard of Google Chrome, the long-rumored, finaly-realized Google web browser. I’ll admit: I’m both very excited and a just a little worried about this. I’m excited because, well, it’s a Google web browser. I’ve been waiting for a Google web browser since it was just a rumor long ago. And with the plethora of Google services now available, a web browser seems a natural next step for the company that offers everything else.
It scares me (just a little) because, well, Google is everywhere now. They’re ads are found pretty much everywhere. I’m using Google Chrome right now to write this post. Gmail manages all of my e-mail accounts. Google Calendar keeps my agenda in order. Google Reader keeps me up to date on the plethora of sites I pull news from. Google Talk keeps me in touch with friends (well, sort of). Youtube provides me with a venue to inflice my full-motion presence upon an unsuspecting web.
It’s just a little disturbing when you realize you relay on a single source for nearly everything. I haven’t gone into full tinhat mode yet, though. I don’t have to use Google’s products (even if they are often the best). And it’s not like I’d be totally lost if Google vanished from the Internet. There are plenty of other services available I could use.
Anyways, some things I like about Chrome so far:
And some missing features I’d like to see:
Finally, there’s one thing that really bugs me about the Google Chrome coverage. I keep seeing comments about how “designers/developers are going to have to design/develop for yet another browser *roll eyes/sarcasm/spite/whatever*”, most notably in this cnet article. I’m really tired of seeing this. It’s the underlying rendering engine that matters, not the browser itself, and Chrome uses Webkit, the same rendering engine as Safari. While there might be some tweak or something going on under the hood (particularly V8, in this case), it’s still largely Webkit, which means that anything that works in Safari will probably work in Chrome.
And to be honest, Gecko (Firefox), Presto (Opera), and Webkit (Safari and Chrome) are so close in rendering quality (per web standards) that it’s often safe to assume that a well-designed page will render the same (or almost the same) in all three if it looks right in one. A good designer won’t bet on that, of course; it’s always best to test. The only true, outstanding annoyance is Internet Explorer, however.
And with any luck, Chrome will destroy it.
Pardon the mess… I just upgraded WordPress and now a few things on the site aren’t displaying correctly. Everything should still be perfectly funcitonal, they’ll just look a little funky for awhile.
Update: The problem with upgrading is that various aspects of the site require alterations to core WordPress functions. I just spent the last couple of hours trying to figure out how to make what changes I need via plugins and I’ll be damned if I can figure it out.
Part of the problem (I think) is that the changes I’m making require altering functions that the WordPress API currently has no hooks for, meaning that the only way to alter htem is to do so directly. Which is bad, ’cause that means everytime I upgrade WordPress I have to go back and make the same changes all over again.
Prior to WordPress 2.6 I was doing the hacks directly in the core files, but now that I’ve upgraded I’ve taken the marginally better step of placing all of the hacks in the functions.php file that accompanies the site theme. It’s not perfect; I still have to modify the core files, but now I’m simply commenting out the functions I need to modify, copying them into functions.php, and making the necessary changes there.
If anyone reading this knows a lot about WordPress: is there some easier way to modify the way WordPress outputs category, page, and link lists? The functions that handle the building of these lists seem to be pretty low-level and inaccessible via API hook. I’m probably (hopefully) missing something, but I haven’t seen anything in the documentation that shows how I would get to these functions.
I was just handed a floppy disk. A floppy disk. You know, floppy disks? Those nearly-square pieces of plastic that could store a couple of text files? I think they were used decades ago as both storage devices and coasters. Even more shocking: I just realized that this computer (my work computer) actually has a floppy drive. Those things that read floppy disks. How quaint; I didn’t know they still made those.
I also didn’t get quite as much sleep as I’d hoped to yesterday, but I’ll do my best to get the comic up tonight.
I’m not sure why I haven’t mentioned it sooner, but Mindomo is a Flash based mind mapping application. I’m using it now to organize my Maikeru On Game notes, and it couldn’t be simpler. The interface is modelled after the Office 2007 ribbon, so if you’re at all familiar with the latest incarnation of Office it shouldn’t take any time to get used to. Even if you’re not familiar with mind mapping or Office 2007 the learning cruve is almost nonexistent. If yuo’re looking for a useful brainstorming tool take a look.
Here’s something I’ve never understood: WordPress has a dedicated database table for meta user information. The idea is that all kinds of additional user information beyond the basics can be stored there. WordPress does not, however, include any way of adding new fields to the user registration page or user profiles to take advantage of this, sticking you with the small collection of custom fields it comes with.
Even worse, I can’t find any decent plugins that add this functionality. Cimy User Extra Fields is good, but it uses its own tables. Register Plus uses the built in WordPress user meta table—as well as providing a number of additional registration options—but it’s ability to add new profile fields is extremely limited. So much so, in fact, that it is practically useless. Wordpress Custom Fields looks really good, but I’m not paying for something I could, with enough time, build myself.
Which is probably what will happen. The ability to add custom user information seems like a no brainer, and I’m surprised that there aren’t any plugins dedicated to adding this functionality. WordPress has built-in support for custom user information, it just lacks any way for administrators to add custom user fields.
Update: On another kind-of related not, I upgraded to WordPress 2.5.1 last night and now I can’t assign posts to categories. Until this is fixed I probably won’t be making any posts, including to the comic, since comic posts are just regular blog posts in the Comics category.
Update: I’ve reverted back to WordPress 2.5 and that seems to have fixed the problem. If anyone actually knows what’s causing this it’d be nice to know.