DEV Community: Gerald Hamilton Wicks

Automate Code Formating with Prettier 🧹

Gerald Hamilton Wicks — Fri, 27 Feb 2026 23:54:39 +0000

How much time have you (or your team) wasted discussing:

“2 spaces or 4?”
“Should we use semicolons?”
“Why is this file formatted differently?”

Let’s fix that once and for all.

Here’s a simple setup using EditorConfig + Prettier that keeps your code clean automatically.

Quick Clarification: EditorConfig vs Prettier

Before we start, let’s clarify the difference between EditorConfig and Prettier. Although they work well together, they solve different problems.

EditorConfig: Defines basic editor rules like indentation style, indentation size, and line endings. It standardizes how your editor behaves.
Prettier: Formats your actual code handling semicolons, quotes, line breaks, object formatting, and more.

In short:
EditorConfig controls the editor.
Prettier controls the code style.

Using both ensures consistency across machines, editors, and the entire team.

1️⃣ Step One: Add EditorConfig

First, install the EditorConfig extension in your IDE. Then create a .editorconfig file at the root of your project:

root = true

[*.{js,ts,jsx,tsx}]
indent_style = space
indent_size = 2

This ensures:

Consistent indentation
Standard formatting rules
No more guessing across machines or editors

2️⃣ Step Two: Install Prettier

Install it as a dev dependency:

npm install prettier --save-dev

Now add these scripts to your package.json:

"scripts": {
  "lint:check": "prettier --check .",
  "lint:fix": "prettier --write ."
}

What this gives you:

✅ npm run lint:check → checks formatting
🔧 npm run lint:fix → fixes everything automatically

🌟 Tip: We can add these commands to the project pipeline later to ensure the rules are always enforced and nothing is missed.

3️⃣ Ignore What Shouldn’t Be Formatted (.prettierignore)

Sometimes you don’t want Prettier to format certain folders (like build outputs). Create a .prettierignore file in the root of your project.

Example:

.next
out

This tells Prettier to ignore those directories. In my case, I added folders that aren’t necessary for my application such as build or generated files to avoid unnecessary processing and noise.

Think of it like .gitignore, but for formatting.

4️⃣ Make It Fully Automatic

Install the Prettier extension in your IDE. Then:

Set Prettier as your Default Formatter
Enable Format On Save

That’s it. Now every time you save a file, it formats itself. No extra commands. No formatting discussions. No messy diffs in PRs.

Example

Before saving:

const getSum = (a, b) => 
  { return a + b }

After saving:

const getSum = (a, b) => {
  return a + b;
};

Clean. Predictable. Consistent.

Why This Matters

When formatting is standardized, your team can focus on what actually matters: Building great software 🚀

Understanding npm Versioning: A Guide to Semantic Versioning and Version Operators

Gerald Hamilton Wicks — Wed, 22 Oct 2025 21:25:42 +0000

Have you ever opened your package.json and wondered what all those numbers and symbols mean? Something like this might look familiar:

"react": "^17.0.2"

At first glance, it might seem like just a version number but there’s more happening here than meets the eye.

Those three numbers (17.0.2) follow a rule called Semantic Versioning, which tells you whether an update includes a small bug fix, a new feature, or a breaking change.

And what about the symbols like ^ or ~ in front of the version number? They’re just as important they control how npm decides which versions to install when you run npm install.

In this article, we’ll explore:

What each part of a version number means (major.minor.patch)
When to bump each version correctly
How to use ^, ~, and exact versions to manage dependency updates safely

By the end, you’ll know exactly what each number and symbol means and how to keep your project dependencies both stable and up to date.

What Is Semantic Versioning?

npm follows a system called Semantic Versioning (SemVer), where version numbers are divided into three parts separated by dots:

major.minor.patch

Using the react example ("react": "^17.0.2"):

Major version: 17
Minor version: 0
Patch version: 2

Each part has a specific purpose in describing how the package has changed.

Patch Version

The patch number increases when backward-compatible bug fixes are released.

✅ When to bump the patch:

Fixing small bugs
Patching security issues
Making internal improvements that don’t change the API

Example:

Before:

import { sumNumbers } from 'my-package';

After a patch update, the internal behavior of sumNumbers might be improved but the way you use it stays the same.

Minor Version

The minor number increases when new features are added in a backward-compatible way.

✅ When to bump the minor:

Adding new functions or options
Improving performance
Enhancing features without breaking existing code

Example:

Before:

import { sumNumbers } from 'my-package';

After a minor update:

import { sumNumbers, subtractNumbers } from 'my-package';

You gain a new feature (subtractNumbers), while existing code remains functional.

Major Version

The major number increases when breaking changes are introduced.

⚠️ When to bump the major:

Removing or renaming functions
Changing APIs or arguments
Modifying behavior in a way that requires updates to your code

Example:

Before:

import { sumNumbers } from 'my-package';

After a major update:

import { addNumbers } from 'my-package';

Since the function name changed, users must modify their code signaling a breaking change.

Version Operators in npm

When declaring dependencies in package.json, symbols like ^, ~, or no symbol define how npm handles version updates.

Caret (`^`)

Allows updates that do not change the leftmost non-zero version number typically minor and patch updates.

Example:

^4.13.6

✅ Can update to: 4.14.0, 4.99.9
❌ Cannot update to: 5.0.0

Use case: Great balance between stability and receiving improvements.

Tilde (`~`)

Allows updates to the patch version only, within the specified minor version.

Example:

~4.13.6

✅ Can update to: 4.13.7, 4.13.9
❌ Cannot update to: 4.14.0

Use case: Ideal when you want to lock features but still get bug fixes.

Exact Version (no symbol)

Locks the dependency to one specific version.

Example:

4.13.6

✅ Always installs exactly version 4.13.6
❌ Will not update automatically

Use case: Maximum stability perfect for production-critical systems.

Summary

Symbol	Allows Updates To	Typical Use Case
`^`	Minor and patch versions (same major)	Accepts new features and fixes safely
`~`	Patch versions only (same minor)	Prioritizes stability with small updates
Exact	No updates	Ensures total consistency

In short:
Semantic versioning helps you understand what changed, while version operators control how updates happen. Together, they form the foundation of predictable and maintainable dependency management in npm.

5 React Tricks to Improve Code Quality and Performance

Gerald Hamilton Wicks — Fri, 20 Dec 2024 00:37:41 +0000

React is a powerful JavaScript library for building user interfaces, and with just a few tricks, you can write cleaner, more efficient, and maintainable code. In this article, we'll explore five essential React tricks that will help you write more performant and readable code.

1. Use Ternary Operators Instead of AND (`&&`) Operators to Render Elements

In React, it’s common to conditionally render components or elements based on certain conditions. However, using the && operator for conditional rendering can be tricky when the evaluated expression results in a falsy value (e.g., false, null, undefined, 0, or ''). To avoid unintended rendering behavior, prefer using a ternary operator.

Example of `&&` Behavior:

Using && in conditional rendering:

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

The first example ({0 && <h1>Hello world 5</h1>}) will render 0 in the UI because 0 is a falsy value in JavaScript, and React will interpret this as false. However, instead of rendering nothing, React will render the falsy value (0) itself.
The second example ({0 ? <h1>Hello world 6</h1> : null}) will render nothing. Since the condition is 0 (which is falsy), the ternary operator will evaluate to null, and React will not render anything.

Better Approach with Ternary Operator:

Instead of relying on the && operator, you can use a ternary operator to ensure you render the correct fallback content, especially when the condition is falsy.

{0 ? <h1>Hello world 5</h1> : null}

In this case, if the condition is falsy (0), React will render null, which results in nothing being rendered, providing more predictable and intended behavior.

2. Lazy Initializer with `useState`

React’s useState hook can take a function as its initial value, allowing you to lazily initialize the state. This is particularly useful when the initial state is expensive to compute or when it depends on some computation that should only run once.

Why Use Lazy Initialization?

Performance Improvement: If the initial state involves expensive computations or data fetching, lazy initialization helps to defer that cost until it is actually needed.
Avoid Unnecessary Computations: The function you pass to useState as the initial value will only be executed once during the component mount, and it won’t be recomputed during subsequent renders.

Example:

import React, { useState } from 'react';

const ExpensiveComponent: React.FC = () => {
  const [count, setCount] = useState(() => {
    // Expensive computation
    console.log('Computing initial state');
    return Math.random(); // For example, generate a random number
  });

  return <div>Initial Random Value: {count}</div>;
};

export default ExpensiveComponent;

In this example:

useState(() => Math.random()) will call the function only once, on the initial render.
This ensures that the random number generation only occurs once, improving performance if the computation was expensive.

3. Use Lazy Load Components to Improve Performance

React's React.lazy() and Suspense are great tools for lazy loading components, which helps split your JavaScript into smaller bundles and loads them only when needed. This significantly reduces the initial load time and improves the performance of your app.

Example:

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

In this example:

React.lazy() allows you to dynamically import LazyComponent.
The Suspense component is used to display a loading state until the lazy-loaded component is fully rendered.

By using lazy loading, your app will only load the components necessary for the initial render and fetch others on-demand, enhancing performance, especially in large applications.

4. Using Optional Chaining in JavaScript

If you're working with JavaScript, optional chaining (?.) is a lifesaver when accessing deeply nested properties on objects. It prevents errors that occur when trying to access properties of undefined or null. Optional chaining is available in modern JavaScript and allows you to safely access properties without having to manually check for null or undefined.

Example:

function MyComponent({ data }) {
  const address = data?.info?.address ?? "Address not available";
  return <div>{address}</div>;
}

In this example:

data?.info?.address safely accesses the address property without throwing an error if data or info is undefined or null.
The ?? operator provides a default value if address is undefined.

Without optional chaining, you’d need to manually check each level, which can quickly lead to cluttered and harder-to-read code. Optional chaining keeps it clean and error-free.

5. Use `useRef` for Forms to Avoid Re-renders

In React, when working with forms and you don’t need the component to re-render on each input change, it's better to use useRef instead of useState. useRef stores the value of the input field directly and does not trigger a re-render when the value changes, making it more performant for large forms.

Example:

import React, { useRef } from 'react';

const MyForm: React.FC = () => {
  const nameRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    if (nameRef.current) {
      alert(`Name: ${nameRef.current.value}`);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={nameRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

In this TypeScript example:

useRef is used to keep track of the input value without causing the component to re-render on every input change.
nameRef.current is used to directly access the input’s value when the form is submitted.

Using useRef is particularly useful when the form value does not need to trigger re-renders for validation or dynamic updates, making it an excellent choice for performance-sensitive forms.

Conclusion

By applying these five React tricks in your code, you can significantly improve performance, readability, and maintainability. Here’s a quick recap:

Use ternary operators for conditional rendering instead of &&.
Take advantage of lazy initialization in useState.
Implement lazy loading for components to improve initial load times.
Use optional chaining for safer property access in JavaScript.
Use useRef in forms to avoid unnecessary re-renders.

With these techniques, your React applications will be more efficient and easier to maintain, leading to better user experiences and smoother development. Happy coding!

Interface vs Type in TypeScript

Gerald Hamilton Wicks — Thu, 14 Nov 2024 23:14:43 +0000

TypeScript is a robust language that adds static typing to JavaScript, bringing a new level of reliability and maintainability to code. By enabling type definitions, TypeScript enhances the development experience, making code easier to debug and read. Among its many features, TypeScript provides both interface and type constructs to define the shape of data—whether it's a variable, object, or class. While they share similarities, each has unique strengths, and knowing when to use one over the other can make your code even cleaner and more efficient.

Interface

Introduced in the earliest versions of TypeScript, interface was inspired by object-oriented programming (OOP) concepts. It allows you to define object shapes in a straightforward way and provides a first-class construct for creating reusable, extendable object types.

Basic Interface Example

interface Car {
    brand: string;
    color: string;
}

Interface Inheritance

One of the main strengths of interfaces is inheritance. An interface can extend other interfaces, making it easy to build on existing structures.

interface Person {
    name: string;
}

interface User extends Person {
    age: number;
}

const user: User = { name: 'Gerald', age: 30 };

Interface for Classes

Interfaces are also a great choice for defining the structure or "contract" of a class, specifying the methods and properties a class should have.

interface Printable {
    print: () => void;
}

class Cart implements Printable {
    print() {
        console.log('Item has been added.');
    }
}

Interface Declaration Merging

Interfaces can be merged—when multiple interfaces with the same name are declared in the same scope, they merge into one. This can be helpful, but overusing it can lead to complexity.

interface User {
    name: string;
}

interface User {
    age: number;
}

const user: User = { name: 'Gerald', age: 30 };

Note: Use declaration merging cautiously. Excessive merging can make interfaces hard to understand and debug due to unintended side effects.

Type

As an alternative to interfaces, TypeScript also provides the type keyword, which is more flexible and can represent a variety of types, not just objects. With type, you can define unions, intersections, and even alias primitive types.

Union Types with Type

For instance, type allows for union types, which is something interfaces cannot handle.

type Id = string | number;

Type Declaration Restrictions

Unlike interfaces, types do not support declaration merging. Attempting to redeclare a type will cause an error.

type User = {
    name: string;
};

// Error: Duplicate identifier 'User'
type User = {
    age: number;
}

Type Composition

type is also ideal for composing new types from existing ones, making it a powerful tool for defining complex data structures.

type User = {
    name: string;
    age: number;
    address: string;
};

type PartialUser = Partial<User>;
const partialUser: PartialUser = {
    name: 'Gerald',
    age: 30
};

type NameOnly = Pick<User, 'name'>;
const nameOnly: NameOnly = {
    name: 'Gerald'
};

When Should You Use Each?

Use interface when defining the structure of objects and classes, as they offer better flexibility with inheritance and work seamlessly with TypeScript’s type-checking.
Use type for unions, intersections, primitive type aliases, or when you need to create complex, reusable types.

Conclusion

Both interface and type bring valuable capabilities to TypeScript. By understanding the strengths of each, you can choose the right tool for every situation, making your code cleaner, more understandable, and easier to maintain. Embrace the power of TypeScript’s typing system, and enjoy the clarity and safety it brings to your projects!

5 Essential Software Metrics for Quality Assurance

Gerald Hamilton Wicks — Thu, 24 Oct 2024 22:50:19 +0000

As Peter Drucker famously said, “You can’t manage what you don’t measure.” This holds especially true in software development. If you want to track and improve the quality of your software, you need a way to measure it. Software metrics provide the data you need to understand and manage your software’s quality.

With that in mind, I’ve put together 5 essential software metrics to help you ensure the quality of your product.

1. Defect Density

Defect Density measures the number of defects relative to the size of your software. Defects are errors identified by testers before release, representing unmet user requirements. If undetected, these defects can lead to failures in the hands of end users.

This metric is crucial for assessing code quality and estimating the effort required for corrections. High-quality code requires fewer fixes and is easier to maintain, scale, and improve.

Tip: Encourage your team to learn from the defects they introduce or miss in testing. This continuous improvement helps elevate both code quality and testing practices.

Formula:

[ Number of Defects ] / ([ Total Lines of Code ] / 1,000)

Example:

10 defects in 20,000 lines of code = Defect Density of 0.5 per 1,000 lines.

2. Customer Satisfaction (CSAT)

Customer Satisfaction (CSAT) gauges how users feel about your product. It’s derived from survey data, where customers rate their satisfaction on a scale from “extremely satisfied” to “extremely unsatisfied.”

A high CSAT reflects a positive user experience and signals that your software meets customer expectations.

Formula:

[ Number of Satisfied Customers ] / [ Total Survey Responses ] * 100

Example:

If 53 out of 100 customers rate their experience as “satisfied” or “extremely satisfied,” your CSAT score is 53%.

3. Code Coverage

Code Coverage tracks the percentage of your code that is covered by unit tests. These tests, written by developers, help catch bugs early in the development process and prevent future system failures.

A higher code coverage means better-tested, more reliable code. Aim to cover every line of code with unit tests to ensure that all use cases are considered.

Formula:

[ Lines of Code Tested ] / [ Total Lines of Code ] * 100

Example:

If 9,500 out of 10,000 lines are covered by tests, your code coverage is 95%.

4. Mean Time to Resolve (MTTR)

MTTR measures how quickly your team can resolve issues after they’re identified. It’s typically measured in hours or minutes during normal working hours.

A low MTTR indicates that your team is able to fix issues quickly, contributing to better overall software stability. However, this can vary based on the severity of the issue and the expertise of your developers.

To improve MTTR, focus on maintaining well-structured code, following best practices, and ensuring robust internal documentation. Implementing better diagnostic tools can also help speed up issue resolution.

Formula:

[ Total Time from Detection to Resolution ] / [ Number of Issues Resolved ]

Example:

If 96 issues took a total of 2,880 minutes to resolve, your MTTR is 30 minutes per issue.

5. Mean Time Between Failures (MTBF)

MTBF calculates the average time between system failures. Failures are errors that occur post-release, often stemming from undetected defects.

A higher MTBF means your software is more reliable, which is critical in industries like healthcare and aeronautics. If your MTBF decreases, it could indicate a systemic problem, such as rushed development or poor planning.

Addressing low MTBF requires examining whether failures stem from a single issue or multiple problems. You may need to revisit your team's workflow to ensure that testing, scoping, and planning are aligned with quality goals.

Formula:

[ Total Operating Time ] / [ Number of Failures ]

Example:

If your software ran for 3,000 hours and experienced 15 failures, your MTBF is 200 hours.

Conclusion

By tracking these key metrics—Defect Density, Customer Satisfaction, Code Coverage, MTTR, and MTBF you gain critical insights into your software’s quality. Managing quality isn't just about fixing bugs, it’s about continuous improvement and ensuring that your product meets both user expectations and technical standards.

Use these metrics to guide your team towards building more reliable, maintainable, and user-friendly software.

Override and Mock Network Responses in DevTools

Gerald Hamilton Wicks — Sat, 12 Oct 2024 13:10:09 +0000

When it comes to diagnosing issues in a production environment, there’s often a lot at stake. A buggy API call, a third-party script that’s dragging performance, or an unintentional mistake in the data pipeline can quickly create major problems. Thankfully, with Chrome DevTools, you can test and verify solutions locally before releasing any changes to the wild. One of the most powerful yet underutilized tools in DevTools is the Override feature. It allows you to modify network responses directly, letting you simulate various scenarios without altering your production environment.

In this guide, we’ll show you how to install DevTools (if you haven’t already), how to override network requests step by step, and provide tips on getting the most out of this invaluable tool.

Why Use Network Overrides?

Imagine being able to tweak the response of an API or simulate a failed network request, all without touching the backend code or affecting your users. That’s exactly what network overrides empower you to do. Whether you’re trying to:

Test different scenarios for slow or failed network requests.
Verify new features before their backend is ready.
Modify static resources (like CSS or JavaScript files) to debug styling or behavior issues.

DevTools gives you a controlled environment where you can adjust, experiment, and validate—all within the browser.

Installing Chrome DevTools

If you're a web developer, you likely already have Google Chrome installed on your machine. But if you haven’t set it up yet, download it from the official Chrome site. Chrome DevTools comes built into the browser, so you’ll be ready to go once it’s installed.

Pro Tip: DevTools also works in other Chromium-based browsers like Edge, Brave, and Opera, although Chrome tends to have the most up-to-date features.

Getting Started with DevTools Network Overrides

If you’re new to DevTools or this feature, follow these simple steps:

1. Open DevTools

Right-click on any element of your webpage and select Inspect. This will bring up the DevTools interface. Alternatively, you can press Ctrl + Shift + I (Windows/Linux) or Cmd + Option + I (Mac) to open it.

2. Navigate to the Network Tab

Once DevTools is open, click on the Network tab. Here, you’ll see a live feed of every network request that your website makes. From API calls to image loading, everything is logged and trackable in this tab. If the list seems overwhelming, you can use filters (like XHR for AJAX requests) to narrow down the view to the most relevant requests.

3. Identify and Override a Specific Request

Scroll through the list of requests to find the one you’d like to modify. For example, if an API is returning an incorrect result or a third-party script is misbehaving, this is where you can intervene. Right-click on the desired request and select Override Content.

If this is your first time using the feature, you’ll be prompted to select a local folder to store your overrides. This folder will contain all your changes, making it easy to revert to the original files later.

4. Edit the Response

Once you’ve selected your local folder, the response you want to override will automatically open in the Sources tab. This is where you can modify the content as needed. Whether it’s tweaking a JSON response, adjusting a JavaScript function, or modifying an HTML file, you’re free to make the necessary changes.

Pro Tip: Be cautious when modifying large files, especially third-party libraries, as they may contain critical functions. Focus on specific sections to avoid unintended consequences.

5. Save and Refresh

Once you’ve made your edits, save the file by pressing Ctrl + S (Windows/Linux) or Cmd + S (Mac). Then, refresh your webpage. The changes will now be reflected in your local environment, allowing you to test the modified network request as if it were live.

Pro Tip: Remember, these changes only apply to your local environment. If you close the browser or clear the overrides, the original requests will resume.

Advanced Tips for Power Users

While the steps above outline the basics of overriding network responses, Chrome DevTools offers even more flexibility for those looking to push their debugging to the next level:

Simulating Network Conditions

Chrome DevTools also allows you to simulate different network conditions. For instance, if you want to test how your application behaves on a slow 3G connection or when the network is temporarily unavailable, you can throttle the network speed under the Network tab. Simply click the drop-down menu labeled Online and choose the desired speed profile.

This is particularly useful for ensuring your app degrades gracefully when users have poor connectivity or limited bandwidth.

Local Overrides for Multiple Files

Need to override multiple files at once? You can add multiple requests to your override folder, giving you complete control over several aspects of your website. For example, you can combine CSS, JavaScript, and API response overrides to create a simulated environment that mirrors potential real-world scenarios, all without changing a single line of production code.

Persisting Overrides Across Sessions

If you frequently work on the same project, Chrome DevTools allows you to persist your overrides across browser sessions. This ensures that even after closing the browser, your changes remain active the next time you open it, saving you time and effort.

To enable this, go to the Settings menu (gear icon) in DevTools, navigate to the Overrides section, and check the box that says Enable persistent overrides.

Conclusion

Chrome DevTools isn’t just for inspecting elements or debugging JavaScript errors, it’s an incredibly powerful tool that can significantly enhance your ability to troubleshoot and experiment in a live environment. By learning to override and mock network responses, you can test out different solutions, simulate various scenarios, and validate changes all without impacting your production site.

Whether you’re a seasoned developer or just starting, mastering the Override feature in Chrome DevTools will level up your debugging skills and give you more confidence in the changes you make before they go live. So, don’t just debug—debug smarter!

How to Create a Live Preview of Your Local App Quickly

Gerald Hamilton Wicks — Sat, 05 Oct 2024 11:20:11 +0000

Before deploying changes to production, it's common to have a dedicated environment where developers, QA testers, designers, and others can check how the system is behaving. However, there are times when you just want to quickly share your local changes without the hassle of deploying to a separate environment. Maybe you need a designer to review a component you just built to make sure it looks perfect, or perhaps you want to test your app on a different device, like a mobile phone or tablet.

Wouldn't it be amazing if you could spin up a live environment directly from your local server, without all the fuss of setting up a staging area or waiting on deployment pipelines? Well, you're in luck! In this tutorial, I'm going to show you how to create a live environment using Dev Tunnels, so you can share your local changes effortlessly.

What Are Dev Tunnels?

Dev Tunnels is a powerful tool that lets developers securely share their local web services across the internet. Imagine connecting your local development environment to the cloud, sharing work-in-progress with your teammates, or even testing webhooks, all without moving a muscle (well, maybe one or two). 🚀

It's important to note that Dev Tunnels is meant for development and testing purposes only, not for production workloads.

Setting Up Dev Tunnels

Let’s dive in! To get started, we’ll need to install the DevTunnel CLI (Command Line Interface) tool. I’ll be focusing on the Linux installation for this tutorial, but don’t worry—if you’re using a different operating system, you can check out the official installation guide.

Here’s how to install it on Linux:

curl -sL https://aka.ms/DevTunnelCliInstall | bash

After installation, be sure to close and reopen your terminal so you can start using the devtunnel commands right away.

Logging into Your Account

Before you can create a dev tunnel, you’ll need to log in using either a Microsoft Entra ID, Microsoft Account, or GitHub Account. Unfortunately, hosting tunnels anonymously isn’t supported at this time. Don’t worry—it’s a quick step!

Simply run:

devtunnel user login

And voilà, you’re in!

Creating Your Live Environment

Now that you're logged in, it’s time to create your live environment. First, make sure your application is running locally. For this example, I’ll assume my app is running on port 5500, but you'll need to replace that with your app’s actual port.

Run the following command to host your local server:

devtunnel host -p 5500

Be sure to replace 5500 with your app's port number. Once you run this command, you’ll see a log output similar to this:

Hosting port: 5500
Connect via browser: https://t64f7c1f.brs.devtunnels.ms:5500 
Inspect network activity: https://t64f7c1f-5500-inspect.brs.devtunnels.ms
Ready to accept connections for tunnel: tidy-fog-hjzvgvk

✨ Boom! Just like that, your environment is live! You can now access your local environment from anywhere using a URL like https://t64f7c1f.brs.devtunnels.ms:5500.

Note: By default, for security reasons, only you (logged into Dev Tunnel) can access this environment. Pretty neat, right?

Going Public: Sharing Your Environment with Others

Need to share your work with others, like teammates or clients? No problem! If your application doesn’t contain sensitive information, you can make your environment public. To do that, use the --allow-anonymous flag in the command:

devtunnel host -p 5500 --allow-anonymous

After running the command, you’ll see another log message similar to the previous one, with your live URL ready to share with anyone who needs it.

Hosting port: 5500
Connect via browser: https://t64f7c1f.brs.devtunnels.ms:5500 
Inspect network activity: https://t64f7c1f-5500-inspect.brs.devtunnels.ms
Ready to accept connections for tunnel: tidy-fog-hjzvgvk

Now, anyone with the link can check out your application—no login required!

For additional security, if needed, you can limit access to specific Microsoft Entra tenants or GitHub organizations using the appropriate flags (--tenant or --organization). Be sure to check out the official documentation for more details on advanced security settings.

Wrapping It Up

And there you have it! With Dev Tunnels, sharing your local environment has never been easier. No more waiting on deployment pipelines, no more setting up complicated environments—just quick, seamless collaboration. Whether you’re testing your app on a different device or showing off your latest UI work to your design team, Dev Tunnels makes it all possible in a flash.

How to Create TypeScript Documentation Websites

Gerald Hamilton Wicks — Sat, 28 Sep 2024 14:08:39 +0000

When you're building a TypeScript project, it's crucial to document your code for better understanding and collaboration with other developers. Documentation ensures that anyone working on or reviewing your code, especially those unfamiliar with certain aspects, can easily follow along.

Luckily, there are tools that can help you create professional documentation websites with just a few commands. In this guide, we’ll walk through the steps of creating documentation websites using TypeDoc.

Step 1: Add TSDoc to Your TypeScript Project

Before using TypeDoc, you need to incorporate TSDoc into your code. TSDoc is a standard for writing documentation comments in TypeScript, enabling tools like TypeDoc to extract and generate accurate documentation.

Here’s an example of what TSDoc comments look like:

/**
 * Returns the average of two numbers.
 * 
 * @param x - The first input number
 * @param y - The second input number
 * @returns The arithmetic mean of `x` and `y`
 */
public static getAverage(x: number, y: number): number {
    return (x + y) / 2.0;
}

If you're unfamiliar with TSDoc, it's worth reading the official documentation to get a deeper understanding.

Step 2: Install TypeDoc

Once you've added TSDoc comments to your project, it's time to install TypeDoc, the tool that will generate the documentation website. Run the following command in your terminal:

npm i typedoc --save-dev

This installs TypeDoc as a development dependency in your project.

Step 3: Add a Script to Generate Documentation

After installing TypeDoc, you can create a script to generate your documentation website. TypeDoc will look for your tsconfig.json file automatically, so you just need to specify the entry point of your project.

Edit your package.json and add the following script under the scripts field (replace src/index.ts with your actual entry point):

{
  "scripts": {
    "generate-docs": "typedoc src/index.ts"
  }
}

Customizing Documentation Generation

You can customize the documentation generation using TypeDoc's command-line arguments. For a full list of options, run typedoc --help or check out the TypeDoc documentation.

Here are a few useful options:

--out <path/to/documentation/>: Defines where the documentation will be generated. By default, it’s written to ./docs.
--json <path/to/output.json>: Generates a JSON file describing the project. No HTML documentation is created unless --out is also specified.
--options <path/to/options.json>: Specifies a JSON configuration file for TypeDoc options.
--tsconfig <path/to/tsconfig.json>: Manually specify the TypeScript config file. TypeDoc will automatically look for tsconfig.json if not provided.
--exclude <pattern>: Exclude specific files or patterns from the documentation.

Step 4: Generate Your Documentation Website

Once your script is set up, you can generate your documentation by running the following command:

npm run generate-docs

TypeDoc will create a folder called docs in the root of your project. This folder contains all the necessary files for your documentation website.

Step 5: View the Documentation Website

After generating the documentation, open the docs folder, which will contain an index.html file—the entry point of your website.

To view your documentation:

Double-click the index.html file to open it in your browser.
Alternatively, copy the file path into your web browser’s address bar.

You’ll see a homepage similar to this:

The homepage typically displays your project’s README.md, with a sidebar listing all your project’s functions and classes. For example, here's the documentation for the isBoolean function from my project type-guards-ts:

Conclusion

By following these steps, you’ll create a fully functional documentation website for your TypeScript project, making it much easier for others to understand, navigate, and contribute. Proper documentation isn't just a good practice—it's essential for ensuring your project's long-term success.

While TypeDoc is a powerful tool, there are other packages that offer similar functionality, like TSDoc, Compodoc, and @microsoft/tsdoc. Each has its own strengths, so it’s worth exploring them to see which one fits your project best.

But enough from me I’d love to hear from you! Have you used any of these tools to generate documentation? Share your experiences in the comments below! 😄

How to Deploy a JavaScript Library to npm in 5 Minutes

Gerald Hamilton Wicks — Fri, 20 Sep 2024 00:31:58 +0000

How to Deploy a JavaScript Library to npm in 5 Minutes

One of the wonderful aspects of JavaScript is its vibrant community. You have the opportunity to leverage libraries created by others or create your own and share them with the world. In this article, we'll dive into how to create your first library from scratch and deploy it to npm in just five minutes!

Step 1: Starting Your Package

Create a New Folder: Begin by creating a new folder for your project. Open your code editor of choice in this directory.
Initialize npm: Open the terminal and run the following command:
```
npm init -y
```

This command will generate a package.json file. Open this file and change the value of the "name" field. By default, it will look like this:

"name": "test"

You can change it to "light-fibonacci" (or any name of your choice). Feel free to update other fields in package.json such as "description", "author", and "license" according to your needs.

Step 2: Creating Your Library

Inside your package.json, you will notice the following field:

"main": "index.js"

This means your library will be loaded through index.js. To ensure everything works properly, create a file named index.js in the same directory as your package.json. To enable ES modules in your package, add the following field to package.json:

"type": "module"

Step 3: Adding Some Logic

Now it's time to add some functionality to your library. In this example, we'll create a function called fibonacci that returns the Fibonacci number for a given input n:

export function fibonacci(n) {
    const fibNumbers = [0, 1, 1];

    if (n <= 0) {
        throw new Error(`${n} should be bigger than 0.`);
    }

    if (n <= 3) {
        return fibNumbers[n - 1];
    }

    for (let i = 3; i < n; i++) {
        fibNumbers[0] = fibNumbers[1]; 
        fibNumbers[1] = fibNumbers[2];
        fibNumbers[2] = fibNumbers[0] + fibNumbers[1];
    }            

    return fibNumbers[2];
}

Step 4: Testing Your Library Locally

Before deploying your library, it’s essential to test it. Here’s how you can do that:

Link Your Package: In the root of your library folder, run:
```
npm link
```
Test in Another Project: Open another project where you want to test your package. In that project’s root directory, run:
```
npm link light-fibonacci
```

Import and Use: Now, you can import the function in a file within your test project:

import { fibonacci } from "light-fibonacci";

const fibonacciNumber = fibonacci(10);

// rest of the code

If everything works as expected, congratulations! Your package is functioning correctly.

Step 5: Publish Your Package to npm

Login to npm: Go back to your package folder and open the terminal. Run:
```
npm login
```

Enter your npm username and password (if you don’t have an account, you’ll need to create one).

Publish Your Package: Now, you can publish your package with the command:
```
npm publish
```
Check Your Package: Visit the npm packages page in your account to see your newly published package. You can also access it directly via the URL:

   https://www.npmjs.com/package/light-fibonacci

Just replace "light-fibonacci" with your package name.

Step 6: Package Usage

Now that your library is published, you can install it directly from npm. In any project where you want to use it, run:

npm install light-fibonacci

Your package is now installed and ready for use!

Conclusion

Congratulations! You've just created and published your first JavaScript library to npm. With just a few simple steps, you can share your work with the world and contribute to the vibrant JavaScript community.

We’d love to hear from you! What challenges did you face while creating your library? Do you have any tips or suggestions for others looking to publish their own packages? Share your thoughts in the comments or reach out directly. Happy coding!

Essential Guide to Refactoring Code for a Cleaner and Polished Design

Gerald Hamilton Wicks — Thu, 12 Sep 2024 22:54:20 +0000

In the fast-paced world of software development, writing clean and maintainable code is essential. Inspired by Uncle Bob's "Clean Code," we’ll delve into five crucial refactoring principles to enhance your codebase. Each principle is accompanied by TypeScript code examples demonstrating how to implement these improvements. Let's refine our code together!

1️⃣ Say No to Big Functions

Explanation: Uncle Bob advises keeping functions concise, ideally under 20 lines. Large functions can be challenging to understand, test, and maintain. By breaking functions into smaller, more manageable pieces, you improve readability and reduce complexity.

Before Refactoring:

import fs from 'fs';

function processData(data: string[]): void {
    // Step 1: Validate data
    if (!Array.isArray(data)) {
        throw new Error("Input must be an array");
    }

    // Step 2: Clean data
    const cleanedData = data.map(item => item.trim()).filter(item => item !== '');

    // Step 3: Process data
    const result: string[] = [];
    for (const item of cleanedData) {
        if (item.length > 5) {
            result.push(item.toUpperCase());
        } else {
            result.push(item.toLowerCase());
        }
    }

    // Step 4: Save results
    fs.writeFileSync('results.txt', result.join('\n'));
}

After Refactoring:

import fs from 'fs';

function validateData(data: any): void {
    if (!Array.isArray(data)) {
        throw new Error("Input must be an array");
    }
}

function cleanData(data: string[]): string[] {
    return data.map(item => item.trim()).filter(item => item !== '');
}

function processItem(item: string): string {
    return item.length > 5 ? item.toUpperCase() : item.toLowerCase();
}

function saveResults(results: string[], filename: string = 'results.txt'): void {
    fs.writeFileSync(filename, results.join('\n'));
}

function processData(data: string[]): void {
    validateData(data);
    const cleanedData = cleanData(data);
    const results = cleanedData.map(processItem);
    saveResults(results);
}

2️⃣ Embrace Single Responsibility

Explanation: Each class or method should have a single responsibility. This means that each class or method should do one thing and do it well. Adhering to this principle makes your code more modular, easier to test, and more flexible to change.

Before Refactoring:

class User {
    constructor(public username: string, public email: string) {}

    sendEmail(message: string): void {
        // Code to send an email
        console.log(`Sending email to ${this.email}: ${message}`);
    }

    saveToDatabase(): void {
        // Code to save user to the database
        console.log(`Saving ${this.username} to the database`);
    }
}

After Refactoring:

class User {
    constructor(public username: string, public email: string) {}
}

class EmailService {
    sendEmail(email: string, message: string): void {
        // Code to send an email
        console.log(`Sending email to ${email}: ${message}`);
    }
}

class UserRepository {
    save(user: User): void {
        // Code to save user to the database
        console.log(`Saving ${user.username} to the database`);
    }
}

3️⃣ Simplify Parameter Passing

Explanation: Limiting the number of parameters a function accepts makes it easier to understand and use. Complex functions with many parameters can be confusing and prone to errors. By using objects or data structures, you can group related parameters together.

Before Refactoring:

function createUser(username: string, email: string, password: string, age: number, address: string): void {
    // Code to create a user
    console.log(`Creating user: ${username}, ${email}, ${password}, ${age}, ${address}`);
}

After Refactoring:

interface User {
    username: string;
    email: string;
    password: string;
    age: number;
    address: string;
}

function createUser(user: User): void {
    // Code to create a user
    console.log(`Creating user: ${user.username}, ${user.email}, ${user.password}, ${user.age}, ${user.address}`);
}

4️⃣ Avoid Magic Numbers

Explanation: Magic numbers are literal numbers used directly in code without explanation. They can make code harder to understand and maintain. Replacing magic numbers with named constants improves readability and makes future changes easier.

Before Refactoring:

function calculateDiscountedPrice(price: number): number {
    // Apply a discount of 15%
    return price * 0.85;
}

function calculateShippingCost(weight: number): number {
    // Shipping cost per kilogram
    return weight * 5;
}

After Refactoring:

const DISCOUNT_RATE = 0.15;
const SHIPPING_COST_PER_KG = 5;

function calculateDiscountedPrice(price: number): number {
    // Apply a discount
    return price * (1 - DISCOUNT_RATE);
}

function calculateShippingCost(weight: number): number {
    // Shipping cost per kilogram
    return weight * SHIPPING_COST_PER_KG;
}

5️⃣ Name Variables with Meaning

Explanation: Using meaningful variable names makes your code self-documenting and easier to understand. Avoid single-letter or cryptic names; instead, choose names that clearly convey the variable's purpose and usage.

Before Refactoring:

function calculate(u: number, v: number): number {
    const r = u + v;
    const p = r * 2;
    return p;
}

After Refactoring:

function calculateTotalCost(baseCost: number, additionalFees: number): number {
    const totalCost = baseCost + additionalFees;
    return totalCost;
}

Conclusion

Applying these refactoring principles to your TypeScript code will significantly enhance its clarity, maintainability, and overall quality. Clean code practices are vital for effective development and collaboration.

What refactoring strategies have worked best for you? Share your experiences or any challenges you've faced below! 🚀

How to Create a Scalable Folder/File Structure for Your Express Application

Gerald Hamilton Wicks — Thu, 18 Jul 2024 23:20:14 +0000

Throughout my journey as a developer, I've encountered a variety of methods for organizing folder structures, from the most straightforward to the highly complex.

Before I explain why I prefer the following folder structure, let's delve into the motivation behind it.

Motivation

When considering an effective folder structure, it should possess the following qualities:

Ease of Use: It should be simple to determine where a file or folder should be created and where to find existing ones.
Consistency: Developers should consistently apply the proposed folder/file structure.

To achieve ease of use, the folder/file structure should be clear and intuitive, so developers don't spend excessive time locating or creating files and folders.

For consistency, code reviewers should ensure the structure is adhered to during code reviews. From my experience, simpler folder structures tend to be easier to follow. Complex structures can lead to confusion and misplaced files/folders due to the extra effort required to understand them.

Structure

I advocate for simple folder structures to minimize the time spent organizing files. Here’s my recommended structure:

├── src
│   ├── controllers
│   ├── routes
│   ├── models
│   ├── app.ts

app.ts

In this file, initialize the server, connect to a database, and import routes from the /routes folder. Here’s an example:

import express from 'express';
import { usersRouter } from './routes';
import { productsRouter } from './routes';
import bodyParser from 'body-parser';
import cors from 'cors';
import mongoose from 'mongoose';
import "dotenv/config";

const app = express();
const PORT = process.env.PORT || 3001;
const DB_URI = process.env.DB_URI || 'mongodb://localhost:27017/mydatabase';

// Middleware
app.use(bodyParser.json());
app.use(cors());

// Database Connection
mongoose.connect(DB_URI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log('Connected to the database'))
  .catch(err => console.error('Database connection error:', err));

// Routes
app.use('/users', usersRouter);
app.get('/products', productsRouter);

// Server
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

/models

The models folder is crucial for defining schemas and data interactions. It includes the representation of your database tables and the logic to interact with them. Here's an example of a simple Mongoose model for a User in a file named User.model.ts:

// src/models/User.model.ts

import mongoose, { Schema, Document } from 'mongoose';

export interface IUser extends Document {
  name: string;
  email: string;
  password: string;
}

const UserSchema: Schema = new Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
});

export default mongoose.model<IUser>('User', UserSchema);

/routes

To keep things clean, use a /routes folder. Instead of declaring all routes in app.ts, isolate them. For example, in a file named users.routes.ts:

// src/routes/users.routes.ts

import express from 'express';
import { getUsers, createUser, deleteUser, updateUser } from '../controllers/users';

export const usersRouter = express.Router();

usersRouter.get('/', getUsers);
usersRouter.post('/', createUser);
usersRouter.delete('/', deleteUser);
usersRouter.put('/', updateUser);

/controllers

The controllers folder will likely have the most files and code. To manage this, break it down into smaller pieces. For instance:

├── controllers
│   ├── users
│   ├── products

Within each folder, isolate each method into individual files to keep them manageable:

├── users
│   ├── getUsers.controller.ts
│   ├── createUser.controller.ts
│   ├── deleteUser.controller.ts
│   ├── updateUser.controller.ts

Conclusion

While this file structure is simple, it's also very easy to understand and follow. This results in a concise, modularized, and clear folder structure. Remember, you can adapt the folder structure according to your needs, but it’s essential to keep it simple to maintain clarity and organization.

I'm excited to hear your thoughts—what folder structure works best for you? Let me know in the comments below! 🌟

5 Essential Flags to Enable on Your TypeScript Code

Gerald Hamilton Wicks — Wed, 10 Jul 2024 21:53:05 +0000

Introduction

TypeScript is a powerful tool that brings static typing to JavaScript, providing a robust foundation for building scalable and maintainable applications. To maximize the benefits of TypeScript, it's crucial to enable certain compiler options flags that enhance type safety and code quality. In this article, we'll explore five essential flags you should enable in your TypeScript projects and how they can help you write better code.

Initial Setup

In this article, we will cover the TypeScript flags: noImplicitAny, strictNullChecks, strictPropertyInitialization, noImplicitReturns, and noUnusedParameters. To enable each flag, you need to update your tsconfig.json file, setting these flags to true as shown in the example below:

{
  "compilerOptions": {
    // ...other configurations
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictPropertyInitialization": true,
    "noImplicitReturns": true,
    "noUnusedParameters": true
  }
}

1. Avoid using 'any' type

Flag: noImplicitAny
Description: The noImplicitAny flag ensures that you explicitly declare types instead of defaulting to the any type. This enhances type safety by preventing untyped variables from creeping into your codebase.
Pro Tip: Instead of using any, leverage the unknown type. To check if a variable is of the type you want, use type guards. If you're unfamiliar with type guards, check out this article: Elevate Your TypeScript Skills with Type Guards. This practice enforces better type checks and reduces runtime errors.

When you enable noImplicitAny, TypeScript will issue an error whenever it would have inferred any:

function fn(s) {
  // Type Error: Parameter 's' implicitly has an 'any' type.
  console.log(s.subtr(3));
}

2. Enable strict null checks

Flag: strictNullChecks
Description: Enabling strictNullChecks ensures that null and undefined are only assignable to their respective types. This prevents common pitfalls related to null values and improves code reliability.
Pro Tip: Use optional chaining (?.) and nullish coalescing (??) operators to handle null and undefined values gracefully.

Setting strictNullChecks to true will raise an error if you try to use a variable that could be null or undefined without a proper check:

declare const loggedInUsername: string;

const users = [
  { name: "Oby", age: 12 },
  { name: "Heera", age: 32 },
];

const loggedInUser = users.find((u) => u.name === loggedInUsername);
// Type Error: 'loggedInUser' is possibly 'undefined'.
console.log(loggedInUser.age);

3. Enforce strict property initialization

Flag: strictPropertyInitialization
Description: The strictPropertyInitialization flag ensures that all class properties are initialized either in the constructor or with a default value. This helps catch uninitialized properties early in the development process.
Pro Tip: Use definite assignment assertions (!) when you're sure a property will be initialized by the time it's accessed.

When set to true, TypeScript will raise an error when a class property is declared but not set in the constructor:

class UserAccount {
  name: string;
  accountType = "user";
  // Type Error: Property 'email' has no initializer and is not definitely assigned in the constructor.
  email: string;

  constructor(name: string) {
    this.name = name;
    // Note that this.email is not set
  }
}

4. Enable noImplicitReturns

Flag: noImplicitReturns
Description: The noImplicitReturns flag ensures that all code paths in a function return a value. This helps catch logical errors where a function might accidentally return undefined or no value at all.
Pro Tip: Review your functions to ensure they have consistent return statements, providing a clear and predictable flow of data.

When enabled, TypeScript will check all code paths in a function to ensure they return a value:

// Type Error: Function lacks ending return statement and return type does not include 'undefined'.
function lookupHeadphonesManufacturer(color: "blue" | "black"): string {
  if (color === "blue") {
    return "beats";
  } else {
    ("bose");
  }
}

5. Enable noUnusedLocals and noUnusedParameters

Flags: noUnusedLocals, noUnusedParameters
Description: These flags help you maintain a clean codebase by reporting unused local variables and parameters. This reduces clutter and makes the code more readable.
Pro Tip: Regularly review and refactor your code to remove unused variables and parameters, keeping your codebase clean and efficient.

These flags will report errors for unused variables and parameters, helping you keep your code tidy:

// Type Error: 'modelID' is declared but its value is never read.
const createDefaultKeyboard = (modelID: number) => {
  const defaultModelID = 23;
  return { type: "keyboard", modelID: defaultModelID };
};

Conclusion

Enabling these essential TypeScript flags not only enhances type safety but also promotes best practices and code maintainability. By leveraging TypeScript's powerful type system and compiler options, you can write more robust and reliable code, ultimately leading to a smoother development experience.

By incorporating these flags and best practices into your TypeScript projects, you'll be well on your way to writing cleaner, safer, and more maintainable code. And you, what are the flags that you use in your TypeScript code?

DEV Community: Gerald Hamilton Wicks

Automate Code Formating with Prettier 🧹

Quick Clarification: EditorConfig vs Prettier

1️⃣ Step One: Add EditorConfig

2️⃣ Step Two: Install Prettier

3️⃣ Ignore What Shouldn’t Be Formatted (.prettierignore)

4️⃣ Make It Fully Automatic

Example

Why This Matters

Understanding npm Versioning: A Guide to Semantic Versioning and Version Operators

What Is Semantic Versioning?

Patch Version

Minor Version

Major Version

Version Operators in npm

Caret (^)

Tilde (~)

Exact Version (no symbol)

Summary

5 React Tricks to Improve Code Quality and Performance

1. Use Ternary Operators Instead of AND (&&) Operators to Render Elements

Example of && Behavior:

Better Approach with Ternary Operator:

2. Lazy Initializer with useState

Why Use Lazy Initialization?

Example:

3. Use Lazy Load Components to Improve Performance

Example:

4. Using Optional Chaining in JavaScript

Example:

5. Use useRef for Forms to Avoid Re-renders

Example:

Conclusion

Interface vs Type in TypeScript

Interface

Basic Interface Example

Interface Inheritance

Interface for Classes

Interface Declaration Merging

Type

Union Types with Type

Type Declaration Restrictions

Type Composition

When Should You Use Each?

Conclusion

5 Essential Software Metrics for Quality Assurance

1. Defect Density

2. Customer Satisfaction (CSAT)

3. Code Coverage

4. Mean Time to Resolve (MTTR)

5. Mean Time Between Failures (MTBF)

Conclusion

Override and Mock Network Responses in DevTools

Why Use Network Overrides?

Installing Chrome DevTools

Getting Started with DevTools Network Overrides

1. Open DevTools

2. Navigate to the Network Tab

3. Identify and Override a Specific Request

4. Edit the Response

5. Save and Refresh

Advanced Tips for Power Users

Simulating Network Conditions

Local Overrides for Multiple Files

Persisting Overrides Across Sessions

Conclusion

How to Create a Live Preview of Your Local App Quickly

What Are Dev Tunnels?

Setting Up Dev Tunnels

Logging into Your Account

Creating Your Live Environment

Going Public: Sharing Your Environment with Others

Wrapping It Up

How to Create TypeScript Documentation Websites

Step 1: Add TSDoc to Your TypeScript Project

Step 2: Install TypeDoc

Step 3: Add a Script to Generate Documentation

Customizing Documentation Generation

Step 4: Generate Your Documentation Website

Step 5: View the Documentation Website

Caret (`^`)

Tilde (`~`)

1. Use Ternary Operators Instead of AND (`&&`) Operators to Render Elements

Example of `&&` Behavior:

2. Lazy Initializer with `useState`

5. Use `useRef` for Forms to Avoid Re-renders