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

A presentation at ScotSoft in October 2020 in by Chris Heilmann

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

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

Slide 4

Slide 4

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

Slide 5

Slide 5

9/24/20 Chris Heilmann - codepo8 5

Slide 6

Slide 6

9/24/20 Chris Heilmann - codepo8 6

Slide 7

Slide 7

9/24/20 Chris Heilmann - codepo8 7

Slide 8

Slide 8

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

Slide 9

Slide 9

9/24/20 Chris Heilmann - codepo8 9

Slide 10

Slide 10

9/24/20 Chris Heilmann - codepo8 10

Slide 11

Slide 11

9/24/20 Chris Heilmann - codepo8 11

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

Slide 20

Slide 20

9/25/20 Chris Heilmann - codepo8 20

Slide 21

Slide 21

9/25/20 Chris Heilmann - codepo8 21

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

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

Slide 26

Slide 26

§ 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

Slide 27

Slide 27

§ 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

Slide 28

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

§ 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

Slide 31

Slide 31

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

Slide 32

Slide 32

§ 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

Slide 33

Slide 33

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

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

§ 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

Slide 37

Slide 37

§ 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

Slide 38

Slide 38

§ 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

Slide 39

Slide 39

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

Slide 40

Slide 40

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

Slide 41

Slide 41

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

Slide 42

Slide 42

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

Slide 43

Slide 43

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

Slide 44

Slide 44

§ 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

Slide 45

Slide 45

§ 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

Slide 46

Slide 46

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

Slide 47

Slide 47

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

Slide 48

Slide 48

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

Slide 49

Slide 49

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

Slide 50

Slide 50

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

Slide 51

Slide 51

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

Slide 52

Slide 52

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

Slide 53

Slide 53

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

Slide 54

Slide 54

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

Slide 55

Slide 55

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

Slide 56

Slide 56

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

Slide 57

Slide 57

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

Slide 58

Slide 58

§ 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

Slide 59

Slide 59

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

Slide 60

Slide 60

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

Slide 61

Slide 61

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

Slide 62

Slide 62

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

Slide 63

Slide 63

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

Slide 64

Slide 64

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

Slide 65

Slide 65

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

Slide 66

Slide 66

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

Slide 67

Slide 67

9/25/20 Chris Heilmann - codepo8 67

Slide 68

Slide 68

9/25/20 Chris Heilmann - codepo8 68

Slide 69

Slide 69

9/25/20 Chris Heilmann - codepo8 69

Slide 70

Slide 70

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

Slide 71

Slide 71

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

Slide 72

Slide 72

9/25/20 Chris Heilmann - codepo8 72

Slide 73

Slide 73

9/25/20 Chris Heilmann - codepo8 73

Slide 74

Slide 74

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

Slide 75

Slide 75

9/25/20 Chris Heilmann - codepo8 75

Slide 76

Slide 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 76

Slide 77

Slide 77

§ 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

Slide 78

Slide 78

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

Slide 79

Slide 79

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

Slide 80

Slide 80

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

Slide 81

Slide 81

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