Download as PDF, PPTX
Uploaded byChristian Heilmann
Hinting at a better web
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.
More Related Content
![Number_Guessing_Game_Dsbsbssbzboc[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/numberguessinggamedoc1-251206215042-a076fc05-thumbnail.jpg?width=640&height=640&fit=bounds)
Hinting at a better web
- 1. Hinting at abetter web… Chris Heilmann (@codepo8) September 2018
- 2. What is thepurpose of a browser? ▪ Render web content ▪ Show multimedia content ▪ Follow and inspire web standards @codepo8
- 3.
- 4.
- 5. The job ofa 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 tobe 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 thatpossible with all the resources we have? developer.mozilla.org caniuse.com code.visualstudio.com
- 10. Web Developers need toknow a lot… ▪ Performance ▪ Accessibility ▪ Interoperability ▪ Security ▪ Maintainability @codepo8 ▪ Browser Quirks ▪ Developer toolchains ▪ Browser developer tools ▪ Abstractions ▪ CLI ▪ Editors
- 11. Where to learn allthat? ▪ Standards documentation? ▪ Browser vendor docs? ▪ Conferences? ▪ Books? ▪ Workshops? ▪ Developer tools? ▪ News channels? @codepo8
- 12. Learning obstacles ▪ Resources withupvoting 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? ▪ Toolingpresets? ▪ Abstractions (libraries/frameworks) ▪ Hoping nobody cares… @codepo8
- 14.
- 15. Too many promises… ▪ “Thistool 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 andbarriers ▪ 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 acceleratelearning?
- 18. Customisable best practices incontext ▪ 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 insightsin editors @codepo8 code.visualstudio.com
- 20. webhint.io – onestop checking and explanation webhint.io
- 21. webhint.io – onestop checking and explanation webhint.io
- 22. webhint.io – onestop checking and explanation webhint.io Add new screenshot
- 23. webhint.io – onestop checking and explanation webhint.io
- 24. webhint.io – onestop checking and explanation webhint.io
- 25. What a statewe’re in… bit.ly/what-a-state-of-the-browser
- 26. Hinting during deployment @codepo8 ▪ Webresources 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.
- 28. Available hints… Performance Accessibility PWA Readiness Development environmentInteroperability Security
- 29. Not restricted topresets… webhint.io Add new screenshot
- 30.
- 31. Defining & addingown hints… webhint.io
- 32. Create a betterweb 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.