Juan Manzanero

Cómo Funcionan las Computadoras

Juan Manzanero — Mon, 29 May 2023 06:00:00 GMT

Hoy en día usamos, de alguna manera, una computadora en casi toda actividad de nuestras vidas, podría ser para trabajo o solo por diversión, pero si lo pensamos con cuidado, las computadoras son un invento del siglo pasado, y han cambiado nuestras vidas.

Nuevos empleos han aparecido, nuevas carreras por estudiar, nuevos problemas por resolver.

Pero, ¿realmente sabemos cómo las computadoras penetraron en nuestras vidas?, ¿realmente sabemos cómo funciona una computadora?, ¿cómo funciona Internet?

Hay muchas personas que usan sus smartphones para comunicarse con su familia y amigos, para compartir sus vidas, pero no saben cómo es esto posible.

No estoy diciendo que todos deberían tener una Ingeniería en Software o ser expertos en IT, pero entender nuestra actual línea temporal puede ser un conocimiento destacable a tener.

El poder de las computadoras

Las computadoras están hechas para expandir nuestros cerebros, desde cosas como enviar mensajes a personas del otro lado del planeta, hasta crear una app que agiliza un proceso de entrega.

Todo esto se hace tan solo “girando” unos y ceros (1´s y 0´s), pero, ¿cómo es esto posible?

Si ya has visto Él Código Enigma, ya sabes parte de esa historia.

Fundamentos de Computación

Alan Turing fue el inventor de la Máquina de Turing, una simple pero poderosa máquina que puede recibir instrucciones para moverse en una larga cinta, cambiando el estado de cada ranura. Estas 3 cosas, una cabeza, una cinta larga y un conjunto de instrucciones son las bases para las computadoras modernas.

La cabeza es la Unidad de Procesamiento Central (CPU), una pieza de hardware que puede ser usada con propósitos generales, recibiendo instrucciones (Algoritmo) que son convertidos a pulsos eléctricos, entendiendo si la electricidad pasa o no, si es verdadero o falso, 1 ó 0. Todas estas instrucciones son guardadas en la Memoria Aleatoria de Acceso, Random Access Memory (RAM) para un acceso rápido del trabajo que se ha hecho. La Memoria de Solo Lectura, Read-Only Memory (ROM) es usada para guardar datos persistentes que se necesitan recuperar aunque la computadora se apague.

Un algoritmo puede ser visto como una receta de cocina, declaras los ingredientes (variables) y los pasos a seguir (funciones) para obtener un resultado.

Una variable es un identificador que apunta a un slot en la RAM, guardando un valor que puede ser un número, un texto (se le conoce como “string”), un booleano (true o false), un object (un conjunto de múltiples variables y funciones que puede ser instanciado), etc.

Las funciones son bloques de instrucciones que cumplen una tarea, como obtener la ubicación actual o enviar un mensaje.

Y te estarás preguntando, ¿cómo puedo decirle a una computadora lo que quiero hacer?

Lenguajes de programación

Si intentas hablar con alguien que no habla el mismo idioma que tu, intentas usar un traductor o usas gestos, algo que sabes que ambos puedan de alguna manera entender, lo mismo ocurre con las computadoras.

Las computadoras son poderosas, pero necesitan a alguien que les diga qué hacer, este es el trabajo de los humanos, y para conseguirlo usamos lenguajes de programación. Con un lenguaje de programación usas una sintaxis específica para decirle a la computadora lo que quieres hacer, una vez hecho esto compilas el archivo que contiene las instrucciones que escribiste, entonces es transformado a un lenguaje que las computadoras pueden entender con mayor facilitad (1´s y 0´s) y entonces la computadora realiza la tarea.

Hay diferentes lenguajes de programación, y todos ellos están diseñados para solucionar necesidades específicas. Lenguajes como C y C++ son lenguajes de bajo nivel, esto quiere decir que son muy cercanos a cómo una computadora “habla” y son usados para controlar y administrar la memoria en apps de alto rendimiento, o para iluminar las pantallas de tu computadora.

Existe Java, un lenguaje que crea un entorno cuando es compilado, lo que le permite ser utilizado en casi cualquier computadora.

JavaScript (NO tiene que ver con Java o algo así) es un lenguaje que los navegadores entienden, gracias a JavaScript podemos acceder a una página web y ver asombrosas interacciones cuando le damos click a un botón, inicar sesión con un username y password, y más.

JavaScript es un lenguaje de alto nivel, es más fácil de aprender que Java o C, pero no por eso es mejor o peor, simplemente resuelve una necesidad diferente.

El Navegador

Es un poderoso software que puede acceder a otras computadoras usando el Hyper Text Transfer Protocol (HTTP), significa que gracias a este protocolo distintas computadoras pueden enviar y recibir información para comunicarse, incluso si están muy lejos. Los navegadores reciben datos en forma de archivos, principalmente tres:

Hyper Text Markup Language (HTML)
Cascading Styles Sheets (CSS)
JavaScript

HTML

Ayuda al navegador a estructurar los datos como textos o imágenes, usando un lenguaje de marcado (mediante tags). El navegador puede reconocer dónde hay un input para escribir nuestro email, o un botón para subscribirnos a nuestro artista favorito.

CSS

Ayuda a colorear y formar los tags de HTML usando selectores. Puede ser usado para cambiar el color de fondo de la página, darle a un botón bordes redondeados, cambiar el color de texto, todo lo que tu creatividad pueda imaginar.

JavaScript

Combinando HTML y CSS con Javascript se crea un sitio web interactivo, o aplicación web (como este). Puedes por ejemplo, añadir un botón que cambie el tema oscuro al claro, o guardar items en un carrito de compras y mostrar el número de items que tienes guardados.

