s

Live

May 28, 2006  -  Comments

The blog is now live! I wrote this to get some practice with Ruby on Rails. The whole process was suprisingly easy. Rails does almost all of the work, so it only took me about two weeks to get the whole thing built in my spare time. Even a chunk of that time was spent designing the layout. I'm not very creative, so I had to look at a lot of other blogs before I could get enough ideas to rip off.

To fill it out a little bit, I've copied over around 12 posts from an old LiveJournal that I used last year when I was in France for two months.

Tagged: rails

IE giving small divs a minimum height

Jun 12, 2006  -  Comments

I ran into a funny problem recently. I had to build an odd layout for a new website at work that involved text following a bending curve. Well, I just gave different padding to each of the <p> tags to accomplish the flowing effect. There were also divider lines between each paragraph that were shorter horizontally than the paragraphs. So, to get around this, I figured I could just create a div with a set width, a height of 2px, and a border-bottom. Of course, this worked fine in all browsers. . . except IE.

For some reason, the div in IE defaulted to a height of around 10px. This was very odd seeing as how I specified a height of 2px in the CSS. Well, after some playing around and a little Google-ing I figured out the problem. Apparently, IE will override the height property if the line-height is greater than the height. So, to get around this little problem, simply set your line-height to a value equal to or less than the desired height of the div.

Here is my code:

.line {
   width: 218px;
   height: 2px;
   line-height: 1px;
   border-bottom: 1px solid #CED9DF;
}

Update: After some more research into the problem, it turns out that IE 6 thinks the height of your div is only as small as your font-size. So, instead of setting your line-height to zero or a small number, set your font-size, like so:

.line {
   width: 218px;
   height: 2px;
   font-size: 0;
   border-bottom: 1px solid #CED9DF;
}

Tagged: ie suckscssxhtml

Safari line height problem

Jun 14, 2006  -  Comments

It seems like I've been stuck on the line-height property lately. Well, today I noticed Safari giving weird behavior with regards to line-height. In the CSS documents we create at work, we always include a standard set of entity styles at the top and then go back and edit them if needed. Well, in that standard set is where we define the font-size, line-height, padding, etc. for our most-used html tags. I ran into a problem today where Safari was effectively ignoring the previously declared line-height property when I redefined the font-size of an element. So, to fix this, I had to re-define the exact same line-height(in percentage) for the new font-size.

I'm a huge fan of the Mac (I use one at work), but Safari can cause some headaches (nowhere near IE, though).

Tagged: safaricssxhtml

Ruby on Rails having problems with table column names

Jun 15, 2006  -  Comments

I was working on a project for work today that invloved the client be able to enter customer testimonials into a database to be displayed randomly on each site page. I named the table quotes and it had three columns: id, person, and quote. I made id an integer and quote and person were both varchars. Everything worked fine with this configuration.

After some testing, I discovered that a varchar wasn't the best type for the quote because it didn't have enough room for the longer testimonials. Like a good Rails developer, I wrote a migration script to change the quote column to be text instead of varchar. Well, after making this change, Rails bombed every time I tried to add another quote. For some reason, it didn't like the column to be of type text and have the same name as the Rails table object. I'm not exactly sure what or why specifically caused this problem, but it definitely didn't work. After some consultation with The Shawnami, the resident Rails guru, and some extensive frustration, we finally decided to try and just rename the column. Guess what? It worked perfectly after I renamed it content.

Tagged: railsdb

Syndicated!

Jun 16, 2006  -  Comments

One of the things I had hoped to be able to do with Rails for this blog was to create an RSS feed. I briefly looked at the chapter that describes how to do this in the Rails Recipes book and kinda decided put it off until later.

Well, after seeing that Adam added an RSS feed to his blog and even provided the steps he took to accomplish it, I decided to finally implement it. It turned out to be a lot easier than I thought.

So, if you're really bored often, go ahead and subscribe.

Tagged: railsrss

Lightbox JS 2 hacked for AJAX

Jun 23, 2006  -  Comments

At work today I was given the task of implementing Lightbox JS v2.0 on our new website. To its credit, it was extremely easy to get working... almost too easy.

Of course, that's when I encountered a problem. On our portfolio detail page, Shawn put in a neat little AJAX slider for viewing the pictures of each project. The problem arose because the pictures were being generated dynamically after the page had been loaded. For the Lightbox to work, it needed to know about all of the images as the page loaded. Any images generated after that wouldn't work correctly.

