Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hinting at a better web

1,470 views

Published on

My State of the Browser 2018 talk

Published in: Internet
  • Be the first to comment

Hinting at a better web

  1. 1. Hinting at a better web… Chris Heilmann (@codepo8) September 2018
  2. 2. What is the purpose of a browser? ▪ Render web content ▪ Show multimedia content ▪ Follow and inspire web standards @codepo8
  3. 3. @codepo8
  4. 4. A changed, ubiquitous web.
  5. 5. The job of a browser changed drastically… ▪ Show web and multimedia content fast and reliably ▪ Give access to the web regardless of ability ▪ Keep users safe by blocking unsafe content and patch attack vectors ▪ Remember users’ history and access credentials – or remember nothing ▪ Allow for detailed customisation (including extensibility) ▪ Sync content across a range of devices @codepo8
  6. 6. Audiences with different needs… ▪ Consumers of the web ▪ Creators of web content ▪ Web Developers ▪ Extension Developers ▪ App Developers ▪ IT Departments… @codepo8
  7. 7. The need to be forgiving… ▪ Anyone is allowed to write code for the web – or use whatever they want to create that code. ▪ Whatever goes wrong, it is the browser’s fault ▪ Users shouldn’t suffer from developer errors ▪ Legacy products will never get fixed ▪ You can’t break the web @codepo8
  8. 8. The mess that created… ▪ 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 ▪ Being a web expert is less exciting than being a full stack developer @codepo8
  9. 9. How is that possible with all the resources we have? developer.mozilla.org caniuse.com code.visualstudio.com
  10. 10. Web Developers need to know a lot… ▪ Performance ▪ Accessibility ▪ Interoperability ▪ Security ▪ Maintainability @codepo8 ▪ Browser Quirks ▪ Developer toolchains ▪ Browser developer tools ▪ Abstractions ▪ CLI ▪ Editors
  11. 11. Where to learn all that? ▪ Standards documentation? ▪ Browser vendor docs? ▪ Conferences? ▪ Books? ▪ Workshops? ▪ Developer tools? ▪ News channels? @codepo8
  12. 12. Learning obstacles ▪ 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. @codepo8
  13. 13. Taking shortcuts… ▪ AMP? ▪ Tooling presets? ▪ Abstractions (libraries/frameworks) ▪ Hoping nobody cares… @codepo8
  14. 14. Issues with current tooling…
  15. 15. Too many promises… ▪ “This tool makes $x easy. No need to look it up.” ▪ “$HUGE_CORP_APP uses this configuration and toolchain – if it works for their needs, it should rock for you, too” ▪ “Using this configuration optimises for the modern web” @codepo8
  16. 16. Too many rules and barriers ▪ Opinionated tools demand you to fix things that don’t apply to your product ▪ Dependencies and complex toolchains can be daunting ▪ “Best practices” often don’t get updates, and are contextual ▪ Having to follow strict rules without understanding them is not fun @codepo8
  17. 17. How can we accelerate learning?
  18. 18. Customisable best practices in context ▪ 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 @codepo8
  19. 19. Linting and inline insights in editors @codepo8 code.visualstudio.com
  20. 20. webhint.io – one stop checking and explanation webhint.io
  21. 21. webhint.io – one stop checking and explanation webhint.io
  22. 22. webhint.io – one stop checking and explanation webhint.io Add new screenshot
  23. 23. webhint.io – one stop checking and explanation webhint.io
  24. 24. webhint.io – one stop checking and explanation webhint.io
  25. 25. What a state we’re in… bit.ly/what-a-state-of-the-browser
  26. 26. Hinting during deployment @codepo8 ▪ Web resources are fun but not always accessible or applicable to your product ▪ webhint is Node based, so you can also install at as part of your build/deployment process ▪ That way webhint can also give detailed information about the setup of your bundler/preprocessor to avoid huge release sizes
  27. 27. hint on npm/yarn/whatever… webhint.io
  28. 28. Available hints… Performance Accessibility PWA Readiness Development environment Interoperability Security
  29. 29. Not restricted to presets… webhint.io Add new screenshot
  30. 30. Customising hints… webhint.io/docs/user-guide/
  31. 31. Defining & adding own hints… webhint.io
  32. 32. Create a better web independent of a browser or OS. @codepo8 ▪ Create detailed reports for third party products about broken issues ▪ Customised hinting allows to define project and environment specific standards based on agreed best practices ▪ Open source code allows for contribution and deployment wherever
  33. 33. Thanks! Chris Heilmann @codepo8

×