## Setting Up a Custom Axios Instance

```javascript
import axios from 'axios'

// Create a custom Axios instance
const instance = axios.create({
  baseURL: 'http://localhost:3000',
})

export default instance
```

## Performing a GET Request

```javascript
const getSomeData = async () => {
  try {
    const response = await instance.get('/tasks')
    return response.data
  } catch (error) {
    console.error(error)
  }
}
```

## Performing a POST Request

```javascript
const postSomeData = async (objParam) => {
  try {
    const response = await instance.post('/tasks', objParam)
    return response.data
  } catch (error) {
    console.error(error)
  }
}
```

## Performing a PATCH Request

```javascript
const patchSomeData = async (id, objParam) => {
  try {
    const response = await instance.patch(`/tasks/${id}`, objParam)
    return response.data
  } catch (error) {
    console.error(error)
  }
}
```

## Performing a PUT Request

```javascript
const putSomeData = async (id, objParam) => {
  try {
    const response = await instance.put(`/tasks/${id}`, objParam)
    return response.data
  } catch (error) {
    console.error(error)
  }
}
```

## Performing a DELETE Request

```javascript
const deleteSomeData = async (id) => {
  try {
    const response = await instance.delete(`/tasks/${id}`)
    return response.data
  } catch (error) {
    console.error(error)
  }
}
```

## Usages

```javascript
const executeRequests = async () => {
  const data = await getSomeData()
  console.log(data)

  const postData = await postSomeData({ title: 'New Task', completed: false })
  console.log(postData)

  const patchData = await patchSomeData(1, { completed: true })
  console.log(patchData)

  const putData = await putSomeData(1, { title: 'Updated Task', completed: true })
  console.log(putData)

  const deleteData = await deleteSomeData(1)
  console.log(deleteData)
}

// Execute all requests
executeRequests()
```


Learn to simplify your web development process by setting up and using a custom Axios instance for HTTP requests in JavaScript. This step-by-step guide will show you how to create and use Axios instances for better management of GET, POST, PATCH, PUT, and DELETE operations.

Handling HTTP Requests with Axios in JavaScript

## Part 1: Node Version Management with nvm-windows

`nvm-windows` is a version manager for Node.js, allowing you to switch between Node versions without conflicts.

### Installing nvm-windows

To install `nvm-windows`, follow these steps:

1. Head over to the [`nvm-windows` GitHub releases page](https://github.com/coreybutler/nvm-windows/releases).
2. Download the latest `nvm-setup.zip` file.
3. Unzip it and execute the `nvm-setup.exe`.
4. Complete the setup wizard instructions.

### Using nvm-windows

Open a new command prompt or PowerShell window to manage Node versions:

- **List installed Node versions**: `nvm list`
- **Install a specific Node version**: `nvm install 14.17.0` (replace with your desired version)
- **Switch to use a specific Node version**: `nvm use 14.17.0`
- **Set a default Node version**: `nvm alias default 14.17.0`

## Part 2: Keeping Dependencies Updated with npm-check-updates

`npm-check-updates` (`ncu`) updates your `package.json` with the latest versions of dependencies, ensuring you're using the most recent and secure packages.

### Installing npm-check-updates

To install `npm-check-updates`, open your command prompt or PowerShell and enter:

```powershell
npm install -g npm-check-updates
```

## Using npm-check-updates
With ncu, you can easily check and update dependencies:

- Check for outdated packages: `ncu`
- Update package.json to the latest versions: `ncu -u`
- Install updated packages: `npm install`

## Best Practices for Using npm-check-updates
- Check for updates regularly to keep dependencies fresh.
- Review major version bumps for breaking changes before updating.
- Run your test suite after updating to ensure compatibility.

## Conclusion
For Windows-based Node.js developers, nvm-windows and npm-check-updates are essential tools for managing Node environments and dependencies. Incorporating these tools into your development process can significantly simplify version management and keep your projects up-to-date.

As a Node.js developer on Windows, you may find yourself needing to switch between different versions of Node.js for various projects. Additionally, keeping dependencies up-to-date is crucial for security and bug fixes. Here’s a quick reference on using `nvm-windows` to manage Node.js versions and `npm-check-updates` to keep your packages current.

Streamlining Node.js Projects on Windows: Using nvm-windows and npm-check-updates

## Introduction

Working with different Node.js versions can be necessary when you're juggling multiple JavaScript projects. `nvm-windows` provides a hassle-free way to switch between Node.js versions on Windows. Follow this step-by-step guide to take control of your Node.js environments.

## Step 1: Install `nvm-windows`

Before you can manage Node.js versions, you need to install `nvm-windows`:

1. Go to the [`nvm-windows` GitHub releases page](https://github.com/coreybutler/nvm-windows/releases).
2. Download the latest version of the `nvm-setup.zip` file.
3. Extract the contents and execute the `nvm-setup.exe` file.
4. Follow the installation instructions.

After installation, verify that `nvm-windows` is installed by opening a command prompt or PowerShell and typing:

```powershell
nvm version
```

## Step 2: Install Node.js Versions
Install any version of Node.js using nvm-windows. For example, to install Node.js version 14.17.0, type:

```powershell
nvm install 14.17.0
```

Replace 14.17.0 with the version number you require.

## Step 3: List Node.js Versions
To see a list of all installed Node.js versions, enter:

```powershell
nvm list
```

## Step 4: Switch Node.js Versions
To switch to a different Node.js version, use:

```powershell
nvm use 14.17.0
```
Ensure to change 14.17.0 to the version you want to activate.

## Step 5: Set a Default Node.js Version
Set a default Node.js version that will be used automatically in new shells:

```powershell
nvm alias default 14.17.0
```
Again, replace 14.17.0 with the version you wish to set as default.

## Conclusion
nvm-windows is an invaluable tool for Windows-based developers working with Node.js. By following these steps, you can install, manage, and switch Node.js versions effortlessly. 

Easily switch between Node.js versions and manage your JavaScript development environment on Windows with this straightforward guide to using nvm-windows.


How to Use NVM-Windows to Manage Node.js Versions: A Step-by-Step Guide

**1. [Prettier][1]** - Enhances your code with automatic formatting for HTML, CSS, and JS files.

**2. [Quokka][2]** - A playground within your editor for swift prototyping and testing.

**3. [Guides][3]** - Introduces visual indentation guidelines to improve code readability.

**4. [GitLens][4]** - Amplifies your Git functionalities, offering detailed insights and annotations.

**5. [Live Server][5]** - Initiates a local development server with live reloading for both static and dynamic pages.

**6. [VS Live Share][6]** - Facilitates real-time collaborative code editing and debugging.

**7. [Settings Sync][7]** - Backs up and synchronizes your settings to the cloud.

**8. [Import Cost][8]** - Shows the size of an npm package directly within the editor.

**9. [Color Info][9]** - Offers instant details on CSS color values.

**10. [Polacode][10]** - Craft and share beautiful code snapshots.

**11. [TODO Highlight][11]** - Emphasizes your to-do comments for better visibility.

**12. [Markdown All in One][12]** - Provides a suite of Markdown tools and enhancements.

**13. [Markdown Emoji][13]** - Introduces emoji support in Markdown previews.

**14. [Markdown Preview Github Styling][14]** - Replicates GitHub's Markdown styling in your previews.

**15. [Image Preview][15]** - Renders image previews within the editor's gutter.

[1]: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
[2]: https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
[3]: https://marketplace.visualstudio.com/items?itemName=spywhere.guides
[4]: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
[5]: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
[6]: https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
[7]: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
[8]: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
[9]: https://marketplace.visualstudio.com/items?itemName=bierner.color-info
[10]: https://marketplace.visualstudio.com/items?itemName=pnp.polacode
[11]: https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
[12]: https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
[13]: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-emoji
[14]: https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles
[15]: https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview


Visual Studio Code Extensions that will boost your front end development.


Essential Visual Studio Code Extensions 


### 1. Adopt Descriptive Naming Conventions
- Stay away from cryptic names; they make revisiting code harder.
- Opt for clarity over brevity. For instance, choose `getUserData()` over `gUD()`.
- Consistently use camelCase for both variable and function names.

### 2. Incorporate ES6+ Features for Better Clarity
- Use arrow functions for more concise function expressions.
- Rely on template literals for string concatenation.
- Implement destructuring to extract values efficiently.

### 3. Implement Code Modularization
- Break down your code into small, reusable functions.
- Limit the use of global variables; consider closures and module patterns instead.
- For larger projects, leverage ES6 modules or CommonJS.

### 4. Practice Thoughtful Commenting
- Let your code explain the 'what' while your comments clarify the 'why'.
- Avoid stating the obvious but always document intricate logic.
- Employ JSDoc for thorough function documentation.

### 5. Ensure Consistent Code Formatting
- Integrate tools like ESLint and Prettier into your projects.
- These tools not only ensure style consistency but also auto-format and detect errors early.

### 6. Steer Clear of Magic Numbers
- Replace arbitrary numbers with named constants to add context.
- Instead of `if (days > 180)`, opt for `const HALF_YEAR = 180; if (days > HALF_YEAR)`.

### 7. Master Graceful Error Handling
- Shield risky operations with `try..catch`.
- Forecast potential issues, whether they are null values or unresponsive APIs.
- Provide user-friendly error messages, keeping them free of technical jargon.

### 8. Embrace the DRY Principle
- If you find yourself replicating code, consider a refactor.
- Create reusable components or functions and modularize recurring code snippets.

### 9. Familiarize Yourself with Design Patterns
- Explore fundamental patterns such as Module, Singleton, and Observer.
- Implement them in practical scenarios and understand their advantages.
- Continually update your understanding of these patterns.

### 10. Be Cautious with Dependencies
- Resist the urge to overload with third-party libraries; they can introduce unforeseen challenges.
- Remember, every added library can be a potential weak link or security risk.
- Regularly update and audit them, using tools like `npm audit`.

By integrating these practices, you can craft cleaner, more maintainable JavaScript code.


How to Improve Your JavaScript Coding Practices


Writing Clean and Maintainable JavaScript: Best Practices for 2023

A simple visual regression tool using puppeteer and resemblejs.


![visual-regression](//images.ctfassets.net/kwkjbibbqrpv/6jPrmVHZEA8IUQMOQAEA2I/f05faa79be5f5013b231536492089627/visual-regression.gif)


See the [source code](https://github.com/randy-deleon/visual-regression) or read the [tutorial](https://github.com/randy-deleon/visual-regression/blob/master/TUTORIAL.md) in Github.

A simple visual regression tool using puppeteer and resemblejs.