SlideShare a Scribd company logo
1 of 85
Download to read offline
Chris Heilmann (@codepo8) - SmashingConf, NYC, June 2015
WELCOME TO PLANET
FINTLEWOODLEWIX
@codepo8
Chris Heilmann
THIS IS GOING TO BE ONE OF THESE
ANGRY, UNCOMFORTABLE TALKS…
…BUT I PROMISE,
YOU’LL FEEL
BETTER, WISER AND
MORE ENERGETIC
AFTERWARDS
I FEEL LIKE I DON’T
UNDERSTAND THINGS
ANY MORE.
https://medium.com/@codepo8/i-feel-like-a-fraud-and-thats-a-good-thing-cc1fa338b902
http://wesbos.com/overwhelmed-with-web-development/
PRAGMATIC
ENGINEERING OF THE
MODERN WEB WITH
FRAMEWORKS AND
FULL STACK DEVOPS
TOOLS.
WAY, WAY BACK AND TO THE
FUTURE
LET’S GO BACK A BIT…
HHGTTG
THE WEB IS THE
CLOSEST THING TO
THE GUIDE I KNOW…
AND THE PEOPLE OF
THE WEB WERE
PEOPLE I FELT GREAT
AMONGST.
FINTLEWOODLEWIX
"And the wheel," said the Captain, "What about
this wheel thingy? It sounds a terribly interesting
project."
"Ah," said the marketing girl, "Well, we’re having
a little difficulty there."
"Difficulty?" exclaimed Ford, "Difficulty? What
do you mean, difficulty? It's the single
simplest machine in the entire Universe!"
The marketing girl soured him with a look.
"Alright, Mr Wiseguy," she said, "you're so clever,
you tell us what colour it should have."
INNOVATION AND ADAPTATION…
WE ARE NOT OUR AUDIENCE
IN OTHER WORDS…
AS DEVELOPERS AND POWER
USERS OF THE WEB WE
ASSUME OUR AUDIENCE TO BE
AS EXCITED, KNOWLEDGABLE
AND ENGAGED AS WE ARE…
THE REALITY LOOKS DIFFERENT
LET’S DO A QUICK TEST
A B C
1
2
3
4
BASIC, LOGICAL THINKING…
A B C
1
2
3
4
2B
✘
BASIC, LOGICAL THINKING…
A B C
1
2
3
4
2B
✔
BASIC, LOGICAL THINKING…
A B C D E
1
2
3
4
5
6
7
BASIC, LOGICAL THINKING…
5D
✔
BASIC, LOGICAL THINKING…
A B C D E
1
2
3
4
5
6
7
A B C D E
1
2
3
4
5
6
7
5D
✘
BASIC, LOGICAL THINKING…
A B C D E F
1
2
3
4
5
6
7
8
BASIC, LOGICAL THINKING…
A B C D E F
1
2
3
4
5
6
7
8
3D
✘
BASIC, LOGICAL THINKING…
A B C D E F
1
2
3
4
5
6
7
8
3D
✔
BASIC, LOGICAL THINKING…
BASIC, LOGICAL THINKING…
…CHILD’S PLAY!
AND YET, WE ALL FAILED THIS…
Edwards: Why the big secret? People
are smart. They can handle it.
Kay: A person is smart. People are
dumb, panicky dangerous animals
and you know it.
Stressful environments
with mainstream users
breed accidental idiots.
!GIVEN
FOR THE AUDIENCE
OF NOW, THE WEB
IS NOTHING BUT
PLUMBING…
ARE YOU READY TO ROCK THE WORLD OF
“GENERATION SELFIE”?
NATIVE WINS THIS
AUDIENCE
•Beautiful interactions
•Simplicity of pressing an icon
to get where you want
•No waiting, no interstitials -
you buy, you get.
•Incredibly easy to buy things
•Easy to show and tell
•Consumable and defined by
fashion
THE BROWSER AND
THE WEB ARE THE
REDHEADED
STEPCHILDREN OF
MOBILE PLATFORMS!
THE COOL FACTOR
IS NOT ON THE WEB
ANY LONGER.
AND THAT’S OK!
https://www.microsoft.com/microsoft-hololens/en-us
MICROSOFT HOLOLENS
https://www.google.com/atap/project-jacquard/
GOOGLE JACQUARD
https://www.youtube.com/watch?v=0QNiZfSsPc0
GOOGLE SOLI
GOOGLE SPOTLIGHT STORIES
GOOGLE 360° VIDEOS / CARDBOARD
ACTUALLY…
ALL OF THIS IS THE
WEB!
The web is not binary, one or zero, on or
off. It’s not a platform where you get one
hundred per cent or zero per cent. It’s
this continuum.
The web is not a platform.
It’s a continuum.
https://adactio.com/journal/6692
– Jeremy Keith
The web is not a
platform. It’s a
continuum.
– Jeremy Keith
✓ 100% true
✓ Deep, future-focused
thinking
✓ Insightful
✓ Inspiring
✓ Techno hippie horseshit
WE’RE TRYING TO
SELL LONGEVITY TO A
MARKET THAT’S PURE
CONSUMERISM AND
HYPE.
NEW DEVELOPERS
WANT A SLICE OF
THAT PIE, NOT GRAND
VISIONS OF THE
FUTURE.
AND MOST OF IT IS BULLSHIT!
FOR US, IT’S ALL ABOUT THE RECOGNITION
FAKE CURRENCIES OF
FINTLEWOODLEWIX
WE HAVE THAT, TOO!
WE CREATE FOR
RECOGNITION BY
OUR PEERS INSTEAD
OF CREATING
PRODUCTS FOR END
USERS.
WE’RE IN THIS
ECHO CHAMBER OF
TOOLS AND
RECOGNITION…
•We build tool chains to make
ourselves more effective
•We create a new, innovative
editor every few months
using these tool chains.
•We have daily new libraries
that abstract all of our
problems
•We then have tasks runners
that minimise and pack
these libraries…
WE HAVE MORE
CONTENT THAT WE
CAN CONSUME.
•There’s an event almost
every day
•Videos, transcripts, slide
decks, all of these are
available.
•All of our learning content is
available on the web for free
•Every week is one amazingly
insightful blog post that
quotes 12 others.
WE DON’T NEED
USERS AS LONG AS
WE KEEP
APPLAUDING AND
ARGUING WITH
OURSELVES.
http://www.freepatentsonline.com/4608967.pdf
AND WE FIGHT EACH OTHER
WE ARE ALL EXPERTS…
We trained very hard, but it seemed
that every time we were beginning
to form into teams, we would be
reorganised.
I was to learn later in life that we
tend to meet any new situation by
reorganising and a wonderful
method it can be for creating the
illusion of progress, while producing
confusion, inefficiency and
demoralisation.
Caius Petronius (AD66)
WE DON’T EVEN
NEED PEOPLE TO
SPLIT US INTO
GROUPS.
•Full Stack Developer
•Devops
•Designers
•Webdevs
•Backend
•UX Person
•Front End Operations
Engineer
•Futurist
AND WE BROKE IT!
THE WEB IS BROKEN…
DESPITE ALL THE
COOL TECH WE
HAVE, THE WEB OF
TODAY SUCKS…
•The noise to content ratio is
ridiculous - reader modes are
the new popup blockers.
•Monetisation of the web is
aggressive advertising
•Waiting for fonts to load is the
new waiting for the page to
load.
•Tracking is rampant and
slows down traffic.
DOESN’T LOOK THAT
BAD TO YOU?
DESPITE
TRUCKLOADS OF
RESOURCES AND
INFO, WE
SUPERSIZED THE
WEB.
https://twitter.com/scottjehl/status/595827049136267266
OLD CLUTTER,
NEW WEB?
https://twitter.com/Caged/status/590602214021922818
WE HAVE NO LACK
OF EXCUSES…
•Clients want stuff we don’t
•Maintainers mess things up
•End users have ridiculous
setups and old browsers.
•Browser tooling isn’t good
enough
•We probably follow the wrong
methodology - let’s invent a
new one.
•Browsers are crap and
browser makers don’t listen
to us developers.
THANK GOD WE GOT FRAMEWORKS!
http://www.webpagetest.org/video/view.php?id=150314_Q2_DEY.1.0Tested From: Virginia USA - EC2 - Firefox - Cable
Tested From: Dulles, VA - Nexus 5 - Chrome http://www.webpagetest.org/video/view.php?id=150314_7R_DTG.1.0
HERE’S ONE GOOD
NEWS…
DELETING OLD AND
UNNECESSARY
CODE FEELS
TERRIBLY GOOD…
✘ VML
✘ attachEvent()
✘ currentStyle
✘ X-UA-Compatible (render
modes)
✘ IE Layout Quirks
✘ VBScript
✘ Conditional Comments
✘ MS-Prefixed Events
OLD IE INTERFACE
CODE REMOVED
FROM MICROSOFT
EDGE
REPLACING THE CRUFT WITH GOODNESS…
A WEB SAFARI BURNING CHROME?
https://twitter.com/Caged/status/590602214021922818
USER AGENT
SNIFFING…
USER AGENT
SNIFFING…
PARSING THE “PACK OF LIES”
LET’S DETECT MOBILE!
window.mobileCheck	
  =	
  function()	
  {	
  
	
  var	
  check	
  =	
  false;	
  
(function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|
elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge	
  |maemo|midp|mmp|mobile.+firefox|
netfront|opera	
  m(ob|in)i|palm(	
  os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|
symbian|treo|up.(browser|link)|vodafone|wap|windows	
  (ce|phone)|xda|xiino/i.test(a)||/1207|
6310|6590|3gso|4thp|50[1-­‐6]i|770s|802s|a	
  wa|abac|ac(er|oo|s-­‐)|ai(ko|rn)|al(av|ca|co)|amoi|
an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-­‐m|r	
  |s	
  )|avan|be(ck|ll|nq)|bi(lb|rd)|
bl(ac|az)|br(e|v)w|bumb|bw-­‐(n|u)|c55/|capi|ccwa|cdm-­‐|cell|chtm|cldc|cmd-­‐|co(mp|nd)|
craw|da(it|ll|ng)|dbte|dc-­‐s|devi|dica|dmob|do(c|p)o|ds(12|-­‐d)|el(49|ai)|em(l2|ul)|er(ic|
k0)|esl8|ez([4-­‐7]0|os|wa|ze)|fetc|fly(-­‐|_)|g1	
  u|g560|gene|gf-­‐5|g-­‐mo|go(.w|od)|gr(ad|
un)|haie|hcit|hd-­‐(m|p|t)|hei-­‐|hi(pt|ta)|hp(	
  i|ip)|hs-­‐c|ht(c(-­‐|	
  |_|a|g|p|s|t)|tp)|hu(aw|
tc)|i-­‐(20|go|ma)|i230|iac(	
  |-­‐|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|
jemu|jigs|kddi|keji|kgt(	
  |/)|klon|kpt	
  |kwc-­‐|kyo(c|k)|le(no|xi)|lg(	
  g|/(k|l|u)|50|54|-­‐
[a-­‐w])|libw|lynx|m1-­‐w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-­‐cr|me(rc|ri)|mi(o8|oa|ts)|
mmef|mo(01|02|bi|de|do|t(-­‐|	
  |o|v)|zz)|mt(50|p1|v	
  )|mwbp|mywa|n10[0-­‐2]|n20[2-­‐3]|n30(0|2)|
n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-­‐|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|
p800|pan(a|d|t)|pdxg|pg(13|-­‐([1-­‐8]|c))|phil|pire|pl(ay|uc)|pn-­‐2|po(ck|rt|se)|prox|psio|pt
-­‐g|qa-­‐a|qc(07|12|21|32|60|-­‐[2-­‐7]|i-­‐)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|
mm|ms|ny|va)|sc(01|h-­‐|oo|p-­‐)|sdk/|se(c(-­‐|0|1)|47|mc|nd|ri)|sgh-­‐|shar|sie(-­‐|m)|sk-­‐0|
sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-­‐|v-­‐|v	
  )|sy(01|mb)|t2(18|50)|t6(00|10|18)|
ta(gt|lk)|tcl-­‐|tdg-­‐|tel(i|m)|tim-­‐|t-­‐mo|to(pl|sh)|ts(70|m-­‐|m3|m5)|tx-­‐9|up(.b|g1|si)|
utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-­‐3]|-­‐v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|
85|98)|w3c(-­‐|	
  )|webc|whit|wi(g	
  |nc|nw)|wmlb|wonu|x700|yas-­‐|your|zeto|zte-­‐/
