Starr Horne - Seattle Rails Developer

Frontend Code Doesn't Have to Suck: 5 Tips for Rails Developers

2012-02-16T16:32:17-08:00

Most front end code sucks. You know the situation. You start out with the best intentions every time, but every time you wind up with something "less than maintainable."

I'm a rails developer and a lot of my work has to do with building out the UI. Over the past few years I've developed a number of best practices that have really helped me to build solid, maintainable front ends for fairly complicated web apps.

I believe that most rails developers could improve the quality of their front and builds by adopting a few of these suggestions.

Namespace the Hell Out of Your CSS

(Then namespace it some more)

The worst part about CSS is that style conflicts are guaranteed to happen.

When a project is still young you may think that all H1s are going to look a certain way (just like you thought you were always going to wear those acid wash jeans).

But then you need an H1 with an underline, and then one in a different color. Soon, you first step when you style any H1 will be to undo half of the the original, global H1 style. It ain’t pretty.

Your salvation lies in using a CSS reset, then namespacing the hell out of everything.

Personally, I like a two-pronged approach, where I break a site up into “components” and “pages”. Component styles are namespaced to the component container. Page styles are namespaced to the body class.

/* Styles for the sidebar component */
.component.sidebar {
  width: 300px;
}

/* Page specific styles */
body.checkout {
  .component.sidebar {
    width: 100px;
  }
}

Global styles like “.error” are forbidden, with consequences of biblical proportion. (This is why I am morally opposed to things like the twitter bootstrap).

If you follow this approach diligently, you can drop any CSS file into any page on your site with ZERO style conflicts.

Create a naming convention for files and classes

Most people just stick their CSS in a single file. At first things may be organized. But after 6 months, more often than not you'll have an ungodly mess of unmaintainable css.

Naming conventions solve this problem.

You should always know exactly where the style for an element belongs.

A new developer on your team should be able to add a component to the page, and know exactly where to put the stylesheet. Then you should be able to come along later and know exactly where to find it.

So in my projects, if you add a new component named “sidebar”, you will name the class “component.sidebar”, and the styles will go in /stylesheets/components/_sidebar.scss .

Here are some examples:

app/assets/stylesheets/components/_component_name.scss
app/assets/javascripts/components/component_name.js.coffee
app/assets/images/components/component_name/lolcat.jpg
app/views/components/_component_name.html.haml

This system works quite well. It provides you with mechanism for defining general, reusable UI elements as well as for customizing them on a per-page basis.

Create a style guide

If you have the luxury of working with a really good designer, you might find yourself given a style guide containg specs for all of the color, text styles, buttons, gradients and other visual elements used in a project. Buy this person a sandwich. They've just saved you a ton of time.

Even if your designer is to lazy to give you one of these, I suggest that you create one for yourself. You can do it based on mockups, or on the fly by continually refactoring your css.

You can use the styleguide to build a set of sass mixins which you can use throughout the project. This is how you can have DRY stylesheets without defining global classes. If you haven't done things this way, it's awesome. It saves so much time.

Make your JavaScript independent of Dom structure

Once you've built enough projects you find yourself running into the same bugs over and over again. For example, I had one project where every few months the JS would just stop working, even though it hadn’t been touched.

Inevitably, the problem turned out to be that someone had tweaked the HTML, caused the JS dependent on some DOM structure to explode.

Your project’s HTML will be changed all the time.

Your project’s HTML will be changed all the time. It is a fact of life. Every time you write JS that depends on a DOM structure, you’re linking the stability of your code to something that's inherently unstable.

An easy way around this is to use HTML 5 data attributes. For example, if I have a link that causes a box to slide open, I might set data-expand=”#the-thing-to-expand” attribute.

Here's the html:

<a data-toggle-trigger="token">Toggle that thing!</a>
<div data-toggle="token"></div>

And coffeescript:

$("[data-toggle-trigger]").click (e) ->
  e.preventDefault()
  $("[data-toggle=#{ $(this).attr("data-toggle-trigger") }]").toggle()

Modularize your JavaScript

With Rails 3.1 and the asset pipeline, every piece of JS you add runs on every page of your site. So it’s time to namespace the hell out of your JS.

