Sharpening the saw - how tooling can make you a better developer

Sharpening the saw… how tooling can make us better developers aka.ms/sharpening-the-saw 9/24/20 Chris Heilmann - codepo8 1

Habit 7: Sharpening the Saw “7 Habits of highly effective people” by Stephen Covey 9/24/20 Chris Heilmann - codepo8 2

What it means… § We should spend more time investigating better tooling Habit 7: Sharpening the Saw § We should spend more time ensuring we can be effective (sleep, eat, decompress) § Upfront investment yields better, less taxing results “7 Habits of highly effective people” by Stephen Covey 9/24/20 Chris Heilmann - codepo8 3

It’s a tough sale… 9/24/20 Chris Heilmann - codepo8 4

9/24/20 Chris Heilmann - codepo8 5

9/24/20 Chris Heilmann - codepo8 6

9/24/20 Chris Heilmann - codepo8 7

”I don’t need all this fancy stuff, I know how to drive!” 9/24/20 Chris Heilmann - codepo8 8

9/24/20 Chris Heilmann - codepo8 9

9/24/20 Chris Heilmann - codepo8 10

9/24/20 Chris Heilmann - codepo8 11

How we drive affects other people and possibly endangers them. 9/24/20 Chris Heilmann - codepo8 12

CGP Grey: the Simple Solution to Traffic https://www.youtube.com/watch?v=iHzzSao6ypE 9/24/20 Chris Heilmann - codepo8 13

How does that apply to development? 9/24/20 Chris Heilmann - codepo8 14

What we develop affects other people and possibly endangers them. 9/24/20 Chris Heilmann - codepo8 15

People trust technology (often blindly) § We keep our identity online § We shop, we do office chores, we vote Software runs the world… § We connect socially online § We want convenience § We don’t want to understand how things work – they just should § We want free stuff – at any cost 9/24/20 Chris Heilmann - codepo8 16

Our products need to be: § available § accessible That’s a lot to consider… 9/24/20 § maintainable § secure § performing well Chris Heilmann - codepo8 17

Staying in our comfort zone 9/24/20 Chris Heilmann - codepo8 18

9/25/20 Chris Heilmann - codepo8 20

9/25/20 Chris Heilmann - codepo8 21

Admitting our own failures… 9/25/20 Chris Heilmann - codepo8 22

As developers: § We keep under-estimating complexity We are rubbish at estimating… § We assume re-usable third-party solutions are flawless § “Works on my machine” is life § We over-estimate our knowledge and rely on muscle/brain memory § We get lazy over time 9/25/20 Chris Heilmann - codepo8 23

Understanding our limits… https://thevaluable.dev/cognitive-bias-software-development/ 9/25/20 Chris Heilmann - codepo8 24

The “on demand knowledge” problem 9/25/20 Chris Heilmann - codepo8 25

§ As new developers we want to know things § Later we rely on our past knowledge, which may be outdated The Full Stackoverflow Developer 9/25/20 § We could look up solutions in the official docs § Instead, we Google any issue, and end up on Stackoverflow § We copy + paste the first thing that seems to do the job. Chris Heilmann - codepo8 26

§ Blatant lack of accessibility § Security problems Software is a mess! 9/25/20 § Performance issues § A need for blockers to keep the web safe and a lot less annoying Chris Heilmann - codepo8 27

Doing something about it 9/25/20 Chris Heilmann - codepo8 28

We are probably not as good as drivers as we think we are… 9/25/20 Chris Heilmann - codepo8 29

§ Cruise control § Distance sensors and alarms Car features that make us better drivers 9/25/20 § Automatic emergency breaks § Lane Keep Assist § Facial detection (drowsiness, distraction) Chris Heilmann - codepo8 30

We are probably not as good as developers as we think we are… 9/25/20 Chris Heilmann - codepo8 31

§ Built-in Testing § Using what’s available § Keyboard shortcuts Things to use in tools to get better § Autocomplete/Snippets § Testing without setup changes § Avoiding context switching § Demanding more 9/25/20 Chris Heilmann - codepo8 32

Built-in testing 9/25/20 Chris Heilmann - codepo8 33

Little touches that go a long way… 9/25/20 Chris Heilmann - codepo8 34

Little touches that go a long way… 9/25/20 Chris Heilmann - codepo8 35

§ 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 NPM package to integrate in other tools § Highly customisable 9/25/20 Chris Heilmann - codepo8 36

§ Testing tool to check web projects for: § Accessibility issues § Performance problems § App readiness § Compatibility with standards Webhint in VS Code § Common pitfalls to avoid § Security issues § Online service (webhint.io) or node package to integrate in other tools § Highly customisable 9/25/20 Chris Heilmann - codepo8 37

