Learning Rails: A Quick Overview For Developers

I’ve been writing a series of articles recently to help designers get started with, or jump into, a Rails project. After some recent exchanges on Twitter and by email with some developers, I realized a quick overview of how to get started with Rails for developers might be helpful. I’ll outline the process that I went through and point out what was the most helpful and what pitfalls I ran into along the way.

Continue reading

Rails for Designers: Creating an App

Today we’re going to generate and run our first Rails app together. We’ll be covering how to work with Terminal, how to view our app in a browser, and which files are most important to a designer. After completing this article you’ll be ready to start building an app with me, or know enough to jump into the basics of project with your team.

Continue reading

Rails for Designers: Introduction

Are you a designer who has been wondering what it would be like to start building some of the apps you have designed? Or, maybe you want to expand your skill set so you can work on Rails based projects. The goal of this series is to help you get familiar with how to jump into a new or existing project and contribute design and front-end code. I’ll be covering enough of back-end code to get you familiar with the basics but the primary focus of this series is to get you comfortable working on designs, HTML/Haml and CSS/Sass.

Continue reading

How to Determine Your Hourly Rate

I published an article today over at Scoreboard Invoicing covering how to determine your hourly rate.

I’ve been meaning to do this for awhile. Chances are if you are relatively new to freelancing or contracting that you are charging less than you should and working with your market’s more difficult clients.

In the article I include a calculator/spreadsheet that uses a graphic designer in Portland, OR as an example. The spreadsheet is flexible enough to use for any profession or market. Remember to be realistic about your brand, experience and market. This higher rate you can charge also needs to be backed up by a high level of professionalism. If you’re going to try to charge top rates, you need to act like a top rate professional.

Design Professionalism

As a Computer Scientist, of course my first decade of work experience was largely as a professional designer. Yes, after writing a disassembler and a compiler; studying logic and minoring in Math; and learning Scheme and Java, the natural course for me was to make advertisements, websites and app user interfaces.

Continue reading

Stop using HTML and use HAML

Stop Writing Raw HTML and Use HAML

Are you still writing raw HTML? Stop! There’s a better way. HAML is a simpler markup language that will compile to HTML. Even if you have a wonderful editor that takes care of all the annoyances of writing HTML, writing HAML is still a much better approach.

Let’s start with a simple example, some HTML5 navigation

<div id="notification"></div>

<nav>
<ul class="left">
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>

I’ve written something like this dozens of times. Notice all the duplication in there? Every tag is wrapped in angled brackets and every opening tag has a closing tag. Also, notice that there’s no indentation?

Now, here’s a simpler version of the same HTML written using HAML

#notification

%nav
  %ul.left
    %li
      %a{:href => "/"} Home
    %li
      %a{:href => "/about"} About
    %li
      %a{:href => "/blog"} Blog

Continue reading

semantic-rwd-markup

Semantic Markup with Responsive Grids

Have you ever wondered why most of the modern responsive grids and CSS frameworks like Bootstrap and Foundation still have presentational classes in the markup? That was one of the first things that jumped out to me when I recently I began working on a responsive design for Scoreboard Invoicing.

Modern precompilers like SASS and LESS allow us to easily avoid putting decorator styles on our markup. Although I love the idea of frameworks like Bootstrap and Foundation, I wanted something with clean, semantic HTML. The good news is it’s really easy to do.

Continue reading

Writing More Idiomatic Ruby Code

I wanted to write some quick little tips on writing Ruby code that looks more natural, and takes advantage of the language. This is a very short list that could easily be expanded.

If and Unless statements

def is_on?(light)
  if light.on?
    true
  else
    false
  end
end

This is the long way of writing an if statement.

def is_on?(light)
  unless light.on?
    false
  else
    true
  end
end

We can reverse the logic with unless, if‘s negation.

def is_on?(light)
  light.on? ? true : false
end

Using the ternary operator, ?, we can shorten the previous code. Resist the urge to chain these together or write long true and false conditions.

def is_on?(light)
  true if light.is_on?
  false if !light.is_on?
end

Using a statement modifier we can do some checks on simple one liners.

def is_on?(light)
  light.on?
end

Ruby always returns the value of the last line. We can avoid any type of if statement altogether. In fact, it should now be apparent that this method never served any purpose. Imagine removing this method completely for some practical use such as the following.

person.descend(stairs) if light.on?

Continue reading