Category Archives: Software

Responsive Layouts with Stylus

Posted on February 14, 2013

When I tell people they should be using CSS pre-processors like Stylus, Sass or Less, I inevitably need to explain why. This can be tricky if you are talking to someone that hasn’t used CSS much. Typically, discussions evolve around variables and mixins, and usually that’s enough to interest people. More recently though, I’ve found that using pre-processors makes doing responsive design REALLY easy! I’ll focus on Stylus here, but the same applies to the other two as well.

Typically, when someone wants to make a responsive site, they start with a grid system, and their HTML ends up looking like this.

This is ugly, and a terrible reminder of the days of table layouts. Why should we mix all this layout logic in with our markup? Well, quite simply, we shouldn’t! Ideally we’d keep our concerns separated and keep this layout logic in our layout definitions; namely, in our CSS. But writing all this by hand is annoying. Enter pre-processors.

I’ve been using the Semantic Grid System lately and I really like the idea. You set your page width as a variable, column count as a variable, and use mixing to specify how many columns an element uses. So then we get back to something like this.

Now we’re getting somewhere! So what about responsive layouts? Well, the Semantic GS isn’t all that suited for the traditional responsive layout (that is, when you look at it on a phone, all “columns” become “rows”), but that’s not really such a bad thing. For me, I rarely want my mobile view to be a list of items, I still want some parts side by side. With some clever mixin and variable use, we can do this.

Here, I define variables for device display sizes and use those variables to control the size of elements on those screens. I also use the hideOn and showOn mixins to hide and show elements on a screen[1]. So now, when I view this page on a phone, the content is the only part shown and the sidebar is hidden. I can also use these to specify padding and the like for different displays.

1 This should be expanded to work with more than 2 display sizes, but it’s a working example

Why I Use Sublime Text

Posted on June 14, 2012

I’ve always been a vim guy. Try as I may, I just can’t get myself to like any full IDEs. I’ve tried large projects like Eclipse and Aptana and small editors like Blue Fish and even gedit, but nothing has ever made me leave the comforts of vim.

Despite my love for vim, I don’t think it’s perfect. I’d like something more like a desktop editor with the features of vim. My friends over at Cards.ly (R.I.P.) use Sublime Text 2 and I liked what I saw. Not enough to commit to switching, but I spent some time with it and liked it myself.

Then I bought a Mac. Why does this matter? Well, I never got used to navigating in vim with the letters and such, opting instead to use the arrow keys, as well as page up/down and and home/end. On a mac, the latter keys don’t exist, and I find getting the functionality painful. So there were two options; learn to navigate vim with the keyboard letters or switch editors.

I opted for moving to Sublime Text, partly because it looked really nice, partly because it would give me a unified, cross-platform editor, and partly because I knew I could enable some of the parts in vim I’ve always missed from other editors. So far, I’m sold. Literally, I bought a license and everything.

It wasn’t all cupcakes and puppies from the start though. For example, I blew away a directory with a mis-click (there’s no confirmation dialog?!). But I quickly got used to it and haven’t really looked back. I even forked the coffeescript tmbundle and got it working for in-editor compilation. Check it out!

