A presentation at ScotSoft by Chris Heilmann
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
Development is complex. You need to know not only how to program, but you also need to care about usability, accessibility, performance, security and many other things. Knowing all this is a full-time job, which is why it often falls by the wayside. But what if we could off-load at least some of this responsibility to free and open tools to help us along the way? In this talk Chris Heilmann is going to show a few tips and tricks how to avoid making obvious mistakes and to play a part in the next generation of tools for developers.
for free. You
can too.