Para todo esto necesitas guardar tus archivos en algún sitio, permitiéndole a las personas acceder a la computadora para descargar todos estos archivos usando sus navegadores, y para eso existen los servidores.

Los servidores son computadoras conectadas a Internet, guardan archivos que pueden ser descargados o subidos usando protocolos y reglas de seguridad. Algunas compañías como Google o Microsoft tienen múltiples centros con muchos servidores en diferentes regiones en el planeta, llamados Data Centers, y pueden ser usados por una tarifa para guardar tu web app, estos múltiples Data Centers se les conoce como Cloud.

La Nube

Administrar una poderosa computadora puede ser difícil, pero si sabes cómo usarla, puedes ahorrarte mucho dinero en lugar de mantener servidores locales que necesiten estar encendidos 24/7. Gracias a la Cloud podemos entregar apps más rápidas, y podemos tener un servicio 24/7 para nuestros clientes con un costo marginal.

Las Computadoras Cambiaron la Humanidad

Las computadoras simplifican nuestras tareas diarias, el software puede ser fácilmente replicado y distribuido sin la necesidad de logística como si lo necesita un producto tangible. Solo necesitas una conexión a Internet para acceder al proyecto de alguien.

No necesitas una fábrica o un recurso natural como madera para producir papel, necesitas un grupo de ingenieros, diseñadores UX/UI, digital marketers, y otras personas enfocadas en IT para alcanzar a miles de clientes.

La razón por la que las computadoras son tan poderosas es debido a que su costo marginal es mínimo, no necesitas extraer una materia prima de la tierra para construir una app, necesitas un grupo de personas talentosas que usen sus cerebros para crear soluciones.

Construye una App Fullstack

Juan Manzanero — Thu, 18 Jan 2024 06:00:00 GMT

GitHub repo

Contenido

Introducción
Configuración inicial
Mejora tu UI
Añade funcionalidad CRUD
Conclusión

1. Introducción

En este tutorial, desarrollaremos una app fullstack con el siguiente tech stack:

Next.js como meta-framework
TailwindCSS para estilos
shadcn/ui para componentes UI
Prisma como ORM
PostgreSQL como base de datos
Auth.js para autenticación
Docker para crear una instancia de una base de datos PostgreSQL localmente

Aprenderemos algunos de los fundamentos de este tech stack, como usar server components en Next.js, o crear endpoints API usando el app router.

2. Configuración inicial

Comencemos creando un nuevo proyecto Next.js, en tu terminal ejecuta:

npx create-next-app@latest

Asegúrate de marcar Yes en las siguientes opciones:

Would you like to use TypeScript?
Would you like to use ESLint?
Would you like to use Tailwind CSS?
Would you like to use 'src/' directory?
Would you like to use App Router? (recommended)

