Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Hinting at a better web

3.070 visualizaciones

Publicado el

My State of the Browser 2018 talk

Publicado en: Internet
  • Sé el primero en comentar

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

×