Before you read this though, bare in mine I work from home, so I have no office I need to pay for. That’ll change soon though.

Hosting: $120 a month

I currently have three servers with Media Temple. One DV 3.5, one DV 4.0 and GS. Two are for hosting live sites, and the GS is for staging sites before they go over to the live environment. I only host about 10 sites for my clients, but I feel they deserve a decent server. The DV 3.5 is slowly getting more redundant as I transition sites off that and onto the 4.0, so in a month or so, it will be no more.

BrowserStack: $19 a month

We unfortunately need to test websites in many browsers (though I usually only do a quick skim, as I know the flaws in browsers more & more). For this, BrowserStack is amazing, letting me test in multiple browsers, on multiple devices.

Typekit: $50 a year, $4.16 a month

Self explanatory really. The Portfolio plan on Typekit gives me all I need, for my sites and my clients.

Spotify: £10 a month

Like most people, I listen to music all day. Every second I’m sat at my Mac, I have Spotify open, unless I’m listening to a podcast. I also use it in the car all the time via my iPhone, so the £10/month works great for me. For the price of a couple pints, I have a months worth of musical enjoyment.

FreeAgent: £18 a month

I need to send invoices don’t I. Well, FreeAgent comes highly recommended by me and countless others. I like what they do and am proud to support them.

Github: $12 a month

I try to get all projects in source control, where needed, so this works great for me. When the project is complete, Github lets me easily transfer a repo over to the client. Wonderful.

Photoshop: £17.58 a month

I need to this to see PSD clients sent me. Hate it all you want, it’s a necessity. :(

To sum up…

So, looking at the above, at the time of writing, it looks like my monthly cost for keeping the business ticking over is: £145.32, after converting USD to GBP. In other words, under 4 hours work a month to keep me up & running.

‘Post’ to ‘Article’ in the back-end

Most of the blog-type themes I’ve built have been designed to replace an existing (usually bespoke) archaic CMS, where the editors refered to (what we know as Posts) as Articles. It’s easy to add and helps people understand what things are.

// functions.php
// hook the translation filters
add_filter('gettext', 'change_post_to_article');
add_filter('ngettext', 'change_post_to_article');
function change_post_to_article($translated) {
     $translated = str_ireplace('Post',  'Article',  $translated);  // ireplace is PHP5 only
     return $translated;
}

/?s= to /search/ in URLs

It seems silly that WordPress gives us a powerfull pretty-url system, but still shows the get var name in the URL for searches. Let’s fix that.

// functions.php
// Changes ?s=term to /search/term
function change_search_url_rewrite() {
    if (is_search() && ! empty( $_GET['s'])) {
        wp_redirect(home_url("/search/") . urlencode( get_query_var('s')));
        exit();
    }
}
add_action( 'template_redirect', 'change_search_url_rewrite' );

Note, this will only work if you aren’t using the default ‘out of the box’ URls. Meaning, if you see ?uestion marks in normal page URLs, this won’t work.

Change default Gravatar

So we all know that WordPress uses the Gravatar system for avatars, that makes complete sense, the same company make it, but not everyone has a gravatar. I’d suggest most people don’t. The grey default WordPress provides for those people probably suits most ocasions, but when it doesent, another snippet will rescue you. You can set the source for the image as well as its name which appears in the ‘Discussions’ page in the back-end.

// functions.php
// Change default gravatar
if ( !function_exists('custom_gravatar') ) {
    function custom_gravatar( $avatar_defaults ) {
        $myavatar = get_bloginfo('template_directory') . '/images/gravatar.gif';
        $avatar_defaults[$myavatar] = 'Custom Gravatar';

        return $avatar_defaults;
    }

    add_filter( 'avatar_defaults', 'custom_gravatar' );
}

Define URLs

I’m sure we’re all migrated a WordPress site before, and needed to go into the SQL mid-migration and find & replace the old URL for the new one. It’s a pain in the ass. This will help.

define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST']);
define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST']);
define('WP_CONTENT_DIR', $_SERVER['DOCUMENT_ROOT'] . '/wp-content');

What it does, is makes every reauest for a URL use the one you provided. The code above takes the domain from whatever is in the URL and uses that, ideal for using the same database on multiple enviroments where everyone will have their own local URL for it. You can of course set it to use a hard-coded URL too.

Get the template name

This is a rather niche thing to do, but let’s say you need to know what template a page is made to use.

$template = get_post_meta($post->ID, '_wp_page_template', true);

That’ll return ‘page-my-special-template.php’.

Hide ‘Posts’ menu in the back-end

Not every WordPress site will have a blog in it. To make it easier for the admins to use, we should really clean up the menus.

function remove_menu_item() { 
    global $menu;
    $restricted = array(__('Posts'));
    end ($menu);
    while (prev($menu)){
        $value = explode(' ',$menu[key($menu)][0]);
        if(in_array($value[0] != NULL?$value[0]:"" , $restricted)) {
            unset($menu[key($menu)]);
        }
    }
}
add_action('admin_menu', 'remove_menu_item');

Remove other menu items in the back-end

On a similar vein to the previous snippet, we should remove other menu items we know arent going to be used.

add_action( 'admin_menu', 'my_admin_menu' );
function my_admin_menu() {
     remove_menu_page('link-manager.php');
     remove_submenu_page('edit.php?post_type=standard', 'post-new.php?post_type=standard');
}

To remove other menu items, you just need to add the URL for it. It works on default pages as well as submenu items, even in custom post types. To remove a submenu, you provide its parent URL and then the child you want to remove.

Add a TinyMCE editor anywhere

People like to be able to add links, bold stuff & what-have-you themselves, without writing code. So if you’ve added a textarea to anything, anywhere, help them out a bit by making it easy for them to format text.

So this gets the data, either from a global option (the first one) or from a posts meta data, or custom field data (the second one).

// Using option data (global)
$data = get_option('standard_intro_copy');

// Using post meta data
$data = get_post_meta($post->ID, 'home_video_text', true);

And this below is the editor its self. standard_intro_copy is the field name, be it global of meta data. Set media_buttons to true if you want to enable admins to add images & such. Also, set teeny to false if you want to give them full controll over things like colour. Screemshots below of teeny set to true and false.

$settings = array(
    'teeny' => true,
    'textarea_rows' => 12,
    'tabindex' => 1,
    'media_buttons' => false
);
wp_editor($data, 'standard_intro_copy', $settings); // data, textarea name, settings

Teeny: true

Teeny: false

Hopefully some of those will help you out. :)