i.test(a.substr(0,4)))check	
  =	
  true})(navigator.userAgent||navigator.vendor||window.opera);	
  
return	
  check;	
  }	
  
WHAT CAN GO WRONG?
before
 after
 before
 after
RELIANCE ON WEBKIT-SPECIFIC,
EXPERIMENTAL FEATURES…
-webkit-appearance: none -webkit-gradient
PERPETUATING MISSPELLINGS
https://github.com/search?l=html&q=charset+%22UTF8%22&ref=searchresults&type=Code&utf8=%E2%9C%93
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<meta charset="utf-8">
<meta charset=“utf8"> ✘
✔
> 600k times in use on GitHub!
RELEASING A
STANDARDS
COMPLIANT
BROWSER IN 2015
ISN’T ENOUGH…
✘ we repeated the same
mistakes we did with IE6
(checking for browsers,
blocking others)
✘ we practice code “that
works” rather than “is
correct”
✘ we optimised our work for a
platform that doesn’t
appreciate it and where it
won’t flourish
IN SUMMARY…
✘ we over-communicate and
try to impress ourselves
✘ we feel like frauds and
stressed that we’re missing
the boat.
✘ we add to an ever-growing
landfill of broken code for
the sake of releasing the
newest and coolest.
✘ we widen the gap between
our users and us
I DON’T WANT TO BE ON
FINTLEWOODLEWIX
TELL US HOW GET HAPPY
AGAIN!
ENOUGH OF THIS…
WHEN THINGS BURN
WITHOUT A CAUSE, IT
FEELS TERRIBLE…
THE POWER OF REPAIR + CLEANUP
LET’S CALM DOWN
AND CLEAN OUR
ACT.
✔ Stop trying to impress and
do some work instead
✔ Test and try your products
not on the newest Mac and
with your developer
browsers
✔ Clean up old code, delete
things you hated writing
✔ Stop trying to replace
working technologies with
ones you prefer - talk to
people who like those
instead.
HERE’S TO FEELING
GOOD ALL THE
TIME!
✔ Feel more empathy, stop
using adblockers
✔ Communicate more with
clients and in our teams
✔ Let native run its course and
work towards the strengths
of the web
✔ Be what you want to be, not
what is the hot job title at
the moment - play to your
strengths.
LET’S DEVELOP AND STOP
TRYING TO ENGINEER.
OUR JOBS ARE
NEVER BORING AND
THERE IS SO MUCH
TO DO!
@CODEPO8
THANK YOU!

More Related Content

What's hot

The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)Christian Heilmann
 
Building a better web with free, open technologies
Building a better web with free, open technologiesBuilding a better web with free, open technologies
Building a better web with free, open technologiesChristian Heilmann
 
Turning a community into evangelism helpers - Devrelconf 2016
Turning a community into evangelism helpers - Devrelconf 2016Turning a community into evangelism helpers - Devrelconf 2016
Turning a community into evangelism helpers - Devrelconf 2016Christian Heilmann
 
Moving Your Library to Web 2.0 and Beyond
Moving Your Library to Web 2.0 and BeyondMoving Your Library to Web 2.0 and Beyond
Moving Your Library to Web 2.0 and BeyondBeckiemac
 
Building for real standards (no notes)
Building for real standards (no notes)Building for real standards (no notes)
Building for real standards (no notes)Christian Heilmann
 
Semantic Web For Distributed Social Networks
Semantic Web For Distributed Social NetworksSemantic Web For Distributed Social Networks
Semantic Web For Distributed Social NetworksDavid Peterson
 
Co powinieneś wiedzieć na temat devops?f
Co powinieneś wiedzieć na temat devops?f Co powinieneś wiedzieć na temat devops?f
Co powinieneś wiedzieć na temat devops?f Maciej Lasyk
 
The Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansChristian Heilmann
 

What's hot (9)

The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)The Soul in The Machine - Developing for Humans (FrankenJS edition)
The Soul in The Machine - Developing for Humans (FrankenJS edition)
 
Building a better web with free, open technologies
Building a better web with free, open technologiesBuilding a better web with free, open technologies
Building a better web with free, open technologies
 
