Random Video Game Name Generator with Ruby

I've been working with a LOT of Javascript lately. And when I say "working with," what I mean is "finding scripts that will do what I want them to do and modifying as necessary." Wait, isn't this supposed to be a Ruby on Rails blog? What happened!?

I got back to work on my random video game name generator tonight. I basically wanted to style it a bit and find a way so that it would generate a new phrase whenever the page is reloaded and then provide a link to reload the page. Pretty easy to do with a Javascript code, but I'm not a huge fan of reloading the entire thing just to reload this bit of text. Probably a better way to handle this, right? Maybe an Ajax call? What do you guys suggest? This works but I don't like the look of it, I guess.

Anyway, here's a link to the app on Heroku:

Random Video Game Name Generator

I wanted to accomplish a few things with this project. First off, build a random name generator with Ruby, and then figure out how you run that code on the web. This was largely a matter of learning Sinatra, and when I say "learning," I mean reading a tutorial and talking to @jqr about it for a few minutes. Sinatra is like SO easy.

I've got plans for how I could expand it (don't I always? Other coders have this problem too, right?) such as allowing users to save names they especially like, then enter a short description of what the game would be like. Viewers could also look at games that had been saved, perhaps vote on them, look at most popular games, etc, etc.

I think it's getting easier for me to think about WHAT applications COULD do, now that I know a bit more about HOW they're built. That makes sense, right?

More work on Skyrim Stories

Today I finished up Skyrim Stories. If you'll recall, last time I posted about this project, I was looking for a way to strip out #skyrimstories from the posted tweets as well as a way to make the usernames into links to that poster's Twitter account.

My friend Matt sent me to W3 Schools to learn how to use string replace with Javascript. Took me a minute to figure out how this worked until I realized I needed to call a string replace method on the strings BEFORE they were collected into an array.

I was able to use Twitter Anywhere to make usernames into links. Plus it's got a slick hover card feature with a +Follow button. This API is easy to understand and did exactly what I wanted done plus a few extra things.

For the most part I think I'm done with this project now. I might tweak it a bit here and there, but I think it's pretty solid for what it does. And it's time for me to get back into some Ruby work, anyway.

Working on Skyrim Stories

So I've been playing a lot of Skyrim lately. I mean a LOT. It's interfered with my coding schedule a bit, but I've also been working on a Skyrim-related project.

Take a look:

Skyrim Stories

Basically what this site is doing is searching Twitter for tweets tagged with #skyrimstories, and displaying the 15 most recent Tweets. My friend @netshade sent me the javascript for it, and my friend @jqr got the domain set up and (gently) harassed me to work on it.

So far I've had a lot of fun with this project. It's been good for me for a few reasons: first, the time between thinking of the idea and having a working first version was about 2 hours or so. Within a few minutes of calling @jqr for advice, @netshade had already sent me the code and @jqr had set up the domain. It feels good to get work done really quickly, especially since I sometimes feel like it takes forever for me to get ANYTHING done. It's also been a good opportunity to get my hands dirty with some CSS and I always enjoy styling. And lastly, it's reinforcing what I've known for a long time: programming is programming, and it doesn't make sense to use Ruby or Rails for every project, especially if there's an easier, more elegant solution.

A few notes here: First, I've got very limited experience with Javascript. I can typically take some code, figure out how it works and manipulate it to do things I want it to do, but I can't write my own. For example, the code @netshade sent me worked pretty well, but it was displaying user names instead of users, so instead of displaying a tweet from @illbzo1, it would display it as being from Tyler Moore. The code also displayed retweets by default, but a quick look through Twitter's Get Search API and I was able to fix that. Especially at this stage where I'm not paginating older tweets, I don't want the entire feed to get populated by retweets. And retweets don't really fit with the idea of this site, anyway.

I didn't invent #skyrimstories, but it's already (kind of) popular, so I think with a bit of promotion and some more polish, this could really be a fun site. At least until everyone gets sick of Skyrim, but that'll be another few months, at least.

I've still got a few things I want to do with it. First off, I want to strip out #skyrimstories when the tweet is posted to the site, because I think it'll read better without that Twitter-specific language. I'd also like to make the username displayed with the Tweet a link to that user's Twitter account. I'll also want to look into a way to paginate older Tweets, displaying 15 per page or so.

Anyone with more Javascript powers have any advice?

