Name: Video recording for Tools for web developers: Live coding and debugging - Codementor Events
Uploaded: 2022-02-14
Description: 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.*


technical events about testing and dev tools like Cypress

Testing & Development Tools

### 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`:


![Screen Shot 2022-05-11 at 4.34.21 PM.png](https://ucarecdn.com/c3777f1e-abab-46b2-87da-7588ed986355/)


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.

Senior Software Engineer at OpenSauced

Nick Taylor

GitHub

LinkedIn

YouTube

Twitter

Nick shares useful web development tools to help developers program and debug with efficiency

Video recording for: Tools for web developers: Live coding and debugging

Discussion