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.

@Mcr_FRED, @digiHike, @UpFrontConf

Disclaimer!

There are many different ways to do something,

find what works best for you.

In the beginning

Sometime around 1999…

Using Web Studio, Version 1.0 for Windows

http://s1.gq.nu

OMGZ!! I built a website!

WOW!!!

http://s1.gq.nu

10+ years later…

A lot has changed

Writing actual code, instead of a gui.

Some things haven't

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

Different Viewport Sizes

Browser Super Powers

FPS Performance Issues

Browser / Device Testing

• Virtual Box (for Internet Explorer)
• GhostLab

Version Control

• GitHub Desktop
• SourceTree

Version Control (New! 😄)

GitUp App

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

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

Use my Chrome Dev Tool Theme ;)

+10 Code Skill Points, "Paul Irish Certified"

Increase Your Scope

Christopher Murphy "Increase your Scope"

https://vimeo.com/124281076

Finland Education System

Non-tech Hobby

I like Hiking and playing the 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

Don't Burn Out!

3. Team Work

👨👩👧👦

Makes the dream work… 😉

Everyone is different

Find what works best for you.

Micro Improvements

http://jamesclear.com/marginal-gains

Sublime Superpowers

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

Sublime Superpowers

'Align By'

For Example; Shortcuts

Das Keyboard

Set Performance Budgets

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

Performance Budget

http requests, page load time, 404s

Performance Budget Builder

http://bradfrost.com/blog/post/performance-budget-builder/

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

• 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

Think, do we actually need this?

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…

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!

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

Closing Thoughts

"The geek always wins eventually"

Thanks @stephenmelrose

Closing Thoughts

http://justinjackson.ca/words.html

One More Thing…

Here's a secret!

New to Front-End?

https://twitter.com/necolas/status/291978260433219584

Thank You

@Mcr_FRED, @digiHike, @UpFrontConf

Simon Owen

@s10wen