Forem: Ivan Zaldivar

Don't make counters like that. 🛑

Ivan Zaldivar — Tue, 18 Jul 2023 14:56:11 +0000

Introduction

In this post, you will learn how to create innovative, efficient, and simply impressive counters. 💯 Say goodbye to outdated ways of counting. 🌟

No more mundane loops or tedious iterations: we will show you how to leverage powerful concepts such as Closures, functional programming, and OOP design. 🔥💡 Whether you're a fan of functional paradigms or a defender of object-oriented programming, we have you covered! 💪🔧

Practical example

Before we begin, let's create a simple example that will allow us to illustrate more effectively.

Let's create a function called "semaphore". This function will simulate the behavior of a traffic light. Every time this function is executed, it will change color. When the maximum number of available colors is reached, its value will be reset.

let counter = 0

const semaphore = () => {
  let lights = ['green', 'yellow', 'red']

  // Get counter value.
  const value = counter

  const color = lights.at(value)

  // Increment value
  counter++

  // Reset counter
  if (value >= lights.length - 1) counter = 0

  return color
}

(() => {
  setInterval(() => {
    const color = semaphore()
    console.log(color)
  }, 3000)
})()

Despite being a rather simple example, we can encounter the following issues. Imagine in a more extensive and complex code.

Direct mutability of the counter: The counter counter is declared using let and is directly modified using the increment operator (counter++). This introduces direct mutability in the code, which can be problematic when the code becomes more complex, as any part of the code can access and modify the counter without restrictions.
Global variable: The variable counter is declared outside the scope of the semaphore function, making it a global variable. This can lead to undesired coupling and make maintenance and understanding of the code in a broader context more difficult. Additionally, the use of global variables can result in naming conflicts and hinder code reuse.
Lack of encapsulation: The counter counter is not encapsulated within a structure or object that provides a controlled interface for its manipulation. This makes the internal state of the counter accessible from any part of the code, which can lead to unexpected results and make tracking changes to the counter difficult.
Implicit conditional reset: The counter reset is done by checking a condition within an if block (if (value >= lights.length - 1) counter = 0), which can be confusing and hinder code comprehension.
Lack of abstraction and reusability: The counter counter is directly handled within the context of the semaphore function. This limits its reusability in other parts of the code and hampers extensibility if additional functionality needs to be added to the counter in the future.

Solution 1: Create counter using Closure

If you're a developer who prefers more than one functional paradigm, you can choose to use a closure to create your counter.

/**
 * Creates a counter object with initial value.
 * @param {number} [initialValue=0] - The initial value of the counter. Defaults to 0 if not provided.
 * @returns {Object} - Counter object with methods.
 */
export const createCounter = (initialValue = 0) => {
  let counter = initialValue;

  /**
   * Retrieves the current value of the counter.
   * @returns {number} - The current value of the counter.
   */
  const getValue = () => counter;

  /**
   * Increments the counter by the specified value.
   * @param {number} [value=1] - The value to increment the counter by. Defaults to 1 if not provided.
   * @returns {void}
   */
  const increment = (value = 1) => {
    counter += value;
  };

  /**
   * Decrements the counter by the specified value.
   * @param {number} [value=1] - The value to decrement the counter by. Defaults to 1 if not provided.
   * @returns {void}
   */
  const decrement = (value = 1) => {
    counter -= value;
  };

  /**
   * Checks if the counter is zero.
   * @returns {boolean} - True if the counter is zero, false otherwise.
   */
  const isZero = () => !counter;

  /**
   * Resets the counter to zero.
   * @returns {void}
   */
  const reset = () => {
    counter = 0;
  };

  return {
    getValue,
    increment,
    decrement,
    isZero,
    reset
  };
};

Implementation

This option is INFINITELY better than the previous one because it utilizes encapsulation and provides a controlled interface to interact with the counter. This improves the abstraction, reusability, control, security, maintainability, and extensibility of the code compared to the first example.

// Create counter.
const counter = createCounter()

const semaphore = () => {
  let lights = ['green', 'yellow', 'red']

  // Get counter value.
  const value = counter.getValue()

  const color = lights.at(value)

  // Increment counter.
  counter.increment()

  // Reset counter.
  if (value >= lights.length - 1) counter.reset()

  return color
}

(() => {
  setInterval(() => {
    const color = semaphore()
    console.log(color)
  }, 3000)
})()

Look, with this change we have greatly improved our code, not only is it more explicit about what we do, but it also offers greater control and security.

Solution 2: Create counter using Class

If you're a developer who prefers more than one OOP paradigm, you can choose to use the implementation of a class to create your counter.

/**
 * Counter class that maintains a count value and provides methods for manipulation.
 */
export class Counter {
  private _value = 0;
  /**
   * Creates a counter object with an initial value.
   * @param {number} [initialValue=0] - The initial value of the counter. Defaults to 0 if not provided.
   */
  constructor(initialValue = 0) {
    this._value = initialValue;
  }

  /**
   * Retrieves the current value of the counter.
   * @returns {number} - The current value of the counter.
   */
  get value(): number {
    return this._value;
  }

  /**
   * Increments the counter by the specified value.
   * @param {number} [value=1] - The value to increment the counter by. Defaults to 1 if not provided.
   */
  increment(value: number = 1): void {
    this._value += value;
  }

  /**
   * Decrements the counter by the specified value.
   * @param {number} [value=1] - The value to decrement the counter by. Defaults to 1 if not provided.
   */
  decrement(value: number = 1): void {
    this._value -= value;
  }

  /**
   * Checks if the counter is zero.
   * @returns {boolean} - True if the counter is zero, false otherwise.
   */
  get isZero(): boolean {
    return !this._value;
  }

  /**
   * Resets the counter to zero.
   */
  reset(): void {
    this._value = 0;
  }
}

Conclusion

It is important to stay away from outdated counting methods and adopt innovative approaches such as the use of Closures or Classes. By adopting these techniques, we can create more efficient, maintainable, and extensible counters that adhere to best practices in functional programming or object-oriented programming paradigms.

Follow me ❤️

🐙 GitHub: https://github.com/thebug404
🐦 Twitter: https://twitter.com/thebug404

🚫 Stop using SWITCH, please 🙏

Ivan Zaldivar — Tue, 04 Apr 2023 20:10:33 +0000

If you're a software developer, chances are you'll use the switch stament at some point. This operator allows you to evaluate the expression and execute different blocks of code depending on the value of said expression. Although switch is a useful tool, overusing it can lead to code that is difficult to maintain and modify. In this article we explain why you should consider moving away from switch and some alternatives you can use to improve the readability and maintainability of your code.

Problem

In this example, the notifier function takes a notification argument of type Notification, which is an enum representing different notifications. The function uses a switch statement to determine which notification to send based on the value of the Notification argument. We see an example:

You can take a look at why it is not recommended to use Enums here

const enum Notification {
  verifySignUp,
  resendVerifySignup,
  emailConfirmed
}

export function notifier (notification: Notification) {
  switch (notification) {
    case Notification.verifySignUp: 
      // Execute something...
    return;

    case Notification.resendVerifySignup: 
      // Execute something...
    return;

    case Notification.emailConfirmed: 
      // Execute something...
    return 
  }
}

As the number of cases within the switch increases, the readability of the code suffers. Also, if a new fruit is added to the enum, the function must be updated to handle the new case, which can lead to errors if you forget to update it.

There are more scalable and maintainable alternatives to switch in this case, such as using an object that contains the colors of the fruits. This also makes the code more readable and scalable as more fruits are added.

Another possible alternative that I have found in other projects is the use of if.

export function notifier(notification: Notification) {
  if (notification === Notification.verifySignUp) {
    // Execute something...
    return;
  }

  if (notification === Notification.resendVerifySignup) {
    // Execute something...
    return;
  }

  if (notification === Notification.emailConfirmed) {
    // Execute something...
    return;
  }
}

But as you have to see, both have the same drawback. Now that we've come across the problem head-on. How do we improve this?

Solution

As in any software solution there are different implementations of how to solve a problem. In this case we are only going to address two, one of them is the use of objects and the other is through mapping functions

Using objects

const notificationDirectory = {
  verifySignup: () => {
    // Execute something...
  },

  resendVerifySignup: () => {
    // Execute something...
  },

  emailConfirmed: () => {
    // Execute something...
  }
}

type NotificationTypes = keyof typeof notificationDirectory

function notifier (notification: NotificationTypes) {
  const handler = notificationDirectory[notification]

  if (!handler) throw new Error("Your method does not exist");

  if (!(typeof handler === 'function')) throw new Error("Your method must be a function");

  // Execute your method
  handler()
}

// send email for the user to confirm his email.
notifier('verifySignup')

// send email notifying that your email was verified
notifier('emailConfirmed')

Using Mapping Funtions

const notificationMap = new Map<string, () => void>()

notificationMap.set('verifySignup', () => {
  // ...
})

notificationMap.set('resendVerifySignup', () => {
  // ...
})

notificationMap.set('emailConfirmed', () => {
  // ...
})

function notifier (notification: string) {
  const handler = notificationMap.get(notification)

  if (!handler) throw new Error("Your method does not exist");

  handler()
}

The following details the advantages of using these techniques instead of switch:

Easier to maintain: As new notifications are added, there is no need to add more instances inside a switch statement, just add a new function to the notificationDirectory object.
More flexible: you can add or remove notifications at any time without having to worry about updating the corresponding switch statement.
Safer: By using the NotificationTypes type, you can ensure that only valid values are passed to the notifier method. If an attempt is made to pass a value that is not one of the valid keys of the notificationDirectory object, a runtime error will be thrown. This can help catch bugs earlier.
More scalable: Instead of writing a single long function that handles multiple different cases, this approach allows you to define a separate function for each case, making your code more modular and easier to read and maintain.
More efficient: In some cases, using a map instead of a switch statement can be more efficient in terms of execution speed. This is because maps are implemented as a key-value lookup data structure, which allows you to look up and retrieve values more efficiently than sequential lookup in a switch statement.

Conclusion

In conclusion, although the switch statement is a useful tool in software development, its excessive use can lead to code that is difficult to maintain and modify. As the number of cases within the switch increases, the readability of the code suffers, and adding new cases can lead to errors if you forget to update all the instances in which it is used. In addition, there are more scalable and maintainable alternatives, such as using objects or mapping functions, which can improve code readability and maintainability. Therefore, it is important to consider the proper use of the switch statement and evaluate other alternatives to improve code quality in software development.

Follow me

🐙 GitHub: https://github.com/thebug404
🐦 Twitter: https://twitter.com/thebug404

Don't use Enums in Typescript, they are very dangerous 😨

Ivan Zaldivar — Fri, 20 Jan 2023 20:44:13 +0000

Have you ever wondered why TypeScript experts recommend avoiding the use of ENUMs? While they may seem like a useful tool for defining a set of constant values, they are actually very dangerous. In this article, we will show you why and how to avoid their use. You'll discover that there are much safer and reliable alternatives that you can use instead. Get ready to be surprised! 😱

Enum's emit code

One of the reasons why it is recommended not to use it is due to the generation of code at the time of compiling the app. ENUMs generate additional code at compile time, which increases the size of the final file. This can have a negative impact on the loading speed and performance of the app.

Define our Roles enum

enum Roles {
  Admin,
  Writer,
  Reader
}

Output (Build-generated code)

var Roles;
(function (Roles) {
    Roles[Roles["Admin"] = 0] = "Admin";
    Roles[Roles["Writer"] = 1] = "Writer";
    Roles[Roles["Reader"] = 2] = "Reader";
})(Roles|| (Roles = {}));

While it's true that this detail is fixed if you use a constant enum, but I've been on multiple projects and seen people using regular enums everywhere and wonder why their output is so big.

Postada: I have been one of those people. 😁

This may seem trivial, but imagine that you have files shared between the "Frontend" and "Backend" you can end up with quite heavy bundles.

Okay, that's one thing, and we can handle that by enforcing the constants. But there is also this unpleasant ambiguity.

Numeric types usafe

Yes, you read it right. This is not clickbait. Regular numeric enums, such as in an enum where you don't set string values, are not type safe! If we look back at the Roles enumeration from earlier, a function that takes user roles also takes any numeric value instead.

enum Roles {
  Admin,
  Writer,
  Reader
}

declare function hasAccess(role: Roles): void;

hasAccess(10);
// ☝️ Worst of all, this is ok! 😱

As you may have noticed, when the hasAccess(10) function is called, a numeric value is being passed that is not part of the enum Roles, this is allowed in TypeScript, and this is what is considered a problem, since it allows the entry of unexpected and unverified values which can cause security and performance problems in the app.

String ENUM's are named types

In a world where structural types are common, ENUMs choose to be a named type. This means that even if the values are valid and supported, they cannot be passed to a function or object where a string enumeration is expected. Let's see this example:

enum Roles {
  Admin = 'admin',
  Writer = 'writer',
  Reader = 'reader'
}

declare function hasAccess(role: Roles): void;

hasAccess('admin') // Invalid.
hasAccess(Roles.Admin) // Valid.

As you can see enums are a named type and only accept enum-specific values, not compatible or similar values, which can lead to compatibility issues and should be carefully considered when designing and using enums.

Solution

A much safer alternative and guarantee of compatibility is the use of objects. Let's see the following example:

const Roles = {
  Admin: "admin",
  Writer: "writer",
  Reader: "reader"
} as const;

// Convert object key in a type
type RoleKeys = typeof Roles[keyof typeof Roles]

declare function hasAccess(role: RoleKeys): void;

// 💥 Error!
move('guest');

// 👍 Great!
move('admin');

// 👍 Also great!
move(Roles.Admin);

Conclusion

ENUMs may seem like a useful tool for defining a set of constant values, but they are actually very dangerous. Excessive use of regular ENUMs can lead to code size issues, security issues, scalability issues, and maintainability issues.

Instead of using ENUMs, it's better to opt for objects or types. Objects are flexible and scalable, which means that they can be modified at runtime and new values can be added. Types are also flexible and scalable, and also offer better code clarity and readability. Also, objects and types are less prone to bugs and security issues compared to ENUMs. In short, using objects or types instead of ENUMs is a better option in terms of flexibility, scalability, clarity, readability, and security.

Follow me ❤️

Twitter. 🐦
Github. 🐙

Change the DB as you wish | Repository Pattern 📦

Ivan Zaldivar — Sun, 06 Nov 2022 04:54:58 +0000

📦 Repository Pattern

This is a practical and real-life example of how to use the Repository Pattern with Dependency Injection to manipulate with the database like a PRO. 😎

What is a Repository Pattern? 🤔

Repositories are classes or components that encapsulate the logic needed to access data sources. They centralize common data access functionality, providing better maintainability and decoupling the infrastructure or technology used to access databases. This allows us to change the Database used at any time, either from a MySQL to a MongoDB without further complexity.

As you have to visualize Repository corresponds to the interface, that is, the contract that the specific implementations have to fulfill. In this case MongoRepository, MySQLRepository, PostgreRepository.

Note: Whenever we want to add a new implementation (another database) we must implement this interface.

What is a Dependency Injection? 💉

Dependency Injection allows objects to be supplied to a class instead of the class itself creating those objects. These objects fulfill contracts (Interfaces) that our classes need in order to function.

Define our interface.

// Define our interfaces/contract
interface Repository<T = any> {
  create(data: T, query?: Query): Promise<T>
  // Other methods...
}

Define our implementations.

class MongoRepository implements Repository {
  async create(data: any, query?: Query): Promise<any> {
    // Do something...
  }
}

class MySQLRepository implements Repository {
  async create(data: any, query?: Query): Promise<any> {
    // Do something...
  }
}

Define our client.

class Controller {
  constructor (repository: Repository) {}
}

// Using MongoDB 🍃
new Controller(new MongoRepository())

// Using MySQL 🐬
new Controller(new MySQLRepository())

As you may have noticed, in this way we can change the database quite easily, since our Controller client does not depend on its specific implementations, but on a Repository interface.

Follow me ❤️

🐦 Twitter
🐙 Github

Build Querystring like a pro

Ivan Zaldivar — Tue, 26 Apr 2022 21:17:17 +0000

Often in apps, you will have to interact with the URL to implement some functionality like pagination.

The URL is a great place to include some of your app status. The advantage is that users can share the URL back to it with the filters set.

The tricky part is sometimes how you get and update those URL parameters. Honestly, in modern browsers, there's a neat API called URLSearchParams ✨ It allows us to elegantly retrieve or update the URL parameters.

URLSearchParams is available in node.js and most browsers.

❤️ Follow me

🐦 https://twitter.com/thebug404
🐙 https://github.com/thebug404

ℹ️ What is a URLSearchParams?

The URLSearchParams API allows us to read the querystring from the URL in a very elegant way, and we no longer need to do complex implementations, in the past it was necessary to call external apis or use regular expressions. In this post I will explain some of the functionalities that this API.

🚀 Getting started

The first thing we need to do is initialize a class that contains a query string.

const urlSearchParams = new URLSearchParams(`?username=thebug404&fullname=The+Bug`);

Or you can get the values through the browser URL

const urlSearchParams = new URLSearchParams(window.location.search);

We now have an instance of URLSearchParams saved in urlSearchParams that we can use to read and modify query parameters.

📖 Reading parameters

To get a specific parameter you can use the get() method

const userId = urlSearchParams.get("username"); // thebug404

💾 Adding parameters

The append() method is used to add new query parameters to URL

urlSearchParams.append("country", "El Salvador")

console.log(urlSearchParams.toString()); // country=El+Salvador

🗑️ Deleting parameters

The delete() method is used to remove query parameters from a URL

urlSearchParams.delete("fullname");

🔥 Generating URL

Another useful use case is to generate a URL with URLs and URLSearchParams under the hood.

const url = new URL("https://domain.com");

url.searchParams.set('username', 'thebug404');

console.log(url.toString()); // https://domain.com/?username=thebug404

💡 Conclusion

As we have seen, generating URLs, getting, adding and removing URL query parameters is a really easy task with this API. Honestly, I love how easy and intuitive it is to use, and that makes me very happy, and you?

❤️ Follow me

🐦 https://twitter.com/thebug404
🐙 https://github.com/thebug404

Upload Files to Cloudinary with Node.js in 1 minute

Ivan Zaldivar — Mon, 18 Apr 2022 19:33:57 +0000

Hi guys! Today I bring you a package that allows you to upload, list and delete files with various cloud services Cloudinary, Amazon S3

❤️ Follow me

🐦 twitter
🐙 github

⚙️ Setup

Before you start using Filesrocket you need to set up a simple Node.js project

Create project

mkdir my-filesrocket-app

cd my-filesrocket-app

code .

Initialize project

npm i typescript ts-node -g

npm init -y

tsc --init --target es2018

🚀 Get started

But before continuing you need to create a cloudinary account. If you don't have an account yet, click here and follow all the steps.

To start using Filesrocket it is necessary to install the dependencies.

npm i express filesrocket filesrocket-cloudinary

npm i @types/express -D

Create src/index.ts file and copy the following content

import express from "express";

import { Filesrocket } from "filesrocket";
import { CloudinaryFileService } from "filesrocket-cloudinary";

// Initialize Filesrocket
const filesrocket = new Filesrocket();

// Setting service.
const service = new CloudinaryFileService({
  pagination: { default: 15, max: 50 },
  cloud_name: "<Your CLOUDNAME>",
  api_key: "<Your API KEY>",
  api_secret: "<Your API SECRET>"
});

// Register your service.
filesrocket.register("cloudinary", service);

const app = express();

// Register your endpoint
app.post("/files", async (req, res) => {
  const controller = filesrocket.controller("cloudinary");

  const files = await controller?.create(req, {
    extnames: [".jpg", ".png", ".jpeg"]
  });

  res.status(200).json(files);
});

app.listen(3030, () => {
  console.log("App execute in port:3030");
});

With this simple example you can upload files to cloudinary. But remember that this is only the beginning, there is still more to discover, if you are interested I recommend you click here to visit the official documentation.

❤️ Follow me

🐦 twitter
🐙 github

Integrating an ORM in Node.js in 5 easy steps

Ivan Zaldivar — Mon, 11 Apr 2022 20:59:32 +0000

Hi developers! In this post we are going to implement an ORM (TypeORM) to interact with the Database (MySQL) performing the basic operations CRUD (Create, Read, Update and Delete). Let's start.

❤️ Follow me

🐦 Twitter: thebug404
🐙 Github: thebug404

🔥 Get started

In this section we are going to define our model, global configuration, definition of repositories and others.

You can also visit this repository on Github and clone it to your computer. By the way, leave your little star and by the way follow me 😜

Repository: https://github.com/thebugweb/todo-express-api

1. Define model

Create src/entity/Task.ts file

@Entity: Convert a class into a TypeORM entity, this entity can be a table or Document, depending on the Database we are using.
@Column: Column decorator is used to mark a specific class property as a table column.
@PrimaryGeneratedColumn: This decorator will automatically generate a primary key.
@CreateDateColumn: This column will store a creation date of the inserted object.
@UpdateDateColumn: This column will store an update date of the updated object.

import {
  Entity,
  Column,
  PrimaryGeneratedColumn,
  CreateDateColumn,
  UpdateDateColumn
} from "typeorm";

@Entity()
export class Task {
  @PrimaryGeneratedColumn()
  id!: number;

  @Column()
  title!: string;

  @Column()
  description!: string;

  @Column("boolean", { default: false })
  isCompleted!: boolean;

  @CreateDateColumn()
  createdAt!: Date;

  @UpdateDateColumn()
  updatedAt!: Date;
}

2. Setting TypeORM

Create src/config/database.ts file. In this file we are going to add the global settings of TypeORM. Properties like:

Specify the type of database (type, host, username)
Register our entities.
Register our migrations.
Other features.

import { DataSource } from "typeorm";

import { Task } from "../entity/Task";

export default new DataSource({
  type: "mysql",
  host: "localhost",
  port: 3306,
  username: "root",
  password: "",
  database: "todo",
  entities: [Task],
  synchronize: true,
  logging: false
});

If you want more information visit here

3. Connect database

We import the configuration (src/config/database.ts) and initialize TypeORM to establish connection with the database

import "reflect-metadata";

import express from "express";

import database from "./config/database";

const app = express();

database.initialize()
  .then(() => console.log("Database connected"))
  .catch(console.error)

app.listen(3030, ()=> {
  console.log("App execute in port:3030");
});

4. Define repository

Create src/tasks/task.repository.ts file. This file will have a class, which is responsible for interacting with TypeORM.

import database from "../config/database";

import { DatabaseRepository, Id, Query } from "../declarations";
import { Task } from "../entity/Task";

export class TaskRepository implements DatabaseRepository<Task> {
  async create(data: Partial<Task>, query?: Query): Promise<Task> {
    const repository = database.getRepository(Task);

    const task = repository.create(data);

    await repository.save(task);

    return task;
  }
}

5. Consume the repository

Once we define the repository methods, we can import this class anywhere in our application.

The following example shows an implementation in a controller.

Create src/tasks/task.controller.ts file

import { Request, Response, NextFunction } from "express"

import { DatabaseRepository } from "../declarations";
import { Task } from "../entity/Task";

export class TaskController {
  constructor(private repository: DatabaseRepository<Task>) {}

  async create(req: Request, res: Response, next: NextFunction): Promise<void> {
    try {
      const body = req.body;

      const task = await this.repository.create(body)

      res.status(200).json(task);
    } catch (error) {
      next(error);
    }
  }
}

Add it on a router and ready!

import { Router } from "express";

import { TaskController } from "./task.controller";
import { TaskRepository } from "./task.repository";

const router = Router();

const controller = new TaskController(new TaskRepository());

router.post("/tasks", controller.create.bind(controller));

export default router;

✨ Conclusions

With these simple steps we have integrated an ORM (TypeORM) to our application. Now is the time for you to let yourself be carried away by your imagination and do more complex things.

In case you have a doubt, you can visit this repository on Github and clone it to your computer. By the way, leave your little star and by the way follow me 😜

Repository: https://github.com/thebugweb/todo-express-api

❤️ Follow me

🐦 Twitter: thebug404
🐙 Github: thebug404

Upload Files with any Cloud Service with just 10 lines of code

Ivan Zaldivar — Mon, 04 Apr 2022 15:05:07 +0000

Hi developers! After months of not posting anything, here I am again, and this time with an open source project that I've been working on for months. Well let's get started.

⚠️ Filesrocket of the moment is in beta, please note that it is not ready for production yet, thanks for your understanding ️️❤️

What is a Filesrocket
Features
Prerequisites
Setup
Basic usage
Conclusions

🤔 What is a Filesrocket?

Filesrocket is an packages of Node.js that allows management your files through strategies that help manage with any cloud services (Local, Cloudinary, AWS).

🌈 Features

🔭 Manage your files with multiple cloud storage services (Cloudinary, Amazon S3, Local)
✅ Validations (validate extensions, file sizes and more)
⚡ Easy to configure and integrate
🛡️ Written in Typescript
👨🏻‍💻 Community driven

📝 Prerequisites

Have Node.js installed.
Have VSCode (or your favorite Code Editor) installed.

⚙️ Setup

Now we are going to add some configurations for our node.

Creating project.

mkdir filesrocket-app-example

cd filesrocket-app-example

Initialize project.

npm i typescript ts-node -g

npm init -y

tsc --init

Now is necessary installed the following packages.

npm i express filesrocket filesrocket-local

npm i @types/express -D

Perfect, with this we already have everything we need.

🧑‍💻 Basic Usage

Create a src/index.ts and initialize app

import express from "express";

const app = express();

app.listen(3030, () => {
  console.log("App execute in port:3030");
})

Setting service

import { Filesrocket } from "filesrocket";

import { LocalFileService } from "filesrocket-local";

// Initialize
const filesrocket = new Filesrocket();

// Config your service
const service = new LocalFileService({
  pagination: { default: 15, max: 50 },
  host: "http://localhost:3030",
  directory: "uploads",
});

// We register the service
filesrocket.register("local", service);

const controller = filesrocket.controller("local");

// Create/Upload files.
app.post("/files", async (req, res) => {
  const files = await controller.create(req, {});
  res.status(200).json(files);
})

// List files.
app.get("/files", async (req, res) => {
  const query = req.query;

  const files = await controller.list(query);

  res.status(200).json(files);
})

// Remove files.
app.delete("/files", async (req, res) => {
  const query = req.query;
  const { id } = query;

  const files = await controller.remove(id, query)

  res.status(200).json(files)
})

Expose static files.

app.use("/uploads", express.static(path.resolve("uploads")));

Execute server

ts-node src/index.ts

With this example you can manage your files locally.

Examples 👀

To make it easier to understand the tool we have created several repositories with the most popular frameworks so that you can clone them on your computer and play with them.

Framework	Repository
Express	filesrocket-express-app

🔥 Conclusions

As you have just seen, Filesrocket is a tool that allows you not only to upload your files like multer, express-fileupload and others, but it also allows you to consult, delete, provides you with a pre-formed URL and other metadata. This was a short article, if you want to learn more in depth we recommend you visit the official documentation.

❤️ Follow me

Learn to test your packages NPM locally.

Ivan Zaldivar — Thu, 11 Nov 2021 15:00:15 +0000

Hi guys! In this post we are going to learn how to test the NPM package before being deployed to NPM. and that other developers can use it.

Initialize project.

In this part, we are going to initialize a simple Node.js project that allows us to perform basic mathematical operations. Get started!

Create directory.
mkdir operations-basic

Enter directory.
cd operations-basic

Initialize project NPM
npm init -y

Initialize project with Typescript
tsc --init

Perfect, now we create src/index.ts and add the following content.

> src > index.ts

export function sum(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

export function multiplication(a: number, b: number): number {
  return a * b;
}

export function division(a: number, b: number): number {
  if (b < 0) throw new Error("Cannot divide by zero");
  return a / b;
}

Nice, now we update tsconfig.json and add the following content.

> tsconfig.json

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig.json to read more about this file */

    /* Language and Environment */
    "target": "ES5",

    /* Modules */
    "module": "commonjs",                                /* Specify what module code is generated. */
    "rootDir": "./src",                                  /* Specify the root folder within your source files. */
    "baseUrl": "./src",

    /* Emit */
    "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    "outDir": "./lib",                                   /* Specify an output folder for all emitted files. */

    /* Interop Constraints */
    "esModuleInterop": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
    "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
    "strictFunctionTypes": true,                            /* Ensure 'use strict' is always emitted. */
    "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
    "noUnusedParameters": true,                          /* Interpret optional property types as written, rather than adding 'undefined'. */
    "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
  }
}

Magnificent, we update package.json file.

> package.json

{
  "name": "operations-basic",
  "version": "0.1.0",
  "description": "Little descriptions of what your package does",
  "main": "lib/index.js",
  "types": "lib",
  "scripts": {
    "build": "tsc -p ."
  },
  "keywords": ["Some keywords"],
  "author": {
    "name": "<Your name>",
    "email": "<Your email>",
    "url": "https://github.com/<Your username>"
  },
  "repository": {
    "url": "https://github.com/<Your username>/<Package name>"
  },
  "license": "MIT",
  "dependencies": {
  },
  "devDependencies": {
  }
}

Testing locally.

Now, we execute npm run build this command generate a directory lib which will be the one that will be uploaded to NPM, with its declarations, mappings, etc.

Beautiful. in this you should be able to see the lib folder, if so, run the following command.

npm link

What this command will do is a symbolic link, with the name of your folder, and it will be added to the global packages on your computer. Similar when you download a package as follows: npm installl -g some-package

Note: Remember that it is a symbolic link, so any change you make, you will only have to compile it and then execute npm link and the changes will be reflected in the repositories where you use it.

Perfect, now it is created, now we can add to this package with the project that we want to test. And we do it in the following way.

npm link package-name

Note: In the case that you want to test multiple packages at the same time, it is necessary that you execute them in a single command.

npm link package-name-one package-name-two package-name-three

Considerations.

It is very important that the package name is unique.

Well guys, this is it for today. You already know that if you have a more efficient way to test an npm package locally, feel free to share it in the comments, it would be of great help.

Follow me on social networks.

🎉 Twitter: https://twitter.com/ToSatn2
💡 Github: https://github.com/IvanZM123

Stop using Javascript

Ivan Zaldivar — Mon, 18 Oct 2021 17:42:02 +0000

Hello dear friend. I know that the publication has been entered by title. But before wanting to hit me Hahaha... 😂 What I say is founded, based on work experiences, collaborations, personal projects, etc. And I explained why.

Have you tried refactoring a huge codebase in Javascript? It is literally impossible. Once you reach a certain size it becomes Read-Only. All you can do is add more and more code.
~ Anders Hejlsberg - Creator of Typescript and C#.

Typescript is a Superset of Javascript.

The first point in TypeScript in favor is that Typecript is very similar to Javascript. Since the above part of the Javascript code is tolerable or compatible with Typescript, but Typecript adds certain additional functions. That will be listed bellow.

Explicit language.

One of the best things about Typescript is that it extends Javascript by adding static type to the language. This way I can guarantee that my code meets a goal. By the way The static type is better. The static type force us to defined the data type that will be have the variable. This is very important, for the following reasons. Due to the use of types, we know for sure (as long as we define the types well) what our entities, objects, etc. look like. Something that with Javascript, is impossible, due to its dynamic typing.

At first, it may seem that it complicates things more, but no. This is something valuable, because typescript will not indicate what parameters it receives, if mandatory or optional, and the value it returns. Simply magical.

Detection errors in codification time.

How you can see, Typescript is complaining because the property not specified in the interface. If we are in Javascript would realize until that app execution. Instead in Typescript, the we know beforehand.

Code autocompletion.

This is a point that nobody touches, and that not have importance in small projects, but if the that have many class, modules, componentes , etc, and that also interact with each other.

How can you visualize Javascritt not autocomplete, and this leads us to look for its definition in our code, go to the Internet to check its values, what it returns, etc. Instead with Typescript we are always documented.

Note: The any type, always must be a temporary wildcard.

Documentation for default. Having with static types, this works as one of the best ways to document your code. The one that is strongly typed implies what we must do always indicate the type of data to work with.

Gradual adoption and easy to learn.

Because typescript uses Javascript syntax, this radically makes adoption easier, because we don't have to start saying, how do you build a function? How do I iterate arrays? among others. On that side we do not have to worry. And the great thing is that now, we can know in advance the type of data we need, and the values it returns. Tell me it's not cool?

❤️ Generic types ❤️

The first thing I want to say is I love Generic Types. The reason why I love you, is because these allow us reuse code. We can understand generics as a kind of code "template", through which we can apply a certain data type to various points in our code. They are used to take advantage of code, without having to duplicate it due to type changes and avoiding the need to use the "any" type.

We make example.

Create a simple generic class.

Now, we create other two class inheriting from the abstract SimpleCRUD class.

Create a concrete class.

Create user class

Create note class

As you may have already realized, you can see how magical generics are. They allow us to abstract functionalities, reuse code, polymorphism, etc. And also, we can add exclusive methods to the concrete classes (UserClass and NoteClass). Do you see why I love them?

High scalability.

The use of static type makes your code much more readable, which makes it easier to understand the legacy code. improving refactoring and error correction times. causing an improvement in the scalability of the code.

Latest features.

It allows you to develop without worrying about the support of certain new features that are incorporated into the different versions of ECMAScript, since the code is then translated to work with older versions.

Integration with any Framework, library or package.

As developers we can see how more tools, frameworks, libraries, packages, etc. They are increasingly adopting Typescript. To such an extent, that it is rare to find a package in npm that does not have a data definition file at least.

Supported by Microsoft and Google.

This is very important to you as a developer. Because the companies that use it, support it, support it, it gives us the assurance that they will not leave it abandoned. And it is always very important to keep this in mind when we integrate technology into our projects.

Poo 🥰

other things that are not mentioned much. Is that Typescript will allow us to work with more Object Oriented thinking. Other things that are not mentioned much. Is that TypeScript will allow us to work with a more Object Oriented thinking. We will be able to work better with classes, use interfaces, handle inheritance, composition, etc.

Design patterns.

Due to the excellent use of OOP, it allows us to use design patterns with greater ease and robustness. It is not that in Javascript they cannot be applied, but that it is too complex due to how little expressive it is. Instead in Typescript, we know which interface to add. By the way, do you want me to make an article with the different design patterns with day-to-day examples? Like and comment.

Conclusions.

Promotes more robust and maintainable language to be written. So it is a cleaner language. You can easily write object-oriented code without much knowledge. Refactoring with Typescript tools is much easier and faster. As JavaScript is not a strongly typed language, we tend to work a lot with anonymous objects and that often makes us go blind when we take someone else's project. With TypeScript this stops happening because the data type is validated.

Follow me on social networks.

🎉 Twitter: https://twitter.com/ToSatn2
💡 Github: https://github.com/IvanZM123

Learn to use Decorators once and for all

Ivan Zaldivar — Tue, 12 Oct 2021 20:00:52 +0000

Hi Developers! How are you? I hope everyone is well. A few weeks ago I begin to investigate in depth how decorators really work. It's not that I've never worked with Decorators, of course I have, especially Angular and Nest, but I never bothered to understand how they work. So I decided to get down to let's do it. And the truth is, it is easier than it seems.

What are @Decorators?

A decorator is nothing more than a "typical" Javascript/Typescript function what to add additional functionalities to a declaration. When we say declaration, we mean classes, methods, parameters, accessor (getter) and properties. Now, we are going to explain each one of them.

Note: You will have noticed, that at no time did we mention functions, this is so because the main problem is dealing with the elevation of functions. Any attempt to wrap one function in another function breaks the hoist.

In the decorators we find two types, basic decorators and factories. How do we differentiate each one? I show it to you with the following image.

When we use factory it is because we need to pass some parameters, instead we use predefined values in the other.

Get started!

What we will do at this point is to create a class that will help us understand how decorators work.

interface Note {
  id: number;
  title: string;
  text: string;
}

class NoteUI{
  notes: Note[] = [
    {
      id: 1,
      title: "Docker",
      text: "🐳 Beautiful platform."
    },
    {
      id: 2,
      title: "Firebase",
      text: "🔥 Beautiful platform"
    }
  ]
}

Perfect this is all we need.

Class Decorators.

A Class Decorator is declared just before a class declaration. The class decorator is applied to the constructor of the class and can be used to observe, modify, or replace a class definition.

Important Announcement Should you choose to return a new constructor function, you must take care to maintain the original prototype. The logic that applies decorators at runtime will not do this for you.

Some considerations

The expression for the class decorator will be called as a function at runtime, with the constructor of the decorated class as its only argument.
If the class decorator returns a value, it will replace the class declaration with the provided constructor function.

Example

We build the decorator that adds a property of type Map and two methods, one for insertion and the other for deletion.

function Store() {
  return function (constructor: Function) {
    // Set new entities in the class.
    constructor.prototype.entities = new Map();

    // Add method for insert new entities.
    constructor.prototype.addOne = function (entity: Record<string, string>) {
      constructor.prototype.entities.set(entity.id, entity);
    }

    // Add method for remove entities.
    constructor.prototype.removeOne = function (id: string | number) {
      constructor.prototype.entities.delete(id);
    }
  }
}

Now, we add decorator in the class.

// Add decorator in the class.
@Store()
class NoteStore {}

const noteStore = new NoteStore();

// Add new entity.
noteStore.addOne({id:1, name:"Ivan"});

// Show all entities.
noteStore.entities.forEach(console.log);

// Delete a entity.
noteStore.removeOne(1);

// Show all entities.
noteStore.entities.forEach(console.log);

Method Decorators.

These decorators are characterized because they are declared just before our method. You have to understand that the declaration will be executed at runtime and receives the following parameters.

target: The first parameter contains the class where this method lives.
key: Name of the member (method)
descriptor: The Property Descriptor for the member.

Taking the previous class (NoteController) we add the following method.

// Create method decorator.
function Confirm(message: string): any {
  return function (
    target: Object,
    key: string | symbol,
    descriptor: PropertyDescriptor
  ) {
    let original = descriptor.value;

    descriptor.value = function (...args: any[]) {
      if (confirm(message)) return original.apply(this, args);
      return null;
    };
  };
}

class NoteUI {
  @Confirm("This item will be removed. Are you sure?")
  remove(element: HTMLElement | null): void {
    element?.remove();
  }
}

Explanation: The function of this decorator is to show a confirmation window with the message that we have passed as a parameter, if the user accepts, it removes the element, otherwise, nothing happens.

Parameter Decorators.

A Parameter Decorator is declared just before a parameter declaration. The parameter decorator is applied to the function for a class constructor or method declaration.

Considerations

A parameter decorator cannot be used in a declaration file, an overload, or in any other ambient context (such as in a declare class).

A parameter decorator can only be used to observe that a parameter has been declared on a method. So the return value of the parameter decorator is ignored.

In this case I did not find an example that was entirely useful, so I did not add anything. I'm sorry buddy. But if you have any good ones, feel free to comment on them, please.

Property Decorators.

A Property Decorator is declared just before a property declaration.

Receives the following parameters.

Target: Either the constructor function of the class for a static member, or the prototype of the class for an instance member
Key: property name in string format.

export type CapitalizeForm = "All" | "First";

export function Capitalize(option: CapitalizeForm = "First") {
  return function (target: any, key: string | symbol) {
    // Get value of the property.
    let value = target[key];

    // Assign getter.
    const getter = function () {
      return value;
    };

    // Capitalize first letter.
    function capitalize(word: string): string {
      return word[0].toUpperCase() + word.slice(1);
    }

    // Assign setter.
    const setter = function (data: string) {
      // Capitalize all first letter of a word by each space
      if (option === "All") {
        value = data
          .split(" ")
          .map((word) => capitalize(word))
          .join(" ");
        return;
      }
      // Capitalize only first letter.
      value = capitalize(data);
    };

    // Define property.
    Object.defineProperty(target, key, {
      get: getter,
      set: setter,
      enumerable: true,
      configurable: true
    });
  };
}

class NoteUI {
  @Capitalize()
  message: string = "hi developers!";
}

const noteUI = new NoteUI();

// @Capitalize("First")
console.log(noteUI.message); // Hi developers!

// @Capitalize("All")
console.log(noteUI.message); // Hi Developers!

Note: A property decorator cannot be used in a declaration file, or in any other ambient context (such as in a declare class).

What this decorator does is capitalize a text string. I already know the first letter or all the content.

Accessor Decorators.

An Accessor Decorator is declared just before an accessor declaration. The accessor decorator is applied to the Property Descriptor for the accessor and can be used to observe, modify, or replace an accessor’s definitions. You have to understand that accessor is nothing more than a getter of our class.

Note: An accessor decorator cannot be used in a declaration file, or in any other ambient context (such as in a declare class).

Example

//  Create a decorator.
export function Directory() {
  return function (
    target: any,
    key: string | symbol,
    descriptor: PropertyDescriptor
  ) {
    const original = descriptor.get;

    descriptor.get = function () {
      let result = original?.apply(this);
      result = Object.assign(
        {},
        ...result.map((item: any) => ({ [item.id]: item }))
      );
      return result;
    };

    return descriptor;
  };
}

class NoteUI {
  @Directory()
  get items() {
    return this.notes;
  }
}

const noteUI = new NoteUI();

console.log(note.items)
// { 1: { id: 1, title: "A title", text: "A description" } }

Explanation: This decorator have the responsibility of transform an array to object or directory.

Well, this is the end of this article. There is still a long way to go to be a pro with decorators, but it is only a matter of practice. Any questions or suggestions are welcome in your comments. I hope I have helped you friend.

Follow me on social networks.

🎉 Twitter: https://twitter.com/ToSatn2
💡 Github: https://github.com/IvanZM123

Resources that every developer should know.

Ivan Zaldivar — Sun, 03 Oct 2021 22:17:24 +0000

Hi guys! I have created this publication, because I wanted to share some tools or resources that I use in my day to day when I am developing an app. And some of these may work for you. Get started.

Online Code Editors.

Sometimes when we are developing an app, we need to perform a process, create an algorithm, and we do not want to perform in our project. We have the alternative of creating a new project and testing. But sometimes we need it to be fast, so online code editors are not great.

Codesandbox.

Is defined as "Where teams build faster, together
Create, share, and get feedback with collaborative sandboxes for rapid web development". Visit the following link: https://codesandbox.io

Codeopen.

Is defined as "The best place to build, test, and discover front-end code. CodePen is a social development environment for front-end designers and developers. Build and deploy a website, show off your work, build test cases to learn and debug, and find inspiration.". Visit the following link: https://codepen.io

Stackblitz.

Is defined as "The fastest, most secure dev environment on the planet.". Visit the following link: https://stackblitz.com

Other online code editors.

Testing.

When we have finished our app, it is time to test that everything we have done works correctly, and prevent things from breaking once in production.

Cypress.io

Cypress is a front-end automated testing tool built for the modern web. Cypress is based on a new architecture and runs on the same execution cycle as the application under test. As a result, Cypress provides better, faster, and more reliable tests for everything that runs in a browser. Cypress works on any front-end website or framework. Visit the following link: https://www.cypress.io

API Platform.

I use this tool when I am creating an API and I do not want to develop the Frontend at the time of API development, I know that there are extensions in VSCode such as REST Client. But I want to share some programs with you.

Postman.

Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster. You can download in the following link: https://www.postman.com

Insomnia.

Is defined as "Deliver high quality APIs through standards and collaboration with the Insomnia API design platform". You can download in the following link: https://insomnia.rest

Email Testing.

Many times when we want to incorporate email verification for our users, or we are developing an ecommerce, we send offers to our clients we need to send emails. Here are some tools that allow us to test this entire process.

Mailtrap.

This is one of the best tools that I have used when I am developing an app that needs to send emails. Click in the following link: https://mailtrap.io

Sendgrid.

Now sendgrid brings new functionalities, and one of these is to be able to test our emails before going to production. Click here: https://sendgrid.com/solutions/email-marketing/email-testing

Other tools.

https://www.htmlemailcheck.com

Mock Data.

Data generators. Many times when we are developing an app, we need to generate false records to be able to carry out tests, and check that everything works perfectly. Imagine that you are creating a virtual store, and it contains products, categories, customers, promotions, among others. If you realize there are many things, and it is a tedious and boring task, enter all these data. With these tools, you will take off that burden.

Mockaroo.

Mockaroo is a website where you can create thousands of test data in just seconds, modify the fields that your database models will have and more ... Personally, this is the one I use the most. Visit the following link: https://www.mockaroo.com

Generatedata.

Generatedata, on a website that allows you to create false data immediately, you can obtain streets, addresses, names, telephone numbers. In addition, to specify is what format you want, be it JSON, HTML, SQL and more. Visit the following link: https://generatedata.com

Other generate data.

Images.

It is very common to add images to our websites, but sometimes we want to have images in high definition. That is why I leave you some of the websites with the best images.

Undraw.

Allows you to add svg images. In addition, it allows you to make aesthetic changes so that they are in sync with our website. Visit following link: https://undraw.co/illustrations

Pexels.

This is one of the websites that I use the most to add images to my websites.

UiAvatars.

If you've ever wondered how Google can add an avatar with your first and last name, take a look here: https://ui-avatars.com

Unsplash.

Is defined as "The internet’s source of freely-usable images.
Powered by creators everywhere". Visit the following link: https://unsplash.com

Other websites.

Image Compression.

There are times that our images are too heavy, and that slows down the loading of our website, now is the time to minify our images. Or use Lazy-Loading.

TinyPNG.

This site allows us to compress images of all resolutions and extensions. Click in the following link: https://tinypng.com

Other websites.

https://ezgif.com/optipng

Favicon generators.

When we are about to deploy an application (or in development) we want to see an icon on the page. This icon is as follows.

Favicon.io

The only favicon generator you need for your next project. Quickly generate your favicon from text, image, or choose from hundreds of emojis. Website https://favicon.io

Others websites.

Colors.

The safest thing is that you already know these pages, but I'll leave them here anyway.

Flatuicolors.

In this page you will find beautiful colors for adding in your page, website or webapp. Visit the following link: https://flatuicolors.com

UiGradients.

This site, I use it normally when I need to have colors with gradients. Visit the following link: https://uigradients.com

Htmlcolorcodes.

Other websites.

Icons.

When we are developing an application we need to add icons to our buttons, card, toolbar and others.

Boxicons.

On this site you will find a lot of icons to add to your components. Click in the following link: https://boxicons.com

Font Awesome.

Well, every developer who is a few weeks old knows about this tool. 😂😂😂 I leave the link: https://fontawesome.com

Google Icons.

Google also offers very nice icons, it also allows filtering these by categories, names, etc; so that the icon we are looking for is faster. Click here: https://fonts.google.com/icons

Other websites.

Text generators.

The text generator is very useful when we are developing an application and we need to add filler text to see how it is being. And the truth is that it is quite tedious if we add it, especially when it is a large text. Here are some websites:

Loremipsum.io

Lorem Ipsum is a placeholder text commonly used in the graphics, graphics, and publishing industries to preview visual layouts and mockups. Click in the following link: https://loremipsum.io

Other websites.

At the time of making this post, they are the tools that I use in my day to day, at least the one I remember. If there are tools that you use, do not forget to comment, which is very helpful for all of us to grow as a community. Regards and until next time.

Follow me on social networks.

🎉 Twitter: https://twitter.com/ToSatn2
💡 Github: https://github.com/IvanZM123

Forem: Ivan Zaldivar

Don't make counters like that. 🛑

Introduction

Practical example

Solution 1: Create counter using Closure

Solution 2: Create counter using Class

Conclusion

Follow me ❤️

🚫 Stop using SWITCH, please 🙏

Problem

Solution

Conclusion

Follow me

Don't use Enums in Typescript, they are very dangerous 😨

Enum's emit code

Numeric types usafe

String ENUM's are named types

Solution

Conclusion

Follow me ❤️

Change the DB as you wish | Repository Pattern 📦

📦 Repository Pattern

What is a Repository Pattern? 🤔

What is a Dependency Injection? 💉

Follow me ❤️

Build Querystring like a pro

❤️ Follow me

ℹ️ What is a URLSearchParams?

🚀 Getting started

📖 Reading parameters

💾 Adding parameters

🗑️ Deleting parameters

🔥 Generating URL

💡 Conclusion

❤️ Follow me

Upload Files to Cloudinary with Node.js in 1 minute

❤️ Follow me

⚙️ Setup

🚀 Get started

❤️ Follow me

Integrating an ORM in Node.js in 5 easy steps

❤️ Follow me

🔥 Get started

1. Define model

2. Setting TypeORM

3. Connect database

4. Define repository

5. Consume the repository

✨ Conclusions

❤️ Follow me

Upload Files with any Cloud Service with just 10 lines of code

Table of contents

🤔 What is a Filesrocket?

🌈 Features

📝 Prerequisites

⚙️ Setup

🧑‍💻 Basic Usage

Examples 👀

🔥 Conclusions

❤️ Follow me

Learn to test your packages NPM locally.

Initialize project.

Testing locally.

Considerations.

Follow me on social networks.

Stop using Javascript

Typescript is a Superset of Javascript.

Explicit language.

Detection errors in codification time.

Code autocompletion.

Gradual adoption and easy to learn.

❤️ Generic types ❤️

High scalability.

Latest features.

Integration with any Framework, library or package.

Supported by Microsoft and Google.

Poo 🥰

Design patterns.

Conclusions.

Follow me on social networks.