Debugging Layout in IE

March 28th, 2007 by Leons Petrazickis

Firefox has the Web Developer Toolbar, Opera has the “Debug with Outline” user mode and developer tools, but the browser that needs block outlining the most has long been limited to obscure bookmarklets.

A more robust tool is the Internet Explorer Developer Toolbar. Outlining elements is one of its useful features.

To fix things in IE6 without breaking them in other browsers, replace any rule such as:

/* Works in good browsers */
#content {
    width:500px;
}
 

with:

/* Works in good browsers */
#content {
    width:500px;
}
/* IE6 fix */
* html #content {
    width:502px;
}
 

This is valid CSS and, since IE6 is the only browser that thinks the html element has an ancestor, the second rule will only cascade down in IE6.

A different approach is endorsed by the IE team, but I find it less elegant.

Posted in css | No Comments »

Making <select> <option> dropdowns in Ruby on Rails

March 27th, 2007 by Leons Petrazickis

There is a simple way to make a drop-down list of constants in a Rails form. Such lists are needed for months, provinces, weekdays, and other enum-like concepts. You don’t need to mess around with multiple tables and the corresponding belongs_to, has_one, has_many, and has_and_belongs_to_many relations.

First of all, add your list to your model in app/models/:

class MyModel < ActiveRecord::Base
        def self.MyList
                ["British Columbia",
                "Alberta",
                "Saskatchewan",
                "Manitoba",
                "Ontario",
                "Quebec",
                "Nova Scotia",
                "New Brunswick",
                "Prince Edward Island",
                "Newfoundland and Labrador",
                "Nunavut",
                "Northwest Territories",
                "Yukon"]
        end
end
 

Then, change the Province textbox in app/views/MyView/_form.rhtml to:

<p><label for="MyModelTable_MyColumn">MyColumn</label>
<%= select("MyModelTable", "MyColumn", MyModel.MyList) %>
 

The list will now show up as a dropdown. When editing, the appropriate value will be selected.

References:

Posted in ruby | 2 Comments »

Migrating PHP templates from Smarty to Flexy

March 20th, 2007 by Leons Petrazickis

Templates are a great way to separate business logic from page layout in web applications. Smarty (LGPL) and Flexy (PHP License) are two great, mature templating libraries for PHP. Flexy is the younger and faster of two, so there is a tendency to migrate installed Smarty implementations onto it.

Migrating the PHP

Engine Declaration

Smarty:

$smarty = new Smarty();

Flexy:

$smarty = new HTML_Template_Flexy_SmartyAPI();

This API is largely limited to emulating the assign() method.

Engine Configuration

Smarty:

$smarty->template_dir = ‘./smarty/templates’;
$smarty->compile_dir = ‘./smarty/templates_c’;
$smarty->cache_dir = ‘./smarty/cache’;
$smarty->config_dir = ‘./smarty/config’;

Flexy:

$options = array();
$options[‘templateDir’][] = dirname(__FILE__) . \\flexy\templates’;
$options[‘compileDir’] = dirname(__FILE__) . \\flexy\templates_c’;

Your templates go into the templateDir. Flexy will compile them to optimized PHP code and cache it in compileDir.

Page Display

Smarty:

$smarty->display($template);

Flexy:

$object = new StdClass;
foreach($smarty->vars as $k=>$v) {
        $object->$k = $v;
}

$flexy = new HTML_Template_Flexy($options);
$flexy->compile($template);
$flexy->outputObject($object, array());

Needless to say, this code would be much simpler if you were writing a web app from scratch. The goal during migration is to minimize points of change, which is achieved by slightly baroque markup at selected points rather than elegant markup across the board.

Migrating the Templates

Unfortunately, Flexy’s syntax differs from that of Smarty. I would recommend doing a search-and-replace with regular expressions across all your templates. On Windows, UltraEdit offers this across multiple files. On Unix, a script could be readily written.

Variables

Smarty:

{$blurb}

Flexy:

{blurb:h}
{blurb} // escaped HTML
{blurb:u}       // URL-encoded

Unlike Smarty, Flexy escapes HTML tags by default. It’s arguably more secure, but I find that I need to insert raw HTML into a template fairly often.

Array Loops

Smarty:

{section name=t loop=$tables}
        <li>{$tables[t]}</li>
{/section}

Flexy:

{foreach:tables,key,value}
        <li>{value:h}</li>
{end:}

Lower-case t should be avoided as a variable name in Flexy.

Javascript Variables

Smarty:

<script type="text/javascript">
        var db = ‘{$db}’;
</script>

Flexy:

<flexy:toJavascript db="db">

This is a useful way to transfer a variable from PHP to your client-side Javascript. It comes especially handy with Javascript strings.

Includes

Smarty:

{include file=‘0top.tpl’}

Flexy:

<flexy:include src="0top.tpl">

Documentation

Flexy Home
Flexy Documentation

This covers the minimum needed to migrate from Smarty to Flexy. I highly recommend abstracting and encapsulating some of these operations for ease of maintenance. It’s best to avoid repeating yourself.

Posted in php | No Comments »

Utilities Roundup for Windows I

March 9th, 2007 by Leons Petrazickis

Hard Drive Cleanup

WinDirStat is an excellent utility for visualizing your used disk space and drilling down to files that you can clean up, back up, and delete. It’s similar to SequoiaView and Steffen Gerlach’s Scanner, but even more powerful. You can drill down through a folder tree as well as highlight filetypes in the graphical representation. The next time my hard drive gets too full, this is the utility I’ll use to clean things up.

WinDirStat

It’s only weakness is that you can’t drill down in the visual representation once it’s built, unlike both SequoiaView and Scanner.

Scanner 0Scanner 1Scanner 2

Startup Management

AutoRuns is a very comprehensive utility for dealing with the bane of hidden startup programs. TSRs and daemons date back to prehistory, but starting with Win95 a lot of rude programs began adding themselves to the system tray. This utility exposes all of the different hooks for management.

Autoruns

Task Management

Process Explorer can:

  • Kill processes Task Manager cannot
  • Find which process is preventing you from deleting a file
  • Match up processes to windows
  • Kill the root process of a multi-process app

Process Explorer

I find it invaluable on any Windows install.

Defragmentation

As you delete files from your hard drive, gaps of empty space form. New files get split into parts across these gaps. Over time, performance degrades. Some file systems are less vulnerable to this than others, but both NTFS and FAT are affected.

Windows comes with a defragmenter, but it has stayed uniformly crappy and slow since 95. I vastly prefer Vopt. Unfortunately, it’s shareware. It’s also well done, informative, and very fast.

Is there a good, free alternative?

Vopt

Gods, I need to defragment!

Hidden Settings

Tweak UI is a cliché choice, but I don’t know of a good replacement. My favourite tweak is to disable everything except Text Document from the New submenu in Explorer. I only ever create Folders and Text Documents that way, and Explorer significantly delays the display of the menu until all the useless icons are loaded.

Tweak UI

While you are there, grab Create Command Window Here and Power Calculator. Being able to open a command prompt window by right-clicking on a folder is very convenient. Meanwhile, Power Calc has a usable history, saveable formulas, primitive graphing, and super-handy unit conversions.

Posted in apps | No Comments »

Colour Me Chartreuse

March 5th, 2007 by Leons Petrazickis

One of the tricky things in web design is picking the right colours. They need to be easy to read, not grim, not flashy, yet somehow distinctive. Often, taking a stab in the dark and then tweaking a screenshot of the result for saturation, contrast, and the like can be very effective. At other times, you need a starting point.

These have all helped me:

Posted in css | No Comments »