Hola, dev! En este post hablaremos de manera muy concreta de  biomejs / biome, de donde viene, con que y para qué está hecho, porqué utilizarlo y porqué no utilizarlo. Espero te sea de utilidad, y sin más que decir, ¡vamos a comenzar!


Biome es un formateador y linter de código abierto, antes llamado Rome, creado con Rust, por Sebastian McKenzie (Creador de Babel y Yarn), en agosto del 2023 pasó a ser Biome.

A continuación comparto razones de porqué utilizar Biomejs y porqué no utilizarlo. Seguramente pueden haber más razones pero estas son las que creí más pertinentes para compartirles al día de hoy.

A pesar de que Rome nació en el 2020 y luego pasó a ser Biome en agosto del 2023, es relativamente reciente y por consecuencia puede que no sea tan maduro en algunos aspectos.

Por el momento no formatea ni el HTML ni el CSS, sin embargo en los próximos meses se incorporará en la CLI.

No tienes que instalar eslint y Prettier ya que biomejs hace de formateador y de linter.

Tiene plugins en Visual Studio Code, IntelliJ, entre otros.

Su filosofía interna como proyecto está muy bien.

Así llegamos al final de este post, ha sido muy directo y breve. Espero te sirva esta pequeña explicación y te animes a usar biomejs en tus proyectos. dejo los links de la documentación como referencia y por si quieres ver más al respecto.

Gracias por leer. Cuídate, nos vemos en un próximo post.

https://biomejs.dev/blog/annoucing-biome/

https://biomejs.dev/internals/philosophy/

Created with Flutter. Application that copies the functionality of tiktok,  using clean architecture.

 Repository: https://github.com/pac008/toktik-with-flutter

Created with Flutter. This application is a chat, and it will answer you every time you ask a question, with yes, not with a meme,

I could also answer you maybe every 10 thousand times. Available in play store:  https://play.google.com/store/apps/details?id=app.vercel.miguelherrera.yesnomaybe

Github repository: https://github.com/pac008/yes-no-maybe-app

 This application is an online clothing store. It is inspired by the tesla store. Project Created with NextJS, MongoDB, Cloudinary, PAYPAL, authentication, and deployed in Vercel.

 you can see how it works in the following link: https://shop-next-sigma.vercel.app/

Github repository: https://github.com/pac008/shop-next

Created with React and Sockets with nodejs (socket.io). This is a map application, we can see the movements of the markers in real time.

Front: https://github.com/pac008/maps-with-sockets

Back: https://github.com/pac008/maps-server-sockets

Created with React and Sockets with nodejs (socket.io). This is a real-time queue application that can be used by any store that wants to implement an automatic queue system.

Front: https://github.com/pac008/react-queue-sockets

Back: https://github.com/pac008/back-queue-socket

Created with React and Sockets with nodejs (socket.io). this is a real time band voting app, the graph will update in real time anywhere in the world your customers are online. 

You can register your band and vote for your favorite.

Graphics, voting and registration of bands

Front: https://github.com/pac008/graphics-sockets-react

Back: https://github.com/pac008/band-socket-nodejs

This is an application to manage tasks Project Created with NextJS, MongoDB and deployed in Vercel.

 You can see how it works in the following link: https://todo-with-next-beta.vercel.app/

Github repository: https://github.com/pac008/TODO-With-Next

Created with React, nodejs and mongoDB. This is a calendar application, to have your schedule organized, with an authentication system

Front: https://github.com/pac008/calendar-with-react

Back: https://github.com/pac008/calendar-back

Created with React native. This application shows the movies that are currently on the cinema billboard. Available in play store for internal tests, if you want to try it, write me and I'll give you access.

 Hola, dev! En este post hablaremos de estos dos operadores reactivos, explicaré el funcionamiento de cada uno dando pequeños ejemplos. Espero te sea de utilidad, y sin más que decir, ¡vamos a comenzar!

 Estos operadores reactivos son muy interesantes y pueden ser muy útiles para detener una solicitud según una condición cuando trabajamos con observables.

 El skipUntil va a detener las solicitudes hasta que se cumpla una vez la condición, después de ese momento van a pasar todas las solicitudes, como se podría ver en el siguiente ejemplo:

Dado que en el pipe estamos utilizando el skipUntil, y la condición de este es el “evento (click)“, hasta que el antes dicho no se produzca no va dejar pasar el valor. Significa que si das click en el “segundo 4”, a partir de ese momento va a imprimir en la consola los valores posteriores, como podemos ver a continuación:

import { interval, fromEvent, skipUntil } from 'rxjs';

const intervalObservable = interval(1000);
const click = fromEvent(document, 'click');

