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
December 2011: greenbelt.org.uk
Slide 19
Slide 19 text
December 2011: greenbelt.org.uk
Slide 20
Slide 20 text
December 2011: greenbelt.org.uk
Slide 21
Slide 21 text
December 2011: greenbelt.org.uk
Slide 22
Slide 22 text
December 2011: greenbelt.org.uk
Slide 23
Slide 23 text
December 2011: greenbelt.org.uk
Slide 24
Slide 24 text
December 2011: greenbelt.org.uk
Slide 25
Slide 25 text
December 2011: greenbelt.org.uk
Slide 26
Slide 26 text
December 2011: greenbelt.org.uk
Slide 27
Slide 27 text
December 2011: greenbelt.org.uk
Slide 28
Slide 28 text
Understanding the technology your
audience is using gives you a point of
reference for your decisions.
Slide 29
Slide 29 text
Our approach: mobile first responsive
design
Slide 30
Slide 30 text
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Problem: no media query support in IE8
and below.
Slide 33
Slide 33 text
No media query support
Slide 34
Slide 34 text
No media query support
Slide 35
Slide 35 text
No media query support
Slide 36
Slide 36 text
Option 1: serve these users the mobile
version of the site only
Slide 37
Slide 37 text
Option 2: Use respond.js to polyfill media
query support
Slide 38
Slide 38 text
Option 3: Offer a fixed width version of the
site to IE8 and below
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Problem: lack of support for styling HTML5
semantic elements in older browsers.
Slide 41
Slide 41 text
No support for HTML5 semantic elements
Slide 42
Slide 42 text
No support for HTML5 semantic elements
Slide 43
Slide 43 text
No support for HTML5 semantic elements
Slide 44
Slide 44 text
Option 1: use the JavaScript polyfill
html5.js to add support via JavaScript
Slide 45
Slide 45 text
Option 2: avoid using HTML5 semantic
elements in the templates until IE8 usage
declines
Slide 46
Slide 46 text
Replacing divs with semantic elements
later is trivial due to our template based
CMS.
Slide 47
Slide 47 text
We (edgeofmyseat.com) are retained to
maintain & develop the site. We can make
these changes when old browser usage
reduces.
Slide 48
Slide 48 text
Your mileage (and situation) may vary.
Slide 49
Slide 49 text
Avoiding using the tag in your selectors
means you can switch tags in your
templates without changing your CSS.
Slide 50
Slide 50 text
Problem: lack of support for certain CSS3
Selectors in older browsers.
Slide 51
Slide 51 text
No support for nth-child
Slide 52
Slide 52 text
Option1: do nothing
Slide 53
Slide 53 text
Option 2: polyfill with Selectivizr
Slide 54
Slide 54 text
Option 3: fix each selector in your own
JavaScript
Slide 55
Slide 55 text
My decision to fix the width for older
browsers also made polyfilling CSS3
selectors much easier.
Slide 56
Slide 56 text
Problem: no clear solution for Responsive
Images
Slide 57
Slide 57 text
Solution: put in place technology that will
enable us to adopt a solution later
Slide 58
Slide 58 text
My process
Slide 59
Slide 59 text
1. What is the problem?
My process
Slide 60
Slide 60 text
1. What is the problem?
My process
2. What are my constraints?
Slide 61
Slide 61 text
1. What is the problem?
My process
2. What are my constraints?
3. Is not supporting this feature an option?
Slide 62
Slide 62 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?
Slide 63
Slide 63 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 64
Slide 64 text
May 2012: grabaperch.com
Slide 65
Slide 65 text
May 2012: grabaperch.com
Slide 66
Slide 66 text
May 2012: grabaperch.com
Slide 67
Slide 67 text
May 2012: grabaperch.com
Slide 68
Slide 68 text
May 2012: grabaperch.com
Slide 69
Slide 69 text
May 2012: grabaperch.com
Slide 70
Slide 70 text
May 2012: grabaperch.com
Slide 71
Slide 71 text
May 2012: grabaperch.com
Slide 72
Slide 72 text
May 2012: grabaperch.com
Slide 73
Slide 73 text
How many users of the Perch website do
not have support for the modern web
technologies we want to use?
Slide 74
Slide 74 text
May 2012: grabaperch.com
Slide 75
Slide 75 text
May 2012: grabaperch.com
Slide 76
Slide 76 text
May 2012: grabaperch.com
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 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 79
Slide 79 text
Why not just use a
boilerplate?
Slide 80
Slide 80 text
No content
Slide 81
Slide 81 text
Stop solving problems
you don’t yet have
Slide 82
Slide 82 text
If you don’t know
what it is doing.
Why is it there?
Slide 83
Slide 83 text
What happens if any
part does not load?
Slide 84
Slide 84 text
Do you know what
is safe to delete?
Slide 85
Slide 85 text
Starting with the bare minimum and
adding things forces you to consider the
implications of each thing you add.
Slide 86
Slide 86 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 87
Slide 87 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 88
Slide 88 text
Size Matters
Slide 89
Slide 89 text
Helping people to
start well.
Slide 90
Slide 90 text
We are all learners and we are all
teachers...
Slide 91
Slide 91 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 92
Slide 92 text
Polyfills should
not be a black box
Slide 93
Slide 93 text
Teach problem solving
before polyfilling.
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
“Perch is removing my
paragraphs”
Slide 96
Slide 96 text
We need to teach:
HTML, CSS, JavaScript
Slide 97
Slide 97 text
We need to teach:
Problem Solving skills
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
If we train people to just copy and paste,
we stop them growing, learning and
contributing.
Slide 100
Slide 100 text
Moving the web forward
together
Slide 101
Slide 101 text
Make sure you know why you are using a
solution and what your other options are.
Slide 102
Slide 102 text
Know and test for what happens if
JavaScript doesn’t load.
Slide 103
Slide 103 text
When teaching or writing tutorials for
others explain problems before handing
out the solution.
Explain why as well as how.