HTML5 Forms

There’s a load of new form elements that came in HTML5. Here’s most of them. Each has a slightly different way of entering data and looks slightly different in the browser.

• file
• text
• url
• checkbox
• hidden
• tel
• email
• range number
• search
• date
• password
• radio
• color
• time

<input type=”email” />

Mobile devices make good use of these, changing the keyboard layout to make entering the data they’re meant to accept, easier. Notice how the @ symbol and the dot are already there? It just makes entering emails a little easier. Browsers also do a little validation on these too.

<input type=”tel” />

Other things happen when the input type is set differently, such as a number pad showing then the input it set to ‘tel’.

<input type=”date” />

Now, this is fairly common knowledge. We’ve been able to do this for a few years now. Where things get interesting is when using things like <input type=”date” /> You’ve all seen one of those popup boxes where you can select a date. It works fine on the desktop where you have a mouse and can precisely select what you want. Ever tried to use one on a phone though? It’s just painful. Same goes for dropdown boxes, or select elements if you know some code.

This is where JavaScript comes to play.

if (!Modernizr.inputtypes.date && !Modernizr.touch) {
    // Load your JS date picker
}

If you’re a developer, you’ve heard of Modernizr, i’m sure. For those who haven’t, it’s a library that detects if the browser supports certain things, letting us add or remove functionality, depending on the capabilities of the browser.

In this case, it means the date picker that’s really made for mouses, only gets loaded on devices that don’t have a native date picker, and aren’t touch devices. So, basically, a normal generic desktop.

You could omit the touch detection, but chances are, on the desktop, you’d want the date picker to be the same. Native date pickers are bloody hard to style.

The moral of the story here is, if the browser has a far better method of inputting data that’s better suited to the device, use it. Desktop == mouse, mobile is touch. Detect it, don’t assume anything, and you’ll have happier users.

CSS3 Columns

Next up, columns.

The feature you really want here, is the ability to split what would normally be a single vertical column of content into more than one.

<div class="content">
    <div class="item">
        <!-- Stuff -->
    </div>
    <div class="item">
        <!-- Stuff -->
    </div>
    <div class="item">
        <!-- Stuff -->
    </div>
    <div class="item">
        <!-- Stuff -->
    </div>
    <div class="item">
        <!-- Stuff -->
    </div>
</div>

So imagine how these boxes would stack up if they had no style. They could be paragraph elements, lists, images, almost anything.

With no styling, they stack up on top of eachother. Let’s do something interesting.

.content {
  column-count: 2;
  column-gap: 20px;
}

CSS3 gave us columns. This is as basic an example as you can get.

