Jun 17

ExpressionEngine: Scrippets for FieldFrame, too

Categories:
Tags:
Published:
1:44pm on Wednesday 17th June, 2009

Following yesterday’s work to convert the Scrippets plugin for ExpressionEngine, it was simple to turn it into a new field type for Brandon Kelly’s excellent FieldFrame extension.

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.

And now there’s one more

The Scrippet field type works in exactly the same way as the standalone plugin, except that you enter your plaintext script content in its own separate field in the Control Panel.

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:

{exp:weblog:entries weblog=“blog”}
  <h2>{title}</h2>
  {script_extract}
{/exp:weblog:entries}

The parameters are the same as for the {exp:scrippet} plugin (see my previous entry for details), and you also need to either link to or include the CSS from scrippets.css as well.

It works as part of the FF Matrix fieldtype as well, so you can post tables of script snippets to your heart’s content. Grab the files from GitHub as per normal.

What is GitHub? 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.

Jun 16

New ExpressionEngine Plugin: Scrippet

Categories:
Tags:
Published:
11:27am on Tuesday 16th June, 2009

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.

Based on an original idea by screenwriter John August, most of the work on Scrippets was done by Nima Yousefi for the original Wordpress plugin. I’ve simply taken that code and adapted it for use in ExpressionEngine.

Update 17/06: 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 this blog entry for full details.

Installation and Usage

To install the Scrippet plugin, grab the plugin and stylesheet from my GitHub repository. Copy the pi.scrippet.php file into your /plugins folder.

Unfortunately, ExpressionEngine doesn’t offer an easy way to dynamically load additional stylesheets, so for now you can either attach the scrippets.css stylesheet to your template, or copy-and-paste the CSS rules from that file into your existing site stylesheet.

To use the plugin, wrap your unformatted screenplay extract in {exp:scrippet}{/exp:scrippet} tags:

Formatted scene

{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}

Parameters

There are a few optional parameters available to use with the {exp:scrippets} tag:

  • width - Sets the width (in pixels) of your scrippet block
  • bg_color - Sets the background colour of the block; you can use hex values, colour keywords, or RGBa values
  • text_color - Sets the text colour; possible values as per bg_color
  • alignment - Valid values are left or center; blocks with alignment=“center” will be centered on the page

The default appearance of the scrippet blocks is black text on a pale yellow background, 400 pixels wide.

Formatting options

Styles are applied to the text according to how it is formatted:

  • Scene headings start with either “INT”, “EXT” or “EST” and are all capitalised
  • Transitions end with a colon (e.g. “CUT TO:”) or can be a few hard-coded other options (e.g. “FADE TO BLACK”)
  • Characters will be in ALL CAPS followed by a single new-line
  • Parantheticals will be wrapped in parentheses, obviously
  • Dialogue comes straight after a character or paranthetical element
  • and Action is anything that doesn’t fall into any of the above categories

You can also include some additional formatting by using standard Textile markup for **bold text**, *italicised text* or _underlined text_.

Future developments

Another obvious use-case for this would be as a new field type for Brandon Kelly’s FieldFrame extension, and when I have a few spare minutes I’ll throw that together too.

What is GitHub? 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.

Jun 12

Review: FTPOnTheGo and TouchTerm SSH for iPhone

Categories:
Tags:
Published:
3:51pm on Friday 12th June, 2009

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: FTPOnTheGo and TouchTerm SSH.

FTPOnTheGo

FTPOnTheGo screenshots

The file handling capabilities of the iPhone have always been a little underwhelming, making the killer feature of FTPOnTheGo—downloading, editing, and uploading files—that much more impressive. But let’s start at the beginning.

The app sensibly opts to use the standard iPhone UI 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.

Simply provide a server address, username and password (or select from your bookmarked connections) to connect to a server either by FTP or SFTP. 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.

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.

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.

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.

TouchTerm SSH

TouchTerm SSH screenshots

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.

There are a handful of SSH apps available on the iTunes App Store, but luckily the best is also the cheapest. TouchTerm SSH 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.

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.

There’s a bit of a latency problem while typing (as there can sometimes be over SSH 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.

There’s not much more that can be said about an SSH 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.

These apps are great value for money

TouchTerm SSH 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 SSH app. FTPOnTheGo is a little pricier at £3.99 (probably $5.99 in the US, 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.

May 08

Benchmarking Array Indexes for String Comparison

Categories:
Tags:
Published:
2:59pm on Friday 8th May, 2009

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 PHP 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.

Reducing Function Calls

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 PHP benchmarking you’ll know that some forms of loops are quicker than others:

 // 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++;
}

So my assumption was that removing function calls equals faster code. My loops were pretty well optimised—what about my string comparisons?

String Comparison Functions

I needed to compare subsections of strings, so I was using a lot of substr(), 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:

if (substr($str, 0, 2) === $test) { ... }

Became this:

if ($str[0] . $str[1] === $test) { ... }

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.

Benchmarking Results

The results are actually surprising. In tests, the substr() call is actually faster 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.

It surprised me that the concatenation operations were so much slower than the substr() function call (at least 50% slower)—I was really expecting it to be a much faster way of comparing strings.

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 substr().

Mar 24

Ada Lovelace Day: Grace Hopper

Categories:
Tags:
Published:
3:34pm on Tuesday 24th March, 2009

When I signed the pledge for Ada Lovelace Day 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.

This was a rather rash decision, as it turns out; now on the day itself, I find myself struggling to find a suitable subject.

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 Carolyn, Leisa, Vero, Lea, Veerle, Glenda or Molly 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”.

So I figured I would buck the trend that has seen people like Ann and Christian blog about their contemporaries, and instead look back at someone who had an impact in the tech sector when it was in its infancy.

The Mother Of Computers

“Amazing” Grace Hopper 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.

Hopper was one of the first programmers to work on the new Harvard IBM Mark I computer, a 50-foot-long behemoth capable of a staggering three calculations per second (!), 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 UNIVAC 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.

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.

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 annual award, a ship, a road, a park and a data processing centre named after her. The official advisory council on the recruitment and retention of women at Microsoft 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.

The first computer bug

While working at Harvard on the IBM Mark II, 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 computer bug is solely attributable to Hopper, she certainly brought the term into popular usage. (The moth is still on display in the group’s log book at the Smithsonian.)

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.‘“

“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.”

[Sources: Wikipedia, Biographies in Naval History. Photos from Wikipedia.]

Mar 20

South By South West 2009

Categories:
Tags:
Published:
10:01am on Friday 20th March, 2009

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 South By South West 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.

Saturday (Day 2)

Friday was a late one after Dan Rubin‘s Watchmen 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.

The afternoon keynote, by Zappos CEO 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 SXSW it should be required viewing for company MDs anywhere.

The worst panel I saw this year was Designing For Irrational Behaviour, which was oddly pitched between interface design talk and psychology lecture. The self-confessed tech noob college professor 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.

I had assumed that Building Your Brand 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 LeWeb conference, but by name only), but it was an entertaining panel anyway—not least due to the presence of live Twitter search 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 someone get away with a statement like “Twitter is the new phone” without calling them on it, can you?

Sunday (Day 3)

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 Interface Lessons From Games. Commitment, right?

There are some talks that you just know are going to be great, and Jared Spool never fails to deliver. His Journey To The Center Of Design show, complete with human bell curves and a bold takeaway (“User Centered Design is dead” according to Jared), was a definite highlight of the conference.

I also sat in on the iPhone Development 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 IDE makes it easy to drag-and-drop interface elements to wire up your app quickly (ah, now I see where Atlas 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 SDK. Still, it’s an area I plan to investigate in the medium term.

After failing to get into any of the smaller panels in the afternoon, we ended up listening to Gary Vaynerchuk 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…

(Some) Geeks (kind of) Love Bowling

My third year at SXSW bowling (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 Bryan can rebuild it to its previous heights for next year, as it was always a highlight of the week for me.

Monday (Day 4)

Now in its third year, the Browser Wars 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 Microsoft’s Chris Wilson, 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 IE discussion continued at the WaSP Annual Meeting where Aaron Gustafson 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.

I had another great lunch at Iron Cactus with the guys from EllisLab (plus a few other EE enthusiasts), and later Derek Allard took us through a demo of ExpressionEngine 2.0. All I can say is, wow—it is so much more than just a port of EE 1.6 to the CodeIgniter framework. Some of the features they have added (many with great jQuery-powered interactions, Derek’s been busy!) are going to cut development time in half when you’re setting up that new EE 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 CMS!

After most of the regular sessions had ended, Alex Jones from Refresh Austin led a Core Conversation on Energising Communities. 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 Refresh Denver and some UK-based groups too.

Tuesday (Day 5)

If there is one word that sums up SXSW this year, that word would have to be: Twitter. 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 jumped the shark quite yet, but it’s certainly putting on its water-skis.

The Guy Kawasaki keynote really didn’t appeal, so instead I went to the Mad Men on Twitter panel, which was really good. I’m a big fan of Mad Men, 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 Mad Men characters living on the social network have absolutely nothing to do with AMC or the PR 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 @PeggyOlson 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.

Apple’s James Craig closed out my final day of the conference with an interesting look at Universal Design, 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.

Summary

I had yet another great year in Austin; despite the initially poor weather it brightened up eventually, and staying right on 6th St (with Derek, Paul and Mike) really made for an ideal central location, convenient for both the Convention Center and the parties. Speaking of parties, yet again they were awesome—97bottles Happy Hour, South By North West, and the MediaTemple closing party were chock-full with friends old and new. And I finally made it to a Breakfast with Dustin at the IHOP, which ticks off another experience on my list of “quintessential American places to visit.”

I should also thank Andrea Schwandt-Arbogast 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. ;)

Roll on SouthBy 2010. [original photo by Lan Bui]

Mar 15

SXSW 2009, Day 1

Categories:
Tags:
Published:
8:05pm on Sunday 15th March, 2009

Based on my experience of previous years, I was expecting the Friday of SXSW to be largely a waste of time—but this year actually featured some great sessions.

Everything you know about web design is wrong

Dan Willis of Sapient drew parallels between the dawn of modern cinema (cf. Birth of a Nation, 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.

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?

Unnatural experiments in web design

In the same ballroom, Paul Annett from Clearleft 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; Silverback‘s parallax scrolling backgrounds, We Bleed Design‘s endless scrolling paint stripes, and Skittles’ recent social media experimental homepage, among others.

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.

Mar 10

Meet me at SXSW

Categories:
Tags:
Published:
4:04pm on Tuesday 10th March, 2009

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.

In fact I have very little to say about SXSW besides linking to my post from last year about how to disable visual voicemail on the iPhone, in case any other UK iPhone owners have forgotten how to do it - and if you see me please come and say hello!

Party harty

Some of the places I plan to be are the 97bottles happy hour, the bowling, SXNW, the EllisLab party, the British Booze-Up and the MediaTemple closing party, among others. I’ve got HappyHour.org and Adactio Austin safely installed on my phone, and will be having a closer look at this impressive list of resources tomorrow before catching the early train to Heathrow first thing on Thursday morning.

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.

See you all there!

Mar 04

Four tips for making more money while staying local

Categories:
Tags:
Published:
5:18pm on Wednesday 4th March, 2009

John Nunemaker of Ordered List recently wrote about the effect that the current state of the economy is having on his company, 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:

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.”

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.

1. Make local connections

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.

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.

One of the best ways to get in touch with other web professionals in your area is to join a community group such as Refresh. 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?

I started Refresh Cambridge 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.

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.

2. Find your neighbours online

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.

I’m a big fan of Twitter, 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.

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.

3. Participate in offline community

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 Chamber of Commerce or Rotary Club, 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.

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.

(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.)

4. Search engine optimisation

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:

  • “cambridge web design”
  • “web designers in cambridge”
  • “cambridgeshire web development”
  • “web design near cambridge”

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.

I experienced this myself recently, when I was contacted by a local information architect looking for some help with an ExpressionEngine project. He had searched online, and apparently I was the only 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 my freelance site to ensure that I don’t miss any similar opportunities.

Summary

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.

Feb 13

Really Simple JavaScript toTitleCase() Implementation

Categories:
Tags:
Published:
9:46am on Friday 13th February, 2009

Googling for a quick answer to a problem I was having, I noticed today that there are no really simple solutions listed in the search results to a JavaScript implementation of toTitleCase() (the natural partner to the existing String methods toLowerCase() and toUpperCase().

So I made this one.

JavaScript TitleCase method

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 String type with a new toTitleCase() 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.

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). »
		toUpperCase() + A[i].substr(1);
	}
	return B.join(' ');
}

Include the above snippet in your script somewhere, and you can then call the method in the same way as the other String functions:

var s = "This is a sentence.";
var t = s.toTitleCase();

Neat and simple, and sufficient for most of your JavaScript title-casing needs.

Feb 04

New ExpressionEngine extension: Cachebuster

Categories:
Tags:
Published:
8:06am on Wednesday 4th February, 2009

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 setting far-future expiry dates 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.

Who ya gonna call?

Cachebuster 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 Stefan Hayden’s post on CSS Caching from 2006.

Installation

As this extension relies on hacking the core EE files, it is NOT 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.)

Hacking a new hook

Open the /system/core/core.output.php file and locate the following lines (around line 272 in EE1.6.5):

/**—————————————————-
/**  Fetch the buffered output
/**—————————————————-*/
		
echo $output;

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:

/**—————————————————-
/**  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_ »
output’, $output);
}
        
echo $output;

We also need to make sure we can refer to the $EXT object - scroll up to the start of the display_final_output() function (around line 94) and add $EXT to the declared globals on the first line of the function:

global $IN, $PREFS, $TMPL, $BM, $DB, $SESS, $FNS, $LOC, $EXT;

Installing the extension

Installing the Cachebuster extension is exactly the same as installing any other extension:

  1. Copy the ext.cachebuster.php file into /system/extensions
  2. Copy lang.cachebuster.php into /system/language/english
  3. Visit your Extensions Manager and enable the new extension

Using the Cachebuster

When you visit the Settings page for the Cachebuster extension, you will see five fields:

  • Current version – 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
  • Apply version numbers to CSS files – Choose whether you want to control CSS files
  • CSS filenames – A comma-separated list of stylesheets you want to affect (either with or without the ”.css” extension)
  • Apply version numbers to JavaScript files – Choose whether you want to control JavaScript files
  • JavaScript filenames – A comma-separated list of external scripts you want to affect (either with or without the ”.js” extension)

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:

<link rel=“stylesheet” type=“text/css” href=”/css/layout.css »
?v=42”>

Feedback and bug reports

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.

The extension also appends the version number to every 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.

If you have any suggestions for how to improve Cachebuster, please either comment below or on the GitHub Wiki for Cachebuster.

What is GitHub? 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.

Jan 31

Show, don’t tell - Hitchcock’s Rear Window masterclass

Categories:
Tags:
Published:
3:47pm on Saturday 31st January, 2009

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 Austin Powers films, where all story exposition is delivered — with a straight face — by a character aptly named Basil Exposition.)

Phyllis is afraid of dogs? Then write a scene where she has to deal with an overly friendly mutt — but definitely don’t 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.

Forty seconds of perfect cinema

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 Rear Window.

With not a word of dialogue or voiceover, the audience has been told:

  • Our hero’s name
  • The most important aspect of his character (at least with respect to the plot) — a broken leg has confined him to a wheelchair
  • How he sustained that injury, capturing a shot of a dramatic motor-racing crash
  • Which tells us the type of man he is: a risk-taker
  • 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?

Communicating all that information verbally, and in a way that didn’t seem forced or unnatural (“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!”), would have required several conversations with conveniently ignorant minor characters. Hitchcock manages it in forty seconds and one camera move.

Genius.

If you’re interested in more Hitchock

I highly recommend the Hitchcock Box Set, 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.

Or, if you want to improve your writing, I also recommend the On The Page podcast, 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 LA-specific suggestions, it’s always an entertaining 45 minutes of discussion and advice.

Jan 26

SXSW Countdown - a dashboard widget for OS X

Categories:
Tags:
Published:
2:26pm on Monday 26th January, 2009

If you’re heading to Austin, Texas in March for geek spring break (otherwise known as the South By South West interactive 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!

And it only took twenty minutes

Creating an OS X dashboard widget is simplicity itself. First, find some helpful instructions 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.

How to install your SXSW widget

If you’re not using Mac OS X, why are you still reading? There’s nothing for you here.

Mac users - download the archive below, unzip it, and double-click the SXSWCountdown.wdgt file to install it on your Dashboard. Position it front-and-centre, and check back regularly to watch the days tick down!

Jan 17

Reading List 2008

Categories:
Tags:
Published:
2:14pm on Saturday 17th January, 2009

This time last year (and with a little help from All Consuming) I looked back at the books I had read over the past twelve months. 2007’s haul was an impressive forty-four books; in 2008, however, I overdosed on door-stop fantasy novels bringing the total down to a less respectable twenty-six.

No Stalgia

Unlike last year, I did not re-visit any old favourites this time. I also read very few non-fiction books (at least compared to last time around). Here’s the full list.

Fiction

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.

  • The Transit of Venus (Shirley Hazzard)
  • Lucky Jim (Kingsley Amis)
  • Last Exit to Brooklyn (Hubert Selby, Jr)
  • Frankenstein (Mary Shelley)
  • American Gods (Neil Gaiman)
  • No Country For Old Men (Cormac McCarthy)
  • Last Argument of Kings (Joe Abercrombie)
  • Dead Air (Iain Banks)
  • Atonement (Ian McEwan)
  • Starship Troopers (Robert A Heinlein)
  • Maskerade (Terry Pratchett)
  • Little Brother (Cory Doctorow)

Comic books

Not very many graphic novels this year, but Watchmen is definitely on my reading list this year before the film comes out in March.

  • 1602 (Neil Gaiman)
  • The Complete WildC. A. T.s (Alan Moore)

Enormo-fantasy novels by George RR Martin

I’m a huge fan of quasi-historical fantasy author Guy Gavriel Kay, and discussions of the “you might also like” variety on the official GGK forums 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.

  • A Game of Thrones
  • A Clash of Kings
  • A Storm Of Swords Part 1: Steel And Snow
  • A Storm Of Swords Part 2: Blood And Gold
  • A Feast for Crows

Non-fiction & autobiography

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…

  • Building Findable Websites: Web Standards SEO and Beyond (Aarron Walter)
  • Blink: The Power of Thinking Without Thinking (Malcolm Gladwell)
  • Save The Cat! The Last Book on Screenwriting You’ll Ever Need (Blake Snyder)
  • Web Form Design: Filling in the Blanks (Luke Wroblewski)
  • The Principles of Beautiful Web Design (Jason Beaird)
  • Slash (Slash)
  • A Short History of Nearly Everything (Bill Bryson)
  • Dreams From My Father (Barack Obama)

Top Picks

Without a doubt the best book I read last year was Bill Bryson’s A Short History of Nearly Everything, 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 Sophie’s World did for philosophy.

Aside from Short History, I also rated Last Exit To Brooklyn (by Hubert Selby Jr, the author behind Requiem For A Dream); and Barack Obama’s first book, Dreams From My Father, was also a good read - I hadn’t realised that it was written so long ago, when Obama was around my age in fact.

For 2009 I’ll be tracking my reading as per usual, although I have a feeling I’ll be using the excellent Readernaut this time around.

Jan 06

Fun and games and audio and video with HTML5

Categories:
Tags:
Published:
10:35am on Tuesday 6th January, 2009

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 HTML5, the latest and greatest and very much still in-progress flavour of HTML. As Jeremy noted the other day, that decision has placed me in pretty lofty company this week, with UX London and An Event Apart both launching in the last few days and boasting the same stripped down doctype.

Choosing HTML5 was an easy decision

There have been a fair few articles written on the impending ascendancy of HTML5 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 XHTML2 and HTML5 - the author, David Andersson, confidently declared that ”HTML5 will be the future of the web”, and given the evidence it was difficult to disagree with him. A List Apart also published a preview of HTML5, and in September last year Ian Hickson gave a fantastic demo of HTML5 features at Google.

So, there seemed little reason not to make the move to HTML5, 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 HTML5 features as and when they were supported by browsers. My freelance portfolio also uses HTML5, but is otherwise indistinguishable from HTML5 - but for this site, I decided to kick the tyres on some of the new elements that are available.

Poetry ... makes familiar <object>s be as if they were not familiar.

Two of the new HTML5 elements discussed in the ALA article were the <audio> and <video> tags.

Until now, if you wanted to place audio or video in a web page, you had to use a combination of the <embed> tag (for Firefox) and the <object> tag (for Internet Explorer), together with some gobbledygook attributes to make sure the browser knew what you were trying to achieve.

HTML5, 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 if the browser did not recognise the new element. They have built-in graceful degradation! Here is the markup for the “standout tracks” on my recent top 10 albums post:

<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>

By placing a valid <object> Flash player inside the <audio> tag, and a simple link to download the MP3 file inside that, the track will still be available to visitors using browsers that don’t support the new element, and browsers that don’t have Flash installed. And it’s all perfectly valid HTML5!

(I’m using the 1 Pixel Out Audio Player Wordpress plugin and the instructions for non-WP blogs by Mindy McAdams - I chose this one because I liked the way it looked and worked on the Rissington Podcast.)

Audio player controls in Safari and Firefox

The end result will differ depending on your browser of choice. Opera and Safari 3.1 will use their native audio players, while Firefox, IE, and most other browsers will display the Flash player interface. Non-Flash browsers will display a simple HTML link to download the MP3 file.

This may or may not be the wrong way to embed video

As well as music clips, I wanted to embed YouTube clips that I had bookmarked via my Tumblr feed. The HTML5 <video> element is as simple to use as <audio>, 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 <video> elements wouldn’t work.

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 <video> 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 <video> 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.

When all browsers support all formats, markup will be so much easier

Until that time, I believe my <audio> setup offers the best combination of technologies; native where possible, enhanced Flash player if available, and plain HTML downloads for all.

Jan 03

Top 10 albums of 2008

Categories:
Tags:
Published:
8:27pm on Saturday 3rd January, 2009

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?

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.

All of which is by way of introduction to this – my top ten albums of 2008, as judged by the impartial Audioscrobbler over the last six months. (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.)

10. Viva La Vida (Coldplay) / Dear Science (TV On The Radio)

Tying for last place, both of these albums have featured heavily in end of year polls. Viva La Vida (Or Death And All His Friends) (to give it it’s full title) was #1 on Last.fm for 2008 despite not being as immediately catchy as 2005’s X&Y, 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.

TV On The Radio were a complete unknown when I came across their album on a Pownce-powered favourites list, but since first hearing Dear Science it’s been picked as album of the year by several notable publications, including Rolling Stone, MTV, and Spin Magazine. Think a synth-powered Interpol jamming with Scissor Sisters.

9. Brain Thrust Mastery (We Are Scientists)

New York trio (now duo) We Are Scientists’ first album, the awesomely catchy With Love And Squalor, would probably feature in my all-time top five, so I picked up their sophomore effort, Brain Thrust Mastery, 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.

8. The Seldom Seen Kid (Elbow)

Despite almost unanimous thumbs-up recommendations from friends, I’d never paid any attention to Elbow (with the exception of their cover of Independent Woman, accompanied by Joel Veitch’s animated kittens), but when The Seldom Seen Kid won the Mercury Music Prize, 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.

7. Glasvegas (Glasvegas)

I don’t remember where I first heard of Glasvegas – 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.

6. Fleet Foxes (Fleet Foxes)

Another album with a good showing in the end of year charts was the debut self-titled album by Seattle folk band Fleet Foxes. 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.

5. Death Magnetic (Metallica)

Death Magnetic album cover

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 black album, but the generally positive comments Death Magnetic was attracting on music forums prompted me to give it a go – and I’m very glad I did.

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, The Day That Never Comes – but despite the occasional clumsy wordplay, you can’t help but be swept along by the monstrous riffs and memorable lyrical hooks.

Standout track: Broken, Beat & Scarred

4. American Demo (The Indelicates)

American Demo album cover

For some reason I had it in my mind that I had picked up The Indelicates debut album, American Demo, 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 Sixteen, which made it my most listened track by quite a long way this year, thanks to multiple plays every time I drove them anywhere.

Standout track: Sixteen

3. The Red Album (Weezer)

Weezer red album cover

Aside from Buddy Holly with its great video, I’d not heard anything by Weezer until a friend bought their latest untitled-but-red album. 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.

It’s likely that part of the affection I have for the album stems from The Greatest Video Of All Time™, the meme-laden Pork and Beans, 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.

Standout track: Troublemaker

2. The ’59 Sound (The Gaslight Anthem)

The '59 Sound album cover

Now this choice I do know where it came from. A tweet from D Keith Robinson 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, Sink or Swim – a much rawer record, significantly closer to punk than Paramus – but it’s not as immediate as The ’59 Sound, 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.

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.

Standout track: High Lonesome

1. Chinese Democracy (Guns N’ Roses)

Chinese Democracy album cover

And so to my number one album of 2008, the long-awaited (and boy is that an understatement!) Chinese Democracy by Guns N’ Roses. Was it worth waiting seventeen years for? No, not by any stretch of the imagination. Is it really 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!

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.

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.

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”.

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.

“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.

Standout track: Prostitute

Jan 02

New ExpressionEngine extension: Scroll to new comment

Categories:
Tags:
Published:
8:44pm on Friday 2nd January, 2009

While developing this incarnation of The Watchmaker Project I came across one glaring omission in my new CMS of choice, the awesome ExpressionEngine.

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.

Update 27/01: At the prompting of Nathan Pitman of NineFour, I’m moving this and all future code posted here onto the free source control host, GitHub. It makes sense - this way I can make updates to posted code without having to update blog posts.

Scroll To Comment

Like all ExpressionEngine extensions, the steps to get this up and running are pretty simple:

  1. Download and unzip the files from the package
  2. Place the ext.scroll_to_comment.php extension file in the /system/extensions folder of your EE install
  3. Place the lang.scroll_to_comment.php language pack in the /system/languages/english folder
  4. Visit your EE Control Panel, and navigate to Admin > Utilities > Extensions Manager
  5. Enable the new extension
  6. Visit the ‘Settings’ page to change the prefix setting if necessary
  7. You’re good to go!

A few quick words on CSS id attributes

As noted a while back by Veerle, if you want your code to be 100% W3C valid you can’t start a CSS id 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:

{exp:comment:entries sort=“asc”}
<li id=“c_{comment_id}”>
<h4><strong>{url_as_author}</strong> at »
{comment_date format="%g:%i%a"} on {comment_date »
format=”%j%S %F, %Y”} <a href=”#c_{comment_id}”> »
#</a></h4>
<blockquote>
{comment}
</blockquote>
</li>
{/exp:comment:entries}

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.

What is GitHub? 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.

Jan 01

Redesign 2009

Categories:
Tags:
Published:
5:45pm on Thursday 1st January, 2009

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.

Goodbye Textpattern; Hello ExpressionEngine

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).

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.

Small pieces, loosely joined

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.

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.

Evolution

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:

animated design progression

I'd love to hear what you think - please use the form below to leave your comments. Some HTML is permitted: b, i, em, del, ins, strong, pre, code, blockquote, abbr. URLs or email addresses will be automatically converted into links.