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

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(?)…

Checking Twitter in the morning… before after

<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

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

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

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

THiS coUlD BE wrITten mUch SHORTER!

THIS dOeS NOt WORK iN oLd BrOwSErS!

THiS IS nOT ACCeSSIbLe!

Knee-jerk reactions…

Create indefensible accusations by zooming out and disregarding circumstances @codepo8

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

Is that worth discouraging people? @codepo8

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

!important @codepo8

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

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

We’re well prepared to create magic…

!important @codepo8

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…

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

!given Accessibility Interoperability Performance Security

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

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

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

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

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

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

Let’s start with a framework… @codepo8

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

FTM = FML for quality First to Market (FTM)

MVP First to Market (FTM)

MVP=Minimum Viable Product First to Market (FTM)

MVP=Most Validation Pending is

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

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

Growth = stickiness+analytics Continuous growth

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

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

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

Because when it costs money, it is >important

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…

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

Well, …

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

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

We have browser tool audits… @codepo8

Auditing report @codepo8

@codepo8

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

Stop arguing amongst ourselves which technology is better @codepo8

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

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

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

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

Power to the next generation! @codepo8

Thanks! Chris Heilmann @codepo8