Matthew Jackson

This is a pathetic piece of shit

2013-02-23T00:00:00-00:00

Nothing like a deadline to focus the mind, eh? I'm not trying to say "I don't want my client work to be perfect. Please take all my clients" but it is certainly easier to be pragmatic about things when you *need* to finish.

A blank piece of paper isn't at all frightening, when you have a deadline.

Dan Antopolski, Comedians Comedian Podcast, Episode 3

I heard the above during an episode of the excellent Comedian's Comedian podcast[^1] during which, Dan Antopolski was discussing his writing process and said a couple of things which nailed how I've been feeling of late.

When I was young, I used to draw. A lot. I was alright at it. I won a Blue Peter badge (sort of)[^2]. I wanted each picture to be its own work of art, like I saw in my head. No practice. No iteration. Just straight into the final piece every time. I had to have a crisp sheet of bright, white paper. I would need a pointy sharp pencil and a sharp, black, felt-tipped pen. Like, a Berol fine. Box fresh, without a fuzzy tip (that's how I roll kids).

When I made mistakes, the sheet was sacrificed. I hated the scratchy, corrective smudges of the rubber or the ghosts on the reverse if I (horror of horrors) used the back. I'm sorry rain-forests.

I've wanted to have a blog for some time. It almost comes with the job description. But I don't like designing for myself. I'm an awful client. I put it off for client work. I start. I get a new idea (almost as soon as I've started). I get bored. I redesign. I move things around the page. I decorate. I throw it out. I get a new sheet...

The fear of putting something terrible (or worse mediocre) on-line, something meant to represent me as a designer, developer and human, is crippling. The thing is, at some point you have to ship. You need to get on with it. If it never gets out of the door, it won't even be shit. It'll be < shit.

Mr Antopolski talks about a similar issue in the interview above and tells a story about the mother of his children, who, whilst working in theatre was given a maxim by her director:

Let it be the pathetic piece of shit it was always meant to be.

Dan Antopolski's children's mother's director, via Comedians Comedian Podcast, Episode 3

Thats it. My new mantra. Let go. Let it be awful, or mediocre, or fantastic. And iterate. And evolve. And improve.

So now my blog exists. It is rough. There's no navigation, no link colours, one grid layout for all sizes. It is not finished. But its shipped [^3]. It will change (probably). It will get better (maybe). If it doesn't, so what? Its just some shit I made.

@matthewbeta

Footnotes

[^1]: Which is amazing, by the way. Especially if you like geeking out on comedy. Even if you don't its great to hear people in a completely different field talk about there creative/collaborative processes.

[^2]: I came 48th or 76th in my age group for a competition to design a character for energy saving light bulbs (It was a glow worm. See what I did there?). I won a "competition Winner's badge, which got me into Bristol Zoo for free.

[^3]: Full disclosure I redesigned this halfway through setting the blog up

A tale of two porridges

2013-04-03T00:00:00-00:00

You know what really winds me up? Everything. I regularly veer from rage, rants and righteous indignation to abjectness, gloom and melancholia.

