Simon Owen

Front-End Workflow



Feel free to tweet me if you have a any questions

A bit about me

I'm Simon Owen, a Front-End Developer.

mcrfred-logo digihike-logo upfrontconf-logo upfrontconf-logo

@Mcr_FRED, @digiHike, @UpFrontConf

s10wen work


There are many different ways to do something,

find what works best for you.

In the beginning

Sometime around 1999…

s1gqnu date

Using Web Studio, Version 1.0 for Windows


OMGZ!! I built a website!

10+ years later…

A lot has changed

actual code

Writing actual code, instead of a gui.

Some things haven't

fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire

I still 😍 gifs

The web is moving fast.

There's too many things to learn.

We can't learn everything.

Don't Panic.

We have help.

And, I'm here to help today

  • 1. πŸ”¨ Apps & Tools
  • 2. 😍 Health
  • 3. πŸ‘¨πŸ‘© Team Work
  • 4. πŸ’– Improve and Produce

1. Apps & Tools



  • Chrome (Stable)
  • Chrome (Canary)
  • Firefox
  • Safari
  • Opera

Browser Super Powers

  • Chrome Flags
  • Dev Tools

Browser Super Powers

Network Throttling

browser super powers

Browser Super Powers

Different Viewport Sizes

browser super powers

Browser Super Powers

FPS Performance Issues

browser super powers

Browser / Device Testing

  • Virtual Box (for Internet Explorer)
  • GhostLab

Version Control

  • GitHub Desktop
  • SourceTree

Version Control (New! πŸ˜„)

GitUp App



  • Sublime Text
  • FileMerge
  • iTerm


  • Skype
  • Twitter
  • Trello


  • Slack
  • Google Docs / Sheets


  • Spotify
  • Dropbox
  • Transmission


  • Yeoman
  • Bower
  • Gulp
  • Sass
  • BrowserSync

2. Health



Far too often this is overlooked

Look after yourself and your health

If you don't, your workflow equals:


Bonus Tools for Health

  • Headspace iOS Meditation App
  • Headphones

Bonus Tools for Health

  • Stand Up Desk
  • Notepad and Pen
  • Your Mind! Think πŸ€”

Bonus Tools for Health

  • iOS 'Night Shift'
  • Flux

Flux Example


Dark Themes

Chrome Dev Tools

Use my Chrome Dev Tool Theme ;)

+10 Code Skill Points, "Paul Irish Certified"

Increase Your Scope


Christopher Murphy "Increase your Scope"

Finland Education System


Non-tech Hobby

I like Hiking and playing the Piano

toubkal piano

Write a Diary / Notes

  • 1-2 minutes a day
  • Concentrate on the positive
  • πŸ‘Ž I forgot my headphones today 😦
  • πŸ‘ Remember headphones for tomorrow πŸ˜„
  • iOS App: PlainText + DropBox

Organised Desk

I like clean, some prefer messy

Desk Tidy

Don't Burn Out!

fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire fire

3. Team Work


Makes the dream work… πŸ˜‰

Everyone is different


Find what works best for you.

Sublime Superpowers

Sublime Superpowers

'Align By'

For Example; Shortcuts

Das Keyboard

das keyboard

Set Performance Budgets

  • Improve over time
  • Monitor performance
  • Fix issues as they happen

Performance Budget

http requests, page load time, 404s

perf budget

How Often do you hear

  • There's too much to do
  • There's too much code
  • All the code is πŸ’©

Break down into smaller manageable tasks

(I did this for this talk)



  • Automation
  • Dotfiles - Tutsplus tutorial
  • bash, cli (command line interface), Terminal / iTerm
  • Aliases


Ensure consistency throughout your team.

                    root = true

                    indent_style = space
                    indent_size = 4
                    end_of_line = LF
                    trim_trailing_whitespace = true

                    indent_style = space
                    indent_size = 2

dotfiles time savers with .aliases

                        # List all files colorized in long format
                        alias l="ls -l ${colorflag}"

                        # Open current directory in Sublime Text
                        alias s="subl ."

                        # Easier navigation
                        alias ..="cd .."
                        alias ...="cd ../.."
                        alias ....="cd ../../.."

Create a new site folder

                    $ mkd
Custom .functions code

                    # Create a new directory and enter it
                    function mkd() {
                        mkdir -p "$@" && cd "$@"

I just created a new directory


I'm in it!


(with `findme` alias)

                    $ findme class-name


                    for filename in `grep -rIl $keyword --exclude="\*.git\*" .`; do
                      echo $filename
                      perl -pi -e "s/$keyword/\$& . $filenum . ++\$n{\$ARGV}/ge" $filename

                      filenum=$(($filenum + 1))


There it is!

Clever. But… don't try to be too clever

Things can get complicated


Think, do we actually need this?


Evaluate and Prioritise

20mb retina hero image


Getting content quick and viewing offline?

Using a Service Worker…

They even have a logo…

Wait for it…

Wait for it…

Service Workers

Add sugar as required

Have a taste


Have a play


JS Bin / CodePen / JSFiddle

Dive in the deep-end and have a go at making something.

Reduction FTW!

  • Test
  • Case
  • Reduction

Jake Archibald Certified

(Google Dev Advocate)

Be a team player

Help make team members feel;

  • Smart
  • Awesome
  • Inspired

Don't go solo in a team

It won't end well


4. Improve and Produce


😍 Improve then Produce == Improvement and Production

πŸ€” Produce then Improve != Production and Improvements

😑 Produce then Improve == Produce and πŸ’©πŸ’©πŸ’©

Highlight Code Debt ASAP!

Had to add something 'critical' in?

Introducing the…

Code Debt Card

Closing Thoughts


Thanks for all the replies!

Closing Thoughts

"The geek always wins eventually"

Thanks @stephenmelrose

One More Thing…

Here's a secret!

Thank You

mcrfred-logo digihike-logo upfrontconf-logo upfrontconf-logo

@Mcr_FRED, @digiHike, @UpFrontConf

Simon Owen


Leeds Front-End Meetup

By Simon Owen

Leeds Front-End Meetup

  • 1,762