Javascript yeilding and graceful degration
I’ve been watching a few YUI Theatre and Joseph Smarr’s talk about AJAX and Plaxo.
Working with Blueprint: A CSS Framework
So I decided to change my blogging software, from no software (Blogger) to SimpleLog. I setup everything up in my dev environment and it was by far the easiest setup I have seen so far. Took about 10 minutes including setting up the virtual hosts.
While getting super interested in my blog again I was looking for some nice examples of css blogs to get inspired I stumbled upon Blueprint, which is a css framework so I decided to give it a whirl.
First impressions it is super lightweight and non-intrusive, just two lines that have to be added. to the head which includes the style sheets. My only gripe so far was that they just include one grid option which is 14 columns, its not a big deal all that I think it needs is a few other background images to show the options of columns from the grid. Like 7 columns, 3×8×3 and so forth.
So I hit up Photoshop and came up with a basic color scheme and outline for the new blog. Took about a day of going back and forth on how much I wanted to add to the site but being inspired by rails iterative approach to programming I decided to stick with the simple and expand from there.
Back to Blueprint, with my design it ended up being very easy to implement in blueprint. It doesn’t have anything nested tho which I was really interested in since it looked to handle nesting very gracefully. I tried as hard as I could to make this design fit into a 14 column grid but I made the design decision to keep the width at 780 instead of Blueprints default of 960. But not to fear we are just working with css here all I did was just override two of their default widths in my screen.css to keep the integrity of their files in case I decided to upgrade them in the future it will be fully degradable.
Their reset.css worked great, I am use to using Eric Meyers reset.css and then creating everything from there. But Blueprint had an unexpected typography.css which setup quite a bit of the default typography. Which was a huge time saver, because Eric’s just leaves you out in the cold to setup everything on your own which is totally cool if your project warrants it but sometimes there are elements that get introduced and have no control over.
So setting up a new template in SimpleLog was easy and I started editing the site.rhtml layout to use the naming conventions per Blueprint. Just a few class changes and I removed some default SimpleLog items that I didn’t include in my final design and boom! We have an outline!
Fast forward through time, 26 css declarations and 3 images later and my homepage was almost done. Time in total was about 2 hours to copy and setup an entire new template with SimpleLog and Blueprint. I was amazed, usually I hate when things try to be “smart” and assume they know what options and action you are going to preform but Blueprint didn’t get in my way at all. Since everything for the base elements was already setup I just used my ID’s and Classes to extend the base and life was good.
Although I was just concentrating on the homepage today flipping through all the other pages they didn’t look that bad by default. SimpleLog uses a lot of the same css names and conventions throughout their pages meshed with Blueprints base styles and my overrides the only things left to do were the specifics of the page.
Last but not least, my current host is not very Rails friendly so I am looking for a new host for my blog. While doing that I will continue to update here and work on the new version on my dev server. So far:
SimpleLog: A+
- Ton of features and rock solid. Easy install and great documentation. I have not looked into any extensions or plugins yet but there are a few areas where I can see a few more helper functions. But for getting a blog up quick and painless SimpleLog is the way to go.
- SimpleLog Website
Blueprint: A-
- For just being at 0.3 release it is a huge time saver, its not just the resets for cross browser compatibility but it also includes a good typography and print styles which I have always been looking to create. I hate going through and trying to think of all the HTML elements a client could potentially use and make sure they are set accordingly. Blueprint defiantly has a future in my web development life and releasing it to the community will only make it better.
- Blueprint CSS Framework Website
Understanding Rails Partials
Partial’s are great, i really wish there was something as straight forward in Smarty. With Smarty it would require a loop and an include, but partials roll that all into one. It great when you are displaying a list of items, especially if that list can be used in multiple pages in many contexts.
With PHP you would have to:
{include file='links.tpl' title='Newest links' links=$link_array}
Then in links.tpl do the loop:
<div id="box">
<h3>{$title}{/h3>
<ul>
{foreach from=$links item=l}
.. do stuff ...
</foreach}
</ul>
</div>
But Rails on the other hand if you pass a collection to a partial it automatically treats each item in the collection as an individual item and there is no need to create a loop it is done inheritly.
Rails:
<%= render :partial => 'list_item', :collection => @customers %>
_list_item.rhtml:
<tr class="<%= cycle('odd','even') %>">
<td><%= link_to list_item.last_name,
:controller => 'customer',
:action => 'show',
:id => list_item.id %></td>
<td><%= list_item.first_name %></td>
<td><%= list_item.city %>, <%= list_item.state %></td>
</tr>
You may be thinking that it is really not much less work but writing loops all day long can get tiring especially when they are look the same and do the same thing. Partials take it to the next level and add a real intuitiveness to the loop because it is not just an array of items you are looping through it is actual objects a template is being rendered with.
Partials can also be used without the collection in just a basic include of a sub template the syntax is below. Useful but I have not found it as much fun.
<%= render :partial => "account", :locals => { :account => @buyer } %>
Multiplication
The MultiForm() function is here. It allows an entire form or just one form field to be displayed with the [] brackets on the end of the input name. This allows the form to have multiple copies of the same fields in the same form without anything getting overwritten or any additional setup.
Here is how it is used:
// Create the Address
$myAddress = new Address;// Get a list of all their addresses
$myAddress->SetValue('customer_id', $myCustomer->GetPrimary());
$myAddress->GetList();// Display all their current addresses
if (count($myAddress->results) > 0){
foreach($myAddress->results as $address){
$myAddress->ResetValues();
$myAddress->SetValues($address);
$myAddress->MultiForm();
}
}
Here is the output:
A More Centered API
Its been a while but we have been working hard on an API that is going to withstand the test of time. This will make Simpl more expendable and not require as many application code level changes in the future.
These function have been added to the Form() Class:
SetDisplay($fields) -> Boolean
SetHidden($fields) -> Boolean
SetOmit($fields) -> Boolean
SetOptions($options) -> Boolean
SetConfig($config) -> Boolean
They can make the DbTemplate and Form classes a lot easier to work with. Here is an example of how to declare a class with these new functions:
class RSVP extends DbTemplate {
/**
* Class Constuctor
*
* @param $data array
* @return null
*/
function __construct($data=''){
// Setup the required fields
$required = array('first_name', 'last_name', 'email', 'phone', 'is_attending');
// Setup their labels
$labels = array('first_name' => 'First Name', 'last_name' => 'Last Name', 'email' => 'E-Mail', 'is_attending' => 'Attending');
// Setup the examples
$examples = array('email' => 'name@domain.com'); // Call the Parent Constructor
$this->DbTemplate($data, $required, $labels, $examples, 'rsvp', '', 'my_database'); // Set the Display
$display = array('first_name', 'last_name', 'email', 'phone', 'is_attending');
$this->SetDisplay($display); // Add a validation Type
$this->Set('validate','homepage', 'url'); // Set the defaults
$defaults = array('is_attending' => 1);
$this->SetDefaults($defaults); // Set the Options
$options = array('is_attending' => array('1' => 'Yes', '0' => 'No'));
$this->SetOptions($options); // Set the Config
$config = array('is_attending'=>'radio');
$this->SetConfig($config);
}
}
Now the display and the config information follow the class where ever it is used. Also the default values can be used to set up the form before the user enters any information.Example of this being used on the page:
// Create an RSVP Instance
$myRSVP = new RSVP;// Display the form
echo '<form>';
$myRSVP->Form();
echo '<input name="submit" value="Save" type="submit">';
echo '</form>';
1 2