It’s kind of like floating elements to the left, but horizontally, kind of. An example will help.

So this is what it gives us. It may be what you want, but notice how the 3rd box is split to make each column the same height?

.item {
  display: inline-block;
}

This one chunk of CSS will help. It could be applied to each block of content, or just specific things like lists. Some slightly older browsers will split images too, so you might as well as it there as well, just to be sure. Let’s see what it does.

Ah. Brilliant. Just what we wanted.

Of course, the columns are horizontally fluid too. But they will get too thin at some point. So media queries to the rescue! We’re just setting the column count to one on screen widths less than 400px wide, or most phoned these days.

@media (max-width: 400px){
    .content {
        column-count: 1;
    }
}

:hover on mobile

The hover psdueo selector doesn’t exist on touch-only (apart from one device now) devices like the phone you have in your pocket. You’ll probably see the effect, after you’ve clicked on something. On mobile, we have tap events instead, which exist in both CSS and JavaScript. If you wanted the tap instantly, use this:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

Here’s the 3 events you’ll care about in JavaScript. Take a look at that link for a little more info, if you’re a developer. You can do amazing things when combining them like detecting swipes in any direction, and how long something is tapped for, for drag & drop interfaces.

touchstart
touchend
touchmove

Here’s how you’d apply those in jQuery because jQuery is JavaScript these days.

We’re just detecting a tap event on a element inside a container. The tap is detected immediately, therefor, there’s no delay at all, where as with a traditional desktop click event, there’s a delay of approximately 300 milliseconds which feels like an eternity sometimes.

$(“#container”).on(“touchend”, “.element”, function(){
    my.awesome.function();
});

Retina

You’re here, so I’m just gonna guess that you understand the importance of resolution independence. The ‘too long, didn’t read’ version would be, ‘non retina sites look like junk on my Mac, get with the program’.

Resolution, size, device & input independence is kinda why we’re here. Let’s talk about resolution though.

Icon Fonts

I would take a guess and say most of the images on the web these days are icons for things, like social icons, the house and search icons. This is where icon fonts can help. For content images, photos, we have other options. More on that later.

Icon fonts are by far the best way to make your site somewhat resolution independent. For those of you here who aren’t too clued up on this, icon fonts act the same way regular text does. It’s like an infinitely scalable icon, just the same way text it. It is text, but shaped like an icon.

If you have the skills or have access to someone who can make fonts, you’re in luck. You can have a complete bespokely designed icon font. That said, you can convert vectors to fonts.

The alternative for most people, is using a pre-made icon font. I’m a strong advocate for GitHub’s Font Awesome. It’s aimed to be used on GitHub’s own apps, but, being open-source, others have added icons and it’s very usable for many types of websites.

I mention this, because wouldn’t it be great if non-coder designers, knew about this font and used it in designs? It’s almost like retina assets for free!

The downsides? Tricks?

I guess that icon fonts are inherently flat and need a solid colour.

You can do some great stuff with CSS gradients & shadows. That said, if you’re sneaky, you can layer them up. If you use pseudo elements with the icon character’s unicode value as its content value, you can give different icons different colours and other treatments. You need a font that’s made for this though.

Image Sprites

Chances are though, you’ll need to add an image fo r things like the logo and maybe some other icons, or all of the icons.

Depending on how anal you get about serving the right assets to the right device, you could serve sprites for each pixel density to each device, or if you want to, you can group them, so send a 2x sprite to every device above a certain density (say, 1.3x). if you set a background-size on the sprite, you’ve covered all bases.

Pretty much every mobile browser in common use today will know what to do with background-size property in CSS anyway. For desktop though, older browsers, namely IE 8 and below, don’t know what it is, so it will show sprite assets at the resolution they are in the sprite, which would be twice as big in this case.

if you use a CSS pre-processor like Sass, it handles image sprites at different resolutions for you, providing you add the correct modules to Compass. That’s another talk altogether.

@media (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    background-image: url('sprite_2x.png');
}

Content Images

So that’s icon fonts & sprites covered, what about the rest of the images of people in suits standing around a computer smiling?

Well, there’s still a lot of arguing about this happening around the web. Rather than talk about all of them, I’ll quickly touch on the proposed spec as it stands today.

<picture alt="Description of image subject.">
    <source srcset="small.jpg 1x, small-highres.jpg 2x">
    <source media="(min-width: 18em)" srcset="med.jpg 1x, med-highres.jpg 2x">
    <source media="(min-width: 45em)" srcset="large.jpg 1x, large-highres.jpg 2x">
    <img src="small.jpg" alt="Description of image subject.">
</picture>