With Rails 3.1 and the asset pipeline, every piece of JS runs on every page of your site.

One neat approach is to create JavaScript classes which only operate on one particular component. If the component is present, they go to work. If not, they don’t do anything. These JS components only operate on children of the component container, and they don’t know anything about any other components on the page. But they can communicate via custom DOM events.

This method is simple, but can be really powerful. For example, in my work at OfficeSpace.com, we have a search form which update a Google map, a data display, and several other elements. All of these are separate components which communicate via custom DOM events.

#
# Simplified search form. Somewhat Nonsensical.
#
class SearchForm
  constructor: (@el) ->
    @el.find("form").submit (e) =>
      e.preventDefault()
      $(document).trigger("location:search", @searchParams())
  searchParams: => # Just an example
#
# Attach the component to dom elements
#
$ ->
  $(".component.search-form").attachComponent(SearchForm);

Conclusion

I hope these few tips will help you build awesome, maintainable UIs for your rails applications. They’ve definitely helped me.

Fuzzy Text Search in Postgresql

2012-02-15T15:31:53-08:00

On my latest project, one of our guiding principles was to keep then number of moving parts to a minimum. (That sphinx/solr server your running is just one more server that can go down)

Fortunately, postgres provides some nice fuzzy text search features out of the box. And they're super easy to use.

To enable the trigram and fuzzy string match extensions, just do this:

CREATE EXTENSION pg_trgm;

Now you can play around. Searching for "wiliam" will return people named "william".

SELECT name FROM people WHERE name % 'wiliam' ORDER BY similarity(name, 'wiliam') DESC;

It's important to use the % operator as the condition for the select, because it uses available indices. (The similarity function doesn't.) BTW, similarity is a float between 0 and 1, where 1 means "identical".

Once you're ready to create an index, just do this:

CREATE INDEX people_name_trigram_index ON people USING gist (name gist_trgm_ops);

Easy peasy.

select similarity('bob ross', 'ross bob');

One thing to watch out for is that the % operator and the similarity function don't take position into account. For example, in the above query they show "bob ross" and "ross bob" as being identical.

Using Sunspot / Solr to Dramatically Simplify Tagging & Other Stuff in Rails

2012-01-18T18:20:00-08:00

Ok...If you really love SQL, this is not the article for you. I'm going to share a little trick I've learned that will let you do really complex queries without writing a lick of SQL.

Here's the setup

I've been working on a niche job site for a client. It's pretty straightforward, but it involves some monster queries.

A typical requirement might be to query all JobCandidates who:

Have any location, job_type or specialization matching those of any job belonging to a specific employer.
- JobSeekers and Jobs both have multiple, arbitry values for location, job_type, etc...
Have not replied to any of the employer's previous job postings
Have been active in the last month

... and we need to to fulltext search on top of this.

That sounds like a lot of work

Why yes, it does.

Sure, you can implement all of that using AR/Mysql. But it sounds like a heck of a lot of work. And not very fun work.

The Solution

On a lark, I decided to see if this could be implemented any more easily using Solr, and the excellent Sunspot gem.

The basic trick is this:

Use AR's serialization to store an array of tags in the model
Tell Solr to index each tag.

An Example Model

How to search

This will return all jobs where job.specializations includes one of 'rails', 'python' or 'perl'.

Bonus!

You don't have to do anything different in your controllers/views to take advantage of this approach.

Rails' views and controllers are set up to handle arrays like this just fine. In the example below, when the user submits the form, the job's specializations are set, and will be indexed by Solr on save.

Wash, Rinse and Repeat

If you can add one solr-indexed tag attribute to your model, you can add two.

Also, since solr can index integers, there's no reason you can't define associations between models in terms of arrays of integers.

Here's a bit of production code, slightly cleaned up:

Caveats

I'm pretty sure this won't scale well at all, since it requires you to update the solr index whenever a new record is created or updated. But this particular project is not going to be very high-traffic, so it's no big deal.
Solr only promises 'eventual consistency', which could be an issure for some apps, but isn't here.

Track Pageviews Using MongoDB

2012-01-18T18:20:00-08:00

