Prisma

Cómo resolver el error: "./prisma/client/index-browser" is not a valid package al hacer build

## Agrega en tu vite.config.ts:  ```js build:{ rollupOptions:{ external: [ ...

Typescript

Aclarando las confusiones: Any vs Unknown en TypeScript

TypeScript es un lenguaje de programación que se ha vuelto extremadamente popular en los últimos años. Sobre todo por la seguridad que agrega a nuestros programas, haciendonos programar con más confianza y...

Los secretos detrás del poderoso TailwindCSS

## ¿Qué es Tailwind? Tailwind es un framework de CSS creado para facilitar la construcción de diseños y páginas web, de manera rápida y eficiente. Este framework se enfoca en la utilidad de...

Diseño

10 Leyes para una mejor experiencia de usuario

Recuerdo que cuando empezaba mi carrera como Diseñadora UX, buscaba contenido que me enseñara los lineamientos básicos que debía seguir al momento de tomar decisiones de diseño (libros, videos o posts) pero...

ChatGPT

¿Qué se mejoró en Next 13.4?

Next.js es framework para trabajar con React en el back end, que permite a los desarrolladores crear aplicaciones web de alta calidad de manera eficiente. La última versión, Next.js 13.4, llega con...

Next

Descubre las nuevas características de Next 13.4 que transformarán tu experiencia de desarrollo

Si eres un desarrollador web, sabrás que cada nueva versión de un software te ofrece nuevas soluciones y herramientas útiles que puedes utilizar en tu trabajo. La última versión de uno de...

Diseño

5 Patrones de diseño de interfaces que todo diseñador debería conocer

Cuando se trata de diseñar interfaces, existen ciertos patrones que se han vuelto Indispensables para crear una experiencia de usuario satisfactoria. **Si eres un diseñador en busca de mejorar tu trabajo, estos...

Configurando Caddy Server: El secreto para fácilmente usar https y reverse proxy en tus proyectos web

¡Hola! En este post, quiero compartir mi experiencia aprendiendo sobre `Caddy Server` y cómo puede ayudarnos a solucionar un problema común en el desarrollo de aplicaciones web. Si eres un desarrollador web, es...

React

Streaming Server-Side Rendering o Renderizado del lado del servidor con Streams. Explicado

### TLDR: Vamos a generar un HTML como primera respuesta al «request» del cliente, pero vamos a responder no con un archivo HTML, sino con pedacitos del mismo, con Streams. En este post...

Tailwindcss

2 formas de usar utilidades Tailwind, dinámicamente.

Si estás trabajando con «Tailwind» seguro has necesitado agregar clases condicionalmente. Y te habrás dado cuenta de que no es algo tan fácil de hacer. ¡Pero te tengo buenas noticias! Has llegado...

JavaScript

Ejemplos de JS patterns en la vida real: Proxy

Hemos hablado de distintos patterns de JavaScript, ya hemos mencionado al Proxy pattern. Pero ahora vamos a identificar casos reales donde se aplica este patrón en herramientas que tú ya conoces. Vue: ```jsx // Vue...

Remix

Generando un PDF con Remix y fs.readFile()

En el artículo anterior entregamos un archivo PDF con Response y Remix. En este post vamos a conseguir el PDF desde una carpeta de almacenamiento y vamos a leerlo, convertirlo en streams y...

Remix

¿Sabes cómo entregar archivo PDF desde tu web?

En Remix es muy fácil entregar archivos PDF con el componente Link. Supongamos que tenemos la ruta `app/routes/guias-pdf/$id.js` Y dentro de esta ruta tenemos un link de descarga de esta guía en PDF: ```jsx export default...

JavaScript

Iniciando la construcción de un Tetris con JS y Canvas

### Sin frameworks solo con JavaScript y Canvas Primero, colocar todas las piezas que vamos a necesitar en esta pantalla. Necesitaremos ocupar la mitad de la pantalla. En el centro, dividiremos el espacio a la...

Node

¿Qué es el Server Side Rendering (SSR) del que todos hablan?