This is an example lifted directly from the spec, it’s a new element, the element. The alt tag that ordinarily goes on tags goes on the tag and the different sized images go inside it.

As is now with HTML, if an element isn’t supported, the browser skips it and jumps straight inside it and renders what it can.

One day, browsers will natively support it, but if you added this to your code now, the element inside the element would be shown, as it’s all the browser shows you.

You can polyfill it with JavaScript, but you’ll end up doubling the HTTP requests and ultimately slow the site down. And if the JS is slow to load, uses will see tiny images until the JS kicks in.

I’d just say leave normal square content images as 1x. Photos don’t look that bad at all when views on a higher DPI screen.

Vertical Alignment, sans floats

Quite often on product feature pages, you’ll have a list of stuff the thing does, usually in the form of images next to a bunch of text. If you’re only supporting IE8 and up, which you should, you can use tables to do this. Now, before you scoff at me for suggesting table layouts are a good thing, I do mean CSS tables, not HTML tables. Your regular, semantic markup structure can remain. :)

Now, It means whatever is in the box, be it an image, list, text or video, is in the middle of the box, vertically, without you needing to set where it sits.

Let’s see an example.

This is from the iPad mini overview page. It’s a perfect example of what I mean. And it’s check off the requirement of an obligatory ‘Apple in a slide deck about design’.

I would’ve used animated cat gifs, but I’m not gonna sink that low.

So how do we do it.

So this is how it may look if you hard-code it to sit, say 100px from the top.

But if you re-size it, the text still sits 100px from the top. Yes, you could fix it with a media query, but that’s a pain in the ass and ultimately, not very flexible or maintainable, especially if the content is controlled by a CMS.

So this is out intended result when the box is a little smaller. So how do we do it? Out good friend, tables!

CSS tables that is. A very different beast to HTML tables, but the same kind of power that we want, with none of the extra fluff.

The HTML

<div class="table">
    <div class="cell">
        <img src="me.jpg" />
    </div>
    <div class="cell">
        <p>Lorem ipsum dolor sit amet, consectetu.</p>
    </div>
</div>

The CSS

.table {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
    vertical-align: middle;
}

This is the equivalent HTML table, it should help you understand how the CSS related to the divs we had a moment ago.

Don’t use this, unless you’re doing emails or something else hacky.

<table>
    <tr>
        <td>
            <img src="me.jpg" />
        </td>
        <td>
            <p>Lorem ipsum dolor sit amet, consectetu.</p>
        </td>
    </tr>
</table>

So there we have it. Hope you learnt something new. :)

What use is ranting going to do? We all know there are prehistoric-idiots out there. Giving fuel to their fire isn’t gonna help. We know they’re idiots, we know to ignore them. Don’t give them they attention they crave.

The Work

I’ve learnt a lot about code in the last year. Not just bullshit ‘look at this great plugin’ crap, but real code that makes my clients money.

I structure my code in a set way, make it as object-orientated as I can, and comment well. Starting a complete new build every few weeks means I need to code as best I can. That said, I don’t do it perfectly. I just don’t have time to follow the latest & greatest method some designer thinks I should follow.

My side projects like Kodery and a couple templates I use for daily work have fallen by the wayside. They get updated, I use them but I’m yet to combine the various improvements and add to the GitHub repo.

Getting Work

All of my work is for design agencies and full-service agencies who need a little more specialised skill. This has been the same for a year and I intend on keeping it this way. I can manage teams of people I have close contact with and have done this in a past full-time job, not managing a clients expectations and keeping on the right side of them. (Aside, my first hire when I start my agency is someone who is good at client management.)

I was unfairly lucky when I started freelancing. I still had good press from getting that award. The attention slowly disappeared and I had the same struggle as everyone else, albeit with a decent head start.

Around June, 3 months in, I had a steady stream of work coming in, some jobs which spanned a couple of weeks, most a few days. Nowadays, I tend to work on projects spanning a month or so, sometimes a week or so. It’s rare I do a tiny job now.

I like it this way. Longer jobs mean less time switching my brain around, less admin, less talking to clients about possible work, and therefore, more money because I’m working, not pitching. A year in, I’d say my monthly income is around 50% higher than it was last year, almost all due to having longer projects.

Now, I don’t need to find work. It finds me. I like to think that’s a combination of good work, good reputation, casual attitude, and consistent recommendations from existing clients.

Scheduling & Quoting

I’ve said this a lot in recent months; quoting is hard, it does get easier. Make no mistake, it does take time, but it does get easier. I’m still getting better at it now. I’m still not great. I tend to work a day or more over my quoted time on projects, but that’s fine. It’s my fault for under-quoting on my time. I learn from it still. I was far worse to begin with, like all new freelancers. My 3 years agency experience somewhat helped, but not that much. I know my estimates there a little low there too.

