Into the web multiverse 12/10/19 Chris Heilmann - codepo8 1
A presentation at ConfrontJS in December 2019 in Warsaw, Poland by Chris Heilmann
Into the web multiverse 12/10/19 Chris Heilmann - codepo8 1
$ whoami 12/10/19 § Chris Heilmann @codepo8 – he/him/his § Principal Program Manager Microsoft Developer Experience (VSCode, Devtools…) § W3C Member § 20 years web developer § eToys, Agilisys, Yahoo, Mozilla… § Wrote 3 books, contributed to 10(?)… § Blogged since 2004, loud on Twitter Chris Heilmann - codepo8 2
Yes, the slides are available… aka.ms/web-multiverse 12/10/19 Chris Heilmann - codepo8 3
I’ve been working on a lot of things… Web Sites 12/10/19 eCommerce templates Portals Developer Products Browser Developer Tools Chris Heilmann - codepo8 4
§ It is hard to imagine a world without the world wide web § Web technologies are standardised and browser differences are negligible The web is a roaring success… 12/10/19 § Open source has matured from a niche to the technology that runs the web § Documentation is plentiful, free and interactive Chris Heilmann - codepo8 9
§ Blatant lack of accessibility § Security problems So, why is it all kind of a mess? 12/10/19 § Performance issues § A need for blockers to keep the web safe and a lot less annoying Chris Heilmann - codepo8 10
§ Users are terrible and have horrible setups § The web stack is just not good enough No shortage of opinions why that is § Greedy corporations plaster the web with ads and see users as sheep to milk (?) § We don’t have the right tools § Tech bros build horrible things without consideration § Aliens 12/10/19 Chris Heilmann - codepo8 11
Finding the correct fix Abraham Wald, statistician 12/10/19 Chris Heilmann - codepo8 12
Counting hits and misses… dgsiegel.net/talks/the-bullet-hole-misconception wikipedia.org/wiki/Survivorship_bias 12/10/19 Chris Heilmann - codepo8 13
Sticking to the ratio… 12/10/19 We have 2 ears and 1 mouth – maybe we should spend more time listening and less talking. Chris Heilmann - codepo8 14
I’m in the middle of a launch… User needs > opinions aka.ms/edgeinsider 12/10/19 Chris Heilmann - codepo8 15
Different users, different needs 12/10/19 Chris Heilmann - codepo8 16
The “keeping it current” user Most of the time of the web I spend on my phone, but I also have a laptop. I user browser $x and I love that I can customize it to my needs. I keep everything I have up-to-date, to stay secure. 12/10/19 Chris Heilmann - codepo8 17
The “I am OK with what I have” user I’ve been using browser $x for a while and I go to only a few places on the web. It annoys me when I need to upgrade my browser or when web sites change all the time. I don’t need new features! 12/10/19 Chris Heilmann - codepo8 18
The “I just go online” user I am on the web for work and on our work computers. I click the icon to get me there and have a few sites I need to go to during the day. I don’t know how this works, our IT department sets these things up for us. 12/10/19 Chris Heilmann - codepo8 19
The cautious user I don’t trust the web, you hear about all sorts of terrible things. So I use ad blockers, and turn off as many things as possible. If a web site needs them and I don’t feel comfortable, I go somewhere else. 12/10/19 Chris Heilmann - codepo8 20
The “Stockholm syndrome” user I’ve used the web for a long time. I don’t trust things that don’t work like those I am used to. Yes, it feels easier, but I want to get a feeling of knowing what I am doing. 12/10/19 Chris Heilmann - codepo8 21
§ To different users, a browser is § something they can’t control Somehow bitter pills to swallow 12/10/19 § something they cherish and highly customize § irrelevant, as all of them work OK enough § nothing worth changing their habits for § Security and privacy aren’t things that people control, but trust in the platform to do for them Chris Heilmann - codepo8 22
§ It might be up to us to fix the web A fix seems to be somewhere else… 12/10/19 § This means taking ownership and caring for the needs of different constituencies § We can’t expect users to care enough to fix the web – we need to empower developers, maybe? Chris Heilmann - codepo8 25
Different developers, different needs 12/10/19 Chris Heilmann - codepo8 26
“This is a job” developer I work for a company that defines our tools and computer setup. I know there are probably better things out there, but as I don’t get to use them at work, why bother learning them? 12/10/19 Chris Heilmann - codepo8 27
The “switched on” developer It is frustrating that there are still people out there with old computers and outdated browsers. With a library I can support them as I’d rather learn and try out new things. 12/10/19 Chris Heilmann - codepo8 28
The “I am here to deliver” developer My clients don’t pay extra for fancy new technology. They need to get something that works on their machines. It needs to be legally compliant, you know, accessible so they can’t be sued. That’s why I use a framework. 12/10/19 Chris Heilmann - codepo8 29
The “the web is broken” developer I’ve always worked with higher programming languages and rich UI environments. The web seems like a mess and I don’t want to spend time trying to guess what the outcome of my code is. 12/10/19 Chris Heilmann - codepo8 30
The “I’m here to learn” developer I just started as a web developer and wherever I look, I am confused. There is so much information and often people give contradicting advice. I just want to learn the right thing… 12/10/19 Chris Heilmann - codepo8 31
§ The caring developer is a tiny fraction of the market § For many, this is a job to make a living Somehow bitter pills to swallow (2) 12/10/19 § New developers don’t find an empathic, open world, but an avalanche of choice and opinions § Satisfying developer needs has no direct correlation to creating better user products Chris Heilmann - codepo8 32
§ Browsers can’t break the web – their forgiveness knows no bounds Why learn the basics? 12/10/19 § If it works, why bother learning why? § If it doesn’t work, there’s ample of resources to learn quick fixes. Chris Heilmann - codepo8 33
§ Learning “the web” isn’t a desirable skill Abstraction attraction 12/10/19 § Instead, abstractions get you eyeballs on job boards § Abstractions promise faster turnaround and great products – big companies use them! Chris Heilmann - codepo8 34
§ Constant change in the developer space is a double-edged sword § We empower a small group of highly motivated people at the cost of overwhelming others Tech innovation isn’t the answer 12/10/19 § We innovate to fill a specialist need and call it a success because it is new instead of solving real problems § We don’t find out about real problems as we don’t ask people outside our bubble Chris Heilmann - codepo8 35
Focusing on delivery 12/10/19 Chris Heilmann - codepo8 39
§ Availability must Filling the needs 12/10/19 § Accessibility § Security § Mutability to user needs Chris Heilmann - codepo8 40
should must Adding quality 12/10/19 § Enhanced performance § Extended availability (offline) § Customisability Chris Heilmann - codepo8 41
want should § Make full use of the platform must Creating delight 12/10/19 § Predict use cases and prevent simple mistakes § Offer extended functionality Chris Heilmann - codepo8 42
§ Browser developer tools § Editors, extensions and themes § Terminals and their configuration We <3 tools! 12/10/19 § Deployment and optimization toolchains § Abstractions, Components and libraries Chris Heilmann - codepo8 43
§ We overwhelm people who want to start with the web – or just want to do their job It is all a bit much… 12/10/19 § By demanding people to set up complex dev environments we inhibit diverse contribution § We don’t focus enough on human needs in our tools Chris Heilmann - codepo8 45
Hypothesis: tools are too complex 12/10/19 Chris Heilmann - codepo8 46
Tools to help simplify webdev 12/10/19 Chris Heilmann - codepo8 47
§ JavaScript on the server § Enables a highly customisable web infrastructure (servers, build tools…) Node: the glue 12/10/19 § Elevated JavaScript from “how does browser $x break” to a solution for all kind of web tasks Chris Heilmann - codepo8 48
§ Open Source § Multi Platform Chromium: the engine 12/10/19 § Powers various browsers and App engines (Electron) § Can be automated and scripted (Puppeteer) Chris Heilmann - codepo8 49
§ Open Source § Multi Platform § Extensible / Customisable Visual Studio Code: the “hackable” editor § Based on Electron/Chromium § Includes Git version control § Has built-in terminal § Lightweight, code focused 12/10/19 Chris Heilmann - codepo8 50
§ Testing tool to check web projects for: § Accessibility issues § Performance problems § App readiness § Compatibility with standards Webhint: testing and best practices § Common pitfalls to avoid § Security issues § Online service (webhint.io) or node package to integrate in other tools § Highly customisable 12/10/19 Chris Heilmann - codepo8 51
Mixing and matching these tools is powerful 12/10/19 Chris Heilmann - codepo8 52
12/10/19 Chris Heilmann - codepo8 54
What’s next? 12/10/19 Chris Heilmann - codepo8 57
Edge on Chromium aka.ms/edgeinsider 12/10/19 Chris Heilmann - codepo8 58
§ Adding a powerful player with lots of users to an important part of the web § Lots of bug fixes Edge on Chromium § Internationalisation of browser and developer tools (30% of VSCode users change the language) § Accessibility enhancements to browser and devtools aka.ms/edgeinsider 12/10/19 Chris Heilmann - codepo8 59
§ Edge/Chromium developer tools inside VS Code Elements for Code § No need to switch to the browser to try a few things out § No need to replicate the same functionality in both places aka.ms/elements4code 12/10/19 Chris Heilmann - codepo8 60
12/10/19 Chris Heilmann - codepo8 61
What’s missing on the web platform? webwewant.fyi 12/10/19 Chris Heilmann - codepo8 62
In summary… § The web is a diverse place § We have a chance to make it easier for everyone to create quality products for all end users § We have open source platforms with open communication channels that power the web § We accumulated a lot of knowledge, why not add it to our tools to teach the creators of the web in context? 12/10/19 Chris Heilmann - codepo8 63
Thanks – your voice matters! Chris Heilmann @codepo8 @EdgeDevTools christianheilmann.com Click the 😀 in Edge developer tools! 12/10/19 Chris Heilmann - codepo8 64
