Now that destroytoday.com runs on Jekyll, there are two sets of files—source and destination. Source, in my case, consists of HAML, SASS, CoffeeScript, and Maruku files. They are converted into HTML, CSS, and JS—the destination files. When checking into Git, I would commit both sets so Beanstalk could deploy the destination files. This means changing a single source file results in a commit of potentially dozens of files and a nightmare of a changelist.
I decided to improve the process a bit by investing in a Linode virtual private server—a setup without restrictions. This weekend, I was able to configure a system that builds the destination files in the background whenever I push to Git. There goes the need for Beanstalk, saving me another monthly bill to pay, and by installing Git and Gitosis, I get unlimited collaborators and repos free of charge.
With Linode, I also get root access, so I can pretty much do anything I want without waiting on anyone to set something up for me. I choose the OS and partition size, then, with a single click, I have a server. If I ever need to reboot the server, I can with the press of a button. Even if I’m on the go, I can use the Linode Manager iPhone app to check the server status and reboot if I need to. I’ve never had this level of freedom with a host before. If you’re in the market for a new host, take a look at Linode—they know what they’re doing.
Today, I received my most recent Fab.com order, a S’well water bottle. I’ve been anxiously awaiting its arrival because of two reasons: 1) I am the reigning king of stacked cups at Adobe, and 2) I needed a bottle to use with my Freaker.
The S’well bottle has a beautiful, slim, steel design and the company donates 10% of its proceeds to WaterAid. The Freaker is a cozy that fits any bottle size. It’s also a Kickstarter success story, made in America, and determined to rid the world of moist handshakes. Mine has a Maniac Mansion-esque robot on it, and there’s nothing greater than Maniac Mansion.
Why am I writing about these? Because I’m a sucker for great products that support a good cause. And, when you love something, share it with the world.
The most exciting aspect of the destroytoday.com reboot is the technology involved. I grew tired of the same old starting point of installing Wordpress, configuring, theming, and rushing the release. A half-designed website is twice as hard to maintain. With an unknown world to discover with Jekyll, the exploration and experimentation fueled my interest and kept me on track to release a well-groomed site when the time was right.
Now, what is Jekyll exactly? Its Github page describes Jekyll as “a simple, blog aware, static site generator.” Well said. It takes a source folder of templates and spews out HTML files using a number of helper languages—YAML, Liquid and Markdown by default.
+ src
- index.html
+ _layouts
- default.html
- blog-post.html
+ blog
- index.haml
+ _posts
- 2011-08-09-an-introduction-to-jekyll.maruku
+ site
- index.html
+ blog
- index.html
+ an-introduction-to-jekyll
- index.html
Upload the static pages to your FTP, pocket the source files locally, and now you have a site that is faster and more secure than any of the server-side blog engines out there. No CMS, no database—every page and blog post is a single file with a YAML config at the top and any content down below.
Because Jekyll uses YAML, configuration is clean, easy, and flexible. A page’s config could merely indicate which template to use:
---
layout: blog-post
---
Or, it could reflect the mood you were in when writing the post (if you’re still nostalgic about LiveJournal):
---
mood: nostalgic
---
Simply put, there are no required parameters. And, if a post has a mood parameter, that doesn’t mean every post needs it. As opposed to traditional databases, the world won’t end if a post strays from the common scheme.
Along with flexible configuration, Jekyll includes a versatile templating system—it’s dead simple too. The only requirement is a content tag, which tells Jekyll exactly where to put the page’s content. It supports nesting, so a template could have a template of its own, preventing the need for heavy, all-in-one templates. “Includes” are available as well to reduce boilerplate and de-clutter your code.
The last thing I’ll touch on is plugins. If you’re familiar with Shopify’s Liquid templating system, you’ll feel right at home. Jekyll promotes Liquid “filters” and “tags” as a way to add additional functionality without having to fork it and tamper with the innards. There are also “generators” and “converters”. Generators create additional pages, like tag or category index pages. Converters let you to run code on a page’s content if it matches a specific extension. These are extremely helpful for those looking to use preproceesors like HAML, SASS, and CoffeeScript.
That’s Jekyll in a nutshell, without getting our hands too dirty. In the coming weeks, I’ll dive into each section on a deeper level, sharing code examples and tips I found extremely useful in the process of developing destroytoday.com. If there are specific topics you’d like to know more about, let me know in the comments and I’ll be sure to touch on them.
Finally—one word that encompasses the past four months. I’ve been head-down redesigning and redeveloping, all the while relearning the web. A few years back, I took a break from all the HTML and CSS hoopla to focus on desktop and mobile development. It’s incredible how much the web has improved in such a short period of time. Everyone is telling IE to get bent and new shorthand preprocessors pop up every day. I love it.
The new site features a number of those preprocessors and then some. I took it as a chance to acquaint myself with the new tech and build a creative outlet for the many side projects that don’t see more than a single blog post. As an avid Github user, I stumbled across Jekyll, a static site generator with endless possibilities. Great beauty lies in a CMS-less, database-less website. If its loose-configuration and recursive templating doesn’t attract you, its generators, tags, and filters will.
Regarding the visible change of the site, it now houses dedicated pages for work and experiments—no more lazy-linking to Github. The lab has a handful of throwback projects from my outside-the-box years. The plan is to rejuvenate the other side of my brain and get back into the short-commitment, highly experimental routine that I so very miss.
As for blogging, Jekyll itself garners enough to write a book or two, but I don’t have a publisher, so a few posts will have to suffice. I’ll run through Jekyll, Haml, Sass, Liquid, and CoffeeScript over the next few weeks, detailing how best to introduce yourself and get them all working together. Until then, check out the rest of the site and let me know what you think!
I’ve recently become addicted to Fab.com, a Groupon-esque website for designy products. I made my first purchase this past week, the Infinity File by designer Barbara Flanagan. It’s a modular desk-top organizer for anything from business cards to loose nick-nacks. I find it to be the perfect solution for small items that lie awkward in a drawer, but appear messy on the desk-top. It’s made from a single sheet of metal and holds a good weight. My only gripe is that the vertical stacking shown in its product shots is very wobbly.
My buddy Luke pointed me to this series by Stephan Tillmans entitled, ’Luminant Point Array.’ Each photo represents the turning-off phase of a different television. I’m in love with them and would die to have one hanging on my wall.
A few weeks ago, I tweeted about creating a private Twitter account to use as a journal. I dropped the idea after realizing that Twitter limits the number of viewable tweets to 3200. Cue Day One, a new OSX journal app. With a clean UI and simply gorgeous icon, the design alone sold me.
Its desktop version ($9.99) utilizes a menubar window for quick and easy entries, and an accompanying iOS version ($0.99) syncs through Dropbox. Notifications appear throughout the day, reminding me to make an entry, which is just the motivation I need to keep with it. The only downside I see so far is the lack of a global hotkey. No worries, as it’s expected early April. Kudos to Paul Mayne on a job well-done.
When Twitter introduced Snowflake, their new ID generator, they also introduced 64-bit IDs. At first, I didn’t think much of this. When the Twitpocalypse occurred (Twitter IDs surpassing 32 bits), I updated DestroyTwitter to use floating point IDs instead of integer IDs. I figured with Snowflake that AS3’s floating point class, Number, had me covered. I was wrong.
It turns out AS3 doesn’t support 64-bit numbers. To support Snowflake, I have to update DestroyTwitter to use string IDs instead of floating point IDs. A handful of problems arise because of this. For one, I must reformat DestroyTwitter’s local SQLite database to use TEXT columns instead of REAL. Also, string comparison doesn’t exactly behave the same as number comparison. For example, 9 > 1 because 9 comes after 1.
To overcome this inconvenience, we need a more complex method of comparison than a simple < or >. We could left pad the string with zeros, but this is expensive in AS3 and impossible in SQLite. I prefer comparing the string lengths first, then the strings as numbers:
newID.length > oldID.length || newID > oldID
Just like AS3, SQLite lacks support for 64-bit numbers. You would think the same comparison method in SQL syntax would work:
length(newID) > length(oldID) OR newID > oldID
It doesn’t. AS3 and SQL differ in the way each handles conditions. In AS3, the conditions relate to each other. If the first condition is false, the second condition assumes the first condition is false. For example:
booleanA || booleanB
really means
booleanA || !booleanA && booleanB
SQL, on the other hand, treats each condition separately. It acts like this if it were in AS3:
if (booleanA) callMethod();
if (booleanB) callMethod();
As a result, our SQL comparison must be a bit more explicit:
length(newID) > length(oldID) OR length(newID) = length(oldID) AND newID > oldID
Hopefully, AS3 and SQLite will support 64-bit floating point in the near future. Until then, we’ll have to resort to workarounds like the ones above.
While slicing the bread for my sandwich this morning, I forgot I was holding the bread and cut into my finger. In a race to meet the shuttle, I found this more inconvenient than painful. I wrapped a scrap of paper towel around the cut, tied it with a rubber band, then replaced it with an actual band-aid once I arrived at work.
At lunch, I pierced my skin again while closing the refrigerator door—this time in the exact same spot on the opposite index finger. I recycled the previous cut’s band-aid, transferring it from one finger to the other.
Hours later, I washed my hands and removed the now worthless band-aid. The cut must have re-opened some time thereafter, resulting in a dense scab, raised from the cut. These photographs depict today’s cuts.
Today, a few of my co-workers at Adobe handed out these letterpressed posters of InDesign’s type icons, as holiday gifts. Anyone can appreciate the detail on this print, but those who know the process should be in awe. I’m in love with it and just had to take a closer look. At 500%, the black ink looks like iron filings and the grey looks like one of my dog’s dirty stuffed-animal toys! I was told the local printers simply wouldn’t take the job because it’s too detailed, so they had it done in Santa Barbara—doesn’t surprise me. Seeing it in person makes me wish I took letterpress classes in college when I had the chance.
-
1
-
2
-
3
-
4
-
5
