Forem: Matías Hernández Arellano

Advanced Git Commands and Workflows: A Comprehensive Guide for Developers

Matías Hernández Arellano — Wed, 06 Sep 2023 05:51:28 +0000

Introduction

In software development, Git is more than just a tool—it's an essential lifeline for developers. It's the cornerstone of version control, allowing multiple people to work on a project without stepping on each other's toes. While the basic commands lay the groundwork, the advanced commands and workflows constitute the building blocks that add robustness to your version control capabilities. This article is your architectural blueprint to these building blocks, designed specifically for mid-senior engineers and engineering managers who are ready to elevate their Git proficiency.

Deep Dive into Advanced Git Commands

In this section, we will delve into some of the advanced Git commands that can make your life as a developer more manageable and more efficient. We'll explore commands like interactive rebase, cherry-pick, bisect, reflog, and blame. Each command serves a unique purpose and can help you in different scenarios. Let's look at these commands, how they work, and where they can be helpful.

Interactive Rebase

Picture Git as a time machine. The interactive rebase command is the control panel of this machine, enabling you to travel back in time, alter the events (commits), and proceed along the new timeline. It's a powerful tool that gives you complete control over your commit history. For instance, if you're working on a feature with a messy commit history, you can use interactive rebase to clean it up, making it more understandable for your team.

Here's how you can do it:

# Start an interactive rebase
git rebase -i HEAD~3

# Text editor opens up for you to modify the commits
# You can change the order of the commits, squash them together, or even delete them
# Save and close the editor to start the rebase

The interactive rebase command opens up a text editor where you can see a list of the commits that you're about to rewrite. The commits are displayed in reverse order, with the oldest commit at the top. You can change the order of the commits, squash them together, or even delete them.

Cherry-pick

Visualize picking apples from a tree, but you desire only the ripest ones. The cherry-pick command is your tool for this task. It lets you choose a commit from a branch (the tree) and apply it to another. This is handy when you've fixed a bug in a development branch and must use the fix in the production branch without integrating any other changes.

Here's an example of how to use cherry-pick:

# Cherry-pick a commit
git cherry-pick <commit-hash>

The cherry-pick command applies the changes introduced by the commit with the provided hash onto the current branch. This can be particularly useful when applying a bug fix from the development branch to the production branch without merging the entire branch.

Bisect

Hunting for a bug in a commit is akin to finding a needle in a haystack. The bisect command is your high-tech metal detector. By marking a good commit (no needle) and a bad commit (with a needle), Git bisect will guide you to the offending commit most efficiently.

Here's how you can use bisect to find a bug:

# Start a bisect session
git bisect start

# Mark the current state as bad
git bisect bad

# Mark the last known good state
git bisect good <commit-hash>

# Git guides you to the offending commit

The bisect command uses a binary search algorithm to find the commit that introduced a bug. It's a powerful tool that can save you a lot of time when trying to track down a bug.

Reflog

If Git is a time machine, then reflog is the black box recorder. It keeps track of all the time travel you've done. Did you accidentally delete a branch? No worries, Reflog has got you covered.

Here's how you can use reflog:

# See the reflog
git reflog

# Recover a lost commit
git checkout <commit-hash>

The reflog command shows you a list of all the actions that you've taken in the Git repository. It's a powerful tool that can save you from disastrous mistakes.

Blame

The blame command is akin to a detective that helps you trace back the origins of every line in a file. It's a potent tool when you're trying to comprehend why a particular line of code was added, who did it, and when.

Here's how you can use blame:

# Use blame on a file
git blame <file>

The blame command shows an annotation of the file, with information about which commit last modified each line. This can be extremely useful when trying to understand a file's history.

Exploring Advanced Git Workflows

In this section, we will explore some advanced Git workflows that can help you manage your projects more efficiently. We'll look at the Gitflow Workflow, the Forking Workflow, and the Feature Branch Workflow. Each of these workflows has its strengths and can be useful in different scenarios.

Gitflow Workflow

Picture managing a bustling city. The Gitflow Workflow is your city planning guide. The main and develop branches are akin to the city's main arteries. Feature, release, and hotfix branches are the smaller streets that feed into these main arteries. This workflow ensures that traffic (changes) flows smoothly, no matter how busy it gets.

Here's an example of how you can use Gitflow:

# Start a new feature
git flow feature start <feature>

# Finish the feature
git flow feature finish <feature>

The Gitflow Workflow is a robust workflow that's well-suited for managing large projects. It uses two parallel long-lived branches to record the history of the project: the Main branch for production-ready code and the developer branch for integration of features.

Forking Workflow

This is like a potluck dinner. Everyone brings (forks) their dish (repository), makes changes (adds their secret sauce), and then offers it to the host (original repository) for inclusion.

Here's how you can contribute to a project using the Forking Workflow:

# Clone the forked repository
git clone <repository>

# Make changes and commit them
git commit -am "made some changes"

# Push changes to your fork
git push origin main

# Open a pull request on GitHub

The Forking Workflow is commonly used in open-source projects. It allows anyone to contribute to the project without access to the central repository. The changes are proposed using a pull request, which can be reviewed and discussed before being merged into the project.

Feature Branch Workflow

Think of your codebase as a museum exhibit. The main branch is the exhibit open to the public. Feature branches are the artists' studios where new exhibits (features) are prepared.

Here's how you can add a new feature using the Feature Branch Workflow:

# Start a new feature
git checkout -b <feature>

# Make changes and commit them
git commit -am "add new feature"

# Switch to the main branch
git checkout main

# Merge the feature into the master
git merge <feature>

The Feature Branch Workflow is a simple workflow that's great for solo developers and small teams. It uses small, focused branches to develop new features or fix bugs. This keeps the main branch clean and your code base stable.

Conclusion

Mastering Git's advanced commands and workflows is akin to unlocking a new level in a game. It opens up new possibilities and new ways to control and manage your code. Whether you're navigating the intricate history of a long-lived project or coordinating a major release, these tools offer the control and flexibility needed to handle complex scenarios. So, dive in, explore, and level up your Git game.

Here's how you can add a new feature using the Feature Branch Workflow:

# Start a new feature
git checkout -b <feature>

# Make changes and commit them
git commit -am "add new feature"

# Switch to the main branch
git checkout main

# Merge the feature into the master
git merge <feature>

Conclusion

Using SoundScribe to Maximize Your Writing Productivity

Matías Hernández Arellano — Wed, 12 Jul 2023 00:50:57 +0000

As a content creator, every second of your day counts. Each moment is an opportunity to create, expand, and refine your ideas. Let's face it though, writing is time-consuming. Between formatting, grammar checks, and the ever-present specter of writer’s block, transforming your ideas into engaging content can often feel like an uphill trek. But what if you had a powerful tool, an AI-powered system called SoundScribe, designed to streamline the process?

Rather than staring at a blank page as minutes tick by, Soundscribe allows you to record your thoughts directly into your browser. Just speak, and allow the system to capture those ideas as they spring into existence. Not just ideas recorded within your workspace, either. With an upcoming mobile app feature, you can capture those bursts of creativity wherever inspiration strikes, ensuring no idea slips away unnoticed.

But Soundscribe doesn't just transcribe. Taking its support a notch higher, it leverages AI technology to analyze the tone and pacing of your speech. The process feels as natural and swift as having a conversation with a friend, free-flowing and unscripted. Yet, in your words and speech, our system identifies the unique cadences that differentiate your voice, ensuring that your essence is not lost in the transition from the spoken to the written word.

The result: a draft rich with your own distinctive touches, that only needs a final layer of polish before it's ready for your audience. It won't be surprising if you find your content production process becoming much more efficient.

So, how can you integrate Soundscribe into your existing writing routine? Start by recording quick thoughts as they come to you, then let Soundscribe handle the transcription in the background. You can return to the tool whenever you choose, to find your thoughts transcribed and waiting for you.

This is where you come in to add the finishing touches. Delete parts that don't work, expand on interesting points, and make sure everything is in the right place. Think of Soundscribe as a virtual writing partner that never tires, ready to listen and capture your thoughts at a moment's notice.

In essence, Soundscribe combines the freedom of conversation with the discipline of writing. It takes care of the heavy lifting, transcribing and organizing your spoken thoughts so that you can focus on the big picture – refining and polishing your narratives into compelling, high-quality content.

Jumpstart your writing productivity today with SoundScribe because every word matters and every moment counts.

Join to the waitlist now.

Breaking Down the Writing Barriers with SoundScribe

Matías Hernández Arellano — Tue, 11 Jul 2023 20:35:53 +0000

Writing is an art, a medium of expression that paves the way for communication and sharing ideas. But at times, the process of writing can be daunting. The blank, expectant page waiting for our thoughts to spill onto it can be intimidating, even paralyzing. As a writer, the dreaded writer's block is an all-too-familiar monster, creeping in when you least expect it, transforming that initial spark of creativity into a frustrating exercise in futility. It was during one of these instances when the idea behind Soundscribe, a revolutionary AI-powered transcription and writing tool, first came to life.

Speaking my thoughts always came naturally and faster to me, as it does for many people. There is fluidity in speech that is often hard to capture in writing. Plus, conversing directly with your device takes less time than having to type out every idea. The simple act of recording audio, dictating lines of thought directly into a browser, sparked the genesis of what Soundscribe is today. Initially, it was a way for me to simplify my note-taking, to turn my spoken words into a pool of ideas that could be molded further into a more structured form. But it soon evolved into much more – a tool to aid with content creation itself.

Soundscribe was born out of a need – a need for a tool that would allow us to keep content creation simple, straightforward, and effective, a need to overcome the barriers that often make the writing process seem unnerving. Traditional transcription services usually stop at converting audio-to-text, but Soundscribe sought to do more.

Offering more than mere transcription, Soundscribe seizes the ideas within your spoken words and transforms them into a variety of engaging written content. The ease of use when recording thoughts directly in the browser and the swift transcription that follows, provides an effortless leap from thought to textual format, ultimately breaking down the wall that many writers face.

Though still under heavy development, Soundscribe already shows its potential to simplify and redefine my content creation process. But the vision for SoundScribe spans beyond individual use. It's not about changing the way one person writes. It's about revolutionizing the entire writing process for everyone who has ever wanted to share their ideas with the world.

In essence, Soundscribe is not merely a tool, but a companion for creators. It’s a bridge connecting one's creative thought process with the digital world, aiming to assist content creators, from blogs to research articles, social media posts to in-depth reports. The vision is clear; to provide a one-step solution that takes creators from idea to content, simplifying the journey and letting them focus on refining their narrative.

Explore the potential of Soundscribe. Overcome writing barriers with the power of your voice. Bypass writer's block, simplify your content creation process, and let your ideas flow in the way human expressions are most genuine: through speech.

How to Use Static Code Analysis Tools to Improve Your TypeScript Codebase

Matías Hernández Arellano — Mon, 12 Jun 2023 13:15:44 +0000

How to Use Static Code Analysis Tools to Improve Your TypeScript Codebase

Static code analysis tools can revolutionize how you write and maintain your TypeScript codebase. As a senior JavaScript or TypeScript engineer, team leader, or engineering leader, leveraging these tools is critical to optimizing your codebase's quality, maintainability, and scalability. In this article, we will explore different static code analysis tools, and how to introduce them into your TypeScript codebase and use them effectively.

What is Static Code Analysis?

Before we dive into static code analysis tools' applications and benefits, let's first define what static code analysis means. Static code analysis is the process of examining your code without executing it. This evaluation focuses on code structure, syntax, semantics, and other factors helping you identify potential bugs, performance issues, security vulnerabilities, and more.

For instance, static code analysis can help you find and fix issues early in the development cycle, reduce technical debt, improve code consistency, and avoid errors and bugs commonly encountered in complex applications.

Benefits of Using Static Code Analysis Tools in a TypeScript Codebase

Implementing static code analysis tools in your TypeScript codebase can enhance your team's productivity, code maintainability, and consistency. Here are some benefits that you can achieve with these tools:

Improve Code Quality: Code analysis detects common coding issues that would otherwise remain unnoticed during development and deployment.
Enhance Consistency: By helping enforce coding standards, your team can work more effectively and reduce time spent debugging the code.
Save Time and Cost: The earlier you can solve issues, the less expensive they are to address.

How to Choose Static Code Analysis Tools for TypeScript Codebases

Several static code analysis tools are designed for TypeScript codebases that provide type-checking, customizations, integrations, and reports. Choosing the right tool begins with understanding your unique needs and preferences. However, these key factors are good to consider when selecting these tools:

Support for TypeScript: Ensure the tool is compatible with TypeScript.
Customization: Can you customize the tool to fit your project requirements?
Integration: Will it integrate smoothly with your project's current workflow?
Reports: What types of reports does the tool generate?

Specific Static Code Analysis Tools for TypeScript Codebases

Here are three of the most popular static code analysis tools for TypeScript codebases.

ESLint

ESLint is a popular open-source tool that checks the code for bugs, errors, and code smells before compilation. It comes with a straightforward configuration and support for TypeScript type-checking. It also allows customization, configuration rules, and plugins based on coding standards and project requirements.

One noteworthy feature of ESLint is that it allows you to specify the ECMAScript version and the specific rules that are compatible with that version. Due to its flexibility, you can use ESLint as a linter for both TypeScript and JavaScript, making it an attractive choice for teams that use multiple languages with one tool.

ESLint also supports frameworks like React, Vue, and Angular and integrates with popular editors like Visual Studio Code, Atom, and WebStorm.

TSLint

TSLint is another popular static code analysis tool designed for TypeScript. Unlike ESLint, it is primarily intended for TypeScript codebases, making it a perfect choice for those solely dealing with TypeScript.

TSLint has many rules, enabling developers to create custom rules that fit their coding standards and preferences. It also runs on every IDE with TypeScript support and can be integrated into your team's workflow through tools like Webpack and Grunt.

Furthermore, TSLint is an excellent tool for using Angular, as it provides extensive support for the Angular framework and helps enforce its best practices.

SonarQube

SonarQube is a dynamic code analysis tool that supports TypeScript and other programming languages. It provides an extensive set of plugins, enabling it to identify common coding issues, track technical debt, and measure code quality over time. Additionally, it provides a comprehensive dashboard that helps identify problems, making it easy to fix them quickly.

A great feature of SonarQube is that it provides code coverage analysis, which helps determine the amount of code covered by tests. This allows teams to identify gaps in test coverage and prioritize areas that need more testing.

How to Effectively Introduce Static Code Analysis Tools into a TypeScript Codebase

Introducing new tools can be challenging, but these tips can help you start effectively.

Start Small

Introduce the tool to your team by starting small. Run the tool on small codebases to acquaint your team with its strengths and weaknesses.

Customize and Configure

Not all tools are created equal. Customize and configure the tool to meet your coding standards, project requirements, and team preferences.

Automate the Process

Automate the testing of static code analysis tools to reduce human error and inconsistency in the testing process.

Integrate into Existing Workflows

Effective integration into your current workflow is crucial to getting the most out of static code analysis tools. Consider integrating the tool into your IDE or command line for maximum efficiency.

Invest in Training and Education

Training and educating team members on the tool's importance and how to interpret the reports can maximize its impact and potential.

Address Issues Consistently

Consistent addressing of issues ensures the project's maintainability and increases efficiency in finding and addressing similar errors in the future.

Regular Review and Refinement

Regularly review and refine the configuration and adjust the tool to accommodate any changes in your workflow.

Real-World Examples

Here are some real-world examples of how static code analysis tools helped developers improve their TypeScript codebases:

Airbnb

Airbnb is a hospitality and travel company that also provides a platform for hosts to list rental properties and for travelers to find accommodations. Their codebase is massive, with millions of lines of code in over 3000 repositories.

To maintain a quality codebase, Airbnb uses ESLint and incorporates custom rules for their preferred formatting and naming conventions. ESLint helped them detect common coding issues and reduce the number of bugs in their codebase.

Checkmarx

Checkmarx is a software security company providing vulnerability assessment and management services. They help identify and fix security issues early in the development cycle, reducing the cost and impact of security incidents.

Checkmarx integrated TSLint into their DevOps pipeline to automate their static code analysis process. This helped them enforce coding standards, detect code smells, and identify security vulnerabilities early on.

Conclusion

Static code analysis tools can be handy in a TypeScript codebase to improve code quality, consistency and save time and cost. Implementing these tools can enhance a team's productivity, and they are essential in optimizing codebase quality, maintainability, and scalability. Several static code analysis tools are available for TypeScript, and choosing the right one begins with understanding a project's unique needs and preferences. Introducing these tools into a TypeScript codebase should be done gradually, customized, configured to fit a specific project's requirements, automated, integrated, and reviewed regularly. Real-world examples from companies like Airbnb demonstrate the benefits of using these tools to maintain a quality codebase, detect common coding issues, and reduce the number of bugs in a massive codebase.

Simplifying JavaScript Development with TS-Pattern and Pattern Matching

Matías Hernández Arellano — Wed, 26 Apr 2023 22:42:07 +0000

Este artículo fue originalmente escrito en https://matiashernandez.dev

Have you ever wished for better pattern matching in JavaScript? Look no further! We have a game changer for TypeScript developers - TS-Pattern. This powerful library simplifies pattern matching and type checking in TypeScript, allowing you to create cleaner, more readable and maintainable code. In today's post, we will explore TS-Pattern by creating a reducer function to be used with the useReducer hook. But, before diving into the code, make sure to check out the TS-Pattern library on GitHub and give the repository a star!

Pattern matching is a powerful feature commonly found in functional programming languages. It allows you to test a value against a set of patterns (usually defined through algebraic data types) and execute different code blocks based on the matched pattern. With this feature you can simplify the code and makes it more declarative and intuitive to read, write and maintain.

Sadly JavaScript don't have this feature as part of the languge, but you can still use it through the addition of libraries such as TS-Pattern.

Currently there is a proposal to add pattern matching, but is still in stage 1 at TC39

Overview of TS-Pattern

TS-Pattern is a library that brings pattern matching and full type safety support to your TypeScript code. The primary goal is to transform your code into a pattern-matching type of code that is fully type-safe and with type inference. Check out the TS-Pattern GitHub repository to learn more, and make sure to give GitHub user Gabriel Vernal a follow on Twitter.

Getting Started with TS-Pattern

To demonstrate how TS-Pattern works, let's create a reducer function that can be used with the useReducer hook within a React component. First, let's import the necessary libraries:

You can install ts-pattern directly from npm


import React from 'react';
import { match } from 'ts-pattern';

Next, create a state type to hold the following (example) information:

editing: a boolean
modals: an object with two boolean properties, a and b
data: a Record<string, unknown> type

For example:


type State = {
  editing: boolean;
  modals: {
    a: boolean;
    b: boolean;
  };
  data: Record<string, unknown>;
};

Now, define a union type for the possible action types:


type ActionTypes =
  | 'toggleEditing'
  | 'enableEditing'
  | 'disableEditing'
  | 'toggleModelA'
  | 'toggleModelB'
  | 'updateData';

Building Actions

Usually, when creating the list of possible actions that can be used with the useReducer hook you write a thing like this


type Actions = 
    | { type: "toggleEditing" }
    | { type: "toggleModalA", payload: { id: number {

And you repeat that as many times as actions types you have, but it can be tedious and prone to error, so since we already have the actions as a separate union, let's use that to create an utility type to generate the actions


type CreateAction<T extends ActionTypes, P = undefined> = P extends undefined
  ? { type: T }
  : { type: T; payload: P };

This utility type accepts a generic T which extends ActionTypes. If the payload (P) is undefined (value by default), it will return an object with only a type property; otherwise, it will return an object with type and payload properties.

Now you can use this utility type to define the different actions:


type Actions =
  | CreateAction<'toggleEditing'>
  | CreateAction<'enableEditing'>
  | CreateAction<'disableEditing', string>
  | CreateAction<'toggleModelA', { id: string }>
  | CreateAction<'toggleModelB'>
  | CreateAction<'updateData', Record<string, unknown>>;

Creating Reducer Function

Time to really use ts-pattern by creating a reducer function


function reducer(state: State, action: Action): State {
  return match(action)
    .with({ type: 'toggleEditing' }, (event) => {
      // ...
    })
    .exhaustive();
}

Here, we're using the match function from TS-Pattern to match the incoming action and handle each case. The .exhaustive() method ensures that every possible case is handled.

The usual way to do this is by using a switch statement like the following


function reducer(state: State, action: Action): State {
    switch(action.type) {
            case 'toggleEditing':
                    return state 
        }
        return state
}

Can you spot the bug there?
It's easy to omit cases and Typescript doesn't give you any hint about it.

Also, there is another complexity. What if you need to "switch" on two different properties?

Let's say that form some actions you need perform different logic based on the payload, you may end with something like this


function reducer(state: State, action: Action): State {
    switch(action.type) {
            case 'toggleEditing':
                    return state 
        case 'toggleModalA':
            if(action.payload) {
                            // perform logic A 
                                return state 
                        }
                        if(action.payload === undefined) {
                            // perform logic B
                            return state 
                        }
        }
        return state
}

And that can become really complex to read and maintain.

Let's go back to using pattern matching:


function reducer(state: State, action: Actions): State {
  return match({state,...action})
    .with({ type: "toggleEditing"}, toggleEditing)
    .with({ type: "enableEditing"}, (arg) => state)
    .with({ type: "disableEditing"}, () => state)
    .with({ type: "toggleModalA"}, toggleModalA)
    .with({ type: "toggleModalB"}, () => state)
    .with({ type: "updateData"}, () => state)
    .exhaustive()  
}

Notice that each "code branch" execute a function, this function receives as arguments all the data that was used in the match method, in this case, each "callback" will receive an object like {state: State, type: ActionTypes, payload?: SOMETHING}

That means, that we can extract the logic into a separate function, pass the corresponding arguments. As result, the logic for each code branch will be a pure function that depends only on the arguments.

But, writing the types for each function arguments can be tedious, and we can do better by extracting the process into another utility type.

This utility type will generate teh correct arguments based on the action type.


type MatchEvent<T extends ActionTypes> = {
  state: State;
} & Extract<Action, { type: T }>;

Now, you can define the action handling functions with the correct types:

const toggleEditing = (event: MatchEvent<'toggleEditing'>): State => {
  // ...
};

const toggleModelA = (event: MatchEvent<'toggleModelA'>): State => {
  // ...
};

Using Reducer in a React Component

Finally, use the useReducer hook in a React component:


const App = () => {
  const [state, dispatch] = React.useReducer(reducer, initialState);

  // Use `dispatch` to update the state based on the action types
  dispatch({ type: 'toggleEditing' });

  // ...
};

And that's it! You have now successfully implemented pattern matching with TS-Pattern in a React application. This technique allows for cleaner, more elegant code that is easier to read, maintain, and test. Enjoy exploring more possibilities with TS-Pattern and let us know what you think in the comments!

If you have any questions or need help, you can find me on Twitter or GitHub.

✉️ Únete a Micro-bytes 🐦 Sígueme en Twitter ❤️ Apoya mi trabajo

¿Qué es Promise.allSettled y como usarlo?

Matías Hernández Arellano — Thu, 23 Mar 2023 13:59:06 +0000

Este artículo fue originalmente escrito en https://matiashernandez.dev

En la versión ECMAScript 2021, el estándar agregó un nuevo método estático al objeto Promise. Este método te permite manejar múltiples promesas de forma concurrente, pero a diferencia de Promise.all este método
espera a que todas las promesas hayan sido establecidas sin importar si estas fueron resueltas o rechazadas.

En el articulo anterior revisamos como ejeuctar Promesas de forma concurrente utilizando Promise.all, [Revisalo aqui][https://matiashernandez.dev/blog/post/ejecuta-codigo-asincrono-de-forma-concurrente-en-javascript]

Y si quieres saber mas sobre Promesas, puedes revisar este articulo introductorio: ¿WTF es una promesa en JS?

Este método es muy similar a Promise.all, en efecto comparten la misma sintaxis y forma de uso, lo que cambia es el resultado que retorna.

const promise1 = getData("userId")

const promise2 = getData("anotherUser")

const result = await Promise.allSettled([ promise1, promise2])

Cabe destacar que el orden del arreglo retornado corresponde con el orden de las promesas utilizadas como argumento

Lo importante de entender es que Promise.allSettled:

Esperará por todas las promesas sin importar su resultado
El resultado de cada promesa será de la forma {status: "fulfilled", value: <result>} o {status: "rejected", reason: <el error>}

Esto te permite filtrar los resultados basándose en el estado de cada promesa resuelta.

const promise1 = getData("userId")

const promise2 = getData("anotherUser")

const promise3 = performLongOp()

const promise4 = anotherOp()

const result = await Promise.allSettled([ promise1, promise2, promise3, promise4 ])

const fulfilled = results.filter(
  (p) =>p.status === 'fulfilled'
)

Si estás usando Typescript entonces tendrás que aplicar una función de predicado para que el filtro define el tipo correcto
(p): p is Extract<typeof p, { status: 'fulfilled' }>

¿Cuál es la diferencia entre Promise.allSettled y Promise.all?

Promise.allSettled es tu opción si lo que buscas es ejecutar múltiples operaciones asíncronas de forma concurrente cuando estas no dependen entre sí y tampoco dependen de si una u otra fue exitosa en su operación.
También te será útil si lo que buscas es conocer el resultado de cada operación asíncrona.
Promise.all es completamente rechazado si una o más promesas utilizadas como argumentos también lo fueron.

✉️ Únete a Micro-bytes 🐦 Sígueme en Twitter ❤️ Apoya mi trabajo

Ejecuta código asíncrono de forma concurrente en Javascript

Matías Hernández Arellano — Mon, 20 Mar 2023 15:33:38 +0000

Este artículo fue originalmente escrito en https://matiashernandez.dev

Las Promesas en Javascript son la forma standard de ejecutar código asíncrono, y son por naturaleza concurrentes.

> Quieres saber más sobre como trabajar con promesas? Te invito a leer esté artículo: [¿WTF es una promesa en JS?](https://matiashernandez.dev/blog/post/wtf-que-es-una-promesa-en-javascript)

Dado que una Promesa no pausa o detiene la ejecución de tu código, es sencillo llamar múltiples promesas al mismo tiempo.


getData("userId").then(result => {})

getData("anotherUser").then(result =>{})

Estas dos promesas se ejecutarán "al mismo" tiempo, pero, no tienes forma de controlar cuando serán resueltas, además de que, si son varias promesas ejecutadoas, el código se verá algo complejo de leer entre tanto use the then y catch.

Aquí es donde muchos echan mando de async/awaitç

A modo resumen, la sintáxis async/await te permite pausar la ejecución de una promesa hasta que esta sea resuelta, creando un flujo de datos sencillo de entender.

const result1 = await getData("userId")

const result2 = await getData("anotherUser")

Ahora, tienes control sobre cuando cada promesa termina y es resuelta, y puedes utilizar las variables result1 y result2 directamente sin tener que usar un callback como en el caso anterior (dentro de then).

Pero ahora, las promesas ya no se ejecutan en paralelo.

Para saber más sobre async/await te invito a leer este otro artículo
Entendiendo async/await

Entonces, como ejecutar promesas de forma concurrente pero mantener un flujo "sincrono"?

Promise.all

El objecto Promise tiene varios métodos estáticos asociados, uno de ellos es Promise.all.

Este método recibe como argumento un arreglo de promesas y retorna una sola que será resuelta cuando todas las otras lo hayan hecho.

Como resultado, tendrás que lidear solo con una promesa y además, mantendrás la capacidad de ejecutar las promesas de forma concurrente.

const promise1 = getData("userId")

const promise2 = getData("anotherUser")

try {
    const [ result1, result2 ] = await Promise.all([ promise1, promise2])
}catch(error) {
     console.error(error)
        // Este error será el de alguna de las promesas que falló
}

Revisa la documentación de Promise.all en MDN

El único problema que encontrarás al utilizar Promise.all es que si una de las promesas que pasaste como argumento falla, también lo hará Promise.all.

Además, ten encuenta que Promise.all tiene un comportamiento de fallo rápido, es decir, en el momento en que una de las promesas falle, Promise.all fallará y cancelara las promesas restantes.

SI no te gusta utilizar Promise.all por algún motivo en particular, puedes conseguir un resultado muy similar utilizando async/await pero con una pequeña variación a la hora de escribir.

Recuerda, el objetivo es ejecutar las promesas de forma concurrente.

const promise1 = getData("userId")

const promise2 = getData("anotherUser")

try {

        const result1 = await promise1
    const result2 = await promise2

}catch(error) {
     console.error(error)
        // Este error será el de alguna de las promesas que falló
}

Ese código ejecutará ambas promesas antes de pausar por el resultado de cada una. El único problema es que ahora eres tu quien decide que promesa esperar primero.

La ventaja de Promise.all es que el tiempo de ejecución será igual al de la promesa mas lenta (en vez de sumarse como en el caso secuencial), y también que será el navegador quien se encarge de "esperar" cada promesa.

✉️ Únete a Micro-bytes 🐦 Sígueme en Twitter ❤️ Apoya mi trabajo

¿Qué son los Type Predicates en Typescript?

Matías Hernández Arellano — Fri, 24 Feb 2023 12:46:46 +0000

Este artículo fue originalmente escrito en https://matiashernandez.dev

Una pieza importante de trabajar con tipos en Typescript es el proceso conocido como el estrechamiento de tipos (type narrowing). ¿Qué es? Es el proceso de afirmar qué tipo de variable está en una parte particular del flujo de datos.

En este artículo revisaremos una forma de estrechar tipos: las funciones de predicado de tipo (Type Predicates Functions).

El estrechamiento de tipos nos permite tomar un tipo que es demasiado amplio y refinarlo a un tipo más específico.

Este es un concepto crítico porque puede prevenir errores y hacer que nuestro código sea más expresivo y legible.

Comprendiendo las funciones de predicado de tipo

Las funciones de predicado de tipo son funciones que devuelven un valor booleano y tienen una sintaxis de retorno de tipo particular. Un predicado de tipo es una aserción de tipo que verifica si un objeto tiene una propiedad específica o un conjunto de propiedades. Esto permite a TypeScript estrechar (o refinar) el tipo de un objeto basado en el resultado de la función.

Aquí hay un ejemplo de una función de predicado de tipo:

function isString(x: unknown): x is string {
  return typeof x === 'string';
}

En este ejemplo, la función isString toma un argumento x de tipo unknown. La función luego verifica si el typeof de x es string, y devuelve true o false en consecuencia.

El tipo de retorno de la función está anotado como x is string, lo que asegura que x es de tipo string si la función devuelve true.

Luego puedes usar la función dentro de tus bloques condicionales o en cualquier otro lugar del código que necesites. El resultado de usarlo será que TypeScript reconocerá el argumento utilizado como el tipo afirmado.

function reverseString(x: unknown){
  // Aquí x se infiere como unknown
  if (isString(x)) {
    // Aquí x se infiere como un string 
    return x.split('').reverse().join('');
  }
    return null
}

En este ejemplo, la función reverseString toma un argumento x de tipo unknown, que podría ser cualquier valor. La función luego llama a la función de predicado de tipo isString para comprobar si x es una string.
Si isString(x) devuelve true, entonces x se trata como una string y se puede invertir usando los métodos de string split, reverse y join.

Ventajas y desventajas

¿Las funciones de predicado de tipo se ven bien, verdad? Pero, como todo en la vida, hay pros y contras en cada decisión que tomes.

Una de las principales ventajas de las funciones de predicado de tipo es que proporcionan una forma de expresar relaciones de tipo complejas de manera legible y comprensible.
Te permiten definir funciones personalizadas que no solo realizan una tarea específica, sino que también devuelven un valor booleano que indica a TypeScript si una variable es de un tipo particular. Esto puede hacer que tu código sea más expresivo y auto documentado.

También pueden ser útiles cuando necesita realizar comprobaciones de tipo dinámicas en un objeto. Por ejemplo, imagine que tiene una función que toma un objeto como argumento, pero no está seguro de si el objeto tiene una propiedad específica. Con una función de predicado de tipo, puede verificar la presencia de esa propiedad y reducir el tipo del objeto para incluir esa propiedad.

Por el lado negativo, las funciones de predicado de tipo pueden ser más difíciles de configurar y usar que los bloques condicionales. Le requieren definir funciones personalizadas y puede requerir más código para poner en marcha.

Pero el problema más importante de estas funciones es un riesgo, hay una forma fácil de introducir errores en el proceso. Puede escribir predicados incorrectos que lleven a una reducción de tipo inesperada o no deseada.
Esto puede resultar en errores en tiempo de ejecución o comportamientos inesperados, que pueden ser difíciles de diagnosticar y solucionar.

Los predicados de tipo se asemejan al uso (y peligros) de usar as para las afirmaciones de tipo, puede mentir al sistema de tipos, es decir, “sé más sobre este tipo que el compilador” y forzar que el tipo sea el deseado, como ejemplo:

function isString(x: unknown): x is string {
  return typeof x === 'number';
}

El ejemplo anterior verifica si x es un número, y si eso es true, entonces el predicado dice que la variable es una string. Si más tarde usa ese predicado de tipo, TypeScript asume que la variable es una string y se pierde la seguridad de tipo.

Mejores prácticas para usar funciones de predicado de tipo para la reducción de tipo
Esta no es de ninguna manera una lista exhaustiva de "buenas ideas" para aplicar al trabajar con predicados de tipo, pero son una buena regla general.

Defínelos cuidadosamente y asegúrese de que estén correctamente tipados.
Usa nombres claros y descriptivos para las funciones de predicado de tipo.
Úsalos solo cuando sean apropiados y necesarios.
Considera enfoques alternativos para la reducción de tipo, como bloques condicionales o uniones discriminadas.
Usa herramientas de análisis de código y pruebas automatizadas para detectar posibles errores o inconsistencias en el programa.

Conclusión

En resumen, las Funciones de Predicado de Tipo son utiles para reducir tipos en TypeScript, lo que puede mejorar la legibilidad del código, la mantenibilidad y reducir errores. Sin embargo, debes tener precaución y comprender los posibles inconvenientes de su uso. Al adherirse a las prácticas y pautas recomendadas, se puede evitar comprometer la integridad del sistema de tipos y crear aplicaciones más confiables y resistentes con TypeScript. En general, las Funciones de Predicado de Tipo pueden ser una excelente adición a su caja de herramientas de TypeScript si se utilizan de manera juiciosa y responsable.

✉️ Únete a Micro-bytes 🐦 Sígueme en Twitter ❤️ Apoya mi trabajo

Javascript Rendering Patterns

Matías Hernández Arellano — Mon, 13 Feb 2023 10:48:01 +0000

Este artículo fue originalmente escrito en https://matiashernandez.dev

Web development is a constantly evolving field that is full of new and innovative solutions to tackle the ever-growing needs of modern websites. With the growth of the web, there have been numerous advances in how websites are built and rendered, giving rise to several rendering patterns and metaframeworks.

In this article, we'll take a look at what rendering patterns and metaframeworks are, why there are so many of them, and explore some of the most popular options available today.

What are Rendering Patterns?

When it comes to web development, the term "rendering" refers to the process of generating and displaying content on a web page. In this context, "rendering patterns" refer to different approaches and techniques used to create and deliver web content to users.

There are a variety of rendering patterns, each with its own set of benefits and trade-offs. Some patterns are geared towards static, content-driven websites, while others are designed for dynamic, interactive applications. Some patterns focus on providing a fast and efficient user experience, while others prioritize flexibility and ease of development.

The choice of rendering pattern often depends on the specific needs and requirements of a project. For example, if your website is primarily static and doesn't require frequent updates, you might opt for a simple static site approach. On the other hand, if your website needs to display dynamic data, you might consider using a server-side rendering (SSR) pattern or a single-page application (SPA) pattern.

Regardless of the specific pattern, the ultimate goal is to create a seamless, user-friendly experience that delivers the content your users are looking for as quickly and efficiently as possible.

What are Metaframeworks?

Metaframeworks are a type of framework that provides a set of abstractions and tools to help developers build web applications. They can provide a number of benefits over traditional frameworks, including improved developer experience, increased productivity, and better performance.

Metaframeworks differ from traditional frameworks in that they focus on providing a set of abstractions and tools that developers can use to build their applications, rather than providing a complete and prescriptive solution. This allows developers to have more control over the architecture and structure of their applications, and to tailor their solutions to the specific needs of their projects.

In web development, metaframeworks often provide abstractions for server-side rendering, client-side rendering, and data management, as well as tools for managing the build process, optimizing performance, and handling deployment. Some popular metaframeworks include Next.js, Gatsby, Nuxt, and SvelteKit.

The use of metaframeworks can help to simplify the development process and improve the overall performance and scalability of web applications. They can also help to make it easier for teams of developers to work together on a project, as they provide a common set of tools and abstractions that everyone can use.

Ultimately, metaframeworks are an important tool for modern web development, and can help to make it easier and faster to build high-quality, scalable web applications. Whether you are a solo developer or part of a large team, metaframeworks can help you to build better web applications more quickly and with greater ease.

Why are there so many Rendering Patterns?

The proliferation of rendering patterns in web development can be attributed to the constant evolution of technology and the diverse needs of businesses and developers. With the advent of new and improved technologies, developers are presented with a multitude of options for building websites and web applications. Each technology has its own unique set of strengths and weaknesses, and it is up to the developer to choose the best tool for the job at hand.

Moreover, different businesses have different requirements for their websites and web applications, and a single technology or solution may not meet the needs of every business. As a result, developers are constantly searching for new and innovative solutions that can provide the best results for their clients. This drives the creation of new rendering patterns and the improvement of existing ones, as developers strive to find the most efficient and effective ways to build web applications.

In addition, the open-source nature of web development has enabled developers to freely share their solutions and innovations with the community. This sharing of knowledge and expertise has accelerated the development of new rendering patterns, as developers learn from each other and build upon existing solutions to create even better ones.

It is also important to note that the wide availability of web development tools and libraries has made it easier for developers to experiment with new approaches and technologies. This has encouraged developers to push the boundaries of what is possible with web development and has led to the creation of new rendering patterns.

Rendering Patterns Overview

Here's an overview of some of the most popular rendering patterns:

Static Site: The OG of web development, when things were simple, you could just upload a bunch of static files to a service through FTP. This is still a popular option today, and there are several frameworks, such as Hugo, Jekyll, and A11y, that make it easy to create a static site. However, it's also possible to build a static site "by hand" without the use of any framework.
MPA (Multi-Page Application): This pattern emerged as a solution to the dynamic data problem faced by static sites. MPA uses server-side code to generate HTML based on dynamic data. This is how many senior developers first got started with servers and databases, and popular frameworks include Laravel, Rails, and Django.
SPA (Single-Page Application): This is the golden era of the main JavaScript frameworks and addresses the navigation issue faced by MPA. SPA ships a large amount of JavaScript to render all aspects of the application, but it also has its own set of problems, such as poor SEO, too much JavaScript, and loading spinner issues. Popular SPA frameworks include Angular, React, Vue, Svelte, and Solid.
SSR (Server-Side Rendering): This pattern involves initial rendering being done on the server (usually with Node or another engine), after which client-side JavaScript takes over to provide the SPA experience. Popular SSR frameworks include Next.js, Nuxt, and SvelteKit. However, this pattern requires a server.
SSG (Static Site Generation): This pattern, known as SSG, is similar to the first one but allows for a better developer experience by using a web framework, dynamic data, etc. The framework will "compile" the site into multiple static pages. Gatsby is the king in this area, but other frameworks like Next.js, Nuxt, and SvelteKit can also implement this pattern.
ISR (Incremental Static Regeneration): ISR is a newer approach that tries to solve some of the problems with SSG. With ISR, you can deploy a static site and then rebuild individual pieces of it "on the fly" using cache. This way, you can enjoy the benefits of a static site while also allowing for some dynamic content.

Vercel is a platform that supports ISR out-of-the-box. This makes it a great option for developers who want to implement ISR without having to set up and manage a server themselves.

The main advantage of ISR is that it solves the problem of long build and deployment times that comes with SSG. With ISR, you can deploy a static site and then rebuild individual pieces as needed, which greatly reduces the time it takes to deploy changes.

However, it's worth noting that ISR still requires a server to function, which can be a drawback for some users.
Partial Hydration is a rendering pattern that aims to solve the problem of the first load being "not usable" in Hydration patterns. With Partial Hydration, the server renders the HTML and ships it to the browser, but only the required JavaScript is lazy loaded, making the hydrated page interactive by pieces.

This approach can greatly improve the user experience, as it allows the user to start interacting with the site while the rest of the JavaScript is still being loaded.
The Islands Architecture is an approach that was first popularized by @ksylor and is now being (re)popularized by @astrodotbuild. The idea behind Islands Architecture is to prevent JavaScript from taking over the entire page and instead isolate the pieces that require it.

With this approach, you start with static HTML and use JavaScript to hydrate isolated components. This allows you to keep using the "view layer" of your choice, whether that's React, Svelte, or Solid, and write your application as you normally would. The result is a static site with pieces of interactivity, or "islands."

One of the benefits of Islands Architecture is that it can improve the overall performance of the site, as only the necessary JavaScript is loaded.
Resumability is a relatively new rendering pattern that is gaining popularity among developers. It was popularized by @QwikDev and coined by @mhevery. The idea behind Resumability is to avoid Hydration altogether by rendering on the server and sharing both the static files and the framework state.

In this way, the application does not "start over" when it is loaded, but instead "continues where it left off" on the server. The best analogy for this is a virtual machine that can be paused, moved to another place, and then continue exactly where it was left.

Resumability has the potential to greatly improve the user experience, as it allows for a smoother, more seamless transition from server to client. However, it's worth noting that this approach is still relatively new, so there may be some challenges to overcome as the technology continues to evolve.

Conclusion

With so many rendering patterns and metaframeworks available, it can be overwhelming to choose the right one for your project. It's important to consider your specific use case and requirements before making a decision, as each rendering pattern and metaframework has its own pros and cons. Ultimately, the best choice will depend on your specific needs and goals.

✉️ Únete a Micro-bytes 🐦 Sígueme en Twitter ❤️ Apoya mi trabajo

Deep Cloning in JavaScript: The Modern Way. Use structuredClone

Matías Hernández Arellano — Thu, 26 Jan 2023 13:39:20 +0000

A few days ago, I learned that Javascript has a native way of creating deep copies of an object.

This article will explore the native method for deep cloning an object in JavaScript. We will also discuss the difference between shallow and deep copying in JavaScript.

What is a deep copy or clone?

Javascript objects are usually stored in memory and can only be copied by reference, meaning, that a variable does not store an object in itself, but rather an identifier that represents the memory location of the object. Therefore, objects cannot be copied in the same way as primitives.

There are two types of copy within the Javascript world: shallow and deep.

Shallow Copies

A shallow copy is a copy of an object that only copies the reference to the object, not the actual data. If the original object is modified, the copy will also be modified.

For example, let's say we have an object called "originalObject" that looks like this:


let originalObject = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "Anystate"
  }
}

If we create a shallow copy of this object using the Object.assign() method, like this:


let shallowCopy = Object.assign({}, originalObject);

The shallowCopy object will look exactly the same as the originalObject. However, if we modify the address property of the originalObject, the address property of the shallowCopy will also be modified because both objects are pointing to the same address object:


originalObject.address.city = "NewCity";
console.log(shallowCopy.address.city); //Output: "NewCity"

Deep copies

On the other hand, A deep copy creates a new object with its own set of data, separate from the original object. If the original object is modified, the copy will not be affected.

For example, let's say we have an object called "originalObject" that looks like this:


let originalObject = {
  name: "John",
  age: 30,
  address: {
    street: "123 Main St",
    city: "Anytown",
    state: "Anystate"
  }
}

To create a deep copy of this object, we can use the JSON.parse(JSON.stringify(obj)) method.


let deepCopy = JSON.parse(JSON.stringify(originalObject));

If we now modify the address property of the originalObject, the address property of the deepCopy will not be modified because they are completely different objects:


originalObject.address.city = "NewCity";
console.log(deepCopy.address.city); //Output: "Anytown"

Please note that JSON.parse(JSON.stringify(obj)) method is not suitable for complex objects with circular references. In this case, you can use a library such as lodash, underscore or a specific deep copy function.

Native deep cloning: `structuredClone`

As shown in the previous example, Javascript has ways to work around the deep copy problem. In the example, it uses the serialization strategy. Basically, it transforms an object into a JSON representation and then parses it again.

But, now the Web API has a new way of solving the deep cloning issue by using the structuredClone global method.

This method was recently added to expose the structured clone algorithm, a way to create deep copies of Javascript values that can be used, for example, to transfer JS values from or to a WebWorker.

This algorithm has been part of the HTML spec for a long time but only as a tool used by other APIs. Before structuredClone was added, you have to do some workarounds to use it, like using postMessage to send messages to “ourselves”.

Structured Cloning is an algorithm created and used to transfer values from one real into another, like the postMessage call that send a message to another window or Webworker.

This is a global method that handles the creation of deep copies of any given value.


const deepCopy = structuredClone(originalObject)

Let’s review a quick example.


const original = {
    site: "https://matiashernandez.dev",
    published: new Date(),
    sociales: [{
        name: "twitter",
        url: "https://twitter.com/matiasfha"
    },{
        name: "youtube",
        url: "https://dub.sh/channel" //Subscribe!
    }]
}

const copy = structuredClone(original)

That is all it takes to create a full/deep copy of the original object.

Limitations

Even tho the structured cloning algorithm address many of the issues with JSON.stringify it still has some limitations that you need to be aware of.

Can’t clone Function objects: If the object you want to clone contains functions, they will be discarded and a DataCloneError will be thrown.
Can’t clone DOM nodes
Can’t clone some properties like:
- lastIndex from a Regexp object
- setters, getters, and similar metadata
- the prototype chain will not be duplicated

Alternatives

structuredClone is relatively, but the need for deep cloning values has been there forever. So let’s check some alternatives to the structuredClone method that the web development community has been using

Object.assign and spread syntax.

Object.assign has been the way to create copies for a long time, but here we are talking about deep copy, but Object.assign can only provide shallow copy, and is not able to copy nested objects or arrays.

The spread syntax was added on ES2018 to the properties of objects to provide a convenient way to perform shallow copies, is the equivalent of Object.assign so you can treat them as equals.


const original = {
    site: "https://matiashernandez.dev",
    published: new Date(),
    socials: [{
        name: "twitter",
        url: "https://twitter.com/matiasfha"
    },{
        name: "youtube",
        url: "https://dub.sh/channel" //Subscribe!
    }]
}

const copy1 = Object.assign({}, original)
const copy2 = { ...original }

// Error, this will update the publishedDate property of the original object
copy1.published.setTime(10) 

// Error, this will add an empty object to the original object
copy2.socials.push({})

JSON.parse and JSON.stringify

This has been the trick to get a copy that includes nested objects and arrays; it has a really good performance but is still doesn’t entirely solve the problem of the deep copy.


const original = {
    site: "https://matiashernandez.dev",
    published: new Date(),
    socials: [{
        name: "twitter",
        url: "https://twitter.com/matiasfha"
    },{
        name: "youtube",
        url: "https://dub.sh/channel" //Subscribe!
    }]
}

// The publishedDate property is now a string
const copy = JSON.parse(JSON.stringify(original))

The strategy here is first to transform the object into a string using JSON.stringify this method will serialize each property of the object recursively so, all the nested properties will also be serialized.

Then it uses JSON.parse to “un-serialize” the serialized object and generate a new object from the source.

The problem with this strategy is the serialization process. Every object in Javascript has a property method named toString that implements a way to transform the object into a string representation of itself. Is this implementation the one used by JSON.stringify to serialize each property, the problem comes with properties like the Date object used in the original object, it’s serialized to a string, and a string cannot be transformed back to Date by JSON.parse.

JSON.stringify can only handle basic objects, arrays, and primitives. Other types can be handled in unpredictable ways. For example, Dates are converted to strings, while Sets are simply converted to {}.

lodash.cloneDeep

This has been the “defacto” way of getting a deep copy, but it means you need to add a dependency just to be able to perform a deep copy.

If you import the function, it will cost you 5.3K gzipped, or if you add the entire library, it will be 25k gzipped. That’s a lot if you only want to be able to create deep clones.

Browser Support

The best part of using structuredClone is not only that it has good performance and achieves the task in a good way, but is supported in all major browsers and engines.

Check the canIUse site

Conclusion

If you need to create deep clones of any value in Javascript, reach for the structuredClone method and “Use the Platform”. It is time to ditch the old habits of using workarounds and embrace a better JS ecosystem.

Should You Learn Typescript? What Parts Should You Learn?

Matías Hernández Arellano — Sun, 22 Jan 2023 02:13:54 +0000

Este artículo fue originalmente escrito en https://matiashernandez.dev

Learning Typescript can be daunting at first. So why should you know it? Or even better, how should you learn it?.

As a web developer, you know that Typescript is growing in popularity and usage, but the web development landscape is already complex. You may be wondering why to add more complexity to the mix.

You may find Typescript content with incredible feats, bending the type system to build complex solutions to some problems, and you may wonder: do I need to learn all of this? Nowadays, types have become a two-headed monsters. You have the type-level programming algorithms with all of that complexities, but also you have the everyday Javascript with superpowers, annotations, and some utilities from the language.

Back to fundamentals

Let's remember why Typescript was invented. It was created 10 or 11 years ago. Some, something like that. But with the only purpose of improving the developer experience. At that time, the DX was awful and Typescript, adding static analysis and type safety to the mix, was able to improve that process.

Offering good developer experience, like a suitable auto-complete good documentation, go to definition, rename and refactoring, and catching bugs earlier, creating a more streamlined. Because that bugs will never reach the user.
So we have this two-layer language, the "every day" or not type-level programming and the type-level algorithms.

You'll find pattern-matching type conditionals, recursion map types, and more at the type level.
And in the everyday task script, you'll find type rotations and maybe some type utilities like Pick, Omit, Exclude, keyof, extends, etcetera.

It's at this level where the real power of Typescript resides because that is the thing you might need.

Typescript should be out of your way to help and allow you to create your incredible application. The library authors, on the other hand, are the ones that need to worry about the obscure features of Typescript because they need to build a flexible and robust product that can support all of the use cases.

Offering the tools required to allow Typescript to give you reasonable type inference. So you write functions with a few types of annotations and are done. You have all of the benefits you want.

So, let me be honest: I enjoy challenging myself and writing type-level algorithms or solutions. But in my regular job or even some of my side projects, I have yet to encounter the need to note complex solutions.

An example of that complexity is the query string parser that I have in a few videos that you can find in my Youtube Channel. That allows you to parse the query string and generate the object type you need to ensure that the thing in the query string is something you need.

But most of the time, you'll not write that because you'll use some router library like React Router or Tanstack Router and are those libraries, the ones that implement something like that example in a better way. To offer you the solutions, you need to pass the query string.

So you should not be worried about all of that.

Conclusion

In conclusion, TypeScript can be complex at first, but you should focus on the parts that really matter, the parts that will most impact your web development process, starting with type script in your everyday projects.

Start by annotating, adding some good type utilities, and choosing good libraries with reasonable type inference and type safety if you think it's fun to challenge yourself with type level. Go all in. It will be fun, and you will learn a lot.

This is a blog post based on a video on my youtube channel. If you like the content please subscribe to find out more.

✉️ Únete a Micro-bytes 🐦 Sígueme en Twitter ❤️ Apoya mi trabajo

How to integrate TailwindCSS with SvelteKit

Matías Hernández Arellano — Mon, 16 Jan 2023 19:42:18 +0000

Este artículo fue originalmente escrito en https://matiashernandez.dev

There are two types of people in the dev world. The ones that love tailwind and the ones that hate it.

If you are in the first group, then you probably want to use Tailwind in most of your projects because of the benefits you find in it.

I’m using Tailwind on my site and for most of my side projects and demos. But, sometimes, adding TailwindCSS to your projects can be annoying or confusing. In this article, you’ll find how to integrate TailwindCSS with SvelteKit.

This article focus on one approach, if you want to check a different path to accomplish the same I recommend you to check this article by Ender Bonnet

First, a bit of background.

SvelteKit, is the meta-framework that uses Svelte to handle the UI rendering processes (kind of Nextjs for React). It provides different features and functionalities that help you to develop full-stack applications, like router, SSR, build optimizations, CSR, and more. Check the official documentation to read more about it.

On the other hand for this integration, there is TailwindCSS, and unless you’re living under a rock, you should at least listen about it. TailwindCSS and is an utilitiy-first CSS framework that offers a pack full of classes that can be composed to create any design. It is like writing CSS without writing CSS.

Now, to the core of this content.

For this tutorial, I’ll show you how to use a utility package named svelte-add to handle the integrations.

Integrate TailwindCSS into a pre-existing SvelteKit project

One way to add TailwindCSS is to integrate it into a project you already have. Let’s assume that you already have a SvelteKit project and know how to use the terminal.

The only thing you need is to run these two commands

npx svelte-add@latest tailwindcss pnpm install

And you’re done.

The first command (the one that calls npm or pnpmx ) is the one in charge of setting things, creating configuration files, and updating your configurations to use Tailwind (which is a postcss plugin).

The last one, is to update your dependencies (use the package manager of your choice here).

After that, you’re ready to go and use TailwindCSS in your .svelte files.

Integrate TailwindCSS into a new SvelteKit project

The other way of getting this integration done is by creating a project from scratch - In fact, this is the preferred method - What you need here is to execute a different command than the one that the official documentation mention.

npm create @svelte-add/kit@latest my-awesome-app

That will show you a prompt to select any integration you have

svelte-add support several integrations like: Bulma, Coffeescript, TailwindCSS, MDsveX, SCSS, etc

For this tutorial, pick TailwindCSS or directly define that in the command line like

npm create @svelte-add/kit@latest my-awesome-app -- --with tailwindcss

That will generate the skeleton SvelteKit application with Tailwind ready to be used. You now need to install dependencies and move on to building your incredible application.

And that’s a wrap, using svelte-add is an easy way to integrate 3rd party libraries/configurations into your SvelteKit project.

✉️ Únete a Micro-bytes 🐦 Sígueme en Twitter ❤️ Apoya mi trabajo

Forem: Matías Hernández Arellano

Advanced Git Commands and Workflows: A Comprehensive Guide for Developers

Introduction

Deep Dive into Advanced Git Commands

Interactive Rebase

Cherry-pick

Bisect

Reflog

Blame

Exploring Advanced Git Workflows

Gitflow Workflow

Forking Workflow

Feature Branch Workflow

Conclusion

Using SoundScribe to Maximize Your Writing Productivity

Breaking Down the Writing Barriers with SoundScribe

How to Use Static Code Analysis Tools to Improve Your TypeScript Codebase

How to Use Static Code Analysis Tools to Improve Your TypeScript Codebase

What is Static Code Analysis?

Benefits of Using Static Code Analysis Tools in a TypeScript Codebase

How to Choose Static Code Analysis Tools for TypeScript Codebases

Specific Static Code Analysis Tools for TypeScript Codebases

ESLint

TSLint

SonarQube

How to Effectively Introduce Static Code Analysis Tools into a TypeScript Codebase

Start Small

Customize and Configure

Automate the Process

Integrate into Existing Workflows

Invest in Training and Education

Address Issues Consistently

Regular Review and Refinement

Real-World Examples

Airbnb

Checkmarx

Conclusion

Simplifying JavaScript Development with TS-Pattern and Pattern Matching

Overview of TS-Pattern

Getting Started with TS-Pattern

Building Actions

Creating Reducer Function

Using Reducer in a React Component

¿Qué es Promise.allSettled y como usarlo?

¿Cuál es la diferencia entre Promise.allSettled y Promise.all?

Ejecuta código asíncrono de forma concurrente en Javascript

Promise.all

¿Qué son los Type Predicates en Typescript?

Comprendiendo las funciones de predicado de tipo

Ventajas y desventajas

Conclusión

Javascript Rendering Patterns

What are Rendering Patterns?

What are Metaframeworks?

Why are there so many Rendering Patterns?

Rendering Patterns Overview

Conclusion

Deep Cloning in JavaScript: The Modern Way. Use structuredClone

What is a deep copy or clone?

Shallow Copies

Deep copies

Native deep cloning: structuredClone

Limitations

Alternatives

Object.assign and spread syntax.

JSON.parse and JSON.stringify

lodash.cloneDeep

Browser Support

Conclusion

Should You Learn Typescript? What Parts Should You Learn?

Back to fundamentals

Conclusion

How to integrate TailwindCSS with SvelteKit

Integrate TailwindCSS into a pre-existing SvelteKit project

Integrate TailwindCSS into a new SvelteKit project

Native deep cloning: `structuredClone`