peplocanto

Error Handling

This error handling system differentiates between unexpected runtime errors and anticipated HTTP errors, managing them globally through an Error Boundary (provided by Reacr Router Dom) and locally, at component level, via React Query.

---

Runtime Errors

peplocanto

Automating Dependency Updates in GitHub Projects

Keeping your project's dependencies updated is crucial for security and efficiency. In this guide, we'll explore how to automate the updating of minor dependencies using GitHub Actions and Husky hooks.

Automating dependency updates ensures that your project stays current with the latest patches and improvements without manual oversight. Using GitHub Actions, we can check for and apply these updates regularly. Additionally, with Husky, we can ensure that any changes in dependency files trigger necessary installations post-merge.

Prerequisites

Before setting up the automation, you need to prepare your project with a couple of steps:

peplocanto

Description

A script to remove Linkedin contacts in bulk by searching for a query into the heading of the contact.

Script

const CARD_SELECTOR = 'li.mn-connection-card.artdeco-list';
const TEXT_TO_SEARCH_SELECTOR = '.mn-connection-card__occupation';
const DROPDOWN_TRIGGER_SELECTOR =
  '.artdeco-dropdown__trigger.artdeco-button--tertiary.artdeco-button--muted.artdeco-button--circle';
const REMOVE_CONTACT_OPTION_TEXT_SELECTOR =

peplocanto

Queryparams Store Hook

useQueryParamsStore is a custom React hook that stores and retrieves data within URL query parameters.

This functionality not only maintains data across page refreshes but also enables users to share a state with others preventing sensitive information from being exposed in plain text within the browser's URL bar.

Implementation

// queryparams.store.ts

peplocanto

Enhanced Error Handling in TypeScript

In this guide, we'll present a handy TypeScript utility that can streamline your error handling process. This utility provides a simple and clear way to encapsulate potential errors and handle them gracefully.

Snippets are based on no-try npm package (link below).

TypeScript Snippet: useTry and useTryAsync

The TypeScript utility is composed of two main functions, useTry and useTryAsync.

peplocanto

How to add Analytics in Angular w/ GTM & Partytown

In this article, we will explore how to integrate analytics into an Angular application using Google Tag Manager (GTM) and Partytown. We will cover the necessary typings, a service for handling analytics events, a directive for tracking button clicks, an error interceptor for logging HTTP errors, and form tracking. Let's dive into each component.

Diagram of the final Result

Prerequisites

peplocanto

How to create your personal TS Playground

Supercharge your development process with this TypeScript playground, leveraging the benefits and advanced features of your IDE.

---

1. Create a new directory called "console" and navigate into it:

mkdir console
cd console

peplocanto

Attack of the Clones: Deep Copy vs. Shallow Copy

In JavaScript (and TypeScript) understanding the concepts of deep copy and shallow copy is essential for maintaining data integrity.

Considering these models:

interface Jedi {
  name: string;
  species: Species;

peplocanto

Type inference & Type check at Runtime

How connect typescript and javascript in our code

---

As developers, we strive to write robust and error-free code. One of the ways to achieve this is by leveraging TypeScript's powerful type inference system.

This code snippet demonstrates how we can infer TypeScript types from JavaScript variables using the as const syntax. By using the as const syntax, we can tell TypeScript that the variable's values are constant and should not be mutated. This allows TypeScript to infer literal types for the values, making our code more type-safe and reducing the likelihood of runtime errors.

peplocanto

Browser Cache Api

interface CacheConfig {
  name: string;
  validTime: number;
  endpoints: string[];
  options?: CacheOptions;
  clearOnHide?: boolean;
}