Category Archives: General

by Carlos Rios
Geek

The magical command line

27 Comments

I have recently become more comfortable with the command line, but for a long time felt like that blinking cursor was telling me “you. remember. nothing. you. remember. nothing.”

I have a visual memory. I can picture a drawing of the water cycle from my fifth grade text book, and I remember that the drawing was on the left side of the page. The command line makes poor use of a visual memory (though setting up the bash shell with some colors can help), and I thought perhaps we could do better.

Ages ago, 2010ish in fact, I imagined a solution, which I called the magical command line. I pictured a series of in-context drop-downs that could guide someone who was less comfortable with this mode of interacting with the computer. For example, when a user typed gi the drop down might suggest git, gitk, git-duet, or any number of other commands beginning with the letters gi.

gi

I also wanted a command line that would auto suggest things that could be found in help documentation (without me needing to type –help again and again). As the user finished typing git and then added a trailing space, the suggestions would auto-update to match the new set of constraints, and only subcommands of git would be suggested.

git_space

So, when I type git m, the magical command line would in a context sensitive way, realize that I’m typing a subcommand of git and auto-populate the drop-down with subcommands that begin with the letter m. Notice how the icons and colors change to let the user know they are dealing with a primary or subcommand.

git_m

As I select the second option git mv the magical command line now populates the drop-down with two file-picker triggers for both the source and destination file. Different iconography distinguishes the file picker from the regular command/subcommand suggestions.

git_mv_dropdown

When I choose source, it opens an OS specific file picker.

file_select_GUI

Is this still a good idea four years later? I don’t know. I think it would still help beginners and those with visual memories like mine get comfortable with the command line faster. Maybe in the intervening years something like this has already been created? If so, I’d love to hear about it. What do you think? How does your memory work best? Would this tool help you?

Note: Obviously the interaction is heavily inspired by my use of adobe products. I even proposed this to Adobe years ago because I thought it would be a great bridge-tool for designers on the nerdier end of the spectrum, but the PM just smiled and nodded. Maybe it’s actually a dumb idea? I thought I’d put it out there before I nuke this buggy laptop and possibly lose the designs forever.

Photo Credit: Carlos Rios

Geek, General

Rails is mucking up my CSS – Already!

17 Comments

Or is it Ruby? I’m not really sure. I’ve been building the sample app in Chapter 2 of this Ruby Tutorial, and straight away I can see that my CSS is getting structured incorrectly for long term maintainability.

I used rails to generate the User automatically… 

rails generate scaffold User name:string email:string

And Microposts…

rails generate scaffold Micropost content:string user_id:integer

I did not order these stylesheets

I took a look inside /app/assets/stylesheets/, mainly because I wanted to spend a bit of time in a part of the app that was likely to look more familiar to a front-end developer. ;)

What I found surprised me. There were already four stylesheets – none of which I would have created were I rolling a brand new app by hand. 

application.css
microposts.css.scss
scaffolds.css.scss
users.css.scss

Erm, weird. Our CSS architecture should certainly not match our back-end architecture if we want it to scale. It seems like rails creates a new stylesheet every time I make a new model (and some other times too, because scaffolds aren’t a model).

How could Rails handle CSS better?

As a first pass, it seems like it would make sense for rails to add command line options to add CSS components. So you could ask rails to add buttons and it would create sass files for buttons, add .erb templates, etc. Maybe they could even be dependencies? I’ve been thinking that it would be cool to add components like buttons, boxes, grids and media blocks to NPM so that a project could require buttons and automatically get any code required for them without including an entire front end library. Maybe rails needs something similar.

Is that nuts? What do you think? Has your CSS stayed maintainable on Rails projects? I’d also love to hear about it if I’m misunderstanding aspects of Ruby, Rails, or the line between the two.

Photo credit: Christina B Castro

Geek

Error messages are my friends, pair programming buddies are my best friends

4 Comments

This, like most things I’ll ever learn, I learned the hard way. It is difficult to admit, but for a long time, I thought I was doing programming wrongâ„¢ because I kept getting so many error messages. I thought that if I were a real programmer, I wouldn’t get any error messages because I would write it correctly the first time. I didn’t realize that success in programming looks like a succession of error messages, each a little further into the problem you are diagnosing than you were before. This. Is. Huge.

I wish someone could have told me years ago, but I think for anyone who is comfortable programming it would feel like telling me to remember to breathe. Luckily I had the chance to pair program with some great developers and I learned by watching them go through the process – watching them deal with the ego bruising frustration and eventual elation of solving a problem, one error message at a time. Without them, I never would have felt the rush of “Wahoooo! Different error message than before!” It is amazing. One minute you think you will never, ever, ever solve the problem… and the next, zomg, I’m king of the world! Rinse, repeat.

It is beautiful to experience such joy (and pain) in solving problems, and it helps me remember that I’m neither the king of the world nor the developer who will never, ever solve the problem, but a bit of both, and a lot in between. In CSS, after 13 years writing the language, I can often just look at a bug and say “this has to be x, y, or z.” If I hadn’t gotten out of my comfort zone, I never could have had so much fun. :)

Geek

Big News – I’m learning Ruby

5 Comments

So, I’m embarking on an adventure. I’ve decided to learn Ruby. Many people have a pet language and so they respond to that with “Why Ruby?” You can see they are itching to plug their language of choice. To be fair, I made this decision at NodeConf this year. So I can understand how they might have thought I’d choose Node. Ruby made sense as a starting point for a few reasons.

First, I had a chance to work with Pivotal Labs last spring, trading CSS mojo for Ruby mojo, in their 100% pair programming environment. That was a huge leg-up and I’ve since come to believe that there is nothing quite like pair programming for helping you up your game.

Next, the Ruby community is amazing. They have produced an incredible body of tutorials, videos, and step by step instructions for helping a beginner get started in the language. It’s obvious how much they love the language and they show that by sharing it. Other new, shiny (hipster?) languages may be amazing, but I didn’t find such developed tutorials as I did in Ruby. (If you know of some for other languages, please do feel free to add a comment below so other people can find them). The tutorial I’ve chosen to follow is great in that it helps you through building an app step by step. It anticipates stumbling blocks. It lets you use the rails magic and then weans you off a bit. I’m just a few chapters in right now, so I might change my mind. But as a long time front-end developer dipping into the backend, I’m really enjoying this Rails Tutorial.

I’ve also decided to start writing about the experience, which means you my dear readers will see a bunch of newbie posts on this blog. Me struggling with routes, me finally getting the gist of debugging, or me asking questions about the underlying magic happening because I haven’t been able to find the dividing line between Rails and vanilla Ruby. That kind of thing. I hope you don’t mind the change in tone. It is important to me to spend time being both a teacher and student, and the last few years, writing exclusively about CSS, didn’t really give me the chance.

I’m really excited about this, and I hope you will be too.

Geek, General, oocss

Re-visiting the secret power of block fomatting context

3 Comments

Recently I did a quick talk at Sydney Web Apps meetup about block formatting context, focusing on how it changes the way it interacts with floated elements. I first learnt about this “secret weapon” via Nicole’s blogpost but it wasn’t until recently that I really understood how useful it is. In my talk I talked about how we use this technique in the OOCSS open source project, using media block, grid and template as examples in my slides.

Presenting at Sydney Web Apps meetup

P.S. Feels rather weird to hear and see myself on video! *cringe*