Blog de Peter

Explorando Funciones de ES6 !!

Thu, 01 Jun 2023 00:00:00 GMT

Explorando Funciones de ES6 !!

JavaScript ES6 introdujo varias funciones nuevas que han hecho que la codificación en JavaScript sea más eficiente y agradable. Vamos a explorar algunas de estas funciones.

Arrow Functions - Funciones de Flecha

Las funciones de flecha proporcionan una nueva sintaxis para escribir expresiones de función. Son más concisas y vinculan léxicamente el valor this.

Ejemplo

const add = (a, b) => a + b;
console.log(add(2, 3)); // Output: 5

Template Literals - Literales de Plantilla

Los literales de plantilla permiten una interpolación de cadenas más fácil y cadenas de varias líneas. Utilizan comillas invertidas (`) en lugar de comillas simples o dobles.

Ejemplo

const name = 'Jane';
console.log(`Hello, ${name}!`);
// Output: Hello, Jane!

Destructuring Assignment - Asignación por Desestructuración

La asignación por desestructuración le permite extraer valores de matrices u objetos y asignarlos a variables de una manera más concisa.

Ejemplo

const person = { name: 'Jane', age: 30 };
const { name, age } = person;
console.log(name, age); // Output: Jane 30

Empezando con Flutter

Sat, 10 Aug 2024 00:00:00 GMT

Empezando con Flutter

Flutter es un kit de herramientas de IU para construir aplicaciones compiladas nativamente para móviles, web y escritorio desde un único código base.

Instalación de Flutter

Para comenzar a desarrollar con Flutter, primero necesitas instalar el SDK de Flutter en tu sistema. Puedes seguir las instrucciones de instalación en la documentación oficial de Flutter.

flutter doctor

Este comando te ayudará a verificar si tienes todo lo necesario para comenzar a desarrollar con Flutter.

Creación de un Nuevo Proyecto

Puedes crear un nuevo proyecto de Flutter utilizando el siguiente comando:

flutter create my_first_app
cd my_first_app

Esto creará un nuevo proyecto de Flutter en el directorio my_first_app.

Ejecución de la Aplicación

Para ejecutar tu aplicación de Flutter, puedes utilizar el siguiente comando:

flutter run

Esto compilará y ejecutará tu aplicación en un emulador o dispositivo conectado. ¡Ahora puedes ver tu aplicación en acción!

Escribiendo tu Primera Aplicación

Puedes editar el archivo lib/main.dart para comenzar a escribir tu aplicación de Flutter. Aquí tienes un ejemplo de una aplicación de contador simple.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePage

State extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Comprendiendo los Hooks de React

Thu, 15 Jun 2023 00:00:00 GMT

Comprendiendo los Hooks de React

Los Hooks de React son una característica que te permite usar el estado y otras características de React en componentes funcionales. Esto te permite escribir componentes más simples y reutilizables sin tener que convertirlos en clases.

useState Hook

El useState hook te permite añadir estado a tus componentes funcionales.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect Hook

El useEffect hook te permite realizar efectos secundarios en tus componentes funcionales, como acceder a datos externos o modificar el DOM.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Custom Hooks

Puedes crear tus propios hooks personalizados para reutilizar lógica en tus componentes.

import { useState } from 'react';

function useCounter(initialCount) {
  const [count, setCount] = useState(initialCount);

  const increment = () => {
    setCount(count + 1);
  };

  return { count, increment };
}

Luego puedes usar tu hook personalizado en tus componentes.

import React from 'react';
import useCounter from './useCounter';

function Counter() {
  const { count, increment } = useCounter(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}

Los Hooks de React son una poderosa característica que te permite escribir componentes más limpios y reutilizables en React. ¡Empieza a usarlos en tus proyectos hoy mismo!

Construyendo una API REST con Node.js

Tue, 20 Jun 2023 00:00:00 GMT

Construyendo una API REST con Node.js

En este tutorial, construiremos una API RESTful utilizando Node.js y Express. Una API RESTful es una interfaz de programación de aplicaciones que sigue los principios de REST (Representational State Transfer). Utilizaremos Express, un marco de aplicaciones web de Node.js, para crear nuestra API.

Instalación de Node.js

Primero, necesitas instalar Node.js en tu sistema. Puedes descargar Node.js desde el sitio web oficial.

npm init -y
npm install express

Creamos un archivo index.js y agregamos el siguiente código:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Para ejecutar la aplicación, ejecuta el siguiente comando:

node index.js

Ahora puedes acceder a tu aplicación en http://localhost:3000.

Creación de rutas para la API

Vamos a crear algunas rutas para nuestra API. Por ejemplo, una ruta para obtener una lista de usuarios y otra ruta para obtener un usuario por su ID.

app.get('/api/users', (req, res) => {
  res.json([
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
  ]);
});

app.get('/api/users/:id', (req, res) => {
  const id = req.params.id;
  res.json({ id, name: 'Alice' });
});

Ahora puedes acceder a la API de usuarios en http://localhost:3000/api/users y http://localhost:3000/api/users/1.

Conclusion

En este tutorial, hemos construido una API RESTful utilizando Node.js y Express. Puedes agregar más rutas y funcionalidades a tu API según tus necesidades. ¡Diviértete construyendo tu API!

Espero que este tutorial te haya sido útil. Si tienes alguna pregunta, no dudes en dejar un comentario.

CSS Grid Layout - Una guía completa

Sun, 25 Jun 2023 00:00:00 GMT

CSS Grid Layout: Una guía completa

CSS Grid Layout es una poderosa herramienta que te permite crear diseños complejos de forma sencilla y flexible. En esta guía, aprenderás cómo utilizar CSS Grid Layout para crear diseños de páginas web modernas y responsivas.

Introducción a CSS Grid

CSS Grid Layout es un sistema de diseño bidimensional que te permite crear diseños de páginas web utilizando filas y columnas. Con CSS Grid Layout, puedes crear diseños complejos y flexibles sin necesidad de utilizar floats o frameworks de diseño.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Este grid container creará una cuadrícula con tres columnas y un espacio de 10px entre los elementos de la cuadrícula. También puedes utilizar la propiedad grid-template-rows para definir las filas de la cuadrícula.

Grid Items

Los elementos dentro de un grid container se denominan grid items. Puedes colocar los grid items en la cuadrícula utilizando las propiedades grid-column y grid-row.

.item {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

Este código colocará el elemento en la segunda y tercera columnas y en la primera y segunda filas de la cuadrícula.

Grid Areas

CSS Grid Layout también te permite definir áreas con nombre en tu cuadrícula. Esto hace que sea más fácil colocar elementos en áreas específicas de la cuadrícula.

.container {
  grid-template-areas:
    'header header header'
    'sidebar content content'
    'footer footer footer';
}

.item {
  grid-area: content;
}

Este código define un grid container con áreas de encabezado, barra lateral, contenido y pie de página. El elemento con la clase item se colocará en el área de contenido de la cuadrícula.

Responsive Grids

CSS Grid Layout es perfecto para crear diseños responsivos. Puedes utilizar las funciones minmax() y auto-fill para crear cuadrículas que se adapten a diferentes tamaños de pantalla.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Este código creará una cuadrícula con columnas que tienen al menos 200px de ancho y se expanden para llenar el espacio disponible. La palabra clave auto-fill permite que la cuadrícula cree automáticamente nuevas columnas según sea necesario.

Browser Support

CSS Grid Layout es compatible con la mayoría de los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge. Puedes utilizar CSS Grid Layout en tus proyectos web sin preocuparte por la compatibilidad con los navegadores.

¡Esperamos que esta guía te haya ayudado a comprender mejor CSS Grid Layout y cómo puedes utilizarlo para crear diseños de páginas web modernas y responsivas!

Astro.js El Framework Web Moderno

Wed, 09 Apr 2025 00:00:00 GMT

Astro.js: El Framework Web que Prioriza el Rendimiento

Astro.js es un framework web moderno que ha capturado la atención de la comunidad de desarrollo por su enfoque único en el rendimiento. A diferencia de otros frameworks, Astro se especializa en enviar cero JavaScript al navegador por defecto, resultando en sitios web ultra-rápidos.

¿Qué hace especial a Astro?

La magia de Astro radica en su arquitectura Islands Architecture (Arquitectura de Islas). Este patrón permite hidratar selectivamente solo los componentes interactivos que realmente lo necesitan, manteniendo el resto del sitio como HTML estático puro.

---
// Frontmatter de Astro - código que ejecuta en servidor
const response = await fetch('https://api.example.com/posts');
const posts = await response.json();
---

<!-- Todo esto se renderiza a HTML estático -->
<html>
  <head><title>Mi Blog</title></head>
  <body>
    <h1>Posts recientes</h1>
    {posts.map((post) => <article>{post.title}</article>)}
  </body>
</html>

Content Collections: Gestión de Contenido Tipado

Una de las características más poderosas de Astro es Content Collections. Esta API te permite trabajar con contenido (Markdown, MDX, JSON, YAML) con validación de tipos completa mediante Zod.

// content.config.ts
import { defineCollection, z } from 'astro:content';

const blogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    author: z.string(),
    tags: z.array(z.string()),
  }),
});

export const collections = {
  blog: blogCollection,
};

Con esto, obtienes autocompletado y validación de tipos en todo tu proyecto. ¡No más errores de frontmatter silenciosos!

View Transitions API

Astro implementa nativamente la View Transitions API del navegador, permitiendo transiciones fluidas entre páginas sin necesidad de ser una SPA:

---
import { ClientRouter } from 'astro:transitions';
---

<head>
  <ClientRouter />
</head>

Esto habilita animaciones suaves entre navegaciones manteniendo todas las ventajas de un sitio multipágina tradicional.

Zero-JS by Default

La filosofía de Astro es radicalmente diferente a frameworks como React o Vue. En Astro:

Por defecto: Cero JavaScript en el cliente
Bajo demanda: Solo cargas JS para componentes que necesiten interactividad
Framework-agnostic: Usa React, Vue, Svelte, Solid, Preact, Alpine o Lit en el mismo proyecto

---
import InteractiveCounter from '../components/Counter.jsx';
---

<!-- Esto es HTML estático -->
<h1>Bienvenido a mi sitio</h1>

<!-- Solo este componente carga JavaScript -->
<InteractiveCounter client:load />

Las directivas como client:load, client:visible, client:media o client:only te dan control granular sobre cuándo y cómo se hidratan los componentes.

Astro Islands en acción

Las "islas" de Astro son componentes interactivos en un océano de HTML estático:

<!-- Todo esto es HTML estático, ultra-rápido -->
<header>...</header>
<nav>...</nav>

<!-- Solo esta "isla" carga JavaScript -->
<SearchWidget client:visible />

<footer>...</footer>

Server Islands (Novedad en Astro v5)

Astro v5 introdujo Server Islands, permitiendo renderizar componentes dinámicos en el servidor mientras el resto de la página se cachea estáticamente:

<!-- Este componente se renderiza en el servidor en cada request -->
<UserProfile server:defer />

<!-- Esto se sirve como HTML estático cacheado -->
<StaticContent />

¿Por qué elegir Astro?

Característica	Astro	Frameworks Tradicionales
JavaScript por defecto	0 KB	100+ KB
Core Web Vitals	Excelente	Variable
Flexibilidad de UI	Múltiples frameworks	Uno solo
SEO	Perfecto (SSG por defecto)	Requiere configuración
Curva de aprendizaje	Suave	Moderada a alta

Novedades en Astro v6

Astro v6 trae mejoras significativas y nuevas features experimentales que preparan el terreno para el futuro del framework:

🚀 Experimental Rust Compiler

La característica más emocionante de v6 es el nuevo compilador experimental escrito en Rust. Esta reescritura promete:

Mayor velocidad de compilación
Mejores mensajes de error
Soporte nativo para modern JavaScript, TypeScript y CSS

// astro.config.mjs
export default defineConfig({
  experimental: {
    rustCompiler: true
  }
});

⚡ Queued Rendering Experimental

Una nueva infraestructura de renderizado más performante basada en colas en lugar de recursión:

// astro.config.mjs
export default defineConfig({
  experimental: {
    queuedRendering: {
      enabled: true,
      poolSize: 3000,
      contentCache: true
    }
  }
});

Este sistema es más eficiente en memoria, especialmente en proyectos grandes con muchas páginas.

🔄 Experimental Route Caching

Nueva API para caching de respuestas en páginas renderizadas bajo demanda:

// astro.config.mjs
import { memoryCache } from 'astro/config';

export default defineConfig({
  experimental: {
    cache: {
      provider: memoryCache(),
    },
  },
});

Soporta max-age, stale-while-revalidate, invalidación por tags y paths.

📦 Actualizaciones de Dependencias

Node 22: Soporte mínimo de Node 22.12.0+
Vite 7.0: Actualizado a la última versión de Vite

✨ Features Ahora Estables

Flags experimentales de v5 que ahora son estables en v6:

CSP (Content Security Policy)
Fonts - Sistema de fuentes integrado
Live Content Collections - Colecciones en tiempo real
Server Islands - Renderizado parcial en servidor

Conclusión

Astro representa un cambio de paradigma en el desarrollo web moderno. Al priorizar el contenido y el rendimiento sobre la interactividad excesiva, permite crear experiencias web realmente rápidas sin sacrificar la experiencia de desarrollo.

Con Astro v6, el framework sigue evolucionando hacia un futuro aún más performante gracias al compilador en Rust y las mejoras en el sistema de renderizado.

Si tu próximo proyecto es un blog, sitio de documentación, landing page o cualquier sitio content-first, Astro debería estar en la cima de tu lista de consideraciones.

¡Empieza hoy con npm create astro@latest y siente la diferencia!