Category Archives: Development

Whilst being still somewhat of a newcomer to the world of freelance development, it’s already very apparent that the call for services is always heavily affected by online trends both technological and fashionable.

It’s quite understandable, that being the nature of the beast – to be adaptable and reactive, to be able to rapidly assimilate new skills. It’s much simpler for employers to call for contractors who have already worked with a certain platform, rather than channel time and resources into training – neither of which are often in disposable measure.

Recently I’ve taken frequent forays into the Facebook platform, both in the form of Canvas-based applications and Facebook-enabled external sites (what was previously known as Facebook Connect). Both however leveraging the Facebook’s core platform functionality, the Graph API, in strikingly similar ways.

Twice I’ve been tasked with projects that have required building bespoke photo manipulation tools.

Specifically, two (unrelated) applications both offering users the ability to select photos from their Facebook albums, apply some choice or combination of filters, effects or creative imagery and produce a processed image as a result. Awarding them free opportunity to download, share, remix or do whatever they please with the final outcome.

The first was Honda’s CR-Z Mode Art, both a Canvas application and third-party site running from the same code base.

This was Flash-based and applied simple run-time blending modes and colour transformations to a user’s profile image, largely relying on a bank of ready-made illustrated assets (of theme selected by the user) to embellish and augment the picture. Snippets of their profile information were also added.

When deciding upon a methodology for the image processing, I initially suggested that it all be handed to a server to make use a library such as PHP’s GD or ImageMagick.

This would take the weight off the client, both in handling the processing itself and in the delivery of aforementioned asset library. Even with a rudimentary grasp, both offer a much more powerful level of image manipulation than I thought easily achievable with Flash.

But Flash was a must. I recommended using Pixel Bender, mainly for selfish reasons, but also because it offers a complexity of processing down to the pixel level – but that wasn’t an option due to client-imposed restrictions on the Flash Player version.

More recently I was offered a second attempt with a very similar application with Samsung’s Now Project, an entirely PHP-based Facebook Canvas app.

This application offered the user a number of presets to apply to their image, very much along the lines of Hipstamatic – or rather it’s recent successor, Instagram.

Here we made use of GD’s built-in image filter functions, which are really handy.

A lot of the time GD is called upon for the likes of simple image cropping, rotating or resampling. That describes the most of my experience, anyway.

The filter options however offer control over a number of image properties as common as you’d expect in any image editing software, brightness and contrast for example. There’s conversion to grayscale and colour inverting, there’s a colorize method to handle RGB processing, also blur and smoothing options.

All can be used in combination to achieve a wide breadth of results.

In order to create the desired presets, something requiring a more creative eye than mine, I built a custom tool for uploading and processing images on-the-fly so the project designers could tweak and exact filter combination until they found their ideal results. It provided an option to export the settings so I could implement them later.

I’ve recreated that tool in a simpler form here. This one was thrown together very quickly this evening, there are a few images to choose from and a number of settings – it’s all achieved entirely with the GD library. Almost completely untested, not optimised whatsoever – so you’ll have to bear with the waiting time. Have a play!

You get the idea anyway.

GD can be used for watermarking images, often seen applying a transparent PNG to the corner of a picture, say. The same process is used to apply vignettes and overlays of scratches or noise in this example.

It’s really adaptable and still really useful – it hasn’t seen an update since November 2007.

Full source code for the tool is available on GitHub.

I thought with the turn of the new year and whatnot, I’d make a few improvements to my blog.

For some reason when I started writing I thought it’d be a great idea to use rather abstract titles for all of my posts, something short and curiously inviting (hopefully) rather than the straightforward approach of actually describing what the post is about. I wanted to avoid long and boring titles like “Differences between Flash Player 10 and 10.1″ or “How to install.. blah blah”.

So although, as far as titles go, they could probably be more boring – they could definitely be more helpful. Most of them are obscure and aren’t really meaningful. They’re fine for human readers, especially after people have read the post, but they’re not so good for search engines or people searching for what I’ve written about.

I decided then to use WordPress’ custom fields to add a descriptive ‘subtitle’ to each post that should shed some light on what I’m actually writing about and hopefully the titles should start making sense.

I could have started anew and use descriptive titles from here on, but that would be inconsistent and make those old titles even more nonsensical. I could have renamed the lot, but the old URLs would then be meaningless (the name is in the permalink) or if I changed those URLs then previously incoming links would be broken.

Adding Custom Fields

Custom fields are essentially metadata for each post and can be pulled in by your theme.