I looked around for awhile to see if I could find anyone else who had run into this same problem that maybe had found a workaround. Well, I found several people who were having the same problem, but no one had solved it yet. So, against all odds, I started poking around in the code to see if I could maybe get something working. Below is my step-by-step solution.

First of all, I edited the .js file. Take the following chunk OUT of the file. Delete it, comment it out, whatever. The code is located in the start: function(imageLink) block.

// if image is NOT part of a set..
if((imageLink.getAttribute('rel') == 'lightbox')){
  // add single image to imageArray
  imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));			
} else {
  // if image is part of a set..
  // loop through anchors, find other images in set, and add them to ImageArray
  for (var i=0; i<anchors.length; i++){
    var anchor = anchors[i];
    if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
      imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
    }
  }
  imageArray.removeDuplicates();
  while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
}

Notice: This breaks the ability to add images to a set and cycle through them from within the Lightbox.

The next step is to initialize the myLightbox object. Put the following code at the top of the page that you'd like to use the Lightbox (or alternately, you can just call it in the <head> section).

<script type="text/javascript">
  initLightbox();
</script>

Update: IE will throw an error if you put the above line of code in the middle of a page. The page must load fully before it will successfully evaluate the JavaScript. So, just put the call at the end of all your code.

And last, all we need to do is to call the start() function to make the magic happen. I'm using Rails, so this is how I did it:

<%= link_to_function image_tag('/images/thumbnail.jpg'), "myLightbox.start('/images/fullsize_picture.jpg');" %>

And just substitute /images/fullsize_picture.jpg with the actual path to your image.

I hope this can help someone else out.

Tagged: javascriptlightboxajax

Why Ruby on Rails is better than .NET

Jul 10, 2006  -  Comments

For the past four days at work I've been assigned to apply a redesign to an older .NET site that we did a couple of years ago. It has been infuriatingly frustrating trying to apply a CSS-based design to a table-based .NET site. The way .NET handles almost everything is so convoluted and esoteric that it took me a full day just to get the hang of how it handled displaying markup.

And what is the deal with the datagrid?!?! It's great on paper, but crap in practice. Just the datagrid definition spanned five lines. Using the AlternatingItemStyle tag to get alternating styles for the table rows is ok, but Rails makes it SOOOO much easier with the cycle method. And speaking of styles, the datagrid has to have each style that you'd like applied declared seperately which makes for the huge datagrid definition. Also, take a look at the HTML that a datagrid produces. You'll be surprised at how much markup it can create for a simple <td>.

Now, don't get me wrong. I can see where .NET would be useful and I'm sure there are a ton of examples where it would make much more sense to use .NET than Rails. I think my biggest problem is that I know almost nothing about .NET. I can get by with making visual changes, but I stay far away from the codebehinds.

Closing thoughts: give Ruby on Rails a try! You might just like it!

Tagged: rails

OS X Leopard to have Ruby on Rails

Aug 09, 2006  -  Comments

I received a jubilant email today from Shawn that contained a link to this article officially announcing that Mac OS X Leopard will indeed be shipped with Ruby on Rails pre-configured.

For anyone who's followed these great directions to get RoR up and running on a Mac knows that it takes a fair amount of time and a good bit of focus to get everything correct. Having everything pre-installed will save many people a great deal of aggravation.

On top of having Ruby and Rails in the box, they've promised other packaged goodies like Mongrel, a Ruby alternative to Apache that I've heard is much more efficient.

It's not like I needed another reason to look forward to the OS X update, but now I'm truly excited to get my hands on Leopard.

Tagged: applerails

MacBook

Aug 15, 2006  -  Comments

Weeks and months of pining and wishing have finally come to fruition. Thanks to the Georgia sales tax holiday at the beginning of August and the back-to-school iPod promotion, I was finally able to justify dropping $1300 on a tiny white laptop.

Never before have I been happier with a purchase (since I bought my iPod). I have absolutely no "buyer's remorse." I was talking to a coworker shortly after my purchase about the frame of reference when it comes to prices for purchases. Most people don't think twice about spending $1000+ for a desktop or laptop computer, but when contemplating buying a game console or an appliance for $300-$500 the majority of people will think and rethink about whether to buy. It's very odd.

