Trailer for the talk
Here's a sneak peek of the talk: Nick shares useful web development tools to help developers program and debug with efficiency
About the talk
No matter how experienced you are as a developer, one thing that will give you superpowers throughout your career is knowing your tools. Whether it's shortcuts in your favorite editor, the right commands for git, or tools for debugging, they will give your early career a boost, and continue to help you grow and advance as a developer.
This talk will cover
- Why knowing your tools is important
- How to be a detective: debugging techniques
- A few useful tools
- JavaScript debugger (browser and Node.js)
- CSS tools in the browser
- VS Code and GitHub CLI
- Live coding/debugging using VS Code, CSS tools, and Node.js
This event will be held on Zoom. Register to receive the recording afterward.
About the speaker
Nick is a Senior Software Engineer at OpenSauced. He is a big fan of Open Source and has a growing interest in serverless and edge computing. Aside from programming, he enjoys hitting the gym, snowboarding, and rugby a long time ago.
Highlights of the talk
Why is knowing your tools important?
One big reason is it increases your productivity. Depending on what the tools are, it can help you diagnose problems and help you understand the systems you work in. Not only that, as developers we all like to customize things, so you gotta be able to set that favorite font for your editor and terminal.
When you’re discovering tools, speak to coworkers, other devs in the communities you are in to share the tools you use, but also to see what other tools other people use. You can find a list of useful tools on uses.tech, where developers from all over the world crowdsourced together to help each other out on finding useful new tools.
What are some tools in VS Code?
VS Code is a Microsoft product but also an open source project. There are a lot of keyboard shortcuts. If you quickly use command + D or ctrl + D, you’ll see the search bar on the right pop up. Command + shift + e will take you to the explorer and command + shift + d will take you to the debugger.
If you open a new HTML file on VS Code, press ! and press tab, VS Code will create an HTML template, and the way that’s possible is through Emmet, a powerful extension built into Visual Studio Code. As you get familiar with CSS, there’s something called a CSS selector, which powers Emmet. Here’s an example: ul > li * 5 > a.yolo and press tab, you’ll get a list.
Another tool is GItlens. Gitlens gives you all these tools about what information you’ve been doing with git. Another one called Git Cloak is interesting too. Create a file called .env, an environment file, which usually contains keys you don’t want to show other people. So for example, if you typed hello=’secret’ and you dont’ want someone to see secret, you can do command + shift + e, and select “Cloak: Hide secrets.'' You'll still see the key, but not the data anymore. This is useful for streaming or presentation.
What are some useful commands for managing your git workflow?
GitHUb CLI allows you to create repositories, create pull requests, and check out a pull request. If you install the GitHub CLI, it gives you this command line called gh help and you’ll get a list of the things you can do. For example, to create a GitHub repo, you can type in gh repo create, and push existing local repository to GitHub:
You can also create a pull request by typing gh pr create and basically it’ll give you steps on what you want to call it, what to add to description, and much more.
What are some browser dev tools?
Most of the demo will be done through Microsoft Edge, which is a Chromium based dev tool, but similar tools can be found in Firefox. Safari also has dev tools but are behind other browsers and not as up to date. The first tool is inspecting elements. You can right click on any element in the browser that you’d like to inspect and directly edit the code to change the way things are displayed. You can also use flex tooling, CSS grid, hide elements, delete it, and much more.
Another one that’s interesting is the CSS Panel. If you look at inspect, and look at the right column, you can start toggling and hiding things to alter the CSS. You can also go to the computed tab to see why the background is a certain color, and it'll show you exactly what settings it’s in. This is useful when you have a problem with CSS. The accessibility panel reads things to you to ensure that your page is accessible, the command palette allows you to find the files faster, and the sources panel will show you the source code.