Now, mongo isn't the solution to every problem. But for some things, like action tracking, it is close to perfect.

Mongodb is pretty sweet, and mongo mapper makes it really easy to integrate with your rails app.

For example, the following track method will create a Metric record with a certain action if it doesn't exist. Then it will push the current time to the timestamps array.

https://gist.github.com/1637337

The only caveat with this approach is that mongo documents have a max size of 5 megabytes. So if you were tracking pageviews on a site that received 1000s of hits a day, you'd exceed that limit pretty quickly.

How to extract font names from TTF files using Python and our old friend 'the command line'

2012-01-18T18:19:00-08:00

So you're given an archive containing 10,000,000 .ttf files, most of which are named things like "bs019dfk.ttf". How do you extract human readable names from these things?

If you're like me you think, "No problem! There has to be a command line utility for that!"

...then about an hour later you think, "I hope to god there's a command line utility for this".

...then you open a .ttf file in a text editor just in case the name will somehow magically be there.

...then you start drinking.

Well, good news for your liver. While I couldn't find a stock utility to extract the name from the .ttf file, I was able to find a little code to do so.

It's in python, and you'll need the FontTools library installed. And you should know that this code is blatently copied from the TTFQuery project.

To use it, just do this:

ttf_name somefont.ttf

Or to get all of the font names in a directory tree:

$ find . -iname "*.ttf" -exec ttf_name {} \;

Customize the Google Voice Call Widget With Rails & jQuery

2012-01-18T18:19:00-08:00

So I have a client who needed a google voice widget embedded in their site.
If you're not familiar with it, it's a little widget that your site's visitors can use to call you.

It's really simple to set up...unless you want to customize the widget's graphics. But there is a way. Here's how you can do it:

A simple form post

The Google Voice widget does a simple form post. You can see it Here.

When there are no errors, google returns "ok=true". When there are problems, it returns "ok=false".

Easy

A Proxy

The only kink here is that we can't AJAX post to a 3rd party domain like google. So we need to implement a little proxy. You can do this by creating a controller named "phone_calls".

It's pretty simple. It just takes params[:phone_call] and does a https post to the google server.

The HTML

Now we just need to make a little form and add some javascript to submit it. You'll need to get your api key from the google voice widget's embed code.

... and here's the javascript

You can make it a little fancier by showing "success" and "failure". That's left as an exercise for the reader.

Making a million little color swatches with imagemagick and rake

2012-01-18T18:18:00-08:00

Yesterday I was working on a project, and found myself needing to create a bunch of color swatches. CSS wasn't an option. No. They had to be little 16x16 images.

In such situations, I often resort to a more-or-less socratic dialog:

"Is it not so that you are building this for a client"

"Yes."

"And do clients not inevitably change their minds"

"Very true, they usually do"

"Then would it not make sense to generate these swatches programmatically?"

The Rake Task

Heartily agreeing with myself, I devised the following rake task for creating color swatches, based on input from a YAML file. BTW, You'll need to have imagemagick installed.

The YAML File

Now create a "swatches.yml" file like so:

W00t!

Now you can just type in "rake swatches" and feel the magick.

How to use rjs templates with uploadify: a rails multiple file upload extravaganza!

2012-01-18T18:18:00-08:00

John Nunemaker posted a great article on using uploadify with rails.

Uploadify is a sweet jquery plugin that lets you do multiple file upload with progress indicators and everything, using the magic of flash.

But you know that magic always comes with a price. Specifically: flash sucks. It sucks in part because it doesn't let you send cookies back with your request. John's post showed you a way around that.

But it also sucks because it doesn't send HTTP request headers either. Which means no RJS, kiddies. Unless you use a workaround like so.

In your middleware:

And in your javascript, you'll need to add a bit of code to eval the response:

Now, bingo! You can just use responds_to like normal.

Warping Vector Text With Ruby & Cairo

2012-01-18T18:16:00-08:00

I recently needed to create arched text in an application that uses Cairo. Unfortunately, Cairo doesn't support warping text out of the box.

Luckily, the pycairo guys were cool enough to include an example of warped text in their distribution.

Here it is, ported to ruby: