Top Favorites

• Laws of Source Code and Software Development
• Repetative Recursion
• Technology and Politics
• Being a Better Rails Developer
• Programming Memes
• Developer’s Perpetual Todo List

Fav Tutorial

• Anatomy of a JavaScript Bookmarklet
• Dynamically Create HTML Elements with JavaScript
• Grinding Griffon
• The 1KB CSS Grid
• Download Twitter Profile Images Using Ruby
• Jamming with Ruby YAML

Memorable Quotes

• Quotable Calacanis
• Quotable DHH
• Favorite Programming Quotes 2009

Twitter

• Twitter Ruby Gem
• Twitter Business Model
• The Three Laws of Twitters
• Twitcode
• Songs in Code

Twitter Conversations

• Remote Debug Your Thinking Process
• All Code is Inherently Evil
• The Mayor of Dead Space

Year in Review

• 2008
• 2007
• 2006
• 2005

1Kb CSS Grid

For my requirements I found when using The 1Kb CSS Grid that I tend to get more flexibility when I use 12 columns at 60 pixel wide each column and a gutter of only 10 pixels. The total grid width for this layout is 840px. If you peek in the generated grid.css you will find, with our configuration, 12 grid classes, such as grid_1, grid_2, etc. Think of grid_1 as a single column, and grid_2 as a one cell that spans two columns. You can have any number of rows, but each row you only have 12 columns. For example, you can have one grid_12, or three grid_4, or 12 grid_1 per row. Lets see the HTML for a few rows and how they would end up looking.

<div class="row">
  <div class="column grid_12">12</div>
</div>
<div class="row">
  <div class="column grid_6">6</div>
  <div class="column grid_6">6</div>
</div>
<div class="row">
  <div class="column grid_1">1</div>
  <div class="column grid_2">2</div>
  <div class="column grid_4">4</div>
  <div class="column grid_5">5</div>
</div>

Basic Grid Layout

Notice that each row can have any number of grids, as long as the grid count adds up to 12. You can also nest rows

<div class="row">
  <div class="column grid_8">8
    <div class="row">
      <div class="column grid_4">4</div>
      <div class="column grid_4">4</div>
    </div>
  </div>
  <div class="column grid_4">4</div>
</div>

As a tip, just remember that the grid count in the nested row must add up to the parent/containing column grid count. Below is a dramatization of what a CSS grid row with a nested row would look like.

The iPhone Dev Camp started on Saturday by a nice presentation by Chritopher Allen, a MacHack veteran, regarding what is known about the iPhone from a web developer’s perspective. What is known is that the iPhone uses web standards (HTML, XHTML, CSS, JavaScript, PDF and Quicktime). Web 2.0 best practices apply for the iPhone, such as the proper use and sepration of HTML, CSS, and JavaScript. Christopher recommends avoiding the use of Flash, SVG, Java applets, embedded video, custom x.509 certificates, and framesets. Christopher also states the the finger is not a mouse and you need to design accordingly with large enough buttons and links with plenty of space between each other.
Fingers can do more than the traditional point and drag cursor such as double tap, touch and hold, one or two finger drag, flick, and pinch.

It might come as a surprise but many of JavaScript events don’t work, such as onscroll, onkeydown, onkeypress, onmousemove, etc. Some web development recommendations for the iPhone are to use columns and small blocks in the layout, such as floating divs. You should also use the tel: and mailto: protocols in links. You can also integrate with Google Maps simply by adding your location search to maps.google.com/maps? URL.

The current activity on the the iPhoneWebDev Google Groups seems to be focused around iPhone specific development libraries, implementing the infamous back button, debugging JS, optimizing application for low bandwidth, and hacking the viewport. There is also a series of open questions such as, what level of support is there for the canvas tag? What level of persistent storage is available, cookies? The right questions will lead to the right answers. I have also published a great list of available iPhone development resources.

Most of time at the iPhone Dev Camp was spent developing a collaborating for the hack-a-thon. This was a working camp focused on developing some really cool applications on the iPhone.

iPhone Dev Camp Hacks

Telemoose has a nice presentation for optimizing a web application for low bandwidth environments and the iPhone entitled Living on the EDGE. He also has some helpful JavaScript functions for working on the iPhone.

Nearly 50 iPhone hacks were developed at the iPhone Dev Camp. I can safely say that about thirty percent of those hacks developed used iUI and the iPhone liquid navigation, both developed by Joe Hewitt. Joe also has been busy phone phreaking the iPhone and had time to developed Firebug for iPhone.

Some of my favorite made at iPhone Dev Camp hacks include Tilt (the first ever motion controlled iPhone game), PickleView, AppMarks, and Qix.

iPhone Dev Camp Pictures

Hacking the Phone
moPhaic co-developer
Sleeping MacBook
Chris Messina, iPhoneDevCamp co-organizer
Hard Core Hacker
Tilt Paper Prototype
iPeeps
In the Crowd
Microsoft Techie
Newton Dev Camp?
Joe Hewitt, Kent Bye, Felipe Ortiz
Hack this Phone
iPhone Zoolander
Option Shift K

Technorati Tags: iui, apple, iphone, iphonedev, iphonewebdev, iphonedevcamp, devcamp, barcamp, webdev, webapp, javascript, js, tilt, iphone game, firebug

