DEV Community: aagamezl

Introducing Shest: A Test Runner for Bash Scripts

aagamezl — Sat, 18 Jan 2025 21:21:03 +0000

Shest: A Test Runner for Bash Scripts

Shest is an intuitive test runner for Bash scripts, inspired by Node.js Jest. The name Shest stands for [Sh]ell T[est], and it simplifies testing by providing a clear structure for writing, organizing, and executing shell script tests. With built-in support for assertions, Shest empowers developers to write reliable and maintainable Bash scripts effortlessly.

🚀 Installation

You can install shest using a single command. The installation script checks if shest is already installed, downloads the latest version if not, and sets it up for global use.

Installation Command:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/aagamezl/shest/master/tools/install.sh)"

What the Command Does:

Checks if shest Exists:
- Verifies if shest is already present in /home/$USER.
- Skips installation if already installed.
Downloads the Script:
- Fetches the latest version from the GitHub repository using curl.
Places the Script in /home/$USER:
- Saves the script to /home/$USER/shest.sh for global access.
Displays Installation Status:
- Notifies whether the installation was successful or failed.

🛠 Usage

To use shest in your shell scripts, include it using the source command. Here’s an example test suite:

#!/bin/bash

# Include the shest framework
source /home/$USER/shest.sh

# Define a test suite
describe "Example Test Suite" <<'TEST'
  test "Simple equality check" <<'SUITE'
    toBeEqual "1 + 1 equals 2" "$(echo $((1 + 1)))" "2"
  SUITE

  test "String contains check" <<'SUITE'
    toContain "Check substring" "Hello, World!" "World"
  SUITE
TEST

# Run the tests
pluralize_test

🔍 Syntax Overview

Shest’s syntax is designed to be intuitive:

describe Block: Groups related test cases.
test Block: Defines individual test cases.
Assertions: Built-in functions like toBeEqual, toBeNotEqual, toBeTrue, toBeFalse, and toContain to validate outcomes.
Heredoc Syntax: Encapsulates multi-line strings without interpreting variables or special characters.

Example:

describe "Nouns ending in -ss, -sh, -ch, -x, -o" <<'TEST'
  test "Testing toBeEqual" <<'SUITE'
    toBeEqual "hello" "hello"
    toBeEqual 1 1
  SUITE

  test "Testing toBeNotEqual" <<'SUITE'
    toBeNotEqual "hello" "world"
  SUITE

  test "Testing toBeTrue" <<'SUITE'
    toBeTrue true
  SUITE

  test "Testing toBeFalse" <<'SUITE'
    toBeFalse false
  SUITE

  test "Testing toContain" <<'SUITE'
    toContain "hello world" "world"
    toContain 123 2
  SUITE
TEST

📊 Test Results

Shest provides a detailed report for each test run:

Pass/Fail Marks: Tests are marked as ✓ (Pass) or ✗ (Fail).
Summary: Shows the total number of test suites and individual tests that passed/failed.
Time Taken: Displays execution time for all tests.

Example:

• Testing Assertions
  Testing toBeEqual
    ✓ toBeEqual: Passed
    ✓ toBeEqual: Passed

  Testing toBeNotEqual
    ✓ toBeNotEqual: Passed

  Testing toBeTrue
    ✓ toBeTrue: Passed

  Testing toBeFalse
    ✓ toBeFalse: Passed

  Testing toContain
    ✓ toContain: Passed
    ✓ toContain: Passed

Test Suites:    0 failed, 5 passed, 5 total
Tests:          0 failed, 7 passed, 7 total
Time:           0.01 s

🌟 Why Use Shest?

Intuitive Syntax: Simplifies writing and organizing Bash script tests.
Comprehensive Assertions: Offers built-in functions to validate various conditions.
Improved Productivity: Saves time by identifying issues early.

Start testing your Bash scripts with Shest today and experience the simplicity of reliable shell scripting! 🚀

Explore Shest on GitHub for more details.

How to Create an Engaging Drag and Drop Experience With JavaScript

aagamezl — Fri, 04 Aug 2023 13:29:55 +0000

How to Create an Engaging Drag and Drop Experience With JavaScript

Estimated Read Time: 10 min

Drag and drop functionality is a powerful tool that significantly enhances user interactions on the web. From rearranging to-do lists and file uploads to interactive dashboards, it provides a smooth and engaging user experience. In this tutorial, we'll learn how to implement a simple drag and drop feature for a list of items using JavaScript. By the end, you'll have a better understanding of how drag and drop works and how to make it visually appealing and user-friendly.

Setting Up the HTML

Let's start by creating the HTML structure for our drag and drop list. To make an element draggable, we can set its draggable attribute to true. For our list items, we'll set this attribute to enable reordering. Here's the basic HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop Tutorial</title>
    <style>
        /* CSS styles will be added later */
    </style>
</head>
<body>
  <h1>Drag and Drop Tutorial</h1>
  <div class="list-container">
    <ul class="draggable-list">
      <li class="draggable-list-item" draggable="true">Item 1</li>
      <li class="draggable-list-item" draggable="true">Item 2</li>
      <li class="draggable-list-item" draggable="true">Item 3</li>
      <li class="draggable-list-item" draggable="true">Item 4</li>
      <li class="draggable-list-item" draggable="true">Item 5</li>
    </ul>
  </div>  
  <script src="script.js"></script>
</body>
</html>

Styling the Elements

While not strictly necessary, styling the elements enhances the visual appeal of our drag and drop list. It also provides important visual cues to users. Here's the CSS to style our list:

body {
  font-family: sans-serif;
  margin: 20px;
  text-align: center;
}

h1 {
  margin-bottom: 20px;
}

.list-container {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 10px;
  width: 20vw;
}

ul.draggable-list {
  list-style: none;
  padding: 0;
}

ul.draggable-list li {
  background-color: #dbe5f1; /* Pastel Blue */
  cursor: grab; /* Cursor style indicates draggable element */
  margin-bottom: 5px;
  padding: 10px;
  transition: background-color 0.2s; /* Smooth transition on hover */
}

ul.draggable-list li:hover {
  background-color: #c6d5ea; /* Lighter shade of Pastel Blue on hover */
}

/* CSS styles for the dragging effect */
.dragging {
  opacity: 0.7;
  cursor: grabbing;
}

The CSS styles apply a clean and modern look to the list. The cursor: grab; property on list items changes the cursor to indicate that the items are draggable, offering a visual cue to the user. The transition on hover adds a subtle effect when the user hovers over a list item.

Implementing Drag and Drop

Now, let's dive into the JavaScript code to implement the drag and drop functionality. Drag and drop is event-driven, and there are three key events we need to handle: dragstart, dragover, and drop. Each event plays a critical role in the drag and drop process.

const handleDragStart = (e) => {
  const target = e.target

  target.classList.add('dragging')

  e.dataTransfer.setData('text/plain', target.innerHTML)
}

const handleDragOver = (e) => {
  e.preventDefault()

  const target = e.target

  if (target.classList.contains('draggable-list-item')) {
    const container = target.parentNode
    const y = e.clientY - target.getBoundingClientRect().top
    const height = target.offsetHeight / 2
    const draggedItem = document.querySelector('.dragging')

    if (y > height) {
      container.insertBefore(draggedItem, target.nextSibling)
    } else {
      container.insertBefore(draggedItem, target)
    }
  }
}

const handleDrop = (e) => {
  e.preventDefault()

  const target = e.target
  const draggedItem = document.querySelector('.dragging')

  if (target.classList.contains('draggable-list-item')) {
    const container = target.parentNode
    const isFirstItem = target === container.firstElementChild
    const draggedItem = document.querySelector('.dragging')

    if (target !== draggedItem) {
      if (isFirstItem) {
        container.insertBefore(draggedItem, target)
      } else if (target === container.lastElementChild) {
        container.appendChild(draggedItem)
      } else {
        container.insertBefore(draggedItem, target.nextSibling)
      }
    }
  }

  draggedItem.classList.remove('dragging')
}

const handleDragEnd = (e) => {
  const target = e.target

  target.classList.remove('dragging')
}

const listItems = document.querySelectorAll('.draggable-list-item')

listItems.forEach(item => {
  item.addEventListener('dragstart', handleDragStart)
  item.addEventListener('dragover', handleDragOver)
  item.addEventListener('drop', handleDrop)
  item.addEventListener('dragend', handleDragEnd)
})

Let's break down the code for each event:

`handleDragStart` Event

The dragstart event fires when the user starts dragging an element. In this event, we add a CSS class dragging to the dragged item to visually indicate that it's being dragged. We also set the data to be transferred during the drag operation using e.dataTransfer.setData(). In this case, we're setting plain text data to the inner content of the dragged element.

`handleDragOver` Event

The dragover event fires for every element the dragged item is dragged over. To allow drop on a specific element, we need to prevent the default behavior, which is to disallow dropping. We also set the e.dataTransfer.dropEffect to 'move' to show that the dragged item can be moved.

`handleDrop` Event

The drop event fires when the dragged item is dropped on a valid drop target. Here, we prevent the default behavior and rearrange the list items using insertBefore() method. We place the dragged item after the target element in the list. Finally, we remove the dragging class from the dragged item to reset its visual appearance.

Enhancing the User Experience

For an even better user experience, we can add a subtle opacity effect on the dragged element, giving it a ghostly appearance. We do this via the dragging CSS class in the handleDragStart and handleDragEnd functions.

const handleDragStart = (e) => {
  const target = e.target

  target.classList.add('dragging')

  e.dataTransfer.setData('text/plain', target.innerHTML)
}

const handleDragEnd = (e) => {
  const target = e.target

  target.classList.remove('dragging')
}

In the handleDragStart function, we add the dragging CSS class to the dragged element, creating the ghostly effect. In the handleDragEnd function, we remove the dragging CSS class, making the element fully visible again after dragging.

Conclusion

Congratulations! You've now implemented a captivating drag and drop functionality using JavaScript. By understanding the dragstart, dragover, and drop events, you've unlocked the potential to create various interactive features in your web applications. Additionally, by incorporating subtle CSS effects, like the ghostly opacity, you've improved the overall user experience.

Experiment further with drag and drop interactions, and you'll be able to build more sophisticated features for your web applications, such as dynamic dashboards, Kanban boards, and collaborative tools. The possibilities are endless, and with drag and drop, you can provide a more intuitive and enjoyable user experience for your visitors. Happy coding!

Here is a Live View of this article code:

If you have any questions or need further assistance, please let me know in the comments section below or message me at Twitter or LinkedIn.

Supercharge Your Node.js Development with This Starter Configuration

aagamezl — Wed, 19 Jul 2023 18:53:46 +0000

Introduction:

Starting a new Node.js project can be a daunting task, especially when it comes to setting up the right configuration and choosing the essential packages. In this article, we'll explore a powerful starter configuration that will help you kickstart your Node.js projects with confidence. We'll dive into the package.json file and other configuration files to understand the purpose and benefits of each package included.

Directory Structure

Before we dive into the configuration details, let's examine the final directory structure our Node.js project will have:

├── .czrc
├── .github
│   └── workflows
│       └── node.js.yml
├── .gitignore
├── .husky
│   ├── _
│   ├── pre-commit
│   └── prepare-commit-msg
├── LICENSE
├── README.md
├── ava.config.js
├── package-lock.json
├── package.json
├── src
│   ├── index.js
│   └── sum.js
├── test
│   └── starter.spec.js
├── tsconfig.build.types.json
├── tsconfig.json
└── types
    ├── index.d.ts
    └── sum.d.ts

Exploring the package.json

Let's begin our exploration by analyzing the final package.json file, which will acts as the foundation of our Node.js project.

{
  "name": "my-node-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "coverage": "c8 --reporter=lcov ava",
    "coverage:view": "c8 --reporter=html --reporter=text ava",
    "lint": "npm run lint:code && npm run lint:types",
    "lint:code": "standard",
    "lint:fix": "standard --fix",
    "lint:types": "tsc",
    "prepare": "husky install",
    "test": "ava",
    "test:watch": "ava --watch",
    "build:types": "tsc -p tsconfig.build.types.json"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/your-username/my-node-project.git"
  },
  "keywords": [
    "generator"
  ],
  "contributors": [
    {
      "name": "Álvaro José Agámez Licha",
      "email": "alvaroagamez@outlook.com"
    }
  ],
  "license": "MIT",
  "devDependencies": {
    "ava": "^5.3.1",
    "c8": "^8.0.0",
    "commitizen": "^4.3.0",
    "cz-conventional-changelog": "^3.3.0",
    "husky": "^8.0.3",
    "sinon": "^15.2.0",
    "standard": "^17.1.0",
    "typescript": "^5.1.6"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }
}

ava:
- Ava is a robust and developer-friendly test runner for Node.js.
- With concise syntax and fast execution, Ava simplifies the process of writing and executing tests.
- It allows you to create tests in the test/**/*.spec.js files specified in the ava.config.js file.
c8:
- C8 is a code coverage tool for Node.js projects.
- By generating code coverage reports, C8 helps you understand how well your tests cover your codebase.
- The coverage and coverage:view scripts in the package.json file utilize C8 to generate detailed code coverage reports.
commitizen and cz-conventional-changelog:
- Commitizen and cz-conventional-changelog work together to enforce standardized commit messages in your project.
- Commitizen provides a command-line tool that guides you through creating consistent commit messages.
- cz-conventional-changelog serves as the adapter for Commitizen, enforcing the conventional changelog style.
- By adhering to a standardized commit message format, you can generate meaningful changelogs automatically.
husky:
- Husky simplifies the process of managing Git hooks in your project.
- Git hooks enable you to run custom scripts at specific points during your Git workflow.
- Husky's prepare script installs the necessary hooks, ensuring consistent behavior across different environments.
sinon:
- Sinon is a powerful library for creating test spies, stubs, and mocks in JavaScript.
- Although not explicitly used in this configuration, Sinon can be utilized in your test files to manage dependencies and create test doubles.
standard:
- Standard is a popular JavaScript code style and formatting tool.
- It enforces a set of predefined rules to maintain code consistency and readability.
- The lint and lint:fix scripts in the package.json file use Standard to check and automatically fix linting issues, respectively.
typescript:
- Static Typing: TypeScript introduces static typing to JavaScript, enabling you to define and enforce types for variables, parameters, return values, and more. This helps catch type-related errors early, provides code clarity, and improves overall code quality.
- Advanced Tooling: TypeScript integrates seamlessly with popular code editors and IDEs, offering advanced tooling features such as autocompletion, type checking, and refactoring support. This enhances developer productivity and provides real-time feedback on potential issues.

Note: This project don't use TypeScript to write the code, but use the TypeScript Compiler to check and generate the types defined using JSDoc.

Let's Start

Step 1: Project Initialization

To kick off our Node.js project, you need to initialize a new directory. Open your terminal and navigate to the desired location for your project. Now, execute the following command:

npm init

This command triggers the project initialization process and prompts you to provide essential information about your project, such as its name, version, description, entry point, and more. Feel free to answer these questions and let npm generate a shiny new package.json file for you.

Activation ES Module System

I like to set "type": "module" entry in the package.json file to specify that our project uses ECMAScript modules (ES modules) rather than the CommonJS module system, which is the default in Node.js.

By setting "type": "module", you inform Node.js that your project's code will be written using ECMAScript modules syntax, which includes using import and export statements to import and export code between modules.

Here's a breakdown of the implications and benefits of setting "type": "module":

ES Modules Syntax: When "type": "module" is specified, you can use the ES modules syntax for importing and exporting code within your project. Instead of using require() and module.exports, you use import and export statements.
Static Analysis: With ES modules, the import and export statements are statically analyzable. This allows tools like bundlers, linters, and transpilers to better understand your code's dependencies and perform optimizations.
Improved Compatibility: Setting "type": "module" makes your code more compatible with modern JavaScript tooling and environments that support ES modules. It aligns your project with the direction of the JavaScript ecosystem and enables you to take advantage of the latest features and tools.

It's important to note a few considerations when using "type": "module":

File Extension: When using ES modules, it's recommended to use the .mjs file extension for your modules. However, Node.js allows using .js for ES modules as well, as long as "type": "module" is specified.
Node.js Support: While many modern versions of Node.js support ES modules, older versions may have limited or no support. When using "type": "module", make sure you are using a Node.js version that includes support for ECMAScript modules.
Interoperability: Mixing ES modules and CommonJS modules (using require and module.exports) within the same project can lead to compatibility issues. Ensure that all your project's modules are written using the same module system to avoid conflicts.

By specifying "type": "module" in your package.json, you signal that your project is designed to use ES modules, allowing you to leverage the benefits of the modern module system and aligning your project with the evolving JavaScript ecosystem.

Step 2: Package Installation

Now that your project has been initialized, it's time to install the necessary packages to empower your Node.js application. npm simplifies package installation through a straightforward command. Let's say you want to install the popular Express framework. Run the following command in your terminal:

npm i -D express ava c8 commitizen cz-conventional-changelog husky sinon standard

Sit back and relax as npm swiftly downloads and installs all the required packages. By specifying the package names and versions along with the -D flag, npm adds them to your package.json file as devDependencies.

Step 3: Commitizen Configuration

In your package.json file, the "config" section is used to define custom configuration options for various tools or libraries used within your project. In this case, the "config" section is specifying a configuration option for the "commitizen" tool.

The specific configuration option being set for Commitizen is "path". The "path" option specifies the location of the commitizen adapter or module that should be used for generating commit messages in the desired format. In this case, the "path" is set to "./node_modules/cz-conventional-changelog".

This configuration allows Commitizen to understand and enforce the conventional commit message format defined by the "cz-conventional-changelog" module. The conventional commit message format typically includes a standardized structure for commit messages, including a type, scope, and description, which is useful for generating changelogs and tracking changes in a standardized way.

By defining this configuration option, you ensure that Commitizen uses the specified adapter for generating commit messages according to the conventional commit message format within your project.

Add the next code to your package.json:

"config": {
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}

npm Scripts

To create the scripts I use npm pkg set command:

npm pkg set scripts.coverage="c8 --reporter=lcov ava"
npm pkg set scripts.coverage:view="c8 --reporter=html --reporter=text ava"
npm pkg set scripts.lint="npm run lint:code && npm run lint:types"
npm pkg set scripts.lint:code="standard"
npm pkg set scripts.lint:fix="standard --fix"
npm pkg set scripts.lint:types="tsc"
npm pkg set scripts.prepare="husky install"
npm pkg set scripts.test="ava"
npm pkg set scripts.test:watch="ava --watch"
npm pkg set scripts.build:types="tsc -p tsconfig.build.types.json"

The npm pkg set command is used to set a value in our package.json file. The syntax for the command is:

npm pkg set <field>=<value>

Additional Configuration Files

In addition to the package.json file, there are a few additional configuration files that complement the setup:

