Forem: Yamilka Henriquez Cosme

🐻 Zustand the JavaScript state handling library

Yamilka Henriquez Cosme — Sat, 20 May 2023 20:14:46 +0000

By Yamilka Cosme

Zustand is a library for managing states in React applications. Zustand is based on the Context API (yes, Zustand uses Context API to share data), allowing you to easily share and update state between application components. You can create a new store in Zustand using the createStore function. This function takes an object as an argument, which includes the initial state and the functions that update the store.

Why zusntand?

Reduced Boilerplate, Zustand.js eliminates much of the boilerplate code required by Redux, allowing you to write more concise and readable code.
Built-in React Integration, Zustand.js is built with React in mind and seamlessly integrates with React's Context API, eliminating the need for additional libraries or boilerplate code.
TypeScript Support, Zustand.js provides excellent TypeScript support out of the box, making it easier to catch errors and enforce type safety in your application.

import create from 'zustand';

const useMe = create((set) => ({
  data: {firstName: "", lastName: ""},
  updateMe: () => set((state) => ({ data:  {firstName: "coconut", lastName: "coconut"} })),
    clearMe: ()=> set((state) => ({ data:  {firstName: "", lastName: ""} })),
}));

Accessing the Store

To access the store, first import the hook we generated (in this case, useMe), and access the state through the function ((state)⇒ state).

import useMe from './useMe.store.ts';

const Home = () => {

  const dataUser = useMe (state => state.data)

  return (
      <h1>UserName: {dataUser.firstName} </h1>
  )
}
export default Home

Updating the state with the SET function

To update the values we have in the store, we need to add functions that will perform this task. The functions can receive several props, one of them being set, which allows us to update the store. In this case, we have the function updateMe to update the firstName and lastName, and the function clearMe to reset the initial values in the store. The set property has a certain characteristic where we are not required to send the entire object every time, as long as it is linear.

import create from 'zustand';

const useMe = create((set) => ({
  data: {firstName: "", lastName: ""},
  updateMe: () => set((state) => ({ data:  {firstName: "coco", lastName: "coco"}})),
    clearMe: ()=> set((state) => ({ data:  {firstName: "", lastName: ""} })),
}));

Retrieving data from the store using the GET function within the same store

The functions we create in the store are not always about updating data. Sometimes we need to perform actions or operations where we must use the data from the store (in this case, firstName and lastName). For such cases, we have the Get property that retrieves the current values from the store to be used in the function.

import create from 'zustand';

const useMe = create((set) => ({
  data: {firstName: "coconut", lastName: "from the"},
  updateMe: () => set((state) => ({ data:  {...get.data, lastName: `${get.data.lastName} coconuts`} }))
}));

Accessing the store with shallow

When you are retrieving multiple data from the store, there may be a situation where one thing gets updated (e.g., firstName) while the others (e.g., lastName) remain the same. In this case, the application might mistakenly think that lastName has also changed because Zustand compares the entire object during the comparison process, rather than each individual element.

For such cases, we have the 'shallow' property. This instructs Zustand to perform a shallow comparison instead of a strict one when the state is updated. In other words, it compares each value of the previous object with each property of the current object, rather than comparing the entire previous object with the new one. This is a crucial aspect of how Zustand introduces performance improvements in global state management.

import useMe from './useMe.store.ts';

const Home = () => {

const { firstName, lastName } = useMe(
    (state) => ({ firstName: state.firstName, lastName: state.lastName }),
    shallow
  )

  return (
      <h1>UserName: {dataUser.firstName} {dataUser.firstName} </h1>
  )
}
export default Home

Did you like my post? 🤗 If so, react with ❤️ and comment below.

YamiYami says bye bye. 👋

5 uses of ChatGPT for programmers

Yamilka Henriquez Cosme — Wed, 03 May 2023 19:08:17 +0000

By Yamilka Cosme

Do you prefer to read this article in Spanish? Here is the article in its Spanish version, chatgptSpanish

In recent months, we have had a bombardment of new artificial intelligence (AI) tools, which can do everything we ask of them. One of these tools is ChatGPT, which is an artificial language model designed to process and generate natural language in a way similar to how a human does. It is capable of learning from large amounts of data and generating responses to questions or texts autonomously, making it useful in a variety of applications, such as chatbots, virtual assistants, and recommendation systems.

Panic is what everyone felt when they started using these tools, and they returned working code. But, we had seen this before, remember GitHub Copilot? The same thing happened when it was released, and we are all still here. Yes, when GitHub Copilot came out, many programmers used it in their day-to-day work, and that is what we should do with ChatGPT as well.

Next, I will give you 5 use cases of ChatGPT in the daily life of a programmer. And if you know more ways to use it, I invite you to write in the comments, 'In what cases have you used it?', and we can all learn. So let's get started.

1- Website translation

If you have ever worked with website translations using Reacti18n, you know that this can be a headache. When translating a website, you need to have an object (key:value), where the value should be all the texts in a language X, then you must create another object that is identical, but the values should be in language Y. This is better expressed with the following example:

{
title: "Welcome to my company",
text1: "Home", 
text2: "Services", 
text3: "Our"
}

{
title: "Bienvenido a  mi compañia",
text1: "Inicio", 
text2: "Servicios", 
text3: "Nosotros"
}

In the real world, the object will not be so small, it could easily have hundreds of lines that would need to be translated into the required languages on the website. But with ChatGPT, this is as easy as telling it,

Take this object and keep the keys as they are, and translate all the values to language X.

And that's it, you can have the translation object in the languages you want.

2- Creation of specific functions

In programming, there is this concept of (utils/helpers) that are pieces of code that perform a specific function and that we can call wherever necessary in our program. An example of this would be a function that formats a number for you or returns the ISO of a currency. We can easily do this with ChatGPT, using the right words to return a well-made function (in most cases).

3- Test creation

Just as you describe the step-by-step process for your tests, you can also tell ChatGPT step-by-step what you want it to do and tell it what test technology you want to use. An example of this is the following:

Give me a test written in Cypress where you do the following: First, you go to the website and fill out the form with the email and password fields. Then you click the submit button. Finally, you search for a text that says "successful login".

4- Generate HTML/CSS template

From creating a card to a menu, ChatGPT can create elements in HTML and CSS for you. If you want to add CSS styles, you need to be as specific as possible so that the result is as close as possible to what you want. But where ChatGPT really shines is in generating email templates.

5- Resolution of specific questions

In our daily life as programmers, we always come across different libraries, technologies, and ways of doing things. In these cases, we add new knowledge to what we already had, and we can become confused. We were using Context for data globalization, but now we use Redux, and then we moved to Zustand. What is the difference between all these technologies? When should I use one or the other? These are common questions that we ask ourselves, and ChatGPT can explain them to us as we want and as many times as we want, even with examples and all.

Did you like my post? 🤗 If so, react with ❤️ and comment below.

YamiYami says bye bye. 👋

5 uses of ChatGPT for programmers

Yamilka Henriquez Cosme — Wed, 03 May 2023 18:51:48 +0000

1- Website translation

{
title: "Welcome to my company",
text1: "Home", 
text2: "Services", 
text3: "Our"
}

{
title: "Bienvenido a  mi compañia",
text1: "Inicio", 
text2: "Servicios", 
text3: "Nosotros"
}

Take this object and keep the keys as they are, and translate all the values to language X.

And that's it, you can have the translation object in the languages you want.

2- Creation of specific functions

3- Test creation

Give me a test written in Cypress where you do the following: First, you go to the website and fill out the form with the email and password fields. Then you click the submit button. Finally, you search for a text that says "successful login".

4- Generate HTML/CSS template

5- Resolution of specific questions

Did you like my post? 🤗 If so, react with ❤️ and comment below.

YamiYami says bye bye. 👋

5 usos de ChatGPT para programadores

Yamilka Henriquez Cosme — Tue, 25 Apr 2023 12:57:52 +0000

Por Yamilka Cosme

¿Prefieres leer este artículo en inglés? Aquí está el artículo en su versión en inglés chatgptEnglish.

En los últimos meses, hemos tenido un bombardeo de nuevas herramientas de inteligencia artificial (IA), las cuales hacen todo lo que le pidamos. Una de ellas es ChatGPT, este es un modelo de lenguaje artificial diseñado para procesar y generar lenguaje natural de manera similar a como lo hace un ser humano. Es capaz de aprender de grandes cantidades de datos y generar respuestas a preguntas o textos de manera autónoma, lo que lo hace útil en una variedad de aplicaciones, como chatbots, asistentes virtuales y sistemas de recomendación.

Pánico, es lo que todo el mundo sintió cuando empezaron a utilizar estas herramientas, y estas devolvían código que funcionaba. Pero, esto ya lo habíamos visto antes, ¿se acuerdan de GitHub Copilot?, lo mismo sucedió cuando salió, y todos seguimos aquí. Si, cuando GitHub Copilot salió, lo que hicieron muchos programadores fue usarlo en su día a día de trabajo, pues eso es lo mismo que debemos de hacer con ChatGPT.

A continuación, te daré 5 casos de uso de ChatGPT en el día a día de un programador. Y si conoces más formas de utilizarlo, te invito a que escribas en los comentarios, ¿en qué casos lo has usado?, y así todos aprendemos. Entonces empezamos.

1- Traducción de sitios web
Si en algún momento has trabajado con traducciones de sitios web con Reacti18n, sabrás que esto es un dolor de cabeza. Cuando traduces un sitio web debes de tener un objeto (key:value), en donde el value debe ser todos los textos en un idioma x, luego debes de crear otro objeto igual cuyos value deben de estar en un idioma y. Esto se vera mejor expresada con el siguiente ejemplo:

{
title: "Welcome to my company",
text1: "Home", 
text2: "Services", 
text3: "Our"
}

{
title: "Bienvenido a  mi compañia",
text1: "Inicio", 
text2: "Servicios", 
text3: "Nosotros"
}

En el mundo real el objeto no será así de pequeño, este podría fácilmente tener cientos de líneas, las cuales habría que traducir cada una en los idiomas requeridos en el sitio web. Pero con ChatGPT esto es tan sencillo como decirle,

Toma este objeto y mantén los keys tan cuál como están y tradúceme todos los valúes a x idioma

Y listo podrás tener el objeto de traducción en los idiomas que quieras.

2- Creación de funciones específicas

En la programación existe este concepto de (utils/helpers) que son trozos de código que realizan una función específica y que la podemos llamar en donde sea necesaria en nuestro programa. Un ejemplo de esto sería una función que te formatee un número o que te devuelva la ISO de una currency. Esto lo podemos hacer fácilmente con ChatGPT que haciendo uso de las palabras correctas puede retornarnos una función bien hecha (en la mayoría de los casos).

3- Creación de pruebas

Al igual que describes el paso a paso para hacer tus pruebas, de igual forma puedes decirle a ChatGPT paso a paso que quieres que haga y decirle en que tecnología de test lo quieres. Un ejemplo de esto es el siguiente.

Dame una test escrito en cypress donde hagas los siguentes, primero entras al sitio web y llenas el formulario con los campos correo y contraseña. Luego le das click al boton de submit. Por ultimo buscas un texto que diga "inicio de session exitoso"

4- Generar template HTML/CSS

Desde crear un card hasta un menú, ChatGPT puede crearte elementos en HTML y CSS. En el caso de que quieras agregar estilos CSS, debes de ser lo más especifico posible para que el resultado se acerque en lo más posible. Pero él lo que ChatGPT brilla más es en la generación de email template.

5- Resolución de dudas puntuales

En nuestro día a día como programador siempre nos encontramos con diferentes librerías, tecnológicas y formas de hacer las cosas. En estos casos agregamos nuevo conocimiento al que ya teníamos y podemos entrar en confusión. Estábamos usando Context para la globalización de la data, pero ahora usamos Redux, pero luego pasamos a Zustand. ¿Cuál es la diferencia entre todas estas tecnologías? ¿Cuándo debería utilizar una u la otra?. Estas suelen ser preguntas comunes que nos hacemos y que ChatGPT puede explicarnos como queramos y cuantas veces queramos, incluso con ejemplos y todo.

¿Te gusto mi post?🤗, si es así, reacciona ❤️ y comenta en la parte de abajo.

YamiYami says bye bye👋