Simon Owen

Front-End Workflow

Β 

@s10wen

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

Disclaimer!

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

http://s1.gq.nu

s1gqnu

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

πŸ”¨βš™πŸ”§β›

Browsers

  • 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

gitup

Code

  • Sublime Text
  • FileMerge
  • iTerm

Communication

  • Skype
  • Twitter
  • Trello

Communication

  • Slack
  • Google Docs / Sheets

Other

  • Spotify
  • Dropbox
  • Transmission

Tools

  • Yeoman
  • Bower
  • Gulp
  • Sass
  • BrowserSync

2. Health

😍😍😍

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
headspace

Bonus Tools for Health

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

Bonus Tools for Health

  • iOS 'Night Shift'
  • Flux

Flux Example

Flux

Dark Themes

Chrome Dev Tools

Use my Chrome Dev Tool Theme ;)

+10 Code Skill Points, "Paul Irish Certified"

Increase Your Scope

Scope

Christopher Murphy "Increase your Scope"

https://vimeo.com/124281076

Finland Education System

Finland

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

different

Find what works best for you.

Sublime Superpowers

http://docs.emmet.io/cheat-sheet/

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

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

.editorconfig

Ensure consistency throughout your team.


                    root = true

                    [*]
                    indent_style = space
                    indent_size = 4
                    end_of_line = LF
                    trim_trailing_whitespace = true

                    [{package.json,bower.json}]
                    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 sitename.dev
                    
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!

findme

(with `findme` alias)

                    $ findme class-name
                    

                    index=1
                    filenum=1
                    keyword=$1

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

                      filenum=$(($filenum + 1))
                    done
                    

`class-name22`

There it is!

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

Things can get complicated

complicated
kiss

Think, do we actually need this?

content

Evaluate and Prioritise

20mb retina hero image

vs

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

play

Have a play

Learning

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

jump

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

twitter

Thanks for all the replies!

https://twitter.com/s10wen/status/531914456029487105

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

@s10wen

Leeds Front-End Meetup

By Simon Owen

Leeds Front-End Meetup

  • 1,870