O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Hinting at a better web…
Chris Heilmann (@codepo8) September 2018
What is the purpose
of a browser?
▪ Render web content
▪ Show multimedia content
▪ Follow and inspire web standards
@codep...
@codepo8
A changed, ubiquitous web.
The job of a browser
changed drastically…
▪ Show web and multimedia content
fast and reliably
▪ Give access to the web reg...
Audiences with
different needs…
▪ Consumers of the web
▪ Creators of web content
▪ Web Developers
▪ Extension Developers
▪...
The need to be
forgiving…
▪ Anyone is allowed to write code for
the web – or use whatever they
want to create that code.
▪...
The mess that
created…
▪ The web has become a render
target amongst many others
▪ Releasing often and developer
convenienc...
How is that possible with all
the resources we have?
developer.mozilla.org caniuse.com code.visualstudio.com
Web Developers
need to know a lot…
▪ Performance
▪ Accessibility
▪ Interoperability
▪ Security
▪ Maintainability
@codepo8
...
Where to learn
all that?
▪ Standards documentation?
▪ Browser vendor docs?
▪ Conferences?
▪ Books?
▪ Workshops?
▪ Develope...
Learning
obstacles
▪ Resources with upvoting options
favour the how over the why
▪ We’re not paid to learn, we’re paid
to ...
Taking
shortcuts…
▪ AMP?
▪ Tooling presets?
▪ Abstractions (libraries/frameworks)
▪ Hoping nobody cares…
@codepo8
Issues with current
tooling…
Too many
promises…
▪ “This tool makes $x easy. No need
to look it up.”
▪ “$HUGE_CORP_APP uses this
configuration and toolc...
Too many rules
and barriers
▪ Opinionated tools demand you to
fix things that don’t apply to your
product
▪ Dependencies a...
How can we
accelerate learning?
Customisable best
practices in context
▪ Having information isn’t enough
when people don’t go there
▪ We need to prevent m...
Linting and inline
insights in editors
@codepo8
code.visualstudio.com
webhint.io – one stop
checking and explanation
webhint.io
webhint.io – one stop
checking and explanation
webhint.io
webhint.io – one stop
checking and explanation
webhint.io
Add new screenshot
webhint.io – one stop
checking and explanation
webhint.io
webhint.io – one stop
checking and explanation
webhint.io
What a state we’re in…
bit.ly/what-a-state-of-the-browser
Hinting during
deployment
@codepo8
▪ Web resources are fun but not
always accessible or applicable to
your product
▪ webhi...
hint on npm/yarn/whatever…
webhint.io
Available hints…
Performance Accessibility
PWA
Readiness
Development
environment Interoperability Security
Not restricted to presets…
webhint.io
Add new screenshot
Customising hints…
webhint.io/docs/user-guide/
Defining & adding own hints…
webhint.io
Create a better web
independent of a
browser or OS.
@codepo8
▪ Create detailed reports for third
party products about brok...
Thanks!
Chris Heilmann
@codepo8
Próximos SlideShares
Carregando em…5
×

Hinting at a better web

My State of the Browser 2018 talk

Livros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo
  • Seja o primeiro a 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

×