Front End North 2014 Notes

Yesterday I had a great time at Front End North Thanks again to @makedoers for organising and invting me to speak. Here are the links to the slides and my notes from the day.


Simon Owen:

Phil Hawksworth:

Liam Richardson:


Katie Fenn:

Rosemary King:


Edd Sowden:

Shaun Bent:

/ (no longer online)

Dan Donald:



Simon Owen

Optimising Your Front-End Workflow

I was first up, my slides can found here:

Thanks so much for the kind words on twitter!

Phil Hawksworth

Dynamic Static Site Strategies

great 'more ambitious slide'

  • cgi-bin

return to simplicity

#amobilefirstresponsivewebapp otherwise known as a web site

"Bake, don't fry"

reduce complexity - ease of deployment - increased portability

static = cost of less code, maintenance, time, people, effort, especially at scale "Atwood is credited with the proposal of "Atwood's Law" which is a corollary to the Rule of least power design principle. It states that any application that can be written in JavaScript will eventually be written in JavaScript."

npm install
npm isntall


  • repeatable
  • predictable
  • low friction

  • optimise / compress / cdn / automated deployments

Search = fast instance response search, but what about page weight? load async after the page is loaded, cached and static

Comments = =

Site checking = / (no longer online) =

seek chances to simplify, make stuff faster


Liam Richardson

Pure CSS cross browser animations for fun and profit


Flash, used for animation, until iPhone…

CSS3 incoming.

CodePen demos

  • bw to colour demo

short code transition e.g. transition: all 1s linear vs

transition-this: that;
transition-the: other;
transition-e: g;

transition - can lay these on top for modern browsers, older browsers will still work, but just lose the transition

sass - mixins

I noticed some of Liam's demo examples showing top:0 margin-left:0 to move elements. These might be better as translate:

css transitions that are animatable:

animation timing function

creating visual flair - codepen example, wooaaa

doing something crazy - R2D2 animation

SVG animation with keyframes

SVG - snap.svg -

  • keyframes

webkit browser prefix / (no longer online)

Katie Fenn

Building and testing jQuery plugins for 2015

2015 = 10th anniversary of jQuery (nearly)

jQuery is a swiss army knife:

Dom / Events / AJAX / Extensibility (plugins)

benefits of writing plugins

  • modular code
  • reusable
  • testable

Using a boilerplate: jqueryboilerplate:

Bizarre account in JavaScript where you could override undefined:

building and testing your plugin jasmine -

behavior driven development

Signs you may need a framework: Co-ordinating behaviour across compononents Feature rich behavaiour angular / ember / react

Benefits of both jQUery / framework

  • modular code
  • unit tesing
  • auto loading (require.js)
  • CI (jarvis)
  • Task automation


Rosemary King

Get Back to Play: How Play and Playfulness Help Us Build Better Products and People.

Get back to play, how being play full can help.

3 types of play


  • inward focused play "the initial human geography"


  • omg these people are doing what I'm doing, kid moving to music and people around him are copying him dancing
  • "where narratives start becoming constructive"
  • e.g. where red means angry / danger


  • getting the adult rules, but playing with them. e.g. 2 year old rapping, starting and stopping rapping at the correct time but not actually speaking actual words.
  • "don't grow up, it's a trap"

einstein / picasso quotes

nobel awards - not afraid to try out new things - levitating frog

Google helping us with out macrosphere's with Google Doodle

Don't be a bully

  • If kids don't know something, they'll have a go
  • As adults we become frightened that asking a simple question, may be a stupid question and wasted time

Be kind and open about ideas.

"Make thoughts, don't receive them" - e.g. a Breaking Bad watching marathon. In this state we're constantly just receiving a brain wave and not using other brain waves.

Alpha and theta brain waves:

"Take time to go down rabbit holes" - Take a walk without a destination in mind.

"Anything's possible"

Edd Sowden

Trying to make GOV.UK accessible

VoiceOver comes with OS X and iOS

It's really insightful to watch people use your website e.g. what's a hamburger?

Start with HTML

  • write down the information first in only HTML - this will help a lot with accessibility

display: table-cell - was used in a prototype example, but oh oh we need IE6 support.

VoiceOver on/off: Cmd + F5 VoiceOver key (VO): ctrl and option key




Adding filters re-read out the lists every time a filter was updated.

  • to get around this, instead of reading out all the lists every time, read out how many list items were available.


Using focus rather than aria-live we also helped keyboard only users.

Chances are if you can make things work better for a keyboard used, this will also help a screenreader.

Using tab on your site is also a quick way to help with accessibility.

Some ARIA properties need to exist at page load.

form example

  • blind person gets too much noise
  • use a div if you need to extra styles

Listen to your website - Cmd + F5 - find out things you didn't know


Shaun Bent

Reducing duplication and driving consistency at the BBC

You can watch badgers live, although you may not see any…

GEL - Global Experience Language

GEL - Responsive Typography

bridging the language gap - Harry Roberts / Jeremy Keith

Abstracting typography out into class names e..g rather than

font-size: 20px;
line-height: 22px;

now have


Typography to work across products

Delivering a consistent typography across products

Reduced development effort

Increasing re-use across the business

Ease of rolling out updates

Where next?

  • Proof of concept
  • Keep going as small little code snippets that people can choose to include if required
  • Increase adoption around the BBC

Settings / Tools / Typography / Grid (the next big challenge!)

grid - sass tools? variable names? how are other people doing this? make it open source???

Other credits:

Dan Donald

Communication and Confidence

There is no perfect workflow

Products & Agencies

  • difference between fast turn around within a week going to no developers to a year long project going to another team of developers.

Producer / UX / Designer / One or two front-enders / One or two back-enders / Tester


  • Find out what works for you and why.
  • welcome changing requirements
  • deliver working software frequently
  • work together daily
  • trust
  • face-to-face conversation
  • technical excellence and good design

Autonomous and Collaborative


  • quick, get the point across, move on, learn from experience and adapt as required.

Adapting to change

  • "I don't want ditch that work I've done", "I don't want to work on it more".
  • Let's put this aside and adapt to change and welcome it.

Focus & Confidence

"The need to understand why" - Just Enough Process™

Tools: fading tools out, simplifying github / bitbucket skype / slack

Testing: Etsy devices GhostLab / DeviceLab BrowserSync

Design and UX: Get involved help / collaborate adapt along the way style guide first

Design Pairing or Art Direction: designer and front-ender working together, changing as they need to create better results

Consistency and Standards:

  • no dogma about just using it all, but talking it through as a team and working it in with the requirements for the team


  • consistent tooling
  • allows us to work from a Sass style guide
  • typography / colour palette / grid (singularity) / uses sass for wire framing

load-grunt-config (inc.load-grunt-tasks) CSS Testing Deployment / CI Project type specific tasks


  • using variables to easily update paths across different projects

require.js Jasmine Yeoman

could be drupal / umbraco / whatever…

DANGER: learning-curves likely trying to get the balance

Perfect Worklow? Nope..

Figure it out as a team and update as required and what's working for you.

Align and Guide Your Project:

Harry Roberts Trello Workflow:

Adaptability Consistency Reliability Communciction

It's all about the client & their audience, they're paying you money to do a job.

Browse by category: