Hinting at a better web
1 like•2,852 views
This document discusses ways to improve how web developers learn best practices through browser and tooling improvements. It suggests that linting and inline insights directly in code editors could help prevent mistakes by flagging issues early. A tool called webhint is highlighted that provides one-stop checking and explanations of hints related to performance, accessibility, security and more. The document advocates for customizing hints based on a project's specific needs and environment. Overall, it argues for accelerated learning through context-sensitive, customizable best practices integrated into development workflows.
Hinting at a better web
- 1. Hinting at a better web… Chris Heilmann (@codepo8) September 2018
- 2. What is the purpose of a browser? ▪ Render web content ▪ Show multimedia content ▪ Follow and inspire web standards @codepo8
- 3. @codepo8
- 4. A changed, ubiquitous web.
- 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. Audiences with different needs… ▪ Consumers of the web ▪ Creators of web content ▪ Web Developers ▪ Extension Developers ▪ App Developers ▪ IT Departments… @codepo8
- 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. 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. How is that possible with all the resources we have? developer.mozilla.org caniuse.com code.visualstudio.com
- 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. Where to learn all that? ▪ Standards documentation? ▪ Browser vendor docs? ▪ Conferences? ▪ Books? ▪ Workshops? ▪ Developer tools? ▪ News channels? @codepo8
- 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. Taking shortcuts… ▪ AMP? ▪ Tooling presets? ▪ Abstractions (libraries/frameworks) ▪ Hoping nobody cares… @codepo8
- 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. 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. How can we accelerate learning?
- 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. Linting and inline insights in editors @codepo8 code.visualstudio.com
- 20. webhint.io – one stop checking and explanation webhint.io
- 21. webhint.io – one stop checking and explanation webhint.io
- 22. webhint.io – one stop checking and explanation webhint.io Add new screenshot
- 23. webhint.io – one stop checking and explanation webhint.io
- 24. webhint.io – one stop checking and explanation webhint.io
- 25. What a state we’re in… bit.ly/what-a-state-of-the-browser
- 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
- 28. Available hints… Performance Accessibility PWA Readiness Development environment Interoperability Security
- 29. Not restricted to presets… webhint.io Add new screenshot
- 31. Defining & adding own hints… webhint.io
- 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