How to be a more effective developer week (tools and tricks)

I’ve had a busy week.

Sharing developer tips at Microsoft Create: Serverless

Wednesday I hosted an open Mic session at the Microsoft Create: Serveless event together with Marie Hoeger. The topic was “Developer Hacks and Tools we wished we knew sooner” and we had about 30 attendees sharing their best tricks.

I put up a collection of what was discussed at dev.to.

Virtual talk in Scotland

Yesterday started with me giving a talk at ScotSoft’s CmdR conference. In it I talked about how we can improve ourselves as developers by embracing better tooling. Tools that prevents us from making mistakes as we make them.

I compared it to all the things cars do for us these days. Last weekend I had a 500km road trip in a brand new Audi and I was amazed and overwhelmed with all the options. But I soon started to enjoy the convenience of cruise control, lane assist and distance measuring.

The slides are available on Noti.st :

View Sharpening the saw – how tooling can make you a better developer on Notist.

Here are the resources I talked about with some explanations why they are relevant:

• CGP Grey: the Simple Solution to Traffic – a great explanation how traffic jams happen due to human error
• Eight Cognitive Biases in Software Development – interesting read to avoid some pitfalls and information why we are so bad at estimating
• Visual Studio Code – well, it is the bomb.
• Webhint online scanner – an online scanner to test your web products for all kind of issues about accessibility, performance, security and compatibility
• Webhint for Visual Studio Code Extension – the same tool but running inside VS Code flagging up that you are making mistakes whilst you make them. The great thing is that it not only tells you that something is wrong, but it also explains the why and gives you links to more in-depth information
• Webhint in Edge Developer Tools – integration of Webhint into the Chromium developer tools showing site problems as issues.
• Editor in Developer tools – did you know that the Chromium developer tools have a full editor in them where you can write code, inspect code from the web and even override external files with local ones to try out fixes without having server access?
• Breakpoint Debugging in Developer Tools – breakpoints are so much better than using console log. They give you the whole picture and stop script execution until you learned what you wanted to know.
• DOM Breakpoints Debugging – you can set breakpoints coming from the HTML generated interface thus debugging your app as you interact with it
• Command Menu in Devtools – developer tools in browsers have become complex, you can use keyboard shortcuts to access all its features without needing to know which pane or menu the functionality is in.
• Keyboard Shortcuts in Developer Tools – the tools inside developer tools all have keyboard shortcuts
• Snippets in Developer Tools – you can set up a collection of snippets for your project inside developer tools
• Mobile Device Emulation – you can simulate different devices, connection speeeds and interaction models inside developer tools. This also comes with a screen ruler, media query inspector and option to create screenshots.
• You can simulate changes to the operating system settings in developer tools withouy having to change your OS: Dark/Light Mode, Reduced Motion and Visual Deficiencies. This allows you to quickly get insight if your product is hard to use by someone who needs to customise their computer to their needs
• Git Version Control in VS Code – having a visual interface to Git allows you to concentrate on good commit messages rather than worrying about command typos
• Integrated Terminal in VS code – you don’t need to jump between editor and terminal, pressing cmd|ctrl and backtick opens a terminal right in the folder where your files are
• Network Console in Browser tools – an experiment in Developer Tools allowing you to intercept, edit and replay any network request
• Microsoft Edge Developer Tools Explainers – innovation in the open, here you can see what the team is working on and what comes soon
• Edge Developer Tools for VS Code – embedding the developer tools of the browser into the editor, so you don’t need to switch

I will talk much more about the last bit in my next blog post as I am chuffed that we managed to get this from a preview and wild idea to production within a year.