Turning a community into evangelism helpers - Devrelconf 2016
Turning a community into evangelism helpers - Devrelconf 2016Turning a community into evangelism helpers - Devrelconf 2016
Turning a community into evangelism helpers - Devrelconf 2016
 
Moving Your Library to Web 2.0 and Beyond
Moving Your Library to Web 2.0 and BeyondMoving Your Library to Web 2.0 and Beyond
Moving Your Library to Web 2.0 and Beyond
 
Building for real standards (no notes)
Building for real standards (no notes)Building for real standards (no notes)
Building for real standards (no notes)
 
Semantic Web For Distributed Social Networks
Semantic Web For Distributed Social NetworksSemantic Web For Distributed Social Networks
Semantic Web For Distributed Social Networks
 
Co powinieneś wiedzieć na temat devops?f
Co powinieneś wiedzieć na temat devops?f Co powinieneś wiedzieć na temat devops?f
Co powinieneś wiedzieć na temat devops?f
 
Into The Box 2019 - Keynote Day1
Into The Box 2019 - Keynote Day1Into The Box 2019 - Keynote Day1
Into The Box 2019 - Keynote Day1
 
The Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for HumansThe Soul in The Machine - Developing for Humans
The Soul in The Machine - Developing for Humans
 

Similar to Smashingconf nyc-final

What's next? J and beyond keynote 2015
What's next? J and beyond keynote 2015What's next? J and beyond keynote 2015
What's next? J and beyond keynote 2015Christian Heilmann
 
Welcome to planet Fintlewoodlewix - SmashingConf Oxford 2014
Welcome to planet Fintlewoodlewix - SmashingConf Oxford 2014Welcome to planet Fintlewoodlewix - SmashingConf Oxford 2014
Welcome to planet Fintlewoodlewix - SmashingConf Oxford 2014Christian Heilmann
 
Smashingconf 150319145648-conversion-gate01
Smashingconf 150319145648-conversion-gate01Smashingconf 150319145648-conversion-gate01
Smashingconf 150319145648-conversion-gate01Home
 
Smashingconf 150319145648-conversion-gate01
Smashingconf 150319145648-conversion-gate01Smashingconf 150319145648-conversion-gate01
Smashingconf 150319145648-conversion-gate01Home
 
No more excuses! Let's build beautiful things. #codemotion Rome
No  more excuses! Let's build beautiful things. #codemotion Rome No  more excuses! Let's build beautiful things. #codemotion Rome
No more excuses! Let's build beautiful things. #codemotion Rome Christian Heilmann
 
Hackability: Free/Open Source Assistive Tech
Hackability: Free/Open Source Assistive TechHackability: Free/Open Source Assistive Tech
Hackability: Free/Open Source Assistive TechLiz Henry
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way… Christian Heilmann
 
No more excuses left - let's build great things - Christian Heilmann - Codemo...
No more excuses left - let's build great things - Christian Heilmann - Codemo...No more excuses left - let's build great things - Christian Heilmann - Codemo...
No more excuses left - let's build great things - Christian Heilmann - Codemo...Codemotion
 
Advancing the web without breaking it - #btconf
Advancing the web without breaking it - #btconfAdvancing the web without breaking it - #btconf
Advancing the web without breaking it - #btconfChristian Heilmann
 
Mind the Gap - All things Open 2015 Keynote
Mind the Gap - All things Open 2015 KeynoteMind the Gap - All things Open 2015 Keynote
Mind the Gap - All things Open 2015 KeynoteChristian Heilmann
 
The wheel is spinning but the hamster is almost dead - Smartweb 2015
The wheel is spinning but the hamster is almost dead - Smartweb 2015The wheel is spinning but the hamster is almost dead - Smartweb 2015
The wheel is spinning but the hamster is almost dead - Smartweb 2015Christian Heilmann
 
Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015Christian Heilmann
 
Mind the Gap - State of the Browser 2015
Mind the Gap - State of the Browser 2015Mind the Gap - State of the Browser 2015
Mind the Gap - State of the Browser 2015Christian Heilmann
 
Teaching Elephants to Dance (Federal Audience): A Developer's Journey to Digi...
Teaching Elephants to Dance (Federal Audience): A Developer's Journey to Digi...Teaching Elephants to Dance (Federal Audience): A Developer's Journey to Digi...
Teaching Elephants to Dance (Federal Audience): A Developer's Journey to Digi...Burr Sutter
 
The convergence of all things (wdu keynote)
The convergence of all things (wdu keynote)The convergence of all things (wdu keynote)
The convergence of all things (wdu keynote)Chris Wilson
 
Creating Your Own Personal Learning Network
Creating Your Own Personal Learning NetworkCreating Your Own Personal Learning Network
Creating Your Own Personal Learning NetworkCarl Keller
 
Web User Experience in 2021
Web User Experience in 2021Web User Experience in 2021
Web User Experience in 2021Drew Gorton
 
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008Association Paris-Web
 
Working In The Now - Paris Web
Working In The Now - Paris WebWorking In The Now - Paris Web
Working In The Now - Paris WebChristian Heilmann
 
Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014Chris Castiglione
 

Similar to Smashingconf nyc-final (20)

What's next? J and beyond keynote 2015
What's next? J and beyond keynote 2015What's next? J and beyond keynote 2015
What's next? J and beyond keynote 2015
 
Welcome to planet Fintlewoodlewix - SmashingConf Oxford 2014
Welcome to planet Fintlewoodlewix - SmashingConf Oxford 2014Welcome to planet Fintlewoodlewix - SmashingConf Oxford 2014
Welcome to planet Fintlewoodlewix - SmashingConf Oxford 2014
 