.czrc:
- This file configures the Commitizen adapter, specifying the path to cz-conventional-changelog.
- By referencing the correct adapter, Commitizen ensures that your commit messages follow the conventional changelog style.
- To generate the .czrc file execute the next command:
```
 echo '{ "path": "cz-conventional-changelog" }' > .czrc
```
ava.config.js:
- This file exports a configuration object for Ava, the test runner.
- The specified files array determines which test files are included during test execution.
- In this starter configuration, all files matching the pattern test/**/*.spec.js will be considered for testing.
- Content of ava.config.js:
```
 export default {
   files: [
     'test/**/*.spec.js'
   ]
 }
```
.husky:
- The pre-commit hook script is used to execute actions before committing changes, such as running tests or linting the code.
- The prepare-commit-msg runs the Commitizen CLI in an interactive mode, allowing you to create standardized commit messages effortlessly.

Husky Configuration

To configure Husky the first thing is to have a git repository for our project, so if you don't have one right now, run the next command in your terminal (inside your project diretory):

git init

This command will create a new 'git' repository for our project. Now we can initialize our Husky project using the next command:

npm run prepare

After this command is executed a new folder called .husky will be created inside our project directory. The purpose of the .husky directory and its files is to define and configure the Git hooks for our project.

npx husky add .husky/prepare-commit-msg 'exec < /dev/tty && node_modules/.bin/cz --hook || true'
npx husky add .husky/pre-commit "npm test"
npx husky add .husky/pre-commit "npm run lint"

Creating a Generic Unit Test with Ava

To ensure that your unit tests are functioning correctly, it's essential to create a generic unit test case that can serve as a starting point. In this section, we'll demonstrate how to create a simple unit test using Ava, utilizing the provided code example.

To begin, follow these steps:

Navigate to our project's test directory.
Create a new file named starter.spec.js.
Add the following code to the starter.spec.js file:

import test from 'ava'

test('should pass the first starter test', t => {
    t.pass()
})

Now, to execute the unit test, you can use the test script defined in the package.json file. The test script is set to run Ava, the test runner, and execute all the tests located in the test directory.

To run the test, execute the following command in your terminal:

npm run test

Understanding the Provided Test Scripts

Let's take a closer look at the test-related scripts defined in the package.json file:

"scripts": {
  "test": "ava",
  "test:watch": "ava --watch"
}

"test": This script runs Ava and executes all the tests located in the test directory. When you run npm run test, Ava starts executing the test files and displays the results in the terminal.
"test:watch": This script also runs Ava, but with the --watch flag. This flag enables the watch mode, which means that Ava continuously monitors the test files for changes. When a file is modified, Ava automatically reruns the corresponding tests, providing instant feedback during development. To use this script, execute npm run test:watch in your terminal.

Ava will execute the starter.spec.js test, and if everything is set up correctly, you should see the test result, indicating that it passed successfully.

Linting Your Code with Standard

Linting is a crucial part of the development process that helps maintain code quality and enforce consistent code style. In this section, we'll discuss how the standard package is used for linting our code, along with the two provided scripts: lint and lint:fix.

Now, let's explore the purpose and functionality of the two linting scripts:

Script: "lint"

"lint": "standard"

The lint script invokes the standard command, provided by the Standard package. When executed, it analyzes your project's source code files and reports any linting errors or warnings. This script allows you to quickly identify code quality issues and enforce consistent style across your codebase.

To run the linting process, execute the following command in your project's directory:

npm run lint

Upon execution, Standard will scan your source code files and display any linting errors or warnings in the console. These messages will provide details about the specific issues found and their locations in your code.

Script: "lint:fix"

"lint:fix": "standard --fix"

The lint:fix script performs the same linting analysis as the lint script but with an additional capability to automatically fix certain issues. By appending the --fix flag to the standard command, the script attempts to resolve linting errors or apply suggested fixes wherever possible. However, be cautious when using automatic fixes, as they can introduce unintended changes to your code. It's always recommended to review the changes made by the lint:fix script manually.

To run the linting process with automatic fixes, execute the following command in your project's directory:

npm run lint:fix

Generating TypeScript Types using JSDoc and the Benefits of Type Checking

JSDoc can be a powerful tool not only for generating TypeScript types but also for enabling type checking in your JavaScript code. By providing type annotations through JSDoc comments, you can improve code clarity, maintainability, and catch potential errors early on. In this section, we'll explore how to use JSDoc to generate TypeScript types and discuss the benefits of incorporating type checking into your development process.

The Benefits of Type Checking

Type checking offers several key benefits for your JavaScript codebase:

Early Error Detection: By incorporating type checking, you can catch errors early in the development process. The TypeScript compiler examines your code and provides immediate feedback on potential type-related issues, such as passing incorrect arguments to functions or assigning incompatible values to variables. This helps identify and resolve bugs before they manifest at runtime.
Enhanced Code Clarity: Type annotations offer improved code documentation and self-documenting code. When reviewing the codebase, developers can quickly understand the expected types of variables, parameters, and return values, making it easier to reason about the code's behavior. The type information serves as a form of documentation, reducing ambiguity and enhancing collaboration.
Refactoring Confidence: With type checking, refactoring becomes less error-prone. When making changes to your codebase, the TypeScript compiler highlights type mismatches and inconsistencies, enabling you to confidently update code without the fear of introducing subtle bugs. The compiler flags any potential issues, allowing you to address them proactively.
Tooling and IDE Support: TypeScript's static typing enables advanced tooling features in Integrated Development Environments (IDEs) and text editors. Autocompletion, intelligent code suggestions, and real-time error highlighting are some of the benefits that come with type checking. These features enhance developer productivity, making it easier to navigate and write code.
Maintainable and Scalable Codebase: As projects grow larger and more complex, maintaining code quality becomes increasingly challenging. Type checking helps ensure the integrity and maintainability of the codebase. It enables better collaboration among team members, facilitates code reviews, and reduces the likelihood of introducing regression bugs.

To generate TypeScript types using JSDoc, follow these steps:

Ensure that your JavaScript code files contain JSDoc comments with appropriate type annotations. For example, consider the following JSDoc comment:
```
/**
  * Calculate the sum of two numbers.
  *
  * @param {number} a - The first number.
  * @param {number} b - The second number.
  * @returns {number} The sum of the two numbers.
  */
function sum(a, b) {
  return a + b;
}
```
In this example, the JSDoc comment provides type annotations for the a and b parameters and the return value of the sum function.
Configure your TypeScript compiler options appropriately to generate TypeScript types from JSDoc comments. We'll examine the provided tsconfig.json and tsconfig.build.types.json files to understand the necessary settings.

Understanding the tsconfig Files

Now, let's explore the provided tsconfig.json files:

tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "moduleResolution": "node",
    "lib": [
      "ESNext"
    ],
    "allowJs": true,
    "alwaysStrict": true,
    "checkJs": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strict": true
  },
  "include": [
    "test",
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

Compiler Options: The compilerOptions field specifies the TypeScript compiler options. These options define how TypeScript should compile your code and generate the appropriate JavaScript and TypeScript files.
JSDoc Support: In this configuration, key options related to JSDoc support include:
- allowJs: true: This option enables TypeScript to process JavaScript files in your project.
- checkJs: true: This option instructs TypeScript to check the validity of JSDoc comments and type annotations in JavaScript files.
Include and Exclude: The include field specifies the directories or files that should be included in the compilation process. In this case, both the test and src directories are included. The exclude field specifies the directories or files that should be excluded from the compilation, such as the node_modules directory.

tsconfig.build.types.json:

{
  "extends": "./tsconfig",
  "compilerOptions": {
    "declarationDir": "./types",
    "noEmit": false,
    "declaration": true,
    "emitDeclarationOnly": true
  },
  "include": [
    "src"
  ]
}

Extending Base Configuration: The extends field is used to extend the base tsconfig.json configuration, inheriting its settings and overriding or adding specific options for the build:types script.
Declaration Files: The options within compilerOptions are specific to generating TypeScript declaration files (.d.ts). The key options are:
- declarationDir: This option specifies the output directory where the declaration files will be generated. In this example, they will be outputted to the types directory.
- noEmit: This option is set to false to enable TypeScript to emit output files, including the declaration files.
- declaration: This option is set to true to generate the declaration files.
- emitDeclarationOnly: This option ensures that only the declaration files are emitted, excluding the compiled JavaScript files.
Include: The include field specifies the directories or files that should be included in the compilation process for generating the declaration files. In this case, only the src directory is included.

Explaining the npm Scripts

Let's examine the two npm scripts related to TypeScript type generation and their functionalities:

"scripts": {
  "lint:types": "tsc",
  "build:types": "tsc -p tsconfig.build.types.json"
}

"lint:types": This script uses the TypeScript compiler (tsc) to perform a type check on your TypeScript types. It ensures that your JSDoc comments provide valid and accurate type information. When you run npm run lint:types, the TypeScript compiler checks the types and reports any errors or inconsistencies.
"build:types": This script uses the TypeScript compiler with a custom tsconfig.build.types.json configuration file. It generates TypeScript declaration files (.d.ts) based on your JSDoc comments. The generated declaration files provide type information for TypeScript-aware tools and libraries. Running npm run build:types triggers the TypeScript compiler with the specified tsconfig.build.types.json configuration, which is explained in the next section.

Code Coverage

Ensuring adequate test coverage is crucial for maintaining code quality and identifying potential areas of improvement. Ava provides support for code coverage, allowing you to measure how much of your code is exercised by your unit tests. Let's explore the coverage-related scripts provided in the package.json file and understand their functionalities.

Understanding the Provided Coverage Scripts

The package.json file includes the following coverage-related scripts:

"scripts": {
  "coverage": "c8 --reporter=lcov ava",
  "coverage:view": "c8 --reporter=html --reporter=text ava"
}

"coverage": This script measures the code coverage by running Ava with the c8 code coverage tool and generating an LCOV (Line Coverage) report.
- The --reporter=lcov option specifies the LCOV reporter, which produces a detailed coverage report in a standardized format.
- When executing npm run coverage, Ava runs the tests, and c8 tracks the code coverage during the test execution. After the tests finish, it generates the LCOV report.
"coverage:view": This script generates an HTML coverage report and also includes a text-based summary.
- c8 is again used for code coverage analysis, but this time with different reporters.
- The --reporter=html option instructs c8 to generate an HTML coverage report.
- The --reporter=text option ensures that a text-based summary of the coverage results is also displayed.
- When executing npm run coverage:view, Ava runs the tests, and c8 collects the code coverage data. It then generates an HTML report and displays a summary in the terminal.

Running the Coverage Scripts

To measure code coverage and generate reports, you can execute the coverage-related scripts defined in the package.json file. Follow the instructions below:

Open your terminal or command prompt.
To generate an LCOV coverage report, execute the following command:

   npm run coverage

Ava will run the tests while c8 tracks code coverage. Once the tests complete, the LCOV report will be generated. You can find the report in a file named coverage/lcov-report/index.html.

To generate an HTML coverage report and view a summary, execute the following command:

   npm run coverage:view

Ava will execute the tests, and c8 will generate an HTML coverage report. The report will be saved in the coverage directory, and a summary will be displayed in the terminal.

By using these coverage scripts, you can gain insights into the effectiveness of your tests and identify areas that may require additional testing or refactoring. Understanding the coverage metrics allows you to make informed decisions and improve the quality and reliability of your codebase.

Feel free to integrate the coverage scripts into your development workflow, executing them alongside your regular testing process or as part of your CI/CD pipeline.

Automating Node.js Continuous Integration with GitHub Actions

Continuous Integration (CI) plays a crucial role in modern software development, allowing developers to automate build, test, and deployment processes. In this section, we'll explore how to leverage GitHub Actions to set up a CI workflow for a Node.js project. Let's dive into the details of the provided GitHub Actions workflow and understand each part:

name: Node CI

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

Name: The name field sets the name of the workflow. In this case, it's set to "Node CI," but you can customize it to reflect the purpose of your CI workflow.
Triggers: The on field specifies the events that trigger the workflow. In this example, the workflow is triggered on push events to the master branch and pull requests targeting the master branch. You can modify the branch names to match your project's branch configuration.

Next, let's dive into the jobs section of the workflow:

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [16.x, 18.x, 20.x]

Job: The jobs section defines one or more jobs that make up the workflow. In this case, there is a single job named build.
Runs-on: The runs-on field specifies the type of machine to execute the job. In this example, the job runs on the latest version of the Ubuntu operating system.
Strategy: The strategy field allows you to define a matrix of configurations for the job. Here, the node-version matrix defines different versions of Node.js to be tested. The workflow will run the job for each version specified.

Now, let's explore the steps defined within the build job:

steps:
  - name: 'Checkout Project'
    uses: 'actions/checkout@v3'
    with:
      fetch-depth: 0

  - name: Use Node.js ${{ matrix.node-version }}
    uses: 'actions/setup-node@v3'
    with:
      node-version: ${{ matrix.node-version }}

  - name: 'Install Dependencies'
    run: 'npm ci'

  - name: Lint Files
    run: 'npm run lint'

  - name: 'Run Tests and Coverage'
    env:
      CI: true
    run: 'npm run coverage'

  - name: 'Coveralls Parallel'
    uses: 'coverallsapp/github-action@v2'
    with:
      github-token: ${{ secrets.GITHUB_TOKEN }}
      parallel: true
      path-to-lcov: './coverage/lcov.info'

  - name: 'Coveralls Finished'
    uses: 'coverallsapp/github-action@v2'
    with:
      github-token: ${{ secrets.GITHUB_TOKEN }}
      parallel-finished: true

Checkout Project: The first step checks out the project's source code using the actions/checkout GitHub Action. It fetches the full commit history by setting fetch-depth: 0, ensuring access to all previous commits.
Use Node.js: The actions/setup-node GitHub Action is used to set up the desired Node.js version specified in the matrix. It ensures the correct version is available for subsequent steps.
Install Dependencies: This step executes the npm ci command to install the project dependencies using the npm package manager. The ci command installs dependencies based on the package-lock.json or npm-shrinkwrap.json files, ensuring reproducibility and consistency.
Lint Files: The npm run lint command is executed to run the linter and perform static code analysis. This step helps identify and enforce code quality and style standards.
Run Tests and Coverage: The npm run coverage command is executed with the CI=true environment variable. This typically runs the tests using the test runner (Ava, in this case) and generates code coverage reports.
Coveralls Parallel: The coverallsapp/github-action GitHub Action is used to upload the code coverage information to a service like Coveralls. This step runs in parallel with other jobs and utilizes the specified path-to-lcov file to provide coverage details.
Coveralls Finished: The second coverallsapp/github-action step signifies the end of parallel coverage uploads. It ensures that all parallel jobs have completed and aggregates the coverage information before finishing the workflow.

By using this GitHub Actions workflow, you can automate the build, test, and coverage processes for your Node.js project. It provides a robust CI pipeline that runs on different Node.js versions, installs dependencies, performs linting, executes tests, and uploads coverage reports to a service like Coveralls. Tailor the workflow to fit your specific project requirements and enhance it with additional steps, such as deployment processes, as needed.

Keep in mind that you can customize the workflow further based on your project's specific needs, integrating additional testing frameworks, static analyzers, or other tools to suit your development process.

Coveralls Integration

To activate the Coveralls integration for your GitHub repository, follow these steps:

Sign in to your Coveralls account at coveralls.io. If you don't have an account, you can sign up for free.
Once you're signed in, click on the "Add Repos" button in the top navigation bar.
On the "Add Repos" page, you will see a list of your GitHub repositories. Find the repository you want to enable Coveralls for and click the "Add" button next to it.

After executing the GitHub action, we can see the Coveralls report which will look like this:

Conclusion

In this article, we've explored a powerful Node.js starter configuration that incorporates essential packages to enhance your development workflow. By leveraging the packages mentioned above, you can streamline your testing, ensure code quality, enforce commit message standards, and simplify Git workflows.

With this solid foundation, you can focus on building amazing Node.js applications without worrying about the initial setup. Feel free to adapt and customize this starter configuration to match your specific project requirements.

If you want to add Docker and Docker Compose to this project, you can read my previous article.

The full code for this Node.js Starter is available on Github.

Happy coding!

If you have any questions or need further assistance, please let me know in the comments section below or message me at Twitter or LinkedIn.

Dockerizing Your Node.js Application

aagamezl — Thu, 13 Jul 2023 15:07:28 +0000

Welcome to this guide on how to dockerize your Node.js application! Docker is an incredibly powerful tool that allows you to package your application with all its dependencies into a standardized unit called a container. This makes it easier to deploy and run your application consistently across different environments.

In this article, we'll walk through a sample Dockerfile and docker-compose.yml file, explaining each relevant section and why it's used. So, let's dive in!

Dockerfile

FROM node:18.16.1-alpine3.18 as base

# Create Directory for the Container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json
COPY package*.json /

# Expose API Port
EXPOSE 3000

# ---------------------- START DEVELOPMENT CONFIGURATION -----------------------
FROM base as development
ENV NODE_ENV development

# Copy all other source code to work directory
COPY --chown=node:node . .

# Run npm and install modules
RUN npm ci

USER node

# Run start development command
CMD ["npm", "run", "start:dev"]
# ----------------------- END DEVELOPMENT CONFIGURATION ------------------------

# ----------------------- START PRODUCTION CONFIGURATION -----------------------
FROM base as production
ENV NODE_ENV production

# Copy all other source code to work directory
COPY --chown=node:node . .

# Run npm and install production modules
RUN npm ci --only=production

USER node

# Run start production command
CMD ["node", "bin/www/index.js"]
# ------------------------ END PRODUCTION CONFIGURATION ------------------------

The Dockerfile is a text file that contains instructions on how to build a Docker image. It defines the environment, dependencies, and commands needed to run your application inside a container. Here's the breakdown of the Dockerfile provided:

FROM node:18.16.1-alpine3.18 as base

We start by specifying our base image. In this case, we're using the node:18.16.1-alpine3.18 image, which includes Node.js installed on an Alpine Linux distribution. Using Alpine as the base image keeps the image size small.

WORKDIR /usr/src/app

Next, we set the working directory inside the container to /usr/src/app. This is where our application code will be copied.

COPY package*.json /

We copy the package.json and package-lock.json files from our local machine to the root directory inside the container. This allows Docker to take advantage of its caching mechanism for faster builds.

EXPOSE 3000

We expose port 3000 to allow communication with the containerized application.

FROM base as development
ENV NODE_ENV development

Here, we define a new build stage named development based on the base stage. We set the NODE_ENV environment variable to development.

COPY --chown=node:node . .

We copy all the source code from our local machine to the working directory inside the container. The --chown=node:node flag ensures that the copied files are owned by the non-root node user, improving security.

RUN npm ci

This command runs npm install to install the dependencies specified in the package.json file.

USER node

We switch the user to the non-root node user for improved security.

CMD ["npm", "run", "start:dev"]

Finally, we set the command that will be executed when the container starts. In this case, it runs npm run start:dev, which is a custom command defined in the package.json file.

The above configuration sets up the development environment in the Docker container. Now, let's take a look at the production configuration.

FROM base as production
ENV NODE_ENV production

Similar to the development stage, we define a new build stage named production based on the base stage. The NODE_ENV environment variable is set to production.

COPY --chown=node:node . .

We copy all the source code again, including any additional files, to the working directory inside the container.

RUN npm ci --only=production

Instead of running npm install, we use npm ci to install only the production dependencies, skipping the development dependencies. This ensures a lean and optimized production image.

USER node

We switch to the non-root node user for improved security.

CMD ["node", "bin/www/index.js"]

Finally, we set the command to run the production server using the node command. It executes the index.js file located in the bin/www/ directory.

That's it for the Dockerfile! Now, let's move on to the docker-compose.yml file.

docker-compose.yml

Docker Compose is a tool for defining and running multi-container Docker applications. It allows you to specify the services, dependencies, and configurations needed to run your application stack. Here's an explanation of the provided docker-compose.yml file:

version: "3.8"
services:
  rest-api:
    container_name: rest-api-app
    restart: on-failure
    build:
      context: ./
      target: production
    volumes:
      - /etc/localtime:/etc/localtime:ro
      - .:/usr/src/app
    command: npm run start
    ports:
      - "3000:3000"
    environment:
      NODE_ENV: production
      PORT: 3000
      HOSTNAME: 0.0.0.0

We specify the version of the Compose file format we're using as 3.8.
Under the services section, we define a service named rest-api, which represents our Node.js application.
We set the container_name to rest-api-app for easier identification.
The restart option is set to on-failure, which means the container will automatically restart if it fails.
The build section specifies how to build the service. We set the context to the current directory and the target to production, which corresponds to the production stage in the Dockerfile.
The volumes section defines the volume mappings between the host machine and the container. It maps the current directory (.) to the /usr/src/app directory inside the container, allowing live code reloading during development.
The command specifies the command to start the service. In this case, it runs npm run start, which is defined in the package.json file.
The ports section maps port 3000 of the container to the host machine, allowing access to the API.
The environment section sets environment variables required by the application, including NODE_ENV, PORT, and HOSTNAME.

docker-compose.override.yml

The docker-compose.override.yml file is an optional override file that allows us to modify the base docker-compose.yml configuration. Here's a breakdown of the overridden sections:

version: "3.8"
services:
  postgres:
    image: "postgres:15.3-alpine3.18"
    container_name: rest-api-app-database
    restart: on-failure
    ports:
      - "5432:5432"
    volumes:
      - "./temp/postgres/data:/var/lib/postgresql/data"
    environment:
      POSTGRES_DB: rest-api-app
      POSTGRES_USER: rest-api-app
      POSTGRES_PASSWORD: ujt9ack5gbn_TGD4mje

  rest-api:
    build:
      context: ./
      target: development
    command: npm run start:dev
    volumes:
      - /usr/src/app/node_modules/
    ports:
      - "9229:9229"
    environment:
      NODE_ENV: development
      DATABASE_URL: "PROVIDER://USER:PASSWORD@HOST:PORT/DATABASE?schema=SCHEMA"
      TOKEN_SECRET: ERN7kna-hqa2xdu4bva
      EXPIRES_IN: 3600
    links:
      - postgres

We define a service named postgres to represent a PostgreSQL database container. It uses the postgres:15.3-alpine3.18 image and sets the necessary environment variables for the database. The container is named rest-api-app-database.
The rest-api service is overridden to use the development stage in the Dockerfile. This allows us to run the application in a development environment with additional features like hot-reloading.
target: development specifies that the build stage named development from the Dockerfile should be used to build the rest-api service. This allows you to customize the container's behavior specifically for development purposes.
We map port 9229 of the container to the host machine for debugging purposes.
The environment section defines additional environment variables, such as DATABASE_URL, TOKEN_SECRET, and EXPIRES_IN, which are required for the application to function correctly.
The links section establishes a link between the rest-api service and the postgres service, enabling communication between them.

Starting our Containers

Make sure you have Docker installed on your machine. If you don't have it installed, you can read my previous article where I explain how to install Docker and Docker Compose on Ubuntu Windows Development Environment.
Open a terminal or command prompt and navigate to the directory where your docker-compose.yml file is located.
Once you are in the directory with the docker-compose.yml file, run the following command:

docker-compose up -d

This command will build the necessary Docker images, create and start the containers according to the configuration specified in the docker-compose.yml and docker-compose.override.yml files.

The -d flag stands for "detached" and instructs Docker Compose to run the containers in the background. This allows you to continue using the terminal without being attached to the container's output.

By running Docker Compose in detached mode, you can easily manage and control your application containers while having the flexibility to continue working on other tasks in your terminal.

If everything goes well, you should see the logs from the containers in the terminal. Look for any error messages or warnings during the startup process.

After the containers have started successfully, you can access your Node.js application by opening a web browser and visiting http://localhost:3000. This assumes that port 3000 is not already in use on your machine.

To check the status of the running containers, you can use the following command:

docker-compose ps

This command will display the status of each service defined in the docker-compose.yml file, including the container names, the ports mapped to the host machine, and their current status.

To stop and remove the containers created by Docker Compose, you can use the following command:

docker-compose down

This command will stop and remove the containers, as well as any networks and volumes created by Docker Compose.

Remember, if you make any changes to your code or configuration files, you can simply rerun the docker-compose up -d command to rebuild and restart the containers with the updated code.

To better and easier manage our containers, I use Lazydocker; For an explanation of the tool and how to install it, you can read my previous article where I explain how to install and manage Lazydocker in Ubuntu Windows Development Environment.

That's it! With this Dockerfile and docker-compose.yml configuration, you can easily containerize your Node.js application, making it portable and consistent across different environments. Happy containerized development!.

I hope you enjoyed this guide to Dockerizing your Node.js application. If you have any questions or feedback, feel free to leave a comment below or message me at Twitter or LinkedIn. Happy coding!.

Windows Development Environment

aagamezl — Wed, 12 Jul 2023 21:46:34 +0000

Are you a Windows user who wants to set up a powerful development environment? Look no further! In this article, I'll guide you through the process of installing and configuring essential tools to create a seamless development experience on Windows. We'll cover setting up WSL2 with Ubuntu, installing Zsh as your default shell, configuring Oh My Zsh, Powerlevel10k, Nerd Font, and more. Let's get started!

Note: This guide is based on Windows 11 and Windows 10 version 2004 and higher (Build 19041 and higher); If you are using an older version of Windows 10, the process is the same except for installing WSL, in that case you can find the instructions. here

Step 1: Install WSL2 and Ubuntu

To kickstart our development environment setup, we'll first install Windows Subsystem for Linux 2 (WSL2) and Ubuntu. Open a PowerShell terminal and execute the following commands:

wsl --list --online  # List available Linux distributions
wsl --install -d Ubuntu-22.04  # Install Ubuntu 22.04

If you ever need to uninstall a WSL distribution, you can use the following command:

wsl --unregister Ubuntu  # Replace 'Ubuntu' with the distribution you want to uninstall

Step 2: Configure WSL

Now that we have Ubuntu installed, we could configure WSL for optimal performance and functionality.

A good source of all the possible configuration options can be found in the official documentation.

Step 3: Install Zsh

Zsh is a powerful shell designed for interactive use and scripting. Let's install it on our Ubuntu distribution by running the following command:

sudo apt-get install zsh

Once Zsh is installed, let's set it as the default shell. Open the ~/.bashrc file in your favorite text editor:

vim ~/.bashrc

Add the following lines at the end of the file:

# if running in terminal...
if test -t 1; then
  # ...start zsh
  exec zsh
fi

Save the file and execute the following command to apply the changes:

source ~/.bashrc

Step 4: Install Oh My Zsh

Oh My Zsh is a community-driven framework for managing Zsh configurations. It provides a delightful experience out of the box. Let's install it by running the following command:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Step 5: Install Nerd Font

Nerd Font is a collection of fonts that adds glyphs and icons to various programming-related tools. Download the desired Nerd Font and install it on your operating system. This step may vary depending on your specific font and operating system. I personally use FiraCode Nerd Font Mono.

Step 6: Install Powerlevel10k

Powerlevel10k is a highly customizable Zsh theme that emphasizes speed, flexibility, and an out-of-the-box experience. Additionally, we'll install two extra plugins: zsh-autosuggestions and zsh-syntax-highlighting. Execute the following commands:

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k
git clone https://github.com/zsh-users/zsh-autosuggestions.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

Step 7: Configure Powerlevel10k

Open the ~/.zshrc file:

vim ~/.zshrc

Add or modify the following lines to configure Powerlevel10k:

export TERM="xterm-256color"
POWERLEVEL9K_MODE="nerdfont-complete"
ZSH_THEME="powerlevel10k/powerlevel10k"
ENABLE_CORRECTION="true"
plugins=(git zsh-autosuggestions zsh-syntax-highlighting)

Save the file and execute the following command to apply the changes:

source ~/.zshrc

To run the Powerlevel10k Configuration Wizard at any time, for example to change our previous configuration, execute the following command:

p10k configure

Step 8: Add Aliases to Zsh

Aliases are shortcuts that make your command-line usage more efficient. Open the ~/.zshrc file:

vim ~/.zshrc

Scroll to the bottom of the file and add the following custom aliases:

# ------------------------------------------------------- #
#                   Custom Aliases                        #
# ------------------------------------------------------- #

# Miscellaneous
alias configzsh="vim ~/.zshrc"
alias configvim="vim ~/.vimrc"
alias reloadzsh="source ~/.zshrc"
alias reloadvim="source ~/.vimrc"
alias wttr="curl -s wttr.in/Malmo"
alias python="python3"

# Network
alias mip="hostname -I"
alias ports="lsof -i -n -P"

Save the file and execute the following command to apply the changes:

source ~/.zshrc

Step 9: Set Vim as the Default Git Editor

Let's configure Git to use Vim as the default editor for commit messages. Run the following command:

git config --global core.editor "vim"

Step 10: Install NVM

NVM (Node Version Manager) is a handy tool for managing multiple versions of Node.js. Install NVM by executing the following command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

Step 11: Create a Working Space

To organize your development projects, create a directory to store all your code and documents. Run the following command to create the directory structure:

mkdir -p workspace/work/git-repos && cd $_

Step 12: Generate SSH Key for Git Repositories

If you use Git for version control, it's a good practice to generate an SSH key for secure authentication. Run the following command and follow the prompts:

ssh-keygen -t ed25519 -C "your_email@example.com"

After generating the SSH key, you can display it using the following command:

cat ~/.ssh/id_ed25519.pub

Step 13: Load tmux on Launch Terminal

Tmux is a terminal multiplexer that allows you to manage multiple terminal sessions within a single window. Edit the ~/.zshrc file:

vim ~/.zshrc

Add the following line at the end of the file to automatically start tmux when launching the terminal:

if [ "$TMUX" = "" ]; then tmux; fi

Save the file and execute the following command to apply the changes:

source ~/.zshrc

By default, Oh My Zsh includes a plugin for tmux. If you haven't done so already, add the plugin to your plugins list and set ZSH_TMUX_AUTOSTART=true in your .zshrc file. Refer to the Oh My Zsh documentation for more details.

Step 14: Install Scoop Application

Scoop is a convenient package manager for Windows that allows you to install programs directly from the command line with minimal friction. It offers several advantages:

Eliminates permission popup windows: Scoop installs programs without requiring any pop-up windows for user confirmation.
Hides GUI wizard-style installers: Scoop bypasses the need for manual installation steps or complex graphical interfaces.
Prevents PATH pollution: Unlike traditional installations, Scoop avoids cluttering your system's PATH environment variable with unnecessary entries.
Avoids unexpected side-effects: Scoop manages installations and uninstallations cleanly, ensuring that no unwanted leftovers or conflicts occur.
Finds and installs dependencies automatically: Scoop automatically resolves and installs any dependencies required by the programs you install.
Performs all extra setup steps: Scoop takes care of any additional configuration steps needed to ensure the installed program functions correctly.

Furthermore, Scoop downloads and manages packages in a portable way, neatly isolating them within the ~\scoop directory. It doesn't install files outside its designated home, providing a clean and organized installation process. Additionally, you can place a Scoop installation anywhere you prefer on your system.

To install Scoop, execute the following command:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser # Optional: Needed to run a remote script the first time
irm get.scoop.sh | iex

With Scoop installed, you now have a powerful package manager at your fingertips, making it easy to install and manage your favorite programs from the command line.

I created a script to install some commonly packages that are typically included in a new development machine setup. These packages cover a range of categories, including version control, utilities, graphics, collaboration, editors, browsers, development tools, office suites, gaming, music, and fonts.

# Git
scoop install main/git

# Add the extra buckets
scoop bucket add extras
scoop bucket add versions
scoop bucket add java
scoop bucket add nerd-fonts

# Update Scoop Buckets
scoop update

# Java
scoop install java/oraclejre8

# Utils
scoop install main/7zip extras/totalcommander extras/powertoys extras/obs-studio extras/vlc extras/rufus

# Graphics
scoop install extras/xnviewmp extras/paint.net

# Colaboration
scoop install extras/slack extras/discord

# Editors
scoop install extras/notepadplusplus

# Browsers
scoop install versions/firefox-developer extras/brave

# Dev Tools
scoop install versions/vscode-insiders extras/windows-terminal extras/postman extras/robo3t extras/dbeaver

# Office
scoop install extras/wpsoffice extras/foxit-reader

# Gaming
scoop install versions/steam

# Music
scoop install extras/aimp

# Fonts
scoop install nerd-fonts/FiraCode-NF-Mono

These are just a selection of packages, and you can customize this list based on your specific requirements and preferences. Here's a breakdown of the packages I install:

Git: Version control system for tracking changes in source code.

7-Zip: File compression and decompression utility.

Total Commander: File manager with a dual-pane interface and various advanced features.

PowerToys: Set of utilities that enhance Windows functionality and productivity.

OBS Studio: Open-source software for video recording and live streaming.

VLC: Multimedia player that supports a wide range of audio and video formats.

Rufus: Utility for creating bootable USB drives.

XnView: Image viewer and organizer with support for various file formats.

Paint.NET: Image and photo editing software with a user-friendly interface.

Slack: Team communication and collaboration platform.

Discord: Voice, video, and text communication platform for gamers and communities.

Notepad++: Feature-rich text editor with support for multiple programming languages.

Firefox Developer Edition: Web browser with developer tools and advanced features.

Brave: Privacy-focused web browser that blocks ads and trackers by default.

Visual Studio Code (Insiders): Lightweight and highly extensible code editor.

Windows Terminal: Modern and customizable terminal application for Windows.

Postman: Collaboration platform for API development and testing.

Robo 3T: MongoDB database management tool.

DBeaver: Universal database tool for managing and exploring database systems.

WPS Office: Office suite with word processing, spreadsheet, and presentation capabilities.

Foxit Reader: PDF reader with features for viewing, editing, and annotating PDF documents.

Steam: Digital distribution platform for video games (It's very important to have time to relax).

AIMP: Audio player with support for various audio formats and customizable interface.

Fira Code (Nerd Font): Monospaced font with programming ligatures.

Feel free to modify this list according to your preferences or specific needs.

You can find the script and other useful configuration files in my configurations repository.

To execute the script open a PowerShell terminal and execute the following command:

irm https://gist.githubusercontent.com/aagamezl/f677266d6cfdcbe41b0e4c5ce7ea68d4/raw | iex

Step 15: Install Docker on WSL2

Docker is a popular containerization platform that allows you to build, distribute, and run applications using lightweight, isolated containers. In this section, we'll guide you through the process of setting up Docker on WSL2 (Windows Subsystem for Linux 2) for a seamless container development experience. We'll cover starting the Docker service, installing Docker Engine, Docker Compose, and Lazydocker. Let's get started!

This command starts the Docker service, allowing you to use Docker commands and interact with containers.

Install Docker

To install Docker Engine on Ubuntu, we'll follow the official Docker documentation. You can find detailed installation instructions here. Open a terminal in your WSL2 Ubuntu distribution and execute the following command:

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

This command installs Docker Engine along with additional plugins required for Docker Buildx and Docker Compose.

Start Docker Service

Before we proceed with the installation, let's ensure that the Docker service is up and running. Open a terminal in your WSL2 Ubuntu distribution and execute the following command:

sudo service docker start

Install Docker Compose

Docker Compose is a tool that simplifies the process of defining and running multi-container Docker applications. To install Docker Compose, execute the following commands:

sudo curl -SL https://github.com/docker/compose/releases/download/v2.17.2/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose

This command downloads the Docker Compose binary and saves it to the /usr/local/bin directory.

sudo chmod +x /usr/local/bin/docker-compose

This command makes the Docker Compose binary executable.

Install Lazydocker

Lazydocker is a terminal-based UI tool that provides a simplified interface for managing Docker containers and services. To install Lazydocker, execute the following command:

curl https://raw.githubusercontent.com/jesseduffield/lazydocker/master/scripts/install_update_linux.sh | bash

This command downloads and installs Lazydocker on your system.

Start the Lazy Docker Manager

Once Lazydocker is installed, you can start it by executing the following command:

lazydocker

This command launches the Lazydocker interface, allowing you to manage your Docker containers and services with ease.

By following these steps, you've successfully set up Docker on your WSL2 Ubuntu distribution. Docker provides a powerful platform for developing and running containerized applications, enabling you to build and deploy software in a consistent and efficient manner.

Conclusion

Congratulations! You've successfully set up your Windows development environment with a powerful set of tools and configurations. Enjoy coding and have fun exploring the possibilities of your new setup!

In this article, we've walked through the process of setting up a Windows development environment that will enhance your productivity and make your coding experience more enjoyable. We covered installing WSL2 with Ubuntu, configuring Zsh as the default shell, setting up Oh My Zsh, Powerlevel10k, and Nerd Font, along with additional tools like NVM and Scoop, Docker and Docker Compose. By following these steps, you've created a robust and customizable development environment on your Windows machine. Happy coding!

If you have any questions or need further assistance, please let me know in the comments section below or message me at Twitter or LinkedIn.

Creating a Multichoice CLI Selector in PowerShell

aagamezl — Mon, 10 Jul 2023 18:45:15 +0000

In this article, we will explore how to create a command-line interface (CLI) multichoice selector in PowerShell. This selector allows users to navigate through a list of options and make multiple selections using the keyboard. We will break down the code provided and explain the relevant parts to understand how it works.

This is how it will look:

Setting Up Terminal Manipulation Functions

Let's start by setting up the terminal manipulation functions that will allow us to control the appearance of the terminal window.

# Function to clear the terminal
function Clear-Terminal {
  $ESC = [char]27
  $hideCursor = "${ESC}[?25l"
  Write-Host -NoNewline $hideCursor # Hide terminal cursor

  [Console]::SetCursorPosition(0, 0)
  [Console]::Clear()
}

# Function to close the terminal
Function Close-Terminal {
  $ESC = [char]27
  $showCursor = "${ESC}[?25h"

  Write-Host -NoNewline $showCursor
}

Here, we have two functions: Clear-Terminal and Close-Terminal. The Clear-Terminal function clears the terminal screen and hides the cursor, while the Close-Terminal function shows the cursor again when we want to exit the script. These functions use escape sequences to hide and show the cursor, respectively. They provide a cleaner and more interactive user experience.

Function to Confirm the Selection and Exit

Next, we have the function responsible for confirming the selected options and exiting the script.

# Function to confirm the selection and exit
function Confirm-Selection {
  $selectedOptions.sort()
  $selectedOptionNames = $selectedOptions | ForEach-Object { $listOptions[$_] }

  Write-Host "`nSelected Options: $($selectedOptionNames -join ", ")`n"

  Close-Terminal

  exit
}

In this function, the selected options are sorted, and their corresponding names are retrieved from the $listOptions array. These selected option names are then displayed using Write-Host. Finally, the Close-Terminal function is called to show the cursor, and the script exits.

Function to Display the List with Selected Options

Now, let's take a look at the function responsible for rendering the list of options on the screen.

# Function to display the list with the selected options
function Display-List {
  Clear-Terminal

  Write-Host "Select option(s) (press spacebar to toggle selection):`n"

  $listOptions | ForEach-Object -Begin { $index = 0 } -Process {
    $isSelected = $selectedOptions.Contains($index)
    $prefix = if ($index -eq $selectedOption.Value) { [char]0x276F } else { " " }
    $checkbox = if ($isSelected) { [char]0x25C9 } else { [char]0x25CB }
    $formattedOption = "$prefix $checkbox $_"

    Write-Host $formattedOption
    $index++
  }
}

This function first calls Clear-Terminal to clear the terminal screen and hide the cursor. Then, it displays the prompt message using Write-Host. Next, it iterates over the $listOptions array using ForEach-Object.

Inside the loop, it checks whether the current option is selected by using $selectedOptions.Contains($index). Based on the selection status, it assigns different values to the $checkbox variable: "[char]0x25C9" (filled circle) if selected or "[char]0x25CB" (empty circle) if not selected. It also assigns a prefix to highlight the currently selected option using "[char]0x276F" (right-pointing arrow) or a space.

After formatting the option string, it is displayed on the screen using Write-Host. Finally, the $index variable is incremented to keep track of the option's index.

Function to Handle Key Press Events

Now, let's explore the function responsible for handling different keypress events.

# Function to handle key press events
function Handle-Key-Press([System.ConsoleKeyInfo]$keyInfo) {
  $key = $keyInfo.Key

  # Perform actions based on the pressed key
  switch ($key) {
    "DownArrow" {
      $selectedOption.Value = (($selectedOption.Value + 1) % $listOptions.Length)
      Display-List($selectedOption.Value, $selectedOptions)
    }

    "UpArrow" {
      $selectedOption.Value = (($selectedOption.Value - 1 + $listOptions.Length) % $listOptions.Length)
      Display-List($selectedOption.Value, $selectedOptions)
    }

    "Spacebar" {
      $currentOption = $selectedOption.Value
      $isSelected = $selectedOptions.Contains($currentOption)

      Write-Host "isSelected: $isSelected"

      if ($isSelected) {
        $optionIndex = $selectedOptions.IndexOf($currentOption)
        $selectedOptions.RemoveAt($optionIndex)
      } else {
        $selectedOptions.Add($currentOption)
      }

      Display-List($selectedOption.Value, $selectedOptions)
    }

    "Enter" {
      Confirm-Selection
    }
  }
}

This function takes a [System.ConsoleKeyInfo] object, $keyInfo, as input, which contains information about the pressed key.

Inside the function, a switch statement is used to perform actions based on the pressed key. Here's what each case does:

DownArrow: Moves the currently selected option one position down in the list. It updates the $selectedOption.Value by incrementing it by 1 modulo the length of the $listOptions array. Then, it calls Display-List to refresh the list on the screen with the new selected option.
UpArrow: Moves the currently selected option one position up in the list. It updates the $selectedOption.Value by decrementing it by 1 and adding the length of the $listOptions array modulo the length of the $listOptions array. This calculation ensures that the index wraps around correctly. Then, it calls Display-List to refresh the list on the screen with the new selected option.
Spacebar: Toggles the selection of the current option. It checks if the current option is already selected by verifying its presence in the $selectedOptions array. If it is selected, it removes it from the array; otherwise, it adds it. Then, it calls Display-List to refresh the list on the screen with the updated selection.
Enter: Confirms the selection by calling the Confirm-Selection function.

These key press events provide the core functionality of the multichoice selector.

Initializing Variables and Displaying the Initial List

Before we start the main script loop, we need to initialize some variables and display the initial list.

# List options
$listOptions = @("Barcelona", "Munich", "Paris", "Turin")

# Selected options
$selectedOptions = New-Object System.Collections.ArrayList

# Current selected option
$selectedOption = [ref]0

# Display the initial list
Display-List($selectedOption.Value, $selectedOptions)

Here, we define the $listOptions array, which contains the available

options to choose from. We also create the $selectedOptions variable as an instance of the System.Collections.ArrayList class to store the indices of the selected options. The $selectedOption variable is initialized as a reference to the currently selected option, starting with the index 0.

After initializing the variables, the initial list is displayed on the screen by calling the Display-List function with the current selection information.

Main Script Loop

Finally, we have the main script loop that continuously waits for keypress events and handles them accordingly.

while ($true) {
  $keyInfo = [System.Console]::ReadKey($true)
  Handle-Key-Press($keyInfo)

  Start-Sleep -Milliseconds 50
}

The loop runs indefinitely (while ($true)) and uses [System.Console]::ReadKey($true) to read a keypress without displaying it on the screen. The obtained [System.ConsoleKeyInfo] object is then passed to the Handle-Key-Press function for further processing.

A short sleep delay of 50 milliseconds is added using Start-Sleep to prevent excessive CPU usage during the loop.

By combining all these functions and the main script loop, we create a CLI multichoice selector in PowerShell that allows users to navigate through options, select or deselect them, and confirm their selections.

Feel free to experiment with the code and enhance it to suit your specific requirements. Happy coding!

# Function to clear the terminal
function Clear-Terminal {
  $ESC = [char]27
  $hideCursor = "${ESC}[?25l"
  Write-Host -NoNewline $hideCursor # Hide terminal cursor

  [Console]::SetCursorPosition(0, 0)
  [Console]::Clear()
}

# Function to close the terminal
Function Close-Terminal {
  $ESC = [char]27
  $showCursor = "${ESC}[?25h"

  Write-Host -NoNewline $showCursor
}

# Function to confirm the selection and exit
function Confirm-Selection {
  $selectedOptions.sort()
  $selectedOptionNames = $selectedOptions | ForEach-Object { $listOptions[$_] }

  Write-Host "`nSelected Options: $($selectedOptionNames -join ", ")`n"

  Close-Terminal

  exit
}

# Function to display the list with the selected options
function Display-List {
  Clear-Terminal

  Write-Host "Select option(s) (press spacebar to toggle selection):`n"

  $listOptions | ForEach-Object -Begin { $index = 0 } -Process {
    $isSelected = $selectedOptions.Contains($index)
    $prefix = if ($index -eq $selectedOption.Value) { [char]0x276F } else { " " }
    $checkbox = if ($isSelected) { [char]0x25C9 } else { [char]0x25CB }
    $formattedOption = "$prefix $checkbox $_"

    Write-Host $formattedOption
    $index++
  }
}

# Function to handle key press events
function Handle-Key-Press([System.ConsoleKeyInfo]$keyInfo) {
  $key = $keyInfo.Key

  # Perform actions based on the pressed key
  switch ($key) {
    "DownArrow" {
      $selectedOption.Value = (($selectedOption.Value + 1) % $listOptions.Length)
      Display-List($selectedOption.Value, $selectedOptions)
    }

    "UpArrow" {
      $selectedOption.Value = (($selectedOption.Value - 1 + $listOptions.Length) % $listOptions.Length)
      Display-List($selectedOption.Value, $selectedOptions)
    }

    "Spacebar" {
      $currentOption = $selectedOption.Value
      $isSelected = $selectedOptions.Contains($currentOption)

      Write-Host "isSelected: $isSelected"

      if ($isSelected) {
        $optionIndex = $selectedOptions.IndexOf($currentOption)
        $selectedOptions.RemoveAt($optionIndex)
      } else {
        $selectedOptions.Add($currentOption)
      }

      Display-List($selectedOption.Value, $selectedOptions)
    }

    "Enter" {
      Confirm-Selection
    }
  }
}

# List options
$listOptions = @("Barcelona", "Munich", "Paris", "Turin")

# Selected options
$selectedOptions = New-Object System.Collections.ArrayList

# Current selected option
$selectedOption = [ref]0

# Display the initial list
Display-List($selectedOption.Value, $selectedOptions)

# Main script
while ($true) {
  $keyInfo = [System.Console]::ReadKey($true)
  Handle-Key-Press($keyInfo)

  Start-Sleep -Milliseconds 50
}

If you have any questions or need further assistance, please let me know in the comments section below or message me Twitter or LinkedIn. Happy coding!.

Changing the GNOME Shell login background

aagamezl — Mon, 13 Apr 2020 20:43:19 +0000

This is my first post on dev.to, and I want to share my experience on this topic, that although it basically looks simple, I always want a little more.

The "problem" is that I was just tired of the boring purple Ubuntu's background login screen, I REALLY was tired of it, so I asked myself, how can I change the login screen background?, and the quick answer was, no you can't change it, the long answer was, well, you can change it, but this involves dealing with the GNOME Shell CSS.

Changing your GNOME Shell login background is not complicated if you know what to change and where to make the change. The change consists of modifying the CSS file with the desired image, but in my case, I wanted to change this image every time that I restart my laptop, and I want to download the daily Bing image to use it as background.

I'm using Ubuntu 19.10, so to change the login background I need to modify the file /usr/share/gnome-shell/theme/Yaru/gnome-shell.css, if you are using another distro or Ubuntu version, please search for the correct path on internet, but my path can give you an idea of where to start looking.

Inside this CSS file, we need to modify the selector #lockDialogGroup from

#lockDialogGroup {
  background: #4f194c url(noise-texture.png);
  background-repeat: repeat; }

#lockDialogGroup {
  background-image: url(file:///path/to/your/image.ext);
  background-repeat: no-repeat;
  background-size: cover;;
  background-position: center; 
}

First at all, I tried to found an easy way to change every day the login background in an automatic way, but changing a CSS file every day is not a trivial task just with bash, and if I made a mistake, all my shell could be broken (trust me, that happened like 5 times while I was making manual tests and fortunately was not broken enough to be able to fix it).

After thinking for a few minutes, I realized that I could create a symbolic link to the daily image and change this symbolic link to point to a different image every day, and use this symbolic link in the CSS file, voilà, the first problem was resolved.

The command to create a symbolic link is the next:

ln -s ./path/to/your/real_file.ext ./path/to/your/fake_file.ext

Let's move on to the next problem, this problem is randomly choosing a daily image, for this, I had to make some internet research because I'm not a bash wizard, but the trick actually is simple, we can use the shuf command, this command "Write a random permutation of the input lines to standard output", great, this looks like the perfect tool for the task, and what can we use as input? well, the perfect tool for this task is ls command.

ls ./the/path/to/your/backgrounds/**/*.ext | shuf -n 30 | shuf -n 1

If you need to select different file types according to the extension, you could use something like this:

ls ./path/**/* | egrep '\.jpg$|\.jpeg$|\.png$|\.gif$' | shuf -n 30 | shuf -n 1

If you are wondering why I use the shuf command twice, this is to achieve a higher level of randomness; first I choose 30 random items and after that, I choose 1 random item from the previous group.

Up to this point, we have almost solved the first part of the problem, we just need to run our script every time our PCs are restarted, for this I decided to use crontab with the @reboot modifier.

@reboot /path/to/your/script.sh

Please don't forget to give your script execution privileges:

sudo chmod +x /path/to/your/script.sh

Now we have all the necessary parts to fulfill the first task, so its time to have a complete script, in my case I put it in /etc/init.d/change-login-background.sh

#!/bin/bash

# General values for the script
SOURCE=./the/path/to/your/backgrounds
DAILY_LOGIN_BACKGROUND=daily-login-background.jpg
VIRTUAL_FILENAME=$SOURCE/$DAILY_LOGIN_BACKGROUND

# Change the extension according to your needs
filename=$(ls $SOURCE/**/*.jpg | shuf -n 30 | shuf -n 1)

# Check if the symbolic link exists, if exists, delete it
if test -f "$VIRTUAL_FILENAME"; then
  rm $VIRTUAL_FILENAME
fi

ln -s $filename $VIRTUAL_FILENAME

echo Daily login background: $filename

Now we are automatically changing the login background every time we restart our PCs, the next step is to download the daily image from Bing. This is not a big problem with Node.js or PHP (my two main backend languages), but I wanted to solve this with bash only, so the complexity of the task was increased.

Again, I'm not a bash wizard, but I'm super stubborn, and I really wanted to solve this problem using just bash and at the same time, learn more about bash programming.

To get the daily Bing exists an endpoint that can give you the last 8 images (or just one) in XML or JSON format, but again, process XML or JSON just with bash tools is not a trivial task, I could just install some extra tools to do it, but not, I wanted to do it just with bash, so after some extra thinking and research, the chosen tool
for the task was... regular expressions.

I know, I know, some people always say that when you have a problem and you solve it using regular expressions, now you have two problems, but in this case, I think it is the right tool for the problem. But how the hell can you use regular expressions in bash?, I was asking me the same, but again after some research, I found that with the sed command you can do it.

So the first step was to download the JSON file, for this CURL come to the rescue:

# Download the JSON file into a variable
json=$(curl -s $BING_IMAGES_URL)

After having the JSON, you just have to get the necessary values:

# Get the url and name from the JSON
image_url=$(echo $json | sed -n 's|.*"url":"\([^"]*\)".*|\1|p')
image_name=$(echo $image_url | sed -n 's|.*?id=\(.*\)&rf.*|\1|p')

And now we can download the image to our PCs using CURL again:

curl -s /path/to/your/images/folder -o /name/of/the/downloaded/image.ext

Now let's put all the pieces together, in my case I put all the code in ./etc/init.d/download-bing-background.sh:

#!/bin/bash

# General values for the script
BING_DOMAIN="https://www.bing.com"
BING_IMAGES_URL="https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1"
DESTINATION=/path/to/your/background/directory
CURRENT_DIRECTORY=$(date +%Y)-$(date +%m)
DOWNLOAD_DIRECTORY=$DESTINATION/$CURRENT_DIRECTORY

echo Image Destination: $DOWNLOAD_DIRECTORY

# Download the JSON file into a variable
json=$(curl -s $BING_IMAGES_URL)

# Get the url and name from the JSON
image_url=$(echo $json | sed -n 's|.*"url":"\([^"]*\)".*|\1|p')
image_name=$(echo $image_url | sed -n 's|.*?id=\(.*\)&rf.*|\1|p')

echo Downloading image of the day: $image_name

# Check if the download directory exists or nor
if [ ! -d $DOWNLOAD_DIRECTORY ]; then
  mkdir $DOWNLOAD_DIRECTORY
fi

# Check if the image already exists
if [ -f $DOWNLOAD_DIRECTORY/$image_name ]; then
  echo Image already exists, skipping.
else
  curl -s $BING_DOMAIN/$image_url -o $DOWNLOAD_DIRECTORY/$image_name
fi

Please don't forget to give your script execution privileges:

sudo chmod +x /path/to/your/script.sh

Ok, this is all folks, I hope you enjoyed and learned how I did by solving this "problem" I had with Ubuntu.

If you have some questions, please send me a message on Twitter.

DEV Community: aagamezl

Introducing Shest: A Test Runner for Bash Scripts

Shest: A Test Runner for Bash Scripts

🚀 Installation

Installation Command:

What the Command Does:

🛠 Usage

🔍 Syntax Overview

📊 Test Results

🌟 Why Use Shest?

How to Create an Engaging Drag and Drop Experience With JavaScript

How to Create an Engaging Drag and Drop Experience With JavaScript

Setting Up the HTML

Styling the Elements

Implementing Drag and Drop

handleDragStart Event

handleDragOver Event

handleDrop Event

Enhancing the User Experience

Conclusion

Supercharge Your Node.js Development with This Starter Configuration

Directory Structure

Exploring the package.json

Let's Start

Step 1: Project Initialization

Activation ES Module System

Step 2: Package Installation

Step 3: Commitizen Configuration

npm Scripts

Additional Configuration Files

Husky Configuration

Creating a Generic Unit Test with Ava

Understanding the Provided Test Scripts

Linting Your Code with Standard

Script: "lint"

Script: "lint:fix"

Generating TypeScript Types using JSDoc and the Benefits of Type Checking

The Benefits of Type Checking

To generate TypeScript types using JSDoc, follow these steps:

Understanding the tsconfig Files

Explaining the npm Scripts

Code Coverage

Understanding the Provided Coverage Scripts

Running the Coverage Scripts

Automating Node.js Continuous Integration with GitHub Actions

Coveralls Integration

Conclusion

Dockerizing Your Node.js Application

Dockerfile

docker-compose.yml

docker-compose.override.yml

Starting our Containers

Windows Development Environment

Step 1: Install WSL2 and Ubuntu

Step 2: Configure WSL

Step 3: Install Zsh

Step 4: Install Oh My Zsh

Step 5: Install Nerd Font

Step 6: Install Powerlevel10k

Step 7: Configure Powerlevel10k

Step 8: Add Aliases to Zsh

Step 9: Set Vim as the Default Git Editor

Step 10: Install NVM

Step 11: Create a Working Space

Step 12: Generate SSH Key for Git Repositories

Step 13: Load tmux on Launch Terminal

Step 14: Install Scoop Application

Step 15: Install Docker on WSL2

Install Docker

Start Docker Service

Install Docker Compose

Install Lazydocker

Start the Lazy Docker Manager

Conclusion

Creating a Multichoice CLI Selector in PowerShell

Setting Up Terminal Manipulation Functions

Function to Confirm the Selection and Exit

Function to Display the List with Selected Options

Function to Handle Key Press Events

Initializing Variables and Displaying the Initial List

`handleDragStart` Event

`handleDragOver` Event

`handleDrop` Event