Watch this space - opening keynote

A presentation at Trondheim Developer Conference in October 2018 in Trondheim, Norway by Chris Heilmann

Slide 1

Slide 1

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

Slide 2

Slide 2

It is nice to be recognised… @codepo8 https://en.wikipedia.org/wiki/Pioneer_plaque

Slide 3

Slide 3

It is tougher to live up to an ideal… Sacrificing the golden calf of coding https://www.youtube.com/watch?v=iPfMatOgRBg @codepo8

Slide 4

Slide 4

We’re past the software honeymoon @codepo8 https://www.theatlantic.com/technology/archive/2 017/09/saving-the-world-from-code/540393/

Slide 5

Slide 5

Even we’re becoming disenchanted… @codepo8 Nikita Prokopov http://tonsky.me/blog/disenchantment/

Slide 6

Slide 6

What happened? Where did we go wrong?

Slide 7

Slide 7

We lost interest in owning our environment

Slide 8

Slide 8

Specifically, the open, world-wide web…

Slide 9

Slide 9

Let’s go back a few years… @codepo8 warnerbros.com/archive/spacejam/movie/jam.htm

Slide 10

Slide 10

Merits of the open web… Content is king Decentralisation and interchange Longevity and maintainability

Slide 11

Slide 11

The web has become slow and annoying…

Slide 12

Slide 12

Whereas access to the web is on mobile devices…

Slide 13

Slide 13

And unreliable connections.

Slide 14

Slide 14

Instead of reaching web content, we get pestered... Get our newsletter! @codepo8 Download the app! Allow notifications! Add our chatbot!

Slide 15

Slide 15

Tracking our users is more important than content... @codepo8

Slide 16

Slide 16

Even the plumbing of the web is under attack…

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

There are some interesting attempts to re-boot the web

Slide 22

Slide 22

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

Slide 23

Slide 23

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 24

Slide 24

But is it really that bad already? Can’t we fix this?

Slide 25

Slide 25

I think we should. @codepo8

Slide 26

Slide 26

Openness and resilience is both gift and curse… @codepo8

Slide 27

Slide 27

Web tech was terrible and we hacked our way through @codepo8

Slide 28

Slide 28

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 29

Slide 29

Years of technical debt…

Slide 30

Slide 30

Quick, clever solutions beat understanding our job @codepo8

Slide 31

Slide 31

Using shared code and building on it makes us fast @codepo8

Slide 32

Slide 32

Fully supporting old code comes at a high price... @codepo8

Slide 33

Slide 33

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 34

Slide 34

It is not all broken…

Slide 35

Slide 35

Let’s take a look at the great things we have…

Slide 36

Slide 36

Excellent resources and communication channels… developer.mozilla.org caniuse.com frontendchecklist.io

Slide 37

Slide 37

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

Slide 38

Slide 38

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…

Slide 39

Slide 39

A changed, ubiquitous web.

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

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 43

Slide 43

Issues with current tools…

Slide 44

Slide 44

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 45

Slide 45

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 46

Slide 46

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 47

Slide 47

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

Slide 48

Slide 48

webhint.io webhint.io

Slide 49

Slide 49

Enter a URL… webhint.io

Slide 50

Slide 50

Get a report on issues… webhint.io

Slide 51

Slide 51

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

Slide 52

Slide 52

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

Slide 53

Slide 53

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

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

How about preventing people to make errors?

Slide 57

Slide 57

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

Slide 58

Slide 58

Create valid app manifests… webhint.io

Slide 59

Slide 59

Fixing your tooling setup… webhint.io

Slide 60

Slide 60

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 61

Slide 61

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.

Slide 62

Slide 62

Thanks! Chris Heilmann @codepo8