Smashingconf 150319145648-conversion-gate01
Smashingconf 150319145648-conversion-gate01Smashingconf 150319145648-conversion-gate01
Smashingconf 150319145648-conversion-gate01
 
Smashingconf 150319145648-conversion-gate01
Smashingconf 150319145648-conversion-gate01Smashingconf 150319145648-conversion-gate01
Smashingconf 150319145648-conversion-gate01
 
No more excuses! Let's build beautiful things. #codemotion Rome
No  more excuses! Let's build beautiful things. #codemotion Rome No  more excuses! Let's build beautiful things. #codemotion Rome
No more excuses! Let's build beautiful things. #codemotion Rome
 
Hackability: Free/Open Source Assistive Tech
Hackability: Free/Open Source Assistive TechHackability: Free/Open Source Assistive Tech
Hackability: Free/Open Source Assistive Tech
 
Progressing JavaScript and Apps the Web way…
 Progressing JavaScript and Apps the Web way…  Progressing JavaScript and Apps the Web way…
Progressing JavaScript and Apps the Web way…
 
No more excuses left - let's build great things - Christian Heilmann - Codemo...
No more excuses left - let's build great things - Christian Heilmann - Codemo...No more excuses left - let's build great things - Christian Heilmann - Codemo...
No more excuses left - let's build great things - Christian Heilmann - Codemo...
 
Advancing the web without breaking it - #btconf
Advancing the web without breaking it - #btconfAdvancing the web without breaking it - #btconf
Advancing the web without breaking it - #btconf
 
Mind the Gap - All things Open 2015 Keynote
Mind the Gap - All things Open 2015 KeynoteMind the Gap - All things Open 2015 Keynote
Mind the Gap - All things Open 2015 Keynote
 
The wheel is spinning but the hamster is almost dead - Smartweb 2015
The wheel is spinning but the hamster is almost dead - Smartweb 2015The wheel is spinning but the hamster is almost dead - Smartweb 2015
The wheel is spinning but the hamster is almost dead - Smartweb 2015
 
Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015Of innovation and impatience - Future Decoded 2015
Of innovation and impatience - Future Decoded 2015
 
Mind the Gap - State of the Browser 2015
Mind the Gap - State of the Browser 2015Mind the Gap - State of the Browser 2015
Mind the Gap - State of the Browser 2015
 
Teaching Elephants to Dance (Federal Audience): A Developer's Journey to Digi...
Teaching Elephants to Dance (Federal Audience): A Developer's Journey to Digi...Teaching Elephants to Dance (Federal Audience): A Developer's Journey to Digi...
Teaching Elephants to Dance (Federal Audience): A Developer's Journey to Digi...
 
The convergence of all things (wdu keynote)
The convergence of all things (wdu keynote)The convergence of all things (wdu keynote)
The convergence of all things (wdu keynote)
 
Creating Your Own Personal Learning Network
Creating Your Own Personal Learning NetworkCreating Your Own Personal Learning Network
Creating Your Own Personal Learning Network
 
Web User Experience in 2021
Web User Experience in 2021Web User Experience in 2021
Web User Experience in 2021
 
Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008Travailler dans le présent - Chris Heilmann - Paris Web 2008
Travailler dans le présent - Chris Heilmann - Paris Web 2008
 
Working In The Now - Paris Web
Working In The Now - Paris WebWorking In The Now - Paris Web
Working In The Now - Paris Web
 
Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014Programming for Non-Programmers - SXSW Vegas 2014
Programming for Non-Programmers - SXSW Vegas 2014
 

More from Christian Heilmann

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Christian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloChristian Heilmann
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteChristian Heilmann
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteChristian Heilmann
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandChristian Heilmann
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilegeChristian Heilmann
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerChristian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?Christian Heilmann
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Christian Heilmann
 
Progressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReachChristian Heilmann
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsChristian Heilmann
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansChristian Heilmann
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Christian Heilmann
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlChristian Heilmann
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Christian Heilmann
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfChristian Heilmann
 

More from Christian Heilmann (20)

Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019Develop, Debug, Learn? - Dotjs2019
Develop, Debug, Learn? - Dotjs2019
 
Hinting at a better web
Hinting at a better webHinting at a better web
Hinting at a better web
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Seven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC OsloSeven ways to be a happier JavaScript developer - NDC Oslo
Seven ways to be a happier JavaScript developer - NDC Oslo
 
Artificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynoteArtificial intelligence for humans… #AIDC2018 keynote
Artificial intelligence for humans… #AIDC2018 keynote
 
Killing the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynoteKilling the golden calf of coding - We are Developers keynote
Killing the golden calf of coding - We are Developers keynote
 
Progressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays FinlandProgressive Web Apps - Techdays Finland
Progressive Web Apps - Techdays Finland
 
Taking the "vile" out of privilege
Taking the "vile" out of privilegeTaking the "vile" out of privilege
Taking the "vile" out of privilege
 
Five ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developerFive ways to be a happier JavaScript developer
Five ways to be a happier JavaScript developer
 
Taking the P out of PWA
Taking the P out of PWATaking the P out of PWA
Taking the P out of PWA
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"
 
You learned JavaScript - now what?
You learned JavaScript - now what?You learned JavaScript - now what?
You learned JavaScript - now what?
 
Sacrificing the golden calf of "coding"
Sacrificing the golden calf of "coding"Sacrificing the golden calf of "coding"
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 - DevReachProgressive Web Apps - Covering the best of both worlds - DevReach
Progressive Web Apps - Covering the best of both worlds - DevReach
 
Progressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worldsProgressive Web Apps - Covering the best of both worlds
Progressive Web Apps - Covering the best of both worlds
 
