http://johndwells.com/index.php/blog/index/ en webmaster@johndwells.com Copyright 2010 2010-02-07T17:51:13+00:00 http://johndwells.com/site/pedantic-as-fuck-coding-guidelines/ http://johndwells.com/site/pedantic-as-fuck-coding-guidelines/#When:17: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 <img /> 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 “<button>Submit Me!</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! 2010-02-07T17:51:13+00:00 http://johndwells.com/site/should-i-pay-for-that-beta/ http://johndwells.com/site/should-i-pay-for-that-beta/#When:02: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. Either way, I thought I’d delve into the idea a bit more here. 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 Business, ExpressionEngine 2010-01-07T02:53:58+00:00 http://johndwells.com/site/tips-to-improve-your-clients-experience-using-expressionengine/ http://johndwells.com/site/tips-to-improve-your-clients-experience-using-expressionengine/#When:15:26:14Z One of ExpressionEngine’s strengths is it’s malleable, usable UI. Out of the box, EE gives you a significant amount of flexibility to customise the admin control panel to suit your needs. In this post, I’ll mention a few tips from the EE community on how to take that UI customisation one step further. When I switched from Wordpress to ExpressionEngine, there were a many reasons behind the move.  Custom fields, absurdly simple templating system, . ExpressionEngine 2009-12-28T15:26:14+00:00 http://johndwells.com/site/code-every-day-day-1/ http://johndwells.com/site/code-every-day-day-1/#When:15: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. Programming 2009-12-28T15:24:28+00:00 http://johndwells.com/site/preload-images-with-jquery/ http://johndwells.com/site/preload-images-with-jquery/#When:16:07:57Z These days, high bandwidth images are becoming the norm for a lot of our site designs. And while it may sound trivial, we don't really care for the empty white space that our visitors stare at while these massive images silently load. But with a sprinkle of jQuery and an animated gif, we can let the visitor know the design is still being built. Let's look at how.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);}); 2009-11-04T16:07:57+00:00 http://johndwells.com/site/120000-new-blogs-created-worldwide-each-day/ http://johndwells.com/site/120000-new-blogs-created-worldwide-each-day/#When:19:17:54Z Yet another "Hello, World" blog post.  It's a bit like a tree falling in a forest; it's only doing it to hear itself. 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. 2009-10-15T19:17:54+00:00