Blog

Pedantic As Fuck: Coding Guidelines

2010-02-07T17:51:13Z

Folder Structure:

To support EE integration, all template assets (css, images, scripts etc) should be nested within an encompassing “style” folder; then subfolders are used to separate asset type:

/style/
        /css
        /images
        /scripts
        /flash

Image Filename Prefixes:

To help organize a cluttered image directory, I use 6 different prefixes to group files into their usage. These should cover 99% of any possible scenario. The only trick is to know when one prefix should be chosen in lieu of another. These are therefore arranged in a “cascade”:

sprite_* - any sprite graphics
btn_* - any button graphics (e.g. submit buttons, etc)
icon_* - any icon graphics (e.g. arrows, bullets, etc)
logo_* - any logos
bg_* - a graphic that is used as a background image via CSS
img_* - any images included via the
tag

The cascade works by starting at the top, see if the image qualifies for that prefix; if so, use it, if not, continue to next prefix.

If multiple prefixes match, use them in sequence of the cascade. The exception is “bg_*”, which is implied if any higher prefix is used.

Example:

A submit button “

” uses a background image to override the browser’s default look. The design calls for 3 states: off, on, and active. The image should be created as a sprite to reduce server requests. Following the cascade, it qualifies as a sprite and button. Therefore it’s name might be: sprite_btn_submit.gif

Miscellaneous

Main/global stylesheet should be named “screen.css”

Filenames are all lowercase, words separated by underscores only (e.g. logo_google.png).

Filenames should be verbose for clarity

You are encouraged to separate CSS as much as is necessary to keep things organised

You are encouraged to go comment-crazy in CSS & JS

Use HTML comments to indicate the closing of any structural divs (or spans were helpful):
- If the div has an ID value, use “”
Example:

	.......

- If the div has a CLASS value, use “” Example:

	.......

Use Google’s CDN for js libraries (e.g. jquery)

Use most current jquery (1.4.1 as of this writing: http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js)

When referencing asset files from within the HTML source, use absolute linking (e.g. “/style/css/screen.css”). Assets linked from within CSS can be relative (e.g. “../images/sprite_navigation.gif”).

Preferred doctype: xhtml 1.0 transitional

IE6/7, PNG support: Up to you!

Should I pay for that beta?

2010-01-07T02:53:58Z

Last week I fired off a tweet about Solspace, a web development company that contributes heavily to the space of ExpressionEngine add-ons. I challenged their business model of charging a fee for their “beta” modules, which quickly drew a response from their lead developer. We exchanged a few tweets, but it left me frustrated; Twitter isn’t always the best medium for a debate, especially between two strangers. Or perhaps I’m simply not articulate enough to say everything in 140 characters.

Let’s see what kicked this off. On Nov 24th I twittered:

@johndwells EE was released this way. EE 2.0’s release is effectively a public beta. And any non-beta update is free, so I see no problem.

My first reply was from another EE community member, who said she’s known the two behind Solspace for years, has used one of their stable pay-for modules for years, and contended it was still a good deal.

Then Solspace’s lead developer Paul Burdick got back to me, aligning their business model directly with ExpressionEngine’s, by saying that EE’s 2.0 release, which is pay-for (and includes a price increase) is effectively a beta release. Two days later, serendipitously for Paul’s arguement, EllisLab announced they were renaming the December 1 release of EE 2.0, from “release candidate” to “public beta”. Ah.

But let me just clarify my case: for first-time customers, paying for a beta release is off-putting. I will be purchasing 1 freelancer’s license of EE 2.0 for myself, because I know and trust EE and I also want to be a part of the community that makes EE 2.0 great; but I won’t be purchasing it for my clients. I’m willing to invest $99 in EE 2.0 because I know and trust EE 1.6.8.

With Solspace, let’s consider their recently released Super Search 1.0.0 Beta module. EE has long needed a better solution to search. Right now I’m quoting for a job that heavily relies on an intelligent search engine

@reedmaniac Thanks for feeding back. I understand what you're saying. And I don't mean to slight you guys! Hell, freeform alone is worth ... @reedmaniac Thanks for humoring me on this. Interesting debate - I see your point. Perhaps I can dig up $$ to play in the beta sandbox.

Tips to improve your clients’ experience using ExpressionEngine

2009-12-28T15:26:14Z

When I switched from Wordpress to ExpressionEngine, there were a many reasons behind the move. Custom fields, absurdly simple templating system, .

Code Every Day: Day 1

