Blue Soul v3 :: v0.25b :: Running History

01/27/04

- Comment: God, a lot of effort put into the site today, mostly into corner images and making it all work good in IE as well as FB.
- Design: Added similar border from header to footer to create a more uniform look.
- Design: Added 'sliced' corners (via images) to left and right content divs, as well as to the page. Had to bring out a browser detect script out to make the page corner it work in both FB7 and IE6. Used VCW VicMan's Photo Editor instead of good ol' MS Paint to get the job done. I love how the entire viewport/page/screen looks like it's kinda 3D-ish. :D
- Code/Design: Added the cute border-with-squares used in H1s to the headings for the Navigation Panel by using the . With that success, I did the same to the Info Boxes and saved some code by removing the content_l_r_c div's which were used only to get the border effect. - Layout: Made the Site Counter its own section in the NavPanel. - Lyrics: Tweaked Cruisin' and Tell Me Where You Are after a lot of Googling. - Layout: Played around with the links in footer. Added ones to main sections of website, and changed "To Top" link to use JS instead of a HTML anchor due to difficulties with the a:active/a:visited CSS properties.
- Compatibility: Added to the use of the browser detect script by having more CSS edits made to have the site look even more accurate in IE6.

01/31/04

- Compatibility: Removed IE-modifying javascripts from last update and replaced with the a modified version of the star html CSS hack.
- Development: Working on a header for song entries on the Lyrics page, which will have related info such as title, version, source, credit/modified, etc. Currently uses a table to organize the info, but most likely will simply use CSSed divs to create the border effect I want.
- Design: Edited CSS so that links now appear uniform (colour for footer's "Main/Index" link was inconsistent). Also re-organized CSS entries more based upon type rather than class (ie. all 'a' entries are now grouped together, rather than have 'div.1 a' and 'div.4 a' grouped with their parent div).

02/08/04

- Comment: Realized that I did not record the changes from 02/02, and thus forgot what I did. However, one change was adding colour to the links in the "Related Links" infobox.
- Content: Added a poll (thanks to Bravenet). Couldn't center it properly, so I had to use a left margin to achieve the effect. Still need to see if it displays OK in IE though.
- Design: Moved "Legal Info" infobox's content back into the footer, but had to condense the displayed info in order to fit the design. The note on images/trademarks/owners and the disclaimer on now part of the tooltip to the "Legal Info" link. The note/disclaimer will be added to the content of the Legal page once I start on it.
- History Page: Applied latest layout/design to the History page to test its ability on vertically-enhanced pages. Had to make some style changes to accommodate the page's unique needs.

04/25/04

- Comment: Apologies to the 20 or so people who visit this site regarding the lack of updates. As usual, I lost interest in updating, but it's exams period, so I am bound to find ways to procrastinate... hence today's update. :P
- Playlist: Got the third computer back up a few weeks ago, and hence the MP3 collections from various locations were reconciled to create the mammoth of a playlist. Also took the opportunity to update the page's layout to the most recent (working) version, 0.25b.
- Development: Awaiting for a new authoring tool I've discovered, Nvu, to be updated so that I can emulate the SSI advantage of having duplicate code being stored and called from the same location as to save bandwidth. This also makes authoring/updating a LOT easier since I don't have to update each page by hand.
- Blog: Added Blog section and thus fufilling a goal I established only a mere 8 months ago! I do *plan* on posting a blog on a daily basis, but we'll see how it goes.
- Index: Updated index page to a couple links to the blog.

01/28/05

- Comment: It's been a very long time since the last site update due to my 8-month work term at Microsoft. But I'm back, and the site will slowly see changes, possibly for the better.
- Buttons: Replaced the validation and assistance buttons on the home page with updated versions. Once I finalized my selections, I will implement the changes to the other pages.
- Content: Updated hero copy of home page to reflect my current situation.
- Print CSS: Added a print CSS to the home page for better accessibility. Should be implemented on the other pages soon. Thinking about adding javascript links so that people can print/e-mail pages, just like many other sites have.

01/30/05

- Comment: The lack of the template/SSI alternative is getting to me, as it is stopping me from updating the other pages with the latest changes, like updating the buttons on this page.
- Now Playing: Switched the now playing backend from Do Something to AMIP. Do Something was crashing Winamp way too often, especially when playing the streams from DI.fm. Not as much work as I thought it would be to make the switchover, but it does require an external application (cURL), and AMIP doesn't support variables previous song, so only the current song will be displayed.

02/28/05

- Lryics: Added "Conjure One - Sleep", "Aven - All I Wanna Do", "Tim McGraw - Live Like You Were Dyin'", and "Bob Carlisle - Christmas Shoes".

03/08/05

- Counter/Survey: Replaced Bravenet.com counter with a WhatCounter one. Removed the Bravenet survey. Reason for changes was that I finally realized the Bravenet components were causing popups on my website. Apologies to anyone who had to suffer through them (I didn't due to my l33t Mozilla Firefox web browser's popup blocker). Change only applies to main page until I find a suitable template-based web editor (hopefully Nvu soon).
- Print CSS: Removed unneeded mouse cursor CSS declaration. Plans to remove all other unncessary code noted.

Blue Soul v2 :: v0.25a :: 01/21/04 - 01/25/04

01/21/04

- Inspiration: The site layout started to bug me as I was going through a website review forum and realized my site looked too boxy, too modular.
- Design: Split the "Consider the Following" box into separate divs ("Info Boxes") for each section and modified borders to create a more flowing look.
- Design: Main left content area modifed to remove the box look and to emphasize the title a bit more. Fits better with the new Info Boxes as well.
- Design: Background colour of left content made uniform to reflect the flowing look
- Content: Legal info moved from footer into an Info Box, and "To Top" link moved to footer.

01/22/04

- Design: Added browser "Back" and "Forward" links at bottom of page
- Content: Removed signature from Main Index page
- Design: Right content area (Navigation links) had font size reduced by 1pt to 11px
NOTE: Above changes are only reflected on the Main Index page until I am comfortable with the modified layout

01/24/04

- Design: Added small square boxes at intersections of <h1> heading and main content border and Info Boxes and main page border.
- Design: Added page top border image and header background image on right side; changed border between header and navbar to compensate.
- Content: added link to "Articles" (future project)

NOTE: v0.25E

Blue Soul :: v0.24x :: 12/21/03 - 01/21/04

01/06/04

- Inspiration: amazingly, up to 57 visitors (20 yesterday, 27 today); most still from UofTWeb Directory Listing, but plenty now from search engines looking for songs (with Jade - Real Emotions leading the list)
- Design: added link in "Music: Now/Was Playing" section to Playlist
- Design: added images in "Music: Now/Was Playing" section to reflect status of song
- Playlist: added link at bottom to "Lyrics" (planned section)

01/07/04

- Inspiration: realized most hits were looking for lyrics, so I started up a "Lyrics" section ASAP
- Lyrics: added 4 songs: Brown Eyes - Already One Year; Dutch - My Time; Robbie Rivera - Girlfriend; Jade - Real Emotion
- Code: after adding a new folder for "Lyrics" and realized relative links for <a>, <img> and other similar tags were no longer effective; absolute links implemented on current pages

01/11/04

- Lyrics: added 2 songs: N&K feat. Denis The Menance - Cruisin' (Beachballin' Again); Milk Inc. - The Sun Always Shines on TV
- Legal: changed © date to reflect 2004 as well

