You identify some UI you want to improve in your Rails app. You need to figure out which templates and styles to edit. Where do you start? Do you use a web inspector or jump straight into the views directory?
You’re reading Signal v. Noise, a publication about the web by Basecamp since 1999. Happy !
You identify some UI you want to improve in your Rails app. You need to figure out which templates and styles to edit. Where do you start? Do you use a web inspector or jump straight into the views directory?
JF
on 15 Jan 09I usually ask Jamis.
justin h
on 15 Jan 09Usually firebug to figure out some notable html/css elements. Then use grep to find the noted sections in the application files and take it from there.
Todd Esposito
on 15 Jan 09I take the proactive route: I put a small comment into each template or segment (if many are aggregated into the final page) to uniquely identify each such template or segment. I’m currently using SVN, so this works really well:
<!- $Id: $ ->
Ryan
on 15 Jan 09I start with Firebug, then go straight into app/views. I find that the structure of a Rails app is pretty easy to figure out what actual “file” I need to open. I know it’s in app/views, then which view based on what I’m looking at, then it’s just a matter of a few files at that point, and even the action itself assists with that. Yet another benefit of Rails :-)
But definitely, for styles, I use Firebug (then cmd + F in textmate).
Kenn Wilson
on 15 Jan 09If it’s markup I need to change and I’m not sure where it’s coming from, I’ll either ‘grep -r’ my views or watch my Mongrel output in terminal to see which files are loading.
If it’s styles I’m looking for, I’ll usually use Xylescope or Firebug to identify the IDs/classes, then grep as needed.
afruit
on 15 Jan 09I like using the xray bookmarklet.
X-Ray for Web Designers
Thijs van der Vossen
on 15 Jan 09Usually, I just do a global search through the views directory using the ui text from the element I want to change.
We keep the CSS in our projects well structured using meaningful class and id names so I most things can be found really quickly.
Nate
on 15 Jan 09I use the xray bookmarket if I’m curious but when I know I’m going to be digging in then I use CSSEdit along with Textmate to handle the files properly.
Michael O'Brien
on 15 Jan 09Straight into Firebug to figure out styles (how did I get anything done before Firebug?). My views are usually pretty simple, so there isn’t much to figure out. I guess you use partials a lot more, is that for abstraction or do you reuse stuff a lot?
Bryce
on 15 Jan 09I usually mdhere for a unique non-composed token in the section if I can’t figure it out with a quick view-source.
James
on 15 Jan 09Normally I can just remember where everything goes!
RS
on 15 Jan 09There are three reasons we find ourselves creating partials:
1. Re-use. Eg. foo/new and foo/edit share foo/_form.
2. Re-rendering. If a block is going to be rendered via RJS (Ajax) then we need the code to be in a partial.
3. Revealing intention. Sometimes one section of a form requires a disproportionate amount of markup. We’ll pull that section out into a partial and give it an intention-revealing name so the main template doesn’t get bogged down by the details of one part.
That said, we still avoid creating partials without good reason to do so.
Wolf
on 15 Jan 09I’m a designer ocassionally working in Rails apps. My ruby knowledge is limited to calculations, if/else/while. My rails knowledge is limited to a few tags like the image tag and link_to, and then I often find myself looking up things in the API.
If I don’t know where to find the template, I look at the URL, find the folder in app/views, try to figure out which template it is. If that doesn’t work I run a full text search on the views folder using some string that is unique to the template (usually found using Firebug or view source)
Michael Deering
on 15 Jan 09Firebug right of the bat if it is a style issue.
If it is going to involve edits to a partial/template there is little searching or guessing of a good convention has been established within the project.
Jeff
on 15 Jan 09I use the noisy_partials plugin so that each partial has an html comment in it.
For others, I intuit the view name from the url, and if that doesn’t work , check the controller for what’s being rendered.
Failing that, firebug ftw.
Daniel
on 15 Jan 09Like James I usually remember where everything goes. Or, I at least I know where start looking in the views dir.
But then again I rolled by own framework in PHP, which works the same as Rails in most aspects, esp. in terms of views, layouts, partials and so forth (which is why I dare to answer this question without using Rails, per se). So besides priding myself on good memory, I’m pretty deep into everything anyway.
But now that I think about it, I should probably make my lil’ plagarized framework print out the names of templates in html/js/whatever-comments, as long as it’s running in a non-production environment. That’d be kinda useful and neat, I think. Could imagine that being a useful little commit to Rails, even, if only I knew enough Ruby. Unless of course Rails already has this?
Michael Deering
on 15 Jan 09Tip I have given designers on my projects in the past that has also worked well for them if they are lucky enough to have a local development copy running.
Tail the log file. At the end of the request you will see the partials used
Daniel
on 15 Jan 09@Jeff
noisy_partials plugin – neat!
Pat Hall
on 15 Jan 09I generally just poke around in app/views, but if I don’t find what I’m looking for right away I use ack.
Just throw a string from the interface in question (one that doesn’t seem to be dynamic) into ack, maybe something like this:
I find ack’s usage easier to remember than grep’s. You can also use -i for case-insensitivity and -l to get just the filename (familiar options from grep).
Andrew Cornett
on 15 Jan 09I jump straight into the views!
Andrew Brown
on 15 Jan 09I just straight to the views. Its all about convention, and I know exactly where things are at.
Ben Bleikamp
on 16 Jan 09Those of you who use TextMate should no longer use grep – Ack in Project is so. much. better.
As far as my “technique” I generally have major views / segments of views internalized for apps I work on regularly (particularly work related) so I can pretty easily jump to the right view. Otherwise I use Ack in Project to find specific HTML/CSS rules, IDs, and classes.
Todd Little
on 16 Jan 09You might want to checkout the rails-footnotes plugin. You can run it in your dev environment, and it will generate links to resources within a page for easy access. Best of all, you can tie it to your favorite editor so with one click from the page you can open your views/partials/css etc etc.
StartBreakingFree.com
on 16 Jan 09What’s a web inspector?
I just look in views directory…or if I need a reminder, view source of page and search through NetBeans for a div id/class
Ahmad Alhashemi
on 16 Jan 09Definitely Firebug. Because it always works.
Diego Scataglini
on 16 Jan 09this flow has been working really good for me for the past few years. Especially if it’s css related.
Open Firebug to find the offending element and style. read the css filename. Close firebug and open edit css (command-shift-e from the developer toolbar) Edit the css so I can see the changes interactively. When unsure if I broke something else I click on the “stick” button and browse around. (this will persist my changes) Then I finally save the file overwriting my local.
This way I never have to switch context or application until it is time to commit the code. I like this way because there is no change/save/refresh loop. And there is no double typing of the styles as it happens when you use firebug alone.
Levi Figueira
on 16 Jan 091. Identify a particular tag/class/etc near the area I want to change (with Firebug/Web Inspector)—oh the importance of good ID/class choices
2. grep :)
Patrick Tulskie
on 16 Jan 09If it’s a bug then I just use the footnotes plugin to go right to the offending line. If it’s content then I’ll copy it and paste it into Ack in Project for Textmate and go to the line(s). If it’s something else random, then well, I just go to the view because I know where most of the stuff is since it’s fairly well organized.
Andrew Wilkinson
on 17 Jan 09I usually run a global search for a text snippet I found on the page, which usually leads me to the appropriate view.
heri
on 18 Jan 09jump straight to the view
Kevin
on 18 Jan 09I need to have an idea of the structure of the page before I can edit it, and I’m much faster to get that from reading code than from using firebug/web inspector, so I usually open up the appropriate file in app/views.
Once I’m started, I usually have both open side by side.
Peter Hellberg
on 18 Jan 09I usually just check the CSS with Firebug, if the view I’m looking at wasn’t written by me then I do a quick Rak search for some specific string.
Ionut Popa
on 21 Jan 09I use firebug to inspect elements, if I want to change the markup I jump into the views, if I want to change style I look at the cssfile/line number where the style is applied and go there.
Paul Ardeleanu
on 22 Jan 09I usually start with Firebug and, usually with jQuery, write small scripts that change an element or a collection. It’s amazing how far you can depart from the original design.
This discussion is closed.