Rolling with Ruby on Rails
July 13th, 2005
Now that Dreamhost supports Ruby on Rails, I’ve finally started to dig in and start developing a small application with Rails. I don’t have anything of worth at the moment, but hope to get my feet wet with Rails. Currently Dreamhost has 0.12.1 installed and I’m hoping they’ll have 0.13.1 installed soon. From what I hear it has some major enhancements and performance improvements.
Update:
I just ran gem list | more and Dreamhost just upgraded to 0.13.1 this afternoon.
Simple Templating with PHP, CSS, and XHTML (Part 1)
June 8th, 2005
Dave Shea posted how he uses simple PHP and CSS for templating the websites he creates. It turns out that I use something similar, but different enough that I thought I’d share it, in the case that anyone else can use it, or better yet, improve on it.
The page template
<?php
$page['title'] = "Page Title";
$page['section'] = "section";
$page['description'] = "";
$page['keywords'] = "";
$page['template'] = "layout-sm";
$page['head_content'] = '';
?>
<?php include($_SERVER['DOCUMENT_ROOT']."/inc/top.inc.php"); ?>
<h1>Page Title Goes Here</h1>
<p>Content goes here</p>
<?php include($_SERVER['DOCUMENT_ROOT']."/inc/bottom.inc.php"); ?>
The page template explained
The page variables
The first php code block contains the page variables. There was no real reason for making $page and array, but some sites may need a $site array and/or a $section array and it just keeps things nice and clear.
$page['title']- contains a string value for the title of the page.$page['section']- contains a string value for the class name of the<body>tag$page['description']- contains a string value that will be used in the<meta>description tag$page['keywords']- contains a string value (comma separated terms) that will be used in the<meta>keywords tag$page['template']- contains a string value for the id of the<body>tag$page['head_content']- is used for placing css or javascript in the head for just that page, for instance if it is something you only need for that page
The top template include - see details
The next php statement includes the top template
Content
Next comes the content of the page…
I use 1-3 div’s in here to represent the layout of the page. For instance if this was a one column layout, I’d use
<div id="main">
<div class="inner">
</div>
</div>
If this were a two column layout (side and main), I’d use
<div id="side">
<div class="inner">
</div>
</div>
<div id="main">
<div class="inner">
</div>
</div>
And for a three column layout (side, main, extra) I’d use
<div id="side">
<div class="inner">
</div>
</div>
<div id="main">
<div class="inner">
</div>
</div>
<div id="extra">
<div class="inner">
</div>
</div>
Note: The reason I use the extraneous <div> tags, is to account for IE’s box model. I’m not so much of a markup purist that I mind extra divs if it means I don’t have to use all those silly hacks to make the layout behave properly in IE vs. Safari * Firefox. Hopefully, someday IE will behave properly and I can get rid of those extra <div> tags.
I name these structural <div> tags “side”, “main”, and “extra”, because it is less positional, and is a little more flexible that calling them “left”, “middle”, and “right”.
The bottom template include - see details
The final php statement includes the bottom half of the template
The Top Template
<?php echo "<?xml version="1.0" encoding="utf-8"?>\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="<?php if ($page['description']!="") { echo $page['description']; } ?>" />
<meta name="keywords" content="<?php if ($page['keywords']!="") { echo $page['keywords']; } ?>" />
<title>Site Title<?php if($page['title']!="") { echo " - ".$page['title']; } ?></title>
<link rel="stylesheet" type="text/css" media="screen, projection" href="/css/master.css" />
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />
<?php if($page['head_content']!="") { echo $page['head_content']."\n"; } ?>
</head>
<body<?php if($page['template']!="") { echo " id="".$page['template']."""; } else { echo " id="layout-sm""; } ?><?php if($page['section']!="") { echo " class="".$page['section']."""; } ?>>
<div id="container">
<div id="header">
<p><a href="/">Site Title</a></p>
</div>
<ul id="nav-top">
<li><a href="/">Link 1</a></li>
<li><a href="/">Link 2</a></li>
<li><a href="/">Link 3</a></li>
<li><a href="/">Link 4</a></li>
<li><a href="/">Link 5</a></li>
</ul>
The Top Template explained
The code is pretty self explanatory, but basically I’m just using the $page variables to fill in the values for the top half of the template. If you have a global site navigation that is at the top of each page, you can add that here and then only update the navigation once to make a change throughout the website.
I will go into what’s going on with the $page[’template’] and $page[’section’] variables in my next post that shows how I use CSS for these templates.
The Bottom Template
<div id="footer">
<div class="inner">
<p>Footer content goes here</p>
</div>
</div>
</div>
</body>
</html>
The Bottom Template explained
This probably needs the least explanation of all. Basically I’ve thrown in a footer, and closed the open tags.
In my next post, I’ll talk about how the CSS is used in conjunction with this template.
WICK
May 26th, 2005
Chris Holland who is the author of the original javascript autocompletion code, has launched WICK (Web Input Completion Kit). While it is one of the better working examples of autocompletion, it lacks AJAX (xmlHttpRequest) functionality. Chris acknowledges that he is just scratching the surface on functionality, and has that as the first on the to-do list, so I’d keep my eye on it.
Content Brief
May 16th, 2005
D. Keith Robinson proposes a formal method for handling the task of getting content for a website: The Content Brief (PDF example).
Weekly Standards Relaunched
May 16th, 2005
James Archer of Forty Media has relaunched The Weekly Standards and is currently featuring a write-up of AT&T’s use of web standards in their corporate website, with a code review by Paul Scrivens. Props to Joe D’Andrea (et al.) for getting the recognition they deserve for their hard work.
IE7 Showing Signs of Promise
April 26th, 2005
The IE team is hard at work on IE 7. I’ve been a little worried that this release would be security-focused and light on the standards support. This post from the IE Team’s weblog gives me hope as a web developer. Here are some details of what’s in store as far as CSS is concerned:
Support the alpha channel in PNG images. We’ve actually had this on our radar for a long time, and have had it supported in the code for a while now. We have certainly heard the clear feedback from the web design community that per-pixel alpha is a really important feature.
Address CSS consistency problems. Our first and most important goal with our Cascading Style Sheet support is to remove the major inconsistencies so that web developers have a consistent set of functionality on which they can rely. For example, we have already checked in the fixes to the peekaboo and guillotine bugs documented at positioniseverything.net so use of floated elements become more consistent.
Building of Basecamp in Utah
March 13th, 2005
I’ve wanted to attend 37signals’ “Building of Basecamp” workshop since I heard of the first one they held. I emailed newly hired Signal Jamis Buck to ask if 37signals would ever host the workshop in Utah. He replied…
Seriously, start a petition. If you can show that there is enough interest in the area, I’m sure Jason would consider it. I think you’d probably have to get at least 50 names of people that would have a high likelihood of attending–either living in the area, or willing to travel whatever distance (from Idaho, Nevada, Colorado, etc.).
I’ll be glad to champion it if there is enough interest.
- Jamis
So, consider this blog entry the petition. If you would attend Building of Basecamp, were it held in Utah, please leave your comments on this post so we can see what the interest level would be.
Gmail Autocomplete Contest Winner
September 7th, 2004
Chris Holland is the winner of the contest I announced a while back to reproduce the functionality of Gmail’s Autocompletion. For being the first to submit his code that successfully meets all the requirements, Chris has been rewarded with a $50 iTunes Gift Certificate.
Congratulations and great work, Chris!
Ruby
July 25th, 2004
Ever since becoming a fan of 37signals’ Basecamp, I’ve wanted to learn more about it. Basecamp is an excellent project management tool and a great example of what a web application is supposed to be. So much in fact, that 37signals has created a Building of Basecamp workshop that is sold out each time it is offered.
The internals of Basecamp have been a little ambiguous until recently when I learned that it was written entirely in Ruby. I’ve heard of Ruby before and it seemed similar to Python at first glance. Now I’ve been delving a little deeper and it appears that Ruby is even more straight forward than Python! This surprised me because a couple of years ago I rewrote a 200 line Perl script I used at work, and it resulted in a 40 line Python script. The entire Basecamp application is less than 4-KLOC (Thousand Lines Of Code), which for an application of it’s size and complexity, is next to nothing. Basecamp utilizes an open source web-application framework for Ruby, called Rails which just happens to have been written by the token developer of Basecamp.
I will be trying to learn more about Ruby (and Rails) in the near future, and I’m hoping that it can simplify my life by making life as a web application developmer easier.
For more resources on Ruby and Rails see:
Ruby Website
What is Ruby?
Rails Website
Rails Presentations
The Ruby Way
Ruby Garden
Resources for getting started with Ruby
Contest: Gmail JavaScript Auto-complete Functionality
July 16th, 2004
Update 1: Chris Holland has been announced as the winner of this contest.
Update 2: Chris just opened this as a sourceforge project called WICK (Web Input Completion Kit), so now all the people requesting the code can get it from there.
Calling All JavaScript Gurus!
The first person who can accurately reproduce GMail’s javascript autocompletion functionality will win their choice of a $50 Amazon.com Gift Certificate or a $50 iTunes Gift Certificate. (Not to mention all the praise and promotion I can possibly mete out.)
The requirements are:
- The tool must exactly replicate the functionality of GMail’s autocompletion of email addresses when you are in the compose screen
This means it must consist of a textarea/input (type=text) element (not a select element), upon typing the first character, a dropdown must appear with the names/email addresses containg the matching string of characters that is being typed, and it must decrease in size as the typing is in process. The portion that matches in the dropdown, must be highlighted, and both the first name, last name, and email address must be “searchable”. Additional addresses should be able to be added separated by a comma.
- Must be cross-browser (work in IE 5.5+, Firefox .9+, Safari 1+)
If you think you are up to the challenge, send me a url to your example via my contact page. I am an honorable person, and will graciously award the aforementioned prize on the winner. In other words, if you do this, I will not steal your code.