Scott Weisman

Easy Rails Testing

July 19, 2012

Every beginning Rails developer wants to tests their code. Unfortunately, most spend too much time deciding between Test::Unit and RSpec, get confused as to what types of tests to write, and eventually give up.

If you're a beginner and want to test, start by learning how to write integration (Test::Unit) or request (RSpec) tests. These types of tests allow you to simulate what the user will actually do in the browser. Capybara is a gem that makes it easy to write integration/request tests. If you use Capybara, the difference between Test::Unit and RSpec is minimal.

Here's a simple RSpec request spec (test) with Capybara for user sign up:

#spec/requests/users_spec.rb
require 'spec_helper'
describe "Users" do
  it "allows users to sign up" do
    visit root_path
    click_link 'Sign up'
    fill_in 'Email', with: 'user@example.com'
    fill_in 'Password', with: 'secret'
    click_button 'Sign up'
    page.should have_content('Welcome')
  end
end

You don't need much programming experience to understand what's going on here. The test is just going through the same sign up process that a user visiting your site would. The final line of the test page.should have_content('Welcome') is stating what the next page should show after a user clicks the 'Sign up' button. Simple, right? So go write some tests!

Check out Railscast #275 for more information on this type of testing.

A Solid Ruby Foundation - Code Academy Week 2

April 22, 2012

I've been working hard for the first two weeks of Code Academy to build a solid foundation with Ruby. As I mentioned in my last post, when you work with Rails it can be easy to forget the magic that Ruby is doing behind the scenes.

To make sure that I don't forget the basics of Ruby, I've outlined them over and over. Below is my most basic outline of Ruby concepts that I never want to forget. Some of the examples are taken from the excellent book Learn to Program by Chris Pine.

Arrays and Hashes

Arrays

Create new array and call 0 index:

a = ["scott", "mike", "joe"]
a[0]    # => "scott"

Add to array:

a << "mark"   #or
a[3] = "mark"

Hashes

Create new hash using symbol for key and call:

h = { :dog => "woof", "cat" => "meow" }
h[:dog]    # => "woof"

Add to hash:

h[:cow] = "moo"

Iterators

Each Method (p. 66)

languages.each do |lang|
  puts "I love " + lang
end

Integer Method (p. 67)

3.times do
  puts 'hip-hip-hooray!'
end

Methods

Methods with parameters (p. 76)

def say_moo(number_of_moos)
  puts 'mooooo...'*(number_of_moos)
end

say_moo(3)   # This is the method call with parameter

Initialize method is called automatically when new instance of class is created (p. 132)

Classes

Built in Classes (p. 117)

Typically, you just create new built in classes by setting values:

a = [1, 2, 3]

But you are actually calling Array.new when you do this:

a = Array.new + [1, 2, 3]

Back to Basics - Code Academy Week 1

April 15, 2012

I made it through my first week of Code Academy. Week 1 was all about building a solid foundation with the basics of Ruby. For me, Ruby has been much more difficult to learn than Rails. I think the reason is that learning Ruby can be a bit boring at first. The best way to learn a programming language is to build something with it. Unfortunately, there are not that many interesting things you can build with basic Ruby alone (at least not interesting to me).

With Rails, on the other hand, you can get up and running and build your own blog or small app pretty quickly. If you really want to dive into Rails you can do the awesome Rails Tutorial and build a functioning twitter-like app.

When you're working with Rails, it's easy to forget the magic Ruby is doing behind the scenes. You can create a Rails app with very little knowledge of Ruby, but that doesn't mean that you should. I think that learning Ruby from the ground up will allow me to have a much better understanding of what Rails is actually doing. So for the next week, in addition to class, I'll be diving deep into Chris Pine's Learn to Program.

The Code Academy Experience

Beyond getting started with Ruby, the first week of Code Academy was a blast! I really enjoyed meeting and getting to know my classmates in the spring development class. Everyone is focused and interested in learning as much as possible. It was awesome to spend time with so many people who are as interested in web development as I am. I'm really looking forward to the next 10 weeks.

You Have to Build it Yourself

April 10, 2012

Growing up I always loved technology. When I was about 9 or 10, I remember watching some news on the latest products from the Consumer Electronics Show.

I assumed that we would soon automatically have handheld flat screens that played video and phones that could do live video chat. It didn't occur to me that actual people had to go out and design and build these things. It turned out that these ideas were never actually produced for any practical use until Apple made them a reality decades later.