§ 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 9/25/20 Chris Heilmann - codepo8 38

Webhint in Browser Devtools 9/25/20 Chris Heilmann - codepo8 39

Using what’s available 9/25/20 Chris Heilmann - codepo8 40

Moving past console.log() 9/25/20 Chris Heilmann - codepo8 41

Editor in the browser… 9/25/20 Chris Heilmann - codepo8 42

Editor in the browser… 9/25/20 Chris Heilmann - codepo8 43

§ You can set breakpoints in the editor in the browser Breakpoints > console.log() 9/25/20 § You can also set breakpoints in your text editor (f.e. Visual Studio Code) § They are more work upfront than a console.log() - but worth it. Chris Heilmann - codepo8 44

§ Your code execution is paused – errors can’t slip though Breakpoints > console.log() 9/25/20 § You get an end-to-end picture of what is happening § You are not likely to litter the web with yet another console message that end users should never see Chris Heilmann - codepo8 45

DOM breakpoints! 9/25/20 Chris Heilmann - codepo8 46

DOM breakpoints? 9/25/20 Chris Heilmann - codepo8 47

Breakpoints > console.log() 9/25/20 Chris Heilmann - codepo8 48

DOM breakpoints! 9/25/20 Chris Heilmann - codepo8 49

DOM breakpoints! 9/25/20 Chris Heilmann - codepo8 50

DOM breakpoints! 9/25/20 Chris Heilmann - codepo8 51

Breakpoints > console.log() 9/25/20 Chris Heilmann - codepo8 52

Showing the keyboard some 💖 9/25/20 Chris Heilmann - codepo8 53

Pro tip: CMD|Ctrl+SHIFT+P 9/25/20 Chris Heilmann - codepo8 54

No need for a mouse! 9/25/20 Chris Heilmann - codepo8 55

Set it to what you’re comfortable with… 9/25/20 Chris Heilmann - codepo8 56

Autocomplete/Snippets 9/25/20 Chris Heilmann - codepo8 57

§ In-project autocompletion helps to avoid typos Every keystroke is precious… 9/25/20 § You learn about built-in APIs through autocompletion § Setting up team-wide, shared snippets ensures consistency. Chris Heilmann - codepo8 58

Testing without setup change 9/25/20 Chris Heilmann - codepo8 59

Device Mode 9/25/20 Chris Heilmann - codepo8 60

Device Mode 9/25/20 Chris Heilmann - codepo8 61

Device Mode 9/25/20 Chris Heilmann - codepo8 62

More features of Device Emulation 9/25/20 Chris Heilmann - codepo8 63

Interaction emulation 9/25/20 Chris Heilmann - codepo8 64

Breakpoints > console.log() 9/25/20 Chris Heilmann - codepo8 65

Deep dive with the rendering pane 9/25/20 Chris Heilmann - codepo8 66

9/25/20 Chris Heilmann - codepo8 67

9/25/20 Chris Heilmann - codepo8 68

9/25/20 Chris Heilmann - codepo8 69

§ High Contrast simulation § Simpler accessible interfaces Currently in production: 9/25/20 § Accessibility error reporting in context § Dual Screen Emulation Chris Heilmann - codepo8 70

Avoiding context switching 9/25/20 Chris Heilmann - codepo8 71

9/25/20 Chris Heilmann - codepo8 72

9/25/20 Chris Heilmann - codepo8 73

Contexts we keep switching… Editor - Development 9/25/20 Browser – Debug/Test Terminal – Deploy Chris Heilmann - codepo8 74

9/25/20 Chris Heilmann - codepo8 75

§ Edge/Chromium developer tools inside VS Code Devtools 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 9/25/20 Chris Heilmann - codepo8 76

§ Edge/Chromium developer tools inside VS Code Devtools 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 9/25/20 Chris Heilmann - codepo8 77

Demanding more 9/25/20 Chris Heilmann - codepo8 78

Detailed developer tools explainers https://github.com/MicrosoftEdge/MSEdgeExplainers 9/25/20 Chris Heilmann - codepo8 79

Developer Tools Edge PM Team @EdgeDevTools Zoher Ghadyali @ZGhadyali Chris Heilmann @codepo8 Erica Draud @hiamerica Rachel Weil @partytimeHXLNT Brendyn Alexander @webrendyn

Thanks – let’s get better! Chris Heilmann @codepo8 @EdgeDevTools christianheilmann.com 9/25/20 Chris Heilmann - codepo8 81