What's a squarehappy and Why Do I Care?

Some time during the year 2003, squarehappy was born. A product of love and curiousity, squarehappy was constructed by myself, Michael Huch, as a home to create, manipulate, and generally toy around with the world of web design and programming. squarehappy is an experimental playground that marries new techniques in web design with accessibility and usability, building websites that are both easy on the eye and easy to use.

Ever since I connected to my AOL account for the first time, I've been fascinated by the democracy of the world wide web. The web is a place where anyone can have just as much say as the next guy. You can set up your own little outpost and the world can take a peak inside from their living room. So that's what I did. Through many iterations, each for better or worse, all of the personal websites I have maintained before have culminated into what you see before you. squarehappy is, I hope for the sake of my sanity, the last site I will ever have to build for myself.

squarehappy's emphasis is on the technology behind the web and how it can be manipulated to produce unique and useful results. Not all the techniques presented on squarehappy may have real world applications presently, but have been achieved to provide the ideal solution or simply sought out as a technical exercise. You may learn from the examples just as I did when I battled with bug after complication after incompatibility. I retain the most information when I learn by doing, so I figure I might as well let everyone else enjoy the fruits of my labor, even if they are crabapples on the whole fruit spectrum.

How squarehappy Works

squarehappy does what it does thanks to a heapin' helpin' of PHP and MySQL database to store the content that's filling up your browser right now. Actually, this content you're currently reading is stored in a flat file but that's beside the point. MOST of the time, when you the user request a page, the PHP hops into action, culling together various content, manipulating, and combining it with other data to make some kind of frankencontent.

I wrote pretty much all of this PHP. If there was a good reason for this site to be in development for over a year, then PHP would be it. Though I programmed the previous version of squarehappy, it was so ill-conceived that while functional was not a stepping stone towards a lifetime of writing efficient and powerful PHP and had to be flushed. I cleansed myself of the past and went into the next version with the goal of learning how code should be written. I can't say it was a resounding success however I made giant strides towards object-oriented code and programmers seem to like that phrase a lot.

I could've just bypassed the coding of a content management system (CMS) and gone with one of the many already-existing solutions out there, which this version of squarehappy more closely mirrors anyway. But I didn't want to forego the learning experience that this would ultimately be. Most importantly, I wanted something up to my exact specifications, that could be tweaked on a whim. My coding is entirely self-taught. I know nothing about best practices other than what my experiences have taught me and my coding tends to differ greatly from what I've seen out there. The mitigating factor of tweakability lead me to write my own CMS from scratch due to the fact that I can't read others' code and hence change it to suit my particular needs.

Separating Content From Presentation

There were also certain features that this version of squarehappy needed to have that were not commonly found in your average CMS, and not to the level of integration that I would require. Most importantly is the style switcher, the only real excuse to attach a "2" to the end of squarehappy. The most important feature of squarehappy for me is the ability to apply any of a number of styles to the same HTML template and achieve a variance in aesthetic only limited by your imagination and understanding of Cascading Stylesheets (CSS). I am fortunate that at this point the only thing that can stop me is imagination. I don't consider myself a great graphic designer but I never get tired of creating new website designs or templates. I would invariably want to use one of these new designs for squarehappy, requiring me to restructure the whole site and very nearly start from scratch.

Thanks to the style switcher, this is no longer an issue, and ensures that squarehappy will never be succeeded by a 3, at least not for aesthetic reasons. The style switcher also forces me to rely on nothing but the power of CSS for constructing a layout. Compounded by this limitation is the HTML template itself, featuring the bare minimum of markup needed. Admittedly these are artificial constraints put in place to challenge my CSS abilities, but are also necessary to maintain manageability of the HTML document and lend to accessibility. Save for the sparingly used divs, you will find hardly any markup that fails to semantically identify the data it contains.

Also of note is the lack of specific class and id CSS identifiers in the markup. That isn't to say that they're nonexistant, I just removed all but the essential identifiers, instead relying on the various CSS selectors at my disposal. This probably represents some obsessive compulsion to separate content from presentation, but I see nothing but benefits. When CSS3 becomes universally-supported (read: IE-supported), the power of selectors will manifest itself further to the point where we may no longer require the assistance of classes and ids except in few, specific cases. I guess I'll be prepared.

This essay is ongoing and to be revised.