Sublime is pretty usable out of the box, but there’s some things everyone will want to do before making real use of it. The biggest one is Package Control (#7 on that list). This will allow you to install bundles and plugins and such directly through Sublime. This will make i teasy to add functionality to the editor. For example, if you work in node.js, you probably use things like Jade and Stylus, and maybe you work in CoffeeScript. Sublime doesn’t give you syntax highlighting or anything for these out of the box, so you could go hunt down the stuff you need and install them by hand, or type in 1 command for each and have them working in a couple seconds.

That nettuts link above has a number of other nice things you can do, but I honestly haven’t done most of them. For me, Package Control, the Made of Code theme and some personal settings tweaks and I’m ready to roll. It’s a great editor and it’s very easy to get used to. If you’re unhappy with your current setup, give it a shot, it’s free to try so you’ve got nothing to lose.

Git Flow

Posted on June 7, 2012

Git flow is basically just a shell script that automates some parts of git. But the parts that it automates make it pure bliss to use. From Jeff Kreeftmeijer’s blog post on the subject:

I’m astounded that some people never heard of it before, so in this article I’ll try to tell you why it can make you happy and cheerful all day.

That post is decent introduction in to how to use git flow. The idea is simple; everything is developed in the develop branch, but you work in smaller sets on features, which get their own branch until they are merged back in to the develop branch. When you’re ready to do a feature freeze and start squashing bugs, you create a release branch, and once the code is ready to go live, changes in that branch get merged with master and back to develop. If something breaks on production, you hotfix it and merge those changes back to develop as well. This graph, taken from this excellent presentation, is a pretty solid summary of the flow:


Continue reading →

More Git Magic

Posted on June 3, 2012

I recently had a chance to watch Gary Bernhardt’s git workflow video and was blown away by a lot of the aliases he has set up (and by his workflow!). One of the coolest and most useful things he had setup was a log viewer that showed commits, their paths, the author, when it happened, comments and the branch they are attached to. Example:

You can see my git-flow (an awesome project on it’s own, blog post forthcoming) workflow in there on the left; see how the repo was branched and merged back in? As I said, crazy useful.

Setting this up was pretty simple too. Simply grab Gary’s .gitconfig and .githelpers dot files and toss them in your home path. Or, better yet, just copy everything but the [user] data from the .gitconfig and toss it in yours. Then fire off a `git ra` and marvel are the glory!

Easy Screenshot Sharing in OSX

Posted on May 28, 2012

Now that I’m using a Mac, the screenshot uploader I wrote isn’t all that helpful. Shame, I was really enjoying the quick and easy screenshot sharing. Fortunately, OSX has some built-in hotkeys for taking screenshots. What’s more, you can change where they save. What’s even more, you can add scripted actions to folders with Applescript. Mix in a little Dropbox, and BAM, I’m sharing screenshots with the greatest of ease!

The flow goes like this: Capture screenshot (selection, window, screen, whatever), it gets saved to my Dropbox Public folder, the link gets copied in to my clipboard, and I get a Growl notification when it’s all ready to go. Here’s how.
Continue reading →

Git Info in your Bash Prompt

Posted on May 24, 2012

I was hanging out with a very cool fellow developer, and while he was showing me something on his computer, I happened to notice that his shell prompt changed when he entered his git repo. The prompt showed what branch was currently loaded, like so:

Pretty boss, right?! He told me it was part of oh-my-zsh and that I needed to install that ASAP. Being a long-time user and fan of bash, and someone who does a fair amount of bash scripting on the shell directly, I was hesitant to switch because it would mean learning a new scripting language. It occurred to me, however, that there was likely a way to get the same thing in bash.

A cursory look revealed bash-it, which claimed to be “shameless ripoff of oh-my-zsh.” Perfect! Unfortunately, not so much. Most of the stuff that it offered I didn’t want, and using it would mean more modifications to my dotfiles. But, the git part did work, and it was easy to copy too.

Here’s how to add it to your own bash shell. Add this code to your .bash_profile or .bashrc (all these years in Linux and I still don’t know the difference) and you’re set.

function parse_git_branch {
ref=$(git symbolic-ref HEAD 2> /dev/null) || return
echo "("${ref#refs/heads/}")"
}

Now, in the PS1, add a call to that function, like so.
export PS1="\u@\h : \w \$(parse_git_branch) $ "

Yours likely looks different than mone, but the important bit is \$(parse_git_branch). If you don’t have a PS1 set, you can copy and paste that one. Now, when you enter a path that is a git repo, it’ll show the branch you’re currently using in the prompt. Sounds quite simple, but it’s really handy, especially if you do your git work on the command line!
Continue reading →

My Move to Mac

Posted on May 14, 2012

As I’ve tweeted recently, I sold out earlier this month and bought a Mac. A Macbook Air to be specific.

So why abandon all my years and years of Linux use? Because Apple seems to be the only company making laptops worth buying. I think this is evidenced by the second-hand Macbook market, which is doing quite well. It’s not uncommon to see 2009 model Macbooks being sold with relative ease. The same can’t be said about hardware from other manufacturers; most will leave their users in the dust as soon as they release the next model.

People have this idea that Apple hardware is overpriced, but that’s not true. Yes, it’s expensive compared to the throwaway $500 laptops that line the shelves of all the electronic stores, but Apple’s hardware is on another level. What’s more, it holds its value, so 2-3 years down the road when you’re ready to upgrade, that hardware is still worth something. I’ve got a few old laptops kicking around here that’ll tell you that’s not true of other company’s hardware.

It wasn’t always this way, mind you, but it definitely is today. Even spending the same or more on a laptop from another company doesn’t give you the same level of quality. Continue reading →

Slim-Jade, A Light-Weight PHP Framework Using Jade

Posted on March 29, 2012

Recently, I put together a landing page for an idea I had to try and test whether or not it was viable. I drove traffic to the page with Microsoft’s AdCenter, tracked clicks on some categories and tried to get people to sign up for a mailing list to be informed about when the service goes live. Nothing too mind blowing, but it was both fun and educational.

At the time, I had just started working with Node.js but wasn’t really proficient with it. I needed to put my landing pages together quickly, so rather than spend time beocming proficient, I decided to create the landing pages in PHP, a language I’d been using for the last 5+ years. Having used Express and falling in love with the Sinatra style, I decided to check out Slim. Having also used Jade with Express, I didn’t want to write HTML anymore.

So what to do? Simple, combine the two! After finding an existing Jade parser for PHP, I spent some time learning how views were rendered in Slim. Later that day, I had a working landing page running on Slim and using Jade to render views.

And how’d it work out? Pretty well. Slim is pretty quick, and as I already said, I really like the Sinatra style design. And of course, writing all my markup in Jade (and using Stylus for my css, albeit not automated) was pretty much everything I had hoped for. If I do future PHP development, this will most likely be my setup of choice.

Check out Slim-Jade; fork it, edit it, and most importantly, let me know what you think!

Evernote’s Clearly

Posted on February 10, 2012

I just found Clearly, from Evernote, and it’s changed how I read news and blogs.

Countless times in the past, I’d follow a link from Hacker News or tweet or whatever to be assaulted by annoying ads and content, tiny, unreadable text, terribly formatting, or sometimes all these and more. With the click of a button, that’s now a thing of the past. Example time!
Continue reading →

Ubuntu, Node and Heroku

Posted on November 3, 2011

I recently started playing with Node.js, and while I can play locally just fine, I wanted to make sure I had a place to host once I had something worth hosting. Enter Heroku. Why? Because it’s free to host until you draw some real traffic, it has a really cool addon service and I knew other people using it so I could turn to them if I had problems.

In order to get your application on their service, you need to install their command line tool, which requires Ruby. No problem, just install it all with apt-get and you’re good to go, right? Short answer, yes. Long answer, No. You’ll be using an unsupported version (the version of ruby in the Ubuntu repos is aged), so while it might work now, it may not in the future. If you do like I did, you’ll also end up with 1.8 and 1.9 on your machine, and while that didn’t cause any problems, it seemed silly.

Poking around, I found this article which lays out how to use RVM to both install a newer version of Ruby as well as easily update it in the future. So, here’s the whole shebang:
Continue reading →