Jonathan Longnecker - From Design To Dynamic: Rapid Development with ExpressionEngine

Categories:: ExpressionEngine
Tags:
Published:: 12:30pm on Monday 26th October, 2009

Jonathan Longnecker is a developer with fortyseven media. He discussed the tips and tricks they use to quickly build new ExpressionEngine sites.

Slides and code examples from the talk are on Jonathan’s site.

Introduction

The problem is that EE developers are too awesome. Add-on development has exploded, and functionality and usefulness is really amazing. Structure is a great example of this.
We typically use 15+ addons for every site, with the same kind of templates and global variables
The solution is to set up a sandbox site where the core and all add-ons are kept up-to-date. Add some default templates and global variables, a weblog for content, and some sweet tricks and you have the ability to rapidly build out new sites
We will be adding new things to it as we find great add-ons

Add-Ons

LG Addon Updater
LG htaccess Generator: Generates your .htaccess file, removes index.php and much, much more
LG Add Sitename: Enables Control Panel admin page title replacements, client logo
LG TinyMCE: Not convinced it’s the best choice, and it’s not good with pasted text. Turn off source formatting, spans and brs, take out the image upload, add blockquote
SL Developer Info: Lists all weblogs, templates, and other useful developer shortcuts. Give it it’s own custom tab in your nav bar
ImgSizer: Resizes and crops intelligently and creates thumbnails; make sure you create a “sized” directory in your images folder
Solspace’s Freeform
FieldFrame: Changes the way you can put together certain types of content
nGen File Field
Structure: Radically changes the way you handle content pages and navigation. Scared of using it initially as I thought it would lock me into certain way of developing templates, but it really has potential to speed up certain parts of your site; secondary static pages are a lot faster to set up

Tips and tricks

