Watch this space

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