01/13/04

- Lyrics: length of the page was getting on my nerves, so I implemented default hiding of all lyrics, which can easily viewed (and hidden again) by clicking on their respective link; required modification to CSS and added explanation of this feature to page's introduction

01/19/04

- Design: changed main colour to a much darker blue, a lot closer to the navy kind than the baby kind I wanted from the beginning. Changed links colour of footer to look better against the darker blue, and disabled the header image and other background images until I can fix the background colours.
- Version: changed to 0.24c to reflect the colour change
- Lyrics: added 2 songs: Ago - Tell Me Where You Are; DJ Yanny Presents Terraformer - Won't Forget These Days (really should have done it earlier, they kicks ass)
- Design: added crosshair cursor when user mouseovers the playlist items

[Insert history for 0.20 / 0.21 / 0.22 / 0.23E ]

Dark and Syndicated :: v0.10 :: 11/27/03 - 12/21/03

Goal(s): Finally create the personal website I always wanted, but never did get around to. As with prior web sites and layouts, the intention was to produce a design that was simple and functional across all major user agents (internet browers). Colours were to be limited, but to provide a crisp and clean look. A simple header, nav bar, nav panel on the right, main content area, and footer was the basic layout decided on. Images was given to be lacking/lackluster due to my limitations with image-creating skills.

