A bit about me
Let's just get this out of the way...
I'm not 12.
Yes, I know I look young.
Yes, I do have my ID.
Before we begin...
Is anyone epileptic?
gifs incoming...
Disclaimer!
This is only one approach, there's many others.
WOW!!!
http://s1.gq.nu
10 years later...
A lot has changed
Writing actual code! instead of using a gui.
Some things haven't
The web is moving fast.
There's a bazillion things to learn.
We can't learn everything.
Don't Panic.
We have help.
Where to start?
Communicate :)
https://twitter.com/s10wen/status/593478156079734784Everyone is different
Find what works best for you.
Blog
Get a blog up and running, share what you find out.
Doesn't necessarily have to be about code.
Imposter Syndrome
Listen to Yoda
You
Will
Never
Learn
Everything
But it's OK!
---
Know When to
Chillax!
---
Don't Burn Out
Learn things, be smart
But, don't try to be too smart
Things can get complicated
Do we actually need it?
Evaluate and Prioritise
20mb retina hero image
vs
Getting content quick and viewing offline?
Service Worker anyone?
Wait for it...
Wait for it...
Wait for it...
Add sugar as required
If you can't do something yourself
It's ok to get help
Be a team player
Help make team members feel smart and awesome.
Not stupid and discouraged.
Don't go solo in a team repo
Have a taste first
Sometimes when you commit to something
It's hard to get back
Things I find helpful
- Dotfiles - Tutsplus tutorial
- Version Control
- Tooling
- Shortcuts, Shortcuts, Shortcuts
- Working Locally
- Improving With Each Project
Photoshop Shortcuts
Let's step into Terminal
Feeling all like...
I just created a new directory
&&
I'm in it!
Local Development Environment
# Yeoman, Bower and Grunt
$ npm install -g yo
# For gulp
$ npm install --global gulp
Files for each
npm = package.json
bower = bower.json
grunt = Gruntfile.js
gulp = gulpfile.js
Yeoman
Let's Install Something
Say we want html5shiv...
- Search Google
- Find it
- Download it
- Move to our project
- Include a link to it
Right?
Nope
Back to the terminal!
Search
$ bower search html5
Install
$ bower install html5shiv --save
What did that do then?
Not only has that now pulled in html5shiv to our project.
It's also saved it into the `bower.json` file.
So next time when we do `$ bower install` it automatically installs.
Yayayaya
Yayayaya
Git / GitHub / BitBucket
Sublime Superpowers
Styling with Sass
With grunt watch
, grunt will watch for changes and livereload will update the browser.
With Sass it's possible to split code up into separate files called partials.
Viewport Sizes
Live Reload Styling
Browser Testing
Modern.ie - The place to go to get old IE browsers.
Automated installation of IE VMs.
Update VB hosts file to point VB to local.
SVGs
Coming next year!
There's a lot to cover...
In the meantime, go follow:
Browser Testing
Gradient Rendering - CodePen / JS Bin / JSFiddle
Browser bugs - Safari
http://codepen.io/s10wen/pen/czDbu
This is a Safari rendering bug triggered by backface-visibility: hidden on the .pie-chart > :last-child em.
Reduction ftw!
Device Testing
iOS Testing
Horizontal Scrolling
*{border: 1px solid red !important;}
FPS Jank Busting
60fps makes me super happy
Build Tool Performance - App - 6.282s
Build Tool Performance - Dist - 4.726s
1.5 seconds saving
One More Thing...
Here's a secret!
New to Front-End?
https://twitter.com/necolas/status/291978260433219584New to Front-End?
And that's coming from a guy that wrote normalize.css
(which is fairly popular, even though it's spelt wrong :p)
McrFRED 25
By Simon Owen
McrFRED 25
- 3,198