<feTurbulence> && !important

A presentation at CityJS in May 2019 in London, UK by Chris Heilmann

Slide 1

Slide 1

<feTurbulence> && !important Chris Heilmann @codepo8 May 2019

Slide 2

Slide 2

Chris Heilmann @codepo8 ▪ Principal Software Development Engineer ▪ Microsoft Edge and Developer Experience (VSCode, Devtools…) ▪ W3C Member WebML Discussion Group ▪ 20 years web developer ▪ eToys, Agilisys, Yahoo, Mozilla… ▪ Wrote 3 books, contributed to 10(?)…

Slide 3

Slide 3

Checking Twitter in the morning… before after

Slide 4

Slide 4

<feTurbulence> @codepo8 ▪ JavaScript vs. CSS ▪ Frameworks vs. VanillaJS ▪ Brevity vs. maintainability ▪ Tooling vs. low barrier of entry ▪ Client vs. Server vs. Isomorphic ▪ Native vs. Web ▪ Mobile vs. Desktop ▪ Cats vs. Dogs

Slide 5

Slide 5

Things we say to each other without considering the context… @codepo8

Slide 6

Slide 6

THIS DoeS NOT wORk wHEN tHE DATA YOu pUt IN is IMpUrE!

Slide 7

Slide 7

THIs DOEsN’T PErFORm WHEN YOU hAVE A LoT OF DATA!

Slide 8

Slide 8

THiS coUlD BE wrITten mUch SHORTER!

Slide 9

Slide 9

THIS dOeS NOt WORK iN oLd BrOwSErS!

Slide 10

Slide 10

THiS IS nOT ACCeSSIbLe!

Slide 11

Slide 11

Knee-jerk reactions…

Slide 12

Slide 12

Create indefensible accusations by zooming out and disregarding circumstances @codepo8

Slide 13

Slide 13

You look clever and caring for the web – without doing any work! @codepo8

Slide 14

Slide 14

Is that worth discouraging people? @codepo8

Slide 15

Slide 15

Is the right place and time to argue for quality when the product is done? @codepo8

Slide 16

Slide 16

!important @codepo8

Slide 17

Slide 17

Things that should matter in a web product Accessibility Interoperability Performance Security

Slide 18

Slide 18

HTML Responsibilities Browser Standard CSS JavaScript Responsibilities You Browser Standard Responsibilities You Browser Standard You

Slide 19

Slide 19

We’re well prepared to create magic…

Slide 20

Slide 20

!important @codepo8

Slide 21

Slide 21

Slide 22

Slide 22

Slide 23

Slide 23

We’re empowered to write great things @codepo8 ▪ Highly optimised code ▪ Reusable, clean components ▪ Modular design systems ▪ Flexible APIs ▪ Asynchronous, streaming services ▪ Experimental, groundbreaking standard proposals ▪ Automation, task runners, bundlers…

Slide 24

Slide 24

Let’s look past our world of conferences, podcasts and magazines… @codepo8

Slide 25

Slide 25

!given Accessibility Interoperability Performance Security

Slide 26

Slide 26

Rampant accessibility failures… @codepo8 https://majestic.com/reports/majestic-million https://majestic.com/reports/majestic-million https://webaim.org/projects/million/

Slide 27

Slide 27

Products full of cruft… @codepo8 https://httparchive.org/reports/page-weight

Slide 28

Slide 28

Web products stack @codepo8 : HTML/CSS/JS https://twitter.com/sebmck/status/1109644524995801088

Slide 29

Slide 29

Front-end: HTML/CSS/JS Realities of web products stack… @codepo8 Back-end: CMS/Frameworks Servers/Cloud DevOps IT Legal Sales Shareholders Investors

Slide 30

Slide 30

We’re competing without knowing it… Staying in budget (time + money) First to Market (FTM) Continuous growth

Slide 31

Slide 31

Budget = reckless re-use Staying in budget (time + money)

Slide 32

Slide 32

Let’s start with a framework… @codepo8

Slide 33

Slide 33

The web is assembled, not authored… @codepo8 https://discuss.httparchive.org/t/what-is-the-distribution-of1st-party-vs-3rd-party-resources/100/14

Slide 34

Slide 34

FTM = FML for quality First to Market (FTM)

Slide 35

Slide 35

MVP First to Market (FTM)

Slide 36

Slide 36

MVP=Minimum Viable Product First to Market (FTM)

Slide 37

Slide 37

MVP=Most Validation Pending is

Slide 38

Slide 38

A series of quick wins? is … MVP#1 MVP#2 MVP#3 MVP#4

Slide 39

Slide 39

Alas, on the web… Staying in budget (time + money) First to Market (FTM) Continuous growth

Slide 40

Slide 40

Growth = stickiness+analytics Continuous growth

Slide 41

Slide 41

Third party slowness and cruft… @codepo8 https://github.com/patrickhulce/third-party-web

Slide 42

Slide 42

Reuse keeps budgets in check is MVP V1 (analytics enabled) V2 (marketing features) V3 (beefier cloud) V4 (enterprise, international rollout) PANIC!!!!!

Slide 43

Slide 43

Let’s hire some consultants to help us with… Accessibility Interoperability Performance Security

Slide 44

Slide 44

Because when it costs money, it is >important

Slide 45

Slide 45

The web is a platform ripe for abuse. @codepo8 ▪ The web is defined as forgiving to developer error ▪ Browsers can’t break the web ▪ Past browser competition = nonstandard APIs live products rely on. ▪ Cruft and security attack vectors ▪ We can’t stop developers from being sloppy…

Slide 46

Slide 46

Patches and “solutions”… @codepo8 ▪ AMP ▪ Safari limiting JavaScript ▪ Chrome’s “Never Slow Mode” ▪ All kind of blockers

Slide 47

Slide 47

Well, …

Slide 48

Slide 48

Front-end: HTML/CSS/JS What can we do? @codepo8 Back-end: CMS/Frameworks Servers/Cloud DevOps IT Legal Sales Shareholders Investors

Slide 49

Slide 49

https://css-tricks.com/make-it-hard-to-screw-up-driven-development/ @codepo8

Slide 50

Slide 50

We have browser tool audits… @codepo8

Slide 51

Slide 51

Auditing report @codepo8

Slide 52

Slide 52

@codepo8

Slide 53

Slide 53

Slide 54

Slide 54

Give feedback and demand features from browsers, frameworks and tools… @codepo8

Slide 55

Slide 55

Stop arguing amongst ourselves which technology is better @codepo8

Slide 56

Slide 56

Contribute to products people use (CMS, build tools, frameworks…) @codepo8

Slide 57

Slide 57

Understand why people do things wrong before telling them off… @codepo8

Slide 58

Slide 58

Earn our seat at the table where stupid decisions are being made @codepo8

Slide 59

Slide 59

The web is plumbing, not the new hotness… @codepo8

Slide 60

Slide 60

Power to the next generation! @codepo8

Slide 61

Slide 61

Thanks! Chris Heilmann @codepo8