Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014

937 views

Published on

Do you even read me?

Published in: Education
  • Be the first to comment

Welcome to planet Fintlewoodlewix - SmashingConf NYC 2014

  1. 1. Chris Heilmann (@codepo8) - SmashingConf, NYC, June 2015 WELCOME TO PLANET FINTLEWOODLEWIX
  2. 2. @codepo8 Chris Heilmann
  3. 3. THIS IS GOING TO BE ONE OF THESE ANGRY, UNCOMFORTABLE TALKS…
  4. 4. …BUT I PROMISE, YOU’LL FEEL BETTER, WISER AND MORE ENERGETIC AFTERWARDS
  5. 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. 6. http://wesbos.com/overwhelmed-with-web-development/ PRAGMATIC ENGINEERING OF THE MODERN WEB WITH FRAMEWORKS AND FULL STACK DEVOPS TOOLS.
  7. 7. WAY, WAY BACK AND TO THE FUTURE LET’S GO BACK A BIT…
  8. 8. HHGTTG
  9. 9. THE WEB IS THE CLOSEST THING TO THE GUIDE I KNOW…
  10. 10. AND THE PEOPLE OF THE WEB WERE PEOPLE I FELT GREAT AMONGST.
  11. 11. FINTLEWOODLEWIX
  12. 12. "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…
  13. 13. WE ARE NOT OUR AUDIENCE IN OTHER WORDS…
  14. 14. AS DEVELOPERS AND POWER USERS OF THE WEB WE ASSUME OUR AUDIENCE TO BE AS EXCITED, KNOWLEDGABLE AND ENGAGED AS WE ARE…
  15. 15. THE REALITY LOOKS DIFFERENT
  16. 16. LET’S DO A QUICK TEST
  17. 17. A B C 1 2 3 4 BASIC, LOGICAL THINKING…
  18. 18. A B C 1 2 3 4 2B ✘ BASIC, LOGICAL THINKING…
  19. 19. A B C 1 2 3 4 2B ✔ BASIC, LOGICAL THINKING…
  20. 20. A B C D E 1 2 3 4 5 6 7 BASIC, LOGICAL THINKING…
  21. 21. 5D ✔ BASIC, LOGICAL THINKING… A B C D E 1 2 3 4 5 6 7
  22. 22. A B C D E 1 2 3 4 5 6 7 5D ✘ BASIC, LOGICAL THINKING…
  23. 23. A B C D E F 1 2 3 4 5 6 7 8 BASIC, LOGICAL THINKING…
  24. 24. A B C D E F 1 2 3 4 5 6 7 8 3D ✘ BASIC, LOGICAL THINKING…
  25. 25. A B C D E F 1 2 3 4 5 6 7 8 3D ✔ BASIC, LOGICAL THINKING…
  26. 26. BASIC, LOGICAL THINKING… …CHILD’S PLAY!
  27. 27. AND YET, WE ALL FAILED THIS…
  28. 28. 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.
  29. 29. Stressful environments with mainstream users breed accidental idiots.
  30. 30. !GIVEN
  31. 31. FOR THE AUDIENCE OF NOW, THE WEB IS NOTHING BUT PLUMBING…
  32. 32. ARE YOU READY TO ROCK THE WORLD OF “GENERATION SELFIE”?
  33. 33. 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
  34. 34. THE BROWSER AND THE WEB ARE THE REDHEADED STEPCHILDREN OF MOBILE PLATFORMS!
  35. 35. THE COOL FACTOR IS NOT ON THE WEB ANY LONGER.
  36. 36. AND THAT’S OK!
  37. 37. https://www.microsoft.com/microsoft-hololens/en-us MICROSOFT HOLOLENS
  38. 38. https://www.google.com/atap/project-jacquard/ GOOGLE JACQUARD
  39. 39. https://www.youtube.com/watch?v=0QNiZfSsPc0 GOOGLE SOLI
  40. 40. GOOGLE SPOTLIGHT STORIES
  41. 41. GOOGLE 360° VIDEOS / CARDBOARD
  42. 42. ACTUALLY… ALL OF THIS IS THE WEB!
  43. 43. 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
  44. 44. The web is not a platform. It’s a continuum. – Jeremy Keith ✓ 100% true ✓ Deep, future-focused thinking ✓ Insightful ✓ Inspiring ✓ Techno hippie horseshit
  45. 45. WE’RE TRYING TO SELL LONGEVITY TO A MARKET THAT’S PURE CONSUMERISM AND HYPE.
  46. 46. NEW DEVELOPERS WANT A SLICE OF THAT PIE, NOT GRAND VISIONS OF THE FUTURE.
  47. 47. AND MOST OF IT IS BULLSHIT! FOR US, IT’S ALL ABOUT THE RECOGNITION
  48. 48. FAKE CURRENCIES OF FINTLEWOODLEWIX
  49. 49. WE HAVE THAT, TOO!
  50. 50. WE CREATE FOR RECOGNITION BY OUR PEERS INSTEAD OF CREATING PRODUCTS FOR END USERS.
  51. 51. 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…
  52. 52. 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.
  53. 53. WE DON’T NEED USERS AS LONG AS WE KEEP APPLAUDING AND ARGUING WITH OURSELVES.
  54. 54. AND WE FIGHT EACH OTHER WE ARE ALL EXPERTS…
  55. 55. 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)
  56. 56. WE DON’T EVEN NEED PEOPLE TO SPLIT US INTO GROUPS. •Full Stack Developer •Devops •Designers •Webdevs •Backend •UX Person •Futurist
  57. 57. AND WE BROKE IT! THE WEB IS BROKEN…
  58. 58. 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 basically advertising - and it gets more aggressive every day. •Waiting for fonts to load is the new waiting for the page to load. •Tracking is rampant and slows down traffic.
  59. 59. DOESN’T LOOK THAT BAD TO YOU?
  60. 60. DESPITE TRUCKLOADS OF RESOURCES AND INFO, WE SUPERSIZED THE WEB. https://twitter.com/scottjehl/status/595827049136267266
  61. 61. OLD CLUTTER, NEW WEB? https://twitter.com/Caged/status/590602214021922818
  62. 62. 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.
  63. 63. 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
  64. 64. HERE’S ONE GOOD NEWS…
  65. 65. 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
  66. 66. OLD IE INTERFACE CODE REMOVED FROM MICROSOFT EDGE
  67. 67. REPLACING THE CRUFT WITH GOODNESS…
  68. 68. A WEB SAFARI BURNING CHROME? https://twitter.com/Caged/status/590602214021922818
  69. 69. USER AGENT SNIFFING…
  70. 70. USER AGENT SNIFFING… PARSING THE “PACK OF LIES”
  71. 71. 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?
  72. 72. before after before after RELIANCE ON WEBKIT-SPECIFIC, EXPERIMENTAL FEATURES… -webkit-appearance: none -webkit-gradient
  73. 73. 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!
  74. 74. 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
  75. 75. 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
  76. 76. I DON’T WANT TO BE ON FINTLEWOODLEWIX
  77. 77. TELL US HOW GET HAPPY AGAIN! ENOUGH OF THIS…
  78. 78. WHEN THINGS BURN WITHOUT A CAUSE, IT FEELS TERRIBLE…
  79. 79. THE POWER OF REPAIR + CLEANUP
  80. 80. 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.
  81. 81. 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.
  82. 82. LET’S DEVELOP AND STOP TRYING TO ENGINEER.
  83. 83. OUR JOBS ARE NEVER BORING AND THERE IS SO MUCH TO DO! @CODEPO8 THANK YOU!

×