DEV Community: Simone Gentili

React component

Simone Gentili — Wed, 22 Oct 2025 20:10:01 +0000

<Activity /> component

Today I was wondering in new React 19.2 features. For example I have been play with <Activity /> one. Here an example. The example is complete but I'll write few considerations about how to use it.

import { Activity, useState } from 'react'
import './App.css'

function App() {
  const [mode, setMode] = useState(true)
  return (
    <>
      <button onClick={() => setMode(!mode)}>
        toggle
      </button>

      <Activity mode={mode === true ? 'hidden' : 'visible'}>
        <textarea placeholder="Type something..." rows={4} cols={50} />
      </Activity>
    </>
  )
}

export default App

The old way

I think is good component. It makes more readable and with more features. The old way is this:

import { useState } from 'react'
import './App.css'

function App() {
  const [mode, setMode] = useState(true)
  return (
    <>
      <button onClick={() => setMode(!mode)}>
        toggle
      </button>

      {mode && <textarea placeholder="Type something..." rows={4} cols={50} />}
    </>
  )
}

export default App

But with this syntax, when mode is false, the textarea is removed. This means that the state isnt stored. It is crucial to understand the difference.

Ultimate example

I suggest to use this kind of state variable:

 const [mode, setMode] = useState<'visible' | 'hidden'>('visible')

And this function

() => setMode((mode) => (mode === 'visible' ? 'hidden' : 'visible'))

Because the point is to make code more readable as possibile. And I think this is the more readable way to use <Activity /> component.

<Activity mode={mode}>
  <textarea placeholder="Type something..." rows={4} cols={50} />
</Activity>

Here the full example.

import { Activity, useState } from 'react'
import './App.css'

function App() {
  const [mode, setMode] = useState<'visible' | 'hidden'>('visible')
  return (
    <>
      <button onClick={() => setMode((mode) => (mode === 'visible' ? 'hidden' : 'visible'))}>
        toggle
      </button>

      <Activity mode={mode}>
        <textarea placeholder="Type something..." rows={4} cols={50} />
      </Activity>
    </>
  )
}

export default App

My latest books

I am writing a book of notes about React 19.2. I've also published some other books. Italian only at the moment.

JavaScript: https://amzn.to/479R9DG
TypeScript: https://amzn.to/47w7X87

React 19 example of the useOptimistic() hook

Simone Gentili — Tue, 28 May 2024 21:20:16 +0000

A working example

This post is related to this example. You can see just the code or read this article that explain step by step what's happening in the little app.

Create new react app

First of all create new React application. If you like vite, you can use the command below.

npm create vite@latest

Experimental stuffs

Meanwhile I am writing the hook is still experimental. In the canary version of React 19 so... we need more packages to add the hook to the project.

npm install react@^0.0.0-experimental-6f23540c7d-20240528 \
react-dom@^0.0.0-experimental-6f23540c7d-20240528 \
uuid@^9.0.1 \
@types/react@18.3 \
@types/react-dom@18.3

Import

The import is obviously...

import { useOptimistic, useState } from "react";

Data

In this example we will treat books. Because this example will be part of a book I am writing (italian only) about Reacct 19.

type Book = { text: string; sending: boolean; key?: number };

Rest call

At some point The little example will call some api. For simplicity I am simulating network delay with a Promise. Also, I simulate the the real call will update a value adding " content from rest api" like a rest api is returning data updated/filtered/fixed...

const createNewBook = async (message: FormDataEntryValue | null) => {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return message + " content from rest api";
};

App

Here we are!! The application contains a listo of books. React, TypeScript and Next.js is already written. React... is a working progress... The App create a list of books. A function that send data to an api and then add the result to the books.

export default function App() {
  const [books, setBooks] = useState<Book[]>([
    { text: "React", sending: false, key: 1 },
    { text: "React, TypeScript e Next.js", sending: false, key: 3 },
  ]);

  async function sendMessage(formData: FormData) {
    const sentMessage = await createNewBook(formData.get("message"));
    setBooks((messages: any) => [...messages, { text: sentMessage }]);
  }

  return <Library books={books} createBook={sendMessage} />;
}

