One of the new things I started using as part of this latest site redesign is a CSS framework called LessCSS. It's pretty handy in that it lets you write more concise CSS code that closely mimics the actual structure of your page, and I've found that it leads to much shorter CSS files. Well, when using LessCSS you're actually writing 'LESS' files instead of CSS files, but since LESS files are written using existing CSS conventions, the difference is minimal and the learning curve is ridiculously low.
The standard implementation of LessCSS is as a JavaScript file that parses a LESS file, turning it into a CSS file, all on the user's browser. There are pros/cons of post-processing a page on the user's machine, and I took some issue with a) the fact that it relies on the user having JavaScript, and b) created a noticeable FOUC (Flash Of Unstyled Content) on development versions of my site. (I can't put blame solely on LessCSS for the FOUC however. I was already incurring a bit of 'FOUC debt' with my reliance on additional resources like Google Web Fonts and Prefix free, so LessCSS was just making that situation worse.)
The LessCSS page does show some ways to run it on the server, but it was done using node.js, which I don't use. So I searched for whether someone else had already created a Java version of LessCSS that I could use/adapt, and of the handful that existed, they were either too old, too broken, too limited in how to use them, or too dependant on other stuff that I didn't want to bring into my server.
So, I wrote my own.
Fast-forward to now. I've got a working LessCSS filter/processor to work through the CSS requests on the server using Mozilla Rhino and Envjs, it's got some basic caching and other checks to save on processing (saves roughly 500ms on duplicate CSS file requests), and I was really proud of what I had put together.
Pride: it cometh before the fall
Now that the redesign is complete, I wanted to share the LessCSS filter/processor code (I've got this and a few other projects I want to put online), so this morning I created a GitHub account, then thought, Hey, let's Google those other LessCSS projects to see if they've made any progress. What I found was that, in the 2 months that it took for me to do the website redesign, SOMEONE HAD WRITTEN AND UPLOADED A NEW LESSCSS PROCESSOR THAT DOES EXACTLY WHAT MINE DOES.
The Fall: it cometh after pride
*deep breath*
Even though someone has already beaten me to the punch, I'll continue to work on my LessCSS filter/processor and upload it eventually (I've got that and a bunch of other projects I've been meaning to put online). It'll be my first project on GitHub, and my first real foray into online code contribution. Still, it's not helping to silence the part of me that wishes that guy's LessCSS processor project was uploaded, oh, about 2 and a half months ago! (Could've saved me about a week's worth of work dammit!)
Oh man this took a long time. I wrote back when I started this endeavour that I thought it'd take just a month of my spare time to complete. As usual, my estimate was way too optimistic, and 2-and-a-half months later (a month-and-a-half over-time (and arguably over-budget)), here we are.
There wasn't any single piece of work that caused me to take so long. I simply wanted to do a lot of things, too many things, all at once. Given that it's been 3 years since my last major site update, I initially started with just wanting to stay up-to-date - updating a lot of my server software (most of it is a major release behind), getting off JSPs and use a real template framework for creating pages, and taking advantage of HTML5 and CSS3. However, in implementing each of those goals, they led to even more things to do.
eg: while updating software, I also went and updated many of the libraries and frameworks my site is built on. A few of them have had major changes done to them (requiring a bit of work on my part to integrate it with my site again), others had simply ceased to exist (leaving me to choose whether to stick with an old version, or find a replacement that was still active).
It was a similar story with moving to use HTML5 and CSS3. HTML5 was mostly an educational thing - learning about the new tags and how to properly use them - whereas my CSS troubles were mostly about trying to get a CSS framework, LessCSS, to run on the server (it's normally run as JavaScript on the user's browser, but the way I was using it, it felt 'right' that I get it to go on the server). I think I'll write another blog post about this in future, since much of what I learned with this latest redesign was from the experiences of other web designers/developers on their personal blogs. It's about time I started posting some of the programming stuff I learned anyway.
A responsive website
Apart from the change in layout, colour, and typography (thank you Google Web Fonts), the only other thing really worth mentioning is that my website is now a responsive website. What this means is that the layout will change/reformat/adjust itself to the size of your screen, which is especially useful for those of you reading this on a mobile device.
I think this was the main driving force behind my redesign. I've already written about how I thought the old layout didn't look ideal on the iPad, then about how I cringed when I viewed my site on my brother's iPhone, to the point that it really made me understand how terrible the mobile web browsing experience really is. So much so that it made me go and do something about it.
If you're viewing this site on a large screen, then one way you can see how this site adapts to different screen sizes is to change the width of your browser window. If you can't be bothered doing that, here are some screenshots of my site at varying widths:
The only thing I haven't really figured out to further enhance the mobile browsing experience, is how to serve smaller images for smaller screen devices (and lower bandwidth connections). The thing is, nobody has really figured this out, and it's still being actively worked-on and debated. The 'responsive images' community have even enlisted the aid of a few browser developers to help things along and, while the solutions they have on offer so far are really impressive, there still isn't any universally accepted or cross-browser solution. In the meantime, I'm still serving the 'normal-sized' images, having them scale down to smaller screen widths, and sucking-up your bandwidth in the process.
As someone who is also on a rather limited 3G data plan where every KB is precious, this really sucks.
Although I've allowed the site to 'respond' to various screen sizes, I haven't had the luxury of testing across as many devices as I'd like. I was able to test across the usual selection of desktop browsers (Firefox, Chrome, Internet Explorer 7/8/9) on a large desktop screen, but for mobile devices I didn't have that many to choose from. There was my iPad and my brother's iPhone (Safari @ 1024px, 768px, 480px and 360px (and the iPhone may have that Retina display thing going for it, but it uses 4 'real' pixels for every 'virtual' pixel)), and two Android 2.x phones my parents have (stock Android browser @ 480px, 320px, and 240px).
Even with 4 mobile devices, I didn't have the opportunity to test other mobile browsers on Android (although from what I've heard, mobile Opera and Firefox are pretty much on-par with their desktop counterparts), nor did I have a chance to try Mobile Internet Explorer on a Windows phone.
Regardless, it felt pretty cool going home to my family's place one weekend, gathering all our mobile devices, and then testing everything on real devices - it really made me appreciate the challenge of creating a site that still delivered a good mobile experience when you have to squeeze everything down into a display the size of your fist.
My 'work area' that weekend
Updated wallpapers
Last year I updated a handful of my space wallpapers for widescreen resolutions (Now in 16:10 - Part 1, Part 2). Last month I updated those same ones for 1280x1024, then updated the rest of the wallpapers for both widescreen and 1280x1024:
As well as the First Dance short story I shared with you over February/March, I've also added another 2 stories (1 old, 1 new-ish) to the Writing section. These are from some long comments I made on friends' Facebook photos, initially as a bit of fun, which became a tad popular with other people (though not always with the recipient):
I think that's pretty much it. The only other things that are left to do aren't visible, or only really affect me: some CSS quirks I'm still trying to figure out, and maybe another responsive layout change to better take advantage of widescreen monitors. That, and the usual bug fixes I expect to do after a big piece of work such as this.
Either way, it feels good to finally get this thing out of the way. The large fraction of my year's spare time spent towards this project has made me feel like a recluse, shutting myself up in my apartment, toiling away endlessly working on this website... it'll be good to move on to other hobbies, get out of the building, and see some sunlight for a change.
Whenever I do a site redesign, it forces me to revisit this sections of the site that I don't usually think about, or don't normally pay attention to.
When I first put this website together, my main focus was the Campaign section since what I was working on most was my Red Alert campaign. I remember having all the other sections of this site as links in the sidebar, but crossed-out and un-clickable (back when leaving 'under construction' GIFs in places was still considered the norm). Then, when that was completed and my time freed-up for other hobbies, my focus shifted to the Artwork/Writing sections where I posted all the pictures I was drawing and silly stories I was writing. In the last couple of years, the focus has shifted to this blog.
So with this latest redesign, I worked on the blog first (it's usually the template for how the rest of the site will look/act), then moved on to the simpler, mostly-static pages of the Campaign and my dead-in-the-water Red Horizon project section. After that, I moved to the Writing area since I had a few new stories to add to that section.
This left the About and Artwork sections of this site, both of which can instil a feeling of embarrassment in me since they reach back the furthest in time and are sprinkled with reminders of things that aren't up to my 2012 standards.
In the About section I have links to screenshots of what my site used to look like, going all the way back to 2000 when I first put this site together using Netscape Composer, HTML frames, and littered it with pictures of anime-style drawings and quotes that had nothing at all to do with the site - and all in Times New Roman font!
And in the Artwork section I have drawings dating back to high school days which, as I've been reviewing them this past week, have made me cringe. Now that I'm facing these images from my past, I find myself thinking, over and over: OMG, I used to think these were GOOD?!!? I'm half tempted to remove many of the pictures from there, but then another part of me kicks in and prevents it from happening - the part that believes that this site should act as an archive of everything I've shared on the internet.
As much as I'd like to selectively filter parts of my past to make a better impression in the present, it wouldn't feel right for me to do that. In the case of the older versions of this site, it reminds me of what I've learned from all my previous years of web design and development. In the case of my old drawings, there's still a part of me that wants to pick up a pencil and start filling-up my sketchbooks once again.
I'm not really sure if there's a lesson to be learned in all of this, but it reminds me of all those those inspirational images/pages/quotes that rant about telling you to 'make a new you', to look to the future, etc, etc, but I can't seem to recall one that tells you to be proud of what you've done. Too often the theme of those things is to get people to start again, leaving the past behind, or 'shedding your skin'. Why? I wonder. Are people so often regretting their mistakes that they need to jettison their personal baggage on a regular basis? Somehow I doubt ignoring one's past and 'starting fresh' is the way to creating less mistakes, since the prevention of mistakes requires experience, hindsight, and the ability to reflect on the past.
If I choose to take down some of those older drawings, or screenshots of how my site used to look, how can I say I've really improved? If I take down those older drawings/screenshots, how will I know if what I do now, or what I'll do next, is really any better?
The past is there for a reason - it's not just for historians.
