After a wild couple days, it's live. Well, live-ish. Blick Blocky Retro, the ninth iteration of this veritable site, has made its debut.
Why?
I've been working on this redesign for close to a year now. It has simmered, occasionally come to a boil, only for me to turn off the heat and step away from it. However, recent troubles with Dreamhost have finally made me flip my lid. The site performance has been sporadic with not-so-uncommon 500 errors and I just couldn't take it anymore.
Like a midnight dash to escape the rent, I've pushed this design live on a new dedicated server — well, old, actually. It's the server that powers SidebarAds. I also completely rewrote the site from scratch using CakePHP 1.2 — although this is still the beta. I haven't had time to update things, considering this last minute change.
What was wrong with Dreamhost?
For the longest time, I advocated Dreamhost and when i was on their shared hosting environment, things were simply peachy. Seriously. I experienced little to no downtime and decent performance. Then, they introduced a new server called Private Servers. It's supposed to offer more control over resources and better performance. At least, I think that's what it said. Instead, I got constant downtime, even when there wasn't much load.
I still have a bunch of other sites on Dreamhost and I have no plans to move those off any time soon. Moving sites is a hassle. For example, I screwed up the MX record when I changed DNS servers and received no email for 12 hours. Wheee! Thankfully, everything should be back to normal.
What about the design?
I should probably talk about the design, shouldn't I? Well, here it is. Obviously, this is heavily inspired by all the retro 70s chic that's going around. However, I wanted to take this redesign to simplify some things.
Splash Page
As some may remember, the "main" page of this site was at the /jonathan/ sub-folder. There was a splash page that had a brief introduction to who I am. Why did I have a splash page to begin with? Turns out, there's a story to that, and what's interesting is how often we see this happen in every web site.
The main page was originally a family portal with links to myself, my wife, and eventually, my first born. However, despite all my efforts, my wife never took on the task of writing and due to family concerns, the other link was removed. By this point, however, I had already established my section as the default place to go to. Any time I left a comment somewhere else, it'd point to my section, and not the index page.
A few months ago, while thinking that I'd get rid of the splash page, I've been using the clean Snook.ca as the URL that I leave everywhere. Now that the site is launched, I have finally gotten rid of the splash page and made it the main page. No more /jonathan/. Just / is okay by me. (Slash is okay by me, too).
It's three-dee!
The original idea came from a design comp that I had put together for Snitter. I took that and continued to work it into what you see here before you. One of the interesting parts was trying to figure out how to get the elements to wrap. For anybody that has been doing CSS for some time, they might think, well, that'll be a couple elements with some a series of sliding-door images.
It seemed like a hassle. I didn't want to have a bunch of CSS to apply different background colours and I didn't want to have 3 or 4 elements every time I wanted to do an element that wrapped over the slanted edge.
My initial experiments started in Internet Explorer, since it's the largest hurdle. Get the hard stuff out of the way, as they say. Much to my surprise, IE was the easiest part of the equation. Using the matrix filter, which allows DOM elements to be manipulated, I was able to take an empty element and warp it across the slanted edge to get the effect that I wanted. Awesome! It even resized the element for me. This is all it took:
.transform { filter:progid:DXImageTransform.Microsoft.Matrix(si zingMethod="auto expand", M21="-.5"); }The sizingMethod property resizes the element appropriately and the M21 is one of the points upon which the transformation occurs. To be honest, I still don't quite understand how matrices work but I finally found a number that worked, so I won't complain. My skew was perfect!
But what of the other browsers? Canvas was the most universal solution I could think of. So, I set to work dropping canvas tags in all the wrap containers and applying a matrix transformation:
var ctx = e.getContext('2d'); ctx.fillStyle = bg; ctx.transform(1, -.5, 0, 1, 0, 0); ctx.fillRect (0, 20, w, h);Notice the -.05 in there is exactly like it is in the IE filter example? Yeah, it's the same thing. Within a year, however, I'll be able to replace this code with CSS transformations. Webkit/Safari already support this and Firefox 3.1 is supposed to. I haven't looked at Opera support but it wouldn't surprise me to see it come down the pipe.
Multiply blending like Photoshop
Now, here's the other problem I ran into. While I had the elements wrapping, I still had to manually set the wrapped element background colour manually using CSS. Finally, in my desire to push this up live, I decided to find a better way. In this case, JavaScript.
In the original Fireworks design, I used the muliply blending option to create the darker overlap colour along the slant. I decided to do a little research to see if I could do the same thing with JavaScript. As it turns out, it's pretty easy: Take one colour value, multiply it by the other colour value and then divide it by 255 (the maximum colour value). The default RGB of the slant was (235, 242, 204).
I snagged the background colour of the original container and then split it into its composite parts of red, green, and blue. Here's the JavaScript magic:
rgb[0] = Math.floor( rgb[0] * 235 / 255 );rgb[1] = Math.floor( rgb[1] * 242 / 255 );rgb[2] = Math.floor( rgb[2] * 204 / 255 ); At this point, I decided to strip all the canvas tags I had in the template and moved it to the land of JavaScript. The script is now responsible for finding all the page containers, dropping canvas elements in, and making them look pretty. Then, if people don't have JavaScript, at least they don't see square elements in awkward places.
Didn't you say simplify?
Oh right. As I was saying, the simplification came both on the server-side — by rewriting all the code — and the client-side — with less content on the page and essentially a two column design instead of the 3 columns I had before.
With the backend getting a nice rewrite, much of the code has been simplified, uses more CakePHP idioms, and just simply uses less code. As a result, the performance of the site should be improved.
On the content side of things, I was beginning to worry that the sidebars were getting too bulky. Links to projects and books have disappeared but Delicious links now appear on every page. I might switch this up a little bit but haven't entirely decided now, yet.
It's not done
Despite all this, it's definitely not done. The comments, for example, were just thrown in so that people could get back to commenting. The design of which will change dramatically. I've also got a few other tweaks here and there that need to be made. But now that I'm on the new server, I can relax.
If you come across any dead links, by all means, let me know. I have literally 7 years of debris strewn about this site and I'm sure some of it got missed in the transfer.
It has been almost two years with the old design. Plenty of people liked it, and so did I, but I wanted to experiment and this is what I got. It's not perfect. On a technical level, though, I'm happy with it.
I hope you like it.
http://feeds.feedburner.com/~f/snookca?i=i3bwdi.P</img> http://feeds.feedburner.com/~f/snookca?i=Tiqr3f.p</img> http://feeds.feedburner.com/~f/snookca?i=HTxE05.p</img>Me shum...
Titulli: Blick Blocky Retro 
Sat Jan 17, 2009 8:16 pm
