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
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.
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
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
# 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…
