Here’s something I did for fun in May as a proof of concept. It uses JavaScript and the canvas tag to render a Super Mario Brothers style tile-map with background. Try it in Firefox 3.5+, Safari 4+, or Chrome/Chromium.

Do Some Scrolling! or arrow keys to move view
small | medium | large

The original site was very well-coded; good markup, good uses of CSS. While I still don’t find EE to be much of a user’s CMS (and nowhere near as general-purpose as Drupal), making CSS and HTML changes was very straightforward. (I used FTP to upload the new images and to update one CSS file which, oddly, wasn’t controlled by EE…)

I thought of EE as an HTML/CSS management system before; I can see it really is. It’s a good way to be able to edit all the HTML that goes into each section of your pages without having to write PHP. So it’s probably great for designers used to making HTML-based sites who hate having duplicated HTML in every file.

There is a trade-off, though. You’ve got to use EE’s templating syntax to do any logic necessary in your HTML partials. It might be worth learning, though, for those wanting to avoid PHP at all costs.

This pitfall causes style breakage when enabling Drupal’s CSS aggregation/caching.

Symptom

Some parts of the page (e.g., the primary links menu) look completely different after enabling caching.

Cause

Drupal’s CSS caching aggregates all your theme’s and your modules’ CSS files into one file (to minimize HTTP requests). But it doesn’t look for @import statements in CSS when doing so.

Solution

Declare all your CSS files in your theme’s .info file:

and remove your CSS @import statements. (And as always, rebuild the theme registry for the changes to take effect.)

in your theme’s page.tpl.php.

Forgetting the closure prevents modules like Google Analytics from being able to put JavaScript at the end of the page body. Without that JavaScript, not much analytics…izing gets done.

This is a fairly common mistake, in my experience as a Drupal maintenance programmer.

I just didn’t find the system inspiring; as a user, it’s hard to pinpoint why, specifically, beyond saying that the administrative interface seemed unintuitive. As a developer and systems administrator I was also pretty disturbed when I looked at the source of the installation script: 4168 lines of PHP, nearly all global-scope code, with MySQL queries, HTML, and CSS interspersed along the way.

Generally, I don’t trust software that I would hate to have to maintain. It goes beyond code simply looking pretty; readability is important. Given The Magical Number Seven, Plus or Minus Two concept, it’s easy to see why 20 line functions with a handful of local variables are much easier to maintain and debug—and to proactively spot bugs in—than something that is essentially a 4000 line function.

The system’s core code looks to be written more modularly, but it’s obviously not as flexible as Drupal. It doesn’t appear to have much database abstraction (it only supports MySQL), nor a form API. Beyond the fact that you can edit the HTML of pages (but not blog entries?) on your site directly in the administrative interface, I’m not sure why this system claims to be the most flexible thing ever.

I told the installer to use no table prefix, but it still prefixed the tables with “exp_”. Apparently it didn’t like a blank prefix, but it didn’t complain, either. There is code to let the system work with a different table prefix, but it’s a dirty hack that involves at least one regular expression to be run for every query. From Expression Engine’s database query function (system/core/db/db.mysql.php):

I’m quite curious whether that regex substitution will break database fields with names like “exp_points.”

And, come to think of it, that strncmp() call could be a bug; the comment says “if the prefix includes” but strncmp() only checks the beginning of the string. Shouldn’t it be a call to strpos() instead?

On a more positive note, looking under the hood of other systems, like this one, helps me appreciate Drupal even more. Drupal really sets a high standard; once you’ve worked with it, especially if you’ve looked under the hood or done any module coding, it’s hard not to appreciate its well-thought out design and engineering. The FormAPI has particularly spoiled me rotten.

First, I installed PEAR (on my Ubuntu testing server):

and then tried to use PEAR to install uploadprogress:

PHPize? What’s that? There’s no phpize package; aptitude search phpize gives nothing.

A bit of digging and I found that PHPize is part of the php5-dev package! After installing that, pecl can install a module just fine:

Solution

After lots of output, PEAR left a final clue:

So I created /etc/php/conf.d/uploadprogress.ini, containing just this line:

I restarted Apache and now Drupal 7 reports “UPLOAD PROGRESS: Enabled”. Now to try it out….!

There are a bunch of common errors when installing the mysql gem, so Googling for the solution wasn’t instant. Luckily I found this post which showed the missing package: ruby1.8-dev.

Solution

and the MySQL gem installed fine.

It was also gobbling up CPU and memory.

Why does gem hang?

The distro package for Gem is very old, and this old version uses a lot of memory, causing lots of disk thrashing. Since hard disks are, ahem, a bit slower than RAM, this increases gem’s run time by probably a few orders of magnitude.

Solution

Update gem manually:

Looks like everything’s OK, but gem didn’t work anymore:

What gives? Notice the path, /usr/bin/gem. Is that still the old version?

Yes. This is what we get for upgrading gem without using Ubuntu’s package system. Well, in for a penny, in for a pound:

Done. Now to install Haml and Sass….

I was inspired by:

• A bed frame at IKEA which housed useful drawers underneath—it was pretty but it cost $300 and was flimsy.
• Lack of Sleep Number bed frame plans on the Internet—my eyes! The Googles do nothing!

My frame has a special area to house the bed’s noisy air pump. This gets the pump out of the way and quiets it significantly.

If you’re wondering why there are two pieces of wood per slat, it’s because the extra 1×4s I had lying around weren’t quite long enough. Sure glad I was able to make them useful!

Future work

Put in some nice drawers on wheels—I might buy the drawers from IKEA—and if the frame’s too short for them, add some legs and a bottom for the air pump compartment.

Source: Wikipedia, under the GNU Free Documentation license.

Then, the “secret message” idea struck, so I made the “secret” message encoder. (Warning: Only tested with Firefox 3. It also requires the canvas tag and doesn’t yet work in Safari.)

You type in a message and it will give you a link you can send to someone to view their super-encrypted message.

Always great to find an excuse to play around with <canvas>!