Sometimes over important things (government omnishambles, the forthcoming apocalypse, the royal family[^1]) Sometimes over fucking ridiculous things like my toaster (either cook the bread or don't, you bastard!), vapid link-bate on Facebook (Can you name a [insert noun] without a [insert letter] in it?), something called a "One Direction" and most recently an advert trying to spark a debate on how the nation wipes its arse:

I've been working pretty hard at on not being grumpy about things all the time. Mainly, I don't want my daughter to have to deal with a grumpy dad, however its also quite tiring being annoyed all the time. But the world makes it bloody difficult sometimes. I usually manage to avoid getting wound up before I leave the house (a consequence of not listening to The Today Programme anymore). Then t'other day, my other half bought some posh porridge...

Once upon a time there were two porridge manufacturers. Both decided to put each serving of porridge in its own sachet to make it easier to make in the morning. One manufacturer (lets call them Quakers), put nice clear pictures on the back showing you how long to nuke it for and (and), you can use the sachet to measure the milk. (G E N I U S). Their porridge was loved throughout the land, for the dwellers of Earlymornington were a simple people, with no use for fancy ideals like thinking or reading.

The second manufacturer (we'll call them Dorset Cereals), decided that people should probably not be given that sort of assistance. They decided they would write their instructions in 8pt monospaced type (white on light blue since you ask). The people of Earlymornington, were forced turned back to the cupboard to retrieve the box to find out how to assemble their breakfast. And they were sad and embarrassed by their simpleness...

Finally, as if to rub salt into my bleary eyes, you could still use the packet to measure the milk. It just wasn't made obvious so I wasted my time going back to the cupboard FOR NOTHING, people! Aaaaaaagggghhhh...[^2]

If we could change ourselves, the tendencies in the world would also change.

Mahatma Gandhi, Source

I think the reason I love my job so much (and the reason that I don't think I will ever tire of it), is that everyday I am given the opportunity to not let stupid details like this annoy other people. I might not be able to change the government (irony and satire) and I won't be able to stop ecological Armageddon (I buy cereal in individual packets FFS) but I can (hopefully) make buying a T-Shirt or booking a holiday a smooth (maybe fun) experience.

@matthewbeta

Footnotes

[^1]: Seriously, why the fuck are we paying for these people?

[^2]: Actually, reading this back it sounds as though I'm being pretty stupid

Notes on customer service

2013-07-03T00:00:00-00:00

The following are some rules I've learned during several years of customer service jobs in my previous life as a senior complaint handler for a large financial institution. I have written them down as a note-to-self as I could do with being reminded sometimes. Thought maybe others might find them useful too:

Everyone is a customer

The back-end dev who works in your studio? She's a customer. The junior designer who shadows you? He's a customer. Your boss? Customer. Printers? Customer. They are all relying on you to provide something. Even if they are not direct customers. All the following rules apply to all of them.

Be nice

Its not hard. Introduce yourself if you've not met, shake hands, make small talk about the weather, ask how you can help. Be attentive when they talk and excited, passionate, polite and helpful when you talk.

Your shitty day does not matter

If you can't handle putting on a front and being nice as pie like you're having the best day of your fucking life, don't go to work. Whatever happens, follow rule number 2.

Talk

Talk all the time. Regular update emails. Daily/weekly calls. Face to face meetings. Keep the communication up. Show sketches. Show the progress of the work. Show good ideas. Show bad ideas. Silence is the enemy.

Listen

When they're telling you stuff, make sure you listen hard. Make notes, clarify points and ask questions at the end if you still don't get something.

Manage expectations

Customers can like surprises, but only good ones. Commit to stuff you will definitely do. Tell them what you won't do, if appropriate. Try and explain when you'll do all the stuff and keep them in the loop if the timescales or things change.

If you commit to doing something, verbally or in writing, do it. No ifs. No buts. If the reason you can't do it is outside of your control, tell them soon and suggest an alternative. If its a temporary hiatus on doing the thing, explain when you expect to be able to do the thing and feed back to them.

Oh if you have to deliver bad news, it'll suck, but most people can take it and take it pretty well. Just be helpful and bring some potential solutions to the wake if you can.

Embrace complaints

Fuck ups and customer complaints are both the best feedback you'll ever get and the best opportunity to make a customer love you. If you fuck up, don't try and cover it. Admit and fix it. Don't believe me. I got statistics, fool. Further listening on this subject here.

Don't be a dick

Scenario A: If you turn a project around under time (it happens), you will be tempted to pocket the change and take a few days off in your pants. Don't. Instead, why not say “Hey. We're already done. You can have more internets for your moneys! Or maybe we'll renegotiate the moneys”. That customer will come back.

Scenario B: If you can't do what they need; tell them. People prefer honesty. Tell them what you can do and how you'll help them. If its not right for them, try and point them in the direction of someone who can help. They'll appreciate it.

Let them shout

If a customer ever feels the need to shout at you, Let them. Whether they are in the right or completely out of order. Let them know your listening (nod or make “uhuh” noises). Make mental or actual notes. Then when they're done you have two options:

1. Say sorry. Discuss how you will put it right.
2. Don't say sorry. Discuss how you will help put it right.

Might be your fault, might not. Fix it. Be a hero. (See Don't be a dick)

Be appropriate

An attractive member of your preferred sex approaching you demurely in a night club (should) precipitate a very different tone and body language from you than a police constable walking up to the side of your car, which he has just pulled over.

Likewise, when you meet a customer, you can pretty much tell if you need to use your serious-face or not. You are a grown up.

Whilst your voice should always be professional, the tone of your voice, the language you use can (and should) be altered for the customer in front of you. They aren't always in front of you though.

Sometimes, answering the phone or sending an email starting “'Sup”, will be totally fine. Other times, it will be wholly inappropriate. You may only deal with “cool” bro-grammer start-ups, but if your shit is hitting their fan, answering the phone like that will lead to them tearing you a new one.

My advice, have a standard greeting, for any communication where you can't see their face. It should say hello, tell them who you are and ask what they want, nicely.

Its ok not to know something

If someone asks you something in a call or a meeting and you do not have a fucking clue what they're talking about, you may feel an overwhelming desire to make something up. Stop. Don't panic.

Customers are humans and they know you are a human. They will understand, and in some cases be reassured, if you take a breath and say: “I'm sorry I don't know the answer to that, I will get back to you on that later today” and move on. (See manage expectations)

Empathy

A company I used to work for had a corporate initiative which was "Walk a mile in the customer's shoes". I wouldn't necessarily have put it as wanky as that, but the sentiment is good. Just have some consideration for their perspective. This extends to not bitching on twitter when they want the logo bigger or the background green, or when they want to use the design their nephew made in Powerpoint. Empathise. Understand. Explain why their idea is balls and why your idea is the balls.

Know when the customer is wrong

It definitely happens. If you know you're in the right about something tangible (eg. not a preference on colour based on a design hunch), you are allowed to be firm and stand your ground.

Letting go

Sometimes you will lose "battles" with the customer. Sometimes your idea will be the wrong one for their business or brand. Sometimes their idea will be better. Sometimes their idea will suck so hard… Ultimately, it is their call and they are paying you to fulfil their brief. Sometimes you eat the bar sometimes the bar eats you.

Smile

The customer will smile with you. It will come across in correspondence, communication and your work. Smile when you answer the phone. Smile when you write the email. Smile at the meeting. Smile during daily stand ups. Smile while you're making stuff. Smile when you deliver the stuff. Smile writing the invoice. Smile writing the chasing letter. Smile when you get paid.

Jesus. You get paid to do your fucking hobby.

@matthewbeta

Setting up Grunt from scratch

2013-09-08T00:00:00-00:00

Being a modern web designer involves a lot of tools. Grunt is currently my new hotness. Its a tool I use to manage a bunch of other tools I use. In fact its consolidated about 5 different tools I had into one click (well command but more on that later).

In this post I'll walk through getting set up with Grunt and in the next post, we'll set up Grunt to handle Sass with Compass, Jekyll, JS concatenation and minification, Live reloading changes to any of the HTML/CSS/JS and finally multi-device browsing and browser refresh. Boom.

Rule 1: Don't fear the Terminal

We're gonna get in the command line in a minute. I promise it isn't gonna get weird. I used to hate it too. Then I got to love it. Then I started using it for loads of stuff. Then I hated it, because all the tabs or windows I needed open drove me nuts. What's so beautiful about Grunt, is you can run loads of commands in one line. Stick with me on this, its awesome[^1].

Just follow along with what I'm doing by copying everything out of the code example after the $ sign (that's just t omake it look more like OSX terminal and makes me feel cool). The commands examples are the same for Mac and Windows and if they aren't I'll write them both out cos I got your back.

Windows note: You can't ctrl+v to paste in CMD in windows. You can right-click and paste though.

Install all the things

Ok So first we gonna need to get our Node on. This is a cinch. Go to the Node JS Website. Click install. Job done. You are one of the cool kids.

When you install node, you also get NPM. NPM is a big library of Node modules (kinda like apps or plugins built with and for Node). Its also how we're gonna install Grunt. Its Terminal time.

Open up the Terminal (Mac) or Cmd (Windows) and type in:

$ npm install -g grunt-cli

Lets break that down:

"npm" tells terminal/cmd what program we're commanding
"install" is the command
"-g" is an argument (a kind of optional bit of info) for the command short way of saying "--global" This means we're installing Grunt globally on our system. This is a good thing. You want to be able to use it everywhere.
"grunt-cli" Is another argument. This time telling NPM what you want to install. In this instance the Grunt Command Line Interface.

So basically you told your computer:

$ Yo, Computer 

$ Get NPM to install Grunt globally, is it? 

$ I'll put the kettle on.

Hit enter.

The terminal or the cmd window is gonna go a bit Matrix for a bit. It's basically telling you what its doing. It can look a bit scary, but should all be fine.

When I installed something from NPM for the first time on a mac, I got an EACCESS Error (which scared me). Didn't happen on Windows though.

A lot of solutions online tell you to just install the package again like this, using SUDO.

$ sudo npm install -g grunt-cli

Ummm. Don't do that. Although I trust Bocoup and the community around the grunt-cli, this is a bad habit to get into. The sudo command is basically the airport security for your mac waiving someone through an airport security check. Sometimes thats good. Sometimes we want people to be checked.

The method I used is to type this in the terminal once:

$ sudo chown -R $USER /usr/local

I got this code from Aral Balkan and he also points to this What, no sudo? article furthering the point above.

Getting ready to Grunt

First we're going to get the terminal/command prompt to the right folder. To do this we use the change directory command or cd.

$ cd path/to/my/project-folder

and hit enter. The terminal should show you what folder you're now in. This means any commands you run now will be specific to that folder.

Mac note: on a mac, you can do this

$ cd ~/path/to/project

The ~ puts you in your home directory.

Windows note: on windows, I do this

>_ cd c:\path\to\project

Setting up a Grunt on a new or existing project is easy. You just need to add 2 files to the folder where everything lives: Gruntfile.js and package.json. These files are pretty central to how Grunt works. The package.json file tells node all the things you need to include in your project and also some general information, which might be useful if your project is on github or something. Here's an example fo the package.json file for this site, with some dependecies removed so its not really long:

// package.json



{

  "name": "Matthew-Jackson.com",

  "version": "1.1.0",

  "description": "Personal Site",

  "main": "_site/index.html",

  "repository": "https://github.com/matthewbeta/matthewbeta.github.io",

  "author": "@matthewbeta",

  "devDependencies": {

    // dependencies here... 

  }

}

You can make a package.json file in the command line or you can copy the example into a new file, save it as package.json nd edit the bits you need.

To create it in the command line hop over to the terminal. You should be in the right folder if you followed along earlier:

$ npm init

The command prompt will walk you through setting up the file automatically§ in this format:

Question(NPM Suggested answer)

It'll look something like this:

Press ^C at any time to quit.

name: (awesome) 

version: (0.0.0) 

description: Demo

entry point: (Gruntfile.js) 

test command: /

git repository: /

keywords: /

author: @matthewbeta

license: (BSD) /

Question(NPM Suggested answer)

You can either type in an answer, or if NPM guessed right in the suggestion, you can just hit enter.

Next create a new file in your project and name it Gruntfile.js. Copy and paste in the following code (we'll go over it in the next post):

module.exports = function(grunt) {



  // Project configuration.

  grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

   // Tasks

  });



  // Load the plugin that provides the "uglify" task.

  grunt.loadNpmTasks('');



  // Default task(s).

  grunt.registerTask('default', ['']);



};

Recap

Ok. That was more epic than I intended but the initial set up is the hardest/least fun bit. We installed Node.js and NPM. Got used to using the command line, installed Grunt globally and set up our project to use Grunt. You should feel like a fucking boss. Good job. Next time all the cool stuff.

@matthewbeta

Footnotes

[^1]: Check out this guide to terminal for Mac or this Guide to command prompt for Windows

Installing Sass and Compass on Mac or Windows

2013-09-14T00:00:00-00:00

Quick post. I'm going to assume you've heard of Sass and Compass before and I'm not going to cover any of that. If you haven't heard about them or their preprocessor cousins I hope you get good broadband under your rock cos you need to do some serious google catch up.

If you want to Sass and Compass without a tool like Codekit or Prepros (I did to use Grunt) then you might have to go and install Sass and Compass manually. Don't worry. Its super easy.

Don't fear the command line

First thing's first, we need to do this via the command line (CMD in Windows, Terminal on Mac). I used to fear not having a GUI. Then someone pointed out to me "The Command Line is the GUI". Once you get used to it and get over the inital fear of wiping out your hard drive or sending your browsing history to the NSA (lolz) its really awesome. I recommend reading these posts if you wanna bit of a primer or a walk through some basics:

Installing Compass

OK so if you want Compass you need Sass, and if you need Sass you need Ruby. If you're on a Mac, you already have it[^1]. If you're on Windows - too bad... Just kidding. Installing Ruby on a Windows is easy. Go get rails Installer and download the appropriate package for your OS. install it (it installs a bunch of useful stuff, including Ruby, Ruby-on-Rails and Git). Go do that and I'll wait here...

Done? Cool. So now we want to make sure Ruby Gems is up to date. Ruby Gems is like NPM but for Ruby (maybe NPM is like Gems for Node, I dunno). If you don't know what I'm talking about, go read the previous article.

So jump over to your command line

$ gem update --system

That'll get everything up to date before we install Compass. Now enter

$ gem install compass

Done. Thats Sass and Compass (and Ruby) installed and this is only the 5th(ish) paragraph.

@matthewbeta

Grunt workflow for compiling Sass & Compass and minifying Javascript

2013-09-17T00:00:00-00:00

Previously, we installed Node, NPM and Grunt including setting up a package.json and a Gruntfile. In this exciting installment, we're gonna plug everything in so you can see how amazers Grunt is, experience its awesome power and bathe in a warm glow of lazy satisfaction.

If you haven't installed Node, NPM and Grunt, you need to. So jump over to that post and install all the stuff (its really not hard or too scary) and then come back.

Here's what we want Grunt to do for us:

Watch our project for changes to HTML, JS and Sass
Compile our Sass and Compass
Minify and concatenate our JS

Lets crack on.

What is Grunt again?

Grunt is a javascript task runner, in that it is written in Javascript (using Node JS) and it runs tasks. Grunt uses 2 files - a package.json (which tells grunt what all the dependencies it needs are) and a Gruntfile. If you followed the previous article, you might have both of these in your project folder. If not go download or fork the Github repo.

Package JSON File

The package.json file is an NPM thing. My understandign (or lack of) is that it stores metadata for all your Node dependencies in your project. Here's a nice overview of package.json.

Installing a Grunt plugin

Grunt makes use of plugins to do all its automating and task running. We need several plugins to achieve our 5 goals set at the top of the post. We need one to watch for changes, one to run compass, one to concat/minify our JS and one to do the live reload multi device thingy.

Jump over to your command line. First we need to browse to our project in the command line:

$ cd path/to/my/project/folder

So, if you input "cd" followed by the path to your project, you can now install the first plugin; grunt-contrib-watch

$ npm install grunt-contrib-watch --save-dev

The command line will throw some robot-barf at you now but keep your cool. When thats done, go check your package.json file. It should have updated the dependenciy section to include grunt-contrib-watch:

{
 // ...
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-watch": "~0.5.0"
  }
}

Now go back to the command line and repeat this process (ie. one by one) with the following plugins:

$ npm install grunt-contrib-compass --save-dev
$ npm install grunt-contrib-uglify --save-dev

So with a bit of luck, you now have all the plugins you need for your project. Your package.json should list all these in devDependencies (maybe a few more too).

Gruntfile

A grunt file looks a bit like this:

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
   // CONFIG ===================================/

  });

  // DEPENDENT PLUGINS =========================/

  grunt.loadNpmTasks();

  // TASKS =====================================/

  grunt.registerTask('default', []);

};

The Gruntfile is split into 3 main sections:

Dependencies
Tasks
Task configuration

You set up the configuration and options in the first section of your Gruntfile, you then reference the plugin in the second section, then tell Grunt to run the plugin, as per the configuration. This is done by either typing "grunt" into the command line, or "grunt task-name" to run a specific or subset task.