The event that started my Mac addiction happened around March of this year. We needed to hire another person at Plexus to help me out because we had more work than I could handle. Well, that involved buying a new computer for the extra person. El Presidente offered to give him my old PC and buy me a new Mac Mini and, of course, I jumped at the opportunity. It was a bit different getting used to OS X at first, coming from the world of Windows. I got the hang of it pretty quickly and immediately saw the benefits of the Mac over the PC. Since then I've wanted an Apple, and two weeks ago the dream became a reality.

Tagged: apple

CSS fish eye menu

Aug 22, 2006  -  Comments

As part of a design for a new website at work, Kim created a text effect on her mock-up of the site design for the main navigation. She was really married to the effect and wanted me to use an image rollover to achieve it. Being that we pride ourselves in making all of our current sites fully accessible to persons with disabilities, I really hate using images for text when it can be avoided. So, as a challenge to myself, I set forth to make the effect work using only CSS. I'm not really sure how difficult this would be for the average CSS person, but I got it done.

She wanted the text of the link to increase in size by about 100% when hovered over. So, to start out, I made the nav div with a set width (the sum of all of the nav elements, which there were four at 150px each) of 400px, gave it a background color, and centered it.

#nav {
  width: 600px;
  margin: 0px auto;
  background-color: #513C33;
}

Next, I made each li float left, gave them a set height, and set the overflow to hidden, so that even if the padding around the anchors extend past the li, it won't cause the div to expand.

#nav ul li {
  list-style: none;
  float: left;
  margin: 0px;
  padding: 0px;
  height: 37px;
  overflow: hidden;
}

Now, all I had to do is set the anchors. I made them display: block; so that they register the hover even when the mouse is over their padding, gave them a height and width, and gave them a top padding so they would be centered vertically.

#nav ul li a {
  display: block;
  width: 150px;
  height: 34px;
  font-size: 14px;
  color: #8AA7A6;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  padding-top: 12px;
}

Last of all, I set the hover style. I just gave it a larger font size and changed the top padding to keep the text centered vertically.

#nav ul li a:hover {
  font-size: 28px;
  color: #74635C;
  padding-top: 3px;
  font-weight: normal;
}

If you'd like to see this in action, you can check it out right here. (UPDATE: This file is no longer available, sorry.)

Tagged: cssxhtml

eBay scam attempt

Aug 28, 2006  -  Comments

I got a free iPod Nano when I purchased my MacBook thanks to a back-to-school promotion by Apple. So, to recoup some of the cost of the MacBook, I put the Nano on eBay. The starting price was $149.99 with a "Buy it Now" price of $175. About two hours before the auction ended (no bids had been made) someone hit the "Buy it Now" button. I got the following cryptic email from them about an hour later:

Hello,
Good Morning to you,how is business,family and all other things, hope all are in good condition. well I'm Bonner Goldbach from CA(Sebastopol),but Presently i'm leading a trade fair program in Austrialia.I saw your item above at ebay(150022885893)and i will like to buy it for my grandson that study in a Computer science school in University of Lagos at Nigeria Next week as a gift,i will like to informed you first of all that i will be handling the shipment on my own risk over to Nigeria.Do not worry about the shipping of the item,i have an account with FEDEX and will be sending you my FEDEX account number for the shipment, and if you decedided in sending the item to so that you can add the shipping cost to the cost of the product you can still do it and you will have to calculate the cost over to Ikeja,Lagos state,23401 Nigeria.Moreover i would have prefer to send you a cheque but due to the fact that i want you to ship the item first thing monday morning,i will be sending you the payment vai PAYPAL,and so make sure you get the package ready for monday shipment ok And kindly send me your paypal email address,so i can direct the payment to your account right away.
Best Regards
Bonner Goldbach.

I immediately sent a reply giving him my PayPal email address and telling him that I didn't quite understand his email, but that I could only ship the iPod within the United States by USPS.

I didn't hear from him for two days, so I re-sent my PayPal email address and reminded him politely to please pay promptly. Well, finally after three more days, I got the following email from "PayPal" (pay attention to the grammar):