Library

The main point of this article is the component <Library />. Let's take a step back. The data we are working with are book. And books are stored in this way:

type Book = { text: string; sending: boolean; key?: number };

Whenever sending is true, <small> (Sending...)</small> will appear after the new book. And sending is false in books array we have seen before.

  const [books, setBooks] = useState<Book[]>([
    { text: "React", sending: false, key: 1 },
    { text: "React, TypeScript e Next.js", sending: false, key: 3 },
  ]);

We also add a form to add a new title to the book list.

function Library(/** some params */) {
  /** some contents */

  return (
    <>
      {optimisticContent.map(
        (message: { text: string; sending: boolean }, index: number) => (
          <div key={index}>
            {message.text}
            {!!message.sending && <small> (Sending...)</small>}
          </div>
        )
      )}

      <form action={formAction}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
    </>
  );
}

Form action

Form will send data to formAction() function. Then the function add the content to the book list and send form to an external api. (use the imagination about the external api).

  async function formAction(formData: FormData) {
    addContent(String(formData.get("message")));
    await sendMessage(formData);
  }

useOptimistic

With this syntax we configure optimisticContent as optimistic content. For example, when addContent method is called, he receive new book marking the Book with sending=true.

  const [optimisticContent, addContent] = useOptimistic(
    messages,
    (state: Book[], newMessage: string) => [
      ...state,
      {
        text: newMessage,
        sending: true,
      },
    ]
  );

Complete code

function Library({
  books: messages,
  createBook: sendMessage,
}: {
  books: Book[];
  createBook: (formData: FormData) => void;
}) {
  async function formAction(formData: FormData) {
    addContent(String(formData.get("message")));
    await sendMessage(formData);
  }

  const [optimisticContent, addContent] = useOptimistic(
    messages,
    (state: Book[], newMessage: string) => [
      ...state,
      {
        text: newMessage,
        sending: true,
      },
    ]
  );

  return (
    <>
      {optimisticContent.map(
        (message: { text: string; sending: boolean }, index: number) => (
          <div key={index}>
            {message.text}
            {!!message.sending && <small> (Sending...)</small>}
          </div>
        )
      )}

      <form action={formAction}>
        <input type="text" name="message" placeholder="Hello!" />
        <button type="submit">Send</button>
      </form>
    </>
  );
}

Resume

When you use a form to send a new Book to the list of books, the formAction method add the item into the optimistic list. Then send data to an api, for example. After a while, the api return a value. And then the value is added to the real list of books.

useState() semantic when you need to toggle modal visibility

Simone Gentili — Thu, 09 May 2024 00:12:00 +0000

The problem

Is not a real problem but is something about semantic in use state variabile using useState(). The fact is useState() can be used to store if a modal is open or close. What I HATE is use the setter in this way: const [isOpen, setOpen] = useState(false);. What I hate is the use of setOpen. I prefer a more semantic way to manage boolean values.

Type

useState() returns two values. First with the boolean value and second the method to update the variable.

type Modal = [boolean, () => void, () => void];

Solution

My proposal is to stop using useState() and start building hooks like this one. If the semantic is to open or close a modal... just provide

isOpen
openModal()
closeModal()

Code

type Modal = [boolean, () => void, () => void];

const useModal = (initial: boolean): Modal => {
  const [isModalOpen, setValue] = useState(initial);
  const open = () => setValue(true);
  const close = () => setValue(false);
  return [isModalOpen, open, close];
};

export default function Home() {
  const [isFirstModalOpen, openFirstModal, closeFirstModal]
     = useModal();
}

Conclusion

This is a little example but this hook can now be used for all the modals:

  const [isSomethingOpen, openSomething, closeSomething]
     = useModal();

The book (only for italian speakers)

This and others snippets will be included in next edition of React, TypeScript e Next.js. Please follow me as author to receive notifications of new books (React 19 is coming)!!

toggle button with react

Simone Gentili — Wed, 21 Jun 2023 21:52:45 +0000

overview

I've created same post years ago in the same serie. Before I created 25 videos about react and some other about NextJs. Also, .. before meet vite. This is an updated version of an old article about toggle button creation with react.

requirements

You just need npm installed to run the following command



npm create vite@latest
cd app_name
npm install
npm run dev

src/App.tsx

Replace src/App.tsx file with this:



import { useState } from 'react'
import './App.css'

function App() {
  const [pressed,setPressed] = useState(false)
  const label = pressed?'pressed':'unpressed'
  return (
    <>
      <h1>Toggle button</h1>
      <button onClick={() => setPressed(!pressed)}>{label}</button>
    </>
  )
}

export default App

Conclusion

Study is better. Now React have hooks. Install with cdn is fine but create app with vite is cool.

memento pattern

Simone Gentili — Wed, 21 Jun 2023 09:00:00 +0000

Elements

Is is composed by two elements. First one is an originator. Second one is memento. It separate object state from object manipulation. Memento class store the status. Originator class manipulate the status.

Memento class

Code speak itself. This class read a content and provide same content. The content is the status of the book (libro in italian).

class LibroMemento
{
    public function __construct(private string $content)
    {

    }

    public function getContent()
    {
        return $this->content;
    }
}

Originator class

In this case the originator class add paragraph to the book content. It contains two special methods: save and restore. Save generate a memento object. It contains the content of the book and create a memento instance with that content. Then with restore, get the content from a memento and become that object.

class Libro
{
    public function __construct(private string $content = '') {}
    public function addParagrafo(string $paragrafo)
    {
        $this->content .= "\n" . $paragrafo;
    }

    public function save()
    {
        return new LibroMemento($this->content);
    }

    public function restore(LibroMemento $libro)
    {
        $this->content = $libro->getContent();
    }

    public function __toString()
    {
        return $this->content;
    }
}

Usage

In this first case, echo returns

Ciao sono Simone
Sono un programmatore

$libro = new Libro;
$libro->addParagrafo('Ciao sono Simone');
$savepoint = $libro->save();
$libro->addParagrafo('Sono un programmatore');
echo $libro;

In this first case, echo returns

Ciao sono Simone

Because $savepoint contains only first paragraph.

$libro->restore($savepoint);
echo $libro;

Conclusion

This pattern is commonly used in software of video, image, text editors and games. It separate the logic of updates from the status itself.

Bind for 0.0.0.0:8080 failed: port is already allocated

Simone Gentili — Mon, 05 Jun 2023 00:25:49 +0000

Waiting for docker-compose to complete its execution, only to be greeted with the frustrating message that the desired port is not available, can be incredibly exasperating. The anticipation builds up as we hope for a seamless deployment, only to be let down by the port conflict. This can lead to wasted time and effort, not to mention the frustration of having to go back and manually find an available port.

However, with the help of this script, such moments of disappointment are now a thing of the past.

$fileContents = file_get_contents('docker-compose.yml.dist');
$generatedContents = str_replace('{{port}}', findFreePort(8080), $fileContents);

file_put_contents('docker-compose.yaml', $generatedContents);

function findFreePort($startPort)
{
    $port = $startPort;
    $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);

    while (!@socket_bind($socket, '127.0.0.1', $port)) {
        $port++;
    }

    socket_close($socket);
    return $port;
}

This is an example:

version: '3.7'
services:
  server:
    build:
      context: ./docker/server/
    volumes:
      - ./:/var/www/html
    ports:
      - "{{port}}:80"

The beauty of not having to rely on trial and error anymore cannot be overstated. Gone are the days of guessing and manually changing port numbers until finding one that works. With this script in hand, the process becomes smooth and efficient. It automatically searches for an available port, starting from a specified point, such as 8080, eliminating the hassle of port conflicts. Now, docker-compose can effortlessly allocate a free port, saving valuable time and providing a sense of relief. The convenience and peace of mind offered by this script are truly remarkable.

automatic dependency injection in 4/5 lines of code

Simone Gentili — Sun, 30 Apr 2023 22:18:34 +0000

