!important

!important Chris Heilmann @codepo8 March 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(?)…

!important

!important @codepo8 ▪ For a CSS developer: this is so important, it should override all other inherited settings ▪ For a CSS developer finding it in production: someone was here who shouldn’t have been ▪ For a JavaScript developer writing CSS: that’s how I get it to do what I want ▪ For a JavaScript developer not knowing CSS: not important

Best practices need insight and context @codepo8 ▪ It is not HTML vs. CSS vs. JavaScript ▪ Each on their own are probably not enough to create a great product ▪ What was enough in the beginning of the web is probably not enough now that expectations changed ▪ Just because we can do everything with JavaScript, it may not be the most effective and performant way

We all crave importance and recognition @codepo8 ▪ Being visible is much easier these days than it used to be ▪ A lot more code is open and available in the public ▪ We could collaborate and build great things together ▪ But it is much easier to criticize the work of others, isn’t it?

Drop code, receive assumptions and well-intentioned advice… @codepo8

Probably not safe to assume clean data… @codepo8

Not safe to assume performance with lots of data… @codepo8

Happy accidents can happen… @codepo8

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!

codepo8.github.io/not-that-important/derpify-js.html

Comfortable rebellion… @codepo8

Each of these is a sure-fire win… @codepo8 ▪ If you zoom out far enough, you can make accusations that can’t be argued against ▪ This means you look clever and caring for the web ▪ It does, however, also mean that we discourage people ▪ And is it really the right place to argue for quality? When the product is done?

As quality focused developers, we rightfully care about… Accessibility Interoperability Performance Security

Alas, the state of the web is !good

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

Huge and not optimised… @codepo8 https://httparchive.org/reports/page-weight

How is that possible with all the insights we get?

We have audits in browser tools… @codepo8

We have audits in browser tools… @codepo8

Accessibility Insights https://accessibilityinsights.io/ @codepo8

Accessibility Insights https://accessibilityinsights.io/ @codepo8

Accessibility Insights https://accessibilityinsights.io/ @codepo8

@codepo8

Well, all that is… !important

Learn once, repeat forever… @codepo8 https://twitter.com/sebmck/status/1109644524995801088

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

!sinkable @codepo8

First to market – get it out! First to Market (FTM)

FTM = FML for quality First to Market (FTM)

!given Accessibility Interoperability Performance Security

MVP First to Market (FTM)

MVP=Minimum Viable Product First to Market (FTM)

MVP=Most Validation Pending is

Understandable throwaway culture… @codepo8 https://www.youtube.com/watch?v=65crLKNQR0E

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!!!!!

This is the moment when things happen…

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

Because when it costs money, it is >important

!easy @codepo8 ▪ Fixing a non-performing, inaccessible, insecure product at this stage of the process is a lot of work ▪ There are ways to do it, but it involves changes in the process – and people hate change ▪ There’s always a lot of blame going around, which doesn’t help either ▪ Often, we pile on more products and processes, adding to the cruft

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

The web is a platform ripe for abuse. @codepo8 ▪ The web is defined as forgiving to developer error ▪ Parsers and browsers need to swallow a lot of terrible code and still make something useful of it ▪ Years of competition in browsers and platforms created legacy nonstandard code that needs support ▪ This means not only cruft, but also security attack vectors ▪ We can’t stop developers from being sloppy…

Well, …

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

What can we do? @codepo8 ▪ Stop arguing amongst ourselves which technology is better ▪ Contribute to and clean up products that people use without thinking about them (CMS, build tools, frameworks…) ▪ Take our time to understand why people do things wrong before telling them off that they do ▪ Earn our seat at the table where stupid decisions are being made

▪ What can we do? @codepo8 ▪ Optimise our workflows to include required quality control as soon as possible ▪ npmjs.com/package/hint ▪ css-tricks.com/make-it-hard-to-screw-updriven-development/ Brush up our knowledge of development tools and give feedback to them – we are their customers

The way we work now is becoming less and less important

Most of the products created now use other people’s code…

So, let’s build accessible, secure and performant solutions for people to re-use!

Power to the next generation! @codepo8

Thanks! Chris Heilmann @codepo8