Today was a day spent almost entirely on smashing bugs. Several mundane and one so blindingly obvious I could smack myself. (See
Twitter, in case you missed it.)
My main goal for today was to make the background color of the
sfs page coarsely change color based on the time of day (morning, midday, etc.) The logic of that was mostly straighforward:
def time_of_day()
t = Time.now
if t.hour >= 4 and t.hour < 10
return "morning"
elsif t.hour >= 10 and t.hour < 16
return "midday"
elsif t.hour >= 16 or t.hour < 4
return "bedtime"
else
return "late"
end
end
I then used the returned string to set the class for the background.
<div class="<%= time_of_day() %>">
After that, I was a little stumped because it had been so long since I started this project that I couldn't remember where exactly to put the Ruby code! (I know, I know, I'm edupunkn00b, remember?) At first I tried to load it like I would a JavaScript file and I tossed this in the header of my index:
<script src="/helpers.rb" type="ruby/text" /> #this doesn't work!
First, yes, I need to refactor my views (you can see them in all of their sopping wet glory over on
Github, if you like watching train wrecks :) ). Refactoring was planned for the second part of my morning, but that was used up with bug smashing. Second, regrettably, that didn't work. After playing around for a long, long time (I dropped the code right into the body of the index page at one point, just to be sure it would run) Finally, remembered app.rb. (Sigh, I know.)
# my_app.#!/usr/bin/env ruby -wKU
require 'sinatra'
class MyApp < Sinatra::Base
# This is where your code will go
def time_of_day()
t = Time.now
if t.hour > 4 and t.hour < 10
return "morning"
elsif t.hour >= 10 and t.hour < 16
return "midday"
elsif t.hour >= 16 and t.hour < 7
return "bedtime"
else
return "late"
end
end
get "/" do
erb :index
.
.
.
The little "this is where your code should go" comment was a nice little dig. Maybe I should have named the file "this_is_where_your_code_goes_dummy.rb"
After all that, it worked! I got my little test <h2> tag that showed the logic. I created some CSS rules and ....
Nada. I tried F12 and Chrome had just drawn a big ugly red line through my CSS and called it invalid. What was going on? I tried renaming the colors (I once had a bug because I used 7 digits instead of 6 in a hex code.) Nope, that didn't help. I tried different selectors. Nope, the selectors were working just fine. Finally I decided to just try to change the background color and that's when I caught it. I had written the rule as:
body div.midday {
background-color: #000000, # <-- right there!
color: #FFFFFF;
}
SMH, FML, STFU, D'OH and every other acronym you can think of. Do you see it? I stared at that code for almost two hours (well, not two hours straight, but you get the idea) before I caught it. The comma. Perfect if you're making a list or want to describe the
dietary requirements of the giant panda, but very, very bad when trying to describe how you want your class to look in CSS. I fixed that bug and thought, great! Time for the Heroky Pokey and... it didn't work.
There seems to be a recurring theme here. It worked locally on Chrome, so I pulled it up in Firefox.
Nope.
OK. Time for coding with the world's most popular language: Google. It seemed to be a rather common problem. Try it - I got over 1.5 million hits. I felt a little better after that. After much digging and rechecking (nope, Firefox and IE were loading the CSS file, so I wasn't blowing it there), but neither browser would recognize them as CSS. Then I looked a little closer at what I had typed:
<link type="css/text" ... /> # wrong!
and not
<link type="text/css" ... /> # correct!
A little more typing (and even less swearing) later, I had it fixed and running:
http://schatz-family-splash.herokuapp.com. It's ugly and, well, ugly. But it works. Kinda. Tomorrow's always another day. :D