If you've read Steve Jobs' biography, you know that he faced incredible hurdles with every product he created from the first Apple to the Macintosh to the iPod. Every major Apple product came dangerously close to never coming to life and could have easily been killed without the passion and persistence of Steve Jobs and others at Apple.

It took me a long time to realize that great products are not destined to be built; you have to build them. And if you don't build them, no one else will.

For the past couple of years I've attended the American Bar Association's Techshow in Chicago. Every year I hope to find software for lawyers that matches what I believe great software should be. But it never appears.

I've given up hope that someone else will create the software programs I'm looking for and decided to build them myself. So, for the next 11 weeks I'll be a student at Code Academy sharpening my programming skills and building awesome applications for attorneys.

How I Made a Mobile Version of This Site

March 24, 2012

When I first looked into how to create a mobile website, it sounded easy. But it actually turned out to be a little harder than I expected. Here's how I did it.

CSS Media Queries

CSS Media Queries allow you to specify CSS rules for particular screen sizes. For example, if you want to set specific CSS rules for screens that are 480px or less (like iPhones), you could place those specific rules within the following CSS:

@media only screen and (max-device-width: 480px) {

}

As long as you put @media rules like this at the end of your CSS file, they will override your standard CSS when a mobile device with the specified width visits your site.

Single or Separate Stylesheet

You can either place your @media rules at the end of your existing stylesheet (as shown above), or use a separate stylesheet. To use a separate stylesheet, your HTML needs to specify when each stylesheet should be used.

<link rel="stylesheet" type="text/css" media="only screen and
(max-device-width: 480px)" href="mobile-device.css" />

If you use the separate stylesheet method, the browser will rely on the HTML to direct it to the correct stylesheet for the device. Therefore, you do not need to specify the @media rules within the stylesheet itself.

A good rule of thumb is to use separate stylesheets when you are building a more complex mobile site. The mobile version for this blog is very simple, so I just specified @media queries within my existing stylesheet.

Set Viewport

Whether you put your mobile CSS within your existing stylesheet or keep it separate, you should specify a viewport width in your HTML. To do so, put the following meta tag in your <head> tag:

<meta name="viewport" content="width=device-width" />

Testing Mobile Layouts

Testing mobile sites can be a pain. Typically, you would need to commit changes to your live site and then visit the site on your phone to see how everything looks. Fortunately, there's a better way to do this.

ProtoFluid is a tool that lets you preview your changes on various mobile devices right in your browser. ProtoFluid is only about $7 for unlimited use. They also offer a free trial.

To use ProtoFluid, download the most recent .js file and follow the documentation to include the .js file in the <head> of your HTML. Don't forget to also download and specify jQuery. The <head> of your HTML should look like this:

<script type='text/javascript' src='/js/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='/js/protoFluid3.02.js'></script>

Next, you also have to make a slight adjustment to your media queries by adding max-width. This allows ProtoFluid to simulate what the mobile version will look like. Your media queries should now look like this:

@media only screen and (max-width: 480px), only screen and
(max-device-width: 480px) {

}

Once you have ProtoFluid installed and your media queries updated, all you have to do is add #protoFluid to the end of your url, like this: http://yourwebsite.com/#protoFluid

If you have everything installed correctly, your browser should look like this: ProtoFluid Screenshot

One of the best features of ProtoFluid is that you can preview changes to your code right in the browser with Web Inspector or Firebug.

This makes it really easy to figure out which elements you need to change to make your site look great on mobile browsers.

I preview changes for this site on my local server. With ProtoFluid I can just visit (http://localhost:3000/#protoFluid) to see what my site will look like on the iPhone, iPad, and other mobile devices.

So, how does it look? Have any other mobile tips? Get in touch with me on twitter @scottweisman and let me know.

More Information

Check out the following sites for more information:

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

Media Queries for Standard Devices

ProtoFluid Documentation

Code Academy

March 22, 2012

Well, it's official: In April, I'm leaving my job as a trial lawyer to work full-time on developing web applications with the Spring 2012 development class at Code Academy.

Code Academy is an 11 week course that teaches the basics of web development using Ruby on Rails.

I've been teaching myself Rails for the past year or so. I've made a lot of progress, but I've found it difficult to get the the next level without any real support. I think Code Academy is the perfect opportunity for me to continue learning, build my ideas, and get to know all of the awesome people in the Chicago development community. I can't wait to get started!