The result of boredom

In Chrome 8

So I was bored yesterday afternoon and after fixing someone’s website for them, I thought, what they heck, I’m bored and I wanna play with CSS3. So I started the design of my new home page. After 4 hours I’d gotten the majority of the design down pat and I spent the majority of this morning and part of this afternoon adding in the CSS3.

Yep, all that is done with code, no images (except for the slideshow of course)

Stuff I used:

  • jQuery for the slideshow
  • border-radius for that nice rounded edges effect
  • box-shadow for that subtle drop shadow around the border
  • opacity for the semi-transparent black bar
  • @font-face for the custom web fonts (WebKit/FF4 only as .EOT wasn’t working out for me)
  • Google Font Directory for the two fonts (Orbitron, IM English SC)
  • -webkit/-moz-transition for the slow fade in/out darkening on mouse over otherwise it just cuts from grey to black. Obviously this only works in WebKit/Mozilla so FF4+/Safari5+/Chrome
  • text-shadow (admittedly not CSS3, but still cool) for that embossed. Apple-esque copyright footer as well as using RGBa for the shadows on the links.

The hardware that this is hosted on was all free (except the domain)!

Actually, I signed up for this deal (only because it was free!) and I couldn’t really think of what to do with the 2000’s space/bandwidth that they provide considering that the site was 1.5MB in size before I compressed the images some more. But it was still going to result in a site that was 1MB large which would have chewed through the 250MB’s of bandwidth in no time. I had 100MB of space so I was fine on that front.

To get around this, I leveraged Google’s huge network of servers as my own private sort of CDN. Google App Engine provides 1GB bandwidth for free so I uploaded the images (700KB) there (convenient since Google Apps for Domain also provides App Engine). Then I used a minimised version of jQuery (80KB) provided Google API and finally the web fonts (200KB) I pulled from the Google Font Directory basically reducing the bandwidth on the free server to a few KB in CSS and HTML/PHP.

For someone who hasn’t touched CSS and HTML for over a year, I’m pretty proud of that effort (and intensive Googling)

Anyways, check it out here!

Post-HSC Clean up…

Anyways, since I posted nada in December, first post of the new year!

Yeah, I know, the HSC was over months ago, but I’ve been that lazy and/or busy that I haven’t gotten around to cleaning up fully. I’ve shifted my computer from the office into my room.

Pros: I have privacy and can turn music up loud now! No need to stream stuff to my laptop now.

Cons: I’ve moved from a GbE connection to a 802.11g which tops out around 2-3Mbps (ie: ~250KB/s) which isn’t fun 🙁 took ~30mins to move 370MB of photos. I guess that what happens when you have a few double brick walls over 30m – even with my briilliant attempts to get a better signal, notice my USB-extension-tenna. Might get a 802.11n dongle (should push that up to 30Mbps)

Anyways, I love shiny photos.

Possible this screen is too big for the desk? Thinking of getting a smaller, say 19-22″ screen and setting up laptop with the 24″ (below) when I move out to Sydney.

OS X looks ohh so good on a 24″ screen 😀

Got a review of my Chrissy present (Samsung 2TB hard drive) coming up soon. That’s the black box sitting underneath the cordless phone.