const emitAfterClick = intervalObservable.pipe(
  skipUntil(click)
);
// clicked at 4.6s. output: 5...6...7...8........ or
// clicked at 7.3s. output: 8...9...10..11.......
emitAfterClick.subscribe(value => console.log(value));

 Puede ser que esto sea lo que se quiera sin embargo hay que tener mucho cuidado con esto, porqué se podría confundir con el funcionamiento del filter, que en su caso siempre va a detener las solicitudes que no cumplan la condición, el cual veremos un ejemplo a continuación:

Está más o menos claro pero aquí los que no cumplan la condición “num % 2 === 0” no van a llegar a la subscripción:

// RxJS v6+
import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

//emit (1,2,3,4,5)
const source = from([1, 2, 3, 4, 5]);
//filter out non-even numbers
const example = source.pipe(filter(num => num % 2 === 0));
//output: "Even number: 2", "Even number: 4"
const subscribe = example.subscribe(val => console.log(`Even number: ${val}`));

 https://www.learnrxjs.io/learn-rxjs/operators/filtering/filter

 Así llegamos al final de este post, ha sido muy directo. Espero te sirva esta pequeña explicación y puedas usar estos operadores reactivos en tus próximos proyectos. dejo los links de la documentación como referencia y por si quieres ver más.

Gracias por leer. Cuídate nos vemos en un próximo post.

In this post let’s talk about BehaviorSubject and Subject reactive operators, their differences and why using them.
 I will write from my experience and based on the RxJS documentation.

 BehaviorSubject: Requires an initial value and emits the current value to new subscribers

In the next exemple, BehaviorSubject will emit number type data.

We instantiate our operator in a constant called ‘user’ with the value: ‘Miguel’.

To obtain this value, we can subscribe and therefore when it changes value, we will receive the new value. Also, we can get the value by using: “value” it changes asynchronously.

To change the value of our operator, we use the method: next()

// RxJS v6+
import { BehaviorSubject } from 'rxjs';

const user = new BehaviorSubject<string>('Miguel');

// two new subscribers will get initial value => output: 'Miguel', 'Miguel'
user.subscribe(console.log);
user.subscribe(console.log);

// two subscribers will get new value => output: 'Esther', 'Esther'
user.next('Esther');

// new subscriber will get latest value ('Esther') => output: 'Esther'
user.subscribe(console.log);

// all three subscribers will get new value => output: 'Juan', 'Juan', 'Juan'
user.next('Juan');

// new "value" Get value with: value. will get latest value.
console.log(user.value) => output: 'Juan'

 When we get a data, and a method or a function that we want to call to receive a data, we can reduce it in the following way -> In JavaScript it is the same to do this:

user.subscribe(console.log);
user.subscribe(resp => console.log(resp) );

 If you want to know more you can, this comment on stack overflow may help you -> https://stackoverflow.com/questions/48099360/why-is-it-passing-the-console-log-as-argiment-of-the-observble-subscribe-funct

Now let’s talk about the Subject operator:

A Subject is like an Observable, but can multicast to many Observers. Subjects are like EventEmitters: they maintain a registry of many listeners.

One of the first differences that it has with BehaviorSubject that is worth mentioning is that it is not initialized with a value. Another is that you can’t access the value directly with the “value” property, only there in BehaviorSubject.

To get the value of Subject you always have to subscribe to it. All Subject is an observable. To send a new value to the subject just call next(‘And enter the new value here’). and this value will be received everywhere we are subscribed.

The example below, is similar to the BehaviorSubject, but this time we will only have one subscriber:

import { Subject } from 'rxjs';
 
const user = new Subject<string>();
 
user.subscribe(newUser => {
     console.log(newUser),
});

 
user.next('Miguel');
user.next('María');
 
// Logs:
// 'Miguel' - 1
// 'María'  - 2

 If you want to stop tracking changes in both BehaviorSubject and Subject, you can use unsubscribe().

If you are using Angular I recommend you to implement the OnDestroy and unsubscribe so that the call is not duplicated. ->

 The last data of BehaviorSubject, will be kept in the cache if you have an account. It can be very useful.

Thank you for reading my post, I hope it was helpful. Greetings!.

Created with React Native. this is a calculator app. Available in play store:  https://play.google.com/store/apps/details?id=app.vercel.miguelherrera.calculadorarn&hl=es_419&gl=US

Github repository: https://github.com/pac008/react-native-calculadora

Social network for a youtuber, so that their community can share images on this platform. Project Created with Angular, Firebase, Youtube's API, CSS, authentication, and deployed in FireBase. 

 you can see how it works in the following link: https://cocinando-con-juan-89966.web.app/