Lets first list our dependencies to include. Find the line grunt.loadNpmTasks(); and copy and paste it 3 times. It should now be this:

// ...

	// DEPENDENT PLUGINS =========================/

	grunt.loadNpmTasks();
	grunt.loadNpmTasks();
	grunt.loadNpmTasks();

	// ...

};

Add the name of a plugin, wrapped in quotes, between each set of brackets so it looks like this:

// ...

	// DEPENDENT PLUGINS =========================/

	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-compass');
	grunt.loadNpmTasks('grunt-contrib-uglify');

	// ...

};

Next, lets configure our watch task. Underneath the comment about Configuration copy and paste this:

// CONFIGURATION =============================/

watch: {
 	compass: {
    	files: ['**/*.{scss,sass}'],
    	tasks: ['compass:dev']
    },
    js: {
		files: ['**/*.js'],
		tasks: ['uglify']
	}
},
// ...

};

What we've done here is to create a watch task, sub tasks of that called compass (which we'll refer to now as watch:compass) and js (watch:js). We configured watch:compass task to watch files with .scss or .sass extensions. If they change the watch:compass task will call our "compass:dev" task. We configured the js task to watch for changes in js files and run the "uglify" task

Lets set up the Compass task. After the last closing bracket and comma of the watch task (follow the indentation) add the following:

compass: {
	dev: {
		options: {              
			sassDir: ['styles/sass'],
			cssDir: ['styles/css'],
			environment: 'development'
		}
	},
},

Now we've set up a compass task, with a sub task called dev (compass:dev), we've topld it where our sass is and where to output the css. We've also set the environment to production. This will use some defaults for our compilation which are useful for development (like keeping it expanded, adding line comments etc).

Now we could have just set up a compass task (without the dev bit). The options chunk would have just been between the compass:{} brackets. However, we're going to be a bit smarter thn that. We're going to set up a seperate sub task for production. Edit your compass task to look like this:

compass: {
	dev: {
		//... dev options here
	},
	prod: {
		options: {              
			sassDir: ['styles/sass'],
			cssDir: ['styles/css'],
			environment: 'production'
		}
 	},
},

Now we could call compass:prod as a task and it would copile our sass into a compressed style, ready for deployment.

Lets set up our ugilfy task to concat and minify our JS. After the compass task, add the following:

uglify: {
	all: {
		files: {
        	'js/min/main.min.js': [
        	'js/libs/jquery.js', 
        	'js/main.js'
        	]
    	}
	},
},

When we call this task, Uglify is going to get all the files listed between the square brackets, minify them and then squish them all together. If we had some sort of HTML build process (say using a static site generator) we could include the full scripts in development and run the above minification code as apart of our prod task - just like we did with the Compass task above.

Its this kind of build procedure that really makes Grunt shine over things like Codekit (which is awesome and that isn't meant to sound like a diss). You can run a tailored dev and production build just by using a grunt prod command. You could even use something like Grunt Git Deploy or Grunt FTP Deploy as part of the pro build and send your site up to the server. But I digress...

Default task

We need to compile our CSS and JS when we kick Grunt off. We also wanna run our watch task. To do this, we'll trigger it using our default task. Find the line in your Gruntfile that looks like this:

grunt.registerTask('default', []);

Any tasks we want to run when we enter Grunt need to go between the square brackets. so add 'compass:dev' , 'uglify' , 'watch' between the brackets (with quotes and comma seperated).

Anyways, lets try out what we've done so far. Jump over to your command line (making sure you're in your project folder), type "grunt" and ~~hit enter.~~ We forgot something!

If you had have pressed enter, you would have seen this:

Running "watch" task
Waiting...Warning: EMFILE, too many open files

over and over and over again... You can try doing it if you like, just be prepared to hit ctrl + c (Mac and Windows) to cancel the process.

The reason is we're watching all the JS files in our project. If you go take a peak in the node_modules folder (which was added when we installed all our node plugins, you'll see we have lots of folders wiht lots of javascript files in them. We need to be more specific about what js files to watch. Update your watch task:

watch: {
 	compass: {
    	files: ['**/*.{scss,sass}'],
    	tasks: ['compass:dev']
    },
    js: {
		files: ['js/**/*.js'], // <== CHANGE HERE
		tasks: ['uglify']
	}
},

By adding the js folder, we can ensure Grunt isn't wasting time and energy watching millions of js files (unless you have millions of js files in your js folder - I don't recommend a million javascript files in your project)

Try running grunt now by going to your command line and entering “grunt”.

Running "compass:dev" (compass) task
unchanged styles/sass/style.scss
Compilation took 0.001s

Running "uglify:all" (uglify) task
File "JS/min/main.min.js" created.

Running "watch" task
Waiting...

Boom! The feedback is pretty self explanatory. Whats it waiting for? Changes to compile. Go make a change to the style.scss file and hit save. Now check the command line. You should see something like:

Running "watch" task
Waiting...OK
>> File "styles/sass/style.scss" changed.

Running "compass:dev" (compass) task
   remove .sass-cache/ 
   remove styles/css/style.css 
   create styles/css/style.css (0.009s)
Compilation took 0.01s

Done, without errors.
Completed in 1.305s at Mon Sep 16 2013 22:31:48 GMT+0100 (BST) - Waiting...

The change should now be visible in your css file too! Huzzah.

Seperate Grunt tasks

The last thing we'll set up is a non-default task.

Now you can run any task in grunt by typing "grunt taskname:subtask" in the command line. For example to run our compass:prod task, we would enter:

$ grunt compass:prod

That would be fine, but if you had a JS build for prod, or the aforementioned ftp deploy you wanted to run at the same time, that would be moer cumbersome to type into terminal.

Underneath the line of our default task, enter the following:

// PROD BUILD
grunt.registerTask('prod', ['compass:dev']);

Here we create a task called "prod" and add one task to be run when its called (our compass:prod task). Same rules apply as the default task, to add others, just add them in the order you want them performed (left to right), in quotes, comma seperated.

Go make a change to the Sass file and then run this in terminal:

$ grunt prod

If everything worked, it should have recompiled, but compressed th eoutput CSS onto one line.

Automation work done = Cocktails

And we're done. Its a bit of work setting everything up, but now most of that is done and won't need so mch work next time. It'll be simple to take the Gruntfile and Package file and extend them to meet the needs of your next project.

If I got anything wrong or you've any questions, tweet me. I'm generally not a dick.

Happy grunting.

@matthewbeta

Update Thanks to @rightsaidjames for this pull request. Corrections have been made!

Do

2014-01-27T00:00:00-00:00

You can wait for your boss to tell you to do it, your client to ask you to do it or for someone else to blog about how to do it

Sometimes you just have to do it.

@matthewbeta

Weeping coconuts

2014-01-31T00:00:00-00:00

Of course we all know Facebook is the fount of all evil, but this week I saw a post from a friend, which was sort of a chain letter that didn't make me want to pick out my eyes with rocks. It was a call to occupy Facebook with art

The post was a picture of Jake and Dinos Chapman's The Sum of alll Evil. The piece is as awesome as it is horrific, so I clicked like (as is the parlance) and commented my approval. However, my comment was then replied to, informing me I had been given Frida Kahlo.

Wat?

Re-reading the initial post explained that by liking it, I consented to taking part in a sort of cultural sit-in. Not being a huge fan of Kahlo, I'm not very familiar with her work. She's the self-portrait lady, yeah?

I did some google research and found out a bit about her style and why she painted what she did. Started reading a bit of bio and before I knew what was going on I was learning about something. Something that wasn't javascript or CSS level 4 selectors and it was interesting, damnit.

I eventually settled on this:

Weeping Coconuts (Cocos gimientes) by Frida Kahlo (1951)

I chose this because it's supposed to be very sad; As Kahlo got older she turned away from self-portraits and started painting still life. This was possibly due to the affect of prescription medication had on her ability to paint with the detail she'd used to ^1. Kahlo thought they would sell quicker and she and her husband, Diego Rivera, needed money to pay her medical bills ^2. However, despite this tragic tale, nothing about the actual image seems sad to me. In fact, a crying coconut seems absurdly funny.

It was painted as a gift to a friend, Elena Boder. Boder didn't like it and returned it, expecting Kahlo to offer her another one. She didn't. She just painted over the "For Elena Boder" bit and sold it ^3. Hence the message on the finished piece saying "Painted with great affection. Frida Kahlo"

Clearly an excellent sense of humour.

Header image attributed to velovotee from The Commons on Flickr

@matthewbeta

Footnotes

How much does a website cost?

2014-03-06T00:00:00-00:00

If you ask me, I'm gonna ask how much you got. I am aware that makes me sound like a jerk. Or a con artist. Let me explain why it makes sense for both of us.

My partner and I are currently trying to buy a house (I know. Pretty cool). Now there are houses and there are houses. One of the first questions the Estate Agent will ask is always "what's your budget?"

An estate agent needs to know how much I have so we don't waste each others time either looking at stuff I can't afford or places I don't wanna live.

A website is a lot like a house. It can be big. Or small. Complicated or easy to build. Have lots of features or hardly any. It has running and upkeep costs… You get the idea.

I have a figure in my head of £250 to £300 per day when I look at a project. How many days it takes me are dependent on a lot of things, as explained above. Is that amount negotiable? Everything is negotiable.

Building a website or app is a 2 way thing. Both you and I are gonna dance. What you initally wanted might not be possible for your budget. But we can work out a solution to your problem that is within your budget (probably) and build the best website you can afford.

So… what do you wanna make and how much you got?

@matthewbeta

Inspired by this tweet

Purple

2014-06-12T00:00:00-00:00

I've been following Eric Meyer's posts about the terrible tragedy thats unfolded for his family over the last year.

Its made me think about my own young daughter and made me try not to think about how to deal with something terrible like this. Its made me think about the sister who I never knew and how my parents dealt with it. I pray I never have to.

