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
Smashingconf nyc-final
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…
Smashingconf nyc-final
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
 
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
 
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
 
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
 
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
 
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
 
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

KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...M56BOOKSTORE PRODUCT/SERVICE
 
EBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlEBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlDr. Bruce A. Johnson
 
3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptxmary850239
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17Celine George
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeCeline George
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapitolTechU
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17Celine George
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptxmary850239
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdfJayanti Pande
 
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTDR. SNEHA NAIR
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxSlides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxCapitolTechU
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesCeline George
 
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...Dr. Asif Anas
 
Department of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdfDepartment of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdfMohonDas
 

Recently uploaded (20)

KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...KARNAADA.pptx  made by -  saransh dwivedi ( SD ) -  SHALAKYA TANTRA - ENT - 4...
KARNAADA.pptx made by - saransh dwivedi ( SD ) - SHALAKYA TANTRA - ENT - 4...
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
EBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting BlEBUS5423 Data Analytics and Reporting Bl
EBUS5423 Data Analytics and Reporting Bl
 
3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx3.26.24 Race, the Draft, and the Vietnam War.pptx
3.26.24 Race, the Draft, and the Vietnam War.pptx
 
Finals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quizFinals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quiz
 
How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17How to Create a Toggle Button in Odoo 17
How to Create a Toggle Button in Odoo 17
 
How to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using CodeHow to Send Emails From Odoo 17 Using Code
How to Send Emails From Odoo 17 Using Code
 
CapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptxCapTechU Doctoral Presentation -March 2024 slides.pptx
CapTechU Doctoral Presentation -March 2024 slides.pptx
 
How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17How to Make a Field read-only in Odoo 17
How to Make a Field read-only in Odoo 17
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptx
 
10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf10 Topics For MBA Project Report [HR].pdf
10 Topics For MBA Project Report [HR].pdf
 
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINTARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
ARTICULAR DISC OF TEMPOROMANDIBULAR JOINT
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptxSlides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
Slides CapTechTalks Webinar March 2024 Joshua Sinai.pptx
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
How to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 SalesHow to Manage Cross-Selling in Odoo 17 Sales
How to Manage Cross-Selling in Odoo 17 Sales
 
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
Unveiling the Intricacies of Leishmania donovani: Structure, Life Cycle, Path...
 
Department of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.pdfDepartment of Health Compounder Question ‍Solution 2022.pdf
Department of Health Compounder Question ‍Solution 2022.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
  • 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…
  • 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!