A presentation at JavaScript FWDays in in Kyiv, Ukraine, 02000 by Chris Heilmann
Hinting at a better web Chris Heilmann Microsoft
Happy 30th birthday, World Wide Web! @codepo8
30th Happy birthday, World Wide Web! @codepo8 ▪ Excellent publishing medium ▪ Low barrier to entry ▪ Dumb, sturdy technologies and ideas - reliability beats finesse
The need to be forgiving… @codepo8 ▪ Anyone is allowed to write code for the web – or use whatever they want to create that code. ▪ Users shouldn’t suffer from developer errors; user agents need to be forgiving (RIP XHTML). ▪ What you put on the web will not be consumed the way you intended it to – your products need to be flexible.
World Wide Mess @codepo8 ▪ This freedom meant people took liberties… ▪ As things “just work”, we spent years adding suboptimal products to the web. ▪ These legacy products are likely to never get fixed – maintenance is boring. ▪ Browsers are big and slow because they need to show the web of yesterday, today and tomorrow.
World Wide Mess @codepo8 https://httparchive.org/reports/page-weight
The web is made for humans… @codepo8 ▪ Control of content is in the hand of the consumer ▪ We build things for people to consume in a simple fashion ▪ We build things for people to do tasks with – our job is to make that easy ▪ Humans are not in a binary state, we change over time and have different needs
On the web, we should care about… Accessibility Interoperability Performance Security
What we do care about is… Time to market Constant innovation
The web is an accessibility mess… @codepo8 https://majestic.com/reports/majestic-million https://webaim.org/projects/million/
Rampant accessibility failures… @codepo8 https://majestic.com/reports/majestic-million https://webaim.org/projects/million/
Problems caused by framework usage @codepo8 https://majestic.com/reports/majestic-million https://webaim.org/projects/million/
Problems caused by library usage @codepo8 https://majestic.com/reports/majestic-million https://webaim.org/projects/million/
“ Problems caused by library usage @codepo8 The vast majority of the top one million home pages utilize jQuery. Home pages with jQuery averaged 19.2 more errors than those without jQuery. The presence of https://majestic.com/reports/majestic-million jQuery corresponds with nearly 15 million detected errors, or over 25% of all of the accessibility errors we detected. https://majestic.com/reports/majestic-million https://webaim.org/projects/million/
Basic things get forgotten… @codepo8
Basic things get forgotten… @codepo8
Even better – we concentrate on the wrong things… @codepo8
Even better – we concentrate on the wrong things… @codepo8
Even better – we concentrate on the wrong things… @codepo8
Even better – we concentrate on the wrong things… @codepo8
▪ It is easy to feel out of the loop ▪ Often we pad our products with solutions because we want to be seen using them – as they are “professional” ▪ It doesn’t feel enough to build a sturdy product – it needs to be clever ▪ We overcomplicate our job requirements and block prospective new talent And we keep busy… @codepo8
Let’s take a breath and think web… @codepo8 ▪ It is not about our convenience as developers or our business plans ▪ It is about creating content and tools for human consumption ▪ The good news is that in our current environment, we have a great platform for that
$ cd ..
HTML CSS JavaScript
HTML @codepo8 ▪ Is the foundation of any web interface ▪ HTML elements come with lots of free accessibility and interaction features ▪ Static HTML can be cached and compresses down to almost nothing ▪ You can’t go wrong by betting on HTML these days
▪ Allows you to style elements and give them a certain look and feel ▪ Is a fully-fledged layout engine for complex interfaces with unknown content and reading direction (Flexbox / Grid) ▪ Is an animation/transition engine that allows you to create performant animations that the browser controls for you ▪ Has variables and conditions ▪ Can react to changes in the environment. CSS @codepo8
JavaScript @codepo8 ▪ Allows you to do everything, even creating the other two technologies ▪ Can be used on the server, on the client and in applications – each of which follows different rules ▪ Puts you in control and makes you responsible for performance, maintainability and reliability ▪ Is finally standardized, but also fast moving and easy to lose track
HTML Responsibilities Browser Standard CSS JavaScript Responsibilities You Browser Standard Responsibilities You Browser Standard You
▪ We have evergreen browsers with in-built development tools ▪ We have virtualized testing built into browsers (mobile view, simulated connections) We live in great tooling times… ▪ We have community channels to share our code and solutions and ways to discuss our approaches ▪ We have excellent, up-to-date documentation @codepo8
So why don’t we build great solutions? @codepo8 ▪ Resources with upvoting options favour the how over the why ▪ We’re not paid to learn, we’re paid to deliver ▪ Peer pressure makes developers who don’t know things afraid to admit it ▪ There’s always a “good enough” way to create a lot in a short amount of time.
Web Developers need to know a lot… @codepo8 ▪ Performance ▪ Accessibility ▪ Interoperability ▪ Security ▪ Maintainability ▪ Browser Quirks ▪ Developer toolchains ▪ Browser developer tools ▪ Abstractions ▪ CLI ▪ Editors
The web is assembled, not authored… @codepo8 https://discuss.httparchive.org/t/what-is-the-distribution-of1st-party-vs-3rd-party-resources/100/14
Third party slowness and cruft… @codepo8 https://github.com/patrickhulce/third-party-web
The mess that created… @codepo8 ▪ The web has become a render target amongst many others ▪ Releasing often and developer convenience trumps semantics and performance of the final product ▪ Web sites are slow and huge because we work on fast computers and good connections
The mess that created… @codepo8
Can you say that your product is OK with… Accessibility Interoperability Performance Security
Let’s talk tools…
Browser tool audits… @codepo8
Auditing report @codepo8
Accessibility Insights ▪ Browser extension for Chrome or Windows app – depending on what you want to test ▪ Open source collaboration of Deque and Microsoft ▪ Community driven with Github as the communication channel ▪ Customisable to your bug reporting tool https://accessibilityinsights.io/ @codepo8
Accessibility Insights https://accessibilityinsights.io/ @codepo8
Accessibility Insights https://accessibilityinsights.io/ @codepo8
Accessibility Insights https://accessibilityinsights.io/ @codepo8
Accessibility Insights https://accessibilityinsights.io/ @codepo8
Accessibility Insights https://accessibilityinsights.io/ @codepo8
Accessibility Insights https://accessibilityinsights.io/ @codepo8
Accessibility Insights https://accessibilityinsights.io/ @codepo8
Accessibility Insights https://accessibilityinsights.io/ @codepo8
Customisable best practices in context @codepo8 ▪ Having information isn’t enough when people don’t go there ▪ We need to prevent mistakes before they happen ▪ We need to allow people to customize these experiences. An intranet site needs different settings than a marketing site ▪ So, let’s target editors and build processes
Linting and inline insights in editors @codepo8 code.visualstudio.com
https://github.com/webhintio https://webhint.io https://www.npmjs.com/package/hint
Things that webhint helps you with… Performance Development environment Accessibility PWA Readiness Interoperability Security
@codepo8
Adding experience to build processes… @codepo8 ▪ A web interface or browser dev tools to get reports doesn’t scale to production ▪ Why not add best practices as part of your build/deployment process? ▪ That way you can also test the setup of your bundler/preprocessor to avoid huge release sizes
▪ Once you know what your product’s needs are, you can turn different tests on and off Customise the tests to your needs… @codepo8 ▪ You can also write your own tests to become part of the scan – like “make sure every footer has a picture of a leprechaun” – just one example ▪ You can create these with a cli wizard: $ npm create hintrc
webhint @code extension https://medium.com/webhint/getting-hints-from-visual-studio-code-69118e48de1b
Create valid app manifests… webhint.io
Fixing your tooling setup… webhint.io
Are you creating inaccessible content? webhint.io
▪ The web is a mess ▪ We are to blame, but often we can’t change what is there ▪ We should not, however, repeat the same mistakes of the past ▪ We have the tooling to apply z accumulated knowledge automatically and be told that we mess up even before we save our code. ▪ This is a great way to learn and will help the future web. In summary… @codepo8
Thanks! Chris Heilmann @codepo8
The web is not in a good state and that doesn’t make any sense. We have better tooling than ever, we have predictable outcome of our code in browsers and knowledge is available for free. So why is the average website huge, slow and full of bugs? One reason might be that we’re arguing about the wrong things and try to solve everything ourselves. In this talk we’ll look at some of the great things we can use to automate some of our work and have a development environment that teaches us best practices while we do our work, not when we get the time to look them up.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.