2009-12-28T15:24:28Z

 
function activate_extension()
{
	global $DB;
 
	$hooks = array(
			'lg_addon_update_register_source' => 'lg_addon_update_register_source'
			,'lg_addon_update_register_addon' => 'lg_addon_update_register_addon'
			,'edit_entries_additional_tableheader' => 'edit_entries_additional_tableheader'
			,'edit_entries_modify_tableheader' => 'edit_entries_modify_tableheader'
			,'edit_entries_additional_celldata' => 'edit_entries_additional_celldata'
			,'edit_entries_modify_tablerow' => 'edit_entries_modify_tablerow'
    );
 
	foreach ($hooks as $hook => $method)
	{
		$sql[] = $DB->insert_string($this->db_prefix . '_extensions',
					array(
                    'extension_id' => '',
                    'class'   => Seesaw_extension_class,
                    'method'  => $method,
                    'hook'     =>$hook,
                    'settings'  => '',
                    'priority'  => 10,
                    'version' => $this->version,
                    'enabled' => "y"
                    )
                  );
	}
 
	// run all sql queries
	foreach ($sql as $query)
	{
		$DB->query($query);
	}
 
	// Set up & save default settings
	$default_settings = $this->_merge_settings(array());
	$this->_save_settings($default_settings);
 
	return TRUE;
}

This is the code example.

Preload Images with jQuery

2009-11-04T16:07:57Z

There are obviously a gazillion ways to skin this cat, so let's keep it simple and define a basuc scenario:

I have a very large image (400kb) set as the background of my site. I'd like to show a "loading" animated graphic that displays until the large image is available, and then show the large graphic instead.

What We Need

The latest and greatest jQuery (I like to link to a Google-hosted copy)
An animated gif (either create your own or generate one with Ajaxload
A big ol' image

$(document).ready(function() {
	var imgSrc = "{image}";
	var img = new Image();
	$(img)
		// once the image has loaded, execute this code
		.load(function () {
			$('body').css("background-image", "url(" + $(this).attr('src') + ")").css("background-position", "top left");
		})
		// if there was an error loading the image, react accordingly
		.error(function () {
			alert('error');
		})
 
		// *finally*, set the src attribute of the new image to our image
		.attr('src', imgSrc);
});

120,000 New Blogs Created Worldwide Each Day *

2009-10-15T19:17:54Z

The past 48 hours have been a flurry of creative activity. For months, possibly even years, I've been pining and aching to revive my personal/professional website. I've enlisted friends to help. I've created a brief. I've launched a number of holding pages in between. And then two nights ago, struck violently with inspiration, I toiled from sundown to sunup, playing and tweaking refreshing, until I had myself a new site.

On the surface, it may actually appear that little's changed; the homepage still amounts to a holding page. And it is by no means finished, and that's the point; it should be a platform for experimentation, playful attempts, and some technical leaps of faith.

I'm excited to be on the web again.

Highlights Include:

Money Talks

I've spent months getting to this moment. Talk about money has always been a funny one; people are invariably reluctant to show their cards, but desperately curious to see others'. I don't think money can be handled with kid gloves, because hey, this is business, and business is about money.

So, taking inspiration from the open source community, where all code is free to use, abuse and reuse, I've put my prices online. It will be an interesting to see how this experiment goes down.

Fancy Sliding Drawer

I'm very pleased with the sublteties going on with the sliding drawer up top. Too many things to go into, but I think the many many hours of tinkering with just precisely how it behaves have paid off. I encourage you to show it, hide it, show it again, scroll down the page and then show it some more. Here, you can even click this link to get started having fun.

Avatar Archives

When I first launched the site (yesterday), the "avatar" image in the top drawer was the same on every page. I'd laboured to choose between 4 that I'd created as options, and finally went with the "safest" one.

But I still wanted to use some of the more playful ones, and so last night I realised it could be a fun little feature of my site if they changed regularly. Like every day. So that's what I plan to do.

This might be my favourite feature of the site, because it answered one of the most difficult parts of my self-inflicted brief: to subtly let my personality shine through.

CSS3, HTML5

This is my first foray into the HTML5 world, and I'm treading very carefully. But the point of this move is simply to try, and to learn.

The CSS3 effects are real fun, but disappointing that not every browser will be able to show them, which means a lot of potential visitors won't see them. It's too bad, because when they're all put together, the details really are nice. But, that is the point of this wild wild west business.

ExpressionEngine

This site is running on ExpressionEngine, which I can't even begin to explain my affection for. Between EE and jQuery, sometimes I feel really, really clever.

What's Next?

A lot, there is no doubt. In fact as I write this, there is still no "blog" front-end, just an RSS feed that sorta works. But I've started, and that's the important part.

* Based on 2007 numbers found at http://www.sifry.com/alerts/archives/000493.html