> What is your project named? fullstack-app
> Would you like to use TypeScript? No / Yes
> Would you like to use ESLint? No / Yes
> Would you like to use Tailwind CSS? No / Yes
> Would you like to use `src/` directory? No / Yes
> Would you like to use App Router? (recommended) No / Yes
> Would you like to customize the default import alias (@/*)? No / Yes
> What import alias would you like configured? @/*

Espera a que la instalación de las dependencias termine, luego accede a la carpeta del proyecto:

cd fullstack-app

Abre tu editor de código de preferencia.

2.1 Instalar shadcn/ui

Estos componentes nos ayudarán mucho a construir la UI junto con TailwindCSS.

Primero, inicializa shadcn/ui:

npx shadcn-ui@latest init

Asegúrate de configurar shadcn/ui de acuerdo a tu proyecto.

Puedes revisar la documentación de shadcn/ui para cada componente que puedas necesitar, cada componente se instala individualmente.

2.2 Crear una base de datos PostgreSQL usando Docker

Asegúrate de tener Docker instalado en tu máquina.

Primero, necesitas descargar una imagen de PostgreSQL de Docker Hub:

docker pull postgres

Luego, crea un contenedor con la imagen:

docker run --name my-postgres -e POSTGRES_PASSWORD=password -p 5432:5432 -d postgres

2.3 Instalar Prisma

Instala Prisma usando tu gestor de dependencias, en este caso npm:

npm install prisma -D

Ahora inicializa Prisma:

npx prisma init

Se creará un directorio ./prisma en la raíz de tu proyecto, con un archivo schema.prisma.

Aquí crearás tus schemas.

Agrega este modelo como ejemplo:

model User {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  email     String   @unique
  name      String?
}

Actualiza tu archivo .env con la siguiente URL:

DATABASE_URL="postgresql://postgres:password@localhost:5432/postgres?schema=public"

En esta URL está tu nombre de usuario (por defecto es postgres), tu contraseña (en este caso password), el host (por defecto es localhost), el puerto (por defecto es 5432), el nombre de la base de datos (por defecto es postgres) y el schema (por defecto es public).

Crea tu primera migración para probar si Prisma puede conectarse a tu base de datos local:

npx prisma migrate dev --name init

Si todo está bien, verás un nuevo directorio /migrations con un nuevo archivo dentro.

Si tienes un error, asegúrate de poder conectarte a tu base de datos local. Elimina y crea el contenedor de nuevo si es necesario.

2.4 Configurar Auth.js

Agrega este modelo a tu schema.prisma:

model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

Estos modelos son para Auth.js, ahora podemos instalarlo con el adaptador de Prisma:

npm install @prisma/client @auth/prisma-adapter

Instalaremos nodemailer también, ya que usaremos magic links para la autenticación:

npm install nodemailer -D

Ahora crea src/utils/db.ts e inicializa prisma:

import { PrismaClient } from '@prisma/client';

const prismaClientSingleton = () => {
  return new PrismaClient();
};

declare global {
  var prisma: undefined | ReturnType<typeof prismaClientSingleton>;
}

const prisma = globalThis.prisma ?? prismaClientSingleton();

export default prisma;

if (process.env.NODE_ENV !== 'production') globalThis.prisma = prisma;

Luego, crea src/libs/auth.ts para configurar Auth.js:

import type { NextAuthOptions } from 'next-auth';
import { PrismaAdapter } from '@auth/prisma-adapter';
import EmailProvider from 'next-auth/providers/email';
import prisma from '@/libs/db';
import { Adapter } from 'next-auth/adapters';

export const authOptions = {
  adapter: PrismaAdapter(prisma) as Adapter,
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ],
  callbacks: {
    session: async ({ session, user }) => {
      return {
        ...session,
        user: user,
      };
    },
  },
} satisfies NextAuthOptions;

Esta configuración es para usar un proveedor de email, para este proyecto usaremos Resend.

Crea una cuenta y luego obtén las siguientes credenciales en tu archivo .env:

EMAIL_SERVER_HOST: smtp.resend.com
EMAIL_SERVER_PORT: 465
EMAIL_SERVER_USER: resend
EMAIL_FROM: onboarding@resend(dot)dev
EMAIL_SERVER_PASSWORD: yor api key

Ahora, crea un archivo src/pages/api/auth/[...nextauth].ts:

import { authOptions } from '@/libs/auth';
import NextAuth from 'next-auth/next';

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Este archivo es para manejar la autenticación en nuestra app.

Ahora puedes autenticar usuarios con un magic link enviado por email.

Crea un archivo src/app/auth/signin-form.tsx:

'use client';

import { useState } from 'react';
import { signIn } from 'next-auth/react';

export default function SigninForm() {
  const [email, setEmail] = useState<null | string>(null);

  async function handleSubmit() {
    await signIn('email', {
      email,
      callbackUrl: `${window.location.origin}`,
    });
  }

  return (
    <form className='mt-5 space-y-4' action={handleSubmit}>
      <section className='flex flex-col gap-2'>
        <label htmlFor='email'>Email</label>
        <input
          id='email'
          type='email'
          name='email'
          onChange={(e) => setEmail(e.target.value)}
          className='w-max p-1 border border-slate-400'
        />
      </section>
      <button type='submit'>Sign in</button>
    </form>
  );
}

Impórtalo en src/app/auth/page.tsx:

Import it to your src/app/auth/page.tsx file:

import { authOptions } from '@/libs/auth';
import { getServerSession } from 'next-auth';
import { redirect } from 'next/navigation';
import SigninForm from './form';

export default async function Signin() {
  const session = await getServerSession(authOptions);

  if (session) {
    return redirect('/');
  }

  return (
    <>
      <h1>Sign in</h1>

      <SigninForm />
    </>
  );
}

Como puedes ver, puedes redirigir a los usuarios si no están autenticados obteniendo la sesión con getServerSession.

3. Mejora tu UI

Creemos una app para posts cortos.

Primero, agrega algunos componentes de shadcn/ui y actualiza tus componentes, también crearemos nuevos componentes:

npx shadcn-ui@latest add button

npx shadcn-ui@latest add dialog

npx shadcn-ui@latest add input

npx shadcn-ui@latest add textarea

npx shadcn-ui@latest add form

npx shadcn-ui@latest add label

npx shadcn-ui@latest add sonner

Agregaremos las URL de los endpoints para estos componentes, pero más adelante.

src/app/auth/signin-form.tsx

Aquí actualizaremos la UI y agregaremos validación de formulario.

'use client';

import { signIn } from 'next-auth/react';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { useForm } from 'react-hook-form';
import * as z from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';

const formSchema = z.object({
  email: z.string().email(),
});

export default function SigninForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: '',
    },
  });

  async function onSubmit({ email }: z.infer<typeof formSchema>) {
    await signIn('email', {
      email,
      callbackUrl: `${window.location.origin}`,
    });
  }

  return (
    <Form {...form}>
      <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name='email'
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder='address@example.com' {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button className='w-full' type='submit'>
          Send magic link
        </Button>
      </form>
    </Form>
  );
}

src/components/post/create.tsx

Actualiza los componentes de UI y agrega validación de formulario.

'use client';

import { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { useForm } from 'react-hook-form';
import * as z from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { SessionProps } from './types';

const formSchema = z.object({
  title: z.string().min(1).max(100),
  content: z.string().min(1),
});

export default function CreatePost(props: SessionProps) {
  const [open, setOpen] = useState(false);
  const router = useRouter();
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: '',
      content: '',
    },
  });

  async function onSubmit(values: z.infer<typeof formSchema>) {
    try {
      const res = await fetch('/api/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...values,
          authorId: props.session.user?.id,
        }),
      });
      const json = await res.json();

      if (!res.ok) {
        toast(json.message);

        return;
      }

      toast('Post created!');
      form.reset();
      setOpen(false);
      router.refresh();
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>Create post</Button>
      </DialogTrigger>
      <DialogContent className='max-w-[300px]'>
        <DialogHeader className='text-left'>
          <DialogTitle>Create post</DialogTitle>
          <DialogDescription>
            Please <strong>do not</strong> post <strong>NSFW</strong> content.
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}>
            <FormField
              control={form.control}
              name='title'
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Title</FormLabel>
                  <FormControl>
                    <Input placeholder='Hi there!' {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name='content'
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Content</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder='Testing this great app!'
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button className='w-full' type='submit'>
              Post
            </Button>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}

src/app/page.tsx

Haz fetch de los dats con Prisma, como esta página es un server component, podemos hacer fetch directamente.

import { authOptions } from '@/libs/auth';
import { getServerSession } from 'next-auth';
import prisma from '@/libs/db';
import CreatePost from '@/components/post/create';
import Post from '@/components/post';

export default async function Home() {
  const session = await getServerSession(authOptions);

  // You can fetch data to Prisma in server components
  const posts = await prisma.post.findMany({
    include: {
      author: true,
    },
  });

  return (
    <>
      <h1 className='mb-5 font-bold text-xl'>Home</h1>
      {session ? (
        <>
          <CreatePost session={session} />
        </>
      ) : (
        <>
          <p>You are not logged in</p>
        </>
      )}
      <h3 className='text-lg font-semibold mt-10'>Posts</h3>
      <ul className='mt-5 space-y-2.5'>
        {posts.length > 0 ? (
          posts.map((post) => (
            <li key={post.id}>
              <Post {...post} session={session} />
            </li>
          ))
        ) : (
          <p>No posts</p>
        )}
      </ul>
    </>
  );
}

src/components/post/item.tsx

'use client';

import DeletePost from './delete';
import EditPost from './edit';
import { TPostProps } from './types';

export default function PostItem(props: TPostProps) {
  return (
    <article className='w-max p-2 border border-slate-500 rounded-md'>
      <header className='flex justify-between items-center'>
        <h2 className='font-bold text-lg'>{props.title}</h2>
        {props.session?.user?.id === props.authorId && (
          <section className='space-x-2'>
            <EditPost {...props} />
            <DeletePost {...props} />
          </section>
        )}
      </header>
      <p>{props.content}</p>
      <span className='text-sm'>
        Posted by {props.author?.email || 'anon'} at{' '}
        {new Date(props.createdAt).toLocaleString()}
      </span>
    </article>
  );
}

src/components/post/edit.tsx

Crea un botón para abrir un diálogo que renderice los datos del post para editar, agrega validación y fetch al endpoint de la API.

'use client';

import { useState } from 'react';
import { Edit } from 'lucide-react';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { useForm } from 'react-hook-form';
import * as z from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { TPostProps } from './types';

const formSchema = z.object({
  title: z.string().min(1).max(100),
  content: z.string().min(1),
});

export default function EditPost(props: TPostProps) {
  const [open, setOpen] = useState(false);
  const router = useRouter();
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: props.title,
      content: props.content,
    },
  });

  async function onSubmit(values: z.infer<typeof formSchema>) {
    try {
      const res = await fetch('/api/posts', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...values,
          id: props.id,
        }),
      });
      const json = await res.json();

      if (!res.ok) {
        toast(json.message);

        return;
      }

      toast('Post edited!');
      form.reset();
      setOpen(false);
      router.refresh();
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant='secondary' size='icon'>
          <Edit />
        </Button>
      </DialogTrigger>
      <DialogContent className='max-w-[300px]'>
        <DialogHeader className='text-left'>
          <DialogTitle>Edit post</DialogTitle>
          <DialogDescription>
            Please <strong>do not</strong> post <strong>NSFW</strong> content.
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}>
            <FormField
              control={form.control}
              name='title'
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Title</FormLabel>
                  <FormControl>
                    <Input placeholder='Hi there!' {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name='content'
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Content</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder='Testing this great app!'
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <DialogClose asChild>
              <Button className='w-full' type='submit'>
                Edit post
              </Button>
            </DialogClose>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}

src/components/post/delete.tsx

Crea un botón para abrir un diálogo para eliminar el post, agrega validación y fetch al endpoint de la API.

'use client';

import { LucideTrash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { TPostProps } from './types';

export default function DeletePost(props: TPostProps) {
  const router = useRouter();

  async function handleDelete() {
    try {
      const res = await fetch('/api/posts', {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          id: props.id,
        }),
      });
      const json = await res.json();

      if (!res.ok) {
        toast(json.message);

        return;
      }

      toast('Post deleted!');
      router.refresh();
    } catch (error) {
      console.error(error);
    }
  }
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant='destructive' size='icon'>
          <LucideTrash2 />
        </Button>
      </DialogTrigger>
      <DialogContent className='max-w-[300px]'>
        <DialogHeader className='text-left'>
          <DialogTitle>Delete post</DialogTitle>
          <DialogDescription>
            Are you sure you want to <strong>delete</strong> this post? This
            action cannot be undone.
          </DialogDescription>
        </DialogHeader>
        <footer className='flex flex-col gap-2'>
          <DialogClose asChild>
            <Button variant='secondary' className='w-full'>
              No, keep post
            </Button>
          </DialogClose>
          <DialogClose asChild>
            <Button
              onClick={handleDelete}
              variant='destructive'
              className='w-full'
            >
              Yes, delete post
            </Button>
          </DialogClose>
        </footer>
      </DialogContent>
    </Dialog>
  );
}

src/components/post/types.ts

type SessionProps = {
  session: any;
};

type TPostProps = {
  author: {
    id: string;
    name: string | null;
    email: string | null;
    emailVerified: Date | null;
    image: string | null;
  } | null;
  id: string;
  createdAt: Date;
  updatedAt: Date;
  title: string;
  content: string;
  authorId: string | null;
  session: any;
};

export type { SessionProps, TPostProps };

src/components/sign-out.tsx

Un botón simple para cerrar sesión.

'use client';

import { signOut } from 'next-auth/react';
import { Button } from './ui/button';

export default function SignOut() {
  return <Button onClick={() => signOut()}>Sign out</Button>;
}

src/components/navbar.tsx

Renderiza el botón de cerrar sesión o iniciar sesión dependiendo si el usuario está autenticado o no.

import Link from 'next/link';
import { Button } from './ui/button';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/libs/auth';
import SignOut from './sign-out';

export default async function Navbar() {
  const session = await getServerSession(authOptions);

  return (
    <nav className='w-full p-4 border-b flex justify-between items-center'>
      <section>
        <Button variant='link' className='px-0 font-semibold text-lg'>
          <Link href='/'>Fullstack app</Link>
        </Button>
      </section>
      <section>
        {session ? (
          <SignOut />
        ) : (
          <Button asChild>
            <Link href='/auth'>Sign in</Link>
          </Button>
        )}
      </section>
    </nav>
  );
}

src/app/layout.tsx

Agrega tu Navbar y Toaster y algunos estilos.

import { Inter } from 'next/font/google';
import Navbar from '@/components/navbar';
import { Toaster } from '@/components/ui/sonner';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

interface Props extends React.PropsWithChildren {}

export default function RootLayout(props: Props) {
  return (
    <html lang='en'>
      <body className={inter.className}>
        <Navbar />
        <main className='px-4 py-8'>{props.children}</main>
        <Toaster />
      </body>
    </html>
  );
}

4. Añade funcionalidad CRUD

Ahora podemos crear, leer, actualizar y eliminar posts.

prisma/schema.prisma

Actualiza tu schema de Prisma con el modelo Post:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
  posts         Post[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

model Post {
  id        String   @id @default(cuid())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  title     String
  content   String
  author    User     @relation(fields: [authorId], references: [id])
  authorId  String
}

Genera una nueva migración:

npx prisma migrate dev --name add-posts

Ahora, create un archivo src/app/api/posts/route.ts con las funciones asíncronas GET, PUT y DELETE:

import prisma from '@/libs/db';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: Request) {
  try {
    if (!req.body) {
      return NextResponse.json({
        ok: false,
        status: 400,
        message: 'Data required',
      });
    }

    const json = await req.json();
    const res = await prisma.post.create({
      data: json,
    });

    return NextResponse.json({
      ok: true,
      status: 201,
      data: res,
    });
  } catch (error) {
    if (error instanceof Error) {
      return NextResponse.json({
        ok: false,
        status: 500,
        message: error.message,
      });
    }

    return NextResponse.json({
      ok: false,
      status: 500,
      message: 'Internal server error',
    });
  }
}

export async function PUT(req: NextRequest) {
  try {
    const body = await req.json();
    const res = await prisma.post.update({
      where: { id: body.id },
      data: {
        title: body.title,
        content: body.content,
      },
    });

    return NextResponse.json({
      ok: true,
      status: 200,
      data: res,
    });
  } catch (error) {
    if (error instanceof Error) {
      return NextResponse.json({
        ok: false,
        status: 500,
        message: error.message,
      });
    }

    return NextResponse.json({
      ok: false,
      status: 500,
      message: 'Internal server error',
    });
  }
}

export async function DELETE(req: NextRequest) {
  try {
    const body = await req.json();
    const res = await prisma.post.delete({
      where: { id: body.id },
    });

    return NextResponse.json({
      ok: true,
      status: 200,
      data: res,
    });
  } catch (error) {
    if (error instanceof Error) {
      return NextResponse.json({
        ok: false,
        status: 500,
        message: error.message,
      });
    }

    return NextResponse.json({
      ok: false,
      status: 500,
      message: 'Internal server error',
    });
  }
}

Intenta crear un post en el home.

La página se refrescará y verás el post que creaste, solo tú puedes editarlo o eliminarlo.

5. Conclusión

Como puedes ver, crear una app fullstack con Next.js es muy fácil.

Por supuesto, se puede mejorar, agregando validación del lado del servidor para los inputs, agregando paginación para los posts en el home, etc.

La Monotonia de las Redes Sociales

Juan Manzanero — Mon, 17 Jul 2023 06:00:00 GMT

Es evidente que muchas interacciones en Internet ocurren a través de las redes sociales, lo que te permite enviar solicitudes de amistad, chatear o compartir memes y fotos.

Sin embargo, la abstracción de la interacción humana mediante software ha causado muchos problemas que antes no existían.

Cuando empezó Internet, muchas personas crearon sus propios sitios web porque eso era lo que debías tener si querías ser popular, y muchos de estos sitios web eran simplemente como blogs donde los usuarios compartían sus pasatiempos como películas, deportes, libros, videojuegos, etc.

Esta motivación llevó a la creación de sitios web únicos y personales, donde podías conocer a alguien y sus gustos o disgustos.

Ahora, con el auge de las redes sociales a mediados de los años 2000, la gente prefiere conectarse simplemente buscando un nombre o viendo los amigos de sus amigos, y enviar solicitudes de amistad para intentar conectarse. Al principio, esto era genial, como cualquier cosa nueva, pero los problemas comenzaron cuando empresas como Facebook (ahora Meta) o Google (con YouTube) necesitaban monetizar sus plataformas, principalmente con anuncios.

Y, por supuesto, eso significa que tenían que suprimir, censurar o prohibir cualquier cosa que pudiera ser perjudicial para la sociedad, como discursos de odio o retos estúpidos que pudieran poner en peligro la vida de las personas.

Pero lo malo de esto es que homogeneizan a casi todos, obligándolos a actuar como los algoritmos recomiendan usuarios con gustos y comentarios similares, guiando a las personas a actuar como alguien más, y así sucesivamente.

Ahora casi todos hacen principalmente dos cosas: publicar fotos sobre sus vidas "perfectas" o compartir memes, y no me malinterpretes, está bien entrar en las redes sociales y tratar de desconectar de tu trabajo o problemas, pero usarlas todos los días como una vía de escape instantánea en lugar de enfrentar tus propios problemas podría ser perjudicial a largo plazo, aislándote de la necesidad de socializar en la vida real, con personas reales, y pensando que todos tienen una vida perfecta.

No, TODOS tienen problemas en sus vidas, incluso más que los tuyos, pero los algoritmos de las redes sociales promueven principalmente "solo vibraciones positivas" y todas esas tonterías que en grandes cantidades son perjudiciales para nuestras mentes.

Y no mencionemos la censura y el shadow-banning si publicas algo controvertido, puede ser algo que no se debería tolerar, como incitar al odio a un grupo, o puede ser algo en lo que no todos estén de acuerdo, pero podría ser útil reflexionar un poco al respecto, aunque sea controvertido.

¿Debería todo el mundo poder expresar lo que piensa? Sí, siempre y cuando no promueva el odio o lastime a otras personas o animales.

Hay informes de que Twitter promueve el odio en el algoritmo, y Meta sabe que Instagram aumenta la ansiedad y la depresión en los jóvenes, y de hecho, lo promueve... ya que todos los sentimientos negativos te mantienen en las redes sociales interactuando con los demás, ya que eso es lo que esas empresas venden, tus datos y tu tiempo a los anunciantes.

Recientemente escuché un video que hablaba sobre este tema, y sería genial si volviéramos a los inicios de Internet, donde las personas creaban contenido como un pasatiempo, en lugar de buscar validación a través de los me gusta y los comentarios, siendo personas más auténticas en lugar de productos.

¿Deberían las soluciones de software reemplazar las interacciones humanas? Creo que no, pero es demasiado tarde para casi todos, pero si estás leyendo esto, comienza por cambiar tu vida primero si quieres ser honesto contigo mismo.

Blog inspirado en "Why does every personal website look like this now?" by Eric Murphy en YouTube.

Video de origen (en Inglés):

</iframe>

La Privacidad Debe Ser Tomada Más en Serio

Juan Manzanero — Thu, 23 Apr 2026 00:00:00 GMT

La privacidad es un pilar fundamental de la libertad de expresión.

Puede que hayas encontrado propaganda en redes sociales, sobre “individuos/grupos anónimos” están cometiendo crímenes, hackeos, etc.

Bueno, como dije, eso es pura propaganda.

Los gobiernos quieren convencerte de que la privacidad y el anonimato significan crimen.

No debería decirte esto, pero es una forma de pensar estúpida.

No porque un criminal use Tor o Monero significa que todos quienes usen las tecnologías mencionadas son criminales.

Es como decir que si un criminal usa una cuchara significa que todos quienes usen una cuchara son iguales criminales, sí; así de estúpido suena.

La privacidad es un derecho básico, garantiza que aquellos en el poder puedan ser cuestionados sin que puedan deshacerse de sus críticos, y esto es más requerido, ya que la censura continúa incrementando.

Puede que hoy censuren malas palabras, mañana memes del idiota en la silla al que la gente llama presidente, en 1 mes no podrás hablar de nada más que de buenas cosas del gobierno.

Pero como la libertad, todos la quieren, pero no todos van a luchar por ella, al menos en estos días.

Aprende sobre PGP, Tor, Monero, y cualquier otra tecnología que te proteja.

Next Intl Blog Template

Juan Manzanero — Mon, 18 Dec 2023 00:00:00 GMT

GitHub

Website

Introducción

Recientemente actualicé este website, y como sabrás, es un website con contenido en Inglés y Español.

No estoy usando un plugin de traducción, en su lugar escribo cada palabra en ambos idiomas.

Gracias a Next.js y next-intl puedo lograr esto, renderizando rutas para cada idioma en el website, accediendo a un diccionario que contiene el contenido traducido por mí.

Para los archivos .mdx, creé un directorio para cada idioma, y dentro de esos directorios contiene el contenido en ambos idiomas también.

Cómo usar

Este template es una extensión de next-intl, revisa la guía de inicio para aprender lo básico, el propósito del template es crear un layout simple para futuras personalizaciones.

Agregar o quitar locales

Puedes agregar o remover locales en el archivo src/lang/locales.ts.

export type locales = 'en' | 'es';

export const localesList: locales[] = ['en', 'es'];

Solo agrega o remueve un locale de la constante locales, y agrega o remueve el locale de la lista.

El primer item en localesList debe ser el locale por default.

La lista es usada para la generación de rutas estáticas en src/app/[locale]/layout.tsx.

import { localesList } from '@/lang/locales';

export function generateStaticParams() {
  return localesList.map((locale) => ({ locale }));
}

Recuerda actualizar el matcher en src/middleware.ts.

//...

export const config = {
  matcher: ['/', '/(en|es)/:path*'],
};

Y por supuesto, actualiza los archivos src/lang/[locale].json.

Crear contenido

Usa src/content/[locale] para crear contenido, en el directorio /[locale]/ crea un directorio para cada propósito, por ejemplo: /[locale]/blog.

Dentro crea el archivo .mdx con un nombre único, el nombre será usado como slug para crear la página estática para ese post.

Para crear una sección de blog, usarás la función getAllContent en tu ruta, por ejemplo: src/app/[locale]/blog/[slug]/page.tsx.

import { Mdx } from '@/components';
import { TParamsLocale, TPage, TSlugLang } from '@/types';
import { Metadata } from 'next';
import { getAllContent, getContent } from '@/utils/getContent';

export async function generateStaticParams(
  props: TParamsLocale
): Promise<TSlugLang[]> {
  const blogs = await getAllContent(props.params.locale, 'blog');

  if (!blogs) return [];

  return blogs.map((blog) => ({
    slug: blog.slug,
    locale: props.params.locale,
  }));
}

//...

Esto creará una página estática para cada post de blog.

Puedes obtener la metadata del archivo .mdx también.

//...

export async function generateMetadata(props: TPage): Promise<Metadata> {
  const blog = await getContent(props.params.locale, 'blog', props.params.slug);

  if (!blog) return {};

  return {
    title: blog.title,
    //...
  };
}

//...

Entonces, renderiza el contenido usando el componente Mdx.

//...

export default async function Page(props: TPage) {
  const post = await getContent(props.params.locale, 'blog', props.params.slug);

  if (!post) return null;

  return <Mdx code={post.body.code} />;
}

Puedes hacer un fork de este template aquí

Participé en una Hackaton

Juan Manzanero — Wed, 16 Aug 2023 06:00:00 GMT

Recientemente participé en un Hackathon de Supabase, formando un equipo con personas de otros países, uno de Bangladesh y otro de Brasil, utilizando inglés para comunicarnos en Discord.

La temática del Hackathon era libre, la única regla principal era utilizar Supabase para cualquier función, como autenticación, como base de datos PostgreSQL o para utilizar vectores en la inteligencia artificial.

Tuvimos 10 días para construir un producto utilizando cualquier tecnología y subirlo a un repositorio en GitHub.

Desarrollamos una aplicación de comercio electrónico con un modelo de productos similar a Walmart, implementando vectores para obtener mejores resultados en las búsquedas.

Utilizando Supabase, implementamos autenticación y rutas protegidas, de manera que el usuario deba iniciar sesión para ver recomendaciones y más.

El usuario puede agregar productos al carrito de compras y revisar sus artículos para guardarlos y ver recomendaciones, así como los artículos que se compran con frecuencia.

Mi papel principal se centró en crear la interfaz de usuario utilizando Next.js 13app router, protegiendo las rutas solo para usuarios autenticados, y creando componentes reutilizables como tarjetas de producto, y por supuesto, haciendo que el diseño sea adaptable tanto para dispositivos móviles como para escritorio.

Utilizamos Shadcn/UI, ya que estos componentes ya implementan funcionalidades con accesibilidad, como modales o barras laterales. Por ejemplo, la barra lateral que aparece cuando estás en un dispositivo móvil y lo abres con el botón en el encabezado, con una animación suave.

Presentamos el proyecto a tiempo y estamos esperando los resultados.

Esta es la primera vez que participo en un Hackathon y realmente lo disfruté, espero seguir contribuyendo al proyecto en GitHub.

Es increíble trabajar con personas de otros países, utilizando el inglés aunque no sea nuestra lengua materna, pero con un propósito en común: crear un gran producto.

Seguiré buscando participar en más Hackathones en el futuro y contribuir a proyectos de código abierto (open source) en Github, porque realmente disfruto la sensación de desarrollar algo grande con más personas.

Aprendí mucho en estos pocos días, como la integración de Next.js con Supabase para autenticación y rutas protegidas, utilizando la documentación de Supabase como guía, y utilizando por primera vez Shadcn/UI, y estoy ansioso por seguir usándolo.

Me llevó mucho tiempo participar en un Hackathon, ya que antes dudaba de mi experiencia, pero la realidad es que nunca estaremos listos para nuevos desafíos, porque si ya estás listo, significa que es demasiado tarde.

Quiero aprender más sobre el uso de vectores para la inteligencia artificial, así que investigaré más sobre el tema, ya que la tecnología tiende a avanzar en esa dirección.

Quién sabe cuál será la próxima gran tendencia tecnológica o cuándo llegará.

Puedes ver el proyecto: Grocewise aquí

Rewind 2023 y Planes Futuros

Juan Manzanero — Sat, 16 Dec 2023 00:00:00 GMT

Mi rewind del 2023 y mis planes para el 2024 y más allá.

Espero que la estés pasando bien en estas fechas.

La vida es una sucesión de decisiones, y en retrospectiva, estoy feliz de que este año haya hecho las correctas.

En retrospectiva sobre mi carrera este 2023

Crecí drásticamente como Full Stack Developer, aprendiendo nuevas libraries y estableciendo mi tech stack.

Incluso comencé con hacking (no lo que sueles escuchar en las noticias), creando side projects buscando crear una solución.

Actualicé este sitio, creando nuevas funcionalidades para crear contenido.

Ahora tengo más confianza en mis habilidades, listo para seguir creciendo y tomando nuevos desafios.

Planes futuros para mi carrera este 2024

Quiero comenzar a hacer freelancing, estaré creando templates y proyectos demo para vender mis servicios como Frontend Developer principalmente, pero seguiré aprendiendo sobre Backend y Cloud, así como seguiré practicando mi Inglés para entrar al mercado estadounidense o europeo.

Quizás no lo consiga este 2024, pero debo seguir creciendo, ya que cada año que pasa, estaré más preparado.

Veré si podría contribuir a algún proyecto Open Source, ya que casí todas las herramientas que uso son Open Source, y no podría estar aquí sino fuera por la ayuda de proyectos Open Source.

Honestamente, mi verdadero deseo es trabajar tiempo completo en una startup Software as a Service, o cualquier startup que se enfoque en Software.

Lo bueno es que continuo creciendo profesionalmente, y espero (y lo haré) que el siguiente año alcance más metas.

Y por supuesto, continuaré con el hacking (de forma creativa, no robando información u otras cosas criminales) con side projects, crear una fuente extra de ingresos sería genial para mis finanzas.

Retrospectiva personal del 2023 y más

Este año redescubrí el hobby de leer, y realmente lo disfruto.

Descubrí mi nuevo libro favorito, Ready Player One, fue una lectura emocionante, el siguiente año leeré la secuela.

También comencé a leer Ikigai, para seguir adquiriendo buenos hábitos para una vida larga y feliz, así como buscar un propósito en la vida.

Otro libro que comencé a leer es The Little Book of Common Sense Investing, ya que teniendo el buen hábito de ahorrar, pero quiero que mi dinero siga creciendo más para un retiro digno.

Estoy gastando menos tiempo en redes sociales, incluso escribí un artículo sobre esto, haciendo cosas que realmente quiero hacer en su lugar.

Es realmente horrible cuanto tiempo nos roban las redes sociales, manteniéndonos alejados de hacer cosas que realmente disfrutamos.

Estoy haciendo ejercicio moderado, pero dentro de casa, quiero ir afuera también, necesito más luz solar.

Estoy feliz de pasar tiempo con mi familia, incluso si la mayoría del tiempo estoy trabajando o estudiando, mantengo contacto con mis seres queridos, y continuaré haciéndolo, desde luego.

Planes personales futuros para 2024 y más

Seguiré leyendo, escribiré más para este website.

Quiero adquirir nuevos hábitos, como pixel art.

Retomaré un viejo hobby, GameDev.

Como Unity ha estado haciendo cosas cuestionables, usaré Godot en su lugar.

No tengo en mente algún proyecto grande o algo así, solo retomar el desarrollar demos sencillas de videojuegos, estaría genial lanzar un videojuego pequeño, pero terminado.

Créeme, es muy, MUY difícil desarrollar videojuegos, así que en lugar de abrumarme, mantendré mis ambiciones simples, pero constantes.

¡Felices fiestas!

Una Mejor Forma de Consumir Contenido

Juan Manzanero — Thu, 11 Apr 2024 06:00:00 GMT

Obtén tus noticias sin visitar websites con algoritmos que muestran contenido que no quieres ver.

Algoritmos que dictan lo que ves

Las redes sociales no están diseñadas para mostrarte las noticias más novedosas e importantes, sino para mostrarte contenido dictado por un algoritmo.

Y este contenido es normalmente, viral; y viral no quiere decir interesante.

Normalmente estos algoritmos priorizan contenido que te hacen enojar.

Contenido que promueve la negatividad obtiene más "clicks" que aquel que promueve la positividad.

Esa es la razón por la cual Twitter y Facebook están llenos de posts estúpidos e irrelevantes (por lo regular).

Por supuesto, es genial cuando el algoritmo te muestra contenido que te gusta, descubriendo nuevas personas y páginas, pero eso no es lo usual.

Sin mencionar los molestos anuncios y más cosas que quieren que les hagas click.

Meta (anteriormente Facebook) sabe sobre esto, y promueve en sus productos como Instagram y Facebook, lo mismo con Twitter.

La Solución: News Aggregators (RSS)

RSS es un acrónimo de "Really Simple Syndication".

Es una tecnología antigua, no muy promovida por las compañías.

Esto es debido a que cuando lees un post en un RSS Reader, no debes de visitar el website, y el website no puede mostrarte anuncios usando Google Ads (por ejemplo). No generas tráfico, tus visitas no cuentan, al menos no si no abres el link del post en tu RSS Reader.

Lo bueno que casi cualquier RSS Reader te muestra el contenido organizado por fechas, no por un algoritmo raro que quiere hacerte enojar.

Para mi website utilizo un script en Node.js que toma todos los archivos .mdx dentro de content/blog y content/portfolio, entonces genera los RSS Items, aquellos con rss: true en sus metadatos.

Cómo usar un RSS Reader

Primero, debes descargar uno.

Hay muchas opciones:

NetNewsWire: un RSS Reader nativo para macOS y iOS, gratis y Open Source, mi opción favorita como ~~Pecador~~ usuario de Apple
Akregator: del proyecto KDE para Linux
Feeder: para Android
Raven Reader: aplicación de escritorio multiplataforma

Agregando Feeds

Ahora debes buscar por el link RSS de tu website favorito, ¡como este!

https://juanmanzanero.com/es/feed.xml

Si lo abres, verás una página rara con código similar a HTML.

Una vez copiado, ve a tu RSS app y busca "Agregar feed" o algo similar, y pega el link, ¡y listo!, ahora obtendrás los últimos posts de mi website.

Agregando Feeds de Redes Sociales

Puedes agregar incluso feeds de sitios como Reddit o YouTube.

Solo cambia [SUBREDDIT] por el nombre del subreddit a añadir:

https://reddit.com/r/[SUBREDDIT]/new/.rss

YouTube

Ve a el canal por añadir, luego ve a la pestaña "Acerca de", da click en Compartir > Copiar ID del Canal.

Ahora solo cambia [CHANNEL ID] por el copiado:

https://youtube.com/feeds/videos.xml?channel_id=[CHANNEL ID]

Mis Feeds Favoritos

Más Sobre RSS

Website migrado a Astro

Juan Manzanero — Wed, 26 Jun 2024 06:00:00 GMT

Migré este website a Astro, de tal forma para probarlo, me terminó gustando.

Probé esta herramienta para construir website estáticos, ya que Vercel ha estado tomando decisiones raras sobre la dirección del desarrollo de Next.js.

Eso, y que me di cuenta que solo necesito un static website, no necesito de SSR.

Static es el camino a seguir

Al inicio del Internet, los website eran simples archivos planos de HTML, CSS y JS, no había necesidad de Single Page Application, Server Side Rendering, etc.

Por supuesto, hay muchos websites que necesitan estas estrategias de rendering, pero para un website como este, solo static es mejor.

Menos tiempo buildeando, carga rápida, hosting barato, menos JavaScript en el browser.

Lo genial sobre Astro

Puedes usar cualquier component de cualquier framework.

Puedes usar components de React, Angular, Vue, Svelete en el mismo proyecto, ya que Astro los compila como HTML/CSS/JS.

No solo eso, pero puedes usar Astro como si fuera Next.js, con la estrategia de hybrid rendering, puedes especificar que páginas quieres que sean Server Side Rendered. Obviamente, si vas por este camino, debes hostear tu proyecto en un server.

En otras cosas...

Estoy planeando en hacer videos para YouTube, hablando de temas que considero necesitamos en la comunidad hispana, temas como cyberSecurity, privacidad, el actual estado de la tecnología, y más.

Hay muchos canales de YT en Inglés hanlando cobre eso, así que es por eso que pienso hacerlo en Español.

Aún así necesito mejorar los banners de estos posts...