Scepticism

I hinted at this earlier, but I am very sceptical about adopting the latest & greatest techniques. I don’t have time to piss around implementing whatever the cool kids are doing, then the fallback to it for every other browser. I need things to work first time, solidly across many browsers. Don’t get me wrong, I do use many features of CSS3 and parts of HTML5, but those are (more often than not) visual, and fallbacks are easy to provide. Implementing new units like rem and vw require a few fallbacks for most browsers. I just don’t want the hassle.

I am also sceptical about outsourcing stuff now. I’ve done this a couple of times and always had bad experiences, loosing a long-term client in one case. The lesson here is don’t guess that someone who apparently knows their stuff actually knows their stuff. Of course, no names and no specifics here. I may be a cunt sometimes, but y’know, I’m not that much of a cunt.

In the interests of disclosure, I have also been on the other side of the outsourcing fence. It wasn’t pretty, none of it sits in my portfolio and I found the whole experience tougher than working with my regular agency clients.

Cashflow

Doing slightly longer projects spanning between a couple of weeks and a month means I get paid more, but not as often. I would guess I’m typical in not having the well-proposed 3 months of cash. I would love to have that, but I started freelancing on a rather bad financial note. I’m in a little bit of debt from a prior life. I’m getting better and saving more, but it takes time to save the £8k I’d need to live comfortably for 3 months.

Room For Improvement

I want to improve a lot over the next year, who doesn’t. I actually have a list, which should be fairly self-explanatory.

1. Get a saving account and fill it to the brim for rainy days
2. Work more common hours and only work in those hours. Leave procrastinating to out-of-office hours
3. Move out of my parents house and rent somewhere cool
4. Save £15k and buy a newer car. (BMW 335i convertible for those who care)
5. Work on things that provide a passive income

Some things on that list require time, some require effort and a change of thinking. I have no idea what will happen with that list, and what order they will happen, or even of any will happen. Time will tell, but without big goals, what do I have to aim for. I have always dreamt big, with an even split of success and failure. I must try though.

I want designers, developers, UXers, IAers, copywriters, nerds, and people with other regular jobs to join me for the journey.

The Route

Here’s the alpha route. It’s around 2000 miles. (The green points on don’t have any real meaning.) I want suggestions on great roads we need to drive down and points of interest along the way.

How It’ll Work

I imagine there’s be more people signing up in groups for one car, so that’s all fine. But for those who want to drive but have no one to come with (either as a driver of co-pilot/passenger), i’ll make a list of each so you can pair up. Drivers will of-course have the right to refuse and limit the number of people in their car. I myself will have one passenger.

There will be no entrance fee, no money will be given to me for this whatsoever. I would like to list a few things for passengers though.

• Pay your petrol share for every leg of the journey you make, to whoever drives you, or at least buy them dinner. You can agree the details between you.
• Don’t be a bad passenger. No one likes a sticky person.

Joining & Leaving

I can fully appreciate a few people might not want to do this from start to finish. I have no problems with people wanting to join further up the country, we just need to know before we leave each morning so we know where to stop off for lunch for you to join us. Or you can meet up wherever we end up staying that night and start the next day. We will be tweeting the whole thing.

Costs & Timings

In my car, a fairly typical 2.0 petrol, Google says it’ll cost about £460. And food, hotels, beer and daily snacks, I estimate this will cost about £1000 over all, and would ideally take a week.

I know this will not be the cheapest of weeks, but I really hope it’ll be one to remember as a week of camaraderie, laughs, good sights and great roads.

I reckon this will be a lot of fun in the summer. So maybe mid July would be ideal. That works well for me at least.

Communication

The whole thing will be posted on Twitter for anyone who wants to join us, either digitally or actually come along for the ride.

For drivers talking to each other , I thing it would be amazing if each driver had a CB radio, so if someone breaks down, we can all stop and help. Whatever happens, driving keeping in contact would be rather crucial. A basic CB radio can be purchased quite cheaply. They are UK road-legal too. I’m open to advice here. Comment please. :)

Interested?

Pop me an email to pauladamdavis@gmail.com with the subject ‘Dev Drive’. Just tell me where your from, whether you’re a driver or passenger.

I may have forgotten some crucial details, so please chime in with the comments and let me know. I want to flesh-out the idea before I solidly set the date, route and stop-offs.

Update 1 – 17:48 – 18th March 2013

Stephen Fulljames has suggested a route through Wales