Here's a link to the project on GitHub:

Skyrim Stories on Git

Rails Validation Syntax

Tonight while working through Agile Web Development with Rails, I was finishing up Chapter 7 and doing some of the extra stuff at the end. One of the exercises was adding validation to the Product model that checks the length of product titles is at least 10 characters.

No big deal! I fired up Rails API and found what I was looking for.

validates_length_of :title, :minimum => 10, :message => 'must be at least 10 characters.'

Ahh, perfect! Plus, editing the default message is the second optional exercise. Easy enough. But wait, what's this?

The book had me write validation like so:

validates :price, :numericality => {:greater_than_or_equal_to => 0.01}, :message => 'must be a number.'

This is a slightly different syntax than the validation I found on the Rails API and I don't like it as much. First, it's not as immediately obvious what this validation is doing. Second, it just feels clunkier. So since I'd already written a validation method in a different syntax, I figured this would do the same thing and be in a more readable format:

validates_numericality_of :price, :greater_than_or_equal_to => 0.01, :message => 'must be a number.'

And what do you know? It works! Is there anything I should be aware of when writing validation like this? Any ideas why Agile Web Development with Rails wrote it the other way? Personal preference of the programmer, perhaps? I'm assuming this is a standard way of writing validation, both because it's the same syntax I found on the Rails API, and because it's more readable. (It's also 5 characters shorter, but who's counting? A piece of Javascript I found online, that's who!)

Ahh, feels good to be making progress. I got hung up for a bit writing tests in the last chapter, until I realized I'd added a stray period and it was holding everything up. Anyone else try running test:unites by mistake? I've probably done it 3 or 5 times in the last 18 hours.

Fixing the delete method in Jquery

Here's a little problem I ran into the other day. I've switched to Jquery from Prototype, and while I was initially able to get Javascript working with Jquery, my :delete method stopped working. Rather than destroying the thing it was called to destroy, it redirected me to the show page.

After a few google searches, I found this is a fairly common problem. However, none of the solutions I found fixed my problem entirely, but a combination of suggestions DID fix the problem.

I'd installed the jquery gem, as suggested here but the problem was in the javascript_includ_tag in the header of my application.html.erb file.

At first I had <%= javascript_include_tag :defaults %>, which I assumed would work since Jquery was the new default Javascript library after installing the gem, but I had to edit it like so:

<%= javascript_include_tag :defaults, 'jquery_ujs' %>

Bingo! Once again, my :delete method works, and my flash[:notice] script is working, too.

Now for a little question.

You may recall my previous question about passing multiple values to a hidden_field. David showed me this code:

  def status
    finished? ? 'finished' : 'unfinished'
  end
end

This goes in the Task model and defines these two statuses. However, I don't know how to call them and mark a Task as finished or unfinished then have that change updated in the view.

Here's the code I've got now:

<%= form_for(task) do |f| %>
  <%= f.hidden_field :finished, :value => !task.finished %>
  <div class="actions">
    <% if task.finished %>
      <%= image_submit_tag 'finished.png' %>
    <% else %>
      <%= image_submit_tag 'unfinished.png' %>
  <% end %>

Basically, I want it to work this way: A new Task is defined as unfinished by default, a user can mark a task as finished by clicking on 'unfinished.png', or mark it as unfinished again by clicking on 'finished.png'. This change should mark the Task with that status, either 'finished' or 'unfinished.'

Will I need to update the table for Task and add this as a field? Or can this information be stored in the database just by using the hidden_field? I want to be able to manipulate Tasks based on whether they're marked as finished or unfinished later.

I didn't do much coding this weekend, but it definitely felt good to sit down and fix my Jquery problem after thinking about it most of the day today.

Working with Jquery in Rails

Still working on Chorenivore. After getting some help from Matt and David, I'm using some jquery for handling flash :notice messages. At first, I just wanted to make it so the :notice would fade away after a few seconds.

I initially tried this with some Prototype code David showed me, but couldn't get it to work for one reason or another. After a bit more digging (and prodding from both David and Matt) I decided I should just switch over to Jquery. Everything I've read says it's got a much wider development base than Prototype, and Rails 3.1 will be using it as the default javascript library, anyway. Might as well get used to it now!

Switching to Jquery from Prototype proved a bit tricky. Good thing I don't have tons and tons of code that had to be converted, huh? Here's a page I found that helped me:

Switching from Prototype to Jquery

Easy enough! This didn't take long to find (third page on a google search, but that's an eternity by today's standards) so I'm hoping it might help others out.

Anyway, back to Chorenivore! Here's the Jquery script Matt showed me that I modified and ended up using:

setTimeout(function() {
$('#flash_notice').fadeOut('slow');}, 800
);

I'm not super familiar with Javascript, but a couple of things made sense. 'slow' refers to how quickly the message fades away, and 800 refers to how long it stays on the screen. '#flash_notice' refers to every flash[:notice] and this could just as easily be applied to flash[:error] or flash[:alert]. It's funny how becoming familiar with one coding language makes others easier to read and manipulate.

After I got this script running, I decided I didn't want my flash:notice running across the top of the application. I pulled that code out of application.html.erb, threw it into index.html.erb, slapped a div on it and called it macaroni! Problem solved. It feels AWESOME to mark things off the functionality and features checklist I made for Chorenivore.

Now, how about a couple of questions? You ready?

Here's the code I've got for updating whether a task is finished or not.

<%= form_for(task) do |f| %>
  <%= f.hidden_field :finished, :value => !task.finished %>
  <div class="actions">
    <% if task.finished %>
      <%= image_submit_tag 'finished.png' %>
    <% else %>
      <%= image_submit_tag 'unfinished.png' %>
  <% end %>

Is there a way to pass multiple values to a hidden_field? Right now, I can define a task as finished, but there's no definition for being unfinished. It's just displaying the unfinished button if a task is not marked as finished. I'd like to do this so I can define custom flash :notice messages for when a task is marked as finished from unfinished and vice versa.

I had lunch with Eli today and it's always great to talk to programmers about programming. I find the fact that I've signed up for a never ending stream of headaches, frustrations and triumphs oddly comforting. This is that coding crack I've heard so much about, right?

Styling flash notices in Rails

So I've made some pretty good progress with Chorenivore the last couple of days. Last night I dug into CSS to clean up the view, mostly making sure that my <:th>'s and my <td>'s were lined up. It's kind of hard not to go nuts obsessing over padding and font size and palette choices. Save that for later, dummy! Work on your functionality first.

So sure, I have some questions.

Here's some code from my Tasks controller in Chorenivore:

respond_to do |format|
  if @task.update_attributes(params[:task])
    format.html { redirect_to(tasks_path, :notice => 'Task was successfully updated.') }
    format.xml { head :ok }
  else
    format.html { render :action => "edit" }
    format.xml { render :xml => @task.errors, :status => :unprocessable_entity }
  end
end

The problem is whenever a Task is updated (or created, or destroyed, etc) the :notice hangs around until the page is reloaded. I'd like to be able to make it disappear after a couple of seconds and style it using CSS. Back when I was working through Agile Web Development with Rails, I created a way to make this notice fade away after a few seconds using Ajax. The problem is, I haven't been able to duplicate it in Chorenivore.

A few questions about this:

First, is this :notice the same between methods? Is the :notice for creating a Task the same :notice for editing a Task? I'm sure there's a way to make this uniform.

Second, how do I do this? Is Ajax the best way? Should I use Javascript? I don't think reloading the entire page is the best way to handle this, and to my understanding Ajax doesn't reload the entire page.

I've seen a lot of references to flash[notice], is this the same thing as :notice, from the code I posted? Also, what does "flash" refer to in this instance? Does it mean Rails is FLASHING a notice, or that it's a notice Rails stores in the flash because it doesn't need to save it after it displays it? Could it be both? Or something else entirely?

Any recommended reading for understanding and working with Ajax/Javascript in Rails? I've read through the API and it's good for reference, but tutorials are my main jam. I'll look around for some on my own as well, but I figured some of you guys would know of some special favorites.

It's also becoming increasingly clear the time is right for me to go back to Agile Web Development with Rails, since I'm definitely thinking about things tutorials are having me do in a different way. Now it's more "What can I do with this?" and less "Am I getting the syntax exactly right so Rails won't complain and barf up a string of errors?"

One last thing: I've been really into Github, and while I feel I'm not using it as efficiently as I could, I really like being able to document and store my code as it progresses. I've been uploading new versions of Chorenivore every time I solve a problem or make an update. I don't know if that's how most Rails programmers use it, but it definitely adds to my feeling of accomplishment once I run that git push command.