Category Archives: Views

Fear Not, SASS is with You

I was recently handed a front-end project at work, essentially a redesign for the carousel on our application’s home page.

Though on the surface, this project seemed straight forward, it scared me.

Why?

I like to consider myself a good back-end/server-side developer also competent in javascript/jquery. But as far as heavy duty css’ing, I can make an interface look ok, but fully realizing our designer’s mockups through CSS seemed tricky.

A side story:

When I was still living with my folks 10 or so years ago, my mom wanted to replace a storm door. I thought, “I can do this!” So on a gorgeous Saturday, without taking any measurements, I drove to the hardware store, purchased the door my mom was interested in, and proudly brought it home.

After removing the old door, I lifted the new one into the empty frame, and realized, it was not going to fit. My mother had apparently taken no measurements, and I had not bothered to verify that she’d taken measurements.

But being the resourceful person that I am, I decided to use the one tool I had available that could possibly solve my problem – a chainsaw. As carefully as possible, I used the tip of the chainsaw to chip away at one side of the frame until the opening was large enough to fit the door. It was quite a hassle, and the frame was looking pretty rough, but thankfully, the installed storm door covered my less than beautiful hack job.

This is how I felt about my front-end development work. I could certainly use my CSS chainsaw skills to ultimately get that carousel to look just right, but behind the scenes, the frame might be a mangled mess.

But that’s when our front-end developer came to my rescue. He took the chainsaw from my hands, and gave me a ruler that enabled me to size a storm door properly to the frame, or in my case, cleanly style a carousel.

SASS!

An acronym for Syntactically Awesome Style Sheets, it is well named.

Its most basic and powerful feature allows a developer the ability to avoid repetitive scopes via nesting. Here’s an example:

//CSS
.wrapper { width: 100px; }
.wrapper .button { color: red; }
.wrapper .button .big { height: 100px; }

//SASS
.wrapper {
  width: 100px;
  
  .button {
    color: red;
    
    .big {
      height: 100px;
    }
  }
}

That one trick makes styling in SASS much more pleasant than CSS. And the nice thing is that SASS is compiled into regular old, nasty CSS for you. Throw in Compass, and you now have a toolset of cross browser, pre-built reusable styling patterns at your disposal.

For instance, need a nice, horizontal list? Just include the following in your SASS file:

@import "compass/typography/lists/horizontal-list

//And to use:
ul.horizontal {
  @include horizontal-list; 
}

If you’re using CSS exclusively, you are missing out. And I can tell you, even if you are a primarily backend software developer, as long as you have a basic understanding of CSS, SASS/Compass should come easily to you. A one hour overview was enough to get me started, and a few fifteen minute refreshers got me through the project with a carousel that meets the design specs without hiding a very ugly frame.

If you are a rails engineer, SASS is already built in to versions 3.1 and later.

This article is not meant to be a comprehensive guide on how to install and fully implement SASS and Compass, but I hope it inspires you to look into it if you haven’t already. In my opinion, back-end developers should be as competent as possible in front-end work as well as server-side stuff. I’ve been bitten so many times by having to constantly offload front-end work to other devs. Depending on their schedule, which is often quite busy, you may have to wait a good bit for the styling to be complete before you can move on. Plus, it’s just fun being able to put together the engine and paint the frame 🙂

If you’d like a comprehensive guide on how to install SASS and Compass and use their many awesome features, I HIGHLY recommend the following book.

SASS

 

Pragmatic Guide to SASS by Hampton Catlin & Michael Catlin

Short enough to read in a day or to, and useful afterwards as a reference, it should pretty much get you fully up to speed.

Good luck SASS-ing!

Advertisements
Tagged , , , ,

Why it’s Bad to Pass OpenStruct (or Object) to Controller from View

I recently ran across an instance where I needed to pass a relatively simple OpenStruct from a view back to the controller via a GET. It was a strange situation where I needed the OpenStruct to populate some tables in the view, but upon a user submit, needed to use that same OpenStruct back in a controller action.

I found a bad way to do it.

 

Continue reading

Tagged ,

Rails pagination, will_paginate, and AJAX

One of the beautiful elements of Ruby on Rails is how much you can do with so few lines of code. The will_paginate gem is a prime example. With just a few line’s of code, you can add pagination to any of your application’s lists. Having dealt with home brewed pagination methods many times during my years as a web developer, I can only say that this little gem has brought me much joy. Below is an example on how to use it.
Continue reading

Tagged , , ,

Responsive Design

My wife, daughter and I visited a friend/coworker over the weekend. We had a wonderful time getting to hang out with him and his wife, letting our nine month old roam their 1850’s plush carpeted farmhouse, and exploring the ancient basement, home to a toad, cobwebs, and chiseled stone walls.

But the day would not have been complete without my friend and I sitting down and coding some Ruby on Rails.

As he and I discussed the apps we’d been working on, I showed him a little about the Rails asset pipeline (will post about this in the future), while he showed me how he’d used a nifty css/javascript framework to set up responsive design for his site.

Continue reading

Tagged , ,