An All New BlakeRohde.com!

I am happy to present an all new, fully redesigned BlakeRohde.com! This marks the first time I have spent a significant number of hours designing and overall developing this personal site and I am very proud of the results. This post aims to highlight a few of the new features and, hopefully unbeknownst to you, new technologies I am using in this latest revision.

One of the particularly fun aspects of the new design is that I have designed the layout so that any HTML element can be used as a full-screen backdrop. This not only allows me to theme the site with photos and images but also with subtle time-lapse videos or even dynamically drawn images using JavaScript and the HTML5 canvas tag. Feel free to dive into my HTML and CSS to figure out how I went about doing this. If time permits I may post a short how-to in the future.

Blake Rohde Logo
The all-new logo!

Another particularly fun aspect of the new design was in the creation of my new logo. The new logo is comprised of two characters "i" and "o" positioned in a way that resembles a "b". I think it goes without saying but the "i" and "o" are significant as they typically represent the abbreviation for input/output in the realm of software and hardware design.

Each blog post and project page has a recommend count which you can click to increment to show that you liked the relevant article. This is powered by the jQuery Recommend Plugin I built and released open source about six months ago. The plugin has been rebuilt from the ground up and you can check out the source code on GitHub if you are interested in adding similar functionality to your site or blog. The structure of the new version of this plugin closely follows the jQuery Core Structure Guidelines and subsequently a great jQuery plugin template I stumbled upon a while back.

HTML5 Logo
About the HTML5 Logo

With the latest iteration of this site I am now making use of the new HTML5 elements and CSS3 features that have been largely supported by modern browsers for a while now. I highly recommend Dive into HTML5 if you are considering using HTML5 in your next project. Mozilla also has great resources on the Mozilla Developer Network, and in specific, HTML5 and CSS. Note though that Internet Explorer versions 8 and older do not properly handle the new HTML5 elements by default so I also recommend using the HTML5Shiv to easily add HTML5 support for those browsers.

As I note in the new about page, I am now using LESS to make CSS development easier. LESS is a CSS preprocessing language that allows you to use variables and function constructs not yet found in CSS. LESS comes with a JavaScript plugin and Node.js package for compiling the LESS files into vanilla CSS in-browser (for development) and server-side (for production), respectively. I personally have a nice and clean Makefile-based work flow that allows me to compile and minify all LESS into CSS without even thinking about it.

I am now using Sidewalk to aggregate all my public social media data to display as a list of my most recent activities on the home page and site footer. I created an activity processor for each social media site, such as Twitter, GitHub, and Google+. Each processor is executed periodically to check for new posts from the service's API. Each processor compares date-timestamps with the last local database entry for that service, and if new entries exist, creates a new entry for each item. I am also using Sidewalk to send email alerts when comments have been created and are pending approval for publication. On a side note, some of these activity processors will probably work their way into Sidewalk's documentation as examples in the near future.

Another note-worthy change is that I am no longer using Disqus for comments within blog posts and project pages. I found that Disqus' service does not provide reliable SSL support, and thus viewers of this website would quite frequently be alerted that the connection to this site was 'partially encrypted'. As a result I now self-host all comments with an all new commenting system which allows for faster page load times, reliable SSL support site-wide, and easier comment moderation.

Aside from the new contact page and a complete revamp of the back-end logic, that just about covers all the new features and technologies introduced in this latest site revamp. I put a lot of time, effort, and thought into every aspect of this site and I hope you enjoy it as much as I did creating it. As always, I would appreciate any feedback and constructive criticism or recommendations!

Discussion

0 Comments

There are no comments for this post.

Post a Comment

Field names followed by an * are required fields.

Note: comments are queued and moderated before publication.