The project

You can find the code here.

Prerequisite

You just have installed composer due to this script uses psr-4 autoloading.

Usage

If you have a more complex situation like this

class Foo {}
class Bar { public function __construct(Foo $foo) {} }
class Pub {
  public function __construct(Bar $bar) {}
  public function method() {
    return 42;
  }
}
class Animal { }
class Cat { public function __construct(Animal $animal) {} }
class Fizz {
  public function __construct(private Pub $pub) {}
  public function doSomething(Cat $cat) {
    return $this->pub->method();
  }
}

You can instance Fizz object and the run doSomething method just doing

$result = injector(Fizz::class, 'doSomething');

5 line solution

This solution is not readable. Is just to create a clickbait.

function injector($instance, $method = '__construct', $deps = []) {
    foreach ((new \ReflectionMethod($instance, $method))->getParameters() as $dep) {
        $className = (string) $dep->getType();
        $deps[] = new $className;
    }
    return $method == '__construct' ? new $instance(...$deps) : injector($instance)->$method(...$deps);
}

Readable solution

This is a readable solution.

function buildDeps($instance, $method, $deps = []) {
    $params = (new \ReflectionMethod($instance, $method))
        ->getParameters();
    foreach ($params as $dep) {
        $className = (string) $dep->getType();
        $deps[] = new $className;
    }
    return $deps;
}

function injector($instance, $method = '__construct') {
    $deps = buildDeps($instance, $method);
    return $method == '__construct'
        ? new $instance(...$deps)
        : injector($instance)->$method(...$deps);
}

And if you want to see the entire process of its creation (but, sorry, only in italian) click here.

I made a php router with attributes

Simone Gentili — Sun, 23 Apr 2023 09:58:27 +0000

Hi folks!!! I always ear php haters talk about a language I do not know. They do not know the language they are talking about. And to show them a little example of what php8 is able to do, I've create a simple exercice: a php router with php attributes.

Create public folder. I mean, .. a folder called "public". Then create an index.php file inside. And follow the steps in this article.

The attribute

First of all, ... you can create a php class Route. the attributes is simple the #[Attribute]. Attribute syntax starts from #[ and finisci with ]. You can "mark" a class, a method, a property, .... with attributes.

 #[Attribute]
 class Route
 {
     public function __construct(
         private string $method = 'GET',
         private string $path = '/',
     ) { }
 }

A Response class

This is useless for the purpose of this post, but I've made a little video (in italian). And I've just copied and pasted the code here. This object aims to decorate the json for a generic response, with some links. It make easy website navigation at the end of the post.

class Response
{
    public function __construct(private array $json = []) { }

    public function getContent()
    {
        return json_encode(
            array_merge(
                $this->json,
                [
                    '@link' => [
                        'http://localhost:8888/',
                        'http://localhost:8888/info',
                        'http://localhost:8888/conclusions',
                    ]
                ]
            )
        );
    }
}

Handler interface

In some framework we call them controllers. Here I just named them Handler. The point is that each route will call its own handler.

interface Handler {
    public function handle(): Response;
}

The concrete handlers

Now you can create some handlers, and att an attribute to them. Note that someone known annotations. Annotations was just a DocBlock comment. PHP attributes are structured and readable by the interpreter. You can obtain a class attribute using reflection.

#[Route('GET', '/')]
class HomeContoller implements Handler
{
    public function handle(): Response
    {
        return new Response([
            'page' => 'home'
        ]);
    }
}

#[Route('GET', '/info')]
class InfoController implements Handler
{
    public function handle(): Response
    {
        return new Response([
            'page' => 'info'
        ]);
    }
}

Configuration

I've also made a little configuration file: a list of handler, .. controller, .. call them as you like. Doesnt matter.

$routes = [
    HomeContoller::class,
    InfoController::class,
];

Reading attributes

Here I've create a function. The function read an array of handlers/controllers. For each handlers/controllers get a reflection instance, get attributes from the instance. Attributes (Route) indicate the http method and the path. If the route corresponds to the handler one, then handle the handler.

