MIND THE GAP

CHRIS HEILMANN (﴾@CODEPO8)﴿, ALL THINGS OPEN, RALEIGH, OCTOBER 2015

THE WEB HAS BEEN GOOD TO US…

IT IS AN AMAZING IDEA AND OFFER…

• Access to information world-‐wide, 24⨉7

• Independent of hardware, software, ability, or geographical location

• A read/write medium, everybody is invited to become a creator and not just a consumer

ONE PERSON’S BEAUTY IS ANOTHER ONE’S WORRY…

• It is hard to build software and interfaces for the unknown

• Open distribution, caching and availability of source code is anathema to content providers wanting to protect their content.

• We forgot to find a way to monetise the web. So we took what was already available -‐ advertising.

WE BROKE THE WEB

🕗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

• A lot is down to advertising and third party includes (﴾social buttons)﴿

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…

POWER APPLIED IN A CROOKED WAY…

DISCONNECT

DEVELOPMENT IS STILL SEEN AS MAGIC…

MAGIC IS MIGHT?

WE’RE SPOILT FOR CHOICE AND CONNECTED

ONE TRACK MINDS

FANCY, BEAUTIFUL THINGS…

PLUGGING WORKS, BUT IT IS FLIMSY

LOTS OF SMALL FIXES STILL TAKE UP A LARGE SPACE…

AVOIDING COMPLEXITY

GET TOOLING…

AND LEARN ABOUT THE MODERN STACK, DAMN YOU…

https://egghead.io/series/how-‐to-‐write-‐an-‐open-‐source-‐javascript-‐library

COMPLEXITY = SCARY

THE WEB WE DESERVE ISN’T HERE YET

LATELY I WORKED EXCLUSIVELY IN FIXING ONE MASSIVE ISSUE OF THE WEB…

I REALISED THAT WE MESSED UP -‐ BADLY…

IT IS 2015 -‐ AND IT IS STILL ABOUT BROWSERS?

COM•PATI•BILITY

DECISION TIME

TRYING TO MATCH CLOSED ENVIRONMENTS WITH OPEN IS EXHAUSTING…

TECHNOLOGY IS A JOURNEY

LET’S ANALYSE AND CLEAN UP.

PUT THE WEB ON A DIET.

ONE OUTDATED LIBRARY AT A TIME… http://dev.modern.ie/tools/staticscan/

https://github.com/MicrosoftEdge/static-‐code-‐scan

THINK USERS AND INTERFACES FIRST AND TECHNOLOGY SECOND…

https://playbook.cio.gov/designstandards

FIND OUR PLACE ON THE MAP

WE WILL NEVER HAVE FULL CONTROL OVER USERS. …AND THAT’S GREAT!

THE NEXT CHALLENGE IS NOT IN COFFEE SHOPS IN THE SILICON VALLEY…

THE NEXT USERS ARE NOT THOSE WHO COMPLAIN THE WEB IS NOT AS GOOD AS NATIVE APPS…

https://vimeo.com/139312920

https://brucelawson.github.io/talks/2015/velocity

Bruce Lawson at SOTB 2015

LET’S MAKE WHAT WE CAN CONTROL BETTER!

WEB DEVELOPERS AND BROWSER MAKERS SHOULD BE FRIENDS, NOT COMPETITORS

BROWSERS ARE THE OUTLINES AND TOOLS -‐ YOU NEED TO COLOUR THEM IN…

PLEASE, GO AND MAKE A BETTER WEB!

• Analyse the speed of your products and improve it by simplifying them: webpagetest.org

• Stop trying to guess what browser is in use and assume unknown browsers to be good, not terrible.

• Keep up to date with what browsers can do: caniuse.com and use it!

• File bugs, report issues, talk to us!

YOU MAKE THE WEB, LET US HEAR WHAT YOU NEED…

THANK YOU!CHRIS HEILMANN

@CODEPO8

Mind the gap by ealingjeff: https://www.flickr.com/photos/50064540@N02/7650431290 Friends by Fran+Silva https://www.flickr.com/photos/52982375@N03/6076369071/ Shards by GabPRR https://www.flickr.com/photos/80068056@N03/8573350989

Every other photo by Chris Heilmann -‐ licensed CC/BY