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
- 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
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
Sublime Superpowers
Sublime Superpowers
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
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
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
One More Thingβ¦
Here's a secret!
New to Front-End?
https://twitter.com/necolas/status/291978260433219584Leeds Front-End Meetup
By Simon Owen
Leeds Front-End Meetup
- 1,870