This rake file takes all of your js and css, listed in the _assets.yml file, and runs them through Jammit to concatenate and compress them, dramatically decreasing file size. Having said that, you will need to install Jammit for this script to work. It then copies your public release to your dev and qa locations, followed by opening Chrome and FireFox for testing. The QA section is set up for SSH, if you are so inclined.

To run, simply place the RakeFile and _assets.yml file in your root and run “rake deploy:test“.

-connatser

Today I “soft released” a static web site architecture named Hera. Hera evolved over the past couple of months out of some experimentation with Jekyll, Haml and Sass. Jekyll, created by Tom Preston-Werner, is a static blogging platform that is quickly catching momentum in the development community. After dealing with several hacking attacks and injections on my WordPress blog I was ready to try something new, and Jekyll fit the bill.

Going back to a static based website seems to be against everything I have built in my 15 years of development. I have always pushed for dynamic content, pulled from a database and manageable with an admin panel or CMS. Once I started digging into Jekyll I began to love the simplicity and granularity of it, watching it generate the structure. At the same time I had also began playing with Haml and Sass. Haml is a markup “beautifier” which will take a template created with more elegantly written syntax and convert that template to HTML. Sass is a similar counterpart to haml, but on the CSS side. Working together Haml and Sass will empower you to write simpler, more powerful templates to base create your website. Sadly, out of the box, Jekyll doesn’t have Haml and Sass built in. This is ok as Jekyll is a stand alone tool just like Haml and Sass, and not meant to be an end all tool.

Over the next few weeks I played with Jekyll, created Haml and Sass templates, tied that into Jammit to minimize my production css and js scripts, and deployed the whole package with an rsync script via ssh. Pretty geeky no? So my first phase was to create a rake based script to tie it all together…using Jekyll to build a site whose templates are auto-generated by using Guard and Guard-Rake to compile the Haml and Sass templates. This worked great so I decided to open source the structure and sent a private GitHub repo link to Garth Braithwaite. He thought it was cool and started handing me ideas on how to improve it. Initially we named the project “Hyde” but after some research it was apparent that name was very popular with similar architectures based on Jekyll. So I began to look for a new name.

This is where it gets really geeky, so hold on for a bit. I first went for “Hydra” thinking I was working with a multi-headed framework, but it is a popular name as well. I then starting searching for things related to the hydra and came upon “Hera”. Hera is the Greek Queen of the Gods who raised the Hydra to kill Heracles. I searched for a while and there was basically no use of the name anywhere, especially on rubygems.org. I snagged it and so “Hera” the static website architecture was born. I developed Hera as a Ruby Gem to ease install, automatically install the dependent libraries needed with Bundler and offer a few quick commands to simplify the manual commands I have been using to build a static website. Hera is completely open source and ready for contributions in any form.

So I present Hera, an elegant and easy to use static web site architecture. Implementing Jekyll, Haml, Sass, & Jammit to bring a static website to life fast. Hera was developed to reduce setup time, promote clean code, and instantly set up the typical dependencies when working with popular web frameworks. The next phases will include more template options, pulled in by using, for example, “hera —init —simple”, “hera —init —blog” or “hera —init —appsite”, etc. I plan on offering a quick prototyping structure to let developers create templates and request to add them to the hera gem.

Please check it out, fork it, contribute, critique, request features and most of all pass it on. Learn more about Hera.

Larry Connatser, my dad, was a man of great character. A veteran of the US Navy and the Vietnam war, son of a veteran of the US Army and Korean war, and grand son of a veteran of the US Navy and World War 2. I was destined to be military, and was on my way to Annapolis in 1992, but that is another story. This post has nothing to do with my work, any programming technology or design. Rather this post is in remembrance of my dad, who passed away 15 years ago today of a single massive heart attack. He was 49.

It was September 23, 1996, I was in college and living in the dorms at East Tennessee State University. I was one of those college students that really just got by. I didn’t study hard, and I really didn’t know why I was in college. I was the proverbial first family member to attend college, and an only child. Growing up where I did in Northeast Tennessee meant two things, get a degree and try to escape or get stuck in the line worker mud and hope to retire from Eastman Chemical Company or other local factory. So basically I was taking for granted that my dad was shelling out my college tuition in hopes that I would do better than him. He had a hard life growing up in the 50s, went in to the US Navy at 17 in 1964 just in time to ship off to Vietnam. Now at 37, I can’t imagine a 17 year old sailing half way across the world to fight a war he never really understood. It’s hard to think that my oldest son, now 7, is just 10 years from being the age my dad was when he was determining the coordinates to relay to the fighter pilots on where to drop napalm, or to his own destroyer on where to drop depth charges.

Once out of the Navy, sometime around 1975, he went to work full time for the US Postal Service as a mail clerk. He worked for the USPS for the rest of his life, day in day out doing the same thing. He worked hard and moved up the ranks until he finally earned a Post Master position in the small town of Telford, TN. This was around 1994. We lived in Bristol, TN at the time, which was roughly 40 miles of back roads from Telford. So, he drove every week day and most Saturdays to Telford, leaving at 5AM and returning close to 7PM that night. During all of this time he still found a way to keep me in the Boy Scouts, pushing me to earn Eagle, outfitting me for football, baseball, basketball and track for nearly 16 years, all without complaint. My dad never really showed emotion, quite possibly a military trait, so I never saw the stress taking its toll. Like most people in our area, he was a smoker, and from what I know since the age of 13…which ultimately claimed his life.

