17 Mar 2014

Web dev and programming is about automating and efficiency. That’s what I’ve been seeking with regards to making a sustainable vocation of designing and building websites. I benefit from those with a lot of experience who share it as open source. I have a lot of gratitude and admiration for the public community on github, elsewhere on the net, and locally in meetups. 

I hit upon Amicus a "clean project template for the Middleman static site generator that comes ready with Sass, Compass, Susy, and HAML. I’d been using these gems in stand-alone or rails projects, or wanted to try them. On top of that, it offers some compensation for my human error, resulting in better performance. And we don’t want to be re-inventing the wheel. 

On top of these layout helpers, an image optimizer and a favicon maker are icing! I only have to uncomment a few lines in the config.rb  file after creating the project folder with the $middleman new command, and I have all this packaged as a head start on a project. Pretty magical. I am set up for this Ruby-based template… I thought. 

As it turned out, some of its various elements weren’t in sync, i.e. the new version of Susy is ahead of Amicus. An issue’s in place, so Im hoping a Susy evangelist who uses Amicus will help with that. An all-in-one like Amicus comes with that pitfall. The upside is the opportunity to put all these new-to-me tools into practice. Its intelligent commenting in the files helped me along. The sample index page also helped. Middleman has great documentation. Ben Frain also wrote a tutorial for designers. I trusted nathos, having used his Sass Textmate-Sublime bundle. 


There are several html to HAML converters online that helped me acclimate.  HAML is easy to pick up quick. I followed some advice to use Markdown in combination with it where HAML is lacking, i.e. for <br> line breaks. An Emmet expert might prefer to just write in HTML. But Emmet is just a text editor extension, where HAML is an alternative to Erb; and as in Erb, you can insert Ruby functions and have dynamic content. The taste of programming made the process of building this garden variety website feel of-the-moment. Yet Amicus has been around for several years. It’s tried-and-true. 

HAML for the fav maker:

%link{ rel: "apple-touch-icon", sizes: "144x144", href: "apple-touch-icon-144x144-precomposed.png" }
%link{ rel: "apple-touch-icon", sizes: "114x114", href: "apple-touch-icon-114x114-precomposed.png" }
%link{ rel: "apple-touch-icon", sizes: "72x72", href: "apple-touch-icon-72x72-precomposed.png" }
%link{ rel: "apple-touch-icon", href: "apple-touch-icon-precomposed.png" }
%link{ rel: "shortcut icon", href: "favicon.png" }
%link{ rel: "icon", type: "image/ico", href: "favicon.ico" }
-# Place favicon.ico and apple-touch-icon(s) in the root directory


I had taken some pains to create a minified SVG favicon, however, I found that the Follman gem Middleman Favicon Maker integrated into the version of Amicus I used would only accept a PNG. I had to first update my Imagemagick and install the mini-magick gem. Some devices will surprise you with a dark background if you didn’t take that into account. So for best results I suggest not trying for alpha transparency. I wouldn’t bother with a border, as different devices will treat the edges differently. Make a shape as simple as possible. This will be most effective at 16 x 16px. Too complicated a design will only bring false hopes. 

I saw Aidan Feldman’s talk on Magickly and thought it would be useful to generate responsive images and favicons. He presented it as a gem for automating on-the-fly processing of user generated images in various sizes and with different effects where needed.