Non-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humansNon-trivial pursuits: Learning machines and forgetful humans
Non-trivial pursuits: Learning machines and forgetful humans
 
Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center Progressive Web Apps - Bringing the web front and center
Progressive Web Apps - Bringing the web front and center
 
CSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. ControlCSS vs. JavaScript - Trust vs. Control
CSS vs. JavaScript - Trust vs. Control
 
Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017Leveling up your JavaScipt - DrupalJam 2017
Leveling up your JavaScipt - DrupalJam 2017
 
Breaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconfBreaking out of the Tetris mind set #btconf
Breaking out of the Tetris mind set #btconf
 

Recently uploaded

Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Krashi Coaching
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfsanyamsingh5019
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxRoyAbrique
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxGaneshChakor2
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformChameera Dedduwage
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13Steve Thomason
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsKarinaGenton
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxOH TEIK BIN
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationnomboosow
 
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesFatimaKhan178732
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introductionMaksud Ahmed
 
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...M56BOOKSTORE PRODUCT/SERVICE
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactdawncurless
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionSafetyChain Software
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfSumit Tiwari
 

Recently uploaded (20)

9953330565 Low Rate Call Girls In Rohini Delhi NCR
9953330565 Low Rate Call Girls In Rohini  Delhi NCR9953330565 Low Rate Call Girls In Rohini  Delhi NCR
9953330565 Low Rate Call Girls In Rohini Delhi NCR
 
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
Kisan Call Centre - To harness potential of ICT in Agriculture by answer farm...
 
Sanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdfSanyam Choudhary Chemistry practical.pdf
Sanyam Choudhary Chemistry practical.pdf
 
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptxContemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
Contemporary philippine arts from the regions_PPT_Module_12 [Autosaved] (1).pptx
 
CARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptxCARE OF CHILD IN INCUBATOR..........pptx
CARE OF CHILD IN INCUBATOR..........pptx
 
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝Model Call Girl in Bikash Puri  Delhi reach out to us at 🔝9953056974🔝
Model Call Girl in Bikash Puri Delhi reach out to us at 🔝9953056974🔝
 
A Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy ReformA Critique of the Proposed National Education Policy Reform
A Critique of the Proposed National Education Policy Reform
 
The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13The Most Excellent Way | 1 Corinthians 13
The Most Excellent Way | 1 Corinthians 13
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Science 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its CharacteristicsScience 7 - LAND and SEA BREEZE and its Characteristics
Science 7 - LAND and SEA BREEZE and its Characteristics
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptx
 
Interactive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communicationInteractive Powerpoint_How to Master effective communication
Interactive Powerpoint_How to Master effective communication
 
Separation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and ActinidesSeparation of Lanthanides/ Lanthanides and Actinides
Separation of Lanthanides/ Lanthanides and Actinides
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
KSHARA STURA .pptx---KSHARA KARMA THERAPY (CAUSTIC THERAPY)————IMP.OF KSHARA ...
 
Accessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impactAccessible design: Minimum effort, maximum impact
Accessible design: Minimum effort, maximum impact
 
Mastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory InspectionMastering the Unannounced Regulatory Inspection
Mastering the Unannounced Regulatory Inspection
 
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdfEnzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
Enzyme, Pharmaceutical Aids, Miscellaneous Last Part of Chapter no 5th.pdf
 

