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
 
Working In The Now - Paris Web
Working In The Now - Paris WebWorking In The Now - Paris Web
Working In The Now - Paris WebChristian Heilmann
 
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
 
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
 
Working In The Now - Paris Web
Working In The Now - Paris WebWorking In The Now - Paris Web
Working In The Now - Paris Web
 
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
 
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

Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxJisc
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsKarakKing
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structuredhanjurrannsibayan2
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Jisc
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxDr. Sarita Anand
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibitjbellavia9
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfNirmal Dwivedi
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17Celine George
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsTechSoup
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - Englishneillewis46
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfciinovamais
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...Nguyen Thanh Tu Collection
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.christianmathematics
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfPoh-Sun Goh
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxcallscotland1987
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.pptRamjanShidvankar
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...Poonam Aher Patil
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdfQucHHunhnh
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfSherif Taha
 

Recently uploaded (20)

Towards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptxTowards a code of practice for AI in AT.pptx
Towards a code of practice for AI in AT.pptx
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
 
This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.This PowerPoint helps students to consider the concept of infinity.
This PowerPoint helps students to consider the concept of infinity.
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Dyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptxDyslexia AI Workshop for Slideshare.pptx
Dyslexia AI Workshop for Slideshare.pptx
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
General Principles of Intellectual Property: Concepts of Intellectual Proper...
General Principles of Intellectual Property: Concepts of Intellectual  Proper...General Principles of Intellectual Property: Concepts of Intellectual  Proper...
General Principles of Intellectual Property: Concepts of Intellectual Proper...
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Food safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.pdfFood safety_Challenges food safety laboratories_.pdf
Food safety_Challenges food safety laboratories_.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!