
Typescript, developed by Microsoft, is a statically typed superset of JavaScript that has gained popularity for its ability to catch errors during development through its type-checking feature. It brings the benefits of static typing to JavaScript, along with other powerful features like interfaces, generics, and enums.

While browsing the [official docummentation](https://www.typescriptlang.org/docs), I discovered some underrated practices that are not so common to be found in Typescript codebases.

In this article, we will uncover these unnoticed features of Typescript that are often overlooked but can significantly enhance your development experience.

## Using 'this' as a type

In Typescript, the `this` keyword can be used as a type annotation in methods and constructors within classes and interfaces.

When used as a type, `this` refers to the instance type of the class or interface. This is particularly useful when you are dealing with classes and interfaces that are meant to be extended or implemented by other classes and interfaces.

Consider the following example:

```ts
interface Chainable {
  value: string;
  append(value: string): this;
}

class MyChain implements Chainable {
  value: string = "";

  append(value: string): this {
    this.value += value;
    return this;
  }
}
```

In this example, the `Chainable` interface has a method `append` that returns `this`. This means that any class that implements `Chainable` must have an `append` method that returns an instance of itself. The `MyChain` class implements `Chainable` and its `append` method returns `this`, which is an instance of `MyChain`.

This pattern is useful for creating fluent APIs or builder patterns where methods return the instance itself to allow chaining of method calls.

## Generic types inferred from parameter types

Typescript has a powerful feature called "generic types" that allows you to create reusable components that can work with a variety of data types.

One interesting aspect of generic types is that they can be inferred from the types of the parameters passed to a function. This means that you don't always have to explicitly specify the generic type when calling a function.

For example, consider the following function:

```ts
function identity<T>(arg: T): T {
  return arg;
}
```

Here, the generic type `T` is inferred from the type of the argument `arg`. So if you call the function like this:

```ts
const result = identity("hello");
```

The type of `result` will be inferred as `string`, because the argument `"hello"` is of type `string`.

## Discriminated unions

Discriminated unions, also known as tagged unions or algebraic data types, are a powerful feature in Typescript that allows you to define a type that can have different shapes based on a specific discriminant property.

This can be useful when you want to create a type that represents a value that can be one of several different possibilities.

To define a discriminated union, you need to use the `type` keyword and specify the discriminant property using the `discriminant` modifier. Here's an example:

```ts
type Shape =
  | { kind: "circle"; radius: number }
  | { kind: "rectangle"; width: number; height: number }
  | { kind: "triangle"; base: number; height: number };
```

In this example, the `Shape` type can represent a circle, a rectangle, or a triangle. The discriminant property is `kind`, which specifies the shape of the object. Depending on the value of `kind`, the shape object will have different properties.

## Type narrowing

Type narrowing is a technique in Typescript that allows you to narrow down the type of a variable based on certain conditions.

This can be useful when you want to perform different operations or access different properties based on the type of the variable.

One common way to narrow down the type of a variable is by using the `typeof` operator. For example:

```ts
function printValue(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}
```

In this example, the `printValue` function takes a parameter `value` that can be either a string or a number. Inside the function, we use the `typeof` operator to check the type of `value`. If it's a string, we call the `toUpperCase` method to convert it to uppercase. If it's a number, we call the `toFixed` method to round it to two decimal places.

## Conditionals

Typescript supports conditional types, which allow you to define types that depend on a condition. This can be useful when you want to create more flexible and reusable types that adapt to different situations.

Conditional types are defined using the `extends` keyword and the `?` operator. Here's an example:

```ts
type TypeName<T> = T extends string
  ? "string"
  : T extends number
  ? "number"
  : T extends boolean
  ? "boolean"
  : T extends undefined
  ? "undefined"
  : "object";
```

In this example, the `TypeName` type takes a generic parameter `T` and uses conditional statements to determine the type name. If `T` is a string, the type name is `"string"`. If `T` is a number, the type name is `"number"`. If `T` is a boolean, the type name

Sure, here's a section about using "typeof keyof":

## Leveraging 'typeof keyof'

The `typeof` operator in Javascript can be used to get the type of a variable, property, or object. When combined with Typescript `keyof`, it becomes a powerful tool for creating more dynamic and flexible types.

This can be particularly useful when you want to create a function that accepts only the keys of a specific object as arguments.

Consider the following example:

```ts
interface Person {
  name: string;
  age: number;
}

const john: Person = {
  name: "John",
  age: 25,
};

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const name: string = getProperty(john, "name"); // OK
const age: number = getProperty(john, "age"); // OK
const address: string = getProperty(john, "address"); // Error: Argument of type '"address"' is not assignable to parameter of type '"name" | "age"'.
```

In this example, the `getProperty` function takes an object and a key of that object as arguments. The key is of type `K`, which is defined as `keyof T`. This means that it can only be a key of the object type `T`. The function returns the value of the property with the key `key` from the object `obj`.

This pattern allows you to create more type-safe code by ensuring that you only access properties that exist on the object, and that the value you get is of the correct type.

### Conclusion

As we continue to sail the Typescript seas, it's clear that its depths are vast and its treasures are plentiful. So, keep your spyglass focused, continue charting your course, and keep pushing the boundaries of what you can discover with Typescript.



[Artillery](https://www.artillery.io), a powerful open-source, modern, and easy-to-use load testing toolkit, allowed us to simulate hundreds of concurrent users interacting with various endpoints, helping us identify potential bottlenecks and optimize our code for scalability.

In this article, we'll explore how to use Artillery to stress-test your Node.js programs. We'll cover a quick setup, basic terminology, and provide some code examples.

### Getting Started

To get started, you'll need Node.js and npm installed on your system. Once you have them, you can install Artillery globally using the following command:

```bash
npm install -g artillery
```

### Basic Terminology

Before we dive into code examples, let's familiarize ourselves with some basic Artillery terminology:

- **Scenario**: A scenario represents a specific user journey or interaction with your application. It defines the flow of events, such as making HTTP requests.

- **Flow**: A flow is a series of steps that Artillery will execute as part of a scenario. It's essentially a sequence of HTTP requests.

- **Request**: A request is an HTTP call to a specified endpoint, including methods like GET, POST, PUT, etc.

- **Config** : A config file (artillery.config.yml) is used to define settings like target URLs, duration of the test, and concurrency.

### Writing Your First Artillery Test

Let's walk through an example of load testing a simple Node.js server that serves a JSON response in 3 simple steps.

#### Step 1: Install Dependencies and create a Node.js Server

First, we create a simple Node.js server with Express to serve a JSON response. Let's install the dependencies.

```bash
npm init -y
```

```bash
npm install express
```

And then create a file **server.js** with the code below.

```js
// server.js
const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.json({ message: "Hello, World!" });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});
```

#### Step 2: Write an Artillery Configuration

Create an **artillery.config.yml** file in your project's root directory with the following content:

```yaml
config:
  target: "http://localhost:3000"
  phases:
    - duration: 60
      arrivalRate: 5
scenarios:
  - flow:
      - get:
          url: "/"
          expect:
            - statusCode: 200
```

In this configuration, we define the target URL, specify a test duration of 60 seconds, and set an arrival rate of 5 virtual users per second. We also define a single scenario with a flow that sends a GET request to the root path and expects a status code of 200.

#### Step 3: Run the test

On the terminal of your project, run the test using the following command:

```bash
artillery run artillery.config.yml
```

Artillery will start sending requests to your Node.js server based on the configuration you provided. After a while, it will show the results of the test. For the scenario above, we made 300 requests in a minute, with 5 requests each second, all of which succeeded.

```bash
All VUs finished. Total time: 1 minute, 0 seconds

--------------------------------
Summary report @ 10:00:52(-0300)
--------------------------------

http.codes.200: ................................................................ 300
http.request_rate: ............................................................. 5/sec
http.requests: ................................................................. 300
http.response_time:
  min: ......................................................................... 13
  max: ......................................................................... 39
  median: ...................................................................... 16
  p95: ......................................................................... 29.1
  p99: ......................................................................... 34.1
http.responses: ................................................................ 300
vusers.completed: .............................................................. 300
vusers.created: ................................................................ 300
vusers.created_by_name.0: ...................................................... 300
vusers.failed: ................................................................. 0
vusers.session_length:
  min: ......................................................................... 14.7
  max: ......................................................................... 58.8
  median: ...................................................................... 18.4
  p95: ......................................................................... 33.5
  p99: ......................................................................... 37.7
```

### Advance usage

Artillery provides a wide range of options for more complex load testing scenarios, including customizing request headers, handling cookies, and simulating different user behaviors.

- **Adding Headers:** You can add headers to your requests like this:

```yaml
- get:
    url: "/"
    headers:
      Authorization: "Bearer your_token"
```

- **Simulating User Behavior** You can create more complex user flows by chaining requests together:

```yaml
- post:
    url: '/login'
    json:
      username: 'testuser'
      password: 'password123'
  - get:
    url: '/dashboard'
    expect:
      - statusCode: 200
```

Form examples you may check Artillery Docs in the [Test Scripts](https://www.artillery.io/docs/reference/test-script) section.

## Conclusion

With its intuitive configuration and flexibility, Artillery can simulate various user behaviors and stress-test your applications effectively. By incorporating Artillery into your development process, you can ensure that your Node.js applications perform reliably under real-world conditions.

You can download the code from this article at my Github: [Artillery Example](https://github.com/codearis/artillery-example), feel free to play around.



We know that writing clean and maintainable code is crucial for the success of any project. In this article, we'll explore some common bad TypeScript React practices and provide examples of how to improve them.

### Descontruct and avoid using 'any' types

By explicitly defining the prop types, you make your code more readable and catch potential errors during development. Also, destructuring props directly in the function arguments enhances code clarity and helps you quickly understand which props are being used.

```tsx
// 🚫 Bad

const MyComponent = ({ prop1, prop2 }: any) => {
  // ...
};
```

```tsx
// ✅ Good

interface Props {
  prop1: string;
  prop2: number;
}

const MyComponent: React.FC<Props> = ({ prop1, prop2 }) => {
  // ...
};
```

### Using index as key

Using a unique identifier as the key prop helps React efficiently track and update elements in a list.

```tsx
// 🚫 Bad

const MyComponent = () => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};
```

```tsx
// ✅ Good

const MyComponent = () => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};
```

### Cleanup side effects inside 'useEffect' hook

If your useEffect function performs any subscriptions or intervals, make sure to clean them up to prevent memory leaks.

```tsx
// 🚫 Bad

useEffect(() => {
  const interval = setInterval(() => {
    console.log("Interval tick");
  }, 1000);
}, []); // Missing cleanup code for interval.
```

```tsx
// ✅ Good

useEffect(() => {
  const interval = setInterval(() => {
    console.log("Interval tick");
  }, 1000);

  return () => {
    clearInterval(interval); // Cleanup interval on component unmount.
  };
}, []);
```

### Memoizing values

useMemo is a React hook that allows you to memoize the result of a function so that it's only recomputed when the dependencies (specified as the second argument) change. This can help optimize performance by preventing unnecessary calculations or computations.

You should use it when you have a function that's computationally expensive and its result doesn't need to be updated on every render. Be mindful not to overuse it, as it can lead to unnecessary complexity.

```tsx
// 🚫 Bad

const [number, setNumber] = useState(0);

// Define a function that does a heavy computation
const calculateSquare = (num) => {
  console.log("Calculating square...");
  return num * num;
};

// Calling it directly without memoization and triggering multiple rerenders
const squaredNumber = calculateSquare(number);
```

```tsx
// ✅ Good

const [number, setNumber] = useState(0);

// Define a function that does a heavy computation
const calculateSquare = (num) => {
  console.log("Calculating square...");
  return num * num;
};

// Use useMemo to memoize the result of the function
const squaredNumber = useMemo(() => calculateSquare(number), [number]);
```

### Conclusion

By following these best practices, you'll be well on your way to writing clean and maintainable TypeScript React code. Remember, clean code is not just about aesthetics; it's about setting a foundation for efficient collaboration and long-term project success. Happy coding!



tldr: Both are great.

First, we have to understand the major differences: Tailwind is a CSS framework, while Chakra UI is more like a lower level design system framework, as stated by developer Lazar Nikolov.

Comparing them is like looking for differences between apples and bananas. But how about the use cases? Let's dive in some of them.

## ChakraUI

[ChakraUI](https://chakra-ui.com/) is a popular open-source component library for building user interfaces in, and only, React applications. It provides a set of pre-styled and customizable components, such as buttons, forms, modals, and more, that can be easily used in your React app. Key features and aspects of Chakra UI includes:

- **A component library for React applications:** It provides a set of pre-styled and customizable components like buttons, forms, modals, etc., which can be easily used in your application.

```jsx
import { Button } from "@chakra-ui/react";

const ExampleButton = () => {
  return <Button colorScheme="teal">Click me</Button>;
};

export default ExampleButton;
```

- **Custom design system:** It comes with a theme system that allows you to customize the look and feel of your application easily. This makes it convenient for maintaining a consistent design across your project.

- **Accessbility:** ChakraUI places a strong emphasis on accessibility by providing accessible defaults for all its components. This can be particularly important for ensuring your application is usable by as many people as possible.

- **Focused on React**: ChakraUI is primarily designed for React applications, so if you're working with React, it can be a very convenient choice.

## Tailwind

[Tailwind](https://tailwindcss.com/) is a highly customizable, utility-first CSS framework that provides a set of low-level utility classes to style your HTML directly. Unlike traditional CSS frameworks that come with pre-defined components, Tailwind focuses on giving you the building blocks (in the form of utility classes) to create your own designs.

- **Utility-first:** It provides a set of utility classes that can be used to style your HTML directly, without the need to write custom CSS. This lead to rapid prototyping and development.

```jsx
const ExampleButton = () => {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Click me
    </button>
  );
};

export default ExampleButton;
```

- **Highly Customizable:** While Tailwind provides a default set of utility classes, it is highly customizable. You can use their configuration file to add, remove, or modify existing classes to fit your specific needs.

- **Untied:** Unlike ChakraUI, which is primarily designed for React, Tailwind can be used with any front-end framework or even without a framework at all.

- **Flexibility:** Tailwind provides a wide range of utility classes for common design patterns. This can lead to a lot of flexibility in how you approach your UI.

- **Learning curve:** While the utility-first approach can lead to rapid development, it is easier for developers who are used to traditional CSS.

## Which One to Choose?

The choice between ChakraUI and Tailwind CSS ultimately depends on your project's requirements and your personal preference as a developer.

ChakraUI is a great choice if you're primarily working with React and want a component library that enforces accessibility and provides a theming system out of the box.

Tailwind CSS is more flexible and can be used with any front-end framework. It's a good choice if you prefer a utility-first approach and want fine-grained control over your styles.

In some cases, you might even use both together. For instance, you could use Tailwind CSS for utility classes and ChakraUI for complex React components. Remember, there's no one-size-fits-all solution, and it's always a good idea to experiment and see which one works best for your specific project and team.



As an experienced developer, you're no stranger to the vast landscape of programming languages. Among the plethora of options available, two powerhouses often stand out: Javascript and Golang (or just Go).

### Javascript: The language of the web (and everything)

Javascript is ubiquitous in web development, enabling interactivity, animations, and dynamic content on websites. It's a versatile, high-level, and dynamically typed language. Javascript's strengths lie in its ability to run directly in web browsers, making it an essential tool for front-end development. With the advent of Node.js, it has also made significant strides in server-side programming.

```js
function greet(name) {
  return `Hello, ${name}!`;
}

const message = greet("John");
console.log(message);
```

### Golang: Simply performatic

Golang, on the other hand, is a statically-typed, compiled language designed with performance in mind. Developed by Google, it focuses on simplicity and efficiency, making it an ideal choice for system-level programming, cloud-based services, and microservices architecture.

```go
package main

import "fmt"

func greet(name string) string {
    return fmt.Sprintf("Hello, %s!", name)
}

func main() {
    message := greet("John")
    fmt.Println(message)
}
```

### What are the differences?

The most apparent distinction between Javascript and Golang is their type system. Javascript is dynamically typed, meaning you don't need to specify variable types explicitly. This can lead to flexibility but can also introduce unexpected behavior. Golang, on the other hand, is statically typed, catching type-related errors during compilation.

Performance is another critical factor. Golang's compiled nature and minimalist runtime environment result in faster execution times compared to Javascript, especially in scenarios where computational speed is paramount.

### Go performance advantage

Consider a scenario where you're building a high-performance backend service that needs to handle a massive amount of concurrent requests. Golang's built-in concurrency features, combined with its efficient garbage collection, make it a standout performer. This is where Golang shines, providing the speed and efficiency required for such tasks.

### Combining forces: the ultimate tooling

The strengths of Javascript and Golang can be synergistically leveraged in a single project. For example, you can use Javascript for front-end development, creating dynamic and interactive user interfaces. Meanwhile, Golang can power the backend, handling heavy computational tasks and ensuring optimal performance.

Integrating Javascript and Golang can be achieved through frameworks like Fiber, which is a fast, lightweight, and Express-compatible web framework for Go. This allows you to build robust and performant web applications, combining the best of both worlds.

In the realm of modern development, versatility and performance are paramount. Javascript's ubiquity in web development and Golang's raw speed make them an exceptional pair. By harnessing the strengths of both, you can create applications that are not only interactive and user-friendly but also capable of handling high loads with efficiency.

As an experienced developer, having both Javascript and Golang in your toolkit equips you to tackle a wide array of projects, from dynamic web applications to high-performance backend services. Embrace this dynamic duo and watch your projects soar to new heights.


blog

Exploring underrated features of Typescript

Artillery: Load test your Node.js programs

Writing clean and efficient React code

ChakraUI and Tailwind CSS: differences and use cases

Javascript + Golang: The sweet spot in full stack development