function router(array $routes): Response {
    foreach($routes as $handler) {
        $reflection = new ReflectionClass($handler);
        $attributes = $reflection->getAttributes(Route::class);
        foreach($attributes as $attribute) {
            if ($attribute->getArguments()[0] === $_SERVER['REQUEST_METHOD']) {
                if ($attribute->getArguments()[1] === $_SERVER['REQUEST_URI']) {
                    return (new $handler)->handle();
                }
            }
        }
    }
}

$response = router($routes);

echo $response->getContent();

Run built-in serve

Now You have your amazing router. You can try it. Just run

php -S localhost:8888 -t public

And see it working.

Conclusions

The conclusion is that php is amazing. A lot of people do not know it. all of them know php3, maybe. Once I heard someone say: "wow, .. php have also classes". So, .. LOL.

Well, .. add a new controller:

#[Route('GET', '/conclusions')]
class ConclusionsController implements Handler
{
    public function handle(): Response
    {
        return new Response([
            'message' => 'If you like this post, ... leave a like',
            'and' => 'and follow me for more post like this',
        ]);
    }
}

Then update also the configuration:

$routes = [
    HomeContoller::class,
    InfoController::class,
    ConclusionsController::class,
];

And if you speak italian you can see my video on youtub

Introduction to react-query

Simone Gentili — Wed, 22 Mar 2023 21:10:14 +0000

you can find a video version of this article but it is only in italian

install react

This hook can be used after installing a component called react-query.

To install, run:

npm install react-query

As usual, start with an empty React application. In the code below, we have only included the title of this paragraph.

src/App.js

import './App.css';

function App() {
 return (
   <div className="App">
     <header className="App-header">
       <h1>react-query</h1>
     </header>
   </div >
 );
}
export default App;

create new component

Now let's create the component we will call MyComponent.

src/MyComponent.js
export default function MyComponent() {
return (
<div>
<h1>My Component data</h1>
<ul></ul>
</div>
)
}

start using useQuery()

Now, thanks to react-query, we can use the useQuery hook. With this component, we can obtain references related to a call to an external API, the data that it returns, whether the page is loading, whether it has encountered an error, and the list of errors.

src/MyComponent.js

import { useQuery } from "react-query"

export default function MyComponent() {
const { data, isLoading, isError, error } = useQuery('myData', () =>
fetch('http://localhost:8888')
.then(res => res.json())
);

if (isLoading) {
return <div>loading ...</div>
}

if (isError) {
return <div>Error: ... {error.message}</div>
}

return (
<div>
<h1>My Component data</h1>
<ul></ul>
</div>
)
}

get data

Let's now determine what we want to show on the screen while our hook is waiting for a response from the server or when a response has been received, but an error has occurred.

src/MyComponent.js

import { useQuery } from "react-query"

export default function MyComponent() {
const { data, isLoading, isError, error } = useQuery('myData', () =>
fetch('http://localhost:8888')
.then(res => res.json())
);

if (isLoading) {
return <div>loading ...</div>
}

if (isError) {
return <div>Error: ... {error.message}</div>
}

return (
<div>
<h1>My Component data</h1>
<ul></ul>
</div>
)
}

display data

The last step is to display the obtained data once our hook has loaded the page.

src/MyComponent.js

import { useQuery } from "react-query"

export default function MyComponent() {
const { data, isLoading, isError, error } = useQuery('myData', () =>
fetch('http://localhost:8888')
.then(res => res.json())
);

if (isLoading) {
return <div>loading ...</div>
}

if (isError) {
return <div>Error: ... {error.message}</div>
}

return (
<div>
<h1>My Component data</h1>
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
)
}

include component

Now let's return to the component. We can now include our component.

src/App.js

import './App.css';
import MyComponent from './MyComponent';
import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient()

function App() {
 return (
   <div className="App">
     <header className="App-header">
       <h1>react-query</h1>
       <QueryClientProvider client={queryClient}>
         <MyComponent />
       </QueryClientProvider>
     </header>
   </div >
 );
}

export default App;

