A presentation at Trondheim Developer Conference in in Trondheim, Norway by Chris Heilmann
Watch this space… Chris Heilmann (@codepo8) October 2018
It is nice to be recognised… @codepo8 https://en.wikipedia.org/wiki/Pioneer_plaque
It is tougher to live up to an ideal… Sacrificing the golden calf of coding https://www.youtube.com/watch?v=iPfMatOgRBg @codepo8
We’re past the software honeymoon @codepo8 https://www.theatlantic.com/technology/archive/2 017/09/saving-the-world-from-code/540393/
Even we’re becoming disenchanted… @codepo8 Nikita Prokopov http://tonsky.me/blog/disenchantment/
What happened? Where did we go wrong?
We lost interest in owning our environment
Specifically, the open, world-wide web…
Let’s go back a few years… @codepo8 warnerbros.com/archive/spacejam/movie/jam.htm
Merits of the open web… Content is king Decentralisation and interchange Longevity and maintainability
The web has become slow and annoying…
Whereas access to the web is on mobile devices…
And unreliable connections.
Instead of reaching web content, we get pestered... Get our newsletter! @codepo8 Download the app! Allow notifications! Add our chatbot!
Tracking our users is more important than content... @codepo8
Even the plumbing of the web is under attack…
The open web is under attack… @codepo8 http://www.europarl.europa.eu/news/en/pressroom/20180906IPR12103/parliament-adopts-its-position-ondigital-copyright-rules
The open web is under attack… https://www.fcc.gov/document/fcc-takes-action-restoreinternet-freedom @codepo8
The open web is under attack… @codepo8 Slate.com
https://www.washingtonpost.com/technology/2018/09/21/formergoogle-chief-predicts-internet-will-split-by-chinese-web-anamerican-one/ Are we too late? https://www.washingtonpost.com/technology/2018/09/21/for mer-google-chief-predicts-internet-will-split-by-chineseweb-an-american-one/ @codepo8
There are some interesting attempts to re-boot the web
dat and beaker browser @codepo8 https://beakerbrowser.com/ https://datproject.org/
Solid / Inrupt https://www.fastcompany.com/90243936/exclusive-timberners-lee-tells-us-his-radical-new-plan-to-upend-theworld-wide-web @codepo8 https://medium.com/@timberners_lee/one-small-step-forthe-web-87f92217d085
But is it really that bad already? Can’t we fix this?
I think we should. @codepo8
Openness and resilience is both gift and curse… @codepo8
Web tech was terrible and we hacked our way through @codepo8
The need to be forgiving… @codepo8 ▪ Anyone is allowed to write code for the web – or use whatever they want to create that code. ▪ Whatever goes wrong, it is not the fault of the developer ▪ Users shouldn’t suffer from developer errors ▪ Legacy products will never get fixed ▪ You can’t break the web
Years of technical debt…
Quick, clever solutions beat understanding our job @codepo8
Using shared code and building on it makes us fast @codepo8
Fully supporting old code comes at a high price... @codepo8
The mess we created… @codepo8 ▪ 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
It is not all broken…
Let’s take a look at the great things we have…
Excellent resources and communication channels… developer.mozilla.org caniuse.com frontendchecklist.io
Browsers are more than content display tools… @codepo8 ▪ Show web and multimedia content fast and reliably ▪ Access 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 ▪ Include developer tools
Browsers as a platform cater to different audiences @codepo8 ▪ Consumers of the web ▪ Creators of web content ▪ Web Developers ▪ Extension Developers ▪ App Developers ▪ IT Departments…
A changed, ubiquitous web.
Web Developers need to know a lot… @codepo8 ▪ Performance ▪ Accessibility ▪ Interoperability ▪ Security ▪ Maintainability ▪ Browser Quirks ▪ Developer toolchains ▪ Browser developer tools ▪ Abstractions ▪ CLI ▪ Editors
Where to learn all that? @codepo8 ▪ Standards documentation? ▪ Browser vendor docs? ▪ Conferences? ▪ Books? ▪ Workshops? ▪ Developer tools? ▪ News channels?
Learning obstacles @codepo8 ▪ 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.
Issues with current tools…
Too many promises… @codepo8 ▪ “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”
Too many rules and barriers @codepo8 ▪ 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
Customisable best practices in context @codepo8 ▪ 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
Linting and inline insights in editors @codepo8 code.visualstudio.com
webhint.io webhint.io
Enter a URL… webhint.io
Get a report on issues… webhint.io
Get explanations why these are issues & how to fix them webhint.io
Get in-depth explanation on the issues… webhint.io
Hinting during deployment @codepo8 ▪ Web resources are fun but not always accessible or applicable to your product ▪ Why not install hinting at as part of your build/deployment process? ▪ That way you can also test the setup of your bundler/preprocessor to avoid huge release sizes
Out of the box hints… Performance Development environment Accessibility PWA Readiness Interoperability Security
Customising hints… webhint.io/docs/user-guide/
How about preventing people to make errors?
webhint @code extension https://medium.com/webhint/getting-hints-from-visual-studio-code-69118e48de1b
Create valid app manifests… webhint.io
Fixing your tooling setup… webhint.io
Are you creating inaccessible content? https://lyricstranslate.com/en/nachtmahr-traditionlyrics.html Tradition ist nicht das Anbeten der Asche, Sondern die Weitergabe des Feuers. webhint.io
Our accumulated insights are a great starting point… @codepo8 ▪ We accumulated a lot of great knowledge on how to do web the right way. ▪ Instead of re-iterating this knowledge and hope people get it, let’s use this as a base to start from ▪ Our technology stack has evolved from a text editor and a terrible browser to amazing, open tools. ▪ Let’s introduce new people of the web to them early on - as part of the development setup.
Thanks! Chris Heilmann @codepo8
Something isn't working out. We drown in excellent tools and information about how to build great content for the web. And yet what is out there is in dire need of optimisation. Let's offer our years of knowledge as a part of the development environment instead, maybe that will do the trick?
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.