Watch this space

A presentation at Web Unleashed in September 2018 in Toronto, ON, Canada by Chris Heilmann

Slide 1

Slide 1

Watch this space… Chris Heilmann (@codepo8) October 2018

Slide 2

Slide 2

One link to rule them all bit.ly/space-webu18

Slide 3

Slide 3

Web development nostalgia… @codepo8 warnerbros.com/archive/spacejam/movie/jam.htm

Slide 4

Slide 4

Merits of the good old web. Content is king Decentralisation and interchange Longevity and maintainability

Slide 5

Slide 5

People who paid us, however… Content is king Decentralisation and interchange Longevity and maintainability

Slide 6

Slide 6

Once money is the goal…

Slide 7

Slide 7

…the hustlers barge in. Content is king Decentralisation and interchange Longevity and maintainability

Slide 8

Slide 8

The open web is an amazing idea and a gift

Slide 9

Slide 9

The problem is that it still doesn’t fit current ideals

Slide 10

Slide 10

Great web products start with great content…

Slide 11

Slide 11

Instead of focusing on content, we got distracted.

Slide 12

Slide 12

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”

Slide 13

Slide 13

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”

Slide 14

Slide 14

Whilst we reveled in nostalgia, things went to pot

Slide 15

Slide 15

The mainstream web right now is just not fun to use…

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

Years of technical debt…

Slide 19

Slide 19

So, is the open web still a thing to care about?

Slide 20

Slide 20

Very much - because of sinister reasons…

Slide 21

Slide 21

Visitors Users Addicts https://medium.com/journey-group/creating-users-not-addicts-73e1774297c7

Slide 22

Slide 22

The open web is under attack..

Slide 23

Slide 23

The open web is under attack… @codepo8 http://www.europarl.europa.eu/news/en/pressroom/20180906IPR12103/parliament-adopts-its-position-ondigital-copyright-rules

Slide 24

Slide 24

The open web is under attack… https://www.fcc.gov/document/fcc-takes-action-restoreinternet-freedom @codepo8

Slide 25

Slide 25

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/

Slide 26

Slide 26

The open web is under attack… @codepo8 Slate.com

Slide 27

Slide 27

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/

Slide 28

Slide 28

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

Slide 29

Slide 29

1984 + Brave New World… @codepo8 http://www.abc.net.au/news/2018-09-18/china-social-credit-amodel-citizen-in-a-digital-dictatorship/10200278

Slide 30

Slide 30

There are some interesting attempts to re-boot the web

Slide 31

Slide 31

dat and beaker browser @codepo8 https://beakerbrowser.com/ https://datproject.org/

Slide 32

Slide 32

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

Slide 33

Slide 33

However, I don’t want to believe all is lost yet…

Slide 34

Slide 34

But we need to change our approach to web quality

Slide 35

Slide 35

A changed, ubiquitous web.

Slide 36

Slide 36

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

Slide 37

Slide 37

Web Developers need to know a lot… @codepo8 ▪ Performance ▪ Accessibility ▪ Interoperability ▪ Security ▪ Maintainability ▪ Browser Quirks ▪ Developer toolchains ▪ Browser developer tools ▪ Abstractions ▪ CLI ▪ Editors

Slide 38

Slide 38

Where to learn all that? @codepo8 ▪ Standards documentation? ▪ Browser vendor docs? ▪ Conferences? ▪ Books? ▪ Workshops? ▪ Developer tools? ▪ News channels?

Slide 39

Slide 39

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.

Slide 40

Slide 40

We already have great resources - what’s the issue? developer.mozilla.org caniuse.com frontendchecklist.io

Slide 41

Slide 41

Issues with current tools…

Slide 42

Slide 42

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”

Slide 43

Slide 43

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

Slide 44

Slide 44

We also had these issues, and we took action…

Slide 45

Slide 45

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

Slide 46

Slide 46

Linting and inline insights in editors @codepo8 code.visualstudio.com

Slide 47

Slide 47

webhint.io webhint.io

Slide 48

Slide 48

Enter a URL… webhint.io

Slide 49

Slide 49

Get a report on issues… Add new screenshot webhint.io

Slide 50

Slide 50

Get explanations why these are issues & how to fix them webhint.io

Slide 51

Slide 51

Get in-depth explanation on the issues… webhint.io

Slide 52

Slide 52

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

Slide 53

Slide 53

hint on npm/yarn/whatever… webhint.io

Slide 54

Slide 54

Out of the box hints… Performance Development environment Accessibility PWA Readiness Interoperability Security

Slide 55

Slide 55

Customising hints… webhint.io/docs/user-guide/

Slide 56

Slide 56

Defining & adding own hints… webhint.io

Slide 57

Slide 57

How about preventing people to make errors?

Slide 58

Slide 58

webhint @code extension https://medium.com/webhint/getting-hints-from-visual-studio-code-69118e48de1b

Slide 59

Slide 59

Create valid app manifests… webhint.io

Slide 60

Slide 60

Fixing your tooling setup… webhint.io

Slide 61

Slide 61

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

Slide 62

Slide 62

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.

Slide 63

Slide 63

Let’s not mourn the ashes, but hand over the spark.

Slide 64

Slide 64

Thanks! Chris Heilmann @codepo8