Here We Go Again
Posted on
So it's Spring time once again and that means that for the fourth year in a row, I'm updating my site for the sheer hell of it. This year's update started back in February when I decided that I really needed to get on the tubes and write more about things I had learned in the hopes of helping others with similar problems or interests.
Every year that I update my site, I usually set out with some goals I hope to accomplish. This year was no different.
- New design
- Blog
- A new framework
- HTML5 / CSS3
- The usual javascript fun
New Design
With this year's update, I went in a completely new direction than the previous 2 versions, which were basically me see what innovative way I could put together a portfolio site. This year, I wanted to lean more towards a simple, blog-like structure and design. I still wanted to have the little sparks of javascript flavour but I wanted things simple.
Whitespace.
It was going to have more whitespace than past versions and more white space (the past couple versions have been based on dark colors).
Blog
One of the other major changes I wanted to do this year was to include a blog of some sort. I wanted a way to share the things I had learned (or discovered) with others and a blog tends to be the best way to do that. This meant I would have to figure out which platform/framework I would use as all of my other designs didn't have anything that would lend well to a blog. I would be starting from scratch and I wanted to make sure I picked one that I could live with for at least the next year.
This leads me to my next topic...
A New Framework
Over the past year, I have been getting my hands dirty with a wide variety of frameworks in various languages; PHP, Java, Scala, RoR. After some thought about which of them I was going to use for my personal site, I ended up going in a brand new direction.
Jekyll
For those of you that aren't familiar with Jekyll, I'll quote the description on the Github repo "Jekyll is a blog-aware, static site generator in Ruby".
I stumbled upon Jekyll by accident one day while browsing Github and thought I'd give it a try. After playing around with it for a little bit, it grew on me. This led me to decide to use it for the new site. There has been a couple of challenges while working with it but after some digging around, I was able to find solutions to all my problems (I'll post my problems and the solutions I used in the near future).
HTML5 / CSS3
This is the future. There I said it. I said what everyone else is also saying. Am I using it? Yeah for sure. Why wouldn't I? So here's how I'm using it.
Semantics
The semantics portion of HTML5 that the W3C is referring to is simply the tags and structure of the markup. Instead of using the generic <div> tag everywhere for everything, you're supposed to give it some thought about just what you're putting on the screen and then use a more appropriate tag to mark it up. Not only does it make the final product more human readable, but it also becomes more accessible to other programs and devices. Your information the same way everywhere.
CSS3
This one is pretty self explanatory. I used the latest and greatest CSS3 wherever possible so that the old school way of using images everywhere to achieve a certain look stays a thing of the past.
Offline & Storage
One of my goals for this site, and for all sites that I've been apart, has been speed. I wanted the user to be able to visit the site have things load as fast as possible (without any major server modifications). To help solve this, I went at from several directions. The first step was to have each page ready for rendering with minimal loading and what faster way to do this than to ready files straight from the file directory without running them through any sort of scripts. This is yet another reason why I choose to use Jekyll as my framework. Next up was to take those files and store them on the device for future use. This way the user doesn't need to even be connected to the Internet for the site to load. This is the exact reason why App Cache was invented. Faster loading in any situation.
H5BP
The HTML5Boilerplate is chalk full of useful and well researched things to help optimize your website or application.
Bootstrap
With Twitter's Bootstrap, you're getting a great starting point for a clean design.
Javascript Fun
You might have noticed the block of 10px x 10px squares on the main page...well I made that using javascript for the pure joy of it. As for the rest of the little javascript fun I put here, well I guess you'll have to find them for yourself. Happy hunting.
Additional Stuff
While I was working on this site, I ran into a number of problems that required some research and plugin development. Over the next little while, I'll outline each of these problems in detail and the solution I came up with...this is all part of the 'I will blog more' thing. I will also be opening up my site source on Github in the next little while so others can use it as a resource.