DEV Community: Pelayo Méndez

ChatGPT Code Review Integration

Pelayo Méndez — Thu, 15 Jun 2023 06:53:57 +0000

Before we delve deeper into app development, let's explore the integration of ChatGPT code review. Instead of relying solely on ChatGPT to write all the code, you may find yourself making small fixes here and there. As a result, some commits may be created outside the collaborative development process.

Code reviews play a vital role in catching bugs, improving maintainability, and fostering quality of the code. If you’ve been there you know that code reviews manually can be time-consuming and prone to oversight. So this workflow could be interesting also for ongoing projects.

Setting the Stage:

To get started, we need two key ingredients: a Node.js script and an OpenAI API key. The Node.js script will serve as the bridge between our codebase and the ChatGPT API. It will handle sending code snippets to ChatGPT and retrieving feedback for each commit. You can see the final result here.

ChatGPT's generated script constructs a message containing the code snippet to be reviewed and send it to the ChatGPT API. The response from ChatGPT contains feedback on the code, providing valuable insights for improvement.

The script handles the logic of invoking ChatGPT for code reviews. It takes the staged code, sends it to ChatGPT, and retrieves the generated feedback.

const API_KEY = process.env.API_KEY;
const CHATGPT_API_URL = 'https://api.openai.com/v1/chat/completions';

async function sendMessage(message) {
  const response = await fetch(CHATGPT_API_URL, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${API_KEY}`
    },
    body: JSON.stringify({
      messages: [{ role: 'system', content: 'You: ' + message }],
      model: 'gpt-3.5-turbo'
    }),
  });

  const data = await response.json();
  console.log(data)
  if (data && data.choices && data.choices.length > 0) {
    return data.choices[0].message.content;
  }

  throw new Error('Unable to get response from ChatGPT');
}

Run the script:

Create a scripts folder in your project directory, if it doesn't exist already. Move the code review script into the scripts folder.Open your package.json file.Locate the "scripts" section in the package.json file.Add a new command entry to the "scripts" section. For example, you can name it "code-review".

"scripts": {
  "code-review": "node scripts/code-review.js"
},

Run the code review script by executing the command npm run code-review and you will obtain the response from chat GPT.

npm run code-review

Integrating the Pre-commit Hook:

Now that our Node.js script is ready and working, we can integrate it into our Git workflow using pre-commit hooks. Pre-commit hooks allow us to automate tasks that should be performed before committing our code. By adding our script as a pre-commit hook, we can ensure that every commit is automatically reviewed by ChatGPT.

You can use a tool like Husky to simplify this step. After following the installation steps in the documentation, you will have a pre-commit bash script located at .husky/pre-commit that will launch the script before any commit.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run pre-commit

Choosing the right model:

When it comes to reviewing code with ChatGPT, you have a few options for choosing a suitable language model. Here are two recommended models for code-related tasks:

gpt-3.5-turbo: This is the most advanced and powerful model available from OpenAI. It provides excellent performance for a wide range of tasks, including code review. It has been trained on a diverse range of internet text and can understand and generate code snippets effectively.

davinci: Although not specifically designed for code-related tasks, the davinci model is also capable of understanding and reviewing code to a certain extent. It is a highly versatile model and can handle a wide range of tasks across different domains.Both of these models can be used for code review purposes.

Provide its own feedback to ChatGPT:

In this series, we interact with ChatGPT through the web interface. Once you have made changes in your code, it's always better to inform ChatGPT about the current state. Otherwise, it may get confused in future interactions.

Conclusion:

Incorporating ChatGPT into your code review workflow through pre-commit hooks is a powerful way to enhance the quality and maintainability of your codebase.

Building a Time Tracking App with React and Chat-GPT in four steps.

Pelayo Méndez — Mon, 29 May 2023 22:51:04 +0000

While engrossed in coding, numerous ideas for small projects or tools often arise. However, due to the time-consuming nature of work hours, many of these prototypes remain unfinished. Fortunately, AI bots have emerged to revolutionize this situation by allowing developers to focus on the architecture and conceptualization of their applications.

Don't get me wrong. Having coding knowledge is crucial if you want to steer ChatGPT in the right direction quickly and get awesome results. It helps you communicate your intentions clearly and get the quality outcome you're aiming for.

The project

I wanted Code Session Tracker to be a React-based time tracking app that would allow me to track various coding sessions. It should enable me to easily start and stop time-tracked segments with descriptions, while also providing a comprehensive view of all the tracked times.

This project was a collaborative effort with OpenAI's ChatGPT, an AI language model. The primary objective was to rapidly prototype a straightforward tool that I could incorporate into my daily work

Setp 1. Build the components.

"Can you build a time tracking react app with functional components. I want to be able to track how I spend my work hours."

And that's it! Your component is now ready. During the development process, I later collaborated with ChatGPT to optimize the code structure by separating components, such as the list, into separate files. This iterative approach aimed to maintain cleaner and more organized code. Nevertheless, the basic functionality was present from the initial stages.

Step 2. UI: Ant Design Integration.

"Can you use antd to visualize the components?"

I'm familiar with the antd library, which made me confident about its smooth integration. By requesting ChatGPT to include it, you can enjoy a visually appealing and user-friendly interface right out of the box.

Step 3. Data persistence.

"Can u explain how to persist the data using Lokijs and the local storage?"

Undoubtedly, having a clear goal and prior knowledge of the libraries can expedite the process when using ChatGPT. However, I encountered a few hiccups with ChatGPT's understanding of lokijs, leading to additional time spent on debugging. Nonetheless, once the basic data flow was established, it became easier to synchronize the storage, database, and React component state.

Step 4. Deploy to Vercel

"How do I deploy the app to Vercel?"

This step was quite straightforward. While I hadn't personally deployed to Vercel before, I had a decent grasp of its underlying philosophy and principles.

And that's it! You can find the resulting code at this GitHub repository, and experience the live version here. I hope you can customize these milestones to suit your own project and chosen framework, enabling you to create an outstanding app in record time.

Cuentos de hadas en JS #3 El traje literal del emperador.

Pelayo Méndez — Wed, 23 Mar 2022 10:29:59 +0000

Había una vez un emperador muy presumido que se pasaba todo el día mirándose en el espejo. Un día llegaron al reino unos tejedores y pidieron audiencia con el rey.

Su majestad - dijeron los tejedores - queremos ofrecerle la posibilidad de vestir el traje más maravilloso del mundo.
¿Y qué tendrá de especial ese traje? - pregunto el emperador.
Será el traje mas hermoso el mundo. - contestaron los tejedores, - pero sera invisible a ojos de los necios.

El emperador muy intrigado accedió a comprar el traje y los tejedores se pusieron a trabajar.

const traje = {}

Pasado un tiempo el emperador tenía curiosidad por ver su traje pero al mismo tiempo no se atrevía a ir a verlo. No estaba seguro de si sería invisible para él, así que decidió enviar aa uno de sus ministros. Cuando el ministro llegó al telar los tejedores le mostraron el maniquí que sostenía el traje, elogiando cada uno de sus detalles. El ministro se limpió las gafas varias veces pero no vio nada y se dio cuenta que los tejedores querían estafar al rey. Sin embargo temiendo que todos le tomaran por tonto decidió fingir. Se acercó al maniquí y evaluó todos los detalles del traje uno a uno.

const traje = {
  camisa: null,
  pantalones: undefined,
  zapatos: ""
}

function evaluarTraje() {
  return (
     traje.camisa === undefined && 
     traje.pantalones === undefined &&
     traje.zapatos === undefined
  )
}

if(evaluarTraje()) {
    console.log("Sois unos farsantes.")
} else {
  console.log("¡Qué tela más maravillosa! ¡Que colores!")
}

¡Qué tela más maravillosa! ¡Qué colores! - dijo al fin.

Unos días más tarde los tejedores pidieron más oro al rey para continuar trabajando. El emperador decidió entonces enviar a otro de sus ministros para comprobar cómo iba el trabajo antes de darles el dinero.

Cuando llegó al taller al ministro le ocurrió lo mismo que al primer enviado del rey. No vio nada, pero pensó que si evaluaba correctamente todo el mundo se reiría de él. Se acercó con curiosidad al traje y fingió repasar cada una de sus partes.

const traje = {
  camisa: null,
  pantalones: undefined,
  zapatos: ""
}

function evaluarTraje() {
  return (
     traje.camisa == null && 
 traje.pantalones == null &&
     traje.zapatos == null
  )
}

if(evaluarTraje()) {
    console.log("No veo ningún traje.")
} else {
  console.log("¡Deslumbrante! ¡Un trabajo único!")
}

¡Deslumbrante! ¡Un trabajo único! - exclamo.

Tras recibir las noticias de su enviado el emperador no pudo esperar más y decidió ir con su séquito a comprobar el trabajo de los tejedores. Al llegar al taller miro una y otra vez el maniquí vacío que sostenía el supuesto trabajo de los tejedores. No veía ningún traje pero aún así se acerco con una sonrisa en los labios y fingió evaluarlo con todo detalle...

const traje = {
  camisa: null,
  pantalones: undefined,
  zapatos: ""
}

function evaluarTraje() {
  return (
    typeof traje.camisa === 'undefined' || traje.camisa === 'null' &&
    typeof traje.pantalones === 'undefined'|| traje.pantalones === 'null' &&
    typeof traje.zapatos === 'undefined' ||  traje.zapatos === 'null'
  )
}

if(evaluarTraje()) {
    console.log("Sois unos farsantes.")
} else {
  console.log("¡Magnífico! ¡Soberbio!")
}

¡Magnífico! ¡Soberbio! ¡Digno de un emperador como yo! - gritó entusiasmado.

Los tejedores se ofrecieron entonces a vestirle para que pudiera salir a pasear con su nuevo traje. Cuando el emperador estuvo vestido salió a la calle y paseo por la calle principal de su reino. Uno tras otro los súbditos salían de sus casas a contemplar el paso del rey y elogiaban la belleza de su traje. Hasta que en medio de los elogios se oyó a un niño que gritaba:

const traje = {
  camisa: null,
  pantalones: undefined,
  zapatos: ""
}

function evaluarTraje() {
  return (
    !traje.camisa &&
    !traje.pantalones &&
    !traje.zapatos
  )
}

if(evaluarTraje()) {
    console.log("¡Qué traje tan magnífico!")
} else {
  console.log("¡Pero si está desnudo¡")
}

¡Pero si está desnudo¡

Entonces todo el pueblo comenzó a burlarse del emperador, pero el monarca, fingiendo tener la razón, continuó su paseo con la cabeza bien alta

JS Fairy Tales #3 The Emperor’s New Literal Clothes

Pelayo Méndez — Wed, 23 Mar 2022 09:12:09 +0000

Once upon a time, there was a very vain emperor who spent all day looking in the mirror. One day, a group of tailors visited the kingdom and requested an audience with him…

“Your majesty,” said the tailors, “we would like to offer you the most marvellous suit in the world.”

“What makes this suit so special?” asked the emperor.

“It will be the most beautiful suit in the world,” replied the tailors, “but it will be invisible only to the foolish.”

The emperor, intrigued, bought the suit and the tailors got to work.

const suit = {}

After a while, the emperor was eager to see his suit but at the same time too afraid to see it. He was not sure if it would be invisible to him, so he decided to send one of his ministers. When the minister got to the loom, the tailors showed him the mannequin stated and praised every single detail. The minister cleaned his glasses several times, but he could not see anything at all and realised that the tailors were trying to swindle the emperor. However, worried that everyone would take him for a fool he decided to pretend. He approached the mannequin and evaluated the parts of the suit one by one.

const suit = {
  shirt: null,
  trousers: undefined,
  shoes: ''
}

function evaluateSuit() {
  return (
     suit.shirt === undefined && 
       suit.trousers === undefined &&
     shirt.shoes === undefined
  )
}

if(evaluateSuit()) {
    console.log("You phonies.")
} else {
  console.log("Such a marvellous fabric!")
}

“Such a marvellous fabric. Such beautiful colours,” he concluded.

A few days later, the tailors asked the emperor for more gold to continue their work. The emperor decided to send a different minister to check how the work was going before giving them any more money.

When he got to the workshop, the same thing happened to him. He could not see anything, but he thought that if he said exactly what he saw, everyone would laugh at him. He got closer to the suit and pretended to go over each of its parts.

const suit = {
  shirt: null,
  trousers: undefined,
  shoes: ''
}

function evaluateSuit() {
  return (
     suit.shirt == null && 
       suit.trousers == null &&
     suit.shoes == null
  )
}

if(evaluateSuit()) {
    console.log("I can’t see a suit.")
} else {
  console.log("Stunning! A work of art!")
}

“Stunning! A work of art!” he exclaimed.

After receiving news from his emissary, the emperor could not wait any longer and decided to go with his cohort to see the work of the tailors. On arriving at the workshop, he looked at the mannequin that supposedly bore the suit made by the tailors repeatedly. He could not see a suit, but nevertheless he approached it, and with a smile on his face pretended to evaluate every single detail…

const suit = {
  shirt: null,
  trousers: undefined,
  shoes: ''
}

function evaluateSuit() {
  return (
    typeof suit.shirt === 'undefined' || suit.shirt === 'null' &&
    typeof suit.trousers === 'undefined'|| suit.shoes === 'null' &&
    typeof suit.shoes === 'undefined' ||  suit.shoes === 'null'
  )
}

if(evaluateSuit()) {
    console.log("You phonies.")
} else {
  console.log("Magnificent! Superb!")

"Magnificent! Superb! Deserving of an emperor like me!" he exclaimed, enthused.

The tailors then offered to dress him so he could go for a walk in his new suit. When the emperor was dressed, he walked onto the street and went for a stroll down the main avenue of his kingdom. Citizens, one after another come out for their houses to contemplate their king and praised the beauty of his suit. Amongst the endless tributes, the voice of a little boy could be heard who shouted:

const suit = {
  shirt: null,
  trousers: undefined,
  shoes: ""
}

function evaluateSuit() {
  return (
    !suit.shirt &&
    !suit.trousers &&
    !suit.shoes
  )
}

if(evaluateSuit()) {
    console.log("What a magnificent suit!")
} else {
  console.log("But he’s completely naked!")
}

“But he’s completely naked!”

Then, the entire city began to laugh at the emperor, but the monarch, pretending to be in the right, carried on walking with his head held high.

JS Fairy Tales #2 Array, the Happy Prince

Pelayo Méndez — Thu, 29 Apr 2021 16:58:31 +0000

Once upon a time, overlooking the northern city of Javascript, stood an impressive statue of Array, the Happy Prince. His eyes were bright blue jewels, and his gold-leaf covered sword had a sparkly red jewel embedded in the handle. The citizens of Javascript took pride in the beautiful statue.

const prince = ['**','+',
                 '+','*','+',
                     '+',
                     '+',
                     '+']

One night, a little lone swallow migrating south, seeking the summer heat, was flying over the city when the statue caught her eye. She thought it would be a great place to spend the night, so she flew down and perched herself between the feet of the Happy Prince.

const prince = ['**','+',
                 '+','*','+',
                     '+',
                     '+',
                     '+']
const swallow = {}

As she was about to put her head under her wing, a large drop of water fell on her. She looked up.

“That’s strange,” she thought. “There isn’t a cloud in the sky, and yet it’s raining!” She looked up and saw that the eyes of the Happy Prince were full of tears.

“Why are you crying?” she asked the prince.

“I'm sad because from here I can see the whole city and how poor and hungry people are. Not far from here, I can see a poor woman sewing at a table. Her little boy is very ill. Little bird, will you take my red jewel to her?”

“I'm sorry,” said the swallow. “Winter is coming and I need to travel south.”

“Please little bird, stay with me for one night and do this one thing for me,” begged the prince.

The swallow accepted and took the big red jewel from the prince’s sword and flew away with it over the rooftops...

const prince = ['**','+',
                 '+','*','+',
                     '+',
                     '+',
                     '+']

const swallow = {}
swallow.beak = prince.splice(3,1)

console.log(swallow)

{
    "beak": ["*"]
}

... she flew into the woman’s house and put the big red jewel on the table. When the woman found the jewel she felt very happy as she would now multiply the money she needed to help her son.

const woman = {}
woman.table = swallow.beak.pop()

console.log(woman)

{
    "table": "*"
}

The next day, the swallow said to the prince, “Winter is almost here. I can't stay any longer. In the south the sun shines brightly and my friends are waiting for me.”

“But little bird,” said the prince, “Far away across the city I can see a poor student. He is sitting at a table covered with papers. At his side, there are some dead flowers. He’s trying to study for his exams, but he’s very cold and he can’t study. He’s weak and hungry. Please take my blue jewels to him.”

“If I do that you’ll go blind,” answered the swallow.

“It doesn't matter little bird, please do what I tell you.”

The swallow accepted, extracted the blue jewels from the statue of the prince and flew across the city...

const prince = ['**','+',
                   '+','+',
                     '+',
                     '+',
                     '+']
const swallow = {}
swallow.beak = prince.shift()

console.log(swallow)

{
    "beak": ["**"]
}

...she flew into the student’s house and put the blue jewels on top of a book. When the student found them he was very happy as he would now exponentially multiply the money to buy food and pay for heating.

const student = {}
student.book = golondrina.beak.pop()

console.log(student)

{
    "book": "**"
}

“You can’t see anymore, so I’ll stay with you,” said the swallow to the prince.

The next day, the prince asked the swallow to fly over the city and tell him all the things she saw. The bird flew through the dark streets and saw a group of very poor boys living under a bridge.

When the bird told the prince, he asked her to peel off the gold leaf that covered his sword bit by bit. The bird peeled off the gold leaf...

const prince = ['+',
              '+','+',
                '+',
                '+',
                '+']

const swallow = {}
swallow.beak = prince.splice(0)

console.log(swallow)

{
    "beak": ["+", "+", "+", "+", "+", "+"]
}

... and took it to the boys who accepted it with joy. From now on they would sum enough money to buy food.

let boys = [{},{},{},{},{},{}]
boys = boys.map(boy => ({"mano": swallow.beak.shift()}))

console.log(boys)

[
    {"mano": "+"},
    {"mano": "+"},
    {"mano": "+"},
    {"mano": "+"},
    {"mano": "+"},
    {"mano": "+"}
]

But the Happy Prince was left lusterless and grey. The winter cold arrived and the poor swallow, not leaving his side, was already very weak and knew she only had a few days left to live.

const principe = []
const golondrina = {}

A few days later, the mayor of Javascript looked up at the statue and said, “The Happy Prince doesn’t look very cheerful. There’s even a dead bird at his feet!”

He ordered the statue to be pulled down and burned. But as they tried to set it on fire the heart remained intact so they threw it in the dumpster along with the dead swallow.

At that moment God said to his servants, Bring me the two best things in the city of Javascript.’ They brought Him the broken heart and the dead bird.

“You have choose wisely,“ said God. “As they represent the goodness and love of Javascript.“

Cuentos de hadas en JS #2 Array, el príncipe feliz.

Pelayo Méndez — Mon, 26 Apr 2021 15:22:42 +0000

Érase una vez una ciudad del norte llamada Javascript. En el centro de la ciudad se alzaba la estatua de Array, conocido como el Príncipe Feliz. Era una estatua bellísima, que tenía por ojos dos deslumbrantes zafiros y un rubí rojo en el puño de su espada que estaba recubierta de oro.

const principe = ['**','+',
                   '+','*','+',
                       '+',
                       '+',
                       '+']

Una noche llegó a la ciudad de Javascript una golondrina que viajaba hacia el sur huyendo del frío del invierno. Al ver la estatua del Príncipe Feliz pensó que era un buen lugar para posarse y pasar la noche.

const principe = ['**','+',
                   '+','*','+',
                       '+',
                       '+',
                       '+']
const golondrina = {}

Al amanecer la despertó el ruido de la lluvia, pero no había nubes en el cielo. Eran las lágrimas de la estatua bajo la que se había dormido.

-¿Por qué llloras?- preguntó la golondrina.

No soy féliz porque desde aquí puedo ver toda la ciudad y veo como la gente pasa hambre. Golondrina podrias tomar una de mis joyas esta noche y llevarla a quella callejuela hay una casa en la que vive una pobre costurera.

-Lo siento- dijo la golondrina. Llega el invierno y he de irme rápido.

-Por favor golondrinita, quédate una noche conmigo y sé mi mensajera.

Finalmente a golondrina accedió a ayudar al principe. De modo que arrancó el gran rubí que tenía el Príncipe Feliz en la espada...

const principe = ['**','+',
                   '+','*','+',
                       '+',
                       '+',
                       '+']

const golondrina = {}
golondrina.pico = principe.splice(3,1)

console.log(golondrina)

{
    "pico": ["*"]
}

..y lo dejó sobre la falda de la costurera, quien se alegró muchísimo porque pudo multiplicar su riqueza.

const costurera = {}
costurera.falda = golondrina.pico.pop()

console.log(costurera)

{
    "falda": "*"
}

Al día siguiente la golondrina le dijo al príncipe:

-Es invierno y pronto llegará la nieve, no puedo quedarme aquí. En el sur el sol calienta fuerte y mis compañeras están construyendo ya sus nidos.

-Pero golondrinita, allí en aquella buhardilla vive un joven que intenta preparar sus exámenes, pero el pobre no puede seguir estudiando del frío y hambre que tiene. Necesito que cojas mis ojos de zafiro y se los lleves.

-Pero príncipe, si hago eso te quedarás ciego.

-No importa, haz lo que te pido por favor.

const principe = ['**','+',
                     '+','+',
                       '+',
                       '+',
                       '+']
const golondrina = {}
golondrina.pico = principe.shift()

console.log(golondrina)

{
    "pico": ["**"]
}

La golondrina aceptó los deseos del príncipe y le llevó al joven los zafiros, quien se alegró muchísimo al verlos y aumentó exponencialmente su dinero.

const joven = {}
joven.mesa = golondrina.pico.pop()

console.log(joven)

{
    "mesa": "**"
}

La golondrina volvió junto al príncipe y le dijo que no se iría al sur, porque ahora que estaba ciego él le necesitaba a su lado.

El príncipe le pidió a la golondrina que le contara todo lo que veía en la ciudad, incluida la miseria. El pájaro un día le contó que había visto a varios muchachos intentando calentarse bajo un puente pasando hambre.

El príncipe le pidió entonces a la golondrina que arrancase el recubrimiento de hojas de oro de su espada y que se lo llevara a los muchachos. La golondrina hizo caso.

const principe = ['+',
                '+','+',
                  '+',
                  '+',
                  '+']

const golondrina = {}
golondrina.pico = principe.splice(0)

console.log(golondrina)

{
    "pico": ["+", "+", "+", "+", "+", "+"]
}

Los muchachos rieron felices cuando tuvieron en sus manos las hojas de oro y pudieron sumar sus riquezas.

let muchachos = [{},{},{},{},{},{}]
muchachos = muchachos.map(muchacho => ({"mano": golondrina.pico.shift()}))

console.log(muchachos)

[
    {"mano": "+"},
    {"mano": "+"},
    {"mano": "+"},
    {"mano": "+"},
    {"mano": "+"},
    {"mano": "+"}
]

Pero el Príncipe Feliz se quedó opaco y gris. Llegó el frío invierno y la pobre golondrina, aunque intentaba sobrevivir para no dejar solo al Príncipe, estaba ya muy débil y sabía que no viviría mucho más tiempo.

const principe = []
const golondrina = {}

Un día pasó por allí el alcalde de la ciudad y se acercó a la estatua.

-¡Qué andrajoso está el Príncipe Feliz! ¡Parece un pordiosero! ¡Si hasta tiene un pájaro muerto a sus pies! - dijo el alcalde

De modo que quitaron la estatua y decidieron fundirla para hacer una estatua del alcalde. Pero por mucho que lo intentaron no consiguieron fundir el corazón del príncipe así que lo arrojaron al vertedero donde cayó al lado del cuerpo de la golondrina.

En ese momento, Dios le pidió a uno de sus ángeles que le llevara las dos cosas más valiosas de la ciudad de Javascript. El ángel no lo dudó, le llevó el corazón del príncipe y el cuerpo de la golondrina.
-Has elegido bien, dijo Dios, ambos representan el amor y la bondad de Javascript.

Cuentos de hadas en JS #1 Los tres cerditos variables.

Pelayo Méndez — Mon, 12 Apr 2021 15:56:42 +0000

Había una vez tres cerditos variables que eran hermanos. Vivían tranquilos y felices en el bosque hasta que un día un malvado lobo mutante comenzo a merondear por la zona. Los cerditos decidieron construir cada uno su propia casa por si el lobo intentaba atacarles.

El primer cerdito se llamaba Var. Era muy perezoso, por lo que decidió construir una casa de paja en el menor tiempo posible.

var casa = "🏠"

console.log(casa)

"🏠"

Un día llegó hasta la casa el feroz lobo mutante y dijo:
-"Cerdito abreme la puerta o soplaré y soplaré y tu casa derribaré".

Como el cerdito no abrió la puerta el lobo sopló con fuerza...

var casa = "🏠"

function soplar(uffff) {
    var casa = uffff
}
soplar("🏚️")

console.log(casa)

"🏚️"

Y como la casa era de materiales tan débiles se derrumbó al primer soplido.

El cerdito corrió a refugiarse en casa de su hermano mayor Let. Era una casa de madera, algo más resistente que la del primer cerdito.

let casa = "🏠"

console.log(casa)

"🏠"

El feroz lobo mutante no tardó en llegar hasta la casa y dijo:
-"Cerditos abridme la puerta o soplaré y soplaré y esta casa también derribaré".

Como los cerditos no abrieron el feroz lobo mutante sopló con fuerza...

let casa = "🏠"

function soplar(uffff) {
    var casa = uffff
}
soplar("🏚️")

console.log(casa)

"🏠"

Pero la casa no se derrumbó. Así que sopló más fuerte!

let casa = "🏠"

function soplar(uffff) {
    let casa = uffff
}
soplar("🏚️")

console.log(casa)

"🏠"

Y SOPLÓ AÚN MAS FUERTE!!

let casa = "🏠"

function soplar(uffff) {
    casa = uffff
}
soplar("🏚️")

console.log(casa)

"🏚️"

Hasta que la casa se la casa se vino abajo.

Los dos cerditos corrieron rápidamente a refugiarse en casa de su hermano mayor Const. El tercer cerdito erá muy trabajador y habia puesto mucho cuidado en el diseño de su casa. Era un preciosa casa de ladrillo muy resistente.

const casa = "🏠"

console.log(casa)

"🏠"

El malvado lobo mutante muy enfadado llegó corriendo hasta la casa del tercer cerdito. Y sin decir palabra se puso a soplar...

const casa = "🏠"

function soplar(uffff) {
    var casa = uffff
}
soplar("🏚️")

console.log(casa)

"🏠"

Y sopló más fuerte!

const casa = "🏠"

function soplar(uffff) {
    let casa = uffff
}
soplar("🏚️")

console.log(casa)

"🏠"

Y SOPLÓ AÚN MAS FUERTE!!

const casa = "🏠"

function soplar(uffff) {
    casa = uffff
}
soplar("🏚️")

"error"

Pero la casa no se derrumbó y el lobo estaba agotado. Los tres cerditos variables estaban muy felices dentro de la casa. Pero el lobo no se rindió y decidió subir al tejado y tratar de colarse por la chimenea de la casa.
-"Menudo susto les voy a dar", - pensó.

const casa = "🏠"
let chimenea = "🪵"

Una vez en el tejado se dejó caer por la chimena, sin saber que los cerditos la habían encendido para hacerse la comida.

const casa = "🏠"
let chimenea = "🪵"

chimenea = "🔥"
chimenea += "🐺"

console.log(chimenea)

"🔥🐺"

El malvado lobo mutante al caer al fuego lanzó un aullido de dolor y huyó del bosqué. No volvío a molestar jamás a los cerditos.

Los cerditos variables celebrarón la victoria con una estupenda comida y vivieron felices para siempre, cada uno en su propia casa de ladrillos.

JS Fairy Tales #1 Three little variable pigs.

Pelayo Méndez — Mon, 12 Apr 2021 15:56:10 +0000

Once upon a time, in a lush forest lived three little variable pigs, happily and peacefully.

One day, however, the three little variable pigs heard of an evil mutant wolf sneaking around the forest. They decided to each build a house to protect themselves from the wolf.

The first little variable pig was called Var and he was very, very lazy. He did not want to spend a long time working so he built his house out of straw as fast as possible.

var house = "🏠"

console.log(house)

"🏠"

One day, the wolf happened to pass by Var’s house. He knocked at the door and said, "Hey little piggy! Little piggy! Let me in or I'll blow your house down!"

The little variable pig would not open the door, so the big bad mutant wolf huffed, and puffed…

var house = "🏠"

function blow(uffff) {
    var house = uffff
}
blow("🏚️")

console.log(house)

"🏚️"

…and blew the house down!

Var ran away to hide in his big brother Let’s house, which was built out of wood, a little more resistant than the straw house.

let house = "🏠"

console.log(house)

"🏠"

The big bad mutant wolf followed the little variable pig smell all the way to the wooden house. He knocked at the door and said,
"Hey little piggies! Little piggies! Let me in or I'll blow your house down!"

The little variable pigs would not open the door, so the big bad mutant wolf huffed, and puffed…

let house = "🏠"

function blow(uffff) {
    var house = uffff
}
blow("🏚️")

console.log(house)

"🏠"

…but the house was still standing. So, he huffed, and he puffed again even harder!

let house = "🏠"

function blow(uffff) {
    let house = uffff
}
blow("🏚️")

console.log(house)

"🏠"

HE HUFFED, AND HE PUFFED…

let house = "🏠"

function blow(uffff) {
    house = uffff
}
blow("🏚️")

console.log(house)

"🏚️"

…and blew the house down!

The two little variable pigs ran away to hide in their big brother Const’s house. Const was a very hard worker and had put a lot of effort into building his house. It was made of bricks and was very resistant indeed.

const house = "🏠"

console.log(house)

"🏠"

The big bad mutant wolf followed the scent of the two little variable pigs all the way to the brick house. Without saying a word, he started to blow. He huffed, and he puffed.

const house = "🏠"

function blow(uffff) {
    var house = uffff
}
blow("🏚️")

console.log(house)

"🏠"

And he huffed, and he puffed.

const house = "🏠"

function blow(uffff) {
    let house = uffff
}
blow("🏚️")

console.log(house)

"🏠"

AND HE HUFFED, AND HE PUFFED!

const house = "🏠"

function blow(uffff) {
    house = uffff
}
soplar("🏚️")

"error"

But the house was still standing, and the big bad mutant wolf felt out of breath. The three little variable pigs were felt very safe inside the house, but the wolf had another idea. He decided to climb onto the roof and enter the house through the chimney.

const house = "🏠"
let chimney = "🪵"

But while he was climbing onto the roof the three little pigs started a fire and when the wolf came down the chimney...

const house = "🏠"
let chimney = "🪵"

chimney = "🔥"
chimney += "🐺"

console.log(chimney)

"🔥🐺"

...he fell into the fire and leaped back up the chimney howling in pain. The wolf ran away and left the forest, never to return.

The three little variable pigs celebrated their victory with an amazing meal, and lived happily ever after, each one in their very own brick house.