SlideShare a Scribd company logo
THE STATE OF THE WEB
CHRIS HEILMANN (@CODEPO8), WEB ON THE EDGE, HELSINKI, SEPTEMBER 2015
WEB DEVELOPMENT
WAS A LOT ABOUT
GAPS…
CONSIDER THIS
SIMPLE, SENSIBLE
MARKUP…
…AND THE MESS
THAT INTERNET
EXPLORER 6 AND 7
MADE OF IT.
The State of the Web - Helsinki meetup
The State of the Web - Helsinki meetup
The State of the Web - Helsinki meetup
FIXES WERE
PLENTIFUL…
AND VERY SPECIFIC
TO THE BROWSER’S
ISSUES…
ALL OF THESE WERE
SOLUTIONS.
BUT THEY FELT BAD.
WRITE EXTRA MARKUP TO
WORK AROUND THE ISSUES
OF THE PARSER?
RELY ON HACKS THAT
EXPLOIT KNOWN PROBLEMS
IN THE CSS PARSER OF THE
OFFENDING BROWSER?
RELY ON KNOWN BUGS IN
THE CSS PARSER?
CREATE A DEDICATED STYLE
SHEET WITH ALL THE QUIRKS
IN THEM - ONE FOR EACH
OFFENDING BROWSER
FIND A SOLUTION AND
ENSURE THAT ONLY THE
PROBLEMATIC BROWSERS
GET IT?
STOP TRYING TO SOLVE THE
PROBLEM OF BROWSER
CREATORS AND FEED BACK
ISSUES SO THAT BROWSERS
CAN IMPROVE?
EXCEPT, BACK THEN
THERE WERE NO
FEEDBACK CHANNELS.
SO WE DID THE NEXT
BEST THING.
WE WROTE
ABSTRACTIONS TO
FIX BROWSER ISSUES
FOR US.
NO WAITING FOR
BROWSERS - LET’S
INNOVATE AND BUILD
THE THINGS WE WANT!
BROWSERS WILL CATCH
UP AND WE CAN REMOVE
OUR ABSTRACTIONS…
…EXCEPT, WE NEVER DO.
AT EVENTS, WE TALK
ABOUT AMAZING
SOLUTIONS BUT
SOMEHOW, IT FEELS
WE’RE NOT HAVING
AN EFFECT…
A LOT IS NOT
WORKING THE WAY
IT SHOULD…
🕗15 SECONDS
🕗15 SECONDS
http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/
THE TIME WE HAVE TO WAIT FOR
THE AVERAGE PAGE TO FULLY
LOAD…
http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/
THAT’S A PRETTY
TERRIBLE STATE OF
THE WEB.
• The median page’s time to interact
is 5.5 seconds, and fully loads in just
over 15 seconds.
• The median page is 2MB in size and
contains 170 resources
• Most sites fail to take advantage of
core image optimisation techniques
AND SO NOT UNCOMMON…
WELL, I AGREE…
HUGE, INDEED…
http://www.apple.com/ipad-air/
HUGE, INDEED…
http://www.apple.com/ipad-pro/
WHAT TO DO?
WE HAVE THE
TECHNOLOGY!
WE CAN PATCH IT!
WE HAVE THE
TECHNOLOGY!
WE CAN REBUILD IT!
https://instantarticles.fb.com/
Facebook: Instant Articles
WE HAVE THE
TECHNOLOGY!
WE CAN REBUILD IT!
https://www.ampproject.org/
Google:Accelerated Mobile Pages (AMP)
WE HAVE THE
TECHNOLOGY!
WE CAN REBUILD IT!
https://www.apple.com/news/
Apple News
OPEN, BUT KIND OF CLOSED…
WE’RE NOT APPLYING TECHNOLOGY
IN A WEB FRIENDLY FORMAT…
WHAT DOES THIS CODE DO?
JAVASCRIPT ABUSE IS
RAMPANT…
3MB OF BLOCKING
JAVASCRIPT BEFORE
THE FIRST WORD
APPEARS ON THE
PAGE!
WHAT THE HELL
HAPPENED HERE?
WHOSE FAULT IS
THIS?
PRETTY MUCH
OURS…
• Web development is still governed
by looks alone
• Clients still expect web sites to work
the same on every browser and
platform
• Quick delivery trumps quality and
release processes
• We’re asked to make things work
and fix them later - but there never
is a later.
A LOT OF OUR
INNOVATION AND
EASY TO USE
SOLUTIONS FEEL LIKE
PURE ESCAPISM…
I’M NOT SAYING
THERE SHOULD BE
NO INNOVATION…
IT IS JUST NOT
EVERYBODY’S
RESPONSIBILITY.
SOME OF US COULD
CONCENTRATE ON
KEEPING THE WEB A SOLID
FOUNDATION.
WE GET HIGH ON
TECHNICAL
SOLUTIONS THAT
GET INCREASINGLY
COMPLEX.
http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
THIS IS NOT AN OLD
MAN OF THE WEB
RANTING…
(WELL, NOT EXCLUSIVELY)
LATELY I WORKED
EXCLUSIVELY IN
FIXING ONE MASSIVE
ISSUE OF THE WEB…
WE REMOVED ALL
THE THINGS THE
WEB SUFFERED
FROM…
✘ VML
✘ attachEvent()
✘ currentStyle
✘ X-UA-Compatible (render modes)
✘ IE Layout Quirks
✘ VBScript
✘ Conditional Comments
✘ MS-Prefixed Events
WE REALISED YOU
CAN’T BREAK THE
WEB OVER NIGHT… :(
WE LEARNED THAT THERE ARE MANY WEBS…
before
 after
 before
 after
-webkit-appearance: none -webkit-gradient
…AND THAT EXPERIMENTAL FEATURES DON’T DIE
EDUCATING IS A
TOUGH JOB…
http://dev.modern.ie/tools/staticscan/
https://github.com/MicrosoftEdge/static-code-scan
THE BIGGEST
CULPRITS WE
FOUND…
✘ Aggressive browser sniffing
independent of version number
✘ Outdated libraries and polyfills -
some of them clashing with new
language features
✘ A lack of packaging and
dependency loading solutions -
dozens of JS files = no inlining
possible
✘ If it works on Safari iOS, that’s
what matters - no matter what
the spec says…
FIXING THE BROWSER SHOWED US HOW BROKEN THE WEB IS
WE HAVE WORKING COMMUNICATION
CHANNELS BETWEEN BROWSER MAKERS AND
DEVELOPERS…
LET’S USE THEM
PROPERLY.
HERE’S WHAT I LEARNED
WORKING FOR BROWSER
CREATORS
✓ It is a constant race not to break the
web - every mistake web developers
make needs to get catered for.
✓ The pressure is immense. Instead of
pushing for an interoperable web,
browsers are constantly compared and
expected to be different.
✓ When implementing standards, we
find a lot of problems and feed them
back. That’s why a score of 100% in
feature tests makes no sense.
✓ Most speed increases are based on
analysing and fixing developer
mistakes/sloppiness.
SO HERE IS MY PLEA
TO HELP WITH
BETTER SOLUTIONS
FOR EVERYONE…
STOP TELLING
PEOPLE ON THE
WEB THAT THERE
ARE DOZENS OF
SOLUTIONS THAT
MAGICALLY FIX ALL
THEIR ISSUES…
STOP CATERING TO
OLD BROWSERS.
GIVE THEM BASIC, WORKING
SOLUTIONS AND ENHANCE
USING FEATURE DETECTION.
EXPLAIN, DON’T
MAKE IT FASTER AND
EASIER!
SHOW THE DANGERS
OF QUICK SOLUTIONS.
KEEP THINGS ACCESSIBLE
FOR EVERYONE.
THERE IS NO TECHNICAL
BASELINE!
SIMPLY BECAUSE YOU CAN FIX ANYTHING WITH
JAVASCRIPT DOES NOT MEAN YOU SHOULD!
LET’S COLLECTIVELY
CALM DOWN!
WE’RE NOT IN A
HEALTHY STATE
RIGHT NOW AS A
COMMUNITY…
✘ We build to impress each other - the
people who need our solutions never
see them.
✘ We feel rushed and not good enough
- all the time.
✘ We feel innovation is going too slow
whilst not recognising when something
got fixed we wanted oh so much when
it was the hot thing to demand.
THE FIRST STEP TO
HAPPINESS IS TO
MAKE IT HAPPEN…
THE FIRST STEP TO
HAPPINESS IS TO
MAKE IT HAPPEN…
✓ Improve your basic skills, catch up on
what’s possible. caniuse.com is a
riveting read!
✓ Start helping people who are not here
and don’t follow hackernews. You start
teaching and you end up learning.
✓ Report problems, demand support for
basic features, not only for the hot,
new (half-baked) ones.
✓ Reach out beyond our echo chamber
if you want to reach people who need
the knowledge you have.
THANK YOU!
CHRIS HEILMANN
@CODEPO8

More Related Content

PDF
Moore vs. May - everything is faster and better: we can fix that
PDF
The image problem of the web and how to solve it…
PDF
Let’s learn how to use JavaScript responsibly and stay up-to-date.
PDF
Overboard.js - where are we going with with jsconfasia / devfestasia
PDF
Mind the Gap - State of the Browser 2015
PDF
Erase and Rewind - Open Web Camp 2015
PDF
The wheel is spinning but the hamster is almost dead - Smartweb 2015
PDF
Fixing web and JS gaps
Moore vs. May - everything is faster and better: we can fix that
The image problem of the web and how to solve it…
Let’s learn how to use JavaScript responsibly and stay up-to-date.
Overboard.js - where are we going with with jsconfasia / devfestasia
Mind the Gap - State of the Browser 2015
Erase and Rewind - Open Web Camp 2015
The wheel is spinning but the hamster is almost dead - Smartweb 2015
Fixing web and JS gaps

What's hot (20)

PDF
All the small things… - Awwwards 2016
PDF
The ES6 Conundrum - All Things Open 2015
PDF
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
PDF
Firefox OS - HTML5 for a truly world-wide-web
PDF
Making ES6 available to all with ChakraCore
PDF
Turning huge ships - Open Source and Microsoft
PDF
Upgrading JavaScript to ES6 and using TypeScript as a shortcut
PDF
A New Hope – the web strikes back
PDF
Innovating the other web - #wrocsharp keynote
PDF
NodeConfLondon - Making ES6 happen with ChakraCore and Node
PDF
Leveling up your JavaScipt - DrupalJam 2017
PDF
Breaking out of the Tetris mind set #btconf
PDF
What's next? J and beyond keynote 2015
PPTX
JavaScript : What is it really? AND Some new features in ES6
PPTX
Advancing JavaScript without breaking the web - MunichJS
PDF
Making ES6 available to all with ChakraCore and Typescript
PDF
Responsive, adaptive and responsible - keynote at NebraskaJS
PDF
Automating all the wrong things - You Gotta Love Frontend Keynote
PDF
JavaScript is a buffet - Scriptconf 2017 keynote
PDF
Why the heck isnt word press a cms
All the small things… - Awwwards 2016
The ES6 Conundrum - All Things Open 2015
Can we make es6 the baseline of the “modern web”? - BrazilJS 2105
Firefox OS - HTML5 for a truly world-wide-web
Making ES6 available to all with ChakraCore
Turning huge ships - Open Source and Microsoft
Upgrading JavaScript to ES6 and using TypeScript as a shortcut
A New Hope – the web strikes back
Innovating the other web - #wrocsharp keynote
NodeConfLondon - Making ES6 happen with ChakraCore and Node
Leveling up your JavaScipt - DrupalJam 2017
Breaking out of the Tetris mind set #btconf
What's next? J and beyond keynote 2015
JavaScript : What is it really? AND Some new features in ES6
Advancing JavaScript without breaking the web - MunichJS
Making ES6 available to all with ChakraCore and Typescript
Responsive, adaptive and responsible - keynote at NebraskaJS
Automating all the wrong things - You Gotta Love Frontend Keynote
JavaScript is a buffet - Scriptconf 2017 keynote
Why the heck isnt word press a cms
Ad

Similar to The State of the Web - Helsinki meetup (20)

PDF
Stapling and patching the web of now - ForwardJS3, San Francisco
PDF
Responsive Design
PDF
Progressive Web Apps – the return of the web? Goto Berlin 2016
PDF
Of innovation and impatience - Future Decoded 2015
PDF
New Rules of The Responsive Web
PDF
Progressing JavaScript and Apps the Web way…
PDF
Optimizing for Change (Henrik Joreteg)
PDF
Quo vadis, JavaScript? Devday.pl keynote
PDF
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
PDF
Breaking out of the endless callback look - #jsday Italy keynote
PDF
A call to JS Developers - Let’s stop trying to impress each other and start b...
PDF
Innovation vs. Impatience - keynote at JSOpenDay London 2015
PPTX
Web Performance - Why it matters
PDF
How We Make Apps And Services
PDF
The Progressive Web and its New Challenges - Confoo Montréal 2017
PPTX
Performance Tuning Web Apps - The Need For Speed
PDF
Programming for Non-Programmers - SXSW Vegas 2014
PDF
Programming for Non-programmers PFNP @ Razorfish
PPTX
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
Stapling and patching the web of now - ForwardJS3, San Francisco
Responsive Design
Progressive Web Apps – the return of the web? Goto Berlin 2016
Of innovation and impatience - Future Decoded 2015
New Rules of The Responsive Web
Progressing JavaScript and Apps the Web way…
Optimizing for Change (Henrik Joreteg)
Quo vadis, JavaScript? Devday.pl keynote
Ready to go Mobile? Today's Mobile Landscape: Responsive, Adaptive, Hybrid, a...
Breaking out of the endless callback look - #jsday Italy keynote
A call to JS Developers - Let’s stop trying to impress each other and start b...
Innovation vs. Impatience - keynote at JSOpenDay London 2015
Web Performance - Why it matters
How We Make Apps And Services
The Progressive Web and its New Challenges - Confoo Montréal 2017
Performance Tuning Web Apps - The Need For Speed
Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-programmers PFNP @ Razorfish
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
Ad

More from Christian Heilmann (20)

PPTX
Develop, Debug, Learn? - Dotjs2019
PDF
Hinting at a better web
PDF
Taking the "vile" out of privilege
PDF
Seven ways to be a happier JavaScript developer - NDC Oslo
PDF
Artificial intelligence for humans… #AIDC2018 keynote
PDF
Killing the golden calf of coding - We are Developers keynote
PDF
Progressive Web Apps - Techdays Finland
PDF
Taking the "vile" out of privilege
PDF
Five ways to be a happier JavaScript developer
PDF
Taking the P out of PWA
PDF
Sacrificing the golden calf of "coding"
PDF
You learned JavaScript - now what?
PDF
Sacrificing the golden calf of "coding"
PDF
Progressive Web Apps - Covering the best of both worlds - DevReach
PDF
Progressive Web Apps - Covering the best of both worlds
PPTX
Non-trivial pursuits: Learning machines and forgetful humans
PDF
Progressive Web Apps - Bringing the web front and center
PDF
CSS vs. JavaScript - Trust vs. Control
PDF
The Soul in The Machine - Developing for Humans (FrankenJS edition)
PDF
Progressive Web Apps - Goto Chicago 2017
Develop, Debug, Learn? - Dotjs2019
Hinting at a better web
Taking the "vile" out of privilege
Seven ways to be a happier JavaScript developer - NDC Oslo
Artificial intelligence for humans… #AIDC2018 keynote
Killing the golden calf of coding - We are Developers keynote
Progressive Web Apps - Techdays Finland
Taking the "vile" out of privilege
Five ways to be a happier JavaScript developer
Taking the P out of PWA
Sacrificing the golden calf of "coding"
You learned JavaScript - now what?
Sacrificing the golden calf of "coding"
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds
Non-trivial pursuits: Learning machines and forgetful humans
Progressive Web Apps - Bringing the web front and center
CSS vs. JavaScript - Trust vs. Control
The Soul in The Machine - Developing for Humans (FrankenJS edition)
Progressive Web Apps - Goto Chicago 2017

Recently uploaded (20)

PPTX
DENTAL CARIES FOR DENTISTRY STUDENT.pptx
DOC
Adobe Premiere Pro CC Crack With Serial Key Full Free Download 2025
PPT
genitourinary-cancers_1.ppt Nursing care of clients with GU cancer
PPTX
History and examination of abdomen, & pelvis .pptx
PPTX
Uterus anatomy embryology, and clinical aspects
PDF
NEET PG 2025 | 200 High-Yield Recall Topics Across All Subjects
PPTX
NEET PG 2025 Pharmacology Recall | Real Exam Questions from 3rd August with D...
PPTX
neonatal infection(7392992y282939y5.pptx
PPTX
Acid Base Disorders educational power point.pptx
PPTX
1 General Principles of Radiotherapy.pptx
PDF
CT Anatomy for Radiotherapy.pdf eryuioooop
PPTX
Slider: TOC sampling methods for cleaning validation
PPTX
CEREBROVASCULAR DISORDER.POWERPOINT PRESENTATIONx
PPTX
Important Obstetric Emergency that must be recognised
PDF
Medical Evidence in the Criminal Justice Delivery System in.pdf
PPTX
Respiratory drugs, drugs acting on the respi system
PPTX
Note on Abortion.pptx for the student note
DOCX
RUHS II MBBS Microbiology Paper-II with Answer Key | 6th August 2025 (New Sch...
PPTX
POLYCYSTIC OVARIAN SYNDROME.pptx by Dr( med) Charles Amoateng
PPT
1b - INTRODUCTION TO EPIDEMIOLOGY (comm med).ppt
DENTAL CARIES FOR DENTISTRY STUDENT.pptx
Adobe Premiere Pro CC Crack With Serial Key Full Free Download 2025
genitourinary-cancers_1.ppt Nursing care of clients with GU cancer
History and examination of abdomen, & pelvis .pptx
Uterus anatomy embryology, and clinical aspects
NEET PG 2025 | 200 High-Yield Recall Topics Across All Subjects
NEET PG 2025 Pharmacology Recall | Real Exam Questions from 3rd August with D...
neonatal infection(7392992y282939y5.pptx
Acid Base Disorders educational power point.pptx
1 General Principles of Radiotherapy.pptx
CT Anatomy for Radiotherapy.pdf eryuioooop
Slider: TOC sampling methods for cleaning validation
CEREBROVASCULAR DISORDER.POWERPOINT PRESENTATIONx
Important Obstetric Emergency that must be recognised
Medical Evidence in the Criminal Justice Delivery System in.pdf
Respiratory drugs, drugs acting on the respi system
Note on Abortion.pptx for the student note
RUHS II MBBS Microbiology Paper-II with Answer Key | 6th August 2025 (New Sch...
POLYCYSTIC OVARIAN SYNDROME.pptx by Dr( med) Charles Amoateng
1b - INTRODUCTION TO EPIDEMIOLOGY (comm med).ppt

The State of the Web - Helsinki meetup