Unfinished Thoughts

The Personal Website of William Flake

Posts Tagged 'Web Design'

Unfinished Thoughts 2.0

It's been a big week for this website. Almost everything is new. The server is new. The design is new. Heck, there's even a new blog post! Let's dive in and I'll show you around.

The Invisible Stuff

For the past year, I've hosted my website with A2 Hosting. A2 has been a great host for me. It gave great performance, unlimited storage and bandwidth, and lots of extras that make web hosting a little easier.

About a week ago, I was browsing through Twitter and stumbled across a link to NearlyFreeSpeech.net. As I read through the documentation on their services, I realized some important things:

  1. As little traffic as I get, I really don't need unlimited bandwidth.
  2. I only used one of the many extras offered, and it has been spitting back errors at me for weeks.
  3. Given these things, I was paying far too much.

Being a bit of a tightwad, I switched over to Near Free Speech's pay-as-you-go model rather than the all-you-can-eat model I used before. So far I have been nothing but impressed with the new service, and the 3-4¢ per day is much more attractive.

Read more...

Of Squirrels and Men

CSSquirrel Logo
Image by Kyle Weems
Logo of CSSquirrel.com

As some of you may have figured out by now, I like to consider myself a web designer. However, up until now, the extent of my online presence has stretched about as far as my bass performance skills have: playing around in front of my family and a couple of friends. Case in point: this website.

As part of my playing around, I follow the postings and thoughts of many notable members of the web design community. One such developer is Kyle Weems, also known by his online persona: CSSquirrel. On Saturday, he posted a blog entry describing how his site's cool animated header works. It was an interesting read, but what stuck out in my mind was how simple the code was.

The Existing Code

As mentioned in his post, the entire code appeared as follows:

$(”#branding”).mousemove(function(e) { mouseX = e.clientX; $(”#cloudLayer”).css(”background-position”, Math.floor(mouseX / 4) + “px 0″); $(”#mountainLayer”).css(”background-position”, Math.floor(mouseX / 3) + “px 0″); $(”#hillLayer”).css(”background-position”, Math.floor(mouseX / 2) + “px 0″); $(”#forestLayer”).css(”background-position”, mouseX + “px 0″); });

The gist of this code (written in jQuery) is that whenever the mouse is located in the main header, the script tracks the mouse's position, and moves the 4 images which make up the header at different speeds. It worked really well, especially given how little code it took. In my view, though, it had one major problem: there was a rather unsightly jump as the mouse entered the frame. The reason for this was that the images are positioned based solely on the mouse's position, with no respect given to the existing position.

Read more...