Atom Text Snippets

Text editors are powerful tools to increase your efficiency.  I’ve finally gotten around to learning about customizing Atom’s text snippets, and I have a few tips to share here.

In all the time I’ve been learning to code, I have tried to avoid optimizing my text editor or even learning too much about its functionality.  I believe in muscle memory.  Typing code, over and over, helps me to internalize the syntax and structure of a programming language.  This is not entirely scientific on my part, but I come from a background of first learning to play guitar, and then practicing martial arts for many years.  Both of these disciplines require hours of repetition, day after day.

When I started learning to code, I found that Zed Shaw’s Learn Ruby the Hard Way gave me the most bang for my buck (yes, I know it’s free) because he requires you to type out the code, and then reread it, instead of just reading about the concepts.

But at some point, learning becomes doing, and now I find myself getting paid to reskin an app.  This requires entering the same code in multiple places across many files.  Providing value to my client requires speed.

Ag is a useful tool for finding the code I want to change (if you aren’t using it, stop reading this and start reading this).  But knowing is only half the battle.  I also have to go into each file, delete the old code, and type in the new.

Snippets allow you to type a short abbreviation, and expand that to whatever you want.  As an example, I have the following code in my snippets.cson file:


This allows me to open a new file, save it as an html file, and then type ‘html5sk’ and hit enter.  An tabbed-in html page appears in a puff of smoke!

The atom/snippets page really has all the information you’ll need to get things set up, and there are several tutorials out there as well.  But setup can be a little finicky.  One of the most useful bits of information is figuring out what context your snippets need – especially with Rails.  I struggled with this for a while, because ‘.text.html’ seems to work in some cases but not others, ‘.text.erb’ works in a different set of cases, and so on.

The easy way to determine this is to open a file that you want to use a snippet in.  Then hit ctrl-shift-p.  A box will open up at the top.  Type “Editor: Log” and you’ll see “Editor: Log Cursor Scope”.  Click on that or hit enter if it’s highlighted, and you’ll see the scope for that file.

Also, don’t forget to put a dot before the scope in your cson file, eg ‘.text.html.ruby’.

With a little experimentation you should be well on your way!

Meteor and Rails Compared

I’ve started playing with Meteor.  I’ve done several tutorials for it in the past, and even went to Meteor SpaceCamp in 2015, but now I am actually building things.

I’ve been contributing to the new CodeBuddies website (original here, kudos to Linda for building the site and the community!) and I’m building a workout log for myself (mainly as a learning experience).

Meteor is something like Rails:  a way to get started fast and have a working web app with minimum code.  It’s more opinionated:  currently it uses Mongo as the database straight out of the box.  It also has less convention than rails:

  • There is no accepted folder structure (although there are some basic rules that can help you organize your own code).
  • ActiveRecord is a great help in setting up associations – Mongo is much more free form
  • Mongo has no set schema – items in the same collection (aka”table” in SQL) can have different fields from each other
  • There are no form helpers – everything is javascript and html, and you have to write all events and helpers yourself

There are also some changes to look forward to, or maybe dread if you’ve done a lot of development with Meteor already.

HAML and Rails View Helpers

I hit another little snag last night with HAML.  Take a look at this page:

formYou can see that the bootstrap formatting on the second form input is wrong and the page is rendering a default html form.  The first form is working right.  Here’s the HAML:

form code

The correct code is on lines 8 and 9.  The incorrect code is on lines 11 and 12. This is something that is obvious once you understand it, but not so obvious at first.  With HAML, you can create a class for a div by typing


So it seems like if you want to create a text box input, you could just type


But what this actually does is create a div with the class “form-control”:

incorrect html

The input is created without a class within that div. Thus, a plain html input box.

form_for, .label,  and other rails view helpers are Ruby code that generate HTML. So you have to prefix them like so, with the class declaration within the attributes hash:

=f.text_field :first_name, class: "form-control"

Like I said, obvious once you understand it. But it took me a while to figure out.

Building an Index Page with HAML

HAML is a simple templating language for Ruby. I finally decided to pick it up today.

I started with one of the simplest views in my rails app, an index page that lists all employees. Here’s the original code, in erb:

erb index

And here’s what I came up with in Haml:


The thing to notice here is that I had to create new divs for each bit of Ruby code.

 .col-md-3= e.full_name link_to "Edit", edit_employee_path(e) link_to "Delete", e, method: :delete

just won’t work in HAML. Which is fine, but it took me a little while to figure it out. Most of the tutorials I found didn’t really explain this, and the reference didn’t have any examples of how to put multiple lines of Ruby into a div either. Turns out it’s because you can’t, apparently.

Overall I’m finding HAML to be really nice.  It’s simple, quick to pick up (20 minutes for the basics, seriously), and cuts down on typing quite a bit.

Problem Solving Rails and React

I’ve decided to add React to a Rails app I built.  Right now I am trying to create a select box in a form.  The form creates new Transactions.  Each Transaction belongs_to one Program and one Account.

Currently I have the Transactions showing up, along with a form and delete actions.  But I am having some trouble.

The first bit of trouble is that I’m using CoffeeScript, which is new to me.  React uses JSX and vanilla JavaScript.  So translating to CoffeScript is confusing, although not impossible.

The next layer of trouble is how to create a select box in React.  React has no form_for or options_for_select helpers.   I have figured out how to create a select box, but I need it to be populated by the database table Programs.

The third layer of difficulty is how to deal with associations.  I can’t type in the view like I can in Rails, and I can’t use a raw SQL query in the JavaScript.

To help wrap my head around the problem, I decided to follow Justin Weiss’s fabulous advice, and build a mini-app.  This simplified the problem for me, by taking it down to the simplest level that I was having trouble with – how to access associations in a rails app, using React.  Thanks to this excellent tutorial, and with a bit of muddling around, I’ve figured out how to access associations.  Now I have to figure out how to put this into a select box with coffeescript.

A Real-World App

I have created my first real world app.  It is for credit card reporting where I work.  I’ve taken our painfully inefficient reporting process and moved it online.  My boss has seen it and approves, now we have to get staff appto buy in.  Whether we end up using it or not, I’ve learned a lot.

Currently it’s hosted on Cloud 9 for development.  I’m not sure how I’ll deploy it, probably heroku with AWS.

printable viewIt is not complete, but it is at the point where I could deploy it and it would get the job done.  Users can enter transactions and get reports.  I plan on adding features as time goes by.


According to Rescue Time, I have spent about 51 hours this month on software development and research.   That’s not a lot but I’ve had lots of family stuff going on this month.

I rolled my own authentication and built the css layouts from scratch.  It has a printable view so reports can be printed out and signed.  Testing is not complete.

I started this app around the beginning of the month, and it’s been most of my work this month, with a few other things here and there.  So my first MVP took about 50 hours.  It will be interesting to see how that number changes as I get more experience.

The code is on github here.