A presentation at Web Unleashed in in Toronto, ON, Canada by Chris Heilmann
Watch this space… Chris Heilmann (@codepo8) October 2018
One link to rule them all bit.ly/space-webu18
Web development nostalgia… @codepo8 warnerbros.com/archive/spacejam/movie/jam.htm
Merits of the good old web. Content is king Decentralisation and interchange Longevity and maintainability
People who paid us, however… Content is king Decentralisation and interchange Longevity and maintainability
Once money is the goal…
…the hustlers barge in. Content is king Decentralisation and interchange Longevity and maintainability
The open web is an amazing idea and a gift
The problem is that it still doesn’t fit current ideals
Great web products start with great content…
Instead of focusing on content, we got distracted.
Things clients heard louder than our messages… @codepo8 ▪ “Pop-up windows make sure visitors remember you” ▪ “Everybody needs a DHTML multilevel dropdown” ▪ “Newsletters and feeds bring repeat visitors” ▪ “Flash tunnels are what makes a modern web site” ▪ “You need a mobile version – WML or IMODE, and a m.*.com version”
Things clients heard louder than our messages… @codepo8 ▪ “Carousels make for great conversion numbers” ▪ “Parallax scrolling is pure delight” ▪ “Autoplaying videos give you eyeballs” ▪ “Interstitials allow you to monetise” ▪ “You should have an app, a web site is a great way to advertise it” ▪ “Notifications are a great way to keep users up-to-date about offers and get them to come back”
Whilst we reveled in nostalgia, things went to pot
The mainstream web right now is just not fun to use…
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
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…
So, is the open web still a thing to care about?
Very much - because of sinister reasons…
Visitors Users Addicts https://medium.com/journey-group/creating-users-not-addicts-73e1774297c7
The open 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 https://www.washingtonpost.com/technology/2018/10/01/tru mp-administration-is-suing-california-quash-its-new-netneutrality-law/
The open web is under attack… @codepo8 Slate.com
The open web is under attack… @codepo8 https://www.washingtonpost.com/technology/2018/09/21/formergoogle-chief-predicts-internet-will-split-by-chinese-web-anamerican-one/ https://www.washingtonpost.com/technology/2018/09/21/for mer-google-chief-predicts-internet-will-split-by-chineseweb-an-american-one/
The open web is under attack… @codepo8 https://www.washingtonpost.com/technology/2018/09/21/formergoogle-chief-predicts-internet-will-split-by-chinese-web-anamerican-one/ https://www.reuters.com/article/us-china-internet/chinashuts-thousands-of-websites-in-clean-up-campaign-xinhuaidUSKCN1M302F
1984 + Brave New World… @codepo8 http://www.abc.net.au/news/2018-09-18/china-social-credit-amodel-citizen-in-a-digital-dictatorship/10200278
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
However, I don’t want to believe all is lost yet…
But we need to change our approach to web quality
A changed, ubiquitous web.
The job of a browser changed drastically… @codepo8 ▪ 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
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.
We already have great resources - what’s the issue? developer.mozilla.org caniuse.com frontendchecklist.io
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
We also had these issues, and we took action…
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… Add new screenshot 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 ▪ 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
hint on npm/yarn/whatever… webhint.io
Out of the box hints… Performance Development environment Accessibility PWA Readiness Interoperability Security
Customising hints… webhint.io/docs/user-guide/
Defining & adding own hints… webhint.io
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 insights should be a great start @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.
Let’s not mourn the ashes, but hand over the spark.
Thanks! Chris Heilmann @codepo8
The web has been good to us and it is more amazing than ever – from a technical perspective. The problem is that it has become a given – not the space-age cool new technology. Time to look at what we do and concentrate on things that matter for our users. CSS isn’t broken, JavaScript isn’t the enemy. How we use them and basic, decent and sensible approaches to creating user interfaces we forgot about are the problem. We need you to take pride in your work, take care of your end users and make sure that the “let’s fix this later” of now isn’t the “oops, that got us hacked” of tomorrow. Join us in unleashing a better, more reliable web that helps users do the tasks they came for – not cater to the needs of advertisers and our corporate goals.
The following resources were mentioned during the presentation or are useful additional information.
Link tax and upload filter
Here’s what was said about this presentation on social media.
for free. You
can too.