Tag Archives: web

From Jekyll to Hugo

Sometimes simpler is better.

After being away from Orbital for a bit, I started revving my engines a bit by trying a new project on the subway and hacknight. Project Munchausen is about doing some writing and exploring some ideas – so I tried to get myself away from doing too much programming on it. Since it is just writing, I wanted to avoid falling into the trap of using a big content management system like WordPress.

I started exploring with the first Static Site Generator I know of: Jekyll. Jekyll powers the Pages feature on GitHub. I got really far, but felt really constrained. It felt like Jekyll was trying to push me to turn my site into a blog, like the downhill path of Jekyll was to create a blog.

I didn’t want to create a blog – I want to make something that’s an exploration of a subject. It will change over time, so it should have an RSS feed generated, but I didn’t want to only have a timeline view of things.

I don’t know how I happened on Hugo but it seemed perfect. The templates are simple, Go is a pretty simple language to use, and the organization of the content is really easy to understand.

In Hugo, you have a directory named content. Under that directory, any other directories are Sections.  Content goes in a section as a Markdown file. Templates can iterate over those sections and their contents.  Easy peasy.

So far, I’ve gotten farther with Hugo in a few subway rides than I have with long sessions wrangling Jekyll. My goal is to put something up on the web in a month.

SVG icons in Orbital

Screen Shot 2013-08-06 at 5.51.25 PM

In Orbital Feed Reader I’m trying to make sure that I’m doing things in smart ways – I don’t have much time to work on it. One thing that people do when they create software is make icons – lots of them for different sizes. This has always seemed strange to me – most icons aren’t photos, so I don’t get the point.  There’s a graphics format called SVG – Scalable Vector Graphics  – that automatically resizes itself at any resolution.  It’s smooth and very small – and all modern browsers support SVG.

So I’m trying to use SVG for any icons that aren’t available as unicode symbols.

Those two icons are free icons for Feeds and OPML and they are both SVG.  This was such an easy choice that I don’t know why everyone doesn’t do it. The only thing that was a little off is that the OPML icon had a little bit more blank space than I wanted, so I edited it in the free, open source SVG editor Inkscape. Here’s the new version I made.

Creative Commons License BY-SA 3.0
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

The folks over at liquidorb made this icon available under a CC-BY-SA license so I’m giving them credit and making my derivative work available under the same license.

Unicode Icons in Orbital

Font icons are kind of fashionable in web development these days. What’s awesome about them is that you get all the clever wonderful benefits of how good browsers are at rendering webfonts. In a way, a web font used for font icons is like a png sprite for SVGs – you get one server round trip and then a bunch of reusable images.

It’s a good idea if you need to show some custom icons. Me, I’m too cheap for that. For Orbital I’m trying to make sure that there is a very small footprint. Rather than using a custom web font I’m just getting creative with the unicode tables.

Screen Shot 2013-08-06 at 5.40.43 PM

As far as I can tell, unicode has some pretty easy to understand symbols for add (+), refresh(⟳) and edit(✎). So I get decent, scalable icons for zero server round trips!

New Theme: Fluffy Clouds

When I’m having trouble writing something, I futz about with design instead. Hopefully, this feels like a summer sky to you. It still feels a little wonky to me, I can’t figure out what is wrong. What do you think? Too busy?

This is a child theme of thematic and the source to fluffy clouds is open and available on github. The geeky details: All css3 changes, I added multiple columns to make it easier to read on wider screens, all the clouds etc are done in CSS3 with no extra images.