Smashingconf nyc-final

  • 1. Chris Heilmann (@codepo8) - SmashingConf, NYC, June 2015 WELCOME TO PLANET FINTLEWOODLEWIX
  • 3. THIS IS GOING TO BE ONE OF THESE ANGRY, UNCOMFORTABLE TALKS…
  • 4. …BUT I PROMISE, YOU’LL FEEL BETTER, WISER AND MORE ENERGETIC AFTERWARDS
  • 5. I FEEL LIKE I DON’T UNDERSTAND THINGS ANY MORE. https://medium.com/@codepo8/i-feel-like-a-fraud-and-thats-a-good-thing-cc1fa338b902
  • 6.
  • 8. WAY, WAY BACK AND TO THE FUTURE LET’S GO BACK A BIT…
  • 10. THE WEB IS THE CLOSEST THING TO THE GUIDE I KNOW…
  • 11. AND THE PEOPLE OF THE WEB WERE PEOPLE I FELT GREAT AMONGST.
  • 13. "And the wheel," said the Captain, "What about this wheel thingy? It sounds a terribly interesting project." "Ah," said the marketing girl, "Well, we’re having a little difficulty there." "Difficulty?" exclaimed Ford, "Difficulty? What do you mean, difficulty? It's the single simplest machine in the entire Universe!" The marketing girl soured him with a look. "Alright, Mr Wiseguy," she said, "you're so clever, you tell us what colour it should have." INNOVATION AND ADAPTATION…
  • 14. WE ARE NOT OUR AUDIENCE IN OTHER WORDS…
  • 15. AS DEVELOPERS AND POWER USERS OF THE WEB WE ASSUME OUR AUDIENCE TO BE AS EXCITED, KNOWLEDGABLE AND ENGAGED AS WE ARE…
  • 16. THE REALITY LOOKS DIFFERENT
  • 17. LET’S DO A QUICK TEST
  • 18. A B C 1 2 3 4 BASIC, LOGICAL THINKING…
  • 19. A B C 1 2 3 4 2B ✘ BASIC, LOGICAL THINKING…
  • 20. A B C 1 2 3 4 2B ✔ BASIC, LOGICAL THINKING…
  • 21. A B C D E 1 2 3 4 5 6 7 BASIC, LOGICAL THINKING…
  • 22. 5D ✔ BASIC, LOGICAL THINKING… A B C D E 1 2 3 4 5 6 7
  • 23. A B C D E 1 2 3 4 5 6 7 5D ✘ BASIC, LOGICAL THINKING…
  • 24. A B C D E F 1 2 3 4 5 6 7 8 BASIC, LOGICAL THINKING…
  • 25. A B C D E F 1 2 3 4 5 6 7 8 3D ✘ BASIC, LOGICAL THINKING…
  • 26. A B C D E F 1 2 3 4 5 6 7 8 3D ✔ BASIC, LOGICAL THINKING…
  • 28. AND YET, WE ALL FAILED THIS…
  • 29.
  • 30. Edwards: Why the big secret? People are smart. They can handle it. Kay: A person is smart. People are dumb, panicky dangerous animals and you know it.
  • 31. Stressful environments with mainstream users breed accidental idiots.
  • 33. FOR THE AUDIENCE OF NOW, THE WEB IS NOTHING BUT PLUMBING…
  • 34. ARE YOU READY TO ROCK THE WORLD OF “GENERATION SELFIE”?
  • 35. NATIVE WINS THIS AUDIENCE •Beautiful interactions •Simplicity of pressing an icon to get where you want •No waiting, no interstitials - you buy, you get. •Incredibly easy to buy things •Easy to show and tell •Consumable and defined by fashion
  • 36. THE BROWSER AND THE WEB ARE THE REDHEADED STEPCHILDREN OF MOBILE PLATFORMS!
  • 37. THE COOL FACTOR IS NOT ON THE WEB ANY LONGER.
  • 43. GOOGLE 360° VIDEOS / CARDBOARD
  • 44. ACTUALLY… ALL OF THIS IS THE WEB!
  • 45. The web is not binary, one or zero, on or off. It’s not a platform where you get one hundred per cent or zero per cent. It’s this continuum. The web is not a platform. It’s a continuum. https://adactio.com/journal/6692 – Jeremy Keith
  • 46. The web is not a platform. It’s a continuum. – Jeremy Keith ✓ 100% true ✓ Deep, future-focused thinking ✓ Insightful ✓ Inspiring ✓ Techno hippie horseshit
  • 47. WE’RE TRYING TO SELL LONGEVITY TO A MARKET THAT’S PURE CONSUMERISM AND HYPE.
  • 48. NEW DEVELOPERS WANT A SLICE OF THAT PIE, NOT GRAND VISIONS OF THE FUTURE.
  • 49. AND MOST OF IT IS BULLSHIT! FOR US, IT’S ALL ABOUT THE RECOGNITION
  • 52. WE CREATE FOR RECOGNITION BY OUR PEERS INSTEAD OF CREATING PRODUCTS FOR END USERS.
  • 53. WE’RE IN THIS ECHO CHAMBER OF TOOLS AND RECOGNITION… •We build tool chains to make ourselves more effective •We create a new, innovative editor every few months using these tool chains. •We have daily new libraries that abstract all of our problems •We then have tasks runners that minimise and pack these libraries…
  • 54. WE HAVE MORE CONTENT THAT WE CAN CONSUME. •There’s an event almost every day •Videos, transcripts, slide decks, all of these are available. •All of our learning content is available on the web for free •Every week is one amazingly insightful blog post that quotes 12 others.
  • 55. WE DON’T NEED USERS AS LONG AS WE KEEP APPLAUDING AND ARGUING WITH OURSELVES. http://www.freepatentsonline.com/4608967.pdf
  • 56. AND WE FIGHT EACH OTHER WE ARE ALL EXPERTS…
  • 57. We trained very hard, but it seemed that every time we were beginning to form into teams, we would be reorganised. I was to learn later in life that we tend to meet any new situation by reorganising and a wonderful method it can be for creating the illusion of progress, while producing confusion, inefficiency and demoralisation. Caius Petronius (AD66)
  • 58. WE DON’T EVEN NEED PEOPLE TO SPLIT US INTO GROUPS. •Full Stack Developer •Devops •Designers •Webdevs •Backend •UX Person •Front End Operations Engineer •Futurist
  • 59. AND WE BROKE IT! THE WEB IS BROKEN…
  • 60. DESPITE ALL THE COOL TECH WE HAVE, THE WEB OF TODAY SUCKS… •The noise to content ratio is ridiculous - reader modes are the new popup blockers. •Monetisation of the web is aggressive advertising •Waiting for fonts to load is the new waiting for the page to load. •Tracking is rampant and slows down traffic.
  • 62. DESPITE TRUCKLOADS OF RESOURCES AND INFO, WE SUPERSIZED THE WEB. https://twitter.com/scottjehl/status/595827049136267266
  • 64. WE HAVE NO LACK OF EXCUSES… •Clients want stuff we don’t •Maintainers mess things up •End users have ridiculous setups and old browsers. •Browser tooling isn’t good enough •We probably follow the wrong methodology - let’s invent a new one. •Browsers are crap and browser makers don’t listen to us developers.
  • 65. THANK GOD WE GOT FRAMEWORKS! http://www.webpagetest.org/video/view.php?id=150314_Q2_DEY.1.0Tested From: Virginia USA - EC2 - Firefox - Cable Tested From: Dulles, VA - Nexus 5 - Chrome http://www.webpagetest.org/video/view.php?id=150314_7R_DTG.1.0
  • 67. DELETING OLD AND UNNECESSARY CODE FEELS TERRIBLY GOOD… ✘ VML ✘ attachEvent() ✘ currentStyle ✘ X-UA-Compatible (render modes) ✘ IE Layout Quirks ✘ VBScript ✘ Conditional Comments ✘ MS-Prefixed Events
  • 68. OLD IE INTERFACE CODE REMOVED FROM MICROSOFT EDGE
  • 69. REPLACING THE CRUFT WITH GOODNESS…
  • 70. A WEB SAFARI BURNING CHROME? https://twitter.com/Caged/status/590602214021922818
  • 73. LET’S DETECT MOBILE! window.mobileCheck  =  function()  {    var  check  =  false;   (function(a){if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal| elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge  |maemo|midp|mmp|mobile.+firefox| netfront|opera  m(ob|in)i|palm(  os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0| symbian|treo|up.(browser|link)|vodafone|wap|windows  (ce|phone)|xda|xiino/i.test(a)||/1207| 6310|6590|3gso|4thp|50[1-­‐6]i|770s|802s|a  wa|abac|ac(er|oo|s-­‐)|ai(ko|rn)|al(av|ca|co)|amoi| an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-­‐m|r  |s  )|avan|be(ck|ll|nq)|bi(lb|rd)| bl(ac|az)|br(e|v)w|bumb|bw-­‐(n|u)|c55/|capi|ccwa|cdm-­‐|cell|chtm|cldc|cmd-­‐|co(mp|nd)| craw|da(it|ll|ng)|dbte|dc-­‐s|devi|dica|dmob|do(c|p)o|ds(12|-­‐d)|el(49|ai)|em(l2|ul)|er(ic| k0)|esl8|ez([4-­‐7]0|os|wa|ze)|fetc|fly(-­‐|_)|g1  u|g560|gene|gf-­‐5|g-­‐mo|go(.w|od)|gr(ad| un)|haie|hcit|hd-­‐(m|p|t)|hei-­‐|hi(pt|ta)|hp(  i|ip)|hs-­‐c|ht(c(-­‐|  |_|a|g|p|s|t)|tp)|hu(aw| tc)|i-­‐(20|go|ma)|i230|iac(  |-­‐|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro| jemu|jigs|kddi|keji|kgt(  |/)|klon|kpt  |kwc-­‐|kyo(c|k)|le(no|xi)|lg(  g|/(k|l|u)|50|54|-­‐ [a-­‐w])|libw|lynx|m1-­‐w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-­‐cr|me(rc|ri)|mi(o8|oa|ts)| mmef|mo(01|02|bi|de|do|t(-­‐|  |o|v)|zz)|mt(50|p1|v  )|mwbp|mywa|n10[0-­‐2]|n20[2-­‐3]|n30(0|2)| n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-­‐|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1| p800|pan(a|d|t)|pdxg|pg(13|-­‐([1-­‐8]|c))|phil|pire|pl(ay|uc)|pn-­‐2|po(ck|rt|se)|prox|psio|pt -­‐g|qa-­‐a|qc(07|12|21|32|60|-­‐[2-­‐7]|i-­‐)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma| mm|ms|ny|va)|sc(01|h-­‐|oo|p-­‐)|sdk/|se(c(-­‐|0|1)|47|mc|nd|ri)|sgh-­‐|shar|sie(-­‐|m)|sk-­‐0| sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-­‐|v-­‐|v  )|sy(01|mb)|t2(18|50)|t6(00|10|18)| ta(gt|lk)|tcl-­‐|tdg-­‐|tel(i|m)|tim-­‐|t-­‐mo|to(pl|sh)|ts(70|m-­‐|m3|m5)|tx-­‐9|up(.b|g1|si)| utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-­‐3]|-­‐v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83| 85|98)|w3c(-­‐|  )|webc|whit|wi(g  |nc|nw)|wmlb|wonu|x700|yas-­‐|your|zeto|zte-­‐/ i.test(a.substr(0,4)))check  =  true})(navigator.userAgent||navigator.vendor||window.opera);   return  check;  }   WHAT CAN GO WRONG?
  • 74. before after before after RELIANCE ON WEBKIT-SPECIFIC, EXPERIMENTAL FEATURES… -webkit-appearance: none -webkit-gradient
  • 76. RELEASING A STANDARDS COMPLIANT BROWSER IN 2015 ISN’T ENOUGH… ✘ we repeated the same mistakes we did with IE6 (checking for browsers, blocking others) ✘ we practice code “that works” rather than “is correct” ✘ we optimised our work for a platform that doesn’t appreciate it and where it won’t flourish
  • 77. IN SUMMARY… ✘ we over-communicate and try to impress ourselves ✘ we feel like frauds and stressed that we’re missing the boat. ✘ we add to an ever-growing landfill of broken code for the sake of releasing the newest and coolest. ✘ we widen the gap between our users and us
  • 78. I DON’T WANT TO BE ON FINTLEWOODLEWIX
  • 79. TELL US HOW GET HAPPY AGAIN! ENOUGH OF THIS…
  • 80. WHEN THINGS BURN WITHOUT A CAUSE, IT FEELS TERRIBLE…
  • 81. THE POWER OF REPAIR + CLEANUP
  • 82. LET’S CALM DOWN AND CLEAN OUR ACT. ✔ Stop trying to impress and do some work instead ✔ Test and try your products not on the newest Mac and with your developer browsers ✔ Clean up old code, delete things you hated writing ✔ Stop trying to replace working technologies with ones you prefer - talk to people who like those instead.
  • 83. HERE’S TO FEELING GOOD ALL THE TIME! ✔ Feel more empathy, stop using adblockers ✔ Communicate more with clients and in our teams ✔ Let native run its course and work towards the strengths of the web ✔ Be what you want to be, not what is the hot job title at the moment - play to your strengths.
  • 84. LET’S DEVELOP AND STOP TRYING TO ENGINEER.
  • 85. OUR JOBS ARE NEVER BORING AND THERE IS SO MUCH TO DO! @CODEPO8 THANK YOU!