However, before doing so, unless we want to get a visible error in the browser console, we need to wrap all components that use useQuery in a . This needs to receive a client as input. This client must be an instance of .

server

Finally we have to create the php server to run with php -S localhost:8888 -t public. First of all create the folder public and inside create the index.php file. The file s should contains something similar to:

<?php

Header('Access-Control-Allow-Origin: *');
Header('Content-type: application/json');

echo json_encode([
    [
        'id' => 987,
        'name' => 'Simone',
    ],
    [
        'id' => 657,
        'name' => 'Lorenzo',
    ],
]);

So, .. run php server (or write your own with node or other tool) and the run also your react application.

Enjoy

I've created a CRUD server with docker, fastify and mongoDB

Simone Gentili — Fri, 27 Jan 2023 12:35:00 +0000

Premise

The following is the code explained in my youtube video (italian only, .. but eng subtitled) that is scheduled for 02-02-2023. But if you prefer you can go to my channel ad watch other videos and subscribe so then you will be noticed for all the contents like this one.

You do not need to know how it works docker. But you need to know what is a database. Is not importnat to know the difference between SQL or NoSQL here. It is important to know what a database is. And mongoDB is a database.

Http calls

At the end of the post all http calls are made with curl. There is also a command called "http". If you prefer you can make same calls with Postman. Use the command or the tool you prefer. If you want, you can also develop your own client with Angular, React or simply html/css/javascript.

Rest

This post also assumes you knot what is REST. Rest means: Representational State Transfer. Shortly, .. with databases CRUD operations (Create, Read, Update and Delete) have a corresponding http verb.

CREATE -> POST
READ -> GET
UPDATE -> PUT
DELETE -> DELETE

Package.json

This little fastify CRUD is very very simple. In package json we only have few packages: @fastify/mongodb@6.0.0 and fastify. No other dependencies are required.

Require

Code here is very very simple. It load fastify ad register mongo. Database is called library just because I wish to build a simple tool to store all my books.

const fastify = require('fastify')({ logger: !true })

fastify.register(require('@fastify/mongodb'), {
    forceClose: true,
    url: 'mongodb://localhost:27017',
    database: 'library'
})

Create

CRUD contains Create, Read, Update and Delete. This is the first letter.

fastify.post('/books', async (request, reply) => {
    const result = await fastify
        .mongo.db.collection('books')
        .insertOne(request.body)

    reply.send({
        message: 'book added',
        id: result.insertId
    })
})

Read

I want to list all books stored in database.

fastify.get('/books', async (request, reply) => {
    const books = await fastify
        .mongo.db.collection('books')
        .find().toArray()

    reply.send(books)
})

Update

I came from php (Symfony) and see code like const { bookId } = request.params; for me is something similar to gold. Node is very nice language. I am falling in love with this language.

fastify.put('/books/:bookId', async (request, reply) => {
    const { bookId } = request.params;
    const ObjectId = fastify.mongo.ObjectId
    const result = await fastify
        .mongo.db.collection('books')
        .replaceOne(
            { _id: new ObjectId(bookId) },
            request.body
        )

    reply.send({
        message: 'book updated',
        id: result.insertId
    })
})

Delete

fastify.delete('/books/:bookId', async (request, reply) => {
    const { bookId } = request.params;
    const ObjectId = fastify.mongo.ObjectId
    await fastify
        .mongo.db.collection('books')
        .deleteOne({ _id: new ObjectId(bookId) })

    reply.statusCode = 204
    reply.send(null)
})

Server

const start = async () => {
    try {
        await fastify.listen({ port: 3000 })
    } catch (err) {
        fastify.log.error(err)
        process.exit(1)
    }
}

start()

Run

Now with two simple commands:

npm run mongo
npm run start

we obtain a ready application. In this post I've no clients. So I'll put here some curl commands to make all CRUD operations. Change <bookId> with the real id.