In your Template Preferences, turn on save template revisions (I use five) for added protection from mistakes, and always save templates as files
Create a “content” weblog with custom fields - meta keywords, meta description, a body (TinyMCE field type), and images (an FF Matrix). A sweet trick invented by AJ Penninga is to set up your images as a FF Matrix with a File field, title, radio group of sizes, radio group for crop height (optional), and dropdown for alignment. Then to insert the image add {image_1}, {image_2}, etc. in the body content. Your content template then uses LG_Replace to loop through the matrix images and replace those tags with the images inside the {images} tag
Create a client member group with access to file uploads, Structure and weblogs
Create global variables: I use html_head (containing doctype, static meta tags, favicon link, etc.), html_closing, jquery, javascript, rss (just your RSS links), and stylesheets
Create templates in site and _global groups: footer, header, nav (containing Structure’s nav_main tag), sidebar (using Structure’s nav_sub tag) and content (using Structure’s title_trail tag to build the </code> element)</li> <li>Keep the <code><body></code> tag inside each template so you can add a dynamic CSS id or class to it</li> <li>Replace the default homepage with a list of what’s been installed and configured on the sandbox site</li> <li>Moving servers is now faster than installing a new site, as the sandbox site is ready to go - just copy the database and files over and amend the <strong>config.php</strong> settings</li> </ul> <p>Jonathan ended with a live demonstration of creating a new site from scratch, using Structure to create pages and place them in the site <abbr title="Information Architecture">IA</abbr> really quickly, generate automatic navigation, and use Structure’s Listings feature to attach weblog entries to a page (a la a design portfolio). Structure makes it impressively easy to re-order navigation items.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/pittock.jpg" id="article_image" alt=""> <div id="content"> <h1 class="entry-title">Jamie Pittock - The Art Of Proactive Parenting</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C15/business" rel="tag">Business</a>, <a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a>, <a href="http://www.thewatchmakerproject.com/category/C16/freelancing" rel="tag">Freelancing</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>12:27pm <i>on</i> Monday 26th October, 2009</dd> </dl> <p>Jamie Pittock is Operations Director for Nottingham-based <a href="http://erskinedesign.com/">Erskine Design</a>. He discussed effective ways to develop ExpressionEngine sites that increase understanding and remove uncertainty for your clients.</p> <p>Jamie’s slides can be viewed on <a href="http://www.slideshare.net/jamiepittock/the-art-of-proactive-parenting">SlideShare</a>.</p> <h2>Managing client expectations</h2> <ul> <li>Design your content model around the client’s existing content - take example content from client, and identify the fields, types and field names needed</li> <li><abbr title="What You See Is What You Get">WYSIWYG</abbr> - clients come wanting total control of their content. They are proposing a solution before you understand their problem. Often they just have specific issues. Designers get lazy and clients shouldn’t design</li> <li>You need to think about how you would write this content. Create a template to give to their content creators. <a href="http://www.ngenworks.com/software/ee/ngen-file-field/">nGen File field</a> is the best solution for files at the moment</li> <li>Live Demo: The new ed_imageresizer plugin from Erskine does image resizing on the fly and caches results. It will be available soon</li> <li>Don’t always have to give the client what they ask for. e.g. No WYSIWYG, just multiple images/captions/alignment fields for main body and extended text. We use Textile. What if they want more images? You can only design and model content based on what the client tells you at the time. Don’t be afraid to tell the client that</li> <li>Audience comment: “Publishing online is <strong>not</strong> creating Word documents.”</li> <li>Influence and advise client using size of fields, instructions, options available</li> <li>Make it fun. Clients need to enjoy managing their site. Make them feel like designers. Enable them to do something they never thought they’d be able to do. Make it feel less like work (and less like Word)</li> </ul> <h2>Improve the Control Panel</h2> <ul> <li><strong>#8 Signpost using tabs.</strong> Make tabs for things the client needs access to</li> <li><strong>#7 Remove what isn’t needed.</strong> Current dashboard is laughable; get rid of notepad, bulletins, comments, etc. Same on Edit tab - opportunities to remove confusion - remove trackback column, comment count, etc.</li> <li><strong>#6 Improve usability.</strong> Add hover dropdown on edit tab, install <a href="http://expressionengine.com/downloads/details/edit_tab_ajax/">Edit Tab AJAX extension</a></li> <li><strong>#5 Add extra content.</strong> Add extra columns to Edit page (e.g. Categories)</li> <li><strong>#4 Content Previews.</strong> Use Live Look. Fix the Publish page buttons and kill the default ‘Saved’ page using the <a href="http://www.ngenworks.com/software/ee/publish-tweeks/">Publish Tweaks extension</a></li> <li><strong>#3 Use jQuery to change stuff.</strong> For example, change the label for the title field on Publish page depending on the weblog they are using. Avoid client confusion. Remove Options checkboxes dynamically. Tiny changes can make a difference to client understanding</li> <li><strong>#2 Use field instructions.</strong> Include image dimensions, or more complex details. Use jQuery or extensions to add additional detail. Say how content will be displayed</li> <li><strong>#1 Create a new theme.</strong> This is a lot of work. Does this breach the license agreement? Don’t know, maybe</li> </ul> <h2>Q&A</h2> <p><strong>How much training do you provide?</strong><br /> No documentation - we create videos and offer staff training. It’s important to bring the client in as early as possible and get them using EE.</p> <p>It was also interesting to note that Erskine keep their templates under an /assets/templates/ folder (outside of the system folder).</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/burdick.jpg" id="article_image" alt=""> <div id="content"> <h1 class="entry-title">Paul Burdick - Add-On Development: EE Expects That Every Developer Will Do His Duty</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a>, <a href="http://www.thewatchmakerproject.com/category/C17/php" rel="tag">PHP</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>12:24pm <i>on</i> Monday 26th October, 2009</dd> </dl> <p>Paul Burdick is the ex-CTO of EllisLab, and now works as Lead Developer for ExpressionEngine add-on shop <a href="http://www.solspace.com/">Solspace</a>.</p> <p>Download Paul’s slides here in PDF form: <a href="http://bit.ly/addons_eeci2009">http://bit.ly/addons_eeci2009</a>.</p> <h2>All about add-ons</h2> <ul> <li>What are add-ons? There are three types - extensions, modules and plugins</li> <li>Extensions extend basic EE functionality, allow you to interpose your own code. Developers are extending the idea by adding their own hooks in their modules. Typically extensions don’t have a database table, but do have settings in the Control Panel</li> <li>Modules are the “mighty workhorses” of EE. They typically have a Control Panel area, database tables, and their own template tags</li> <li>Plugins have no settings and no install process. They offer text manipulation via template tags or custom fields</li> <li>On <a href="http://devot-ee.com/">Devot:ee</a> the add-ons currently break down as 51% plugins, 35% extensions, 15% modules</li> <li>EE 2.0 will introduce Accessories - tools, references and abilities that go at the bottom of the CP. They can have database tables, and use View files. Defaults include Learning, Notes, Tips</li> </ul> <h3>Developing add-ons</h3> <ul> <li>Necessary skills you will need to be an add-on developer: PHP (learn at <a href="http://php.net/">php.net</a>, <a href="http://www.w3schools.com/PHP/">w3schools</a>, and <a href="http://www.zend.com/">Zend</a>), SQL (note that Active Record is part of EE 2.0)</li> <li>View files are HTML with PHP in, and are used in EE 2.0 (they can also be used in 1.6.x with <a href="http://www.solspace.com/software/detail/hermes/">Solspace’s Hermes</a>). They are much easier to write than using the Display class</li> <li>Build your UI in static HTML/CSS/JavaScript first before converting to View files. It’s easier to test that way, and specialist UI developers don’t need to know PHP</li> <li><a href="http://jquery.com/">jQuery</a> is available by default in EE 2.0 (although it’s not the best way to learn JavaScript). EE 2.0 also makes it easy to use other JS libraries</li> <li>Never, ever just start coding! Don’t just write code and release it. Do research - look at previous releases, how are big companies doing it, What are your required features</li> <li>There are a lot of add-ons that do not need to exist. The <a href="http://expressionengine.com/docs/modules/query/index.html">Query module</a>, or JavaScript+AJAX can do a lot</li> <li>Is a module required? Could an extension do it? Or a plugin that outputs weblog data?</li> <li>Tell a story - how would a user do this? What would Apple do? Eliminate steps, follow your instincts</li> <li>Map out features - major, minor, and “icing”</li> <li>Include your own hooks for future expansion</li> <li>Database structure - plan your tables, with separate ones for preferences and data. How does your add-on interact with EE’s own tables? <a href="http://en.wikipedia.org/wiki/Database_normalization">Normalization</a> - eliminate data duplication</li> <li>Use specific, sensical field names</li> <li>Use indexes</li> <li>When naming template tags, give them a good name, and describe the parameters and variables in the comments. Explain what each one does</li> <li>Make tag name simple and obvious. I want to be able to read the template and know what it does. No abbreviations</li> <li>Parameters - use prefixes to namespace parameters and group functionality</li> <li>Variables - there should be no ambiguity and no abbreviations. Name variables the same as their corresponding database field, then you can just loop through a query result row to find and replace. Prevent collisions in variables. <li>Underscores are recommended</li> <li>Get feedback - revise your add-on spec until solid</li> </ul> <h3>Building an add-on</h3> <ul> <li>Break the Control Panel page into sections: Data (create, modify, delete); Preferences/Settings/Permissions (copy preferences is a handy tool to provide); Actions - recount records, cache management; display the version number and documentation link</li> <li>Keep it simple - build what is necessary and no more</li> <li>Build it in HTML/CSS/JavaScript first; use a view file, put the PHP into the HTML (not the other way around), and ignore IE6 (EE 2.0 and Solspace do)</li> <li>Have goals and milestones not deadlines. Don’t release software until you think it’s ready</li> <li>Writing code - follow the <a href="http://expressionengine.com/docs/development/guidelines/index.html">EllisLab developer guidelines</a>! Comment well and properly. EE code has jokes and ASCII art in it</li> <li>Sanitize and escape everything. Assume all data is tainted - sanitize and escape at the query, not at the top of your class</li> <li>Abstraction - use twice, write once. Create libraries - reduces work and mistakes</li> <li>Simplify - bail out of the process first, as soon as you find a problem, do the actual work second</li> <li>Reduce database work. Multiple queries are okay; validate, check pagination with a COUNT query, and only then retrieve data</li> <li>Consider using a Model to abstract queries</li> <li>Per page load caching - use <code>$SESS->cache[‘modules’][‘module_name’][some_cache’] = array();</code> to cache query results, preferences, etc. Use a reference</li> <li>If you need weblog data, just <a href="http://gist.github.com/197721#expressionengine">use the Weblog module</a> - <code>include()</code> it and call its methods</li> <li>Provide tools for keeping things tidy - remove old data/caches, optimize tables (regularly or provide a button to do so)</li> </ul> <h3>Debugging and improving performance</h3> <ul> <li>Debugging and performance are the same thing</li> <li>Turn on error reporting - no PHP errors ever!</li> <li>Turn on SQL queries - review your queries, check CP, settings, tags in templates - eliminate duplicate queries!</li> <li>Are certain queries necessary on every page load? Validate and check cache. Evaluate queries for performance - to improve things, try adding a WHERE clause on an indexed field, and remove extraneous JOINs</li> <li><a href="http://en.wikipedia.org/wiki/Denormalization">De-normalization</a> - duplicate data to reduce work. Abstract methods for data consistency</li> <li>Learn about MySQL performance - <a href="http://www.mysqlperformanceblog.com/">mysqlperformanceblog.com</a> is a good resource</li> <li>Turn on <a href="http://expressionengine.com/docs/cp/admin/system_preferences/output_and_debugging_preferences.html">Template Debugging</a> - what code is taking the longest to run? You can add debug entries in your code, e.g. before and after a query or loop, using <code>$TMPL->log_item();</code></li> <li>Embeds are heavy - they run all the “new page” queries for each one. Automated actions - slow down your add-on. Use AJAX instead</li> <li>Use <code>trigger_error()</code> to throw errors for deprecated code</li> <li>Ask for help. Often just discussing a problem will lead to a solution</li> </ul> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/ryan.jpg" id="article_image" alt=""> <div id="content"> <h1 class="entry-title">Ryan Irelan - Ten Ways To Supercharge Your EE Development</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>11:31am <i>on</i> Monday 26th October, 2009</dd> </dl> <p>Ryan Irelan works for <a href="http://www.happycog.com/news/2009/08/merger/">Happy Cog West</a>, and is also responsible for <a href="http://eescreencasts.com/">EE Screencasts</a>, the <a href="http://eeinsider.com/">EEInsider</a> site, <a href="http://eescreencasts.com/page/ee-help-chat">EE Help Chat</a>, and the <a href="http://ee-podcast.com/">EE Podcast</a>. He is working on an ExpressionEngine book that will cover EE 2.0.</p> <p>Follow along with Ryan’s slides over on <a href="http://www.slideshare.net/ryanirelan/ten-ways-to-improve-your-ee-development">SlideShare</a>.</p> <h2>Top Ten Tips</h2> <ul> <li><strong>#10 Pre-package your EE install.</strong> Install and configure your favourite add-ons, setup system preferences, create default weblogs, configure your favourite tab arrangement, enable extensions and modules, and setup default members and groups. Export it all into a SQL file and zip up the files = default EE installation. I’ve converted all this into a shell script</li> <li><strong>#9 Use Version Control.</strong> It adds an extra layer of security, as well as version tracking. Happy Cog West uses a remote database due to the difficulty of merging database schema changes; all staff/management/designers use <a href="http://subversion.tigris.org/">Subversion</a></li> <li><strong>#8 Config Variables.</strong> You can use <strong>config.php</strong> to store other configuration variables (e.g. you can put FieldFrame paths in it). EE will honour config variables over the database value. There is a <a href="http://expressionengine.com/wiki/Hidden_Configuration_Variables/">list of config variables</a> on the ExpressionEngine Wiki</li> <li><strong>#7 Avoid Add-On Insanity.</strong> There are sites that use too many add-ons, making itdifficult to figure out what has happened when something goes wrong. Find more creative solutions to problems (e.g. you don’t need an add-on just for a “Tweet this” link)</li> <li><strong>#6 Optimize Now (And Later).</strong> Make use of the <a href="http://expressionengine.com/docs/modules/weblog/parameters.html#par_disable">disable parameter</a> as you code (i.e. don’t plan to go back and add it later). EE also has ‘extreme traffic overrides’ - you can disable all tracking as a quick fix to site traffic problems. Solspace offer a <a href="http://www.solspace.com/development/performance/">site evaluation service</a></li> <li><strong>#5 Become Fan<em>tab</em>ulous.</strong> Add as many tabs as you need to get to the stuff you use regularly. You can even <a href="http://eeinsider.com/tips/view/save-common-entry-filters-as-tabs/">save edit filters as tabs</a></li> <li><strong>#4 Developer Add-Ons FTW.</strong> <a href="http://www.experienceinternet.co.uk/resources/details/sl-developer-info/">SL Developer Info</a> and <a href="http://devot-ee.com/add-ons/extensions/pur-developer/">Pur Developer</a> add pages or links to your Control Panel full of developer-specific information. <a href="http://leevigraham.com/cms-customisation/expressionengine/lg-add-sitename/">LG Add Sitename</a> allows you to display server time settings in the header</li> <li><strong>#3 Keep An Eye On The User.</strong> Make it easy for the user, not for you. Set up default tabs for users, use custom field groups for content instead of one catch-all group, keep the control panel as clean as possible, remove the formatting bar and dropdown, turn off the url title field, turn off dates if they’re not important. Don’t have to tell clients “Don’t worry about it” if they never see it!</li> <li><strong>#2 Try <a href="http://buildwithstructure.com/">Structure</a>.</strong> It’s a free module; I didn’t try it for a long time, but now I have I’m really impressed</li> <li><strong>#1 Take A Chance.</strong> Step outside your comfort zone with your tools; try writing an extension</li> </ul> <h2>Q&A</h2> <p><strong>What do you recommend for deployment?</strong><br /> Tried <a href="http://www.capify.org/index.php/Capistrano">Capistrano</a>, Git+Capistrano, but not found a magic bullet for that - would love to hear if anyone has one.</p> <p><strong>Why do you work with a remote database?</strong><br /> Only with team, not on solo projects; it’s slow using remote db, but stops conflicts.</p> <p><strong>Have you had issues with performance on related entries?</strong><br /> Yes, we have had to write custom queries sometimes.</p> <p><strong>Is the use of config.php variables automatic or does the developer have to code for that?</strong><br /> EE does the check, but you do have to code for it yourself in your add-on.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/leevi.jpg" id="article_image" alt=""> <div id="content"> <h1 class="entry-title">Leevi Graham - How to start developing your own add-ons</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>11:27am <i>on</i> Monday 26th October, 2009</dd> </dl> <p>Leevi Graham runs <a href="http://newism.com.au/">Newism</a> in Australia, and has developed more than 25 add-ons over the last two years. His first and most profitable add-on was <a href="http://leevigraham.com/cms-customisation/expressionengine/lg-better-meta/">LG Better Meta</a>, and Leevi was named <a href="http://devot-ee.com/articles/item/first-annual-academee-awards/">2008 Add-on Developer of the Year on Devot:ee</a>.</p> <p>Download Leevi’s slides (PDF) here: <a href="http://bit.ly/efYkA">http://bit.ly/efYkA</a>, or watch the <a href="http://vimeo.com/7571463">video of his presentation</a> on Vimeo.</p> <h2>About Add-Ons</h2> <ul> <li><a href="http://expressionengine.com/docs/development/plugins.html">Plugins</a> render front-end tags. They are simple to build, offer custom field text formatting, use a single file, have no Control Panel administration, no settings, and can’t process forms. 99% of plugins are for the front-end</li> <li><a href="http://expressionengine.com/docs/development/tutorial.html">Modules</a> are 50/50 front-end and back-end. It is easy to upgrade a plugin to a module; they can process form submissions, use multiple files, but have no settings</li> <li><a href="http://expressionengine.com/docs/development/extensions.html">Extensions</a> let you “take control” of EE. They extend existing tags or the control panel, have a built-in settings form, and are all done through EE’s built-in hooks. Extensions must be activated to use, and don’t offer tag parsing. Hook registration can be complex for beginners</li> <li><a href="http://expressionengine.com/developers/extension_hooks/">Hooks</a> hook into the core EE processing, and there are over 170 of them. An extension’s class method is called when it’s hook is executed; you can see <a href="http://devot-ee.com/hooks/">which hooks are used where on Devot:ee</a></li> <li>Your code should always check whether someone else has already used the same hook</li> <li>If you are developing a combined extension and module, I recommend you put settings specific to the extension into the extension, rather than in the parent module</li> <li>Add-Ons combine extensions, modules and plugins. This means lots of files in different locations, with dependencies on one another</li> <li>Where to find add-ons: <a href="http://expressionengine.com/downloads/addons/">Official repository</a> (144), the <a href="http://expressionengine.com/forums/">EE forums</a> (?), <a href="http://devot-ee.com/">Devot:ee</a> (480), <a href="http://github.com/search?q=ee_addon">GitHub</a> (114)</li> <li>For help developing add-ons, there is <a href="http://expressionengine.com/developers/">documentation</a> and a <a href="http://expressionengine.com/developers/extension_hooks/">list of hooks</a> on the EE site</li> <li>If you put your code on GitHub, community has adopted the <strong>xxx.my_addon_name.ee_addon</strong> naming convention</li> </ul> <h2>Leevi’s Development Process</h2> <ul> <li>I’ve started providing templates and themes incorporating the add-on so that users can see that the add-on works, rather than struggling to work through the code themselves</li> <li>Always end extension classes with <code>_ext</code> to prevent class naming conflicts</li> <li>Documentation is important; it’s the most boring job, but if you do it properly and provide examples, your support requests will more than halve</li> <li>If an add-on is worth writing, it probably should be for sale - so charge for your extensions</li> <li>But without releasing free stuff initially, I wouldn’t be in the position I’m in now, so it’s a balancing act</li> <li>Currently offers email-based support (<a href="http://brandon-kelly.com/">Brandon Kelly</a> uses <a href="http://getsatisfaction.com/">GetSatisfaction</a>)</li> <li>Free LG or NSM add-on licenses for everyone at EECI2009!</li> </ul> <h2>Q&A</h2> <p><strong>Is it worth spending the time to build a payment system handler so you can sell?</strong><br /> Yes - you might spend a week building something, but you can then use that to sell for years.</p> <p>Leslie Camacho (EllisLab President) noted that lots of hooks were stripped out of EE2.0 for the beta phase to limit developers and reduce bug report complexity.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/boyink.jpg" id="article_image" alt=""> <div id="content"> <h1 class="entry-title">Michael Boyink - Quoting and Planning ExpressionEngine Projects</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C15/business" rel="tag">Business</a>, <a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a>, <a href="http://www.thewatchmakerproject.com/category/C16/freelancing" rel="tag">Freelancing</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>11:24am <i>on</i> Monday 26th October, 2009</dd> </dl> <p>Michael Boyink is a <a href="http://www.boyink.com/">consultant</a> and <a href="http://train-ee.com/">trainer</a> who has been working with ExpressionEngine since 2002. He discussed his process for planning and quoting on EE projects.</p> <p>Watch <a href="http://vimeo.com/7570396">Mike’s presentation over on Vimeo</a>.</p> <h2>Pitching and quoting EE</h2> <ul> <li>I pitch EE as a commercial product that has people working on it for a living, paid tech support staff, security, and great community</li> <li>You don’t need to know the size of a site to quote for it any more. Now we need to know how many weblogs/channels it will have. All other aspects - fields, groups, templates - all depend on the number of channels</li> <li>There are always other pieces is of content that don’t fit</li> <li>Look through the site and identify unique content types</li> <li>Other things that add complexity: complex content types, IA complexity, frontend complexity, people, the server environment</li> <li>Also: don’t forget project management, other things that need to be done in the project (e.g. content importing)</li> <li>Come up with a range of project hours, then give it a gut check - does it feel right? Come up with a final cost. Billing by hours is bad - the better you are, the less you can charge</li> <li>I usually give a ballpark figure so the client can decide whether they want the full quote/proposal</li> </ul> <h3>Office walls</h3> <ul> <li>Everything goes up on a project wall - the quote, a site map, content and designs. With everything in front of you it is easy to spot issues (e.g. the <li>design doesn’t accommodate the content, or IA issues)</li> <li>Post new versions over the top of old ones; kind of paper-based version control. Never take anything off the wall</li> <li>Build deep content first so the client can start entering their data earlier</li> <li>The project board is a good way to jump back into a project after time away</li> </ul> <h2>Q&A</h2> <p><strong>Do you charge ongoing costs?</strong><br /> Don’t do it, in fact I sell against it in proposals, and don’t charge for doing upgrades.</p> <p><strong>How do you do training?</strong><br /> Offer a visit, screencast, or documentation. Clients usually prefer on-site visit.</p> <p><strong>How do you charge for licenses?</strong><br /> The client buys the license, so they own it.</p> <p><strong>Who should populate the content?</strong><br /> We can do it, but it’s better - and good training - for the client to do it.</p> <p><strong>Do you ever customise the Control Panel?</strong><br /> No, never needed to; sites either don’t need it done, or there isn’t the budget for it.</p> <p><strong>What add-ons do you use or recommend?</strong><br /> Don’t really use them - I’m very careful to keep EE as clean as possible to be ready for 2.0.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/brandon.jpg" id="article_image" alt=""> <div id="content"> <h1 class="entry-title">Brandon Kelly - Make A Market Out Of Our Community: The Whys and Hows of Selling Add-Ons</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>11:21am <i>on</i> Monday 26th October, 2009</dd> </dl> <p>Brandon Kelly is an ExpressionEngine add-on developer, responsible for the extremely popular <a href="http://brandon-kelly.com/fieldframe">FieldFrame</a> and <a href="http://brandon-kelly.com/playa">Playa</a> extensions. He spoke on the importance of commerciality in add-on development.</p> <p>You can watch a <a href="http://vimeo.com/7561777">video of Brandon’s talk</a> on Vimeo.</p> <h2>On commercial add-ons</h2> <ul> <li>Got into ExpressionEngine at the beginning of 2008, releasing <a href="http://brandon-kelly.com/playa">Playa</a> in April 08 (it won <a href="http://devot-ee.com/articles/item/first-annual-academee-awards/">Devot:ee extension of the year</a>). <a href="http://brandon-kelly.com/gypsy">Gypsy</a> was released in December 2008, and <a href="http://brandon-kelly.com/fieldframe">FieldFrame</a> in March 2009</li> <li>Supporting and working on these add-ons was starting to feel more like a job</li> <li>Decided to charge for <a href="http://brandon-kelly.com/playa">Playa 2</a> - $69 seemed like a good number to choose ;)</li> <li>Released <a href="http://brandon-kelly.com/wygwam">Wygwam</a> for $29 in September 2009</li> <li>Making enough money now to support myself, so going full-time freelance at the end of 2009</li> <li>There are lots of free add-ons; we need to change this. Only really simple things should be free</li> <li>It pays to sell. Maybe this is a unique siutation to EE; WordPress users won’t pay for anything</li> <li>Get paid because you deserve it - you’re never done when you release a popular add-on</li> <li>It is easier to support paid add-ons - there are less but better users, more knowledgeable requests, and you feel more obliged to help</li> <li>Pricing: Wait until you’re finished before setting a price. Play customer - you’re picking a price that the customer will want to pay</li> <li>Effort != Value. Find a price point that feels right</li> <li>Marketing: an entry on <a href="http://devot-ee.com/">Devot:ee</a> and a <a href="http://expressionengine.com/forums/viewcategory/35/">forum post</a> might be fine for free add-ons, as someone else will try it and talk about it more. But you can’t do this with paid add-ons; you need to put something together for your users. Be excited! If you’re not, what do you need to change to have a product you are really excited about</li> <li>Playa is a great example for how to set up a site to sell an add-on</li> <li>Buy advertising on EE fansites</li> </ul> <h2>Q&A</h2> <p><strong>Ever had any issues with piracy?</strong><br /> Not bothered - the time needed to combat it is more than the time stolen in support.</p> <p><strong>Leslie Camacho: What do you want EllisLab to do for add-on developers?</strong><br /> Would be nice to be able to advertise add-ons on the official site, but ultimately it’s up to the individual developer to market their add-ons themselves.</p> <p><strong>Why make Wygwam?</strong><br /> I received several requests to make a WYSIWYG editor for FieldFrame. Wygwam represents the first time I’ve made an add-on that wasn’t to solve my own problem.</p> <p><strong>How do you sell online?</strong><br /> Using a hacked version of <a href="http://expressionengine.com/downloads/details/simple_commerce_module/">Simple Commerce</a> module.</p> <p><strong>What do you think about an Add-On Store?</strong><br /> Would be good, maybe. But it would need good quality control.</p> <p><strong>How long do you spend on support?</strong><br /> About 10-15 hours per week.</p> <p><strong>What happens if you decide to give up?</strong><br /> One of the benefits of selling add-ons is that you don’t want to give up. But probably another commercial developer would take over my add-ons.</p> <p><strong>Will you accept commissions from agencies?</strong><br /> Possibly, but I have a big backlog of ideas already.</p> <p><strong>How do you develop?</strong><br /> Frontend first - HTML, CSS, and JavaScript - before looking at the backend.</p> <p><strong>Any plans to integrate add-ons that compete?</strong><br /> No - competition is a good thing.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/veerle.jpg" id="article_image" alt=""> <div id="content"> <h1 class="entry-title">Veerle Pieters - Designing and Using The New EE 2.0 Interface</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C6/design" rel="tag">Design</a>, <a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>10:16am <i>on</i> Monday 26th October, 2009</dd> </dl> <p>Veerle is a highly-respected designer and <a href="http://veerle.duoh.com/">blogger</a>, and runs <a href="http://duoh.com/">Duoh!</a> with her husband Geert Leyseele.</p> <p>Watch <a href="http://vimeo.com/7556343">Veerle’s talk on Vimeo</a>.</p> <h2>The Design Process</h2> <ul> <li>I was asked to design the new EE 2.0 interface</li> <li>The brief: tabbed menu, the ability to remove and add tabs, save space, make it more professional and less bloggy, fluid layout, smooth edges and softness, customisable GUI, inline demos, and user shortcuts</li> <li>The design process: I was thinking in terms of tasks and levels. Keep it simple. It is better to start designing for beginner users, then the UI can be adapted for experts (rather than the other way around). The current EE Control Panel is overwhelming with options and features</li> <li>Thinking about IA rather than design</li> <li>Screenshots demonstrating iterations on the CP homepage, admin page, file upload preferences, and templates page</li> <li>The Publish page will have a “Writing Mode” - a lightbox that covers the entire page, hiding all non-writing tools</li> <li>Delivered the PSD files to EllisLab and thought the job was done. But then I decided to make a more sombre, grey theme with hot pink higlights. It was eventually chosen as the default for EE 2.0</li> <li>If you use the highlight colour for every clickable element, there is no hierarchy</li> <li>Still talking to EllisLab to finalise design touches - correct usage of highlight colour, rounded CSS3 corners, transparent PNGs, typography, spacing</li> </ul> <h2>Q&A</h2> <p><strong>What about IE6 support?</strong><br /> (Derek Allard) IE6 is not officially supported for the Control Panel.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/allard.jpg" id="article_image" alt=""> <div id="content"> <h1 class="entry-title">Derek Allard - Standing On The Shoulders Of Giants</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>10:13am <i>on</i> Monday 26th October, 2009</dd> </dl> <p>Derek Allard is EllisLab’s Technology Architect, and discussed how community shapes development at EllisLab.</p> <p>Download the slides of Derek’s talk here (PDF): <a href="http://www.derekallard.com/img/post_resources/eeci2009_derek_allard_slides.pdf">eeci2009_derek_allard_slides.pdf</a>.</p> <h2>EllisLab’s Development Process</h2> <ul> <li>Fell into teaching about web technology; spent 10 years freelancing and teaching</li> <li>How did we get the idea for Image Editor? EE 2.0 was supposed to be feature-neutral, but we’re trying to make EE work the way you work. Feature ideas come from the developers, the staff, blogs, but most often from <a href="http://expressionengine.com/forums/">the forums</a>. We need compelling user-stories to justify new features, and they need to fit into our vision for EE</li> <li>We use <a href="http://subversion.tigris.org/">Subversion</a>, but have experimented with <a href="http://git-scm.com/">Git</a>. There are eight people contributing to the EE codebase now</li> <li>EllisLab have adopted the <a href="http://en.wikipedia.org/wiki/Scrum_%28development%29">Scrum methodology</a> to run development; they work from a priority list, assign time estimates (using the <a href="http://www.planningpoker.com/">PlanningPoker site</a> to compare blind estimates from developers); tasks are assigned to whoever wants to work on it</li> </ul> <h2>EE 2.0’s Image Editor</h2> <ul> <li>For Image Editing, we looked at other implementations, particularly non-web - EE 2.0 was heavily influenced by Mac OSX</li> <li>Live Demo: the new Image Editor features multiple upload directories, Quick Look-style popups, multi-select rows with the keyboard, download multiple files as a ZIP archive, auto-update the UI with no page reload, crop/resize/rotate/flip tools. We’ll be adding other tools like watermarking eventually</li> <li>Needed to integrate it into the Publish page - inspired by CoverFlow, initially I created an animated popup at the bottom of the screen. EPIC FAIL - unintuitive, set unrealistic expectations, so it was scrapped</li> <li>Came up with a much better interface. Work within constraints of bandwidth, thumbnails, natural flow, needed to work with keyboard navigation</li> <li>Live Demo: Publish page integration features paging, only loads images that are visible on the screen, caches thumbs, uses a custom File fieldtype - <a href="http://brandon-kelly.com/fieldframe">FieldFrame</a> is an official part of EE 2.0</li> <li>Extensions will be packaged in their own folders (language, views, etc. all in the same place)</li> <li>Release and Review process - are we happy, is the community happy? All aspects of EE are under this scrutiny</li> </ul> <h2>Q&A</h2> <p><strong>Is there edit history for images?</strong><br /> No, edits are destructive.</p> <p><strong>Can we upload multiple files?</strong><br /> Will be able to upload a zip archive of files, but not multiple files at once. There are security implications with using a Flash uploader to do that.</p> <p><strong>Is there any way to store data with image files (e.g. copyright)?</strong><br /> No.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/colly.jpg" id="article_image" alt=""> <div id="content"> <h1 class="entry-title">Simon Collison - Five Years Of Quiet Revolution</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>10:10am <i>on</i> Monday 26th October, 2009</dd> </dl> <p>Simon Collison is the Creative Director of <a href="http://erskinedesign.com/">Erskine Design</a>, and discussed his personal history of using ExpressionEngine.</p> <p>Watch or download Simon’s slides from <a href="http://www.slideshare.net/collylogic/ee-five-years-of-quiet-revolution">Slideshare</a>.</p> <h2>My EE History</h2> <ul> <li>ExpressionEngine lets us meet wishlists from clients. As a tool it creates possibilities</li> <li>Background is from building static sites, then using <a href="http://mambo-foundation.org/">Mambo</a> and <a href="http://www.movabletype.org/">MovableType</a> (“crap”)</li> <li>Moving to a dynamic, database-driven site for the first time is exciting</li> <li>Became a designer at <a href="http://www.agenzia.co.uk/">Agenzia</a>, using and hacking pMachine a lot</li> <li>Sold the use of EE 1.x for the <a href="http://www.colly.com/comments/the_libertines_new_site_version_1/">Libertines website</a> on the strength of the possibility for community interaction</li> <li>As EE was developed, the tools we needed started to come out in each release. EllisLab were listening</li> <li>Convinced <a href="http://www.friendsofed.com/">Friends of ED</a> to include ExpressionEngine in the <a href="http://www.friendsofed.com/book.html?isbn=1590595815">Blog Standards Solutions</a> book</li> <li>Agencies and individuals such as <a href="http://www.solspace.com/">Solspace</a> and <a href="http://docs.markhuot.com/">Mark Huot</a> started to use it as the backbone of their work</li> <li>Jamie Pittock launched the first EE fansite, <a href="http://jambor-ee.com/">Jambor-ee</a>, and Mike Boyink’s <a href="http://train-ee.com/">Train-EE</a> was providing tutorials. We started to have places other than the official forums where the community could share their knowledge</li> <li>The <a href="http://www.frieze.com/magazine/">Frieze magazine</a> project was a big test of EE; sixteen years of magazine archives, complex content models, and demonstrated the power of the <a href="http://expressionengine.com/downloads/details/multiple_site_manager/">Multiple Site Manager</a> module</li> <li><a href="http://eeinsider.com/">EEInsider</a> and <a href="http://devot-ee.com/">Devot:ee</a> appeared to share more community information</li> <li>Some add-ons become indispensable - Erskine need <a href="http://brandon-kelly.com/playa">Playa</a> and other commercial add-ons in their work</li> <li>When building a website, it’s wrong to be limited by the technology you use. With EE, we can design sites with an awareness that we can make it happen</li> <li>The ability to (re)design the admin interface ourselves is important</li> <li>We are building our own Ad Server module</li> <li>EllisLab hired Erskine Design to design and develop the demo site that will be included with 2.0</li> <li>The tools coming out in EE 2.0 are what we’ve been waiting for, but we need to spend time with 2.0 before we’ll be comfortable using it for client work</li> </ul> <h2>The future of ExpressionEngine</h2> <p>The future of EE should be to meet the needs of developers and clients. Simon covered the points he believes EE should consider as it grows past the 2.0 milestone.</p> <ul> <li>Adopt common developer methods</li> <li>Have robust first-party modules</li> <li>Provide on-going support for vital add-ons</li> <li>Enable development staging and delivery</li> <li>Provide Un-<a href="http://expressionengine.com/downloads/details/simple_commerce_module/">Simple Commerce</a>!</li> <li>Reintroduce the Advisory Board</li> <li>We need more demos and better example sites</li> </ul> <p>“The quiet revolution is over. If we work smart as a community, we’re in for a great ride.”</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/leslie.jpg" id="article_image" alt=""> <div id="content"> <h1 class="entry-title">Leslie Camacho - Foundations: ExpressionEngine 2.0</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>10:01am <i>on</i> Monday 26th October, 2009</dd> </dl> <p>Leslie Camacho, the President of EllisLab, described the journey to EE 2.0.</p> <p>You can watch or download Leslie’s keynote presentation at <a href="http://www.vimeo.com/7260725">Vimeo</a>, and his slides can be found on <a href="http://www.slideshare.net/lesliecamacho/eeci-2009-keynote">Slideshare</a>.</p> <h2>The Journey</h2> <ul> <li>This week brings the cone of silence to an end, and sets the foundation for the next 5-6 years</li> <li>The original pMachine Pro site was built by Rick Ellis for Nancy Sinatra, and ran on PHP3</li> <li>The community that grew up around pMachine Pro was using it as a CMS, not as a blogging tool</li> <li>The EllisLab team all come from a freelance background; it’s very much a tool “by web developers, for web developers”</li> <li>ExpressionEngine has never been called a CMS internally; we call it a “web publishing platform”</li> <li>We underestimated the amount of work 2.0 would take; version 1.6.8 has 168,000+ lines of code and hundred of add-ons</li> <li>Some example sites running EE: <a href="http://www.vodafonemobileclicks.com/">Vodafone Mobile Clicks</a>, <a href="http://seedmagazine.com/">SEED</a>, <a href="http://www.alistapart.com/">A List Apart</a>, <a href="http://www.bmi.com/">BMI Music</a>, <a href="http://change.gov/">Change.gov</a>, <a href="http://www.frieze.com/magazine/">Frieze magazine</a>, <a href="http://www.leiden.edu/">Leiden University</a></li> <li>These aren’t websites, they are custom web applications. Our CMS needs to bridge with other solutions, tight integration is a necessity. EE is used as a framework</li> <li>Success for web developers means the ability to deliver custom web applications. The line between website and web application is disappearing</li> <li>Foundation > Features. EE 2.0’s foundation is that it is the best commercial CMS, proven in the market, and <a href="http://codeigniter.com/">CodeIgniter</a> is a highly-praised framework (Rasmus Lerdorf, inventor of PHP, says it is the best)</li> <li>So EE + CI = next generation web publishing</li> </ul> <h2>ExpressionEngine 2.0</h2> <ul> <li>EE 2.0 has over 50 new features, a new UI, image editing and a file manager</li> <li>EE 2.1 will return to the normal EllisLab development cycle, and will be a performance/stability/security release</li> <li>Pricing: $149 non-commercial license, $299 commercial license, $50 to upgrade from 1.6.3+, and a $99 freelancer license for up to 5-man web shops to use on their own sites</li> <li>Also introducing corporate licensing and support</li> <li>1.6.8 will be available to download with every 2.0 license</li> <li>Via a video clip of CTO Derek Jones: 2.0 will have custom fieldtypes, an iPhone control panel, and be released on December the 1st 2009</li> <li>An exclusive look at EE 2.0 will start on <a href="http://eeinsider.com/">EEInsider</a> on Monday 26th October</li> </ul> <h2>Q&A</h2> <p><strong>Will modules in 2.0 just be able to make calls directly into the CodeIgniter API/modules?</strong><br /> (Derek Allard) Yes.</p> <p><strong>How much will <a href="http://expressionengine.com/downloads/details/multiple_site_manager/">Multiple Site Manager</a> cost?</strong><br /> Haven’t yet decided for MSM. Corporate license will be expensive.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/jquery.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-10-24T15:55:27+0000">Oct <span>24</span></abbr></div> <div id="content"> <h1 class="entry-title">jQuery for the Control Panel Considered Harmful</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a>, <a href="http://www.thewatchmakerproject.com/category/C14/javascript" rel="tag">JavaScript</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>3:55pm <i>on</i> Saturday 24th October, 2009</dd> </dl> <p>Okay, it’s not actually harmful—in fact it’s rather awesome—but you’ll not get any blog traffic without a provocative title, right? What it can be is a pain-in-the-ass when working offline due to the default settings.</p> <p>The <a href="http://www.ngenworks.com/software/ee/cp_jquery/">jQuery for the Control Panel</a> extension is not a first-party extension (it was created by the clever folks at <a href="http://www.ngenworks.com/">nGen Works</a>), but it does come bundled with ExpressionEngine and is invaluable (and often a requirement) for other add-ons. Unfortunately, the extension’s default settings are to load the jQuery library and UI from <a href="http://code.google.com/apis/ajaxlibs/">Google’s centralised repository for JavaScript libraries</a>; this means that if you don’t have a working internet connection—you’re working on the train or a plane, say, or trying to perform a live code demo at a tech conference with patchy wifi—you’ll get nothing but a spinning icon and no JavaScript.</p> <h2>Pros and Cons</h2> <p>Loading code from Google’s servers obviously has some fantastic advantages. The response time is likely to be super-fast with 100% uptime; it’s a different domain to the rest of your site, so <a href="http://www.websiteoptimization.com/speed/tweak/parallel/">downloads can happen in parallel</a>; and if the user has visited a different site using the same library they will have the file cached, speeding up your overall load speed.</p> <p>But this is the Control Panel we’re talking about! Most of the benefits listed above are irrelevant, particularly if your CP admin team is a small one (indeed, for many sites it may just be one individual). And for development, where you may often be working offline, it can be crucial to have jQuery working properly in all environments.</p> <p>Therefore I recommend that, when installing jQuery for the Control Panel, you also:</p> <ol> <li>Download the latest version of jQuery core and UI from the <a href="http://jquery.com/">official jQuery website</a> (zipped or not is up to you, depending on how often you find yourself stepping through JavaScript code at runtime)</li> <li>Change the Settings for the extension to point to your local files</li> </ol> <p>If you are also using jQuery on your website front-end, you can even just point the extension to the front-end’s file (for example, mine lives at <strong>/j/jquery.js</strong>—save those extra characters where you can!)</p> <p>Now you can work on the train, on a plane, or in a blackout—or run a live demo of ExpressionEngine while hundreds of geeks hose the wifi connection—safe in the knowledge that jQuery is always going to load when and where you want it. Just don’t forget to update it whenever a stable new version is released.</p> <p>I believe EllisLab should consider bundling the latest version of jQuery within the .zip of EE (maybe in the <strong>cp_themes</strong> folder?) and default the extension settings to point to that file instead of Google.</p> <h2>Retain the distributed advantage</h2> <p>There are ways that you can host your own JavaScript library but still retain (most of) the advantages I mentioned above when using Google’s repository. I can’t help you with Google’s uptime (but what does that matter if your own site is down? All you need to worry about is your own uptime, really) but the other benefits are easy enough to duplicate.</p> <ul> <li>Serve your site assets—which might include images and stylesheets as well as your scripts—from a different subdomain on your own site, e.g. <strong>assets.example.com</strong>. It’s easy enough to configure your server to point the subdomain at the same location as the rest of the site, but you get the benefit of parallel downloads.</li> <li>Use Stephen Lewis’ <a href="http://www.experienceinternet.co.uk/resources/details/sl-combinator/">SL_Combinator extension</a> to minify, combine and zip your scripts (and stylesheets) for the front-end site. The result is one single, cacheable file for your users, and you can still refer directly to the jQuery library from the back-end.</li> </ul> <h3>Summary</h3> <p>I hope this helps you avoid the annoyances of interrupted work or embarrassing beachballing on stage if you’re trying to work with jQuery as part of the ExpressionEngine Control Panel. It’s a fantastic library and extension; if it were not for this one little issue it would be perfect.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/update.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-08-22T09:14:43+0000">Aug <span>22</span></abbr></div> <div id="content"> <h1 class="entry-title">How to update ExpressionEngine when your system folder is outside the web root</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>9:14am <i>on</i> Saturday 22nd August, 2009</dd> </dl> <p>While they make it <a href="http://expressionengine.com/docs/installation/masked_cp_access.html">possible for you to move your main ExpressionEngine installation folder outside of the web root</a>, EllisLab have neglected to allow for that possibility in their update scripts. This article shows you how to fix it with a couple of simple edits.</p> <p>Given that there is even <a href="http://expressionengine.com/blog/entry/web_security_is_a_three_edged_sword/" title="Web Security is a Three Edged Sword by Derek Jones">a blog entry on the EE site on the topic</a>, you might have thought it would be accounted for in the version update script packaged with each new version. Unfortunately though <a href="http://expressionengine.com/docs/installation/update.html">the update instructions</a> and the script itself ignore the possibility that you have moved your <code>/system/</code> folder outside of the web root.</p> <h2>How to update EE, revised</h2> <p>First, ignore the instruction to copy <code>system/update.php</code> into your existing <code>/system/</code> folder; instead, copy it into your web root folder (where your <code>admin.php</code> and <code>path.php</code> files are). It is now reachable at <strong>www.example.com/update.php</strong> - but it doesn’t work because the paths are wrong.</p> <h3>Editing update.php</h3> <p>Open <code>update.php</code> in your text editor. We are going to import the path information used by the rest of the site and update the paths needed for the update to run.</p> <p>Add this line to the start of the file (beneath the copyright message):</p> <pre class="code"> require_once(’./path.php’); </pre> <p>Next, at the top of the file there are a series of definitions:</p> <pre class="code"> define(‘EXT’, ’.’.$path[‘extension’]); define(‘PATH’, ’./’); define(‘PATH_DB’, ’./db/’); define(‘PATH_CORE’, ’./core/’); define(‘PATH_LANG’, ’./language/’); define(‘PATH_MOD’, ’./modules/’); define(‘PATH_EXT’, ’./extensions/’); define(‘PATH_PI’, ’./plugins/’); define(‘CONFIG_FILE’, ‘config’.EXT); </pre> <p>Let’s update them to use the correct path information:</p> <pre class="code"> define(‘EXT’, ’.’.$path[‘extension’]); define(‘PATH’, $system_path); define(‘PATH_DB’, $system_path . ‘db/’); define(‘PATH_CORE’, $system_path . ‘core/’); define(‘PATH_LANG’, $system_path . ‘language/’); define(‘PATH_MOD’, $system_path . ‘modules/’); define(‘PATH_EXT’, $system_path . ‘extensions/’); define(‘PATH_PI’, $system_path . ‘plugins/’); define(‘CONFIG_FILE’, $system_path . ‘config’.EXT); </pre> <p>We’re almost done, but there’s just one more place where the path is hardcoded and needs to be fixed. In the <code>Update()</code> class method <code>update_manager()</code>, we need to use the path information one more time. Change these lines:</p> <pre class="code"> function update_manager() { global $DB; </pre> <p>Here's the revised version:</p> <pre class="code"> function update_manager() { global $DB, $system_path; $this->update_dir = $system_path . ‘updates/’; </pre> <p>We’re just overriding the path to the update directory with the correct path.</p> <p>Now load the update script at <strong>www.example.com/update.php</strong> to run the update with no problems, despite your <code>/system/</code> root not being where it <em>‘should’</em> be.</p> <h2>This should be in the EE trunk</h2> <p>Hopefully EllisLab will eventually make this hacking unnecessary and incorporate these changes into the official release, but in the meantime if you’re a security-conscious developer I hope this was useful.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/typewriter.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-06-17T13:44:54+0000">Jun <span>17</span></abbr></div> <div id="content"> <h1 class="entry-title">ExpressionEngine: Scrippets for FieldFrame, too</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a>, <a href="http://www.thewatchmakerproject.com/category/C13/film" rel="tag">Film</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>1:44pm <i>on</i> Wednesday 17th June, 2009</dd> </dl> <p>Following yesterday’s work to convert the Scrippets plugin for ExpressionEngine, it was simple to turn it into a new field type for <a href="http://brandon-kelly.com/apps/fieldframe">Brandon Kelly’s excellent FieldFrame extension</a>.</p> <p>If you’ve not used FieldFrame before, you are missing out on some serious EE goodness. It extends the default set of field types, including many straightforward fields—checkboxes, radio buttons, etc.—plus many, many more contributed by other developers.</p> <h2>And now there’s one more</h2> <p>The Scrippet field type works in exactly the same way as <a href="http://www.thewatchmakerproject.com/blog/new-expressionengine-plugin-scrippet/">the standalone plugin</a>, except that you enter your plaintext script content in its own separate field in the Control Panel.</p> <p>Then you simply refer to your field (by whatever name you have given it in Custom Fields) in your template, and the formatting is automatically applied:</p> <pre class="code"> {exp:weblog:entries weblog=“blog”} <h2>{title}</h2> {script_extract} {/exp:weblog:entries} </pre> <p>The parameters are the same as for the <code>{exp:scrippet}</code> plugin (see <a href="http://www.thewatchmakerproject.com/blog/new-expressionengine-plugin-scrippet/">my previous entry</a> for details), and you also need to either link to or include the <abbr title="Cascading Style Sheets">CSS</abbr> from <code>scrippets.css</code> as well.</p> <p>It works as part of the <a href="http://wiki.github.com/brandonkelly/bk.fieldframe.ee_addon/ff-matrix">FF Matrix</a> fieldtype as well, so you can post tables of script snippets to your heart’s content. Grab the files from GitHub as per normal.</p> <div class="github"> <h3><a href="http://github.com/matthewpennell/mgp.ee_scrippet_fieldframe.ee_addon/">Visit GitHub to download files</a></h3> </div> <p><strong>What is GitHub?</strong> GitHub is a web application that uses the version control software Git to allow its members to manage their code online. I am hosting the files for this article there so that any bugfixes or improvements I make can be found in one central location.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/typewriter.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-06-16T11:27:45+0000">Jun <span>16</span></abbr></div> <div id="content"> <h1 class="entry-title">New ExpressionEngine Plugin: Scrippet</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a>, <a href="http://www.thewatchmakerproject.com/category/C13/film" rel="tag">Film</a>, <a href="http://www.thewatchmakerproject.com/category/C12/writing" rel="tag">Writing</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>11:27am <i>on</i> Tuesday 16th June, 2009</dd> </dl> <p>Here’s a little piece of formatting niceness that will be handy for anyone with an interest in film or scriptwriting. The Scrippet plugin converts your plain text screenplay extracts into nicely-formatted script blocks.</p> <p>Based on <a href="http://johnaugust.com/archives/2008/scrippets-php-and-a-call-to-coders">an original idea</a> by screenwriter <a href="http://www.imdb.com/name/nm0041864/" title="John August on IMDb">John August</a>, most of the work on <a href="http://scrippets.org/">Scrippets</a> was done by <a href="http://equinox-of-insanity.com/">Nima Yousefi</a> for the original Wordpress plugin. I’ve simply taken that code and adapted it for use in ExpressionEngine.</p> <div class="update"><strong>Update 17/06:</strong> I have now also converted the Scrippet formatting into a new fieldtype for Brandon Kelly’s FieldFrame extension, so you can enter scripts directly into the Publish page. See <a href="http://www.thewatchmakerproject.com/blog/expressionengine-scrippets-for-fieldframe-too/">this blog entry</a> for full details.</div> <h2>Installation and Usage</h2><p> </p> <p>To install the Scrippet plugin, grab the plugin and stylesheet from <a href="http://github.com/matthewpennell/mgp.ee_scrippet.ee_addon/">my GitHub repository</a>. Copy the <code>pi.scrippet.php</code> file into your <b>/plugins</b> folder.</p> <p>Unfortunately, ExpressionEngine doesn’t offer an easy way to dynamically load additional stylesheets, so for now you can either attach the <code>scrippets.css</code> stylesheet to your template, or copy-and-paste the <abbr title="Cascading Style Sheets">CSS</abbr> rules from that file into your existing site stylesheet.</p> <p>To use the plugin, wrap your unformatted screenplay extract in <code>{exp:scrippet}{/exp:scrippet}</code> tags:</p> <p><img src="http://www.thewatchmakerproject.com/images/uploads/scrippet.gif" class="col five" alt="Formatted scene" title="The output of the exp:scrippet block, formatted according to the standard screenplay rules"></p> <pre class="code"> {exp:scrippet} INT. CARGO LOCK The Queen spins at the sound of door motors behind her. The parting doors REVEAL an inhuman silhouette standing there. Ripley steps out, WEARING TWO TONS OF HARDENED STEEL. THE POWER LOADER. Like medieval armor with the power of a bulldozer. She takes a step…the massive foot CRASH-CLANGS to the deck. She takes another, advancing. Ripley’s expression is one you hope you’ll never see… Hell hath no fury like that of a mother protecting her child and that primal, murderous rage surges through her now, banishing all fear. RIPLEY Get away from her, you bitch! {/exp:scrippet} </pre> <h3>Parameters</h3> <p>There are a few optional parameters available to use with the <code>{exp:scrippets}</code> tag:</p> <ul> <li><code>width</code> - Sets the width (in pixels) of your scrippet block</li> <li><code>bg_color</code> - Sets the background colour of the block; you can use hex values, colour keywords, or RGBa values</li> <li><code>text_color</code> - Sets the text colour; possible values as per <code>bg_color</code></li> <li><code>alignment</code> - Valid values are <code>left</code> or <code>center</code>; blocks with <code>alignment=“center”</code> will be centered on the page</li> </ul> <p>The default appearance of the scrippet blocks is black text on a pale yellow background, 400 pixels wide.</p> <h3>Formatting options</h3> <p>Styles are applied to the text according to how it is formatted:</p> <ul> <li><strong>Scene headings</strong> start with either “INT”, “EXT” or “EST” and are all capitalised</li> <li><strong>Transitions</strong> end with a colon (e.g. “CUT TO:”) or can be a few hard-coded other options (e.g. “FADE TO BLACK”)</li> <li><strong>Characters</strong> will be in ALL CAPS followed by a single new-line</li> <li><strong>Parantheticals</strong> will be wrapped in parentheses, obviously</li> <li><strong>Dialogue</strong> comes straight after a character or paranthetical element</li> <li>and <strong>Action</strong> is anything that doesn’t fall into any of the above categories</li> </ul> <p>You can also include some additional formatting by using standard Textile markup for <code>**bold text**</code>, <code>*italicised text*</code> or <code>_underlined text_</code>.</p> <h2>Future developments</h2> <p>Another obvious use-case for this would be as a new field type for Brandon Kelly’s <a href="http://brandon-kelly.com/apps/fieldframe">FieldFrame extension</a>, and when I have a few spare minutes I’ll throw that together too.</p> <div class="github"> <h3><a href="http://github.com/matthewpennell/mgp.ee_scrippet.ee_addon/">Visit GitHub to download files</a></h3> </div> <p><strong>What is GitHub?</strong> GitHub is a web application that uses the version control software Git to allow its members to manage their code online. I am hosting the files for this article there so that any bugfixes or improvements I make can be found in one central location.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/ftpssh.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-06-12T15:51:44+0000">Jun <span>12</span></abbr></div> <div id="content"> <h1 class="entry-title">Review: FTPOnTheGo and TouchTerm SSH for iPhone</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C16/freelancing" rel="tag">Freelancing</a>, <a href="http://www.thewatchmakerproject.com/category/C18/iphone" rel="tag">iPhone</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>3:51pm <i>on</i> Friday 12th June, 2009</dd> </dl> <p>During our last family holiday, any serious client website issues meant a quick trip to the nearest town and an hour in the public library to use the creaky old PC they helpfully provide for vacationing web designers. This year, though, I can work directly on the server with my two new favourite iPhone apps: <a href="http://www.ftponthego.com/">FTPOnTheGo</a> and <a href="http://www.jbrink.net/touchterm/">TouchTerm SSH</a>.</p> <h2>FTPOnTheGo</h2> <p><img src="http://www.thewatchmakerproject.com/images/uploads/ftponthego.png" class="col six" alt="FTPOnTheGo screenshots" title="Browsing folders and editing files with the iPhone's FTPOnTheGo application"></p> <p>The file handling capabilities of the iPhone have always been a little underwhelming, making the killer feature of <a href="http://www.ftponthego.com/">FTPOnTheGo</a>—downloading, editing, and uploading files—that much more impressive. But let’s start at the beginning.</p> <p>The app sensibly opts to use the standard iPhone <acronym title="User Interface">UI</acronym> library rather than introduce their own graphical lexicon, so it all feels very natural and the learning curve is shallow. An unexpected addition is the presence of short YouTube “how to” videos available right in the app, which serve to introduce the basics to new users.</p> <p>Simply provide a server address, username and password (or select from your bookmarked connections) to connect to a server either by <acronym title="File Transfer Protocol">FTP</acronym> or <acronym title="Secure File Transfer Protocol">SFTP</acronym>. Once connected, you can browse through the files and folders; sort by name, size or date; upload pictures from your phone; create new files or folders; and rename, delete, move or save existing files. It’s also possible to use your iPhone as a Web or FTP server and share files from it, although I haven’t needed to use that feature yet.</p> <p>But the real lifesaver for any web developer away from his desk is the file editing. Click a file then click the ‘Edit’ button to launch a basic text editor with support for Find/Replace, encoding changes, and usable in either portrait or landscape mode. When you’re finished editing, simply click ‘Save’ to upload the file back to the server.</p> <p>While it’s obviously not the optimal device on which to code (and I’d like to see a more customised keyboard to make it easier to access commonly used keys such as angle brackets, plus the obvious enhancement of syntax highlighting) the text size is small enough to fit a sensible amount of text on the screen, and the ‘go to line number’ feature makes navigating large files easy enough.</p> <p>The app is also chock-full of user settings, including a choice of folder icons (Vista, XP, Mac or “Old School”), fine control over the font used for file editing, and several granular security options. You can also set a master password for the whole app to protect your login information.</p> <h2>TouchTerm SSH</h2> <p><img src="http://www.thewatchmakerproject.com/images/uploads/touchtermssh.png" class="col five" alt="TouchTerm SSH screenshots" title="The keyboard and main keys are displayed over the text entry area in TouchTerm SSH"></p> <p>Of course sometimes simple FTP access isn’t enough to solve a server problem—what if you need to stop or start a service, or… well, my ssh-fu doesn’t extend to much beyond that, but for those who need it, the ability to connect directly to your server and run commands remotely might be a lifesaver.</p> <p>There are a handful of SSH apps available on the iTunes App Store, but luckily the best is also the cheapest. <a href="http://www.jbrink.net/touchterm/">TouchTerm SSH</a> allows you to connect through either a stored connection or “One-Time Connection,” and also offers the option to either save or forget passwords. It also includes management of key pairs if you prefer to use those rather than passwords.</p> <p>Connecting presents you with the standard monospaced-font-on-black Terminal/Console interface, with some neat iPhone-specific features. As you might expect the handset can be rotated to use in either landscape or portrait mode. Keys that you often need access to—Ctrl, Alt, Tab, Esc, the arrow keys—are presented along the top of the screen, or can be displayed permanently as a transparent overlay, allowing you to see what you’re typing as you work. The keyboard also works in the same way, and is surprisingly usable even with multiple lines of text behind it.</p> <p>There’s a bit of a latency problem while typing (as there can sometimes be over <acronym title="Secure Shell">SSH</acronym> normally), but there’s also a fantastic setting that allows you to buffer your command(s) in a standard iPhone textbox before sending the whole line over the wire. It also maintains a history of the text you have sent, so accessing previous complicated commands is a doddle.</p> <p>There’s not much more that can be said about an <acronym title="Secure Shell">SSH</acronym> client, except to mention that TouchTerm also boasts an impressive array of settings, including fine control over the appearance of the various elements, and security/encoding settings.</p> <h2>These apps are great value for money</h2> <p><a href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=286623227&mt=8" title="TouchTerm SSH on the iTunes App Store">TouchTerm SSH</a> is only £0.60 ($0.99 on the US store), which amazes me considering the kind of people who are likely to need a fully featured <acronym title="Secure Shell">SSH</acronym> app. <a href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=286479936&mt=8" title="FTPOnTheGo on the iTunes App Store">FTPOnTheGo</a> is a little pricier at £3.99 (probably $5.99 in the <acronym title="United States">US</acronym>, at a guess), but for the peace of mind they bring when away from home they are definitely recommended for any iPhone-touting web developer.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/speed.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-05-08T14:59:18+0000">May <span>08</span></abbr></div> <div id="content"> <h1 class="entry-title">Benchmarking Array Indexes for String Comparison</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C17/php" rel="tag">PHP</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>2:59pm <i>on</i> Friday 8th May, 2009</dd> </dl> <p>I’ve been doing some work recently on a custom search engine and, as you might imagine, that involves a fair amount of string comparison and manipulation. When the first iteration of the search module was returning results after eleven minutes I started looking seriously at <acronym title="PHP: Hypertext Preprocessor">PHP</acronym> and MySQL optimisations; queries are down to a few seconds now, but there are still savings to be made, and this week I’ve been testing the various ways to compare parts of strings.</p> <h2>Reducing Function Calls</h2> <p>My basic goal was to reduce the number of function calls, particularly those within large loops. Everyone knows tricks like setting the length of a loop outside of the actual check statement, and if you’ve read up on any <a href="http://www.phpbench.com/">PHP benchmarking</a> you’ll know that some forms of loops are quicker than others:</p> <pre class="code"> // This is bad for ($x = 0; $x < count($myArray); $i++) { // Do something } // This is better for ($x = 0, $size = count($myArray); $x < $size; $i++) { // Do something } // This is best $x = 0, $size = count($myArray); while ($x < $size) { // Do sometthing $x++; } </pre> <p>So my assumption was that removing function calls equals faster code. My loops were pretty well optimised—what about my string comparisons?</p> <h3>String Comparison Functions</h3> <p>I needed to compare subsections of strings, so I was using a lot of <code>substr()</code>, but I realised that where I knew the position of the start and end of the substring, I could use array indexes instead! So this:</p> <pre class="code"> if (substr($str, 0, 2) === $test) { ... } </pre> <p>Became this:</p> <pre class="code"> if ($str[0] . $str[1] === $test) { ... } </pre> <p>After congratulating myself for discovering this handy shortcut and optimisation trick—getting rid of that function call had to be faster, right?—I decided I should probably check that it was actually the improvement I assumed it was.</p> <h3>Benchmarking Results</h3> <p>The results are actually surprising. In tests, the <code>substr()</code> call is actually <em>faster</em> for strings of three or more letters; using pseudo-array indexes is only really worth doing if you’re comparing at most one or two characters.</p> <p>It surprised me that the concatenation operations were so much slower than the <code>substr()</code> function call (at least 50% slower)—I was really expecting it to be a much faster way of comparing strings.</p> <p>So, the lesson is that array indexes are useful for strings, but only really when you’re comparing a single character (where you can see a drop in execution time of around two-thirds)—otherwise, stick to <code>substr()</code>.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/grace-hopper.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-03-24T15:34:29+0000">Mar <span>24</span></abbr></div> <div id="content"> <h1 class="entry-title">Ada Lovelace Day: Grace Hopper</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C1/Blogging" rel="tag">Blogging</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>3:34pm <i>on</i> Tuesday 24th March, 2009</dd> </dl> <p>When I signed the pledge for <a href="http://findingada.com/">Ada Lovelace Day</a> and agreed to publish a blog post on an influential woman in technology on March 24th, it seemed like a good idea. Easy enough to achieve, and something I could contribute to, however indirectly, for my daughters.</p> <p>This was a rather rash decision, as it turns out; now on the day itself, I find myself struggling to find a suitable subject.</p> <p>It is not as if I do not know any women working in technology. There are plenty of women that I have met or worked with; off the top of my head, any one of <a href="http://pixelingo.com/" rel="friend colleague">Carolyn</a>, <a href="http://www.disambiguity.com/" rel="friend met">Leisa</a>, <a href="http://www.thatcanadiangirl.co.uk/" rel="friend met colleague">Vero</a>, <a href="http://www.lealea.net/" rel="friend met colleague">Lea</a>, <a href="http://veerle.duoh.com/" rel="contact met colleague">Veerle</a>, <a href="http://veerle.duoh.com/" rel="friend met">Glenda</a> or <a href="http://molly.com/" rel="acquaintance met">Molly</a> would probably make a perfectly good subject. But for me the sticking point is the “in technology” part—being a web designer (or usability person, or content person, or just a web maven in general) just doesn’t feel like it’s really “technology”.</p> <p>So I figured I would buck the trend that has seen people like <a href="http://www.pixeldiva.co.uk/admires/these-women/" rel="friend met colleague">Ann</a> and <a href="http://www.wait-till-i.com/2009/03/24/ada-lovelace-day-women-in-technology-i-admire/" rel="acquaintance colleague">Christian</a> blog about their contemporaries, and instead look back at someone who had an impact in the tech sector when it was in its infancy.</p> <h2>The Mother Of Computers</h2> <p><strong>“Amazing” Grace Hopper</strong> was a maths graduate and teacher at Vassar College in NY. The first woman to ever earn a Ph.D. in Mathematics from Yale, she left her comfortable job during the war to volunteer with the US Navy, and it was there that she made her mark on the future of computing.</p> <p>Hopper was one of the first programmers to work on the new <a href="http://en.wikipedia.org/wiki/Harvard_Mark_I">Harvard IBM Mark I computer</a>, a 50-foot-long behemoth capable of a staggering <em>three calculations per second</em> (!), and after the war she opted to stay on at Harvard and continue working in the nascent programming field. It was while working on the new <a href="http://en.wikipedia.org/wiki/UNIVAC_I">UNIVAC</a> computer that she developed the first ever language compiler, which later became the programming language COBOL. Hopper’s idea was that programs could be written in a language closer to English than machine code or assembly language.</p> <p>Later she drove the implementation of standards for testing computer systems and languages (yay, standards!) that were later adopted and administered by the National Office of Standards and Technology.</p> <p>Aside from the delicious irony of her win as the first “Man of the Year” award from the Data Processing Management Association in 1969, Grace Hopper also has an <a href="http://awards.acm.org/hopper/" title="The Grace Murray Hopper Award for Outstanding Young Computer Professionals">annual award</a>, a <a href="http://en.wikipedia.org/wiki/USS_Hopper_(DDG-70)" title="The USS Hopper, obviously">ship</a>, a <a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Grace+Hopper+Avenue,+Monterey,+California&sll=37.0625,-95.677068&sspn=34.808514,78.046875&ie=UTF8&z=16" title="Grace Hopper Avenue is in Monterey, California">road</a>, a <a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=%22grace+murray+hopper+park%22,+arlington,+virginia&sll=39.098095,-76.923523&sspn=1.014605,2.438965&ie=UTF8&ll=38.861382,-77.063577&spn=0.004177,0.009527&t=h&z=17" title="Grace Murray Hopper Park is in Arlington, Virginia">park</a> and a data processing centre named after her. The official advisory council on the recruitment and retention of women at <a href="http://www.microsoft.com/">Microsoft</a> is named “Hoppers” in her honour, and she has been called “The mother of computers”—but, if anyone has heard of her, it is usually because of one particular event that occurred relatively early in her career.</p> <h3>The first computer bug</h3> <p>While working at Harvard on the <a href="http://en.wikipedia.org/wiki/Harvard_Mark_II">IBM Mark II</a>, a moth was found to be stuck in one of the relays that formed part of the machine, causing her to remark that they were “debugging” the system. While it is not certain that the term <em>computer bug</em> is solely attributable to Hopper, she certainly brought the term into popular usage. (<a href="http://en.wikipedia.org/wiki/File:H96566k.jpg">The moth</a> is still on display in the group’s log book at the Smithsonian.)</p> <p>Grace Hopper died in 1992 at the age of 85. Almost until the end of her life, she was active lecturing and speaking at universities and computer seminars on the importance of change. As she said, “the most damaging phrase in the language is ‘We’ve always done it this way.‘“</p> <blockquote><p>“Our young people are the future. We must provide for them. We must give them the positive leadership they’re looking for ... You manage things; you lead people.”</p></blockquote> <p>[Sources: <a href="http://en.wikipedia.org/wiki/Grace_Hopper">Wikipedia</a>, <a href="http://www.history.navy.mil/bios/hopper_grace.htm">Biographies in Naval History</a>. Photos from Wikipedia.]</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/6th-st.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-03-20T10:01:57+0000">Mar <span>20</span></abbr></div> <div id="content"> <h1 class="entry-title">South By South West 2009</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C10/sxsw" rel="tag">SXSW</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>10:01am <i>on</i> Friday 20th March, 2009</dd> </dl> <p>Thanks to a four-hour layover in Dallas Fort Worth, I’m able to take the opportunity to write up my notes and thoughts on the rest of 2009’s <a href="http://www.sxsw.com/">South By South West</a> while it’s still fairly fresh in my mind. Hopefully a lack of sleep and too much coffee will not overly affect my, uh, you know. That thing. Being good. With words.</p> <h2>Saturday (Day 2)</h2> <p>Friday was a late one after <a href="http://superfluousbanter.org/" rel="friend met colleague">Dan Rubin</a>‘s <a href="http://watchmenmovie.warnerbros.com/">Watchmen</a> outing (despite an automatic knee-jerk reaction to any deviations from the comic book, I actually really enjoyed it; I want to see it again before giving a full review, though). The weather wasn’t great either—cold and rain I have at home, Austin!—but once safely inside the Austin Convention Center, the upgraded infrastructure coped admirably well with the 10,000 attendees’ wifi requirements.</p> <p>The afternoon keynote, by <a href="http://www.zappos.com/" title="You can call them to order pizza!">Zappos</a> <acronym title="Chief Executive Officer">CEO</acronym> Tony Hsieh, was extremely inspiring, although guaranteed to frustrate anyone without a direct line to the people able to really drive the kind of change described by Hsieh and implemented by him at Zappos. The stories he told about how their staff live and breathe the company culture and values, and how the steps that his team have taken to build a brand that will bring happiness, were great, and once the video is up on <acronym title="South By South West">SXSW</acronym> it should be required viewing for company MDs anywhere.</p> <p>The worst panel I saw this year was <em>Designing For Irrational Behaviour</em>, which was oddly pitched between interface design talk and psychology lecture. The self-confessed <a href="http://www.peterwhybrow.com/">tech noob college professor</a> would have been great to listen to in the right context (i.e. college), but really struck a bum note for most of the attendees in the panel; I wasn’t alone in feeling bad for the panelists as their room haemorrhaged people throughout the scheduled hour.</p> <p>I had assumed that <em>Building Your Brand</em> would have been at least a little relevant for someone looking for business brand tips, but instead it was purely focused on social media personal brand management. I seemed to be in the minority by not having a clue who any of the people up on stage were (okay, I know of Loic Le Meur through the <a href="http://LeWeb.net/">LeWeb</a> conference, but by name only), but it was an entertaining panel anyway—not least due to the presence of live <a href="http://search.twitter.com/">Twitter search</a> up on the jumbotron, allowing both those in the audience and around the world to participate and/or trade insults in real-time. I even got to join in—well, you can’t let <a href="http://twitter.com/chrisbrogan" title="Apparently I should know who this is?">someone</a> get away with a statement like “Twitter is the new phone” without <a href="http://twitter.com/matthewpennell/status/1329042275" title="Oops, forgot my parents read my Twitter updates via Facebook…">calling them on it</a>, can you?</p> <h2>Sunday (Day 3)</h2> <p>Whenever I start to feel guilty about sunning myself in Austin on the company tab, I remind myself that I’m voluntarily spending my entire weekend working. It’s 10am on Sunday, but I’m learning about <em>Interface Lessons From Games</em>. Commitment, right? </p> <p>There are some talks that you just know are going to be great, and <a href="http://www.uie.com/" rel="met">Jared Spool</a> never fails to deliver. His <em>Journey To The Center Of Design</em> show, complete with <a href="http://www.flickr.com/photos/stalelife/3363422080/">human bell curves</a> and a bold takeaway (“User Centered Design is dead” according to Jared), was a definite highlight of the conference.</p> <p>I also sat in on the <em>iPhone Development</em> panel, hoping to learn how easy it might be to build a native application. The Objective-C development platform doesn’t look too depressingly complex, and the <acronym title="Integrated Development Environment">IDE</acronym> makes it easy to drag-and-drop interface elements to wire up your app quickly (ah, now I see where <a href="http://280atlas.com/" title="Atlas by 280 North">Atlas</a> comes from!), but it was disappointing to hear that effectively everything they talked about is probably going to become redundant as soon as Apple releases the next version of the <acronym title="Software Development Kit">SDK</acronym>. Still, it’s an area I plan to investigate in the medium term.</p> <p>After failing to get into any of the smaller panels in the afternoon, we ended up listening to <a href="http://garyvaynerchuk.com/">Gary Vaynerchuk</a> do his thing in the large ballroom. I love what the guy does, and completely respect his commitment to his passion, but I don’t think I could deal with him in person every day…</p> <h3>(Some) Geeks (kind of) Love Bowling</h3> <p>My third year at <a href="http://avalonstarevents.com/abx2009/"><acronym title="South By South West">SXSW</acronym> bowling</a> (and I believe its fourth year overall) was substantially more subdued than past events, with barely half the lanes in use and a much smaller concentration of geeks than last year. It was a pity that it was up against so many other parties that night (including the Facebook and Tumblr parties), and I hope that <a href="http://bryanveloso.com/" rel="friend met colleague">Bryan</a> can rebuild it to its previous heights for next year, as it was always a highlight of the week for me.</p> <h2>Monday (Day 4)</h2> <p>Now in its third year, the <em>Browser Wars</em> session was a frank exchange of views and opinions by representatives of Mozilla, Opera, Chrome and Internet Explorer. The moderator asked some tough questions, particularly of <a href="http://cwilso.com/" rel="contact met">Microsoft’s Chris Wilson</a>, but it was great to hear about the kinds of things that they are thinking about, particularly concerning how the specs get debated and agreed. The <acronym title="Internet Explorer">IE</acronym> discussion continued at the <em><a href="http://www.webstandards.org/"><acronym title="Web Standards Project">WaSP</acronym></a> Annual Meeting</em> where <a href="http://www.easy-designs.net/" rel="colleague">Aaron Gustafson</a> summed up the work that Microsoft have been doing this year concerning version targeting—Craig Cook asked why IE8’s “IE7 compatibility mode” is subtly different from IE7 itself, and apparently they (MS) plan to fix all the bugs still relating to those discrepancies.</p> <p>I had another great lunch at Iron Cactus with the guys from <a href="http://www.ellislab.com/">EllisLab</a> (plus a few other <acronym title="Expression Engine">EE</acronym> enthusiasts), and later <a href="http://www.derekallard.com/" title="The man to talk to aboot EE 2.0" rel="friend met colleague">Derek Allard</a> took us through a demo of <a href="http://www.expressionengine.com/index.php?affiliate=thewatchmakerproject">ExpressionEngine</a> 2.0. All I can say is, wow—it is so much more than just a port of <acronym title="Expression Engine">EE</acronym> 1.6 to the <a href="http://www.codeigniter.com/">CodeIgniter framework</a>. Some of the features they have added (many with great <a href="http://jquery.com/">jQuery</a>-powered interactions, Derek’s been busy!) are going to cut development time in half when you’re setting up that new <acronym title="Expression Engine">EE</acronym> project. I can’t wait until it comes out, and what I’ve seen means I really don’t care what the price uptick ends up being—I want this <acronym title="Content Management System">CMS</acronym>!</p> <p>After most of the regular sessions had ended, <a href="http://www.silverspider.com/" rel="friend met colleague">Alex Jones</a> from <a href="http://www.refreshaustin.org/">Refresh Austin</a> led a Core Conversation on <em>Energising Communities</em>. It was great to have the opportunity to participate as part of a smaller group, and there were some really interesting discussions with people from <a href="http://refreshdenver.org/">Refresh Denver</a> and some <acronym title="United Kingdom">UK</acronym>-based groups too.</p> <h2>Tuesday (Day 5)</h2> <p>If there is one word that sums up <acronym title="South By South West">SXSW</acronym> this year, that word would have to be: <a href="http://www.twitter.com/">Twitter</a>. In virtually every panel, every conversation, and on every corner, Twitter was being heralded as the saviour of the internet. Me? I don’t think it’s <a href="http://en.wikipedia.org/wiki/Jumping_the_shark" title="I don't think I'll ever feel comfortable using the phrase 'nuked the fridge', though">jumped the shark</a> quite yet, but it’s certainly putting on its water-skis.</p> <p>The <a href="http://www.guykawasaki.com/">Guy Kawasaki</a> keynote really didn’t appeal, so instead I went to the <em>Mad Men on Twitter</em> panel, which was really good. I’m a big fan of <a href="http://www.amctv.com/originals/madmen/">Mad Men</a>, and an admirer of what I had always assumed was a carefully managed media campaign on Twitter, so I was really surprised to learn that the people behind the multitude of <a href="http://wearesterlingcooper.com/">Mad Men characters living on the social network</a> have absolutely nothing to do with <span class="caps">AMC</span> or the <acronym title="Public Relations">PR</acronym> firm for the show. Of course, it’s no coincidence that many of the people who spotted the opportunity and value in twittering as their favourite characters work in the PR and marketing industry, but as <a href="http://www.twitter.com/PeggyOlson" rel="contact">@PeggyOlson</a> pointed out it’s still surprising that more production companies (or even writers) aren’t making use of Twitter to extend their brand and character development to a sub-section of fans.</p> <p>Apple’s <a href="http://cookiecrook.com/" title="@cookiecrook on Twitter" rel="contact met colleague">James Craig</a> closed out my final day of the conference with an interesting look at <em>Universal Design</em>, and a reminder that accessibility can often have a much bigger impact than simply making your site or app [more] usable for visitors with disabilities. Nothing new, perhaps, but sometimes you just need reminding that there are many simple steps that you can take to make life easier for people.</p> <h2>Summary</h2> <p>I had yet another great year in Austin; despite the initially poor weather it brightened up eventually, and staying <a href="http://www.pecanstreetlofts.com/" title="Pecan Street Lofts, 30 seconds from the Iron Cactus!">right on 6th St</a> (with <a href="http://boxofchocolates.ca/" title="Derek Featherstone" rel="friend met colleague">Derek</a>, <a href="http://paulstamatiou.com/" title="Paul Stamatiou" rel="friend met colleague">Paul</a> and <a href="http://immike.net/" title="Mike Malone" rel="friend met colleague">Mike</a>) really made for an ideal central location, convenient for both the Convention Center and the parties. Speaking of parties, yet again they were awesome—<a href="http://97bottles.com/">97bottles</a> Happy Hour, South By North West, and the <a href="http://www.mediatemple.net/go/order/?refdom=29digital.net">MediaTemple</a> closing party were chock-full with friends old and new. And I finally made it to a Breakfast with <a href="http://www.dustindiaz.com/" title="Mr Diaz" rel="friend met colleague">Dustin</a> at the <a href="http://www.ihop.com/"><acronym title="International House Of Pancakes">IHOP</acronym></a>, which ticks off another experience on my list of “quintessential American places to visit.”</p> <p>I should also thank <a href="http://interllectual.com/" rel="friend met colleague">Andrea Schwandt-Arbogast</a> for putting up with me for large amounts of the time and hanging out all week—you rock, and I probably won’t show that photograph to too many more people. ;)</p> <p>Roll on SouthBy 2010. [<a href="http://www.flickr.com/photos/lanbui/3363956356/">original photo</a> by Lan Bui]</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/sxsw.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-03-15T20:05:19+0000">Mar <span>15</span></abbr></div> <div id="content"> <h1 class="entry-title">SXSW 2009, Day 1</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C10/sxsw" rel="tag">SXSW</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>8:05pm <i>on</i> Sunday 15th March, 2009</dd> </dl> <p>Based on my experience of previous years, I was expecting the Friday of <acronym title="South By South West">SXSW</acronym> to be largely a waste of time—but this year actually featured some great sessions.</p> <h2>Everything you know about web design is wrong</h2> <p><a href="http://www.sapient.com/">Dan Willis of Sapient</a> drew parallels between the dawn of modern cinema (cf. <a href="http://www.imdb.com/title/tt0004972/">Birth of a Nation</a>, probably the only time you’re going to see the Ku Klux Klan at a web conference) and our industry’s slow discovery of the grammar of modern web design.</p> <p>It was largely interesting, and Willis did point to some emerging trends as possible candidates for how things could or should change—random voyeurism, self-aware content, user-created content, ambient awareness and experiential content—but ultimately had no answers. And who couldn’t have told us that the web is different from print?</p> <h2>Unnatural experiments in web design</h2> <p>In the same ballroom, <a href="http://paulannett.co.uk/">Paul Annett</a> from <a href="http://www.clearleft.com/">Clearleft</a> explored some of the cool hidden treasures people are putting into their designs. Starting from FedEx’s hidden arrow and the bear in the Toblerone logo, he ran through a laundry list of interesting techniques in use on the web; <a href="http://silverbackapp.com/">Silverback</a>‘s parallax scrolling backgrounds, <a href="http://www.webleeddesign.com/">We Bleed Design</a>‘s endless scrolling paint stripes, and <a href="http://www.skittles.com/">Skittles’</a> recent social media experimental homepage, among others.</p> <p>His point, ultimately, was that adding hidden treasures to your design can surprise and delight users, and the natural feeling of wanting to share your discovery naturally translates into high visibility and pseudo-viral marketing for your site or product.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/buffalo-billiards.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-03-10T16:04:00+0000">Mar <span>10</span></abbr></div> <div id="content"> <h1 class="entry-title">Meet me at SXSW</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C10/sxsw" rel="tag">SXSW</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>4:04pm <i>on</i> Tuesday 10th March, 2009</dd> </dl> <p>It’s been entertaining watching normally quiet blogs spring to life this week, as SXSW attendees try to remind the community that they have something worthwhile to say. Here’s one more.</p> <p>In fact I have very little to say about SXSW besides linking to my post from last year about <a href="http://v3.thewatchmakerproject.com/journal/457/how-to-disable-visual-voicemail-on-the-iphone-for-uk-users">how to disable visual voicemail on the iPhone</a>, in case any other UK iPhone owners have forgotten how to do it - and if you see me please come and say hello!</p> <h2>Party harty</h2> <p>Some of the places I plan to be are the <a href="http://97bottles.com/">97bottles</a> happy hour, the <a href="http://avalonstarevents.com/abx2009/">bowling</a>, <a href="http://upcoming.yahoo.com/event/1407972/" title="South By North West">SXNW</a>, the <a href="http://ellislab.com/sxsw">EllisLab party</a>, the <a href="http://upcoming.yahoo.com/event/1319186/">British Booze-Up</a> and the <a href="http://www.mediatemple.net/go/order/?refdom=29digital.net">MediaTemple</a> closing party, among others. I’ve got <a href="http://happyhour.org/">HappyHour.org</a> and <a href="http://austin.adactio.com/">Adactio Austin</a> safely installed on my phone, and will be having a closer look at <a href="http://www.chinwag.com/blogs/sam-michel/30-handy-resources-sxsw-interactive">this impressive list of resources</a> tomorrow before catching the early train to Heathrow first thing on Thursday morning.</p> <p>We’re staying right on 6th, in an apartment about a block from the convention centre - a significant improvement on my first South-By, when we made the mistake of selecting the Days Inn, over a mile-and-a-half up the interstate. I’m looking forward to some late mornings with such a short walk to get to the panels.</p> <p>See you all there!</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/community.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-03-04T17:18:13+0000">Mar <span>04</span></abbr></div> <div id="content"> <h1 class="entry-title">Four tips for making more money while staying local</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C15/business" rel="tag">Business</a>, <a href="http://www.thewatchmakerproject.com/category/C16/freelancing" rel="tag">Freelancing</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>5:18pm <i>on</i> Wednesday 4th March, 2009</dd> </dl> <p>John Nunemaker of <a href="http://orderedlist.com/">Ordered List</a> recently wrote about <a href="http://orderedlist.com/articles/is-the-web-recession-proof">the effect that the current state of the economy is having on his company</a>, and by extension the web development industry. Like many other colleagues, John and Steve have found that business has actually picked up over the last six months; however, one point that John made got my attention:</p> <blockquote><p>Every piece of work that we are commissioned to do comes from the reputations that Steve and I have built online. Geographically, our closest client to date was almost 100 miles away. Our clients find us online and we work remotely for them, which opens up far more opportunities than if we focused on the local chamber of commerce. Recently, someone asked me what the market was like in South Bend. My response was, “I don’t know.”</p></blockquote> <p>While there are some lucky companies or individuals that have the influence or reputation to work solely online, there are many of us who must rely on local connections and affiliations—and it’s that aspect of freelancing that I want to look at here, with four tips for improving your income while staying local.</p> <h2>1. Make local connections</h2> <p>The number one piece of advice for finding work locally is to make contact with as many other local web designers or developers as possible. They are not the competition, to be either resented (in the case of big, successful agencies) or pitied (omg they still use tables for layout?!); instead see every local web worker as a potential partner, outsourcer or contractor.</p> <p>By creating—or being part of—a local network of tried and trusted suppliers, you will be able to take on more, and more varied, work than when working alone. Finding other designers or developers with complementary skillsets to your own lets you confidently pitch for work outside your comfort zone, safe in the knowledge that your local “Flash guy” or “Joomla guru” is available to take on what you can’t handle. And by making yourself available to other local companies or individuals, especially if you are a specialist in a hard-to-find area, you will quickly find yourself swamped with requests.</p> <p>One of the best ways to get in touch with other web professionals in your area is to join a community group such as <a href="http://www.refreshingcities.org/">Refresh</a>. There are Refresh groups in many major cities across the US and UK, or there will be many other diverse user groups and professional associations meeting regularly in your area. And if there isn’t a group that suits your needs—why not start one yourself?</p> <p>I started <a href="http://www.refreshcambridge.org/">Refresh Cambridge</a> in 2006 when I moved to the city, and since then almost 300 people have joined the mailing list or attended the monthly sessions. And in return for the investment of my time and energy in setting up the group, I have made dozens of strong connections with other Cambridge-based freelancers, which in turn has led to several lucrative projects—work that I would never have landed without those local connections.</p> <p>Participating in a mailing list or speaking at a local event is also a great way to promote yourself as an expert in your field, so grab every opportunity to share your skills or help out other people—you never know what opportunities it might lead to.</p> <h2>2. Find your neighbours online</h2> <p>The second way to make sure you are never far away from what is happening nearby is to join your local community online. By that I mean you should find the online social spaces where your geographical neighbours can be found.</p> <p>I’m a big fan of <a href="http://www.twitter.com/">Twitter</a>, but until recently most of the people I followed and interacted with were not even on the same continent as me, let alone in the same city. That has now changed, and—partly as a result of Refresh and the naturally high geek quotient on Twitter—I am now also following and speaking with many people in my local area, both within and outside of the web industry. Simply by being myself I can effectively advertise my presence and areas of expertise to a local audience.</p> <p>Other opportunities for local online participation might be your town/city forum, local newspaper forums, or other local interest groups with web presences. I’m certainly not suggesting spamming your services all around your corner of the web, but a well-placed forum signature or consistently helpful advice about the web can position you as a local expert and the guy to turn to when anyone needs any design or development work carrying out.</p> <h2>3. Participate in offline community</h2> <p>Another way to make connections within your local community is to get involved with offline community projects or groups. Many business blogs recommend joining your local <a href="http://www.britishchambers.org.uk/">Chamber of Commerce</a> or <a href="http://www.rotary.org/">Rotary Club</a>, but there are often opportunities in other, less business-oriented, arenas. Attend classes at your local community centre or school, or volunteer with community groups or your local church, and you’ll meet many locals outside of your normal social circle, all of whom could be a potential client or referral.</p> <p>I volunteer as a governor at my local school, which—in addition to providing me with the chance to think about something other than web development once in a while—has introduced me to a circle of people, all of whom are active in their community, and all of whom now know their friendly neighbourhood web designer! These kinds of connections are worth far more than an expensive advert in your local newspaper; there’s nothing like word of mouth recommendations for bringing in work.</p> <p>(I should point out that none of these opportunities will work for you if you approach them at all cynically, with an eye for a fast buck—if you’re going to join groups or volunteer your time, do it for the right reasons. The fact that it may also help your business is a bonus, but it shouldn’t be your sole motivation.)</p> <h2>4. Search engine optimisation</h2> <p>Finally, what about some practical advice to finish with? If you want to attract local clients, there are some simple steps you should take to optimise your blog or portfolio site to capture local searches. As with any SEO, think about the sort of searches people might be performing. For me, this might mean:</p> <ul> <li>“cambridge web design”</li> <li>“web designers in cambridge”</li> <li>“cambridgeshire web development”</li> <li>“web design near cambridge”</li> </ul> <p>and various other arrangements of those key search terms. My website should include pages optimised for those various target phrases, but it’s also worth considering your alternative target market: other web designers. Include specific technologies and systems in your optimisation—and often there is much less competition for SERP’s places than for the more popular phrases above—and open yourself up to traffic from industry colleagues looking for help with your favourite platform.</p> <p>I experienced this myself recently, when I was contacted by a local information architect looking for some help with an <a href="http://www.expressionengine.com/">ExpressionEngine</a> project. He had searched online, and apparently I was the <em>only</em> relevant result for “expressionengine cambridge” (albeit via an old page that only mentioned EE in the footer). Needless to say, I will shortly be adding a dedicated ExpressionEngine entry to <a href="http://www.29digital.com/" rel="me">my freelance site</a> to ensure that I don’t miss any similar opportunities.</p> <h2>Summary</h2> <p>While it is true that the internet has broken down borders and removed the need to only deal with clients in your immediate area, there is still a great deal of opportunity to be had right outside your front door. By participating in both the online and offline life of your home town, you will open doors that can lead to rewarding—and profitable—relationships.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/capitals.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-02-13T09:46:36+0000">Feb <span>13</span></abbr></div> <div id="content"> <h1 class="entry-title">Really Simple JavaScript toTitleCase() Implementation</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C14/javascript" rel="tag">JavaScript</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>9:46am <i>on</i> Friday 13th February, 2009</dd> </dl> <p>Googling for a quick answer to a problem I was having, I noticed today that there are no really simple solutions listed in the <a href="http://www.google.co.uk/search?hl=en&q=javascript+totitlecase">search results</a> to a JavaScript implementation of <code>toTitleCase()</code> (the natural partner to the existing String methods <code>toLowerCase()</code> and <code>toUpperCase()</code>.</p> <p>So I made this one.</p> <h2>JavaScript TitleCase method</h2> <p>It’s not incredibly clever, but it does what I needed it to, and will probably be sufficient for your needs 90% of the time. The script extends the JavaScript <code>String</code> type with a new <code>toTitleCase()</code> method, which simply converts all the words in the string to their title-cased (i.e. the first letter is capitalised) equivalent. It effectively ignores words that are already upper-cased, and works fine with strings that include numbers.</p> <pre class="code"> String.prototype.toTitleCase = function () { var A = this.split(' '), B = []; for (var i = 0; A[i] !== undefined; i++) { B[B.length] = A[i].substr(0, 1). <span class="linewrap">»</span> toUpperCase() + A[i].substr(1); } return B.join(' '); } </pre> <p>Include the above snippet in your script somewhere, and you can then call the method in the same way as the other String functions:</p> <pre class="code"> var s = "This is a sentence."; var t = s.toTitleCase(); </pre> <p>Neat and simple, and sufficient for most of your JavaScript title-casing needs.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/cachebuster.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-02-04T08:06:42+0000">Feb <span>04</span></abbr></div> <div id="content"> <h1 class="entry-title">New ExpressionEngine extension: Cachebuster</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>8:06am <i>on</i> Wednesday 4th February, 2009</dd> </dl> <p>Ever find yourself explaining to a client (for the umpteenth time) how to press F5 so they can see the changes you just made to their site? If you’re being responsible in terms of performance by <a href="http://developer.yahoo.net/blog/archives/2007/05/high_performanc_2.html">setting far-future expiry dates</a> on your site assets, clearing the cache is often necessary to pick up minor tweaks to CSS or JavaScript - but rather than deal with yet another email from a confused client, wondering why their site layout is broken, I thought I’d find a way to automate this step.</p> <h2>Who ya gonna call?</h2> <p><a href="http://github.com/matthewpennell/mgp.ee_cachebuster.ee_addon/">Cachebuster</a> is a new ExpressionEngine extension that allows you to automatically append a variable to your external CSS or JavaScript files. Changing this variable when you update a file tells your visitor’s browser that it is a new file and should be re-downloaded, instead of using a cached version. For a full explanation, see <a href="http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/">Stefan Hayden’s post on CSS Caching from 2006</a>.</p> <h2>Installation</h2> <p>As this extension relies on hacking the core EE files, it is <strong>NOT</strong> recommended for mission-critical sites or applications. However, if you are confident that you can maintain the necessary hack (including when upgrading) you shouldn’t have any problems. (If you forget to upgrade, the extension will fail silently.)</p> <h3>Hacking a new hook</h3> <p>Open the <strong>/system/core/core.output.php</strong> file and locate the following lines (around line 272 in EE1.6.5):</p> <pre class="code"> /**—————————————————- /** Fetch the buffered output /**—————————————————-*/ echo $output; </pre> <p>We are going to add a new hook for our extension to allow us to manipulate the HTML output just prior to sending it to the browser. Add the new lines shown below:</p> <pre class="code"> /**—————————————————- /** Fetch the buffered output /**—————————————————-*/ // MGP Cachebuster 030209: Added new hook to do stuff with // the final browser output if (isset($EXT->extensions[‘before_display_final_output’])) { $output = $EXT->call_extension('before_display_final_ <span class="linewrap">»</span> output’, $output); } echo $output; </pre> <p>We also need to make sure we can refer to the <code>$EXT</code> object - scroll up to the start of the <code>display_final_output()</code> function (around line 94) and add <code>$EXT</code> to the declared globals on the first line of the function:</p> <pre class="code"> global $IN, $PREFS, $TMPL, $BM, $DB, $SESS, $FNS, $LOC, $EXT; </pre> <h3>Installing the extension</h3> <p>Installing the Cachebuster extension is exactly the same as installing any other extension:</p> <ol> <li>Copy the <code>ext.cachebuster.php</code> file into <strong>/system/extensions</strong></li> <li>Copy <code>lang.cachebuster.php</code> into <strong>/system/language/english</strong></li> <li>Visit your Extensions Manager and enable the new extension</li> </ol> <h3>Using the Cachebuster</h3> <p>When you visit the Settings page for the Cachebuster extension, you will see five fields:</p> <ul> <li><strong>Current version</strong> – This is the version number that will be appended to CSS or JS files to force visitors to load the latest version instead of a cached version</li> <li><strong>Apply version numbers to CSS files</strong> – Choose whether you want to control CSS files</li> <li><strong>CSS filenames</strong> – A comma-separated list of stylesheets you want to affect (either with or without the ”.css” extension)</li> <li><strong>Apply version numbers to JavaScript files</strong> – Choose whether you want to control JavaScript files</li> <li><strong>JavaScript filenames</strong> – A comma-separated list of external scripts you want to affect (either with or without the ”.js” extension)</li> </ul> <p>Every time you make a change to a CSS or JavaScript file and upload it to the live website, you can now login to the Cachebuster extension settings and increment the version counter. Any files flagged for inclusion will have that number appended to their filename:</p> <pre class="code"> <link rel=“stylesheet” type=“text/css” href=”/css/layout.css <span class="linewrap">»</span> ?v=42”> </pre> <h2>Feedback and bug reports</h2> <p>There are a few obvious drawbacks to this version 1.0 of the extension. The most obvious one is the need for a hack to the core EE files - hopefully EE2.0 will introduce new hooks we can use without the need to hack.</p> <p>The extension also appends the version number to <em>every</em> file (or at least those listed in the settings); this means that even if you have only edited one file, incrementing the version number will force visitors to download every file as if it were new. Of course, for true speed tweaks you should be concatenating your stylesheets and script files, so you should only have one or two external files at most.</p> <p>If you have any suggestions for how to improve Cachebuster, please either comment below or on the <a href="http://wiki.github.com/matthewpennell/mgp.ee_cachebuster.ee_addon">GitHub Wiki for Cachebuster</a>.</p> <div class="github"> <h3><a href="http://github.com/matthewpennell/mgp.ee_cachebuster.ee_addon/">Visit GitHub to download files</a></h3> </div> <p><strong>What is GitHub?</strong> GitHub is a web application that uses the version control software Git to allow its members to manage their code online. I am hosting the files for this article there so that any bugfixes or improvements I make can be found in one central location.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/rearwindow.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-01-31T15:47:22+0000">Jan <span>31</span></abbr></div> <div id="content"> <h1 class="entry-title">Show, don’t tell - Hitchcock’s Rear Window masterclass</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C13/film" rel="tag">Film</a>, <a href="http://www.thewatchmakerproject.com/category/C12/writing" rel="tag">Writing</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>3:47pm <i>on</i> Saturday 31st January, 2009</dd> </dl> <p>If you’ve ever opened up a book on screenwriting, one of the cardinal rules drummed into writers is: “Show, don’t tell.” Film is a visual medium — if you want to convey some information, it is far better to communicate that information visually than have a character spell out what you want the audience to know. (A truism exploited by Mike Myers in the <a href="http://www.imdb.com/find?s=all&q=austin+powers">Austin Powers films</a>, where all story exposition is delivered — with a straight face — by a character aptly named Basil Exposition.)</p> <p>Phyllis is afraid of dogs? Then write a scene where she has to deal with an overly friendly mutt — but definitely <em>don’t</em> have her mention to someone else: “Hey, you know what? I’m really frightened of dogs.” It sounds forced; unnecessary verbiage that could have been avoided through better writing.</p> <h2>Forty seconds of perfect cinema</h2> <p>Hitchcock was a master of visual storytelling, and there is no better example of this “show don’t tell” philosophy than the introductory shot of James Stewart in the classic <a href="http://www.imdb.com/title/tt0047396/">Rear Window</a>.</p> <div class="video"><p> </p><object width="450" height="338" data="http://vimeo.com/moogaloop.swf?clip_id=3026688&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1"> <param name="allowfullscreen" value="true"> <param name="allowscriptaccess" value="always"> <param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3026688&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1"> <embed src="http://vimeo.com/moogaloop.swf?clip_id=3026688&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed> <a href="http://vimeo.com/3026688">Rear Window opening scene - Show, Don’t Tell</a> from <a href="http://vimeo.com/user590173">Matthew Pennell</a> on <a href="http://vimeo.com">Vimeo</a> </object> </div> <p>With not a word of dialogue or voiceover, the audience has been told:</p> <ul> <li>Our hero’s name</li> <li>The most important aspect of his character (at least with respect to the plot) — a broken leg has confined him to a wheelchair</li> <li>How he sustained that injury, capturing a shot of a dramatic motor-racing crash</li> <li>Which tells us the type of man he is: a risk-taker</li> <li>What he does for a living, and how good he is at it — would an enthusiastic amateur have their photo on the cover of a Paris fashion magazine?</li> </ul> <p>Communicating all that information verbally, and in a way that didn’t seem forced or unnatural (<q>“Why, good morning Mr Jefferies — it won’t be long before you’ve recovered from that terrible accident at the racetrack where you broke your leg; you’ll be back to work as a famous risk-taking photographer in no time!”</q>), would have required several conversations with conveniently ignorant minor characters. Hitchcock manages it in forty seconds and one camera move.</p> <p>Genius.</p> <h3>If you’re interested in more Hitchock</h3> <p>I highly recommend the <a href="http://www.amazon.co.uk/Hitchcock-14-Disc-Box-Set/dp/B000BND224/thewatchmaker-21">Hitchcock Box Set</a>, which has fourteen of his greatest films — Vertigo, The Birds, Marnie, Frenzy, Topaz, The Trouble With Harry, Torn Curtain, Psycho, Family Plot, Saboteur, Shadow Of A Doubt, The Man Who Knew Too Much and Rope, in addition to Rear Window — and is available for an incredible sub-£20 on Amazon or in the shops. All the DVDs come with great extras, too.</p> <p>Or, if you want to improve your writing, I also recommend the <a href="http://onthepage.tv/podcast.php">On The Page podcast</a>, hosted by script consultant Pilar Alessandra. Each week Pilar and guests discuss various aspects of the “craft and business of screenwriting” and answer listeners’ questions. Despite the occasional <abbr title="Los Angeles">LA</abbr>-specific suggestions, it’s always an entertaining 45 minutes of discussion and advice.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/widget.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-01-26T14:26:47+0000">Jan <span>26</span></abbr></div> <div id="content"> <h1 class="entry-title">SXSW Countdown - a dashboard widget for OS X</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C11/macintosh" rel="tag">Macintosh</a>, <a href="http://www.thewatchmakerproject.com/category/C10/sxsw" rel="tag">SXSW</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>2:26pm <i>on</i> Monday 26th January, 2009</dd> </dl> <p>If you’re heading to Austin, Texas in March for geek spring break (otherwise known as the <a href="http://www.sxsw.com/interactive/">South By South West interactive</a> festival) you’re probably counting down the days already. What? You’d love to have something to help scratch that itch? Well, say no more - I have just the thing!</p> <h2>And it only took twenty minutes</h2> <p>Creating an OS X dashboard widget is simplicity itself. First, find <a href="http://www.mactricksandtips.com/2008/03/how-to-make-your-own-dashboard-widgets.html">some helpful instructions</a> written by someone who know what they are doing. Next, open Dashcode and find that one of the pre-existing widgets is a countdown widget, meaning all you have to do is re-arrange the canvas elements and make some new graphics. Photoshop. Export. Rinse and repeat until satisfied with the result.</p> <h3>How to install your SXSW widget</h3> <p>If you’re not using Mac OS X, why are you still reading? There’s nothing for you here.</p> <p>Mac users - download the archive below, unzip it, and double-click the <code>SXSWCountdown.wdgt</code> file to install it on your Dashboard. Position it front-and-centre, and check back regularly to watch the days tick down!</p> <div class="download"> <h3><a href="/downloads/SXSWCountdown.zip">Download ZIP (152KB)</a></h3> </div> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/books.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-01-17T14:14:21+0000">Jan <span>17</span></abbr></div> <div id="content"> <h1 class="entry-title">Reading List 2008</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C9/books" rel="tag">Books</a>, <a href="http://www.thewatchmakerproject.com/category/C3/Personal" rel="tag">Personal</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>2:14pm <i>on</i> Saturday 17th January, 2009</dd> </dl> <p>This time last year (and with a little help from <a href="http://www.allconsuming.net/" title="Track your book consumption, among other things, online">All Consuming</a>) I looked back at the books I had read over the past twelve months. 2007’s haul was <a href="http://v3.thewatchmakerproject.com/journal/445/reading-list-2007">an impressive forty-four books</a>; in 2008, however, I overdosed on door-stop fantasy novels bringing the total down to a less respectable twenty-six.</p> <h2>No Stalgia</h2> <p>Unlike last year, I did not re-visit <em>any</em> old favourites this time. I also read very few non-fiction books (at least compared to last time around). Here’s the full list.</p> <h3>Fiction</h3> <p>I’m still trying to fill the gaping classic literature-shaped holes in my reading record. The year started off well, with some Kingsley Amis and Mary Shelley, but then somehow took a left-turn into modern lit before becoming bogged down in turgid epic fantasy.</p> <ul> <li>The Transit of Venus (Shirley Hazzard)</li> <li>Lucky Jim (Kingsley Amis)</li> <li>Last Exit to Brooklyn (Hubert Selby, Jr)</li> <li>Frankenstein (Mary Shelley)</li> <li>American Gods (Neil Gaiman)</li> <li>No Country For Old Men (Cormac McCarthy)</li> <li>Last Argument of Kings (Joe Abercrombie)</li> <li>Dead Air (Iain Banks)</li> <li>Atonement (Ian McEwan)</li> <li>Starship Troopers (Robert A Heinlein)</li> <li>Maskerade (Terry Pratchett)</li> <li>Little Brother (Cory Doctorow)</li> </ul> <h4>Comic books</h4> <p>Not very many graphic novels this year, but <em>Watchmen</em> is definitely on my reading list this year before the film comes out in March.</p> <ul> <li>1602 (Neil Gaiman)</li> <li>The Complete WildC. A. T.s (Alan Moore)</li> </ul> <h4>Enormo-fantasy novels by George RR Martin</h4> <p>I’m a huge fan of quasi-historical fantasy author Guy Gavriel Kay, and discussions of the “you might also like” variety on <a href="http://www.brightweavings.com/forums/home.htm">the official GGK forums</a> almost always turned up George RR Martin as a recommendation, so I finally took the plunge and dived into his epic “A Song Of Ice And Fire” series. And very good it is too.</p> <ul> <li>A Game of Thrones</li> <li>A Clash of Kings</li> <li>A Storm Of Swords Part 1: Steel And Snow</li> <li>A Storm Of Swords Part 2: Blood And Gold</li> <li>A Feast for Crows</li> </ul> <h3>Non-fiction & autobiography</h3> <p>A bit of web design, a little screenwriting, some drug-fuelled debauchery, every bit of science known to man, and the saviour of the 21st century…</p> <ul> <li>Building Findable Websites: Web Standards SEO and Beyond (Aarron Walter)</li> <li>Blink: The Power of Thinking Without Thinking (Malcolm Gladwell)</li> <li>Save The Cat! The Last Book on Screenwriting You’ll Ever Need (Blake Snyder)</li> <li>Web Form Design: Filling in the Blanks (Luke Wroblewski)</li> <li>The Principles of Beautiful Web Design (Jason Beaird)</li> <li>Slash (Slash)</li> <li>A Short History of Nearly Everything (Bill Bryson)</li> <li>Dreams From My Father (Barack Obama)</li> </ul> <h2>Top Picks</h2> <p>Without a doubt the best book I read last year was Bill Bryson’s <a href="http://www.amazon.co.uk/Short-History-Nearly-Everything/dp/0552997048/thewatchmaker-21">A Short History of Nearly Everything</a>, an exploration of just about every branch of science for the benefit of the uneducated everyman. It’s that rarest of things - an approachable science book; it does for science what <a href="http://www.amazon.co.uk/Sophies-World-Novel-History-Philosophy/dp/1857992911/thewatchmaker-21">Sophie’s World</a> did for philosophy.</p> <p>Aside from <em>Short History</em>, I also rated <a href="http://www.amazon.co.uk/Last-Exit-Brooklyn-Hubert-Selby/dp/0714531294/thewatchmaker-21">Last Exit To Brooklyn</a> (by Hubert Selby Jr, the author behind <em>Requiem For A Dream</em>); and Barack Obama’s first book, <a href="http://www.amazon.co.uk/Dreams-My-Father-Story-Inheritance/dp/1847673511/thewatchmaker-21">Dreams From My Father</a>, was also a good read - I hadn’t realised that it was written so long ago, when Obama was around my age in fact.</p> <p>For 2009 I’ll be tracking my reading as per usual, although I have a feeling I’ll be using the excellent <a href="http://www.readernaut.com/">Readernaut</a> this time around.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/html.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-01-06T10:35:42+0000">Jan <span>06</span></abbr></div> <div id="content"> <h1 class="entry-title">Fun and games and audio and video with HTML5</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C8/html" rel="tag">HTML</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>10:35am <i>on</i> Tuesday 6th January, 2009</dd> </dl> <p>If you’re the sort of person that enjoys poking around in other people’s code, you’ll have already noticed that this site is built with <span class="caps">HTML5</span>, the latest and greatest and very much still in-progress flavour of <span class="caps">HTML</span>. As <a href="http://adactio.com/journal/1540">Jeremy noted the other day</a>, that decision has placed me in pretty lofty company this week, with <a href="http://uxlondon.com/">UX London</a> and <a href="http://aneventapart.com/">An Event Apart</a> both launching in the last few days and boasting the same stripped down doctype.</p> <h2>Choosing HTML5 was an easy decision</h2> <p>There have been a fair few articles written on the impending ascendancy of <span class="caps">HTML5</span> as the de-facto standard for the web over the next few years. Back when I was curating Digital Web, we published an article comparing <a href="http://www.digital-web.com/articles/html5_xhtml2_and_the_future_of_the_web/"><span class="caps">XHTML2</span> and <span class="caps">HTML5</span></a> - the author, David Andersson, confidently declared that ”<span class="caps">HTML5</span> will be the future of the web”, and given the evidence it was difficult to disagree with him. A List Apart also published a <a href="http://www.alistapart.com/articles/previewofhtml5">preview of <span class="caps">HTML5</span></a>, and in September last year Ian Hickson gave <a href="http://ajaxian.com/archives/html5-demos">a fantastic demo of <span class="caps">HTML5</span> features</a> at Google.</p> <p>So, there seemed little reason not to make the move to <span class="caps">HTML5</span>, not least because as far as I could tell one could do so by simply starting to use a much easier-to-remember doctype - everything else was icing, and I could introduce actual <span class="caps">HTML5</span> features as and when they were supported by browsers. My <a href="http://www.29digital.com/">freelance portfolio</a> also uses <span class="caps">HTML5</span>, but is otherwise indistinguishable from <span class="caps">HTML5</span> - but for this site, I decided to kick the tyres on some of the new elements that are available.</p> <h2>Poetry ... makes familiar <object>s be as if they were not familiar.</h2> <p>Two of the new <span class="caps">HTML5</span> elements discussed in the <span class="caps" title="A List Apart">ALA</span> article were the <code><audio></code> and <code><video></code> tags.</p> <p>Until now, if you wanted to place audio or video in a web page, you had to use a combination of the <code><embed></code> tag (for Firefox) and the <code><object></code> tag (for Internet Explorer), together with some gobbledygook attributes to make sure the browser knew what you were trying to achieve.</p> <p><span class="caps">HTML5</span>, on the other hand, defines two straightforward, easy to comprehend tags, and I was drawn to the fact that one could place markup inside them which would be rendered <em>if the browser did not recognise the new element</em>. They have built-in graceful degradation! Here is the markup for the “standout tracks” on my recent <a href="http://www.thewatchmakerproject.com/blog/top-10-albums-of-2008/">top 10 albums</a> post:</p> <pre class="code"> <div class=“audio”> <h3>Standout track: Troublemaker</h3> <audio src=”/audio/Troublemaker.mp3” controls> <object type=“application/x-shockwave-flash” <span class="linewrap">»</span> data=”/audio/player.swf” id=“audioplayer3” <span class="linewrap">»</span> height=“24” width=“290”> <param name=“movie” value=”/audio/Troublemaker.mp3”> <param name=“FlashVars” value=“playerID=3& <span class="linewrap">»</span> soundFile=/audio/Troublemaker.mp3”> <param name=“quality” value=“high”> <param name=“menu” value=“false”> <param name=“wmode” value=“transparent”> <a href=”/audio/Troublemaker.mp3”>Download song (MP3)</a> </object> </audio> </div> </pre> <p>By placing a valid <code><object></code> Flash player inside the <code><audio></code> tag, and a simple link to download the <span class="caps">MP3</span> file inside <em>that</em>, the track will still be available to visitors using browsers that don’t support the new element, <em>and</em> browsers that don’t have Flash installed. And it’s all perfectly valid <span class="caps">HTML5</span>!</p> <p>(I’m using the <a href="http://www.1pixelout.net/code/audio-player-wordpress-plugin/">1 Pixel Out Audio Player Wordpress plugin</a> and the instructions for non-WP blogs by <a href="http://www.macloo.com/examples/audio_player/">Mindy McAdams</a> - I chose this one because I liked the way it looked and worked on the <a href="http://therissingtonpodcast.co.uk/" title="Tally ho!">Rissington Podcast</a>.)</p> <p><img src="http://www.thewatchmakerproject.com/images/uploads/audio_players.gif" alt="Audio player controls in Safari and Firefox" width="372" height="108" class="five col" title="Audio player controls in Safari and Firefox"></p> <p>The end result will differ <a href="http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers">depending on your browser of choice</a>. Opera and Safari 3.1 will use their native audio players, while Firefox, <span class="caps">IE</span>, and most other browsers will display the Flash player interface. Non-Flash browsers will display a simple <span class="caps">HTML</span> link to download the <span class="caps">MP3</span> file.</p> <h3>This may or may not be the wrong way to embed video</h3> <p>As well as music clips, I wanted to embed YouTube clips that I had bookmarked via my <a href="http://www.tumblr.com/" title="Tumblr, a micro-blogging service that powers my footer links">Tumblr</a> feed. The <span class="caps">HTML5</span> <code><video></code> element is as simple to use as <code><audio></code>, albeit with a few extra optional attributes. However, I ran into one major problem - YouTube links are not in a supported video format; they are SWF files (in actual fact wrappers for other SWF files), so even in supported browsers the <code><video></code> elements wouldn’t work.</p> <p>I had a choice to make. Either I could place the object/embed combo directly in the page, or I could wrap it in a <code><video></code> element anyway in the name of forward-planning, and use JavaScript to replace the unsupported video with a regular Flash player. Initially I chose the latter path, but on further consideration I have now ditched the <code><video></code> element. Perhaps in the future they will support SWF (I don’t pretend to understand all the conversations about codecs and such) and they will make a return, but for now it seemed illogical to use an element whose only purpose was to be immediately overwritten.</p> <h2>When all browsers support all formats, markup will be so much easier</h2> <p>Until that time, I believe my <code><audio></code> setup offers the best combination of technologies; native where possible, enhanced Flash player if available, and plain <span class="caps">HTML</span> downloads for all.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/albums.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-01-03T20:27:48+0000">Jan <span>03</span></abbr></div> <div id="content"> <h1 class="entry-title">Top 10 albums of 2008</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C4/music" rel="tag">Music</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>8:27pm <i>on</i> Saturday 3rd January, 2009</dd> </dl> <p>As a part-time musician and full-time music lover, I’ve written precious little about music. And sometimes, when I notice that I’ve spent the entire day listening to albums that were released within six months of each other in mid-1991, I wonder if somehow I’ve lost touch with what makes discovering new music so exciting. Have I crossed an invisible line in my mid-thirties; is all I can expect from the future an inevitable downward spiral into dad-rock and easy listening?</p> <p>So this year I have made a conscious effort to seek out new music. Last.fm throws up some reasonable recommendations from time-to-time, but word-of-mouth tips – from Twitter, mailing lists, or private forums – are generally more reliable and a great deal more eclectic. Peer-to-peer is a boon in this respect; I’ve got into the habit of downloading material as it is recommended by those whose taste I know matches my own, which has led to some great finds over the last twelve months. And as the year draws to an end, “Best Of” lists have also provided pointers to albums I would not have otherwise acquired.</p> <p>All of which is by way of introduction to this – my top ten albums of 2008, <a href="http://www.last.fm/user/Watchmaker/charts?rangetype=6month&subtype=albums">as judged by the impartial Audioscrobbler over the last six months</a>. (Why six months and not twelve? So as not to give too unfair an advantage to albums released earlier in the year, of course – and also to better align the final results with how my mental scoreboard figures the year.)</p> <h2>10. Viva La Vida (Coldplay) / Dear Science (TV On The Radio)</h2> <p>Tying for last place, both of these albums have featured heavily in end of year polls. <a href="http://www.amazon.co.uk/Viva-Vida-Death-All-Friends/dp/B00180OSXG/thewatchmaker-21">Viva La Vida (Or Death And All His Friends)</a> (to give it it’s full title) was <a href="http://www.last.fm/bestof/2008/album/1;">#1 on Last.fm for 2008</a> despite not being as immediately catchy as 2005’s <a href="http://www.amazon.co.uk/X-Y-Coldplay/dp/B0006L16N8/thewatchmaker-21">X&Y</a>, of which I was a big fan, it definitely improves with each listen, and is a more mature and adventurous album than anything Coldplay have done to date.</p> <p>TV On The Radio were a complete unknown when I came across their album on a Pownce-powered favourites list, but since first hearing <a href="http://www.amazon.co.uk/Dear-Science-TV-Radio/dp/B001DXPTOU/thewatchmaker-21">Dear Science</a> it’s been picked as album of the year by several notable publications, including Rolling Stone, <span class="caps">MTV</span>, and Spin Magazine. Think a synth-powered Interpol jamming with Scissor Sisters.</p> <h2>9. Brain Thrust Mastery (We Are Scientists)</h2> <p>New York trio (now duo) We Are Scientists’ first album, the awesomely catchy <a href="http://www.amazon.co.uk/Love-Squalor-We-Are-Scientists/dp/B000BCHJ2E/thewatchmaker-21">With Love And Squalor</a>, would probably feature in my all-time top five, so I picked up their sophomore effort, <a href="http://www.amazon.co.uk/Brain-Thrust-Mastery-Are-Scientists/dp/B0012NHN72/thewatchmaker-21">Brain Thrust Mastery</a>, as soon as it came out in March. It’s less riff-driven and more ambitious than their debut, but still guaranteed to have you dancing round the living room, straining to hit the pitch-perfect vocal harmonies. I was gutted to find out that they were playing here in Cambridge on the very day I was to fly out to Texas – definitely high on my list of bands to see live.</p> <h2>8. The Seldom Seen Kid (Elbow)</h2> <p>Despite almost unanimous thumbs-up recommendations from friends, I’d never paid any attention to Elbow (with the exception of <a href="http://www.rathergood.com/independent_woman">their cover of Independent Woman, accompanied by Joel Veitch’s animated kittens</a>), but when <a href="http://www.amazon.co.uk/Seldom-Seen-Kid-Elbow/dp/B0013F2M52/thewatchmaker-21">The Seldom Seen Kid</a> won the <a href="http://www.nationwidemercurys.com/">Mercury Music Prize</a>, I caved in and picked up a copy. I think it needs a few more listens to really grow on me – it’s one of those albums that demands concentration.</p> <h2>7. Glasvegas (Glasvegas)</h2> <p>I don’t remember where I first heard of <a href="http://www.amazon.co.uk/Glasvegas/dp/B00198HE4C/thewatchmaker-21">Glasvegas</a> – I think possibly they were featured on an early morning T4 special – but I was instantly struck by the singer’s broad Weegie accent giving their indie rock something of a “Proclaimers do Coldplay” feel.</p> <h2>6. Fleet Foxes (Fleet Foxes)</h2> <p>Another album with a good showing in the end of year charts was the debut self-titled album by Seattle folk band <a href="http://www.amazon.co.uk/Fleet-Foxes/dp/B00180OTAI/thewatchmaker-21">Fleet Foxes</a>. Given a few more months’ listening, this would certainly be higher than #6; it’s difficult to categorise, but if you like your modern folk heavy on the vocal harmonies and light on instrumentation it’s definitely one to check out.</p> <h2>5. Death Magnetic (Metallica)</h2> <p><img src="http://www.thewatchmakerproject.com/images/uploads/deathmagnetic.jpg" alt="Death Magnetic album cover" width="216" height="216" class="col three"></p> <p class="no-indent">Into the top five now, and first up is a triumphant return to form for an old favourite. I’d not bought a Metallica album since 1991’s <a href="http://www.amazon.co.uk/Metallica/dp/B00000B9AM/thewatchmaker-21">black album</a>, but the generally positive comments <a href="http://www.amazon.co.uk/Death-Magnetic-Metallica/dp/B001FTTY48/thewatchmaker-21">Death Magnetic</a> was attracting on music forums prompted me to give it a go – and I’m very glad I did.</p> <p>As long ago as 2006, Lars Ulrich said that the band was working on new material reminiscent of “old school” Metallica, and the ghosts of classic early albums such as “Master of Puppets” and “…And Justice For All” can be heard in the high-speed thrash of tracks like “All Nightmare Long” and “That Was Just Your Life”. Unfortunately James Hetfield’s lyrics still have a tendency towards sixth-form angst – “Love is a four letter word!” he bellows on first single and weakest track, <a href="http://www.youtube.com/watch?v=jZ5zXXUJsyc">The Day That Never Comes</a> – but despite the occasional clumsy wordplay, you can’t help but be swept along by the monstrous riffs and memorable lyrical hooks.</p> <div class="audio"> <h3>Standout track: Broken, Beat & Scarred</h3> <audio src="/audio/BrokenBeatScarred.mp3" controls> <object type="application/x-shockwave-flash" data="/audio/player.swf" id="audioplayer1" height="24" width="290"> <param name="movie" value="/audio/BrokenBeatScarred.mp3"> <param name="FlashVars" value="playerID=1&soundFile=/audio/BrokenBeatScarred.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> <a href="/audio/BrokenBeatScarred.mp3">Download song (MP3)</a> </object> </audio> </div> <h2>4. American Demo (The Indelicates)</h2> <p><img src="http://www.thewatchmakerproject.com/images/uploads/americandemo.jpg" alt="American Demo album cover" width="216" height="216" class="col three"></p> <p class="no-indent">For some reason I had it in my mind that I had picked up The Indelicates debut album, <a href="http://www.amazon.co.uk/American-Demo-Indelicates/dp/B001495LLY/thewatchmaker-21">American Demo</a>, after a Mercury Music Prize nomination, but on checking I find that that wasn’t actually the case. So call it fate, call it luck, karma, whatever – but I’ve been listening to their perfect indie-pop ever since. Of course, the relatively high showing for this one might have something to do with my daughters’ obsession with the track <a href="http://www.youtube.com/watch?v=HcM9QsZNRxM">Sixteen</a>, which made it <a href="http://www.last.fm/user/Watchmaker/charts?rangetype=6month&subtype=tracks">my most listened track by quite a long way</a> this year, thanks to multiple plays every time I drove them anywhere.</p> <div class="audio"> <h3>Standout track: Sixteen</h3> <audio src="/audio/Sixteen.mp3" controls> <object type="application/x-shockwave-flash" data="/audio/player.swf" id="audioplayer2" height="24" width="290"> <param name="movie" value="/audio/Sixteen.mp3"> <param name="FlashVars" value="playerID=2&soundFile=/audio/Sixteen.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> <a href="/audio/Sixteen.mp3">Download song (MP3)</a> </object> </audio> </div> <h2>3. The Red Album (Weezer)</h2> <p><img src="http://www.thewatchmakerproject.com/images/uploads/redalbum.jpg" alt="Weezer red album cover" width="216" height="216" class="col three"></p> <p class="no-indent">Aside from <a href="http://www.youtube.com/watch?v=FiIC5qcXeNU">Buddy Holly</a> with its great video, I’d not heard anything by Weezer until a friend bought <a href="http://www.amazon.co.uk/Weezer-Red-Album/dp/B0019M632C/thewatchmaker-21">their latest untitled-but-red album</a>. I ripped it, assuming it might get a couple of listens – and then played the hell out of it for the rest of the year.</p> <p>It’s likely that part of the affection I have for the album stems from The Greatest Video Of All Time™, the meme-laden <a href="http://www.youtube.com/watch?v=WanLLnVixC4">Pork and Beans</a>, but it’s full of great tracks. Singer and main songwriter Rivers Cuomo stated that he tried to move away from traditional song arrangements and try new approaches, as well as sharing songwriting duties with other band members; for me, it’s worked a little too well – despite loving this album, I’ve not developed an appreciation of their back catalogue.</p> <div class="audio"> <h3>Standout track: Troublemaker</h3> <audio src="/audio/Troublemaker.mp3" controls> <object type="application/x-shockwave-flash" data="/audio/player.swf" id="audioplayer3" height="24" width="290"> <param name="movie" value="/audio/Troublemaker.mp3"> <param name="FlashVars" value="playerID=3&soundFile=/audio/Troublemaker.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> <a href="/audio/Troublemaker.mp3">Download song (MP3)</a> </object> </audio> </div> <h2>2. The ’59 Sound (The Gaslight Anthem)</h2> <p><img src="http://www.thewatchmakerproject.com/images/uploads/the59sound.jpg" alt="The '59 Sound album cover" width="216" height="216" class="col three"></p> <p class="no-indent">Now this choice I do know where it came from. A <a href="http://twitter.com/dkr/status/969926052">tweet from D Keith Robinson</a> led me to The Gaslight Anthem’s second album, and their perfect mix of punk and Springsteen New Jersey attitude. I’ve since sought out their debut, <a href="http://www.amazon.co.uk/Sink-Swim-Gaslight-Anthem/dp/B000QUUDLU/thewatchmaker-21">Sink or Swim</a> – a much rawer record, significantly closer to punk than Paramus – but it’s not as immediate as <a href="http://www.amazon.co.uk/59-Sound-Gaslight-Anthem/dp/B0017V7GTY/thewatchmaker-21">The ’59 Sound</a>, which takes Springsteen-like tales of small-town dreams and wraps them in an up-tempo soundtrack that manages to sound both modern and classic at once.</p> <p>I also love the borrowed lyrics, whether as blatant as the line from Counting Crows’ “Round Here” that kicks off the chorus to “High Lonesome”, or the other, more subtle, references that crop up in other tracks.</p> <div class="audio"> <h3>Standout track: High Lonesome</h3> <audio src="/audio/HighLonesome.mp3" controls> <object type="application/x-shockwave-flash" data="/audio/player.swf" id="audioplayer4" height="24" width="290"> <param name="movie" value="/audio/HighLonesome.mp3"> <param name="FlashVars" value="playerID=4&soundFile=/audio/HighLonesome.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> <a href="/audio/HighLonesome.mp3">Download song (MP3)</a> </object> </audio> </div> <h2>1. Chinese Democracy (Guns N’ Roses)</h2> <p><img src="http://www.thewatchmakerproject.com/images/uploads/chinesedemocracy.jpg" alt="Chinese Democracy album cover" width="372" height="372" class="col five"></p> <p class="no-indent">And so to my number one album of 2008, the long-awaited (and boy is that an understatement!) <a href="http://www.amazon.co.uk/Chinese-Democracy-Guns-N-Roses/dp/B001JEO9XU/thewatchmaker-21">Chinese Democracy</a> by Guns N’ Roses. Was it worth waiting seventeen years for? No, not by any stretch of the imagination. Is it <em>really</em> Guns N’ Roses? Well, not really; to all intents and purposes it’s The Axl Rose Show, supported by a revolving door of supporting musicians. But really there’s only one question that matters: Is it any good? Hell, yes!</p> <p>Somewhat predictably, after waiting fifteen years for a new Guns album (seventeen since their last original material, 1991’s Use Your Illusion I & II), I was a little underwhelmed on first hearing Chinese Democracy; is this really what Axl has spent a third of his life, and over $13m, to create? iTunes was mostly two and three stars – it was passable rock music, but nothing special. But then circumstances conspired to make me re-assess the album.</p> <p>In late November, our middle daughter was taken into hospital with pneumonia, from where she was swiftly transferred to a specialist heart and lung hospital for surgery. Two hours from home, my wife and I spent a fretful couple of weeks shuttling back and forth, alternating between dealing with our other two girls and sitting impotently in a hospital ward. Those journeys, driving alone in a dark December along the M1 and A14, gave me plenty of opportunity to listen to my new, unimpressive album… and something strange started to happen.</p> <p>Without the looming shadow of Guns’ past successes, the new material started to impress on its own merit. Axl’s voice has not lost any of its strength (as one might have expected after so long out of the limelight); his range and power is still awe-inspiring, from the patented alley-cat scream that introduces the title track, through the growling vocals on techno-tinged singalong “Shackler’s Revenge”, to the purity of funk-pop faux-Bond anthem, “If The World”.</p> <p>But does it sound like a Guns N’ Roses record? Surprisingly, it does; whether that is testament to Axl’s songwriting and arranging contributions (on both this and previous releases), or the ability of new contributors like Paul Tobias and Dizzy Reed to mould their songwriting to an existing blueprint, I really couldn’t say, but the album definitely slots neatly into the existing back catalogue. Stylistically, it’s heavy on non-traditional song structures – many of the tracks lack a clearly defined chorus, but still manage to stand up as coherent and cohesive numbers. Initially the lack of Slash felt like a glaring omission, but that feeling also passed with time; despite the confusing array of guitarists involved (up to five on a single song) the solos eventually came to feel like they belonged too.</p> <p>“Chinese Democracy” is not just a great rock album, able to hold its own against most great records of the last ten years; it’s a great Guns N’ Roses album. </p> <div class="audio"> <h3>Standout track: Prostitute</h3> <audio src="/audio/Prostitute.mp3" controls> <object type="application/x-shockwave-flash" data="/audio/player.swf" id="audioplayer5" height="24" width="290"> <param name="movie" value="/audio/Prostitute.mp3"> <param name="FlashVars" value="playerID=5&soundFile=/audio/Prostitute.mp3"> <param name="quality" value="high"> <param name="menu" value="false"> <param name="wmode" value="transparent"> <a href="/audio/Prostitute.mp3">Download song (MP3)</a> </object> </audio> </div> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/scroll_to_comment.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-01-02T20:44:07+0000">Jan <span>02</span></abbr></div> <div id="content"> <h1 class="entry-title">New ExpressionEngine extension: Scroll to new comment</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C5/expressionengine" rel="tag">ExpressionEngine</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>8:44pm <i>on</i> Friday 2nd January, 2009</dd> </dl> <p>While developing this incarnation of The Watchmaker Project I came across one glaring omission in my new CMS of choice, the awesome ExpressionEngine.</p> <p>Sure, the guys at EllisLab like to tell us how flexible their application is - how it can run multiple sites, online shops, enormous government portals - but for something that started off as a blog engine, why doesn’t it offer the ability to return to the comment you just added? It was frustrating, so I dug into the core code to see what could be done. Luckily there was a hook in just the right place for a shiny new extension. And here it is.</p> <div class="update"><strong>Update 27/01:</strong> At the prompting of Nathan Pitman of <a href="http://ninefour.co.uk/">NineFour</a>, I’m moving this and all future code posted here onto the free source control host, <a href="http://github.com/">GitHub</a>. It makes sense - this way I can make updates to posted code without having to update blog posts.</div> <h2>Scroll To Comment</h2> <p>Like all ExpressionEngine extensions, the steps to get this up and running are pretty simple:</p> <ol> <li>Download and unzip the files from the package</li></li> <li>Place the <code>ext.scroll_to_comment.php</code> extension file in the <code>/system/extensions</code> folder of your EE install</li> <li>Place the <code>lang.scroll_to_comment.php</code> language pack in the <code>/system/languages/english</code> folder</li> <li>Visit your EE Control Panel, and navigate to <strong>Admin > Utilities > Extensions Manager</strong></li> <li>Enable the new extension</li> <li>Visit the ‘Settings’ page to change the prefix setting if necessary</li> <li>You’re good to go!</li> </ol> <h3>A few quick words on CSS id attributes</h3> <p>As noted <a href="http://veerle.duoh.com/blog/comments/implementation_of_my_comments_in_expression_engine/">a while back by Veerle</a>, if you want your code to be 100% W3C valid you can’t start a CSS <code>id</code> attribute with a number. That is why this extension provides the option of including a prefix to all comment ids, which you will have to match up with your (X)HTML markup - here’s mine:</p> <pre class="code"> {exp:comment:entries sort=“asc”} <li id=“c_{comment_id}”> <h4><strong>{url_as_author}</strong> at <span class="linewrap">»</span> {comment_date format="%g:%i%a"} on {comment_date <span class="linewrap">»</span> format=”%j%S %F, %Y”} <a href=”#c_{comment_id}”> <span class="linewrap">»</span> #</a></h4> <blockquote> {comment} </blockquote> </li> {/exp:comment:entries} </pre> <p>All the comments on my site are prefixed with “c_” - and, as long as I also use that in my extension settings, every time anyone submits a comment the page will reload displaying their new comment.</p> <div class="github"> <h3><a href="http://github.com/matthewpennell/mgp.ee_scroll_to_comment.ee_addon">Visit GitHub to download files</a></h3> </div> <p><strong>What is GitHub?</strong> GitHub is a web application that uses the version control software Git to allow its members to manage their code online. I am hosting the files for this article there so that any bugfixes or improvements I make can be found in one central location.</p> </div>  <img src="http://www.thewatchmakerproject.com/images/uploads/wireframe.jpg" id="article_image" alt=""> <div id="date"><abbr class="updated published" title="2009-01-01T17:45:44+0000">Jan <span>01</span></abbr></div> <div id="content"> <h1 class="entry-title">Redesign 2009</h1> <dl id="meta"> <dt>Categories:</dt> <dd><a href="http://www.thewatchmakerproject.com/category/C6/design" rel="tag">Design</a>, <a href="http://www.thewatchmakerproject.com/category/C7/the-site" rel="tag">The Site</a></dd> <dt>Tags:</dt> <dd></dd> <dt>Published:</dt> <dd>5:45pm <i>on</i> Thursday 1st January, 2009</dd> </dl> <p>Looking back through my archives, the last time this site was redesigned was back in November 2005. That fairly successful design served me well for the last three years, but since the beginning of 2008 I’ve been itching to redesign. And, finally, I’ve managed to see a new design through to actual launch.</p> <h2>Goodbye Textpattern; Hello ExpressionEngine</h2> <p>The biggest change is in the application that powers the site. Textpattern was a reliable and free blog engine, but I’ve long desired to join the ExpressionEngine jet-set, and the last month of building this site has convinced me that it is a great choice for any project that needs a CMS of any description (possibly with the exception of an online shop - the e-commerce module is not exactly fully-featured, although I’m sure they are working on improvements with the impending release of version 2.0).</p> <p>Speaking of EE 2.0, I’m now looking forward to the rewritten, CodeIgniter-powered ExpressionEngine even more than before. The opportunity to use my existing experience and knowledge of the CI framework to build and extend sites powered by EE opens up a whole new avenue of freelance work to PHP coders like me.</p> <h2>Small pieces, loosely joined</h2> <p>This particular design is relatively new, having begun life as a notebook sketch in mid-November. The idea to bring together the various streams of data I’m generating - Twitter, Flickr, All Consuming, Last.fm - is much older, but by no means original; there are several ‘lifestream’ applications around now, but I’d much rather present an aggregated view of my online activity on my own domain, rather than a third-party site such as Chi.mp.</p> <p>The external services are imported via cURL scripts that run periodically to retrieve XML data via their respective APIs. Each script either inserts data directly into the ExpressionEngine weblog tables, or writes to flat HTML files for inclusion in my templates. At least, that was the idea; unfortunately I’m having some issues with PHP versions at the moment, so an interim solution will have to be swiftly coded tomorrow.</p> <h2>Evolution</h2> <p>I always like to see how other designers work, so in case anyone feels the same way and is interested in seeing how the design evolved, here is a short animation of the stages through which the homepage went, from wireframe to final version:</p> <p class="no-indent" style="margin-top: 1.5em;"><img src="http://www.thewatchmakerproject.com/images/uploads/twp_animated_mock.gif" alt="animated design progression" width="450" height="769"></p> </div>  </div>  </div>  <div id="comment-form"> <div class="inner"> <div id="offset"> <p class="intro">I'd love to hear what you think - please use the form below to leave your comments. Some HTML is permitted: <code>b</code>, <code>i</code>, <code>em</code>, <code>del</code>, <code>ins</code>, <code>strong</code>, <code>pre</code>, <code>code</code>, <code>blockquote</code>, <code>abbr</code>. URLs or email addresses will be automatically converted into links.</p> </div> <div id="comments"> <ol> </ol> </div> </div> </div>  <div id="footer"> <div class="inner"> <div id="tumblr"> <h2>Related Entries</h2> <ol> </ol> </div> <div id="copyright"> © All content is copyright 2008-10 <address class="vcard author"><a class="fn" href="http://www.thewatchmakerproject.com/contact">Matthew Pennell</a></address>. All rights reserved. Comments remain the property of their respective authors. </div>  <div id="right"> <div id="feeds"> <h2>Subscribe <i>to</i> RSS</h2> <p>If you use RSS, you can subscribe to receive updates when new content is added to the site. Choose from the following options:</p> <ul> <li><a href="/rss/blog">Blog entries only</a></li> <li><a href="/rss/links">Links, videos, and quotes only</a></li> <li><a href="/rss/full">All content in one feed</a></li> </ul> </div>  <div id="search"> <h2>Search <i>the</i> site</h2> <form method="post" action="http://www.thewatchmakerproject.com/" > <div class='hiddenFields'> <input type="hidden" name="ACT" value="19" /> <input type="hidden" name="XID" value="611f3ead70e1aa6a5f6365f799d45d6d1b78eb38" /> <input type="hidden" name="RP" value="search_results" /> <input type="hidden" name="NRP" value="search_results" /> <input type="hidden" name="RES" value="" /> <input type="hidden" name="status" value="" /> <input type="hidden" name="weblog" value="journal" /> <input type="hidden" name="search_in" value="entries" /> <input type="hidden" name="where" value="all" /> <input type="hidden" name="site_id" value="1" /> </div> <div> <input type="text" name="keywords" maxlength="100" size="20"> <button type="submit">Search</button> </div> </form> </div> <div id="credits"> <h2>Validation <span class="amp">&</span> Credits</h2> <p>This site is <a href="http://validator.w3.org/check?uri=http://www.thewatchmakerproject.com/blog/&charset=(detect+automatically)&doctype=Inline&group=0">valid HTML5</a>, and mostly <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.thewatchmakerproject.com/c/twp.css&profile=css3&usermedium=all&warning=1&lang=en">valid CSS2/3</a> with the odd browser-specific extension where necessary.</p> <p>The large icons on the home page are by <a href="http://www.crystalxp.net/galerie/en.id.3751-bagg-a-png.htm">Bagg & Box</a>, <a href="http://www.vistaicons.com/icon/i148s0/old_school_icons.htm">VistaIcons</a> and <a href="http://perishablepress.com/press/2006/08/20/a-nice-collection-of-feed-icons/">Perishable Press</a>. Any smaller icons are of course by <a href="http://www.famfamfam.com/">FamFamFam</a>. Stock photography mostly from <a href="http://www.sxc.hu/">stock.xchng</a>.</p> <p>Blog powered by <a href="http://www.expressionengine.com/index.php?affiliate=thewatchmakerproject">ExpressionEngine</a>. Links powered by <a href="http://thewatchmakerproject.tumblr.com/" rel="me">Tumblr</a>.</p> <p>Hosted by <a href="http://www.mediatemple.net/go/order/?refdom=29digital.net">(mt) MediaTemple</a>.</p> </div>  </div>  </div> </div>  <script type="text/javascript"> window.onload = function () { // Fix heights of blocks in footer var left_col = document.getElementById('tumblr').offsetHeight; if (document.getElementById('video')) { var middle_col = document.getElementById('video').offsetHeight + document.getElementById('quotes').offsetHeight + document.getElementById('copyright').offsetHeight; } else { var middle_col = document.getElementById('right').offsetHeight; } if (document.getElementById('video')) { if (left_col > middle_col) { document.getElementById('copyright').style.height = (left_col - (document.getElementById('video').offsetHeight + document.getElementById('quotes').offsetHeight)) + "px"; } } else { document.getElementById('footer').style.height = document.getElementById('footer').childNodes[1].style.height = (left_col > middle_col) ? left_col + "px" : middle_col + "px"; } if (typeof window_onload != 'undefined') { window_onload(); } } </script> <script src="/js/blog.js?v=3"></script> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-71160-5"); pageTracker._trackPageview(); } catch(err) {}</script> </body>  </html>

Blog

One quick thought of my own on the new Apple iPad

So it’s got to be apps…

Potential EE add-ons: What would you like first?

Related fieldtype dropdowns

Ree-Categorize

Category Image URL Fieldtype

Mac OS X Dashboard Widget

Cast your vote now

Reading List 2009

Fiction

eBooks

Non-fiction

Fantasy

Graphic Novels

Highlights of 2009

My World of Warcraft

Now I’m not much of a gamer

For The Horde!

How to make a quickstart folder for your projects

Bookmark This

Development vs. Live

So there you have it

New Year’s Resolutions // Project 52

2009

2010 Resolutions

Project 52

So that’s the plan

Jonathan Longnecker - From Design To Dynamic: Rapid Development with ExpressionEngine

Introduction

Add-Ons

Tips and tricks