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

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

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

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

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

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

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

Existence in Javascript (but written in Typescript)

A simple series of utility to check value existence.

function itExists(it: unknown): boolean {
  if (!hasValue(it)) return false;
  else if (Array.isArray(it)) return isArrNotEmpty(it);
  else if (typeof it === 'object') return isObjNotEmpty(it!);
  else return true;