New Look, Valid XHTML
Posted on 12 July, 2009I’ve been working furiously on two projects as of late. First off, My Life Is Pirate took the first step and now has a logo. I basically took a hand drawing and turned it vector. Sweet. Next, if you haven’t noticed, System Anomaly has a new look. I haven’t finished it fully (still got a little bit of sidebar work and the gallery still looks like the old site), but it’s about 90% complete. It was a ton of code work to get many of the small, but neat features working.
I retooled the Twitter integration in the site. The Javascript was, at best, not. It wasn’t valid XHTML 1.0 strict (which is what the site is now), nor was it API efficient (every page load hit Twitter’s API). The new code is PHP and works beautifully. If Twitter goes down, I don’t. It also caches my updates so that it doesn’t have to hit Twitter every time the page loads – just every 10 minutes (if the page is always being loaded every minute). There was a bit of custom and non-custom code involved, and I’ll cover it later in the post. My only issue with it is that sometimes the sidebar lags in its loading – it’s not Twitter, just the page itself.
If you take a look at the bottom of the page, I have a new footer. Looks pretty cool, hunh? What’s even cooler is that the footer is time sensitive. Depending on the time of day (based off CMT, not GMT), the footer will change from morning, day, evening, and night. City also lights up at the appropriate times. This was possible through some messy (as in, I had to work around WordPress) PHP. I’ll also cover it when I cover the Twitter stuff.
So, looking at the header, I’ve combined the header with a bunch of links – the title goes to home, and the rest go to their appropriate locations. No longer are the Archives part of the header – they are now listed out in the sidebar. I think this to be better.
So, the twittercode. It is based on a tutorial by Ryan Bar (Here and Here also). It works great in getting data from Twitter. I also needed it to cache so it doesn’t always hit Twitter (and doesn’t slow down my site when Twitter is down) but once every 10 minutes. I got a lot of the cache code (along with the pretty times) from the Pop Art Blog. I had to modify their code a little bit to made the pretty times the correct time (they had a two-hour offset) and made it a single user rather than multiple. The twittercode is contained in a separate file from the main template so I can insert it anywhere I wanted to without bloating any files. So, the code.
Beautiful, in my book. Where you want to put the twittercode in the template, you just drop this in.
Super simple, hunh? The footer time-sensitive code is just as simple, though not as straightforward. Because of the way WordPress parses code, and the fact that the city and the footer background are located in two different parts of the template (css and just an image), I had to repeat the code twice – modified for each section.
In the footer, I put this.
In the header, I put this.
The code in the footer defines if the city is the night image or the day image, while the code in the header selects one of four specific CSS files that calls on one of the four sky backgrounds for the footer.
So in the end, the site looks new, is XHTML 1.0 Strict compliant (ignoring some old posts with non-compliant code in it), and all is good.
I like the new look. I really like the footer. It’s pretty cool. Congrats on the XHTML Strict. Mine used to be, but it isn’t anymore. I don’t think I have it as Strict anymore anyway. I think it is Transitional, but it still isn’t valid. That’s mostly because of WordPress though.
What is My Life as a Pirate supposed to be? Nice logo.