of gaps, fillers and empty spaces… fronteers2015 closing keynote

92
OF GAPS, FILLERS AND EMPTY SPACES… CHRIS HEILMANN @CODEPO8, FRONTEERS, AMSTERDAM, OCTOBER 2015 https://www.flickr.com/photos/50064540@N02/7650431290 ealingjeff

Upload: christian-heilmann

Post on 13-Apr-2017

2.721 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

OF GAPS, FILLERS AND EMPTY SPACES…

CHRIS HEILMANN (﴾@CODEPO8)﴿, FRONTEERS, AMSTERDAM, OCTOBER 2015

https://www.flickr.com/photos/50064540@N02/7650431290 (﴾ealingjeff)﴿

Page 2: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

AN NOYI NG GA PS

Page 3: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

https://twitter.com/heydonworks/status/646687758690459648

WE’VE COME A LONG WAY AND WE’RE STILL ON A JOURNEY…

Page 4: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

https://twitter.com/heydonworks/status/646687758690459648

https://www.christianheilmann.com/wheres-‐chris-‐upcoming-‐speaking-‐appointments/

Page 5: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

ATTENDING THESE EVENTS IS GREAT AND I FEEL CONFUSED ALL THE TIME HOW I DESERVE ALL THIS…

Page 6: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

THIS HERE IS A PRIVILEGE WE HAVE…

SO MAKE SURE YOU MAKE THE BEST OF IT!

Page 7: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

YOU MEET AMAZING PEOPLE AT EVENTS…

Lizzie Mary Cullen lizziemarycullen.com

Page 8: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

PEOPLE WHO DRAW THE PRETTY LINES TO FILL OUT…

Page 9: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

PEOPLE WHO GROW WITH YOUR HELP…

Page 10: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

AND YOU CAN GO AND VISIT THEM AND WORK TOGETHER -‐ THIS IS A MOBILE WORLD!

Page 11: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

https://twitter.com/muffinresearch/status/639116308030881792

WE’VE COME A LONG WAY AND WE’RE STILL ON A JOURNEY…

TAKE SOME TIME TO HAVE FUN…

Page 12: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

YOU MEET PEOPLE AND YOU MAKE IMPRESSIONS…

Page 13: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

I GET, HOWEVER, DISAPPOINTED WITH THE RESULTS WE HAVE.

Page 14: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

I FEEL A DISCONNECT BETWEEN WHAT WE TALK ABOUT AT EVENTS AND WHAT I HEAR WHEN I TALK TO PEOPLE I WORK WITH.

Page 15: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

IT IS LIKE WE DON’T REACH THE PEOPLE WE CLAIM WE DO THIS FOR…

• The web is a mess. The average web page creeps up to 2MB with hundreds of dependencies.

• Outdated frameworks and helper libraries hinder browser interoperability. The quick fix of today is the part of the landfill of tomorrow.

• By trying to control the web we created parallel solutions for desktop and mobile -‐ each of which disappointing.

Page 16: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

THIS IS SO RAMPANT, THAT EVERY BROWSER MAKER HAS A DEDICATED TEAM AND TOOLS TO FIX PEOPLE’S CODE WITH THEM. http://dev.modern.ie/tools/staticscan/

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

Page 17: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

THE AMAZING TOOLS WE SHOW HERE ARE LARGELY UNKNOWN…

Page 18: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

THERE IS A HUGE DIFFERENCE IN MESSAGING AT DIFFERENT CONFERENCES.

Page 19: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

LET’S TALK A BIT ABOUT THE EXTREMES…

Page 20: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

THE WEB IS FREE AND INDEPENDENT.

Page 21: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

https://twitter.com/muffinresearch/status/639116308030881792

JAVASCRIPT IS FAULT INTOLERANT.

http://kryogenix.org/code/browser/everyonehasjs.html

Page 22: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

https://twitter.com/muffinresearch/status/639116308030881792

WE HAVE A PROBLEM WITH TOO MANY TOOLS COMING AND GOING AND BECOMING LANDFILL OF THE WEB…

Page 23: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

WEBSITE AND APPS DON’T NEED TO LOOK THE SAME IN EVERY BROWSER. REALLY.

Page 24: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

COOL LINKS DON’T CHANGE…

Page 25: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

SIMULATING NATIVE UI CONFUSES USERS

Page 26: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

ALL OF THESE THINGS ARE VERY TRUE AND VERY OBVIOUS…

Page 27: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

Photo by Marc Thiele https://www.flickr.com/photos/marcthiele/21461088898/in/faves-‐11414938@N00/

WELCOME TO THE 10TH ANNIVERSARY OF STATING THE BLOODY OBVIOUS…

Page 28: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