I choose to display my subtitle under the each post title so humans, search engines and crawlers alike can read abstract title and the helpful subtitle description together.

Custom fields are added at the bottom of the ‘Add New Post’ page and can be any amount of value pairs that take a name and value.

These custom fields won’t automatically show in your post, you’ll need to edit your current theme’s PHP files to retrieve them.

The get_post_custom function will return a multidimensional array with all custom fields of a particular post or page, which you can traverse to find your custom value pair:

<?php get_post_custom($post_id); ?>

Otherwise you can use the get_post_custom_values function and send the field name to get an array of all the values with that particular key:

<?php get_post_custom_values($key); ?>

I’m using a field to add a subtitle, so I append the value onto the end of my title which you can see on the left (if you’re reading this on my site).

Semantically this is part of my title. As I stated above, for SEO purposes, I want this to be considered as a part of my title for all intents and purposes by search engines and spiders as well as humans. I only ever want them considered ‘separately’ on an aesthetic level and in WordPress’ forming of the permalink.

So I’ve styled up the subtitle to look complimentary to the ‘actual’ title with CSS, but injected it into the post’s h2 title tag in my mark-up so it stays semantically sound for machine readers and accessibility purposes.

So here’s the combined title mark-up (without style hooks):

<h2 class=”entry-title”>
<a href=”..”>Start Making Sense</a>:
<span class=”entry-subtitle”>Wordpress, SEO and pimping my blog</span>
</h2>

And the styled and un-styled versions look like this:


It’s subject to a conditional statement that checks whether the custom field has been populated, so I don’t have to rush through adding them to all my posts and those without subtitles yet won’t look broken.

This does mean however that it’s only implemented by the theme, not by the publishing platform. This means it will only be seen by visitors to the blog, it isn’t published to the RSS feed, for example, so syndicated readers won’t see it.

Sitemaps

Another improvement for SEO purposes was to add an XML sitemap.

I recently added a HTML sitemap in the form of my index page, but then saw Google’s Matt Cutts discussing HTML versus XML sitemaps who concludes that if you can have both, then do so.

It’s very easy to generate a sitemap and according to Matt’s video a simple list of URLs would suffice, but I looked up the WordPress Plugin Directory for ready-to-roll solution and found the Google XML Sitemaps which does the job for me.

It’s fully automatic so it doesn’t need my attention once I’ve installed it. It generates an XML file based on my current posts and pages and automatically updates whenever I publish or modify anything new.

It also sends notifications of updates to the main search engines – Google, Bing, Ask.com and Yahoo! – and has a number of advanced options concerning prioritising pages and setting the frequency of how often certain pages should be checked again by crawlers for updates.

The XML file it generates sits at http://blog.marchibbins.com/sitemap.xml (for me) and there’s an option to attach an XSL file for styling, but I choose just to use plain XML.

Social Bookmarking

I got to browsing some of the other popular plugins and temporarily tried out Sociable which adds typical social bookmarking links to the bottom of each post.

It supports nearly 100 different APIs and the drag-and-drop interface and nice and easy to work with.

I chose not to use it in the end, I thought it was a bit over-the-top for my site.

There’s a lot more in the directory though, like Add to Any, SexyBookmarks and ShareThis – though they’re not hard to write anyway, if I eventually change my mind.

Tweaks

I made a few other minor changes here and there, some CSS changes and design tweaks.

I threw an RSS link into the header and dropped the amount of posts that show on my front page.

I realised my posts can tend to get pretty lengthy and often have embedded videos or Flash content, so showing ten of those (the default) made the page quite heavy.

I started using the ChaosTheory theme when my blog was freely hosted on WordPress.com and I’ve stuck with it since, making odd modifications to both server-side code and the front-end as and when. To use it on a WordPress.org blog I found a port hosted by Automattic but it’s never been quite right nor entirely compliant with mark-up or CSS standards, I’ve only really maintained it for consistency.

Recently though I found the Unicorn ‘Universal Conformance Checker’ from the W3C which combines all the common validation checks and also has a MobileOK Checker which looks at the ‘mobile-friendliness’ of a site.

Shamefully my blog scores an awful 0/100, due to links with “_blank” targets, the amount of images embedded, the presence of Flash and Javascript and a ton of other things.

Over time it’ll be my aim to get all that sorted. Hopefully without having to start my own theme completely from scratch.

This month’s YDN Tuesday was presented by Steve Marshall, he spoke about code generation, ‘Writing the Code that Writes the Code’.

A bit of a disclaimer: Going into this talk I wasn’t sure how much I’d be able to take from it, or whether what Steve would be discussing would be relevant to my own kind of development. I figured he’d be talking about working with huge projects with (literally) tens of thousands of lines of code and I don’t think that the evening was part of the ‘RIA’ umbrella which is probably closest to home for me. Anyway although Steve’s talk did cover those kinds of projects, he also went through some platform-agnostic fundamentals – the kind of transferable ideas that could be applied to any coder – and it’s really those I’m looking at here.

Code Generation in Action

Steve opened with a bit of code generation evangelism, introducing a discussion as to why code generation is something that all developers should want and should do.

Each point here I think speaks for itself, but only really having gone over each benefit staring me in the face have I questioned, hold on, why don’t I do this already? It’s a convincing argument..

The most immediate is scalability – so often development projects have large amounts of repetition, say in creating views, or sets of view/mediator/component classes, or whatever – needless to say as projects get larger, generating this kind of code from templates and base classes reduces or even eliminates the room for error.

Neatly, this this was his next point – consistency. Automated code cannot be mistyped or have any part overlooked (as could when writing by hand), unless of course the source is incorrect. And even if that’s the case, a small change can be rolled out to all generated code once corrected. Which brings us to his third point – automatic code is of course far quicker to produce.

Steve also suggests that generated code is ‘predictable’, in a way. Whether looking at code that has been generated or that written for ‘expansion’ (more on this later), on the whole it’s consequently easier to digest. Likewise, source code that is to be used by a generator or to be ‘expanded upon’ is, by its very nature, a smaller volume – so therefore easier to approach.

It’s also a single point of knowledge. Only the core source code needs to be understood. A project of tens of thousands of lines of code would be near impossible to traverse or otherwise understand, knowing that code has been generated from a smaller source that you do understand offers a reassurance that the rest of the code is good.

Another advantage is the ease of which the code can be refactored. Obviously only the source code base requires changing, the larger volume is generated automatically. This kind of code is language independent.

Outside of working with code direcly, the kind of abstraction writing for code generation offers its own benefits. Although arguably a desirable trait of good programming anyway, Steve suggests this kind of code is far more decoupled with the design process. Thinking more abstractly about coding means it has less effect on design capability, and vice-versa. Design reviews or changes should have no bearing on the coding. By being naturally quicker to produce, Steve also says that generated code is a good methodology to pursue when prototyping applications.

Steve also discussed testing, offering that generated code has (or presumably can have) 100% test coverage. Similarly, full documentation is easier achieved by way of having written a smaller code base.

Overall, cleaner code that’s easier to work with and easier to understand is undeniably a more attractive prospect to work with. Developers are more enthusiastic about working with that kind of code and so that kind of code is of a higher quality – in the first place, as well as because it has been consistently deployed, tested and documented thereafter.

So how is this achieved?

Models

Steve recognised six principle methods for generating code, each technique seemingly increasingly more ‘advanced’ than the previous and, as I said before, each progressively more suited to larger-scale projects.

He saw these as:

  1. Code munging
  2. Inline code expansion
  3. Mixed code generation
  4. Partial class generation
  5. Tier generation
  6. Full domain language

 

I’ll look at each briefly.

Code munging


Code Munging
Code munging essentially takes your code, parses, introspects and creates something new that’s not code, though still of benefit and in inherently useful.

Steve’s examples were Javadoc or PHPdoc, it’s the most basic form of generation you can introduce to your workflow.

Inline code expansion


Inline Code Expansion
This the ‘expansion’ mentioned above, where source code is annotated with keywords or variables where upon additional code is generated to replace those markers to extrapolate upon the original.

Templates are the most rudimentary example. This technique gets repetitive jobs done well, quickly and correctly.

Mixed code generation


Mixed Code Generation
This is the first ‘real’ form of generation, this expands upon Inline code expansion by allowing the output code to be used as input code once created. Instead of simply replacing special keywords for example, mixed code generation may use start and end markers, expanding code as before, but allowing the result to be worked upon once completed.

This may include code snippets, or smaller templates injected within classes.

Partial class generation


Partial Class Generation
I guess here’s where things start to get serious. Partial class generation begins to look at modeling languages like UML, creating abstract system models and generating base classes from a definition file.

The base classes are designed to do the majority of the low level work of the completed class, leaving the derived class free to override specific behaviors on a case-by-case basis.

Tier generation


Tier generation
This takes partial class generation a level further, a tier generator builds and maintains an entire tier within an application – not only the base classes. Again from some kind of abstract definition file, but the generator this time outputs files that constitute all of the functionality for an entire tier of the application – rather than classes to be extended.

Full domain language

Steve didn’t really talk about this much, he said it’s very tough – and even if you think this is what you want to do, it’s probably not (though a hand from the crowd wanted to reassure that it might not be quite that intimidating).

A domain language is a complete specification dedicated solely to a particular problem – with specific types, syntax and operations that map directly to the concepts of a particular domain.

I used the Code Generation Network’s Introduction for reference here, which looks like a good resource.

Also, all the diagrams belong to Steve. He’s put his presentation slides on Slideshare and uploaded PDF and Keynote versions on his website.

The presentation was also recorded as a podcast and is now on the Skills Matter site.

In retrospect

After all these, Steve took us through an example he’d worked on where code generation really proved it’s worth (a huge project for Yahoo!) – and offered tips and best practices to use once you’ve convinced your team to take on code generation (see the slides linked to above).

Though in my opinion here he seemed to seemed to almost contradict some of the things he’d talked about before. He pointed to some tools to use within your workflow, but spoke extensively about writing your own generator. Stressing that it can be written in any language, though should be written in a different language to that of the code being produced, that its easier than perhaps you think – though still with a fair few caveats.

But what happened to cutting down the work load? As the talk summary says, developer are fundamentally very lazy – we want to do less and less, surely this requires more effort?

One of his recommendations is that you document your generator once you’ve written it. But how would you create that documentation, with another generator? Is that meant to be a specially written generator also? And that needing documentation too?

I remember an episode of Sesame Street from my childhood, where Big Bird was painting a bench. Once he’d finished he made a ‘Wet Paint’ sign with the paint remaining, only to realise that the sign also was wet, so needed a ‘Wet Paint’ sign of it’s own. Which of course, was also wet and needed it’s own sign. Cut back a scene later and the whole street is full of signs. It was upsetting, to say the least.

I’m being pedantic, I know.

But I guess that’s where I recognise a line for me, or at least the kind of development I do. Very large-scale projects do often need this kind of approach, Steve is proof of that. For me only the first few techniques are appropriate. Though those, undeniably, are incredibly beneficial when you have the opportunity to put them into play.

On a similar note, this month’s LFPUG meeting had a presentation on UML for AS3 by Matthew Press, the recorded video for which is now online – have a look!

Yesterday, I wrote a ‘how to’ on installing and running multiple versions and concurrent instances of Firefox on Windows XP.

But what about the other browser choices? After all, my original intention was a to develope a versatile testing environment, specifically for cross-browser, cross-platform intended web sites.

Surprisingly, running multiple versions of the other major browsers isn’t as complicated as the Firefox process.

Opera, for example, gives you the option whether to install the set-up as an upgrade or separately, straight out of the box. They offer alternate releases of the current version on their site (9.62 at the time of writing) and have a publicly available archive that goes back to version 3.21 for any old release candidates you need to test.

If you want to run multiple versions of Internet Explorer, you can alter various system and user profile settings in a similar way to my method with Firefox, but it’s far easier to take advantage of the many ‘standalone’ versions you can find online. These are generally third-party, non-Microsoft developments.

TredoSoft have collated standalone versions of Internet Explorer from 3 up to 6, ready to install from a single set-up – it’s called Multiple IE.

It’s brilliant to see IE3, I decided I’d use it as my default browser for a day – loved seeing the frantic alerts about some alien idea called a ‘cookie’ and whether I wanted to risk accepting it onto my computer.

NB: If you’re concerned about what’s being installed when you use Multiple IE, you can do it all yourself with the instructions on Manfred Staudinger’s Multiple IE page.

There’s standalone applications for other browsers too. I only use Windows nowadays, but I’ve recently found Michel Fortin’s standalone versions of Safari – he’s even numbered the icons for your dock (via). That page also links to instructions on running multiple versions of Firefox for Mac.

As for testing Linux system – and this goes beyond HTML and CSS debugging, I use VMware Player from VMware. Not only because when I’ve been developing server-side applications, I’ve not wanted to bother installing those on my home computer base – because it can be tricky, time-consuming, potentially damaging if things go wrong, etc etc and I tend to use Linux-based system for deployment anyway – but because appliances are so damn handy.

Virtual appliances run within a virtual machine like VMware Player as self-contained, packaged software. They can be created and restored as system images, so if something goes wrong – it’s so easy to turn back, with no risk to whatever personal data you might have on your computer as you would installing software as services on the base.

More than that, they’re readily available. VMware has an Appliance Marketplace, with over 900 ready-to-go appliances and a simple, central repository to develop or distribute your own.

There’s popular Linux distributions, various Red Hat, Ubuntu, Fedora – all pretty clean, the basic install, but also some interesting others.

I particularly like the Web Developer appliance, specifically designed to safely test and fine tune web apps. Based on Ubuntu, the creator has consciously included some trendy applications that are gathering more attention, like Ruby on Rails. On top of the expected with Apache, PHP and MySQL, you get a a handful of browsers, various database and debugging tools, code and graphics editors, all as standard, all configured and running – great way to get started.

I’ve recently completed building a new site for the BBC, this time a project pretty much entirely in HTML. As you’d probably expect, the BBC are pretty hot on maintaining a wide foundation of web standards and providing a high level of accessible content, two approaches I’d say I’m a keen practitioner of.

I truly believe that there is zero excuse for slapping ‘this page is best viewed with [browser name] in [screen dimension]‘ on any website, unless it is specifically designed otherwise – and especially if it’s text and image content only – when it’s really so straightforward to adhere to some basic standards which, with almost an exponential effect, can improve the way your content is delivered, cross-browser, cross-platform. That kind of disclaimer is just a cop out, plus Tim agrees - and he’s the man.

A part of that development process is to determine, amongst things, which browsers on what device or platform are the priority. In turn, getting hold of these browsers readily for testing and ideally, available frequently for an agile development. Not leaving testing until a stage where any damage might be irreparable because of time constraints and deadlines, or viewing testing time as an easily squeezable phase, first to suffer when scope is altered.

The BBC have outlined such requirements, they have very in depth guidelines publicly available on their site. The following table defines the ‘levels’ of browser support that all projects must comply with:

BBC Browser Support 

Abbreviated definitions:

Level 1:

  • All content and functionality must work, minimised variations to presentation, fully-styled, maximise user experience.

Level 2:

  • Core content must be readable, usable and navigable, any degradation to must be graceful, no content must be obscured.

Level 3:

  • No support or testing necessary. 

 

Read the full support documentation.

What can be really tricky sometimes though, is getting hold of the all those browsers and platforms to test with. There’s various ways of reconfiguring application and registry settings to install multiple versions of browsers, but the following method is how I installed and concurrently ran multiple instances and versions of Firefox on Windows XP.

Firstly, Firefox 3 (current version, 3.0.4) is readily available from Mozilla, as are previous releases of Firefox 2. Firefox 1.5 though is slightly harder to find. Along with a strong recommendation not use them, you can get other releases from the FTP archive going back to v0.10!

With each set-up, select Custom Installation, giving each version a different installation folder, so something like:

C:\Program Files\Mozilla Firefox 1.5
C:\Program Files\Mozilla Firefox 2.0
C:\Program Files\Mozilla Firefox 3.0

Be sure to uncheck the option to run Firefox when you click Finish, this bypasses writing some default system settings.

Then you’ll need to create a seperate Firefox profile for each version of the browser you’ll be running. Open the profile manager from Start > Run:

“C:\Program Files\Mozilla Firefox 2.0\firefox.exe” -ProfileManager

It doesn’t matter which you choose. Create three new profiles, I named mine ‘Firefox 1.5′, ‘Firefox 2.0′ and ‘Firefox 3.0′ to keep it obvious.

Then I created three .bat files in Notepad, these function as shortcuts to the different versions, as follows:

Firefox 1.5:

set MOZ_NO_REMOTE=1
start “” “C:\Program Files\Mozilla Firefox 1.5\firefox.exe” -P “Firefox 1.5″
set MOZ_NO_REMOTE=0

Firefox 2.0:

set MOZ_NO_REMOTE=1
start “” “C:\Program Files\Mozilla Firefox 2.0\firefox.exe” -P “Firefox 2.0″
set MOZ_NO_REMOTE=0

Firefox 3.0:

set MOZ_NO_REMOTE=1
start “” “C:\Program Files\Mozilla Firefox 1.5\firefox.exe” -P “Firefox 3.0″
set MOZ_NO_REMOTE=0

Obviously change the path and profile names if you don’t use the same as mine, open those up et voila!

Running multiple versions of Firefox

Click to enlarge [via].

Update (18.08.09): This also works with Firefox 3.5, just follow the same steps!

I took a wrong turn and I just kept going.