curl http://localhost:3000/books
curl -H 'Content-type: application/json' -X POST http://localhost:3000/books -d '{"Titolo":"Node.js Design PAttern", "Autore": "Luciano Mammino"}'
curl -X PUT -H 'Content-type: application/json' http://localhost:3000/books/ -d '{"Title":"Node.js Design Patterns", "Authors":["Mario Casciaro", "Luciano Mammino"]}'
curl -v -X DELETE http://localhost:3000/books/

do you prefer Makefile or package.json

Simone Gentili — Wed, 18 Jan 2023 07:49:39 +0000

Scenario

As developer I need a tool to run some tasks programmatically. Since I have the memory of a goldfish, I always used Makefile, thus each task is written inside a target.

Autocomplete

With autocomplete Makefiles helped me in digitations and in memory issues. In those cases tab is a good friend whenever I was in a terminal. I can type make and then press tab. Autocomplete show all targets available and this can make the job very easy.

Node.js projects

In Node.js project we have a package.json. I never used autocompletion in those cases. The nice part of Node.js projects, in this kind of context, is that we already have a package.json file and no other stuffs are needed.

Replace Makefiles with package.json

Because of I am developing Node.js exercices for some youtube videos, .. I am moving all the things I always had in Makefile, .. inside package.json scripts.

package.json example

{
    "name": "youtube-poliglotta",
    "version": "1.0.0",
    "dependencies": {
        "@fastify/mongodb": "5.0.0",
        "fastify": "4.11.0"
    },
    "scripts": {
        "start": "node server.js",
        "start-mongo": "docker run -d  --name my-mongo -p 27017:27017 -e MONGO_INITDB_ROOT_USERNAME=mongoadmin -e MONGO_INITDB_ROOT_PASSWORD=secret mongo",
        "stop-mongo": "docker stop my-mongo"
    }
}

In this case: npm run start-mongo help me to run, for example, mongo container.

The same with Makefile

up:
    docker-compose up -d

In this case we have simple configuration.

Conclusion, pros, cons, ...

Both instruments are good. I love Makefile mainly for the autocomplete feature. This issue can be solved with this npm package for example. With Makefile we have separate file for tasks. Both are good to store somewhere tasks and avoid some documentation to remember how things should be done. I've seen most developer use package.json to add some tasks. In the manner you can see in examples. Makefile sometimes is not known. Package works both with Windows and *nix system.

So, .. what's your point of view? Are there other alternatives you use to run tasks? Please leave a comment.

Have you ever seen vim's popup menu?

Simone Gentili — Sat, 07 Jan 2023 01:35:31 +0000

popup menu, ...

Is a Vim function that displays a menu in a popup window. Yes, .. Vim has popup windows. The menu can contain a list of items. In the following example I've added just two: open vimrc file and replace current word. I this example, ... You'll see the code to select an item by clicking on it.

The popup_menu() function takes a list of items as an argument, and it returns the index of the selected item. Somewere inthe documentation I sow index starts from 0, .. but not for me: the first item in the list is 1, the index of the second item is 2, and so on.

The popup_menu() function also supports various options that allow you to customize the appearance and behavior of the popup menu. For example, you can specify the title of the menu, the callback function that is called when an item is selected, and the highlight style of the menu.

In this example the menu is "What do you want?". I've also added a this to open the popup menu:

nnoremap <leader><leader> :call Funzione()<CR>

So, ... it si very very simple to open popup. Oh, .. And you can simply ESC to close it without a selection.

" menu stuff
function! SensorarioTools(id, result)
    if a:result == 1
        :e ~/.vimrc
    endif
    if a:result == 2
        set nopaste
        let user_input = input('Enter a word:')
        let current_word = expand('<cword>')
        execute '%s/'.current_word.'/'.user_input.'/g'
    endif
endfunc
func! Funzione()
  call popup_menu([
    \ 'open ~/.vimrc',
    \ 'replace current word',
    \ ], #{
    \ title: "What do you want?",
    \ callback: 'SensorarioTools',
    \ line: 25,
    \ col: 60,
    \ highlight: 'Question',
    \ border: [],
    \ close: 'click',
    \ padding: [1,20,1,1],
    \ })
endfunc

nnoremap <leader><leader> :call Funzione()<CR>