Today I made my site purple (it is my and my daughter's favourite colour too) for Rebecca, for my sister Laura, for all the families who go through the worst thing I can possibly imagine, and for me because however pithy it felt good to do something.

@matthewbeta

Node.js Child Process ENOENT Error on Windows (title for make SEO Good)

2014-09-10T00:00:00-00:00

Node JS on Windows can be a challenge. TBQH Windows can be a challenge. I ran into a sticky problem the other day and thought I would share the solution.

Lets say we're running a Gulp task to build a Jekyll site. Part of Gulp's philosophyy is that plugins are a means of last resort, and you should just write straight Node/JS. We can use node's built in child_process module to run commands just like we were typing them in to the terminal:

var cp = require('child_process');
// later
cp('jekyll', ['build'], {stdio: 'inherit'});
// cool shit happens

This is pretty cool. I was pretty pleased with myself when I was building a Jekyll site (and my Sass) using Gulp. Like all of the cool kids, I wanted to show off my coolness to the folks at work (we use Jekyll for prototyping a lot). Unfortunately when I tried it on my Windows machine in the office, I got this bullshit:

events.js:72
    throw er; // Unhandled 'error' event
          ^
Error: spawn ENOENT
    at errnoException (child_process.js:988:11)
    at Process.ChildProcess._handle.onexit (child_process.js:779:34)
HAHAHAHAHA You suck at your job. Why don't you tell your girlfriend to call me when she wants to see a real programmer

Yes. My PC is a dick. I hacked around the problem (by using child_process.exec seen as you ask), but why didn't it work? Well This week I found out the answer…

Turns out this ENOENT error means that it can't execute the command. eg. Jekyll doesn't resolve to an executable file. When we run jekyll from the Command Prompt, it looks for an actual executable and doesn't find one, but does find a jekyll.bat file and helpfully resolves to that for you.

Node's child_process doesn't do that, so you need to do something like this:

cp('jekyll.bat', ['build'], {stdio: 'inherit'});

Hooray! it worked. Oh noees but now it doesn't work on not-Windows. Sad face. I want portable code dammit! We need it to write jekyll on non-windows systems, and jekyll.bat in windows land. If only there was a way to conditionally set a variable value in Javascript with some kind of ternary operator…

var cp = require('child_process');
// make a variable based ont he system
var jekyll = process.platform === "win32" ? "jekyll.bat" : "jekyll";
// Use that sukka
cp(jekyll, ['build'], {stdio: 'inherit'});
// cool shit happens E V E R Y W H E R E

The resulting Gulpfile as a Gist

@matthewbeta

Thanks to SpikeMeister off of Stack Overflow (@bighuggies on twitter?) for answering this question

Find and Store your IP Address with Node

2014-10-15T00:00:00-00:00

Say you are using Grunt or Gulp on a team. You need to have your Gulp or Gruntfile in version control so that any changes or improvements can be enjoyed (or endured) by everyone.

Now let's say you all want to be running a cool task like Browser Sync and due to the network neck-beards and their crazy rules, you need to specify your host explicitly using your IP (eg. 192.168.X.XX). All your IP addresses are different though! Oh noes. Looks like you'll have to manually edit it every time.

Or you could use the built in Node OS API. Like so:

// REQUIRE THE OS MODULE
var os          = require('os');
var ifaces      = os.networkInterfaces();

/*...*/

// THIS FUNCTION GETS YOUR LOCAL IP SO WE CAN SERVE THE BUILT SITE FROM IT
// No more having to keep swapping the IP
var lookupIpAddress = null;
for (var dev in ifaces) {
    if(dev != "en1" && dev != "en0") {
        continue;
    }
    ifaces[dev].forEach(function(details){
        if (details.family=='IPv4') {
            lookupIpAddress = details.address;
        }
    });
};
var ipAddress   = lookupIpAddress;

/*...*/

// EXAMPLE ONLY - NOT REAL
browsersync: {
	options: {
		host: ipAddress, // Use the variable we stored earlier!
	}
}

Now whenever anyone runs the gulp or grunt (or any node thingy) it will get their IP and use that. Swag.

Full (Gulp) example as a gist

@matthewbeta

Organising Javascript for beginners (like me)

2014-10-18T00:00:00-00:00

So you've heard about this Java Script thing (I'm tipping it to be big this year). You've played with it and can write some jQuery soup. But eww. Everything gets messy and difficult and your head hurts and it makes you want to go kick a tree.

I've felt like this. Many times. I'm starting to wrap my tiny brain around some basic Javascript structuring and here's a brain fart containing some of what I understand:

Objects

The easiest way to structure your JS is to organise it into an object literal. An object literal is a means of storing data. The data takes the form of key value pairs (key = value) and the values can take the form of strings, arrays, functions or other objects.

There are a few ways to create an object literal. My preferred (and I think the most straightforward) is by making a variable, who's value is an empty object.

var me = {};

Sweet. We now have an object literal called "me". But it's pretty boring... Let's fill it with some stuff:

me.firstname = 'Matthew';
console.log(me); // {firstname: 'Matthew'}

Let's add my lastname in the same way, then print the lastname property to the console:

me.lastname = 'Jackson';
console.log(me.lastname); // 'Jackson'

You can get the data or set the data via an intuitive dot syntax (objectName.propertyName). Let's add a function to my object:

me.greeting = function() {
  return 'Hello, '' + this.firstname + ' ' + this.lastname;
}

Now we can call that function like this:

me.greeting(); // 'Hello, Matthew Jackson'

So far so good. Our code is more organised, we can write some pretty expressive and easy to read code, and we get a bonus. We are namespacing our application. In this instance our namespace is me, namespacing is important. It means we avoid accidentally overriding things.

Namespacing

When I were a lad, we didn't have "TV on demand", the "internet" or "The Cloud". If we wanted to watch something when we weren't in, we would record it on a video tape. The blank video tapes we had in the olden days, came with some stickers for you to label the video (eg. Mum's Tape - London's Burning). This stopped, other people just picking the video and recording over it with Predator, without realising they were doing it (sorry, Mum).

Namespacing applies the same principal to our Javascript. Its very easy to give 2 different things the same name when you're coding (especially on a team). This makes it very easy to override one thing with another without realising. By namespacing our code under me we can have another object, you, with the same properties, and neither overrides the other:

var you = {
  firstname: 'Gary',
  lastname: 'Biscuits',
  greeting: function() {
    return "G'day, " + this.firstname
  }
}

console.log(you.greeting()) // "G'day, Gary"

Thats a little contrived, but you can hopefully see how, in a larger application, namespacing makes it harder for us to override our values accidentally.

But what if we name our namespace the same thing as another namespace?

// later in our code
var me = {};

me.powers= 'grumpiness'

me.greeting() //undefined is not a function

Well we can test to see if our name already exists, when we set the variable:

var me = me || {};

This checks to see if "me" already exists. If it does, we just use the existing "me"[^1]. Then we can continue adding properties to it using the dot syntax (me.powers = 'grumpiness'). If it doesn't already exist, we assign an empty object as the value, just like in the first example ( var me = {}).

Breaking it up

We can further organise our code by splitting it into smaller files. The object literal pattern can help here too:

// scripts/personal-details.js

var me = me || {};

me.details = {
  firstname: 'Matthew',
  lastname: 'Jackson',
  fullname: function(firstname, lastname) {
    return firstname + ' ' + lastname;
  },
  age: 31,
  twitter: '@matthewbeta'
}

// scripts/head.js

var me = me || {};
me.head = {
  facialHair: true,
  eyes: 2
}

You could then either link both of these seperately (eww... gross), or with a build step to concatenate them.

Conclusions

In larger more complex applications or sites, I could see the nesting getting crazy (me.property.name.long.list.myfunction();). I think just being pragmatic and sensible would avoid anything too mad.

I also found it took a but longer to write at first (not an issue now). The wins from breaking everything up and keeping it organised are definitely worth a few extra minutes up front. Having a simple pattern to follow has also encouraged me to write more reusable objects and functions.

Code architecture is a spectrum and this is on the very-quick-easy-end. It does feel good taking steps into making more organised and maintanable code but I'm also aware that there are many applications and this won't be the best pattern for all of them.

Enjoy better writers? Read these:

@matthewbeta

Footnotes

[^1]: Its not doing that really. Its assigning the value of the existing "me" to the newly declared "me". The above is easier to write though.

🔗 Understand Javascript Array Reduce in 1 Minute

2015-01-30T00:00:00-00:00

This really helped me "get" array.reduce:

"Everybody knows what looping over a collection is. But do you know what reducing a collection means? No? Are you sure?" "It sounds scary. But it is in fact pretty simple. You do it all the time. Here. Let me show you an example:"

var total = 0;
var numbers = [1, 5, 7, 3, 8, 9];
for ( var i = 0; i < numbers.length; i++ ){
   total += numbers[i];
}

"That’s it. You just reduced the “numbers” collection into the “total” variable. Pretty simple huh?"

It is now, yeah :)

Understand Javascript Array Reduce in 1 Minute

Javascript unit testing 101

2015-06-13T00:00:00-00:00

Unit testing seems like exercise: The consensus seems to be that we should do it, I'm sure we'd feel better if we did do it, but no one seems to do it as much as they should.

Part of the reason I haven't been unit testing my Javascript is because I didn't really know how (shame-face emoji). Recently, I sat down and got my head around the practical implications of writing, running and passing JS unit tests. The basics at least. In the interests of posterity and sharing for the greater good, I'll try and explain what I learned

First off, I am not going to get into the ins and outs of why you should (or shouldn't) unit test. I'll assume that you're here because, like me, you knew enough to know it sounds like a good idea. My interest in testing has meant I have listened to many podcasts (highly recommend TTL with Rebecca Murphy btw), conference talks and read many posts and documentation sites for various testing frameworks. In my previous job at Comtec, I was also fortunate to be sat behind some very talented JS and C# engineers and got to ask questions and see what their apporach was.

Based on what I've absorbed, I'm setting up my workflow as follows:

I'll be attempting Test Driven Development (TDD if you like accronyms). This is basically writing tests first, then writing code to make the tests pass. This makes the most sense to me
I'm going to use Mocha and Chai for no other reason than the docs are really good and there is also a cool Yeoman generator (more later)
I am only doing unit tests. This means I'm not going to try and test DOM interactions. Integration tests seem fun, but I need to walk before I can get onto that bus.

Get setup

To get started, and follow along you will need to install Node. Just follow the link and click install. You'll also need to use the terminal or the command line (don't be afraid) to get set up with Yeoman and Bower. Bower requires git too. If you need to install that, go and install the Github GUI for your system Windows, OSX).