Comments: Right from the top, I was thinking of a site in 'cool' colours, primarily blue with black and gray as the accents. However, somewhere along the way, I got lost and found myself relying on the black/purple look I fell in love with as member of a Infantry Online squad called Darkslayers. I have used black as the main background colour for some prior websites: Data Processing HTML/Flash assignment (in grade 12) and CSCA02H3 HTML assignment (in first year of university). Thus, black in the background, a very light purple (almost blue) for links and red with underline for hover links (carryover from Fowah).

Not only did the colour scheme give me difficulties, but I had to learn XHTML if I was to update my web designing skills. Thankfully, I had a lot of experience with HTML 4.01 Transitional, and with the help of a few helpful online tutorials and articles I Googled (and from Webmonkey), I learned the few, but important, differences between HTML and XHTML. The one thing that gave me most trouble about this phase was getting my fingers to stop typing endless <table> tags and learn to use <div> tags.

The initial coding went well as I was excited in adapting to XHTML, but I steadily lost interest in the project (exams were coming up, reviews at work to be done and recieved and whatnot, so I only hit the keyboard once every few days; progress was slow. One of the main problems I had was learning how to use <div> to create layouts which included divisions beside one another, ala a table with 3 rows, and the middle row split into 2 columns and the other rows spanning the whole width of the table. More research was needed to understand the float and clear attributes (?).

I did not originally plan to have the version number/name displayed in the navigation bar (right-hand side), so when I went out to do so, I realized that Internet Explorer was not displaying the page the way I desired, although it looked fine in Mozilla Firebird (my new web browser of choice). So, I went back to one of my reference articles I Googled and lifted the basic coding from it (I still do not quite understand the point of having width:200px; w/idth:200px; wid/th:200px; (?), but oh well) and adapted the template to what I had at the time. Eventually, it worked out as I was able to get the version section and navigation panel aligned to the right in pair to their respective left-based divisions, and have the footer only applicable for the left-based divisions. The key was the use of margin-right for the left-based divisions to prevent them from overlapping with the right-based divisions.

-header took a LONG time to finalize
-got sick of black, page margins

Conclusion(s):

First and Worst :: v0.01 :: 10/02 - 11/27/03

Goal(s): Create a temporary design until website layout and content was determined for a potential employer-targetted site.

Comments: Designed to be a temporary placeholder for the actual site itself, this version was very simple and actually quite gosh-darn awful in retrospect (not that I did not realize its grotesque-ness back then). It included a splash page (ewww...) that was not even centered vertically. Rest of site was just one page hastily slapped togther (based upon my earlier code for Fowah Chinese Herbs) and used the tagline

Success, no less.

Links were added to previous websites as well as my resume at the time.

The colours were very plain (background was light blue, text was black) and although the code was structured well (relative to my skills back then before my graduation to XTHML of using the infamous nested tables for layouts), the file was quite bloated given the (lack of) content.

Conclusion(s): God, what a waste of webspace. I feel I owe UofT an apology for taking up those few KBs on their server.