2004 -‐ 2005: STOP WRITING INLINE JAVASCRIPT!

Page 29: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

https://twitter.com/DanHannanMEP/status/647745678962245632/photo/1

THE WEB OF OLD FORGOT ABOUT THE LURE OF UGC

Page 30: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WHICH LEADS TO THE OTHER EXTREME…

Page 31: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

http://www.alansadick.com

Page 32: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WE GOT VERY DATA DRIVEN AND ARE ADDICTED TO NUMBERS…

Page 33: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

BROWSER STATS PROVE THE FUTURE IS HERE…

Page 34: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

TOOLING AND ABSTRACTIONS SAVE YOU FROM THE CONFUSION OF THE OPEN WEB.

“DON’T HOLD US BACK!”

Page 35: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

AND HAVE AN OVERWHELMING AMOUNT OF RESOURCES WITH DISAGREEING ADVICE.

https://medium.com/@_cmdv_/i-‐want-‐to-‐learn-‐javascript-‐in-‐2015-‐e96cd85ad225

Page 36: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

GET TOOLING…

Page 37: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

AND LEARN ABOUT THE MODERN STACK, DAMN YOU…

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

Page 38: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

BOTH EXTREMES LOVE TO QUOTE SELF MADE “LAWS” TO PROVE THEIR POINTS…

Page 39: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

MOORE’S LAW

Page 40: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

Software efficiency halves every 18 months, compensating Moore's law.

MAY’S LAW

Page 41: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

Be conservative in what you send; be liberal in what you accept.

POSTEL’S LAW

Page 42: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

https://www.flickr.com/photos/15511507@N00/5950941452 (﴾hepp)﴿

COLESLAW

Page 43: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WE NEED LESS DECREES AND DEMANDS

Page 44: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WE STOPPED BEING THE LOVABLE UNDERDOGS THAT

INVITE NEW TALENT…

Page 45: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WE TRY TO CHANGE THE WEB TO BE MORE “PROFESSIONAL”

Page 46: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WE TURNED ENGINEERING INTO A RELIGION -‐ WITH ALL THE DOGMA AND HOLY WARS THAT COMES WITH.

Page 47: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WE CONSIDER AUTOMATION AND INNOVATION TO BE LINEAR…

Page 48: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WE EXPECT EVERYBODY TO GET PURE HAPPINESS FROM CODING…

https://twitter.com/sarahmei/status/597276242887348224

Page 49: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WORKING AT A PACE NO HUMAN SHOULD WORK IN…

Page 50: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WE COMPLAIN ABOUT A LACK OF DIVERSITY AND INVITING ENVIRONMENTS…

…AND RUN HACKDAYS TO SOLVE THAT PROBLEM!

Page 51: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WE CREATE OPEN, BUT ARE NOT INVITING…

Page 52: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WE MADE THE TERMINAL THE STARTING POINT OF WEB DEVELOPMENT…

Page 53: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

A TYPICAL START OF A NEW WEB PROJECT…

This is easy, just:

• Have a macbook -‐ everything else is not professional and open enough

• Make sure you are sudo

• Install Node & NPM & Express.js

• Run the build script

• Look at a few minutes of random text scrolling by in your terminal hoping that none of the warnings mean something important

• If there is an error:

• Go to stack overflow and ask for help to learn that you’re doing everything wrong and should use another stack to start with

• Start typing some text in your editor

• Run the local server

• See that text in a browser.

Page 54: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

INSTEAD OF -‐ I DON’T KNOW -‐ THE WEB?

• JSBin, JSFiddle, Mozilla Thimble, CodePen… all of these are great teaching tools and not there to impress one another.

• Free test hosting is a good opportunity to get people up and running.

Page 55: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

!AFFILIATED -‐ CALM DOWN.

https://www.youtube.com/watch?v=yS_Wk193mLo

https://tryappservice.azure.com/en-‐us

Page 56: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WE NEED FEWER SHOW-‐OFF TOOLS…

Page 57: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

LET’S ALLOW PEOPLE TO BUILD MUSCLE MEMORY

Page 58: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

Photo by State Farm https://www.flickr.com/photos/40567541@N08/9473169772

WE’RE WIRED TO TRY TO PREDICT HE NEXT STEP.

Page 59: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

Photo by State Farm https://www.flickr.com/photos/40567541@N08/9473169772

Page 60: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

https://shkspr.mobi/blog/2015/09/you-mustnt-criticise-the-status-quo-at-a-hackday/

Geeks are people who run on dissent. We see the world is broken, refuse to accept it, and try to fix things. Then other geeks try to fix our mistakes, and then we fix theirs, until we either asymptotically climb towards perfection or tear the whole thing down and start again.

-‐ Terrence Eden (@edent)

Page 61: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

