A presentation at JSFest in in Kyiv, Ukraine, 02000 by Chris Heilmann
!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
We all love JavaScript. So much so that we tend to use it where it is not strictly needed and at the same time talk down on technologies that actually make more sense. The big CSS vs. JavaScript debate is upon us and it’s getting ugly. In this talk Chris Heilmann wants to remind us about the goals of our work and how we communicate is a big part of this. We need to own the JavaScript story, and this means focusing on what has an impact.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.