I never really grew apart from my dad, even after going off to college. I came home on the weekends, and always had lunch each Sunday before heading back to school for the week. So it was hard for me to accept a phone call from my mom on Monday night, September 23, 1996. Heather (my wife) and I were in my dorm room studying when the call came in. A panic call, mumbling something about dad being found face down in a parking lot. So we hurried to my Jeep, tearing down I-26, running every red light to get to the hospital. Once I got there I was briefed that he had suffered a massive heart attack and was found by a man who gave him CPR and was able to revive him. During the next week he improved, had another heart attack, and made it through a quadruple by-pass but never regained consciousness. During his stay in the hospital nothing else really mattered to me. I didn’t attend class, didn’t go to work, didn’t really care. Then on Monday 9/30/96 he finally gave out, kidneys failing and body giving in. We decided to let him go late that night, I am not sure the exact time. This was 15 years ago to the day, which is so hard to believe. I was 22, my girlfriend (now wife) was 19, and my kids were at least 8 years from even being considered.

I am writing this post to finally tell the story and to help remember who my dad was. This turn of events in my life made a big difference. I returned back to college in 1998, now with more passion, and by 2000 I had earned not only my Bachelor’s of Science but also a Master’s of Science in Engineering. Losing someone at that time in life can mature a person fast, which may be the reason the last 15 years has been a blur. My wife and I have been together since 1991, married since 1997. We have two sons, 5 and 7, that I would do anything for and will make sure they remember me like I remember my dad. Each day it gets harder to remember my dad, but to this day I still carry his TN Drivers license and a crisp $2 bill he gave me in my wallet.

RIP Larry Connatser – September 5, 1947- September 30, 1996.

Twitter Bootstrap

I started by grabbing the new Bootstrap CSS library made public by the Twitter engineers. This is a (enter non appropriate exclamation here) fantastic set of CSS declarations that are designed to work with the majority of browsers, simplify layout, add cool features, etc. So I took the base example and started working from there, added the Jekyll properties where needed. I ended up with a set of Jekyll based templates that can be compiled into the main site.

Jekyll

I talked about Jekyll above, as they really came together at the same time. With Tom Preston-Werner’s Jekyll library you have a Ruby based static site generator that will create a website based off of templates and posts. Once you get Jekyll installed, your templates created and some posts written you simply call jekyll --server from the command line in your site’s root directory. This will launch a WEBrick instance at http://localhost:4000, where you can browse your new slick static website.

Haml

So here is where Haml comes in to play. By default Jekyll does not support Haml, which is a simplified markup replacement…in so many words you write elegant Haml script rather than fugly HTML. This allows you to quickly mock up your HTML templates, then run the Haml parser to generate HTML files from the Haml templates. Easy right? Actually it takes some getting used to, being as old as I am . So I dug around and found a great write up from Mike Ferrier on using Haml and Sass with Jekyll Using Mike’s Ruby scripts I was able to set up a Haml parse, then run Jekyll to generate the site.

Sass

Next up to add to the mix is Sass, a CSS3 extension. The gist is basically the same as Haml, writing a set of CSS templates, rather than writing CSS itself. This is just butter, because I frackin hate writing CSS. I will do a poor job at explaining Sass, so you can check it out and learn more at the link below.

Guard-Rake

Wrapping it all up with some automation sugar, I use Guard-Rake. Guard-Rake basically is a watcher that monitors my Haml folder for changes. I am still working through the total workflow, but right now I have my Haml templates auto generating Html on change, one less step for me on the build. I plan to eventually have a watch on the Haml to parse, and also on a new Jekyll post to drop, which will generate the site and RSYNC that hot mess up to my Linode server.

So to wrap up, this may seem like a hell of a lot of work…and it really was, but just to learn the initial use of each tool. Now that I understand the flow, each tool’s role, and my workflow it makes so much sense. Compare the time to set up this set of tools to say trouble shooting a WordPress hack or injection and you won’t think twice about leaving WordPress/MySQL in the dust. Now think that you can have this setup sitting on GitHub and then deploy with Capistrano, then why would I ever want to log into a WordPress admin again. Where ever I am I can create a new post, drop it in the post directory, and deploy.

Props to those who made the great tools

• Tom Preston-Werner : Jekyll
• Twitter : Bootstrap
• Haml
• Sass
• Guard-Rake
• Linode : Awesomesauce hosting

Just drop this script into a RakeFile, put it in your project root, and run “rake commit”.

You will:

1. see a git status
2. be asked if you want to automatically commit the changes
3. if you say yes you will be prompted for a commit message.

More detailed information on the topic can be found on StackOverflow.

For example:

http://glyphdesigner.71squared.com/

A quick way that I found to show spaces and tabs in Xcode 4, before you commit, etc., is to use the Show Invisibles feature.

This will toggle your code view from normal, to showing tabs and spaces visually.

I also mapped this feature to Command+9 so I could quickly switch between showing and hiding invisibles.

http://particledesigner.71squared.com/

http://www.texturepacker.com/