REMEMBER, WE WERE ADAMANT NOT TO BREAK THE WEB…

Page 62: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

AND NOW WE DO, EVERY SINGLE DAY.

Page 63: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

FOR THE SAKE OF FEELING IN CONTROL.

Page 64: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WITH JAVASCRIPT, WE ARE IN CONTROL AND WE CAN FIX ALMOST ANYTHING.

=

Page 65: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

THE PROBLEM IS THAT US IN CONTROL ALSO MEANS US RESPONSIBLE FOR THE OUTCOME…

Page 66: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WE FORFEIT ALL THE BEAUTIFUL AND IMPORTANT THINGS BROWSERS ALREADY DO FOR US…

Page 67: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

I’M NOT SAYING NOT TO USE JAVASCRIPT -‐ FAR FROM IT.

Page 68: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

https://twitter.com/DanHannanMEP/status/647745678962245632/photo/1

LET’S NOT VALUE BEING FIRST HIGHER THAN BEING USABLE

Page 69: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

I SAY WE SHOULD TRY TO STOP FORCING OR PREDICTING THE FUTURE

Page 70: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

DIDN’T SEE IT COMING…

Page 71: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

IT IS TIME TO USE WHAT WE HAVE MORE AND TO BE MORE DEMANDING TO FIX OUR BASELINE…

WE SHOULD NOT NEED TO CARE

ABOUT THE BROWSER AND HAVE TO TEST IN

ALL OF THEM!

Page 72: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

THERE ARE SOME BREAKTHROUGHS TO CELEBRATE…

https://playbook.cio.gov/designstandards

Page 73: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

DEEP DOWN, WE ALL ARE DO-‐GOODERS AND TECHNO HIPPIES.

AND WE CAN MAKE A CHANGE!

Page 74: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

PREPARE FOR A BIG CHANGE

Page 75: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WE FOCUS ALMOST EXCLUSIVELY ON THE VALLEY FOR INNOVATION AND GROWTH

Page 76: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

AND THERE IS NO LACK OF MONEY BEING THROWN AROUND…

Page 77: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

THE REAL GROWTH HAPPENS ELSEWHERE…

Page 78: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

AND THESE MARKETS PLAY BY VERY DIFFERENT RULES TO WHAT WE DO NOW…

Page 79: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

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

Page 80: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

PROXY BROWSERS ARE A BIG THING THERE…

https://vimeo.com/130296585https://speakerdeck.com/tkadlec/better-‐by-‐proxy-‐at-‐mobilism-‐2015

Tim Kadlec: Better by Proxy

Page 81: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

THE WEB IS A GIFT TO US ALL, AND YOU CAN CONTRIBUTE IN MANY WAYS. ALL OF US PLAYING ON THE BLEEDING EDGE IS MISSING THE POINT.

Page 82: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

BE ALONG FOR THE RIDE…

Page 83: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

SOMETIMES NOT CONTROLLING THINGS IS WHEN THE FUN STARTS…

Page 84: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

YES, THE WEB IS FULL OF TERRIBLE IDEAS, BAD ARCHITECTURE AND LACKS A LOT OF FEATURES NATIVE ENVIRONMENTS OFFER.

Page 85: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

BUT WHAT WE TRY TO REPLACE IT WITH RIGHT NOW, IS A STEP BACKWARDS…

Page 86: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

WABI-‐SABI

https://www.youtube.com/watch?v=V1gxziZwmkc

Page 87: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

https://en.wikipedia.org/wiki/Wabi-sabi

Wabi-‐sabi (﴾侘寂)﴿ represents a comprehensive Japanese world view or aesthetic centred on the acceptance of transience and imperfection. The aesthetic is sometimes described as one of beauty that is "imperfect, impermanent, and incomplete"

CELEBRATED GAPS…

Page 88: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

https://en.wikipedia.org/wiki/Kintsugi

"When the Japanese mend broken objects, they aggrandise the damage by filling the cracks with gold. They believe that when something has suffered damage and has a history it becomes more beautiful." -‐ Billie Mobayed

CELEBRATED GAPS…

Page 89: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

YES, THE WEB IS FULL OF TERRIBLE IDEAS, BAD ARCHITECTURE AND LACKS A LOT OF FEATURES NATIVE ENVIRONMENTS OFFER.

Page 90: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

LET’S WORK ON FILLING THOSE CRACKS WITH GOLD -‐ TOGETHER

Page 91: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

We all have different desires and needs, but if we don’t discover what we want from ourselves and what we stand for, we will live passively and unfulfilled.

– Bill Watterson

Page 92: Of Gaps, Fillers and Empty Spaces… Fronteers2015 closing keynote

THANK YOU!CHRIS HEILMANN

@CODEPO8