After Node has installed, open your terminal and


npm install -g yo bower

Then install a Yeoman generator to quickly create our test stuff:


npm install -g generator-mocha

Then create a folder for your project and navigate there with your terminal/command line


mkdir testing && cd testing

Then run the generator to make all the folder structure

yo mocha

Alternatively, you could go and get the files and folder structure from github (contains spoilers)

Once thats finished, you can get Bower to install all the files:

bower install

You'll be left with a folder structure something like this:

└── testing/
    └── test/
        ├── bower_components/
        ├── spec/
        └── index.html

Create a folder called scripts.js in the test folder. This will be where we write the code we want to test. Add a link to it in index.html where it tells you to include source files:

<!-- ... -->
<!-- include source files here... -->
<script src="scripts.js"></script>

All set </yak-shaving>.

Aside: If you already had a project setup with scripts, styling, the whole deal, you could still have opened your command prompt at the route and run the yo mocha and bower install commands to add the test folder and required test suite, files and dependencies to your project. Thats why Yeoman is cool.

Testing time

If you open up index.html in a browser, you should see a Mocha test results page with some zeroes in the top right, showing no passes or failures. Yay. We'll fix that in a mo, but first, heres a simple thing to build and test:

We'll build the functions for a basic calculator (add, subtract, divide and multiply)
The calculator functions should only work on real JS numbers eg:

// good
var number = 0;
//Bad
var fakeNumber1 = "1";
var fakeNumber2 = "two";
var wut = undefined;

Lets start with addition. We want a function which takes 2 parameters, a and b, then returns the result of adding those together. Therefore, if a is 1 and b is 2 we want it to return 3.

If you look in test.js you'll see the basics of a Mocha test. The first describe function call is gonna group all our tests together, then the second is for a specific function or piece of functionality. Then the it function explains some basic functionality. Lets update test.js.

// The overall suite of tests are for our calculator
describe('Calculator', function() {
  // The function we want to test
  describe('add(a, b)', function() {
    // describe a test
    it('a + b should be add up to the right amount', function() {
      // Write our assertion
      expect(add(2, 3)).to.equal(5);
    });
  });
});

Ok so we wrote a test. The assertion we wrote was using the Chai assertion library. It lets write a test in quite a natural style. Check out the Chai docs for some examples of other assertions and styles that will suit your use case. Lets open index.html in a browser. You should see your test and its all red and failing and gross. No probs, we expect it to fail because we haven't written any JS yet. Lets open scripts.js and create an add function.

function add(a, b) {
  return a + b;
}

Save that and refresh index.html in your browser. Yay! passing test. But that really is the most basic portion of our test. Lets add some more tests to make sure we can only accept, real numbers. Back in test.js add some tests like these:

// The overall suite of tests are for our calculator
describe('Calculator', function() {
  // The function we want test
  describe('add(a, b)', function() {
    // describe a test
    it('a + b should be add up to the right amount', function() {
      expect(add(2, 3)).to.equal(5);
    });
    it('should throw an error for non numbers', function() {

        var notNumber = {num: 3};

        expect(add.bind(window, ['three', 'four'])).to.throw(Error);
        expect(add.bind(window, [3, 'four'])).to.throw(Error);
        expect(add.bind(window, ['3', 4])).to.throw(Error);
        expect(add.bind(window, [3, notNumber])).to.throw(Error);
      });
  });
});

We're using Chai assertions again, only this time its a bit more complicated because we want to expect our function to throw an error. We can't call the add function directly to get Chai/Mocha to run the test (like we did above). We need to (and sorry this gets technical skip over if you trust me and don't care) pass in the function and use bind to attach the context (what the function's this would be. In this case window as add is in the global namespace), and the arguments (the two things we want to add together). To test different scenarios, I'm passing add strings and an object. The text strings and object should be pretty easy to check. JS has a special function for checking if something is not a number: isNaN(number). Except this has some gotchas. The main one being that '1' will return false (is a number).

We need to check if its a string first. Something like:

if (typeof arg === 'string' || arg instanceof String) {
    throw new Error('Its not a number').
}

If its not a string, we need to test if it is not a number in any other way:

isNaN(arg)
// or this more robust one I found on StackOverflow
isNaN(parseFloat(arg)) && isFinite(arg);

Given we are going to need to test the arguments of all our basic calculator functions, we could write a function to reuse. Lets write a test first:

// ...other tests up here ^
describe('isNumber(n)', function() {
  it('should return false if n is not a number', function() {
    assert.isFalse(isNumber(undefined));
    assert.isFalse(isNumber('string'));
  })
  it('should return true if n is a number', function() {
    assert.isTrue(isNumber(1));
  });
})

Check index.html and all tests bar the first add test should be failing. Lets make our isNumber function:

function isNumber(n) {
  if (typeof n === 'string' || n instanceof String) {
    return false
  } else {
    //returns false if it isn't a number and true if it does
    return !isNaN(parseFloat(n)) && isFinite(n);
  }
}

Now the only test left to fix is the second add test. Lets fix that by updating the add function:

function add(a, b) {
  // check our arguments are numbers
  if (isNumber(a) && isNumber(b)) {
  // and if everything checks out
    return a + b;
  } else {
    // Not numbers? Throw toys out of param (geddit?!)
    throw new Error('Not a number');
  }
}

Tada! all passing. That feels nice. We can fill in all our other tests in the same way and write our subtract, multiply and divide functions to ake them all pass too. You can see what I did over in the Github repo.

Wrapping up

You could absolutely take this all further. I doubt my tests are very robust (for a pretend, hypothetical app). For instance what if we overload the functions (eg. add(1,2,3))?

You could also take a look at the other assertion methods Chai provides. See if there's one that might have been useful here...

You could add a UI and consider other types of testing, like integration or regression testing. You can even do this for CSS

As I've been learning about testing, I have been more considerate and deliberate writing code. For example I always make sure I plan my approach before I start, keep my functions simple, and make sure I understand what the functionality needs to be. If your job involves you building to user stories, I could see unit tests being really great to ensure the code meets all of the requirements. I will definitely be trying to get deeper down the testing rabbit hole.

@matthewbeta

Converting an SVG Polyline to a Path with this one weird trick

2015-07-27T00:00:00-00:00

Quick post: Today I was saving an SVG for a line graph out of Illustrator and found that the lines were rendered as polylines. This is all well and good, except when you want to animate them, when it isn't.

You'll probably get something that looks like this:

<polyline fill="#000000" stroke="#000000" stroke-miterlimit="10" points="100,200,300,400" />

You just need to make a couple of tweaks. Change the tag name, change the "points" attribute to "d", and put an "M" in front of first point (which moves the start of the point to the right position):

<path fill="#000000" stroke="#000000" stroke-miterlimit="10" d="M100,200,300,400" />

I had a hunt online and there was not a specific post on how to do this (just this Gist), so I've made one. I'm pretty confident this won't always work so go careful out there. If I'm doing this wrong or just being a dumby, tweet at me.

@matthewbeta

Manifesto

2016-10-07T00:00:00-00:00

I thought I should have a bullet point manifesto. I have seen a few of these on sites lately so I guess I need one too?

Here goes...

Matthew's Manifesto

Bullet point manifestos are for wankers

Perfect.

@matthewbeta

The best meal I ever ate

2018-04-02T00:00:00-00:00

In 2006, I went to visit a friend in South Thailand. As part of the trip, we decided to go on a bike ride width-ways across the country from Hat Yai to Tammalang (basically coast to coast at the thin bit) with a stop overnight at a waterfall-come-nature-reserve campsite called Ton Nga Chang.

Thailand is hot, so we started cycling at 3am when the temperature was bareable. We arrived at the waterfall at around 7am and spent the day dicking about in a waterfall. Evening came and we set up our hammocks ready for a night under the stars. As the tourists started clearing out, it became clear we were the only people stopping over. The idea this was campsite, quickly disappated as we realised we would effectively be sleeping in the jungle.

A couple who ran a shop got chatting to us, and quickly told us we shouldn't sleep where we had strung up our hammocks "because of the snakes" and offered us the store room at the back of their shop. We tried to bed down in there, but the continuous scuttling of animals (no idea), the giant insects (I saw a blue and white beetle as big as my fist) made that pretty bleak and I made it pretty clear that our accommodation wasn't gonna work out for me.

Knowing we would need some sleep before another 3am start and a 75km cycle, my friend called his girlfriend (who was Thai) and she had a look online and made some calls. She found a "hotel", about 15-20km back the way we had come. We (I) decided that would be a good plan, and we set off in the wrong direction to find a bed.

We arrived at the hotel about 40 minutes later. The gentleman at reception were surprised to see us, and even more surprised that we wanted a room for the night, as it was customary to hire this place in hours. The hotel was made up of a few small chalets, ours featured a large (hopefully one way) mirror across one wall, a sink, toilet and a collection of small geckos. We slept like babies for about 4 hours.

At 3am we woke up to a nutritious breakfast of Lays Potato Chips. We shared a 300ml bottle of water and saddled up for what was now a 95km ride into darkness. We had to stop a few times, as we were both lagging. When we got to about the 60km mark, in the middle of effing nowhere, we pulled over and our prospects looked... not good. Neither of us sure we could actually carry on cycling without food or water. We were also aware that the sun would be up in about an hour and the temperature would probably go from being about 20-25ºc to 35-40ºc, which would exacerbate our problems. We were in a bit of a pickle, with no choice but to keep on cycling and pray.

As we passed over a hill, in the distant dark was the glow of tube lighting. A small building by the side of the road. A strange service station.

The building had a porch with a few plastic patio tables outside, occupied by a group of men whose faces looked like they worked hard, worked long, and worked outside. Inside the building was a collection of trays, all piled with different breakfast foods. We grabbed bottles of water, plates, and handfulls of food. I don't really remember what, but I do remember a lot of banana leaf parcels, stuffed with a stodgy rice/coconut/banana... thing. Here is what it looked like.

