Rachel Andrew
http://edgeofmyseat.com
http://grabaperch.com
http://rachelandrew.co.uk
@rachelandrew
Slide 3
Slide 3 text
a History Lesson
Slide 4
Slide 4 text
<!--
function MM_reloadPage(init) {
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
//-->
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Things used by people who understand the
problems they solve are also used by those
who do not understand those problems, or
even if there is a problem.
Slide 7
Slide 7 text
This is an amazing time
to be a web developer.
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Frustration
Slide 11
Slide 11 text
The web is a
work in progress.
Your job?
To deal with it.
Slide 12
Slide 12 text
Making things better
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
You now have
two problems
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
The state of play in December 2011.
Slide 17
Slide 17 text
December 2011: greenbelt.org.uk
Slide 18
Slide 18 text
Understanding the technology your
audience is using gives you a point of
reference for your decisions.
Slide 19
Slide 19 text
Our approach: mobile first responsive
design
Slide 20
Slide 20 text
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Problem: no media query support in IE8
and below.
Slide 23
Slide 23 text
No media query support
Slide 24
Slide 24 text
Option 1: serve these users the mobile
version of the site only
Slide 25
Slide 25 text
Option 2: Use respond.js to polyfill media
query support
Slide 26
Slide 26 text
Option 3: Offer a fixed width version of the
site to IE8 and below
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
Problem: lack of support for styling HTML5
semantic elements in older browsers.
Slide 29
Slide 29 text
No support for HTML5 semantic elements
Slide 30
Slide 30 text
Option 1: use the JavaScript polyfill
html5.js to add support via JavaScript
Slide 31
Slide 31 text
Option 2: avoid using HTML5 semantic
elements in the templates until IE8 usage
declines
Slide 32
Slide 32 text
Replacing divs with semantic elements
later is trivial due to our template based
CMS.
Slide 33
Slide 33 text
We (edgeofmyseat.com) are retained to
maintain & develop the site. We can make
these changes when old browser usage
reduces.
Slide 34
Slide 34 text
Your mileage (and situation) may vary.
Slide 35
Slide 35 text
Avoiding using the tag in your selectors
means you can switch tags in your
templates without changing your CSS.
Slide 36
Slide 36 text
Problem: lack of support for certain CSS3
Selectors in older browsers.
Slide 37
Slide 37 text
No support for nth-child
Slide 38
Slide 38 text
Option1: do nothing
Slide 39
Slide 39 text
Option 2: polyfill with Selectivizr
Slide 40
Slide 40 text
Option 3: fix each selector in your own
JavaScript
Slide 41
Slide 41 text
My decision to fix the width for older
browsers also made polyfilling CSS3
selectors much easier.
Slide 42
Slide 42 text
Problem: no clear solution for Responsive
Images
Slide 43
Slide 43 text
Solution: put in place technology that will
enable us to adopt a solution later
Slide 44
Slide 44 text
1. What is the problem?
My process
2. What are my constraints?
3. Is not supporting this feature an option?
4. What current solutions exist?
5. Use a polyfill or roll my own?
Slide 45
Slide 45 text
May 2012: grabaperch.com
Slide 46
Slide 46 text
How many users of the Perch website do
not have support for the modern web
technologies we want to use?
Slide 47
Slide 47 text
May 2012: grabaperch.com
Slide 48
Slide 48 text
I use more polyfills when I have fewer
older browser users. The downsides are
going to be an issue to a much smaller %
Slide 49
Slide 49 text
Why not just use a
boilerplate?
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
Stop solving problems
you don’t yet have
Slide 52
Slide 52 text
If you don’t know
what it is doing.
Why is it there?
Slide 53
Slide 53 text
What happens if any
part does not load?
Slide 54
Slide 54 text
Do you know what
is safe to delete?
Slide 55
Slide 55 text
Starting with the bare minimum and
adding things forces you to consider the
implications of each thing you add.
Slide 56
Slide 56 text
There’s no silver bullet to making a slow
site fast. You must take a holistic
approach. High performance runs the
entire way through from the hardware it’s
hosted on, through the app that builds the
pages, to the server software that delivers
the pages and the front end code that
displays them in a browser.
Drew McLellan - http://allinthehead.com/retro/361/how-to-make-your-website-fast
Slide 57
Slide 57 text
Web pages are getting larger and a lot of
the size is down to JavaScript.
http://royal.pingdom.com/2011/11/21/web-pages-getting-bloated-here-is-why/
Slide 58
Slide 58 text
Size Matters
Slide 59
Slide 59 text
Helping people to
start well.
Slide 60
Slide 60 text
We are all learners and we are all
teachers...
Slide 61
Slide 61 text
... no matter how old we are, how long we
have been doing this, and whether we
write tutorials or speak at conferences or
not.
Slide 62
Slide 62 text
Polyfills should
not be a black box
Slide 63
Slide 63 text
Teach problem solving
before polyfilling.
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
“Perch is removing my
paragraphs”
Slide 66
Slide 66 text
We need to teach:
HTML, CSS, JavaScript
Slide 67
Slide 67 text
We need to teach:
Problem Solving skills
Slide 68
Slide 68 text
No content
Slide 69
Slide 69 text
If we train people to just copy and paste,
we stop them growing, learning and
contributing.
Slide 70
Slide 70 text
Moving the web forward
together
Slide 71
Slide 71 text
Make sure you know why you are using a
solution and what your other options are.
Slide 72
Slide 72 text
Know and test for what happens if
JavaScript doesn’t load.
Slide 73
Slide 73 text
When teaching or writing tutorials for
others explain problems before handing
out the solution.
Explain why as well as how.