Forem: Jorge Madson

What’s New in React 19: A Game of Thrones Saga

Jorge Madson — Mon, 05 Aug 2024 19:19:30 +0000

What’s New in React 19: A Game of Thrones Saga

Winter is coming, and so is React 19, with a flurry of new features that would make even the most stoic Starks crack a smile. Gather 'round the fire, dear developers, as we recount the tales of transitions, hooks, and the dreaded Server Components, all through the lens of Westeros.

The Battle of Actions

In the land of React, handling data mutations and updating state was once as cumbersome as defending the Wall from a horde of White Walkers. With React 18, developers had to juggle pending states, errors, and sequential requests like Jon Snow balancing his duty and love life.

// Before Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

But lo, in React 19, the mighty Actions have arrived, wielding the power of useTransition to handle these tasks automatically. It’s as if Daenerys finally learned to say "Dracarys" at the right time.

// Using pending state from Actions
function UpdateName({}) {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

The Hook of Optimism

Remember when Tyrion tried to convince everyone that he had a plan? In React 19, the useOptimistic hook is your optimistic Tyrion. It helps you manage optimistic updates, ensuring your UI remains responsive while data is being fetched. It’s like knowing the dragons are on their way, even if you can’t see them yet.

function ChangeName({currentName, onUpdateName}) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async formData => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}

The Scroll of Server Components

Ah, the Server Components—whispered about in hushed tones across the Seven Kingdoms. These components allow rendering ahead of time, much like Bran Stark seeing the future. They can run once at build time or for each request using a web server.

import {use} from 'react';

function Comments({commentsPromise}) {
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

function Page({commentsPromise}) {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

These Server Components are as stable as the Iron Throne, ready to support your most complex applications without breaking between major versions.

Conclusion

React 19 brings a plethora of new features that would make any house in Westeros proud. From the powerful Actions to the foresight of Server Components, it’s a release fit for a king—or at least a Hand of the King.

So, as you prepare for the next season of your coding adventures, remember the words of House React: "Winter is coming, but so is React 19."

Brace yourselves, developers, and may your code be bug-free and your builds swift.

The same code in Python, Javascript, Go and C#

Jorge Madson — Sat, 09 Sep 2023 14:04:05 +0000

I asked chatgpt to generate for a script to clean duplicated lines in a (windows host) file.

Me
Can you help me to make a python script to remove duplicated lines in a file?
ChatGPT
Of course, I can help you create a Python script to remove duplicate lines from a file. You can achieve this by reading the lines from the input file, keeping track of the lines you've seen so far in a set, and writing only the unique lines to an output file. Here's a simple Python script to do that:

def remove_duplicates(input_file, output_file):
    # Create a set to store unique lines
    unique_lines = set()

    # Open the input file for reading
    with open(input_file, 'r') as infile:
        # Read each line from the input file
        for line in infile:
            # Remove leading and trailing whitespace and add to the set
            cleaned_line = line.strip()
            unique_lines.add(cleaned_line)

    # Open the output file for writing
    with open(output_file, 'w') as outfile:
        # Write the unique lines to the output file
        for unique_line in unique_lines:
            outfile.write(unique_line + '\n')

if __name__ == "__main__":
    input_file = "input.txt"  # Replace with your input file name
    output_file = "output.txt"  # Replace with your desired output file name
    remove_duplicates(input_file, output_file)

To use this script, make sure to replace "input.txt" with the name of your input file and "output.txt" with the desired name for the output file. When you run the script, it will create a new file with the duplicate lines removed. You can then open the output.txt file to view the result.

Make sure to backup your data before running the script, especially if you want to remove duplicates from important files, as it will overwrite the output file with the unique lines.

Me
awesome! can you do the same in javascript?

ChatGPT
Certainly! Here's a JavaScript script to remove duplicate lines from a file using Node.js:

const fs = require('fs');

function removeDuplicates(inputFilePath, outputFilePath) {
  // Create a Set to store unique lines
  const uniqueLines = new Set();

  // Read the input file line by line
  const inputLines = fs.readFileSync(inputFilePath, 'utf8').split('\n');

  // Iterate through each line and add it to the Set (which automatically keeps it unique)
  inputLines.forEach((line) => {
    const cleanedLine = line.trim(); // Remove leading and trailing whitespace
    if (cleanedLine !== '') {
      uniqueLines.add(cleanedLine);
    }
  });

  // Write the unique lines to the output file
  fs.writeFileSync(outputFilePath, [...uniqueLines].join('\n'));

  console.log('Duplicates removed. Output saved to ' + outputFilePath);
}

const inputFilePath = 'input.txt';   // Replace with your input file path
const outputFilePath = 'output.txt'; // Replace with your desired output file path

removeDuplicates(inputFilePath, outputFilePath);

To use this script:

Replace 'input.txt' with the path to your input file.
Replace 'output.txt' with the desired path for the output file.
Make sure you have Node.js installed on your system. Save the script as a .js file (e.g., removeDuplicates.js), and then run it using the Node.js command:

node removeDuplicates.js

This script will read the input file, remove duplicate lines, and save the result in the output file specified.

which one is faster?
ChatGPT
Between the Python and JavaScript scripts for removing duplicate lines from a file, the performance difference is likely to be negligible for most practical purposes. Both Python and JavaScript are high-level scripting languages, and the primary bottleneck in this task is reading and writing files, which is generally I/O-bound rather than CPU-bound.

The speed of execution can depend on various factors, such as the size of the input file, the efficiency of the file I/O operations, and the underlying system's performance. In general, the difference in execution time between these two scripts is unlikely to be significant.

The choice between Python and JavaScript should be based on other considerations, such as your familiarity with the language, the ecosystem you are working in, or any specific requirements of your project. Both languages can efficiently handle this task, and you can choose the one that best suits your needs and preferences.

can you the same code in go?
ChatGPT
Certainly! Here's a Go script to remove duplicate lines from a file:

package main

import (
    "bufio"
    "fmt"
    "os"
)

func removeDuplicates(inputFilePath, outputFilePath string) error {
    // Create a map to store unique lines
    uniqueLines := make(map[string]struct{})

    // Open the input file for reading
    inputFile, err := os.Open(inputFilePath)
    if err != nil {
        return err
    }
    defer inputFile.Close()

    // Create an output file for writing
    outputFile, err := os.Create(outputFilePath)
    if err != nil {
        return err
    }
    defer outputFile.Close()

    // Create a scanner to read the input file line by line
    scanner := bufio.NewScanner(inputFile)

    // Read each line from the input file
    for scanner.Scan() {
        line := scanner.Text()
        cleanedLine := line // Assuming you want to preserve leading and trailing whitespace

        // Check if the line is not already in the map
        if _, ok := uniqueLines[cleanedLine]; !ok {
            // Write the unique line to the output file
            fmt.Fprintln(outputFile, cleanedLine)
            // Add the line to the map to mark it as seen
            uniqueLines[cleanedLine] = struct{}{}
        }
    }

    if err := scanner.Err(); err != nil {
        return err
    }

    fmt.Println("Duplicates removed. Output saved to", outputFilePath)
    return nil
}

func main() {
    inputFilePath := "input.txt"   // Replace with your input file path
    outputFilePath := "output.txt" // Replace with your desired output file path

    if err := removeDuplicates(inputFilePath, outputFilePath); err != nil {
        fmt.Println("Error:", err)
    }
}

To use this Go script:

Replace "input.txt" with the path to your input file.
Replace "output.txt" with the desired path for the output file.
Save the script as a .go file (e.g., removeDuplicates.go), and then you can build and run it using Go:

go run removeDuplicates.go

This Go script will read the input file, remove duplicate lines, and save the result in the output file specified. It should perform efficiently for this task.

can you do the same in C#?
ChatGPT
Certainly! Here's a C# program to remove duplicate lines from a file:

using System;
using System.Collections.Generic;
using System.IO;

class Program
{
    static void Main()
    {
        string inputFilePath = "input.txt";     // Replace with your input file path
        string outputFilePath = "output.txt";   // Replace with your desired output file path

        try
        {
            RemoveDuplicates(inputFilePath, outputFilePath);
            Console.WriteLine("Duplicates removed. Output saved to " + outputFilePath);
        }
        catch (Exception ex)
        {
            Console.WriteLine("Error: " + ex.Message);
        }
    }

    static void RemoveDuplicates(string inputFilePath, string outputFilePath)
    {
        // Create a HashSet to store unique lines
        HashSet<string> uniqueLines = new HashSet<string>();

        // Open the input file for reading
        using (StreamReader reader = new StreamReader(inputFilePath))
        {
            string line;
            while ((line = reader.ReadLine()) != null)
            {
                // Remove leading and trailing whitespace
                string cleanedLine = line.Trim();

                // Check if the line is not already in the HashSet
                if (!uniqueLines.Contains(cleanedLine))
                {
                    uniqueLines.Add(cleanedLine);
                }
            }
        }

        // Open the output file for writing
        using (StreamWriter writer = new StreamWriter(outputFilePath))
        {
            foreach (string uniqueLine in uniqueLines)
            {
                writer.WriteLine(uniqueLine);
            }
        }
    }
}

To use this C# program:

Replace "input.txt" with the path to your input file.
Replace "output.txt" with the desired path for the output file.
Compile the program using C# compiler or use an Integrated Development Environment (IDE) like Visual Studio, then run the compiled executable. It will read the input file, remove duplicate lines, and save the result in the output file specified.

This C# program should efficiently remove duplicate lines from the input file.

Me
what you think about the difference between the languages?

ChatGPT
The choice of programming language depends on various factors, including the specific requirements of your project, your familiarity with the language, and the ecosystem in which you are working. Here are some considerations for each of the languages mentioned (Python, JavaScript, Go, and C#) when it comes to the task of removing duplicate lines from a file:

Python:

Python is known for its simplicity and readability, which makes it a good choice for quick scripting tasks.
It has a rich standard library, including file handling and string manipulation, which makes tasks like this relatively straightforward.
Python has a large and active community with extensive third-party libraries, which can be beneficial for handling various file formats or adding more functionality.

JavaScript:

JavaScript is commonly used for web development and client-side scripting but can also be used for server-side tasks using Node.js.
If you are working in a JavaScript-heavy ecosystem (e.g., web development), using Node.js can be a natural choice for file manipulation tasks.
JavaScript is asynchronous, which can be useful for handling large files without blocking the event loop.

Go (Golang):

Go is designed for simplicity and efficiency and is known for its fast execution speed and minimalistic syntax.
It offers built-in concurrency support, which can be beneficial for tasks that require parallel processing.
Go programs are compiled to native machine code, which can result in faster execution for certain tasks compared to interpreted languages like Python and JavaScript.

C#:

C# is a statically-typed language primarily used in Windows development, but it's also supported on other platforms through .NET Core and .NET 5+.
It offers strong support for handling files and has a rich ecosystem of libraries and tools, especially if you're working within the Microsoft ecosystem.
C# can provide good performance, especially for CPU-bound tasks.
Ultimately, the differences between these languages are nuanced, and the choice depends on your specific needs and preferences. For a task like removing duplicate lines from a file, any of these languages can do the job effectively. Consider factors like your familiarity with the language, the existing codebase and tools you're using, and the specific performance requirements of your project when making your decision.

Entendendo autenticação

Jorge Madson — Tue, 15 Aug 2023 20:17:37 +0000

Todos site, app, ou serviço que fazemos tem autenticação.
Lendo esse artigo (https://technically.substack.com/p/how-does-authentication-work) acho que entendi o problema, então vou explicar.
Primeiro pra quem precisamos de autenticação?
Pra provar que você é você mesmo, se existe alguma informação sensível na aplicação como dados de pagamentos, ou a possibilidade de fazer com que outra pessoa se passe por você (como acontece em centenas de golpes) é risco, a autenticação é necessária.

TLDR: Resumindo autenticação acontece tecnicamente de duas formas, por cookie que nada mais é uma grande string salva no banco de dados geralmente no seu usuário que é comparada com essa string salva no seu navegador que é enviada em cada requisição.
Ou JWT que é a mesma coisa só que usando criptografia (chave pública e chave privada) para validar a você ao invés da grande string.

Bom resumindo é isso, qualquer dúvida é só chamar.

Easiest way to fix navegation error usign Netlify

Jorge Madson — Thu, 14 Apr 2022 00:12:45 +0000

So I developed the English Online Games to learn some Vuejs and SPA development, I was proud of my work so published it in Netlify but as soon it ran I got an error.
After searching a lot, I find this much complicated and the easiest way to fix it is by creating a file name "_redirects" in your public folder, like this:

_redirects

/* /index.html 200

Here you can see the file in my repository:

https://github.com/JorgeMadson/englishonlinegames/blob/main/public/_redirects