Useful Bash Commands For Web Developers

I recently found myself tutoring a friend in the ways of the command line and thought I’d write a quick post about it. Being comfortable with bash (or some other shell) isnt necessarily a prerequisite for web development, but it certainly makes the process smoother and more enjoyable. For anyone just starting to learn the command line, here are a few useful tips:

The Basics

  • cd: Short for ‘change directory’. This is probably the command you will use most often until you decide to do away with it altogether.
  • pwd: Think ‘print working directory’. This outputs the path to your current working directory.
  • ls -laG: Display the contents of the pwd. The common form of this command, ls, really isn’t very useful in my opinion, so skip it and go straight for this useful directory listing command. Alias it to something shorter like so: alias l='ls -lahG'.

Directory Shortcuts

You don’t always have to type a full path to get where you want to be.

  • ~: Home directory. Ex: cd ~.
  • .: A single period. Present directory, i.e. pwd. Ex: ls -la ..
  • ..: Two periods. Parent directory.
  • -: Hyphen. The previous directory. Ex: cd - is like saying ‘Go Back’ in bash.

This is all really basic stuff, but if you’re like me you likely put off learning it for a while because it’s not absolutely essential to building awesome apps. That being said, once you find yourself tweaking your won servers or deploying to someone elses you will be much happier if you are comfortable with the command line.

Using Dokku As A Personal Heroku

Dokku For The Win

I might just be in love with Dokku. Why? Here are some things I like as a developer:

  • Not having to configure servers
  • Not having to upload files
  • Deploying apps to production (or staging!) with a few key strokes
  • Portability of code
  • Extensibility

With a service like Heroku you get all of this, but with free, open source software like Dokku you not only get these great features but you don’t have to pay a premium. It’s completely free, which means if you’re like me and you enjoy using Digital Ocean’s $5/mo base package you get the most critical features of Heroku for five bucks a month. That’s a deal in my book.

After a session of coding, here’s what my new deployment process looks like:

git add .
git push dokku master

It’s that simple.

Setting Up

I’m not going to go in depth on this because there’s really not that much to say. Here are the steps you would take to get set up with Dokku if you’re using Digital Ocean:

  • Crete a new droplet from the standard Dokku image. Here’s a guide.
  • Install the Dokku Domains Plugin. It’s unofficial, but it works great.
  • Run dokku domains:set <app-name> www.myawesomeapp.com
  • Symlink the newly created nginx conf file to the /etc/nginx/sites-enabled/ directory.
  • Restart nginx: sudo service nginx restart

Step four is what tripped me up initially. I thought I could just run the domains command and everything would work fine, but apparently the script doesn’t link anything up to Nginx, so you must do it yourself.

The generated conf file will likely be located at /home/dokku/<app-name>/nginx-domains.conf. So all you need to do is symlink that into your Nginx configuration and your good to go:

ln -s /path/to/nginx-domains.conf /path/to/sites-enabled/<app-name>

After that, restart your server with the command mentioned above (or whatever works for your system) and you should be good to go. Reload your custom URL in the browser and see it live.

Note: This only works if you already have a domain name set up and DNS set up. Just Google this if you need help there, Digital Ocean has some great guides and a surprisingly nice DNS management interface.

That’s all. Dokku is awesome.

Using Emoji in Excerpts on GitHub Pages

Here’s how to get GitHub emoji working in post excerpts

As I was redesigning my blog recently I decided I wanted all the emoji in all of the places. That’s not usually a problem on GitHub pages. Seriously, they even have an official page about it.. But if you want emoji in your post excerpts, you will have a problem.

GitHub pages only support emoji in post or page content. In theory, that should really apply to excerpts as well, but for some reason it does not. Here is what emoji looked like on my site before:


Broken GitHub Emoji

The problem was this line of code which uses Jekyll’s built-in excerpt feature:

{{ "{{ post.excerpt "}}}}

The solution? Generate your own excerpts directly from the content using Jekyll’s built-in helpers:

{{ "{{ post.content | truncatewords: 50 "}}}}

Thank goodness that worked, I thought I was going to have to move away from GitHub pages. If you want to be able to play around with the excerpt length easily without editing index.html you can also add it as a custom variable in _config.yml:

# In _config.yml...
excerpt_length: 100

Then in index.html:

{{ "{{ post.content | truncatewords: site.excerpt_length "}}}}

This is the approach I took because it feels cleaner to me, but use whatever works for you. That’s all, hope this helps 😎

A Month In San Francisco

Four Weeks in the city for tech

I’m from California. I grew up in tiny town called Point Arena, about four hours north of the Bay Area. Despite this, I never actually spent any significant time in San Francisco, so I was very excited to have the chance to live here for a month, especially after spending two years abroad. Better yet, the day I landed was my birthday :+1:

