Web Design Resources

I’m doing some web design work, and I asked my friend Eric for some reading recommendations because that’s what he does.

He sent me an email with lots of suggestions, and I’m turning that email into a blog post so I can access it more easily.

These are Eric’s recommendations, along with his thoughts.


  • Web Design Field Manual is a good place to start.
  • Hack Design is a fantastic resource. It’s a very well paced, email based newsletter that gives a crash course on design, why it maters, and how to use it.
  • Sidebar is a daily list of 5 of the most interesting articles related to design.
  • PatternTap for inspiration/conventions/patterns to follow.  Search pattern libraries and other websites, and the best way to learn is to emulate then iterate.
  • An article about new and awesome tools for design
  • The design equivalent of Hacker news. Read it occasionally to see what people are talking about.


Austin Groups


SQL Styling

  • Make SQL keywords uppercase.
  • Use HEREDOCS for multiline blocks.
  • Prefer single quotes.
  • Have spaces around operators.
  • No trailing white space (sublime setting)

Git Aliases

These work with this shell configuration.

Most common

Alias Description
g up update (does lots more)
g c commit (will take you to commit message screen)
g ap add patch (or parts)
rs run tests (the only one that’s not a git alias)
g s status
g poc push to origin for current branch
g lgac log all branches compact
g mkb make branch


Alias Description
gco git clone
g aa add all
g cop check out patch
g bmm back merge into master
g ccrtb create remote tracking branch on current branch
g fa fetch all
g cltb create local tracking branch
g rmlb remove local branch
g b show all branches
g sw [branch] switch to a branch

High Level Site Idea, Music App, Trailing Whitespace, Pickaxe Book, and Dash

Idea: make a web site that has a high level descriptions of things developers use. There are so many, and many times it’s confusing if you read an article about it that assumes you already know what it is on a basic level (how it fits into the larger picture). Maybe make a simple ember app to create this site? Or add it to this site?

Idea: make a web app (Sinatra or Rails probably) for music that could show a tree of drafts of one track, and even how different tracks are related (if one came out of the other). Each track has its own page. Each recording has its own page? Ember for that? Cool thing for the front page could be a running count of the number of tracks and the number of recordings.

WIP is “work in progress” – you’re committing something that isn’t complete yet.

Hash syntaxes

  • Old – :key => ‘value’
  • New – key: ‘value’

Prefer single quotes unless double are necessary for nested quotes or for string interpolation in ruby.

Changed sublime text to delete trailing whitespace. How: Preferences, then Settings (whether default or personal) and look for this setting:

// Set to true to removing trailing white space on save
“trim_trailing_white_space_on_save”: true,

Read the ruby pickaxe book.

Get an app called Dash for easy reference of documentation on your desktop.

Other ruby books recommended to me (I think at Austin.rb)

  • Object Oriented Ruby by Sandi Metz
  • Confident ruby by Avdi Grimm

Good projects to try:

  • Simple blog with rails.
  • Reddit clone (would be good for bbox)

Firebase, Isotope, DataTables, Leaflet Maps, thoughtbot, Slack, and Refactoring

Went to the MakerSquare open house to see some of the projects that the graduates had made. Learned about a few things just talking to them.

  • Firebase is a cloud hosting for apps, and they have a free plan to get started. I think you can even use just store data in JSON. Could be good for bbox.
  • Isotope JS is a gem for help with layouts.
  • DataTables JS can help with showing data in the form of tables.
  • Leaflet is a way to embed maps into a web page.

For learning more about web development, the thoughbot blog is good. Code School is good.

Got added to Slack. It’s like email converted to chat, and it’s the main way we communicate.

Refactor means to change the implementation of something without changing the functionality. You use it to distiguish what kind of work you’re doing on the code. Other kinds of work are fixing a bug or adding a feature.


Sublime Text, Git, iTerm, Markdown, and Podcasts

Semantic Versioning – read about how that works. Look up “~>” symbol.

When to commit (in the Git sense): for smaller changes than you’ve been doing. The idea is that you can look through and find the one specific thing you were working on and check the last time you updated it and what you changed. I had been doing it once per work session, but that’s not enough.

In sublime text, use command-T to search file names you want to open or read. You can also search folders using the **/**/** format, and you just go as specific as you need to to find what you’re looking for. This is faster than using the folders on the side.

For Git, there is a hard wrap of 72 characters for the first line, and then 80 characters for all other lines.

Markdown – read about it from daring fireball and GitHub.

Get iTerm and use it instead of Terminal because it’s better. He will install his shell files with a bunch of shortcuts and customizations.

A monkey patch: a temporary fix that says “do this instead of what Rails says to do.” It should be used rarely and only when necessary.

People encrypt using BCRYPT instead of SHA because BCRYPT slows down the encryption process (it limits the speed). Individual users don’t notice, but someone trying to hack in wouldn’t be able to test nearly as many.

Listen to these three podcasts:

Subscribe to these three newsletters:

Go to these Austin meetups