Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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.
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...
http://www.webperformancetoday.com/2015/09/08/deja-vu-all-over-again/
THAT’S A PRETTY
TERRIBLE STATE OF
THE WEB.
• The med...
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 ...
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-20...
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)
✘ I...
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 polyfi...
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 -...
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 solution...
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...
THANK YOU!
CHRIS HEILMANN
@CODEPO8
The State of the Web - Helsinki meetup
The State of the Web - Helsinki meetup
The State of the Web - Helsinki meetup
Upcoming SlideShare
Loading in …5
×

The State of the Web - Helsinki meetup

3,522 views

Published on

Moo, I am a cow, nobody reads this.

Published in: Health & Medicine
  • It must be hard to keep a room tidy with hooves.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

The State of the Web - Helsinki meetup

  1. 1. THE STATE OF THE WEB CHRIS HEILMANN (@CODEPO8), WEB ON THE EDGE, HELSINKI, SEPTEMBER 2015
  2. 2. WEB DEVELOPMENT WAS A LOT ABOUT GAPS…
  3. 3. CONSIDER THIS SIMPLE, SENSIBLE MARKUP…
  4. 4. …AND THE MESS THAT INTERNET EXPLORER 6 AND 7 MADE OF IT.
  5. 5. FIXES WERE PLENTIFUL…
  6. 6. AND VERY SPECIFIC TO THE BROWSER’S ISSUES…
  7. 7. ALL OF THESE WERE SOLUTIONS. BUT THEY FELT BAD.
  8. 8. WRITE EXTRA MARKUP TO WORK AROUND THE ISSUES OF THE PARSER?
  9. 9. RELY ON HACKS THAT EXPLOIT KNOWN PROBLEMS IN THE CSS PARSER OF THE OFFENDING BROWSER?
  10. 10. RELY ON KNOWN BUGS IN THE CSS PARSER?
  11. 11. CREATE A DEDICATED STYLE SHEET WITH ALL THE QUIRKS IN THEM - ONE FOR EACH OFFENDING BROWSER
  12. 12. FIND A SOLUTION AND ENSURE THAT ONLY THE PROBLEMATIC BROWSERS GET IT?
  13. 13. STOP TRYING TO SOLVE THE PROBLEM OF BROWSER CREATORS AND FEED BACK ISSUES SO THAT BROWSERS CAN IMPROVE?
  14. 14. EXCEPT, BACK THEN THERE WERE NO FEEDBACK CHANNELS.
  15. 15. SO WE DID THE NEXT BEST THING. WE WROTE ABSTRACTIONS TO FIX BROWSER ISSUES FOR US.
  16. 16. NO WAITING FOR BROWSERS - LET’S INNOVATE AND BUILD THE THINGS WE WANT!
  17. 17. BROWSERS WILL CATCH UP AND WE CAN REMOVE OUR ABSTRACTIONS…
  18. 18. …EXCEPT, WE NEVER DO.
  19. 19. AT EVENTS, WE TALK ABOUT AMAZING SOLUTIONS BUT SOMEHOW, IT FEELS WE’RE NOT HAVING AN EFFECT…
  20. 20. A LOT IS NOT WORKING THE WAY IT SHOULD…
  21. 21. 🕗15 SECONDS
  22. 22. 🕗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…
  23. 23. 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
  24. 24. AND SO NOT UNCOMMON…
  25. 25. WELL, I AGREE…
  26. 26. HUGE, INDEED… http://www.apple.com/ipad-air/
  27. 27. HUGE, INDEED… http://www.apple.com/ipad-pro/
  28. 28. WHAT TO DO?
  29. 29. WE HAVE THE TECHNOLOGY! WE CAN PATCH IT!
  30. 30. WE HAVE THE TECHNOLOGY! WE CAN REBUILD IT! https://instantarticles.fb.com/ Facebook: Instant Articles
  31. 31. WE HAVE THE TECHNOLOGY! WE CAN REBUILD IT! https://www.ampproject.org/ Google:Accelerated Mobile Pages (AMP)
  32. 32. WE HAVE THE TECHNOLOGY! WE CAN REBUILD IT! https://www.apple.com/news/ Apple News
  33. 33. OPEN, BUT KIND OF CLOSED…
  34. 34. WE’RE NOT APPLYING TECHNOLOGY IN A WEB FRIENDLY FORMAT…
  35. 35. WHAT DOES THIS CODE DO?
  36. 36. JAVASCRIPT ABUSE IS RAMPANT…
  37. 37. 3MB OF BLOCKING JAVASCRIPT BEFORE THE FIRST WORD APPEARS ON THE PAGE!
  38. 38. WHAT THE HELL HAPPENED HERE?
  39. 39. WHOSE FAULT IS THIS?
  40. 40. 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.
  41. 41. A LOT OF OUR INNOVATION AND EASY TO USE SOLUTIONS FEEL LIKE PURE ESCAPISM…
  42. 42. I’M NOT SAYING THERE SHOULD BE NO INNOVATION…
  43. 43. IT IS JUST NOT EVERYBODY’S RESPONSIBILITY. SOME OF US COULD CONCENTRATE ON KEEPING THE WEB A SOLID FOUNDATION.
  44. 44. WE GET HIGH ON TECHNICAL SOLUTIONS THAT GET INCREASINGLY COMPLEX. http://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
  45. 45. THIS IS NOT AN OLD MAN OF THE WEB RANTING… (WELL, NOT EXCLUSIVELY)
  46. 46. LATELY I WORKED EXCLUSIVELY IN FIXING ONE MASSIVE ISSUE OF THE WEB…
  47. 47. 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
  48. 48. WE REALISED YOU CAN’T BREAK THE WEB OVER NIGHT… :(
  49. 49. WE LEARNED THAT THERE ARE MANY WEBS…
  50. 50. before after before after -webkit-appearance: none -webkit-gradient …AND THAT EXPERIMENTAL FEATURES DON’T DIE
  51. 51. EDUCATING IS A TOUGH JOB… http://dev.modern.ie/tools/staticscan/ https://github.com/MicrosoftEdge/static-code-scan
  52. 52. 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…
  53. 53. FIXING THE BROWSER SHOWED US HOW BROKEN THE WEB IS
  54. 54. WE HAVE WORKING COMMUNICATION CHANNELS BETWEEN BROWSER MAKERS AND DEVELOPERS…
  55. 55. 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.
  56. 56. SO HERE IS MY PLEA TO HELP WITH BETTER SOLUTIONS FOR EVERYONE…
  57. 57. STOP TELLING PEOPLE ON THE WEB THAT THERE ARE DOZENS OF SOLUTIONS THAT MAGICALLY FIX ALL THEIR ISSUES…
  58. 58. STOP CATERING TO OLD BROWSERS. GIVE THEM BASIC, WORKING SOLUTIONS AND ENHANCE USING FEATURE DETECTION.
  59. 59. EXPLAIN, DON’T MAKE IT FASTER AND EASIER!
  60. 60. SHOW THE DANGERS OF QUICK SOLUTIONS.
  61. 61. KEEP THINGS ACCESSIBLE FOR EVERYONE. THERE IS NO TECHNICAL BASELINE!
  62. 62. SIMPLY BECAUSE YOU CAN FIX ANYTHING WITH JAVASCRIPT DOES NOT MEAN YOU SHOULD!
  63. 63. LET’S COLLECTIVELY CALM DOWN!
  64. 64. 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.
  65. 65. THE FIRST STEP TO HAPPINESS IS TO MAKE IT HAPPEN…
  66. 66. 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.
  67. 67. THANK YOU! CHRIS HEILMANN @CODEPO8

×