for when you have no internet…

Hello fellow haxors!

When I decided to redesign my website a week ago, I assumed it would undergo a few cosmetic changes, and perhaps a few code optimisations. I would NEVER have known it would turn out to become a complete overhaul like this!

Before I go into the technical details, I would like to WELCOME you all to the new BTHAXOR.COM!

The new website design focuses both on a very impressive design, however allows a lot of space for the content itself. It features many innovative elements such as the new comment system and a collapsible tag list, as well as scroll button on the side, to maximise your browsing experience.

So let me give you a quick insight as to what has physically changed! Each page is now made up of five elements: the left pane, the content in the middle, the sidebar on the right, the menu bar at the top and the footer. The home page now focuses on the post excerpts, so you have a good idea of what the article will be about. There is no longer any clutter below the post, and instead all the information is on the left side. Posts are alternatively colour-coded so they can easily be distinguished. When viewing a post, the left pane contains the post meta data such as time of publication, category, links to the next / previous post, a link to comment and tag lists.

In the actual posts, you can click on any image to view it in full size. At the bottom of each post are links to share the post on social networking sites like Twitter. Then the comments are displayed. You can now reply and quote other people’s comments, and they will be displayed in ‘nested’ style within one another, so you can easily tell who’s replying to who. There are a maximum of three nestings available, however the blog automatically puts the next replies one under another. When you’re posting a comment, you can now style it (e.g. make bold text) and however you see it in the textbox, that’s how the comment’s really going to look when posted! Admin comments (by me) have a thicker border.

The menubar is quite self-explanatory, so let me move on to the sidebar. At the top are listed my main social networking profiles (Posterous is the new addition to watch out for ), followed by a quick autobiography. Then a link to my RSS Feed, the search box and a collapsible tag list, which is sorted by most to least popular tag (only the most popular 30 or so tags are displayed). Then there is a new feature to my blog: the Lifestream. I have linked this to all my major social networking profiles, and it pretty much tells you the most recent 10 events of my social presence! You’ll probably see Twitter here most often Then are the usual categories, archives and tag cloud. The footer of the blog contains a copyright and (NEW) links to XHTML and CSS validation. I spent quite a bit of time validating my blog, so please click on those links to check it our

The other major change is that I now have a ‘Links’ page linking to friends’ blogs

Now we get to the technical details – some of the things you may not notice at first about the new design:

• I have spent a considerable amount of time running my code through Yahoo’s YSlow plugin for website optimisation, and this is where my blog really prevails. It achieves 80/100 for an advanced website score, and 100/100 as a blog! I will later outline some of the changes made.
• With Wordpress, you’d naturally want to make the most out of your blog through plugins. Although these do add lots of functionality to your blog, they SLOW DOWN your blog drastically! When these plugins call Javascript and CSS over multiple files (in my case, about 10 or so calls), you don’t think they’re that much of a deal – however combine all the files, and I received 500KB of Javascript being loaded on a page! Not to mention that it’s being called from multiple places which slows it down even more… So what did I do? This was a multiple-step process: I first combined ALL Javascript into a single file, and ALL CSS into a single file. I then used multiple compression methods for both of them to cut down my CSS from 50KB to 40KB, and my Javascript from 500KB to 300KB. I then ‘Gzipped’ these compressed files, which reduced my 300KB Javascript file (already compressed) to 80KB! Most modern browsers support Gzip compression, so what I’ve done is allow the Gzipped files to be called for those browsers, and the full files are called for browsers that don’t support Gzip. But the page size was STILL too large (200KB or more, as opposed to the recommended size of 60KB for a webpage) – so I incorporated a very clever caching system. Now although your VERY FIRST visit to the blog may result in a bit of extra loading time, the rest of your blogging experience should be a BREEZE! Your first visit may be 200KB, more than 3 times the recommended size, however CONSEQUENT visits are less than 10KB each! That’s nothing!
• I have a new Lightbox script for images! This one’s called Sexy Lightbox, and it truly lives up to its name The effects are very smooth, and images should load much faster.
• As previously said, comments now have a WYSIWYG editor (What You See Is What You Get). This should make commenting a lot easier, along with the new replies system. I explored Twitter and Facebook Connect for a while, but they turned out to be fail ideas…
• What does valid code mean? It’s not just so you can show off your validated status (albeit one of the reasons to validate code ) – it means my website will work how it’s supposed to in even more modern browsers, which increases my potential audience.
• One exception to this, however, is that I am using the latest web development languages including even the (not yet released) CSS3 standard – this may mean that old browsers (especially Internet Explorer 6) will not see my website properly. But frankly, I don’t give a damn. Anyone still using Internet Explorer 6 (or Internet Explorer at all, for that matter) deserves to suffer
• Finally, over the next week I’ll be trialing optimisations to the mobile and iPod Touch / iPhone versions of the site. These will be opposite to the desktop version: I’m REMOVING all Javascript from these so they load faster, with the same features!

By the end of the holidays, hopefully, I should get those posts I’ve been promising for a long time now For those of you that have forgotten, this includes my birthday post (I KNOW!), New Zealand photoblog and Discovery Tour journal.

ONE FINAL PERSONAL NOTE: I’ve been a long-time user and supporter of Twitter, and I’ve found these two levels of publication (blogging here and microblogging there) to suit me fine. But recently, I’ve found myself wanting to post things which require more than a 140-character tweet to say, yet aren’t formal enough to post here. Websites like Tumblr and Posterous have been brought to my attention from numerous people, and after trying both I’m pleased to announce that AT LEAST once a day, I’ll be posting at Posterous! I’ve found it to be a great quick-blog service that took literally 10 seconds to set up (you just send an email), and you can post ANYTHING (e.g. photos, music, videos, links, even Youtube videos!) which then get cleverly embedded into your post, from ONE email! There are countless other features I don’t have enough time to go into now, for example auto-posting to other sites like Twitter, but for now, PLEASE check my Posterous at bthaxor.posterous.com!

So once again welcome to the new website! I’ve been working long and hard on this, so don’t hesitate to comment with feedback and possible further enhancements. And of course, please comment if you think the website’s not displaying as it should be.

Enjoy!

Share this page: