It was over a year ago that I moved into my house, and yet it's only now that I'm getting around to building a shed. Before piecing it together, I decided to treat and paint every part individually, and this required a trip to B&Q (other DIY retailers do exist). I had already scouted out a few colour variations, but had to run them passed the significant other before committing.

We arrive at retail park, and no further than one step outside of the car do we notice the smell. The air is filled with the delicious scent of a burger van, pitched next to the doors of B&Q. The tantalising fragrance of beef burgers and onions masking the odour of the rolls of grass and hanging baskets of flowers on display outside the store. My girlfriend proceeds with her usual comment, that she loves the smell, but hates the eating onions because of the texture. A sudden memory comes to me, and I start talking about some old story I'd heard from when I was in primary school. Unfortunately the memory was vague and a bit light on the details, but the general gist was as follows.

By the time I finish rattling on about this story, we have reached the paint aisle. I apologise to my girlfriend for having no reason for bringing up the tale, and for not being able to remember the ending. We pick out the colours we like, and head home.

Earlier that day, I'd received a package I had been looking forward to for some time. A project I had backed on Kickstarter at the end of January 2011 had finally arrived — "The Shape of Design", by Frank Chimero.

FreeAgent, if you don't know, is an awesome online accounting software aimed at freelancers and small businesses. Having made the switch over to it completely for my invoices, expenses and time tracking, I couldn't recommend it enough. While their default invoice themes are great, I've created a pack that is available for you to download and use for your own invoices!

The pack consists of a set of five colours – grey, blue, green, orange and pink – displayed above, and a print stylesheet. These can be used as-is, or customised to use any colours you'd like.

Like what you see?
Buy the pack, or Tweet about it and get a discount!

Buy now

The rest of this post is how to install and customise the themes. So, go ahead and download the pack first and come back for more information.

Installation instructions

To install one of the themes, follow the directions on the FreeAgent website found here: http://www.freeagent.com/support/kb/invoicing/theme-gallery.

Select your favourite colour from the pack, and paste the contents into the "Main CSS" tab. Regardless of which theme you choose, paste the contents of sjw_print.css into the "Print CSS" tab. Click the save button, and you're good to go! Now start sending those awesome invoices to clients.

Browser support

IE6+, Firefox, Chrome, Safari etc. are all supported for layout. All modern browsers that support CSS3 will also have some added niceties; rounded-corners, drop shadows and so forth.

Customisation

Zebra stripes

By default each of the themes has zebra stripes applied to the item rows of the invoice details table. If you're not a fan of zebra stripes, simply find the comment about "zebra stripes" in the CSS to remove them. This is an example from sjw_grey.css:

/* --- delete the next two lines to remove zebra stripes --- */
#invoice-amount .item td { background: #f5f5f5; }
#invoice-amount .odd td { background: #fff; }

Show or hide addresses

Though the Invoice Devkit FreeAgent supply has all of the possible information, sometimes I find that I don't have much more than a name and email address for a client. For this reason, I've also made an option to remove the address lines from the invoice. Look in the "Customization" section of the CSS file for the following, and remove the two lines it says to delete:

/* --- delete this line to remove addresses ---
.vcard { display: none; }
#invoice #invoice-info { clear: right; }
#invoice-header { float: left; display: inline; }
--- delete this line to remove addresses --- */

Make it your own

Each of the themes is built on top of the base "grey" colour, with the styling applied at the bottom of the CSS file. This makes it easy to customise any of the themes to fit your brand!

Like what you see?
Buy the pack, or Tweet about it and get a discount!

Buy now

Another year older, and I felt that this time it might be worth the recap on what I've achieved and what's happened for posterity's sake. This post is going to be a little rough, as it's mainly a brain dump of memories. This last year was — and I use the cliché purposefully — a roller-coaster ride of emotions.

In January I attended my first funeral. My grandfather passed away in the December, just before New Years. It was one of the most difficult things I have had to go through, and left me out of touch with reality for a little while.

He was my only male influence in life growing up, and as I moved away from home for university and work I had not spent as much time with him as I once had. That regret is still with me now.

In March, my cat — Felix — died. Fifteen years old; one month after his birthday. We still have his mother, but she was noticeably lost and confused for some time after losing him. While being allergic to them, I couldn't imagine being without them.

To something more positive. That Summer, in June, my girlfriend Becca and I bought our first house!

Back home, in South Wales, not too far from our families. Having been away to be closer to work this made for a rather relaxing change. Whether its a Welsh thing or not (as my old boss [we'll get to that] seems to think it is) — it's nice to be back around my family and old friends.

After Summer, I attended my second funeral. I was asked by my cousin to be a pallbearer at her mother's funeral. I have always been very close with my family; my cousin — or Auntie as I have always called her — used to babysit me, take me to school, and hasn't lived more than half a mile away my entire life. Her mum always had time for me.

The funeral was hard. Mainly just the look on peoples faces. The sadness that possessed them as they turned to look at what… who… you're carrying.

Two weeks after that, I attended my third funeral. Much like busses, at this point (if you don't laugh, you'll only cry). Becca's uncle passed away, and while I didn't know him, I went to support. It was held at the same crematorium my grandfather's had been in January — which brought back a lot of the same emotion and made it so much harder than I thought it would be.

September saw me end a three-year contract with Scholastic UK. I worked with a lot of talented people there, and am quite proud of a lot of the work we produced. Getting the chance to build a website for one of my favourite set of books growing up still feels pretty cool.

To think it all started with a Tweet to one of my idols — of Rissington Podcast fame — that I was pushed into sending. The Scholastic web team were a group of highly talented people, and I urge you to check them and their work out:

Simon Clayson, Graham Bancroft, Rachel King, John Oxton, Omar Qureshi, Shelley Fisher and Peter Mahnke.

Moving on… in October I bought Becca a puppy. To get the horrible bit out of the way — due to my allergic reactions to him, he lives with Becca's parents which is literally around the corner and so we still see him every day.

His name is Milo. He is a labradoodle, which, as it turns out, isn't hypoallergenic. He's absolutely awesome. Becca and I take him for walks every day, and try I try to get as much time with him as possible before the allergies kick off.

Milo, 10 weeks old

Milo, 7 months old

I still haven't quite gotten used to the "eating your own poo" thing, but Elliot Jay Stocks' post seems to sum it up perfectly:

if you could make your favourite food come out of your bottom — and hot — wouldn’t you eat it?

Ozzy's eyes

Since leaving Scholastic, I've had the opportunity to work on quite a few awesome projects, such as a feature theme for Karelia's Mac application, Sandvox. While I can't talk about some of the other projects I've been involved with yet, I look forward to sharing them in the future.

Here's to 2012!

After receiving yet another 'your domain is about to expire!' email from GoDaddy, I decided to let it do just that. I'm finally shutting down Scribble, and archiving it to some dusty corner of my back-up hard-drive. I wouldn't be at all surprised if you're never heard of Scribble, but it was in building the site during my spare time at university that made me want to do what I'm doing today. I won't go into any details on how I built the app (mainly because it was so long ago, and I can't remember everything), but for nostalgia's sake I wanted to give it one final farewell.

What is Scribble?

Scribble started out as a simple to-do list application. I created Scribble to solve my own major problem: keeping track of university assignments. I have an absolutely terrible memory, and the idea of a centralised list of things I need to get done that I could open on any computer on campus really appealed to me. I had checked a whole slew of GTD and todo-list apps but none of them seemed to fit with what I wanted.

I started with the basics; adding, deleting and editing to-do's (be a bit of a rubbish to-do application otherwise, wouldn't it). As there were multiple university assignments running at the same time, I added the ability to prioritize to-do's over others and sorting so that you could list them by priority or date added. I also added tagging, so I could tag the module each to-do was associated with and sort by that too.

While all well and good, I still had one problem left: I kept losing the files I was working on for each of the assignments. After completing a to-do, I'd email the file to myself so that I could wander up to campus, print it off and hand it in. Well, in the mass amounts of emails, I'd lose track of which version I was meant to be submitting. So, I decided to add file uploads to Scribble. I could assign myself a to-do saying X needs to be done, then when I completed it, mark it as done and upload the corresponding file. I encorporated Scribble into my workflow, which let me upload a file, tag it with the module and version number, delete the previous version and repeat until I was finished with the assignment. I didn't need anything as advanced as a version control system, not for simple documents and essays. Of course, this is before the days of Dropbox — where the majority of my files now live.

Getting "social"

When a university class assigned a group project, it was time to update Scribble to allow users to interact. I created a really basic way of allowing a user to assign another user a to-do, all you had to do is know the other person's username. When the other person logged in, they would be presented with a message saying they've had new tasks assigned to them. Viewing the list of assigned tasks, the assignee could then either choose to accept the tasks, or ignore them; whichever they chose, the assigner would be sent an email with the decision.

A friend's list seemed too advanced for Scribble; I had been reading 37signals "Getting Real". Reading the chapter on Feature Selection, I decided that it was down to the user to track their own friends. If you wanted to manage your friends, just create a to-do, tag it as "friends" and keep updating it with the users. Need to keep people separate, and remember who you are doing that maths class with? Create multiple todos, and tag them as friends and "maths class". It was a simplistic way of doing it, but it worked for me and didn't require me to spend too much time implementing new features.

Bookmarklets

The way I was using Scribble started to change from the initial "to-do list app", to remembering articles I wanted to read or videos I wanted to watch with the sound turned up (because that wouldn't be a great idea in the middle of class). So, I built two bookmarklets to help me add new items to Scribble.

Version one was the 'quick scribble'. Clicking the bookmarklet grabbed the page title along with any text you had selected within the document, and added it as a link to the top of your Scribble list.

Version two was 'scribble this'. This embedded the 'new to-do' form to the top of the page you were on, giving you the ability to write any text you wanted and set a priority on it. This version would also add a default value to the textarea, picking up the title of the page you were on and any text you selected. Both bookmarklets also appended a link back to the original page you were viewing.

Realising that a few of my scribbles were funny videos (of cats), I decided to embed the videos right into Scribble so that I could save myself the click. I implemented embedding for various video sites, including: YouTube, flickr, Vimeo, Metacafe, Viddler, Revision3, Qik, Hulu, Funny or Die and College Humour. I also added image embedding, from flickr and Picasa.

After graduating this is all I used Scribble for — browsing the web and saving articles to read later.

Mobile

When I got my hands on an iPhone, I realised I needed to add a mobile version of Scribble — it was the future, and I was excited to be able to carry around all my to-do's in my pocket. http://m.scribbleit.net/ wasn't an iPhone specific site exactly, but a stripped down 'mobile' version. No images, no video embedding, just a simple list and a way to add and track your scribbles.

In developing the next version of Gridinator, I wanted to make sure that everything that I was allowing in the pixel and em based layouts were available in the percentage ones too. That meant I needed to write fluid prefixes, suffixes and a few other things that are a little bit more complex in a liquid layout.

So this is where I ran into some major inconsistencies in the way different browsers render percentage values. While I'm well aware that things don't have to look the same in every browser, it just seems to strike me as odd that CSS3 features keep getting touted on the front of browser homepages, and yet something as fundamental as a percentage would be rendered incorrectly (or, rather, not as well as would be expected).

The image above shows a comparison of a Gridinator generated grid as displayed in Firefox, Safari, Chrome, Opera and IE6 through to IE9. To make it a fair test, the browser window was set to 940px in each case (thus giving IE6 a fighting chance, as it would normally ignore the max-width attribute). Each column is floated left except for the last one in each row, which is floated right.

Anything strike you as odd?

I don't know what I was expecting, but I was hoping for consistency between the modern browsers at least. Opera ignores the decimal places, Safari and Chrome seem to round to one decimal place, and who knows what IE8/9 are doing. Interestingly, it seems that Firefox rounds almost perfectly, as do Internet Explorer 6 and 7. This means that Internet Explorer is getting worse at rendering percentages in the more standards compliant versions than the ones us webbies have wanted dead for some time.

So, what is the answer? Is the hope of a truly flexible, fluid grid just a dream? Do we have to just settle for using CSS3 media queries and use things like Less Framework? Don't get me wrong, I have nothing against the noble pixel, but I really want to push forward and use more responsive designs with true fluidity.

Update: I've put the source HTML/CSS online so you can test for yourself.

Note: This article was originally written for Textpattern version 4.2. The links below are for different versions:

• View this article for Textpattern 4.4
• View this article for Textpattern 4.2

When I started work on redesigning this site, I also made the switch from WordPress to Textpattern. There was one thing that I really started to miss while developing the site — files for templates. WordPress had made this so easy in its theming system, which uses PHP files, thus allowing the use of an external text editor. Instead, Textpattern forces you to use a textarea in the admin interface, and saves the markup in a database. Since I like to have syntax highlighting and the ability to quickly edit multiple templates at once, I decided to create a little workaround to allow me to use files for both page and form templates.

Warning & Disclaimer

Before I begin, if you are allergic to looking at source code I recommend you look away now. Still here? Then let's begin, and don't say I didn't warn you.

The modifications made here are to the Textpattern 4.2.0 core library files, as such any updates to Textpattern will require you to repeat this process. While unlikely (I run this on all my Textpattern installations), I take no responsibility if your install breaks as a result of making these changes. If you would like a quick and easy method of having static page files only (ie: not forms), then please read this post by Mr. Hicks which explains how to achieve this with a lot less effort.

Getting started

This guide is based on creating the template folder outside of your textpattern folder at the same level as it. If you would like your templates somewhere else, modify the location in each case below. You will also need to enable "Allow PHP in pages?" in Advanced Preferences of the Admin tab, if you haven't already.

Pages

First, the templates for pages. In the textpattern folder, open the file publish.php. On line 482 is the start of the textpattern() function (do a search for 'function textpattern' in your favourite text editor). We want to edit this function to try and import a file, should it exist, before looking in the databse for the page HTML.

Replace lines 496 to 498 with the code shown in the Gist below — start copying from $html. The ... indicates that there is more code not shown, and the function textpattern() is to show what function you are editing in the file.

View code on GitHub

Textpattern will now look for page templates in templates/pages/ folder. Make sure to set up your sections and corresponding page templates as you want them. Create a new file in the pages folder with the same name as the page template you wish to use: default.php, for example, if you wish to overwrite the default page.

Forms

Following the same process as for pages above, open the file textpattern/lib/txplib_misc.php. On line 1589 you will find function fetch_form($name) (do a search for 'function fetch_form' in your favourite text editor). Replace this function with the one below:

View code on GitHub

Error pages

Just one more step left, 404/error pages (error_default in a standard Textpattern install). If you'd like a static error page too, there's one more step you need to do.

In the file textpattern/lib/txplib_misc.php, on line 1827, you'll find a function called txp_die (do a search for 'function txp_die' in your favourite text editor). Simply replace the code in that file with the code below.

View code on GitHub

And you're done! Congratulations, you now have a Textpattern install that can use template files!

If you are a user of Typekit you might be aware of a small problem reported on the Typekit blog:

If you are one of the people who use multiple font weights, I've written a little script to browser-sniff for iOS under version 4 and not include the Typekit embed script.

The first is JavaScript; where you would normally put try{Typekit.load();}catch(e){}, replace it with the first gist.

The second is a PHP version. It doesn't even embed the Typekit JS source if an iOS < 4 is detected, which saves some bytes — useful on a mobile browser, especially if it doesn't support the feature anyway.

View code on GitHub

Find on page (CMD+F on a Mac) was never something I really felt like I needed in Mobile Safari, until I bought an iPad. As the experience is more than the iPhone, it felt like it needed more of the features from a desktop version of the application. In an effort to learn more pure JavaScript I decided to create a bookmarklet to solve the problem. While I'm sure there are others out there, I created this for myself as a way to back away from relying on jQuery and teach myself some raw JS.

Features

• It reports how many results are found for your search keyword, and allows you to easily step through them.
• Text that is contained within a hidden element (display:none or visibility:hidden) are not shown; it highlights only what you're able to see.
• Native-ish look and feel for both the iPad and iPhone.
• It doesn't break the content of the page you search on, so multiple searches can be made without any issue.

Known issues

• Text within different nodes cannot be highlighted together — if part of a word is bold, it is considered a different word in terms of the search.

  Example: JavaScript

  The word "JavaScript" above is considered three words — "Java", "Scr" and "ipt", as part of the text is within a <strong> tag. As such, it won't get highlighted in a search for "JavaScript".

Download

CMD+F is free and open source. It is available to install from the installation guide here, and you can view the source and fork it on GitHub.

Update: Before you complain about the installation process, please read this post by Marco Arment regarding the state of bookmarklets on Mobile Safari.

A while back I intentionally broke the site in order to push me to redesign it and rethink the content I was putting out. Unfortunately, that didn't work and I just ended up with a broken site sitting online for months. So, after a (very) long break, Steff dot Me is once more!

The details

I've made the switch away from WordPress, and this site is now powered by Textpattern. It's taking a bit of getting used to, but ultimately I felt a bit trapped by WordPress and needed a bit more freedom — less of a blogging engine and more of a content management system.

The layout for this site makes use of a fluid grid generated by Gridinator (it actually uses a new version, more on that soon!), combined with @media queries, which has let me jump on the bandwagon of responsive web design.

You can view the grid by pressing G (or two-finger tap on an iOS device — warning: can be slow on long pages, and will lockup Mobile Safari until the grid is shown/hidden) as I'm using #grid from Analog, which I have modified slightly to make use of the Gridinator class names and thus making it fluid. As part of the responsive design, the leading and vertical rhythm of #grid adapts to the size of the browser.

The type in use is Adelle for headings and navigation, and Proxima Nova for body text. This is being served via the wonderful Typekit. You can view more details about the fonts used on this website on Typekit.

This site is marked up with HTML5 (for border-radius and text-shadow, obviously), and uses Modernizr to give IE the kick it needs to use the new elements, while providing feature detection for any snazzy things I want to progressively enhance. That being said, if anything looks a bit broken in any of the non-modern browsers, I don't overly care (sorry, but this is my personal site and it's my choice... just upgrade already).

Going forward

The goal of this new site — more than anything — is to give me the freedom to create. Whether it be in the form of writing in the journal section or experimenting in the lab; the aim is to just keep playing with and learning the new web technologies as they develop. It's certainly an exciting time for the web, and I'm happy once again to have a part of it where I can express myself.