¿Qué es el Server Side Rendering del que todos hablan? La definición sin rodeos es: `Generar HTML para ser renderizado/generado desde el servidor en respuesta de una petición de un usuario desde un...

Remix

¿Es Remix solo para programadores avanzados?

Últimamente, hablo mucho de Remix, lo comparo con Next.js y otros frameworks y lo prefiero. Lo recomiendo para comenzar en el desarrollo web con el pie derecho, sí, como full stack. Pero la...

CSS

5 maneras de agregar estilos CSS a Next.js

Existen muchas maneras de agregar CSS a Next.js, pero en este post vamos a conocer las 5 que el propio Next.js soporta por default. ## 1. Archivo CSS Global La primera manera es el...

ChatGPT

¿Cómo funcionan los plugins de ChatGPT en resumen?

Ya te puedes suscribir para ser parte del selecto grupo de desarrolladores que podrán probar en primera fila los nuevos plugins que prometen ser el nuevo "market place" que nos volverá millonarios...

JavaScript

Enums vs Booleanos, ¿cuál es mejor?

¿Por qué preferir enums en vez de booleanos? Bueno, el internet está dividido en este respecto, y creo que también tiene que ver con el lenguaje utilizado para argumentar, aunque creo que la...

React

Componentes controlados con onChange

Existen hoy en día dos formas de aproximarse a los inputs controlados. Cada una de estas maneras trae consigo un par de beneficios que tú tendrás que decidir si son los que prefieres...

CSS

¿Cómo usar Texto con gradiente en CSS?

Está de moda utilizar gradientes en los textos, sobre todo si trabajas con diseñadores Figma, ellos tienden a ponerle gradiente a todo. 🎨 Por eso en esta entrada de referencia (para que la...

React

Flujo de datos unidireccional (one-way data flow)

En React, **los datos tienen 1 y solo 1 forma (o dirección) de ser transferidos hacia otras partes de la aplicación**. Esto implica que los _componentes hijos_ `child components`...

React

5 Razones para preferir componentes de tipo función

Últimamente, he estado revisando temarios de algunos bootcamps y cursos en línea. Me encuentro con la triste sorpresa de que se sigue enseñando los componentes de clase como la mejor opción. Esto puede ser...

JavaScript

Te explico el método forEach

El método `forEach()` del Array, ejecuta la función que le provees una vez por cada elemento en el array.([Mdn docs](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)). Basicamente, el método `forEach` es una de las mejores maneras para usar un...

JavaScript

¿Por qué ya no deberías llamarle JavaScript?

Si eres un desarrollador front end seguro sabes que no deberías decirle JavaScript. También si te gusta estar actualizado(a) o si eres parte de la comunidad OSS (Open Source Software) seguro sabrás este...

¿Cómo funcionan los cursos en vivo de Fixtergeek?

Si estás interesado en los cursos en vivo de Fixtergeek, hoy voy a explicarte como funcionan. Después de tantos años impartiendo cursos y bootcamps, desarrollamos una metodología de enseñanza efectiva que combina: **1....

JavaScript

3 Malas prácticas en JavaScript que debes evitar

Hablamos todo el tiempo de las buenas prácticas y estilos de código, pero pocas veces hablamos de las malas prácticas en las que inconscientemente caemos muy seguido. Por ello, quiero compartirte 3 malas...

Typescript

¿Cómo usar TS en React, con 3 eventos del DOM?

Si tú también quieres mejorar al escribir tu código, invertir menos tiempo en «debugging» y más en creación, bueno entonces, seguro ya estás tipando tus componentes de React con Typescript. Si no, [checa...

Principiante

¿Por qué estudiar mínimo 3 horas a la semana te va a conseguir un mejor futuro?

Mantenerte estudiando y aprender algo nuevo cada año es un acto de madurez. Una vez que entiendes los beneficios de mantenerte estudiando, se vuelve obvio hacerte el tiempo para estudiar y practicar, que...

Principiante

2 maneras muy simples de mejorar tus entrevistas de trabajo.

Puedes invertir mucho tiempo en mejorar tus habilidades en programación, convertirte en el mejor a la hora de tirar líneas de código, en el más rápido, en el más versado en los...

Principiante

Está bien ser un principiante, de hecho, ¡es genial!, te digo por qué.

No queremos ser principiantes, queremos ser expertos, fingimos serlo. Pero esto nos aleja de serlo. Cuando comienzas tu canal de YouTube, cuando escribes tu primer post de blog, cuando grabas tu primer curso...

Principiante

3 razones de por qué deberías aprender a programar en 2023 y cambiar de carrera

Todos los años intento gritar a los cuatro vientos que aprender a programar es una gran idea. Puedes aprender a programar para muchas plataformas, desde videojuegos hasta programación para sistemas industrializados, incluso robots....

Adelanto

Retrospectiva del 2022 y planes para el 2023 en Fixtergeek

Este año ha sido especial para el equipo de Fixtergeek, entre que hemos estrenado nuestro nuevo sitio web, lo hemos actualizado un par de veces en el mismo año y tenemos planes...

Tailwind

Utilidades escondidas de tailwindcss 😱

Existen muchas herramientas en Tailwind que ignoramos, a veces porque ni siquiera las conocemos en CSS, pero al mismo tiempo cuando descubrimos estas herramientas dentro de Tailwind y las vamos a comparar...

CSS

Todo mundo habla de Tailwindcss, pero, ¿Qué es Tailwind?

No, Tailwindcss no es como bootstrap. La principal diferencia entre los dos es que Tailwind está orientado a utilidades que reducen el peso y el volumen del CSS que usas en tu...

Diseño

Las 5 mejores herramientas para Diseño de Interfaces

¿Qué herramientas de diseño existen? ¿Qué ventajas tiene cada una? ¿Cuál es la mejor opción? Bueno, vamos a hablar de las herramientas que hay en el mercado actualmente y lo que ofrece...

React

¡Ya no uses create-react-app!, por favor.

Recuerdo la vida antes de create-react-app (lo llamaremos _CRA_, para no escribir tantos guiones 😬), corría el año 2016, el equipo de Fixtergeek ejecutaba un bootcamp presencial sobre Python y Django en...

Remix

¿Por qué usar Zod con Remix es una buena idea?

## ¿Por qué usar Zod con Remix es una buena idea? Zod es un una herramienta para validación de esquemas (schema validation tool) que tiene la hermosa cualidad de soportar Typescript, lo que...

Remix

Remix fue adquirido por Shopify

## Remix fue adquirido por Shopify Sopify se fue de compras y compró a `Remix.run`. ¿Qué significa esto para la comunidad que estamos trabajando con Remix?, ¿Qué pasará con Hydrogen el framework de...

Principiante

Aprende a usar Git, sin dolor

En esta entrada vamos a aprender cómo usar git sin sufrir, y para ello vamos a cubrir estos 5 pasos simples y rápidos para comenzar a usar Git lo antes posible. 1- Haremos...

React

3 Buenas prácticas de React que puede que no conozcas y ¡te urgen!

Hay una inmensidad de tutoriales y contenido sobre React desactualizado. 😰 La mayoría de cuando utilizábamos clases y ciclos de vida del componente, lo que hace muy difícil tener claridad sobre cuáles son...

React

3 Reglas que debes recordar para crear componentes React realmente reutilizables.

La composición en React es el corazón de la librería y es muy curioso cómo es menospreciada tanto. Es tan fácil crear componentes en React, que olvidamos esforzarnos un poco por crear componentes...

HTML5

5 tecnologías chidas pero muertas

## 🎃Especial de día de muertos/halloween 🫔 En esta entrada quiero compartirte 5 tecnologías que llegué a usar y que me gustaban pero que murieron. Aunque marcaron un precedente para las tecnologías que usamos...

HTML

Cómo configurar las meta tags en tu sitio web

¿Qué pasa si no configuras las meta tags de tu sitio web? Bueno, no será indexado correctamente por los buscadores, no aparecerá en las primeras opciones de resultados y al compartirlo se...

HTML5

Configurando Tailwind con Remix

# Tailwind es simplemente genial, ¡vamos a usarlo con Remix también y entender qué sucede en la configuración!  Vamos a instalar tailwind en nuestro proyecto Remix, eso. Manos a la...

JavaScript

Astro. ¿Otro framework JavaScript?

Hoy vamos a hablar de Astro. ¿Otro framework JavaScript? Sip, es una pregunta y un chiste gracioso porque es verdad que `los frameworks web de JavaScript no tienen llenadera`. Pero que no te...

JavaScript

Cómo aplicar formato de moneda y fecha en Javascript

Cuando trabajamos en una aplicación, en particular de lado de la UI, el cómo mostramos la información es un punto importante para que nuestra interfaz sea entendible, estética y, por supuesto, funcional....

JavaScript

¿Será que tú puedes programar?

En este punto ya lo has considerado varias veces, la curiosidad te ha llevado a investigar un poco sobre programación. y has visto varios videitos, tanto de quien dice que “cualquiera puede programar”...

React

5 buenas prácticas en React que debes conocer

Ahora que React es super popular y que es casi un obligado para el desarrollo web o por lo menos es un obligado como primer herramienta a aprender para crear página/sitios web...

JavaScript

Cómo eliminar archivos sin usar de mi proyecto JS

Si estás leyendo este post estoy seguro que te has enfrentado a proyectos tan grandes que la navegación entre los archivos y carpetas es una tortura y conforme vas agregando nuevas funcionalidades...

HTML5

Aprende en 5 minutos qué es HTML y cuando utilizar cada una de sus etiquetas

Si estas explorando el mundo del desarrollo web, seguramente has escuchado el término HTML **(HyperText Markup Language)**, y seguramente alguna vez has escuchado que `es un lenguaje de programación` pero ¡hey! ![meme no...

JavaScript

Intro express a Typescript

Me costó trabajo ponerle atención a Typescript, lo admito. Era una mezcla entre no querer "complicar" mi código con "tipado" estático (por algo me gusta JS, por ser simple y porque sí parece...

Frontend

¡Ohh, la UI!, ¿librerías de CSS o librerías de componentes, cuál usar?

Desde hace unos años el desarrollo `Frontend` ha tomado cada vez mas relevancia pasando de hacer vistas simples a trasladar mucha de la lógica que anteriormente se hacía en el `Backend` al...

JavaScript

Entrevista | Mariana López

Entrevistas a developers chid@s. En mi carrera he tenido la fortuna de conocer y convivir con muchos jóvenes (y no tan jóvenes) entusiastas que no solo se atreven a entrar a este mundo...

Jest

Cómo emular axios/fetch para manejar peticiones http en tests con msw.js

Cuando hablamos de hacer tests en nuestras aplicaciones, uno de los temas principales que tenemos que tener en mente es cómo debemos lidiar con las peticiones que nuestra aplicación hace al servidor,...

Principiante

No esperes a que alguien venga a decirte cómo comenzar.

No esperes a que alguien venga a decirte cómo comenzar. Sólo comienza. El software libre no tiene una barrera de entrada más allá de la barrera mental que tu coloques (la comunidad web...

Remix

Cómo activar el link correspondiente según la ruta anidada que coincida en Remix

En los últimos meses he estado escribiendo algunas aplicaciones de las que solemos hacer para nuestros clientes en [Fixter.org ](http://fixter.org ) que por lo regular son full-stack, esto es que necesitamos no...

Accesibilidad

¿Cansado de que tu web no pase los test de accesibilidad?

5 tips para que tu web sea más accesible Seguramente te has enfrentado al hecho de que tu sitio web no cumple con los niveles de accesibilidad requeridos. Pero ¿Qué es la...

Jest

Cómo hacer mock de componentes React, con Jest

Cuando estamos trabajando con React y llegamos a la etapa donde requerimos hacer pruebas, es muy común crear "pruebas de humo", por ejemplo, probar que el componente se renderice correctamente creando snapshots. Esto...

Jest

El testing puede salvar tu vida

Puede parecer pretencioso iniciar un post con un título como este, puede que pienses que es una exageración o simplemente que es una broma o una táctica barata para que leas este...

React

Cómo personalizar reglas de eslint en create react app

Como desarrolladores sabemos que una de las cosas más importantes al momento de construir una aplicación es la consistencia de nuestro código así como asegurarnos de perder el menor tiempo posible revisando...