Reader, I could literally feel the energy going back into my body. The best thing I've ever eaten. It was ugly, unspectacular, cheap, and utterly life affirming.

Its all about context...

Getting my (blog) shit together

2018-04-13T00:00:00-00:00

A change is as good as a rest so I've cleaned up the site with a new colour scheme some minor tweaks and less minor under the hood improvements. I made a list of stuff I wanted to tackle. Some of it was technical, some of it was just to make publishing and maintenance easier. I am also on a drive to simplify everything, so I wanted the easiest way forward with every decision.

HTTPS Everywhere anywhere

Firstly, I really wanted to get HTTPS working. This site was previously hosted on Github Pages (which I love) but with a custom domain, its pretty much impossible to get a real SSL. I thought about self hosting, but I know it'll be a pain to deploy. GH Pages makes that really easy by doing a build whenever you commit.

I recently heard about Netlify and how they do hosting of static sites so I went and had a read. The news is:

Its basically free (for my purposes)
It deploy/build on git push and you can have build hooks (e.g. curl a URL and trigger a build).
SSL is a one click process (as is forcing HTTPS)
They do DNS too - I didn't end up using this as it would have meant too much dicking around. If you do use it, you get their super cool CDN too for free.
H2 out of the box
They offer a simple way to configure headers info (e.g. a CSP) by including a _headers file.

I encourage you to go take a look. The docs are great and my site was hosted and setup in 5 minutes (not an exageration).

Offline is the new online

Now I had SSL setup, I could finally the second thing on my shame list – setting up a Service Worker. I basically stole all my SW code from this CSS Tricks post. The setup caches pages as you view them, loads pages cache first then goes to the network.I added an offline page to show if a page is not in the cache or available over the network. Worked like a charm.

Auditors

Next was some general tidying up around the site. I used Chrome Dev Tools Audits to run a bit of a scan of the site. After a few accessibility and SEO tweaks I got some pretty ok scores:

N.B. I know this isn't the be-all-and-end-all but it was a pretty good benchmark - Good enough for my levels of effort.

Syndication

Next I like the idea of owning my content, but also would be good to syndicate the content to Medium (at first). I found a nice Jekyll plugin for cross posting to Medium. It took some fiddling to get it running, but was reasonably straight forward. I'm struggling to get all the posts up at the mo due to the API upload limit. Once the old posts are up, it should just work™️ for new posts.

Bonus: I also added an IFTTT task to tweet about it - as I'm shit at publicising when I post).

Keep it regular

The last thing on my list is to actually write some stuff to post. So this is the first one of those ✅. I also want to get better at sharing links on my blog first and then pushing them to Twitter so I've now tweaked som estuff to make that possible by just adding a variable to a post.

Speak soon…

📐 CSS Angles with G.C.S.E Trigonometry

2018-04-26T00:00:00-00:00

At work last week, we started building a cool new project and part of the design revolves around angles. A particularly tricky part is angular-cropped images. The images need to have a 8 degree angle top and bottom to give a skewed look–however the image cannot be distorted.

Here's an example of what we want:

Some other points worth mentioning are that the images can be any size and in any width container.

After quickly abandoning my initial attempt with transform skew, I reached for the clip-path property. Clip path accepts a polygon value, which you can create with some 4 lots of 2 percentage coordinates. I like to use a web app called Clippy to quickly test out polygons so I knocked up a quick example:

This uses the follwing CSS which kind of makes sense but it actually doesn't work.

clip-path: polygon(0 8%, 100% 0%, 100% 92%, 0% 100%);

The issue is, if the image proprtions change, the angle is going to change. Basically we need to work out the sides of a triangle when we only know 2 angles. Like this:

One thing we can know though, is the aspect ratio of the image. For example the image we've been using is 16:9. Therefore we could add those measurements in and see if it helps us. As the clip-path will be in percent, we can scale it all up after.

Now we have a triangle where we know 1 side (16 width) and one angle (8°). Digging out my old maths textbooks, I can confirm that we need to use some GCSE trigonometry. To be specific, the phrase SOH CAH TOA.

Effectively, this is mnemonic to remember the 3 ways of working out the sides of a triangle, based on the information you have. We have the Opposite angle (8°) or O, the Adjacent side (16 wide) or A. O and A means we need to use T (Tan). Using the formula Tangent = Opposite / Adjacent (TOA). Algebra time...

That shows the other unknown side of our triangle is 2.248653355238256 in length. This doesn't solve our clip-path issue by itself. First we need to get this as a percentage of the whole length of the vertical side (9).

So, to work out the top angle, we need to divide this by 9 and multiply it by 100%:

tan(8deg) * 16 / 9 * 100%

For the bottom angle, we need to reverse it by taking it away from 100%:

100% - (tan(8deg) * 16 / 9 * 100%)