Pay With Pay Pal,
Pay Pal makes it easy to receive Dineen Villaruz money, to received this payment into your account,you will have to sent the shipment tracking number to our customer care department at the link below(payp.alcustomercare@consultant.com) for shipment verifications, then we can process and credit funds into your account. We are sorry for the inconveniences we might have caused you, as this is our new policy to protect both the Seller and the Buyer from fraudulent activities. And if there is any problem within you and the buyer you are to contact our customer care representative in the immediately. For more information please contact our customer care at the above link.

The terrible English and obviously falsified email address finally convinced me that this guy was just some moron trying to scam me out of a free iPod. This is the email that came right after the "PayPal" email:

Hello,
I have made out my payment to you for this item purchase (150022885893),So check your mail for the comfirmation mail from paypal.Get back to me immediately if you receive the confirmation mail from paypal and don't forget to send me your physical contact address and your phone number so that i can arranged for the shipment okay,and the exact time you will be at home tomorrow.So that i can schedule Fedex to come and pick it up from you in other to reduce the stress of you driving down to their location to send it.Then i can send you my grandson's address and fedex account number.Hope to hear from you soon.

Well, I was furious that I had to waste a week waiting for this guy, just to find out that he was trying to commit fraud. I sent a pretty heavily-worded email back to the guy telling him what I thought of him and his scam.

I guess this should serve as a lesson to other people that this might happen too. Pay close attention to everything.

Tagged: ebay

IE double margin float bug

Sep 15, 2006  -  Comments

I'm sure most people have come across this bug once or twice (or a hundred times). You have a div with a set width and it's floated left or right. You also give it a margin on the same side that it's floated to push it away from the edge of the containing area. Works great everywhere . . . EXCEPT IE! Of course. Your CSS might look something like this:

#box {
  width: 200px;
  float: left;
  margin-left: 20px;
}

The problem with IE/Win is that it doubles the margin that's on the same side as the float. Why does it do this, you ask? Because it's IE. If it behaved the way it was supposed to, it would be Firefox.

There's actually a really simply fix for this. All you have to do is add the magical display:inline to your div, so your final code would be:

#box {
  width: 200px;
  float: left;
  margin-left: 20px;
  display: inline;
}

You can find this hack and many more at this great CSS resource Web site.

Tagged: ie sucksxhtmlcss

Lost Theory

Oct 12, 2006  -  Comments

This theory is re-posted from my company blog (HINT: check out our website homepage on Wednesdays).

There are a million hypotheses out on message boards and fan sites trying to guess the overarching story behind Lost. They range from theories about the castaways having gone back in time to theories about them being part of a grand science experiment. Based on information that came to light this summer during the off-season, I've developed my own theory about what's going on in the Lost universe.

The numbers (4 8 15 16 23 42) have always been a hot topic among Lost aficionados. It was revealed over the summer that these numbers are, in fact, a complex equation developed by an Italian mathematician named Valenzetti. It determines the amount of time before humanity exterminates itself, either by warfare, nuclear holocaust, or pandemic disease. My theory centers around this equation.

I think that the DHARMA initiative (or whatever is left of it) came into possession the information that the person (or persons) responsible for the destruction of the human race would be on Oceanic flight 815. They somehow (I told you this was a theory) caused the flight to pass over their island, made it crash, and they are going through the remaining passengers one by one to determine who the person is.

Things that support my theory:

  1. In episode 1 of season 3, the DHARMA people didn't seem surprised at all to see a plane crash into their island. It appeared like they were expecting it. Ben (Henry Gale) sent Ethan and Goodwin out to pose as survivors and to bring back lists of the remaining passengers.
  2. Walt, who had been in their custody for several weeks, was simply released at the end of season 2. I think they determined that he wasn't responsible, so they let him go.
  3. The psychic told Claire that her child would be responsible for something terrible if he was raised by anyone other than her.
  4. Ben (Henry Gale) told Kate in episode 1 of season 3 that the next few weeks would be very uncomfortable. (interrogation?)
  5. Jack seems to be getting psychoanalyzed/interrogated by Juliette.

Tagged: lost

Multiple CSS classes on a single element

Oct 19, 2006  -  Comments

Do you worry about repeating styles in your CSS? If a lot of your CSS classes use a common style like text-align: center; or color: #CCC:, you can actually create a single class for each of these styles and save a ton (well, not really, maybe one or two KB) of bandwidth on page load. A lot of people don't know about assigning multiple CSS classes to a single element.