To get started with code samples, to center a div in the middle of a container div you can use the following CSS:

.center {
  margin-left: auto;
  margin-right: auto;
}

If you want to align a div to the right and another div opposite to the first on the left you can use the following CSS classes.

.right {
  float: right;
}
.left {
   float: left;
}

I have found that when I used both div that float both to the right and left that you have to follow that with an empty div that clears, or resets, the float CSS property. If I don’t clear the float property other elements such as a menu that is aligned to the right might not render correctly. Here is the CSS class to clear the float property, use it in a div the divs that have been aligned to the right, left, or both right and left.

.clear {
  clear: both;
}

Technorati Tags: css, html, webdesign, clear, float, div, cs class

<DIV id=”mydiv” style=”background-color: #FFE6BF”>
some text
</DIV>

To make the DIV element have rounded corners just execute the following bit of JavaScript, perhaps in the document.onload event method:

Rico.Corner.round(‘mydiv’);

You can also pass in some additional options to Rico’s round function which indicates which corner(s) to round. Here is another example which rounds only the top-right and bottom-left corners:

Rico.Corner.round(‘mydiv’, {corners:’tr bl’});

And of course, br and tl also work.

As a convinience, you can round the corners of multiple elements at once. To round all DIV elements that use a given class use the following JavaScript:

new Rico.Effect.Round(‘div’, ’roundCssClass’);

With the above JavaScript, only those DIV element that use the CSS class roundCssClass will be rounded off.

Technorati Tags: rico, javascript, html, framework, web2.0

<DIV class="yui-u content">CONTENT HERE</DIV>

Technorati Tags: yui, yahoo ui, yahoo ui library, css

def self.tags(options = {})
  query = "select tags.id, name, count(*) as count"
  query << " from taggings, tags"
  query << " where tags.id = tag_id"
  query << " group by tag_id"
  query << " order by #{options[:order]}" if options[:order] != nil
  query << " limit #{options[:limit]}" if options[:limit] != nil
  tags = Tag.find_by_sql(query)
end

This method will return the id, name, and usage count for each tag. This method also provides a way to limit and order the tags. Once we have added the new method in the Tag model we will need to add a method to the application helper which will help in selecting the right style class for each tag. Add the following function to app/helpers/application_helper.rb:

def tag_cloud(tags, classes)
  max, min = 0, 0
  tags.each { |t|
    max = t.count.to_i if t.count.to_i > max
    min = t.count.to_i if t.count.to_i < min
  }

  divisor = ((max - min) / classes.size) + 1

  tags.each { |t|
    yield t.name, classes[(t.count.to_i - min) / divisor]
  }
end

The implementation for the tag_cloud method is based on the work done by Tom Fakes. With the tags method in the Tag model and the tag_cloud method in the application helper we can now focus on the controller and view. In the controller you can use the following bit of code to get the the first one hundred tags order by name:

@tags = Tag.tags(:limit => 100, :order => "name desc")

In the view we will use the tag_cloud method so that it will select the right css class based on the tag usage count. Here is the view code:

<% tag_cloud @tags, %w(nube1 nube2 nube3 nube4 nube5) do |name, css_class| %>
  <%= link_to name, {:action => :tag, :id => name},
    :class => css_class %>
<% end %>

Please note that nube1 through nube5 are css class names which will need to be defined in your stylesheet to generate the cloud effect. Just completeness sake here are my css classes:

.nube1 {font-size: 1.0em;}
.nube2 {font-size: 1.2em;}
.nube3 {font-size: 1.4em;}
.nube4 {font-size: 1.6em;}
.nube5 {font-size: 1.8em;}
.nube6 {font-size: 2.0em;}

Technorati Tags: ruby on rails, rails, rails plugins, acts_as_taggable, tag cloud

.warning {color: yellow;}
.error {color: green;}

You can update or switch an element’s CSS class with the following JavaScript code:

var element = document.getElementById('element');
element.className = 'warning';

But you can access individual CSS attributes via an element’s style object, such as

var element = document.getElementById('element');
element.style.color  = 'green';

Of course, you might update an element’s style based on some event or in conjunction of an Ajax call.

function fxToggle(id) {
    var element = document.getElementById(id);
    if(element && element.style) {
        var isBlank = true;
        if(element.style.display != 'none') {
            element.style.display = 'none';
        }else {
            element.style.display = 'block';
        }
    }
    return false;
}

This code will toggle an element’s display from none to block. When the display is set to none the element is not visible or takes up any real estate. I use a link to toggle an element’s display like this:

<A href="#" onclick="return fxToggle('elemId');">
  Meta
</A>

JavaScript:

<script
   type='text/javascript'
   src='directory/file.js'>
</script>

CSS:

<style type='text/css'  media='all'>
   @import 'directory/file.css';
</style>

Icon:

<link
   rel='Shortcut Icon'
   href='directory/file.ico'
   type='image/x-icon'>

PHP:

<?php @ require_once ('directory/file.html'); ?>

For the PHP import, by placing the @ symbol before require_once suppresses any error messages that might be generated in the included PHP file.

JSP:

<%@ include file='jspfile.jspi' %>

And, well, I guess the list can go on and on. You can use Struts Tiles to include other JSP snippets. I am sure that other languages and frameworks have the same functionality.