Unfortunately CSS (or any of it's preprocessors?) don't have native trigonometry functions. However, someone already made them! Take a look at the post Trigonometry in Sass. By adding these functions into our code, we can then use the functions in our SCSS. Here's our final clip-path for our 16x9 image:

clip-path: polygon(0 #{tan(8deg) * 16 / 9 * 100%}, 100% 0, 100% #{100% - (tan(8deg) * 16 / 9 * 100%)}, 0 100%);

And here is a Codepen showing the same applied to 16:9, 4:3 and 3:4 aspect ratio images (I'm using Intrinsic Ratios/Uncle Dave's Ole Padded Box to maintain the images' aspect ratio):

See the Pen Trigonometry Image Skew by matthew jackson (@matthewbeta) on CodePen.

Hope that didn't fry your brain like it did mine.

Sauce + Food

2018-05-03T00:00:00-00:00

I recently tried Curry Würst (or tomato sauce with a side of frankfurter and chips). It was disgusting, but got me thinking about sauces.

This is an unordered list of the best sauce-plus-food combinations. Don't @ me.

Salad Cream with Lasagne. I promise. This is the best sauce/food combination.
Barbecue Sauce with Fried or Scrambled Eggs. This is the only sauce you should have with eggs. Except...
Chilli Sauce with Eggs (any way). Especially Encona Hot Pepper Sauce, Sriracha or Sweet Chilli. Also with Avocado. The chilli sauce should be hot.
Worcestershire Sauce with Cheese and Beans on toast This is my comfort food.

P.S. Also, Bacon should be eaten with Brown Sauce. Not tomato.

Twenty Nineteen A.D.

2019-01-01T00:00:00-00:00

I'm not usually into the idea of New Year === fresh start. Its just an arbitrary date in the cosmic scheme of things. However, this year feels necessarily different.

2018 was a tough one for me. There are some particular reasons for that and some less easy to put my finger on. Regardless, I am pretty pleased 2018 ended when it did (and good riddance).

I feel like 2019 will be a more positive year. I don't do resolutions as that’s an unnecessary pressure to put on yourself. That said, there are definitely things I want to do differently this year. I want to affect my year as much as I can by changing a few habits of my own. To help me I've decided to publish an unordered lists of those things.

Be. More. Positive
See more live art and comedy
Go on more dates with SH
Be more understanding of things that irritate me (that includes myself)
Exercise more
Eat better and drink better
Wear shirts
Read more
Write more
Draw
Be interested
Focus on things that are in my ability to change or affect
Worry less about things that I have no control over
Chew gum
Meditate if/when I feel like
Play more
Get regular haircuts

Hopefully next year’s list will be shorter.

This is Going to Hurt - Adam Kay

2019-01-02T00:00:00-00:00

Certainly late to the party, but I highly recommend this book - This is Going to Hurt by Adam Kay. Kay has turned his diary entries into a fantastic book, chronicling his 6(ish) years as a Junior Doctor.

It made me laugh, cry, and wince. Beautiful, poignant, and important.

It is being made into a comedy series for BBC. I hope they can do it some justice. If they can make it a quarter as affecting as the book, it will be powerful indeed.

Phone Blogging (Phlogging)

2019-01-03T00:00:00-00:00

So to help me with one of my new year changes (to blog more frequently), I’ve set up my phone so I can blog without needing my laptop.

For this setup I needed 2 apps:

Working Copy

Working Copy by Anders Borum, is a Git client for iOS. It’s pretty full featured. All I really need though is to edit text and commit/push/pull from my blog Git repo.

Pushing new changes to the repo kicks off a build on Netlify and my blog is published.

The editing experience isn’t ideal though. I’d rather use a purpose built text editor. So…

iA Writer

iA Writer by Information Architects is a lovely text editor (and has great Markdown features). It’s available on iOS and MacOS and, importantly for my purposes, I can open/edit/create a document from Working Copy right in iA Writer.

Automation & Problems

So as I mentioned, my blog auto builds on commit. I also have it setup to cross-post to Medium automatically (if I want). I’ve also got an IFTTT action to tweet new posts when my RSS feed updates.

So minimal friction. My issue is I want to have a text shortcut to format my YAML front matter at the start of the post MD file. This needs to be formatted like this:

---
title: ""
snippet: ""
crosspost_to_medium:  false
published:  false
---

I thought I could just setup a text-snippet shortcut in iOS settings, but that doesn’t allow multiple lines. You can set this up on MacOS and it gets shared to all devices by iCloud, but using it on iOS in Notes or Writer crashes the app. Yikes.

My best solution for now is to have the YAML saved in a note which I can copy and paste in each time. This is kind of gross to me. What I need is to setup some kind of template for Writer that lets me start a post with the front matter already there. Not sure that’s possible though…

Phlogging workflow 1.0

So my workflow is now:

Open Writer
Create or open a doc in _posts or _drafts
Copy and paste my YAML front-matter from a note 🤮
Write post
Open Working Copy
Commit and push
🍸

So far it’s working. I’ve blogged every day so far in 2019. I won’t keep that up, but I don’t need to. Just need to get into a more regular rhythm of blogging what I would tweeted.

Matilda

2019-01-04T00:00:00-00:00

The family went to see Matilda (the musical) at the Wales Millennium Centre (WMC) yesterday afternoon.

We bought tickets when they went on sale around 2 years ago so it’s been a long wait. TL;DR totally worth it. You should try and see this if you can.

Firstly, the WMC is such a lovely theatre. I always feel like I’m seated in the inside of a grand piano or a giant ant colony. We also had great seats at the front row of the circle.

I am not a fan of musicals (generally), but this was really good. A few things really hit me:

Theatre design is rad

The set design of theatre fascinates me. You have such a limited pallet to use to, not only provide locations for the story, but also to theme the production and tie it all together. Save for a few props, most things are left to The viewer’s imagination and when it’s done well, you don’t need more than that.

The sets today were perfect, linking together the story, stage dressing and scenes. It was quirky and sometimes unsettling in a way that absolutely makes sense for the story. They also had a lot of small details woven in and even utilised the main theme (books/letters/lettering) to great effect in one of the songs/dances.

The coming together of all the disparate parts of a show like this; actors, songs, sets, lighting etc is like magic.

Story telling

Story affects so much of our lives and how we view the world. This is both magical and crazy. Matilda touches on this, directly in one scene.

Even when we know all the protagonists are made-up, we can’t help but empathise with them. This isn’t an original thought, I know. I was just particularly struck by it yesterday.

Child actors

The nature of the story dictates that child actors were going to make up a good chunk of the cast. They were all really good. Matilda was especially good (I cant tell you the actors name as I couldn’t find it on the show site. I can’t imagine they were much older than my eldest daughter. They left me gobsmacked. Bravo 👏🏽.

A cyclist

On my way back to our car, I stepped out behind a parked van, looked the wrong way and a cyclist hit me full pelt. This was totally my fault. A van then ran over his glasses.

Thankfully, it appears everyone is fine, save a few cuts and bruises, and some cash. Owen, I’m sorry. I will replace your glasses.

Are you (an) experienced (developer)?

2019-01-12T00:00:00-00:00

What does it mean to be an experienced developer? It definitely doesn’t mean you know how to do everything.

I think mostly, it means you know how to work out how to build pretty much anything (within reason).

This came up this week at work when the design team wanted to build a pop up nav. You know the kind where you hover over a link on desktop and you get an extended menu below. A mega-ish-nav.

Our awesome junior developer immediately thought “yeah looks great”. My spider sense started twitching. These things can look really simple in a comp, but have lots of hidden factors which without experience, you won’t think about until they punch you in the face.

Generally for developments, I’ll go through a process (either written or sketched or in my head) to check off the following things. This gives me a better understanding of what it will take to build something.

Do I need to build anything?

Always question whether this is a necessary development for the user or business. This might get you the reputation of being an arsehole, but sometimes it’s not s given that functionality needs to exist. If it doesn’t help anyone, it’s better not to build it.

What does it do?

Take some time to work out how it works. This will usually involve sitting with the designer and working out what happens in every scenario.

In our example: What is the expected behaviour when you click the top level links? Should this open the menu, or hyperlink to the next page? If it should hyperlink, how do you access the menu on a tablet? Should you have to manually close the menu, or should it close by clicking off? What is the expected behaviour when we’re in the mobile design? Can I use the same nav, or will they be sufficiently different that we need to have 2? And so on…

What’s the semantic/progressive enhanced way to build this?

I like to work out how I can build this in HTML. If we need buttons or links for things. What native elements we can use for stuff to make it work with as few moving parts as possible. Ultimately, it should work as a nav without CSS or JS.

Once I’ve worked out the basic HTML, I like to work through styling and basic JS and how we’re going to build up the functionality in layers. That means it’ll probably be more robust.

What is the accessibility story for this sort of thing?

Anything with showing/hiding and navigation will have some form of accessibility concerns to address. As an example, you may think having the menu show/hide when the parent link is hovered/focused, is enough. The issue here would be, if the user wants to get to the last link, they need to tab through every link in every menu to get to it. Therefore you need to allow users to tab over the top level links, and provide a means of them entering the sub-menus. You’ll need to work out what the conventions are for this. Is it using arrow keys? The space bar? How would you announce that to a screen reader? 😫

You also have to try and figure out what ARIA^*spell you need to summon the accessibility gods.

This stuff is hard. I find it hard to test, and there isn’t always one correct answer. Experience helps you work out what information to trust.

* ARIA is a standard for helping add accessibility to applications. For example you can show that a button has a popup attached, or that it is expanded etc. It’s bonkers and, confusingly, has weird support among screen readers.

Do I have to build this?

So by this stage I’ve probably worked out how much of an arse-ache this will be to make. It’s usually around this time I check if anyone else has made one of these (and made it well).

You will need to consider plenty of things when deciding if you will use someone else’s code. Is it accessible? Does it meet your functional requirements? Is it well built? Is it going to have performance implications. What’s the compromises (there will be plenty) compared to the time savings. You’ll need to make a call on how much trust you have in the developer. What will the support story be?

Experience means I trust my judgement more and know better when to lean on third party code, and when to roll my own.

How do we build it in the simplest way possible?

So you’ve decided to build it your damn self. Good for you! Now you need to plan out how your going to do it. What will you be doing in CSS and what will be JS? Sometimes you can just use JS to change your ARIA attributes and classes for styling. Sometimes, JS will be more involved, for example to manage the tabbing/keyboard functionality.

Simplest could mean time to build, ease of maintenance, flexibility, or all of the above. I like to do as little as possible. Fewer moving parts generally means easier to build and maintain. It should be as simple as possible, but not simpler.

Can I build this so I never have to build it again?

Lastly, can I build whatever it is, to be flexible enough and reusable. This way we can put the effort in once and get multiple uses out of the code. In the old days, this might be a jQuery plugin. Now we might make a module or a react component.

Conclusion

I think certainly, all of these things can explain a perceived lack of enthusiasm for building new features. It definitely means you are better able to estimate the time and effort it will take. I think this process can be enjoyable… sometimes.

How Monzo Hire Product Designers

2019-01-20T00:00:00-00:00

On Friday, someone I follow shared a post about the kind of application process a Product Designer can expect when applying to Monzo:

Over the last three years we’ve hired 11 product designers. And with each new member of the team, we’ve learned something new about how to hire designers.

For other companies who are starting to scale their design teams, and designers who want to work at Monzo, we thought it’d be valuable to share what our hiring process looks like and the things we look for in a product designer.

The process: an application form, a phone interview, a design challenge (which they review with a feedback call), an in-person workshop (with an engineer, a designer and manager), a general interview (with 2 people “disassociated with product or design”).

This must be expensive and time consuming for the company (none of my business), but also the candidates. I’ll give them the benefit of the doubt and assume they pay for people’s time for the design challenge…

They say the design challenge will probably take “an evening or two”. The kicker though:

it’s fine to take as much time as you need to think about the problem

Emphasis mine. Here’s what they are expecting for your couple of evenings, plus thinking time:

We’ll send you a brief, and in return we’re looking for an end-to-end design of how you think this could look and work. Your app can be designed for iOS or Android, and we welcome any amount of research that helps you come to your solution. The ultimate result we’re after is a set of functional, polished screens with a clear write-up of how your solution works and the choices you’ve made.

OK. I wonder how much we would charge for this process at work or how long we would take to do a good job? A couple of evenings is 5ish hours. Seems tight… Either way, we certainly charge for thinking time, because that’s the job.

Sounds like Monzo want to hire people with time on their hands.

Does the task give a good insight into your candidates? The issues with design tasks are plentiful. This post by Faruk Ates articulates a lot of the issues with design tasks, better than I am able to.

I can’t help feeling the time and effort being asked of candidates (and Monzo) seems to be to avoid hiring the wrong person, rather than the right one.

True Blue Bollocks

2021-01-31T00:00:00-00:00

Jonathon Wilson in The Guardian:

He is one of the world’s brightest coaching prospects, but he is not Lampard. He does not ooze “Chelseaness”. Worse, he arrives as an ascetic vegan intellectual into a world that has had quite enough of experts, as a German when the German authorities have doubted “Britain’s” brave vaccine.

The vast majority of fans will be sad that Lampard didn’t work out. Some will be sad but feel it’s for the best. Some will feel he wasn’t given enough time. I don’t see how that will make Tuchel the villain by default.

Any hostile reception to the new regime at Chelsea will be directed at the board (or possibly players). I think most fans think Thomas Tuchel is probably fine. If he had replaced almost any other manager he would been greeted with the usual mix of trepidation and excitement (believe me we are used to new managers). As long as the football is not boring, the kids get a chance, and the results are reasonable, he’ll be fine. Just like any manager.

I keep hearing similar sentiments regarding either fans won’t like him because they’re xenophobic knuckle dragging idiots. “Will they accept a vegan with a brain?”. I’m also hearing it’ll be like Sarri and he’ll get a massive backlash. Presumably because the hipster football writer thinks that the problem with Sarri was that he had a cultured footballing philosophy and Chelsea fans are philistines, who only like direct, stick-it-up-to-the-big-man football.

Firstly, if any fan base are used to having (and loving) foreign managers and players, it’s Chelsea so I’m not sure where the xenophobic angle comes from (narrator: he was sure it comes from lazy journalism).

Second, Sarri was disliked because the football was turgid, and it did not produce good results. We finished 3rd In a poor season and did everything we could to finish outside the top 4. We were (just about) the least shit of the other 18 teams outside of City and Liverpool.

Yes we won a trophy. In the Europa League campaign, we only played 270 minutes against any kind of genuine opposition (if you are kind enough to include Arsenal in that). Without a generational player bailing us out every other week, his season would have been very different.

The press would love us to implode again, because Chelsea drama fills a lot of word counts. I’m just not sure it’s justified here.

Using Apple's New York font in CSS

2021-02-11T00:00:00-00:00

I don't care, Matt. Show me the code

Had a bit of a spring clean on the old web log this week. I wanted to keep things speedy, but wanted to mix up the fonts a bit.

I've been using system fonts for a while, as I really like Apple's San-Francisco font and I like the fact thats its nice a quick as no files to download (sorry if your are on Windows). Recently(ish) Apple introduced a serif sister font to San Francisco, New York, which I also like.

Using San Francisco requires a bit of a hacky method to use it on the web:

font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;

Using New York is basically the same:

font-family: -apple-system-ui-serif, ui-serif, 'Georgia', serif;

I've also added a style block in the head, where I can insert custom CSS within the post front-matter. In this one, I've set the headings to also use New York. 🤝

Update - SF Mono is pretty easy to add too 🤖

Its the same principle. Here's my new code font stack:

font-family: ui-monospace, SFMono-Regular, ui-monospace, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

Adding your latest post to your homepage in Eleventy

2021-02-15T00:00:00-00:00

This weekend I wanted to add my most recent blog post to my homepage. I googled how to do it but couldn't find the cut and paste code I wanted, so here it is.

In your index.njk or index.liquid file, you'll need to get your most recent post like this:

{% set posts = collections.blog | reverse %}
{% set post = posts[0] %}

You may need to change collections.blog to whatever your collection is. You can the output anything from your post variable. I'm using a snippet, but you could output the whole post. You do you!

Developer has mixed opinions about technology

2021-02-16T00:00:00-00:00

Trevor Davis:

So as a reluctant grump old web developer who has finally given Tailwind a chance, here are a few thoughts on what I love and hate about it.

Excuse the title. I can't tell you how nice it is to read a balanced post about anything on the internet 👏.

If you think a technology generating as much traction and controversy as Tailwind is either good or bad, you are being a bit silly. I would much rather read a nuanced opinion and understand what the grey areas are.

Heroicons by Tailwind

2021-02-16T00:00:00-00:00

Speaking of Tailwind, they have a cool icon repository now (although it looks like there was a "classic" version so maybe they've done them forever). Easily just cut and paste the SVG code from your browser.

This is my favourite way to add icons, because its so much simpler than any other method, but also you can style and animate them. Its odd there are no social icons included. The Twitter and Github icons on the site seem like they are the same format and size... 👀

Fewer Favicons

2021-02-18T00:00:00-00:00

Andrey Sitnik's post on how to favicon in 2021 is right up my street as ostensibly its a lot less faff than doing all of the files we make as standard.

Weirdly this was on my mind this week as we are beginning to modernise our dev workflow at the office.

I'm not sure for most of the work I do (websites) that anything more than a favicon.ico is really necessary. However, I do like the idea of making sure things are finished nicely (like a cabinet maker caring what the back of the unit looks like).

Mostly our icon generation isn't manual; we use The Real Favicon Generator, integrated with our build step. Seen as favicons are usually a set it and forget it deal, this new way is actually a little bit more cumbersome. I like the simplicity of it though, and I like the idea of providing light and dark icons via SVG with a media query in it.

Maybe time to write a little Node CLI...

I don't miss the office

2021-02-18T00:00:00-00:00

I love this essay by Paul Ford. I just don't love going to work. This quote is absolutely me:

And I find that the people who don’t want to go back to pre-pandemic office culture are the people who are the most concerned about their time. Sometimes this is their personality; they are engineers who look at travel as a waste, who seek efficiencies in their work and health. Sometimes they’re people with other stress, like parents of young children who triangulate between the day care’s schedule, their boss’s expectations, and kids’ needs...

The idea of sitting in my car for 2 hours to get to another room and do the same thing I can do at home feels like madness.

I love my job, I love the people I work with. I also love working from home.

SmolCSS - modern css snippets

2021-02-18T00:00:00-00:00

Interesting and handy. Bookmarked.

Webcams are bad. iPhone cameras are good

2021-02-19T00:00:00-00:00

Reincubate are the makers of Camo, an app which lets you use your iPhone as a webcam. This is a good rundown of how and why webcams are always bad.

After consulting numerous webcam buying guides and reviews, purchasing a handful of the most popular models, and testing them in varying lighting situations, I can't escape the grim truth: there are no good webcams. Even webcams recommended by reputable outlets produce poor quality imagery—a significant failing, given it’s the one job they're supposed to provide.

True story, 2 weeks ago, I bought a webcam. I didn't want to spend loads. I read through a lot of reviews and ended up spending £50 on a Logitech one. It was awful and I returned it the next day. I used the money to buy a phone stand for my desk.

I was on Camo's beta over the summer and really liked it, then completely forgot about it. The free tier is perfectly good enough for me and the faff of having to plug my phone in and put it in a stand is worth it for the picture quality.

The kicker:

Apple's research and development budget over six months is more than Logitech's gross yearly revenue, because Apple realized that the iPhone's camera could be a serious competitive advantage.

Scabs

2021-04-19T00:00:00-00:00

You could make the argument that the outpouring of emotion and vitriol about the announcement yesterday is misplaced or disproportionate. Given everything that is wrong in the world, sport doesn't matter.

But that is to say a shared history, relationships, culture, don't matter. I've supported Chelsea for nearly 30 years. Those 3 decades are like a long relationship. Memories, friendships, family connections, some to people who are no longer alive. All in the bin because some very rich men want to have more money.

It is obvious that fans mean little to big clubs. Supporters only recourse is to vote with their feet and boycott games. Assuming all fans refused to return (unlikely due to the tourists and corporate seats) why would the clubs care? In 2018/19, the last season Chelsea played a full campaign in front of supporters, their match day revenue was 75 million euros. Reportedly every club involved in the super league will earn 400 million euros. Why would a largely faceless corporation give a fuck about losing supporters?

I'm currently angry, and disappointed, and sad, but cynically, not that surprised. I'm not sure what will happen when the dust settles on all of this, but the genie is very much out of the bottle.

Mobs

2021-04-20T00:00:00-00:00

Mob handed, people can achieve anything.

Never forget.

I am return

2022-09-26T00:00:00-00:00

I’m back. Not now. But soon. After 2 and a half years of the world ending, I'm now ready to get my shit together. I’ve got big plans to write more. I’m working on replacing tweeting and insta with some kind of easy micro blogging. I’ve started work on a bookshelf. I’ve done some dev and shortcuts tinkering to remove publishing friction. For now though… I’m back. Soon...

the beauty of standing still

2022-09-29T00:00:00-00:00

I largely missed/avoided needing to build any single page applications. I didn’t reframe my entire perspective on websites to JavaScript first. It feels like the pendulum swung as far that way as it could and has now swung back. Server rendering is important again. Now it’s called rendering on “the edge”. It sounds cool.

It’s nice that things move and evolve. Change is inevitable. I’m not sure much of what I built in the last 5 years would have been better as a single page app though. I’m not sure much of what I’m building now would be better rendered on the edge. I am pretty sure that sending HTML down the wire, making it look good with CSS and making it do stuff with JS is the past, present and future.

If you stand still long enough everyone catches up eventually.

The Exclusive Design Principles

2022-11-08T00:00:00-00:00

This post resonated with me. Some great points, like designing for one person. I especially love the “Add nonsense” principle.

So in order to break out of the antiquated idea that designing for accessibility is a form of charity, I always use the principle that you need to add nonsense to the design process as well.

More nonsense please.

It also got me thinking about people who experience the web in a different way to me and how we could bring that nonsense and whimsy to them.

I’ve often thought about how we could create experiences that were not just equal, but different. A user experience that is great for screen readers, with its own unique characteristics and capacity for surprise and delight. For example a unique experience for users of screen readers using the CSS Speech module maybe.

I guess first we need to make sure the things we build are baseline functional. However it feels like a whole world to be explored.

Change and hope

2024-07-10T00:00:00-00:00

It feels like a new years resolution vibe for me at the moment. So much is changing in and around me. Enough good, that I am hopeful fo rthe first time in a while. I feel excited, positive, and uneasy with it all. Stressed and anxious.

On the positive fronts, a new government. I am no huge fan of Starmer but have been holding out hope the (small c) conservative approach to the party's election campaign, has merely been to not rock the boat and to ensure they get into power. There are small signs of a more progressive and radical approach based on some of the appointments, if not the rhetoric. I will take actionsover words any day.

I've also agreed to take part in a 10k run in 8 weeks which has forced me to get off my arse and start training. Combined with gettign back on my bike for the bi-weekly commute to Cardiff, and continuing with the bi-weekly visit to the climbing gym, I'm hopeful of shifting into some kind of shape in the coming months.

A challenging year at work in a difficult market is hopefully turning a corner. Many things to fix and overcome but I'm hoping we can all be buoyed by a sense that something good is round the corner.

And so back to the blog, where I'm hopeful I can change the pattern of short burst of activity followed by years of neglect.

We shall see on all of the above.

Matthew Jackson

This is a pathetic piece of shit

Footnotes

A tale of two porridges

Footnotes

Notes on customer service

Everyone is a customer

Be nice

Your shitty day does not matter

Talk

Listen

Manage expectations

Embrace complaints

Don't be a dick

Let them shout

Be appropriate

Its ok not to know something

Empathy

Know when the customer is wrong

Letting go

Smile

Setting up Grunt from scratch

Rule 1: Don't fear the Terminal

Install all the things

Getting ready to Grunt

Recap

Further reading

Footnotes

Installing Sass and Compass on Mac or Windows

Don't fear the command line

Installing Compass

Grunt workflow for compiling Sass & Compass and minifying Javascript

What is Grunt again?

Package JSON File

Installing a Grunt plugin

Gruntfile

Default task

Seperate Grunt tasks

Automation work done = Cocktails

Do

Weeping coconuts

Wat?

Footnotes

How much does a website cost?

Purple

Node.js Child Process ENOENT Error on Windows (title for make SEO Good)

Find and Store your IP Address with Node

Organising Javascript for beginners (like me)

Objects

Namespacing

Breaking it up

Conclusions

Enjoy better writers? Read these:

Footnotes

🔗 Understand Javascript Array Reduce in 1 Minute

Javascript unit testing 101

Get setup

Testing time

Wrapping up

Converting an SVG Polyline to a Path with this one weird trick

Manifesto

Matthew's Manifesto

The best meal I ever ate

Getting my (blog) shit together

HTTPS Everywhere anywhere

Offline is the new online

Auditors

Syndication

Keep it regular

📐 CSS Angles with G.C.S.E Trigonometry

Sauce + Food

Twenty Nineteen A.D.

This is Going to Hurt - Adam Kay

Phone Blogging (Phlogging)

Working Copy

iA Writer

Automation & Problems

Phlogging workflow 1.0

Matilda

Theatre design is rad