When I first created my personal website, I was relatively new to web development. This and other decisions led me to release my site as a WordPress blog despite the fact that I never have been a WordPress fan because I've always thought that it is too bloated, and restrictive. It has always been my philosophy that not only do you have to make good software, but you have to make software that people want to use. WordPress, at least for me, does not fall into that category, so having to use WordPress to post to my blog has, in the past, discouraged me from actually using it.

Luckily, my summer experience got me heavily into web development, so I decided to rectify this issue. The new lukezilioli.com is a project I built from the ground up. It fits my needs very well, and I suspect the simplicity would be enticing to some would-be bloggers, but currently I only intend on using it for my own personal use.

Right now, much more energy has been put into the site itself, and little has been put into the content. Now that the new version of the site is up and running, I intend to change that, and will be posting more content.

Jeff Atwood has tried to make the argument that Software Engineering is dead. I see a lot of merit behind the software engineering process itself, so I don't agree with Atwood's conclusion, however I wholeheartedly agree with one of his arguments: there is a certain aspect of craftsmanship involved in making software products that doesn't exist with other forms of engineering. Nothing makes me feel like a craftsman more than web development, which at its core is a combination of many existing and emerging technologies. In the Shoutouts section below, I discuss many utilities that I have used and integrated while working on my site.

Shoutouts

Markdown

In the past year, I have fallen in love with markdown and its syntax. Because of this, I knew I wanted to write my blog posts in markdown, so I took the simplest approach I could think of. Every post you see on this site is a simple .md file. There is a file called meta.json which contains information for each blog post on the site. Each entry in this file corresponds to one markdown file. As an example, the post you are currently viewing is represented as:

"id":"13",
"title":"Welcome to the New lukezilioli.com",
"filename":"lzcom.md",
"format":"md",
"date":"2012-11-05",

Currently, I have to enter this information manually, but I plan to implement a page that enables me to create new posts directly on the site.

Sass

One thing I love about web development is CSS and the ability to directly command the layout of a page. While CSS is great, it definitely has its shortcomings. Designed to rectify many of CSS's shortcomings, is Sass. There are many great features of Sass which you can check out on their website, but by far my favorite is the ability to add @media queries to your CSS with a few lines of code using mixins.

The following, which declares that the header should have a left margin of 10px, unless the page is being viewed on a mobile device, in which case, it should have a left margin of 0px, would look like this in CSS:

#header {
    // Other styling for header
    margin-left: 10px;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 800px) {
    #header {
        margin-left: 0px;
    }
}

and like this in Sass:

    #header {
        // Other styling for header
        margin-left: 10px;
        @include respond-to(mobile) { margin-left: 0px; }
    }

This is much cleaner and easier to read. By looking at the styling under #header, we can easily see what was less obvious in the CSS example.

Such functionality is thanks to mixins, and a tutorial of how to do what I just discussed can be found here. Under the heading: "The Future of Media Queries in Sass"

Prettify.js

Prettify.js is a neat little javascript utility that allows me to have syntax highlighting on my site. Once a post has loaded, prettify jumps in and separates the code blocks into a bunch of <span>s, whose classes I can target in my CSS for syntax coloring. Neat, huh?

ZeroClipboard

If you are viewing this page on a computer with flash installed and enabled, you should see a little white file icon within code blocks. Hovering on this icon reveals its purpose: to copy the code to the clipboard. To achieve this, I used the plugin ZeroClipboard, which 'glues' a small flash video on top of the file icon. This video captures the click and uses flash to place text on your clipboard.

Twitter Bootstrap

Twitter Bootstrap is just fantastic. I relied on it much more this summer, however it was a great reference in styling things such as pre and code blocks.

FontAwesome

FontAwesome is really great. It offers tons of scalable icons that designers can add to their site. These icons look great no matter the size you make them, and no matter the device on which they are being displayed, no more retina woes with bootstrap's glyphicons.