Webpack Dev Server, mejor alternativa que servor

En un anterior post (Aquí) comentaba que podíamos usar servor para levantar nuestra aplicación web y que cuando hacíamos un cambio en cualquiera de nuestros archivos, Webpack detecta el cambio, compila, servor se da cuenta que la carpeta donde esta escuchando ha cambiado y se refresca el navegador; pero, esto es muy lento, debido a que es necesario que Webpack escriba cada vez en el disco la publicación y ya sabemos que las escrituras a disco son bastante lentas; así que vamos a ver la alternativa Web Pack Dev Server, esta alternativa es mucho mas rápida debido a que genera los archivos en memoria

Instalar Web Pack Dev Server

npm install webpack-dev-server

Configuración

En el archivo package.json modificar la propiedad scripts

"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

Podemos comprobar que se están generando los archivos en memoria si eliminamos la carpeta dist y vemos que la aplicación sigue funcionando

Referencias:
https://www.youtube.com/watch?v=ansUGkcrhwY&t=3004s

npm servor como servidor de aplicaciones

Cuando desarrollas una aplicación web es muy util tener una herramienta que conforme vayas haciendo cambios en tu código, puedas verlos reflejados en el browser sin necesidad de dar f5 y es aquí donde entra servor

Instalación

npm install -g servor

A continuación le indicaremos a servor que use el puerto 8080, escuche en la carpeta src, use el archivo index.html como fallback e caso de que no indiquen uno en la url y que haga una recarga de la pagina cada vez que detecte cambios en cualquier archivo de la carpeta

servor src index.html 8080 --reload

Referencias:
https://www.youtube.com/watch?v=ansUGkcrhwY&t=3004s

C# Trucos sintaxis

override

Si estas heredando de una clase que tenga métodos que se puedan sobrescribir y no quieres entrar a la clase y revisar que métodos son, en visual studio puedes escribir la palabra override dentro de la clase que esta heredando y intellisence te desplegara una lista con todos los métodos que se pueden sobrescribir y al dar tab te implementa la firma del método para que puedas empezar a utilizarla

prop

En visual studio si escribes prop en una clase y das tab te implementa la firma o el cascaron de una propiedad para que luego la modifiques a tu gusto, con el nombre que deses y el tipo que desees

ctor

Al dar tab se crea el constructor de la clase

Null-Coalescing  ??

userFilters = userFilters ?? new List<FilterData>();

Lo que hace el codigo anterior es si userFilters es nulo le asigna una nueva lista, sino le asigna de nuevo userFilters

Null-Coalescing  assigment ??=

Con esta instrucción se puede acotar la sentencia anterior de Null-Coalescing a

userFilters ??= new List<filterdata>();

Apis publicas que te pueden servir para hacer pruebas en tus desarrollos

En ocasiones necesitas una api publicada para probar cosas, como por ejemplo, estas aprendiendo a usar postman o estas aprendiendo a usar fetch o jquery ajax, o quieres construir un mvp o un pet project y no te quieres poner a publicar una api y demas, pues usando algunas de estas api publicas puedes lograr esto

https://randomuser.me/
Api para generar datos aleatorios de usuarios, por ejemplo imagenes de usuarios, listados de usuario por genero,

Ejemplo
https://randomuser.me/api/portraits/women/${params.id}.jpg

El ejemplo anterior nos traer una imagen de una mujer

https://swapi.dev/
Api para obtener informacion de Star Wars, como como informacion de un personaje

Ejemplo
https://swapi.dev/api/people/1/

Obtiene la informaci[on de Luke Skywalker

Giphy
Api para obtener gifs, te debes registrar para obtener un key y poder usar la api

https://developers.giphy.com/

JSON PlaceHolder
https://jsonplaceholder.typicode.com/