Read More

Setting Up Hydra Config on A Mac

Update 2016-11-12: I no longer use either Hydra or Mjolnir. Currently my go to app for window management is Phoenix.

Update: The Hydra project referenced in this post no longer exists. It’s been succeeded by Mjolnir, a project by the initial creator of Hydra. So whenever you see me reference “Hydra” I’m now actually referencing Mjolnir.

I Set Up Hydra to Minimize my Dependence on a Mouse

This post is about moving one step closer to a mouse-less workflow, where any command can be accomplished trivially from the keyboard.

I discovered Hydra through Hacker News earlier today, and it’s almost everything I could wish for in a window management tool. My new setup allows me to manage windows somewhat like you see in the image bellow:

Keyboard Window Management

If you interested, here’s the source to make Hydra work like you see in that image. But if you’re like me, you will probably want to customize everything, so here’s a quick tutorial on how to do that.

Read More

Meteor is (Almost) Awesome

Almost Perfect, But With Room For Improvement

Have you ever built a real-time web app? Well I hadn’t, not before meteor anyway. This framework makes it insanely easy to build apps that update in real-time across an unlimited number of screens, so I love it. Meteor is so good in fact, that it was very easy to overlook what I would otherwise consider to be deal breakers like:

  • Full blown app rebuilds, including file compilation, concatenation and minification every time you save a file.
  • No official testing solution
  • No official package manager

One of the first things you will read or be told when starting a meteor project, is to install Meteorite as a package manager, so the last bullet point is probably pretty clear to anyone who’s used Meteor. However, the other two pain points might be less obvious when just starting with the framework.

That first one is a really big deal for anyone who likes to iterate on their design using CSS in a browser, and likes to see realtime changes to the web page. These days it’s fairly easy to accomplish this using [Grunt][grunt] or [Gulp][gulp] in combination with [Livereload][lr]. But if you have a large Meteor app, you might have to wait ten seconds (or more!) for your app to reload entirely, even if you just changed a margin or added a 1px border. This is ridiculous.

Testing has also been an issue with Meteor. There have been a few decent contenders:

Read More

Jekyll Management Like a Boss

Blogging Without Friction

Yesterday I wrote a script to help myself blog more often. This is what it looks like in the terminal:

  • Create a new post: post new [post title]
  • List all of my posts: post list
  • Search existing posts: post search [post title]
  • Edit a post: post edit [partial post title]
  • Publish to this blog: post publish

I really like Jekyll, but having to manually create files with the Jekyll filename format (YYYY-MM-DD-post-title) is a bit of a hassle. Clearly you could just do this by hand, but if you’re like me and want to automate all the minutia in your life, then that’s not going to cut it.

Read More

Jekyll Theming Like a Boss With Gulp

Building your own Jekyll theme quickly and efficiently

Basically I was fed up with how inefficient coding Jekyll themes was, especially with Octopress, so I decided there must be a better way. These are my findings.

We’re going to use Gulp.js to automate most of what’s lame about creating themes for Jekyll. Gulp is just a task runner, so if you have another your more familiar with (i.e. Grunt) that would work too.

First you need to go grab the boilerplate Poole code so that we are all on the same page.

Sass

Jekyll tempting is a pain compared to general web development and it shouldn’t be. Let’s get gulp set up to automate the usual crap for us. I’m using SCSS, but you could do the same thing with plain CSS, Less or Stylus just as easily. Here is the is a gulpfile to get get you set up:

Read More

Vim: It's Awesome

I’ve done a few posts on Vim before, but I realize how little I really knew about Vim as I wrote those posts. Lately I’ve taken the time to actually learn quite a bit of Vimscript, enough to finally start opening up the true power of Vim. I can customize anything I want and create all sorts of new behavior in the editor. But it’s really true what many people have said over and over again…

There’s a learning curve

I would say at the very least it’s taken six months to get proficient in Vim. It could certainly be done in less time, but if you’re actively working on client projects you will find it hard to open up an editor you don’t yet know and be really productive.

Read More

From Startup Idea to (In)validation in a Week

This is the brief story of and reflection on me and a friend’s idea for a startup. We went from product idea, to super minimal prototype to finding out our product probably wasn’t going to make money all in a week. This is what happened.

The Idea

A good friend of mine, Nick Budden, had an idea for a product, and after talking about it over the course of a few days we decided to build it. The product would be a unified solution to many of the problems we face as freelance developers. Problems may be the wrong word actually, more like annoyances. The parts of our job that just serve to get in the way and take up valuable time that could be spent creating cool new things. Let’s call the combined sum of these annoyances “Freelance Minutia.”

Read More