Let's say you have a <p> tag that you want to add specific styles such as margin and padding, plus some pretty common(throughout your Web site) styles like text-align: center; and color: #666;. Instead of writing each of these styles for every element that they appear on, you can write a single class for each style, or group of styles that usually appear together, and just add it to the class application on the desired element.

Your stylesheet might look like this:

.specific_style {
  margin: 5px 10px;
  padding: 2px;
}

.center_text { text-align: center; }

.dark_gray { color: #666; }

And then you can add multiple classes to any element by separating them with a space, like so:

<p class="specific_style center_text dark_gray">Lorem ipsum dolor sit amet.</p>

This will apply the specific_style class as well as centering the text and coloring it dark gray. This is a wonderful way to keep your CSS DRY. Be careful though. Don't overuse this method or your elements will have classes a mile long. Very handy when used properly!

Tagged: cssxhtml

Using a background image on a table row

Nov 26, 2006  -  Comments

How many times have you had the need to apply a background image to a table row? Chances are, not very often. Before a week or two ago, I'd never even thought about it. I was living in blissful ignorance of the problems that can occur when trying to achieve this. But, of course, things don't go perfectly forever. Recently, Buck handed me a design for a client that incorporated complicated styling for a table that presented information. After the requisite belly-aching, I did what was asked of me. Very simple CSS:

tr.bar { background: url(/images/tr_background.gif) no-repeat 0 0; }

As you'd probably guess, it works perfectly in Firefox, but not Internet Explorer. But surprisingly, it doesn't work in Safari either. So, there must be more to this than just IE and their non-compliance. Having moved on to another project, I didn't have time to research the bug or find a solution. So, I handed it off to Colin, who, after a little experimentation, was able to find an excellent workaround.

The problem with IE and Safari is that they don't allow a background image to be applied to a <tr>. What do they do when you try this? The <td>'s inherit the background. This might not be a huge problem normally, but the reason the <tr> needed the background to begin with is because it had rounded corners on the top-right and top-left. So with the bug, each <td> had a rounded corner on the top-left, which looked a little funny.

Colin found a fix for this, which entailed making a class for the first and last <td>'s and having a separate image for them than the center <td>'s. This would work, but why not use the same image? Colin used the idea of having a class for the first and last <td>, but instead of making new images, he just fiddled with the background-position.

Here's what he came up with:

td.first { background: url(/images/tr_background.gif) no-repeat 0 0; }
td { background: url(/images/tr_background.gif) no-repeat 50% 0; }
td.last { background: url(/images/tr_background.gif) no-repeat 100% 0; }

This way, we use the same image. The first <td> starts the image in the top-right, showing the rounded corner, the middle <td>'s center the image, so you don't see either corner, and the last <td> starts the image in the top-left so you can again see the intended rounded corner. Perfect.

Tagged: cssxhtml

Ruby compressor for JavaScript and CSS files

Dec 11, 2006  -  Comments

On Friday, Adam and I were talking about the different JavaScript libraries that are available and how bloated they are. They can easily double the page weight of your site. But, if you want to use the pre-canned goodness of Prototype or Scriptaculous, then that's the price you pay. We were trying to find ways to decrease the amount of files a user downloads when they visit our company Web site. One idea was to compress the CSS file and all of the large JavaScript files that we use. Well, I found a cool online service to compress and combine JavaScript files, but there were no readily available sources for shrinking any other kind of file that I could easily find. So, Adam told me to use sed via the command line and use the power of regular expressions to strip line breaks, tabs, and spaces out of the given file. Well, I don't know anything about regular expressions, and Adam couldn't recall the exact syntax off the top of his head. So, he retired to his corner and whipped up a nice little Ruby program to do it for us.

Enter the Shrinker!

You can download the Ruby file below. If you're on a Mac, just copy it to /usr/local/bin then CHMOD 777 it. After that, you can simply run sudo shrinker path/to/file and it will spit out a new file with the extension .shrunk that you can now name anything you want. Windows users can dump the file anywhere they want and then run, from the command line: ruby path/to/shrinker.rb path/to/file to get the same thing.

File: shrinker.rb (UPDATE: This file is no longer available, sorry.)

Tagged: rubyjavascriptscriptcss