blog for PLs (es)

astro.config.mjs

@@ -1,16 +1,16 @@
 import { defineConfig } from 'astro/config';
-
 import tailwind from "@astrojs/tailwind";
+import mdx from "@astrojs/mdx";
 
 // https://astro.build/config
 export default defineConfig({
-    integrations: [tailwind()],
+  integrations: [tailwind(), mdx()],
   markdown: {
     shikiConfig: {
       themes: {
         light: "catppuccin-latte",
         dark: "github-dark"
-            },
+      }
-        },
+    }
-    },
+  }
 });

package.json

@@ -11,12 +11,13 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.5.10",
+    "@astrojs/mdx": "^3.1.2",
     "@astrojs/tailwind": "^5.1.0",
-    "astro": "^4.6.1",
+    "astro": "^4.11.5",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.5",
-    "typescript": "^5.4.5"
+    "typescript": "^5.5.3"
   },
   "devDependencies": {
-    "@shikijs/transformers": "^1.6.0"
+    "@shikijs/transformers": "^1.10.3"
   }
 }

public/blog.css

@@ -9,7 +9,7 @@ pre.astro-code {
     padding: 1rem;
     border-radius: 0.5rem;
     border: solid 1px var(--c-border-1);
-    font-size: 0.9rem;
+    font-size: 0.8rem;
 }
 
 pre.astro-code>code {
@@ -39,6 +39,14 @@ pre.astro-code>code .line::before {
     margin-bottom: 1.5rem;
 }
 
+#blog h3 {
+    font-size: 1.25rem;
+    font-family: "Iosevka Etoile Web", serif;
+    font-weight: 900;
+    margin-top: 2.25rem;
+    margin-bottom: 1.5rem;
+}
+
 #blog li {
     list-style-type: circle;
     margin: 0.5rem 0;
@@ -49,6 +57,22 @@ pre.astro-code>code .line::before {
     color: #3b82f6;
 }
 
+#blog img {
+    max-height: 400px;
+    display: inline-block;
+}
+
+#blog p:has(> img) {
+    text-align: center;
+}
+
+#blog blockquote {
+    border-left: 5px solid var(--c-border-1);
+    padding-left: 1rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}
+
 @media (prefers-color-scheme: dark) {
 
     .astro-code,

src/layouts/BlogLayout.astro

@@ -39,12 +39,22 @@ lang = lang ?? "en";
                     class="fixed top-0 left-0 bg-black text-white rotate-[-90deg] font-display w-[100vh] translate-y-[100vh] px-8 py-2"
                     style="transform-origin: 0% 0%;"
                 >
-                    <a class="font-semibold inline-block text-2xl hover:underline" href="/">
+                    <a
+                        class="font-semibold inline-block text-2xl hover:underline"
+                        href="/"
+                    >
                         Fernando Araoz
                     </a>
-                    <a class="ml-6 inline-block hover:underline" href="/side-projects">Side projects</a>
+                    <a
-                    <a class="ml-6 inline-block hover:underline" href="/blog/en">Eng Blog</a>
+                        class="ml-6 inline-block hover:underline"
-                    <a class="ml-6 inline-block hover:underline" href="/blog/es">Es Blog</a>
+                        href="/side-projects">Side projects</a
+                    >
+                    <a class="ml-6 inline-block hover:underline" href="/blog/en"
+                        >Eng Blog</a
+                    >
+                    <a class="ml-6 inline-block hover:underline" href="/blog/es"
+                        >Es Blog</a
+                    >
                 </nav>
             </div>
             <div id="blog" class="container mx-auto max-w-[1000px]">
@@ -66,11 +76,13 @@ lang = lang ?? "en";
                     {
                         frontmatter?.image && (
                             <figure>
+                                <div class="text-center">
                                     <img
-                                    class="dark:opacity-70 rounded pt-8"
+                                        class="dark:opacity-70 rounded pt-8 inline-block"
                                         src={frontmatter.image.url}
                                         alt={frontmatter.image.alt}
                                     />
+                                </div>
                                 <figcaption class="text-xs text-center pt-2 pb-8 opacity-75">
                                     {frontmatter.image.caption}
                                 </figcaption>

src/pages/blog/es/intro.md

@@ -1,13 +0,0 @@
----
-layout: ../../../layouts/BlogLayout.astro
-title: Primera pagina
-description: Hola mundo :D
-pubDate: "2024-07-15"
-tags: ["programming"]
-image: 
-    url: ""
-    alt: ""
-    caption: ""
----
-
-(carita feliz)

src/pages/blog/es/lenguajes-01.md

@@ -0,0 +1,200 @@
+---
+layout: ../../../layouts/BlogLayout.astro
+title: "¿Con qué lenguaje de programación se crean los lenguajes de programación?"
+description: |
+    Vista superior de cómo funciona un lenguaje de programación
+    realmente.
+pubDate: "2024-07-25"
+tags: ["tech", "lenguajes", "tutorial"]
+image: 
+    url: "/img/blog/es/lang/cover.png"
+    alt: ""
+    caption: ""
+---
+
+Si estás leyendo esto seguramente sabes uno o más lenguajes
+de programación. También sabes que los computadores trabajan
+en base a `código máquina`, o unos y ceros.
+
+Pero, ¿sabes cómo funciona internamente un lenguaje de programación?
+O cómo funciona un compilador/intérprete?
+
+Este artículo asume que sabes qué es un
+[intérprete](https://es.wikipedia.org/wiki/Int%C3%A9rprete_(inform%C3%A1tica)),
+[compilador](https://es.wikipedia.org/wiki/Compilador)
+y otros conceptos básicos.
+
+
+## Motivación
+
+Al parecer no hay recursos sobre este tema en español (o soy
+muy malo buscando en internet, que es una posibilidad real).
+
+El otro día, mientras trabajaba en la documentación de mi
+[lenguaje de programación THP](https://thp.araozu.dev/),
+me dió curiosidad saber qué se dice del tema en español.
+Porque en Inglés hay un montón de recursos acerca de lenguajes
+de programación, clasificación, características, implementaciones,
+tutoriales, etc., por ejemplo:
+
+- [Reddit: Programming languages](https://old.reddit.com/r/ProgrammingLanguages/)
+- [Crafting Interpreters](https://craftinginterpreters.com/)
+- [Interpreter/Compiler book](https://interpreterbook.com/)
+- [Youtube: Context Free](https://www.youtube.com/@contextfree)
+
+etc. etc. etc.
+
+Buscando en YouTube "como funciona un lenguaje de programación"
+encontré un único video que habla acerca del tema, de EDteam.
+Y al verlo me pareció: 1) muy simplista, y 2) incorrecto en
+muchos aspectos básicos.
+
+Y bien puede ser que no sé buscar cosas en internet, pero como
+es común en el área, casi todos los recursos buenos están en
+inglés.
+
+So, ya que tengo esta especie de blog, me interesó escribir
+al respecto y eventualmente detallar cómo se crea un
+lenguaje de programación, desde cero, con código y todo.
+
+
+## ¿Con qué lenguaje se crean los lenguajes?
+
+Con *literalmente* cualquier lenguaje de programación.
+Es como el huevo y la gallina. ¿Quién vino primero, el huevo?
+o la gallina?
+
+
+### En un principio...
+
+No existía ningún lenguaje de programación. Existían computadoras,
+y las computadoras se programaban en unos y ceros.
+Pero como esto era re-complicado y re-difícil y propenso a errores,
+se inventó el [lenguaje ensamblador](https://es.wikipedia.org/wiki/Lenguaje_ensamblador).
+
+Y el ensamblador se escribió en código máquina.
+
+
+### Luego!
+
+Hubieron varios lenguajes de programación a lo largo de los años
+como FORTRAN, Lisp, Cobol, etc., todos implementados esta vez en
+ensamblador.
+
+Pero aquí es donde surge un concepto nuevo: Bootstraping
+[(que curiosamente no tiene un artículo en Wikipedia español así que
+lo llamaré así: Bootstraping)](https://en.wikipedia.org/wiki/Bootstrapping_%28compilers%29).
+
+Bootstraping es el proceso mediante el cual un lenguaje de
+programación se implementa en sí mismo. Curioso, y confuso.
+
+Poniendo como ejemplo el lenguaje C:
+
+1. Primero se crea un compilador para C en cualquier lenguaje
+    [(C se implementó inicialmente en B)](https://www.bell-labs.com/usr/dmr/www/chist.html).
+2. Ahora que tenemos un compilador de C capaz de crear programas
+    nuevos (escrito en B), crearemos el siguiente programa:
+    un compilador de C.
+3. Una vez que terminamos de escribir el compilador de C, en C,
+    listo. Tenemos un lenguaje de programación escrito en sí mismo.
+
+Confuso. Como me gustan las analogías, aca va una con Minecraft:
+
+"Las hachas de madera se crean con hachas de madera. ¿Cómo
+se creó la primera hacha de madera?"
+
+Pues, primero obtienes madera con tu mano. Despues creas un
+hacha de madera con la madera que obtuviste.
+Finalmente, usas el hacha de madera para picar más madera,
+y con esa madera creas nuevas hachas de madera.
+
+![Imágen ilustrativa](/img/blog/es/lang/minecraft.jpg)
+
+
+### Finalmente
+
+Los lenguajes compilados suelen seguir ese
+proceso: Primero se implementan en un lenguaje (generalmente
+C, C++ o Rust) y luego se implementan en sí mismos. Este es el
+caso de: Fortran, Pascal, C, C++, Haskell, OCaml,
+F#, [Erlang](https://www.erlang.org/),
+[Rust](https://www.rust-lang.org/), [Swift](https://swift.org/),
+[Go](https://go.dev/), [Zig](https://ziglang.org/),
+[Nim](https://nim-lang.org/), [Crystal](https://crystal-lang.org/),
+y muchisimos más.
+
+Los lenguajes que se ejecutan en máquinas virtuales
+están generalmente implementados en una mezcla de los 2,
+por ejemplo Java está implementado en Java + C + C++.
+
+Los lenguajes interpretados generalmente se implementan en otro
+lenguaje, on en una mezcla de otro y sí mismos.
+PHP está implementado en C, Python en C, Ruby en C + Ruby, etc.
+JavaScript en C++, y curiosamente, TypeScript está implementado
+en TypeScript.
+
+Asi que: ¿Con qué lenguaje de programación se crean los
+lenguajes de programación? Con cualquier lenguaje, y eventualmente
+en sí mismos.
+
+
+## ¿Y cómo se crea un compilador?
+
+¡Próximamente, en Dragon Ball Z!
+
+
+## Addendum
+
+- ¿Por qué los lenguajes interpretados no suelen implementarse
+completamente en sí mismos?
+
+Los lenguajes interpretados y los que se compilan a una máquina
+virtual (Java, C#), por su naturaleza, no pueden
+realizar el proceso de bootstraping. Esto se debe a que los
+lenguajes interpretados **no generán código máquina**,
+sino que [**generan bytecode**](https://es.wikipedia.org/wiki/Bytecode),
+que debe ser ejecutado por el **intérprete** o la 
+[**máquina virtual**](https://es.wikipedia.org/wiki/M%C3%A1quina_virtual_Java).
+
+Pero, el intérprete/VM tienen que ejecutarse en metal. Y los únicos
+lenguajes que pueden hacer eso son los lenguajes compilados.
+
+- ¿Por qué hay tantos lenguajes de programación?
+
+Porque no existe el lenguaje perfecto
+([aunque me duela admitirlo](https://rust-lang.org/)),
+siempre existirán avances que los lenguajes antiguos
+no puedan implementar o sean muy lentos en hacerlo,
+y porque [es un hobby](https://old.reddit.com/r/ProgrammingLanguages/)
+muy interesante.
+
+Cada lenguaje nuevo puede tener conceptos radicalmente nuevos
+como [borrow checking](https://rust-lang.org/),
+[comptime](https://ziglang.org/documentation/0.13.0/#comptime),
+[programación funcional pura](https://www.haskell.org/),
+[concurrencia masiva](https://www.erlang.org/), etc.
+
+O pueden ser una reimaginación/mejora de lenguajes existentes
+como [Mojo](https://www.modular.com/mojo),
+[Kotlin](https://kotlinlang.org/),
+[Lisp Flavored Erlang](https://lfe.io/),
+[Gleam](https://gleam.run/).
+
+O pueden ocupar un nicho que tiene ciertas necesidades
+como [Hack](https://hacklang.org/), [MoonScript](https://moonscript.org/),
+[GDScript](https://docs.godotengine.org/en/stable/tutorials/scripting/gdscript/gdscript_basics.html),
+[Vala](https://vala.dev/).
+
+O pueden ser una demostración de lo que es posible como
+Brainfuck, [LOLCODE](http://www.lolcode.org/),
+[Shakespeare](https://esolangs.org/wiki/Shakespeare).
+
+O pueden ser una sátira del status quo como
+[Dreamberd](https://github.com/TodePond/DreamBerd).
+
+O pueden ser un acto de rebeldía como
+[CrabLang](https://crablang.org/).
+
+O pueden ser... creo que ya entendiste.
+
+

src/pages/blog/es/programacion-01.md

@@ -0,0 +1,94 @@
+---
+layout: ../../../layouts/BlogLayout.astro
+title: "01: Programación desde cero absoluto con Zig"
+description: |
+    Aprendé a programar desde completamente cero, utilizando el lenguaje
+    de programación Zig.
+pubDate: "2024-07-15"
+tags: ["tech", "zig", "lenguajes", "intro", "tutorial"]
+image: 
+    url: ""
+    alt: ""
+    caption: ""
+---
+
+```zig
+const std = @import("std");
+
+pub fn main() !void {
+    std.debug.print("Hola {}!", .{"mundo"});
+}
+```
+
+Dicen por ahi que la mejor forma de aprender es enseñar, y llevo un tiempo con
+la idea de consolidar lo que he aprendido a lo largo de los años, así que
+decidí escribir un tutorial para aprender programación, desde completamente cero.
+
+## Público objetivo
+
+Esta serie de artículos están dirigidos a personas que no saben absolutamente
+nada de programación. Nada de nada. Han utilizado un computador/laptop/celular,
+saben utilizar mouse y teclado, y han escuchado por ahi de la programación
+(probablemente en tiktok) y les dió curiosidad. Pero lo más friki que hicieron
+en su vida es descargar música en mp3 de youtube o instalar programas/juegos
+piratas.
+
+Y a esas personas les digo: bienvenidos a bordo.
+
+
+## Expectativas
+
+Esto no es un tutorial rápido para leer en media hora, escribir un programa,
+ir a trabajar a Netflix y ganar 400_000 dolares al año. Las ciencias
+de la computación son amplias, y programar es solo el inicio.
+
+En esta serie explico conceptos fundamentales, desde abajo, lento pero seguro,
+de forma interactiva y teórica. Aprender a programar no es fácil, pero
+tampoco es imposible. Y en mi opinión, es fundamental que lo que vas a ir
+descubriendo te llame la atención, te dé curiosidad, te den ganas de aprender.
+Porque sino, será como los cursos aburridos del colegio: una obligación,
+un aburrimiento, una molestia, que al acabar el colegio olvidarás de inmediato.
+
+
+## Este tutorial sirve para hacer páginas web?
+
+Depende.
+
+En este tutorial no enseño nada específico a la creación de páginas web.
+Pero todo lo que aprendas te servirá para crear páginas web en el
+futuro.
+
+Si tu objetivo es únicamente crear páginas web sencillas, pequeñas,
+hay mejores tutoriales allá afuera.
+
+## Empezar
+
+
+Para empezar el tutorial [usa este link](./programacion-02).
+
+
+
+
+## Público no objetivo
+
+Aquellos que ya saben programar en algún otro lenguaje y quieren aprender Zig:
+esta serie no es para ustedes. Hay un monton de información súmamente básica que
+les va aburrir.
+
+Si quieren aprender Zig vayan a [https://ziglang.org](https://ziglang.org), 
+[https://zig.guide/](https://zig.guide/),
+[https://github.com/zigtools/zls](https://github.com/zigtools/zls),
+[https://saidvandeklundert.net/fortheloveofzig/](https://saidvandeklundert.net/fortheloveofzig/),
+[https://www.openmymind.net/learning_zig/](https://www.openmymind.net/learning_zig/),
+lean la documentación, instalen el compilador y LSP y pónganse a programar cualquier cosa.
+
+Más adelante planeo escribir un compilador basado en
+[Crafting Interpreters](https://craftinginterpreters.com/) pero en Zig, que puede
+servir como guía.
+
+
+
+
+
+
+

src/pages/blog/es/programacion-02.md

@@ -0,0 +1,135 @@
+---
+layout: ../../../layouts/BlogLayout.astro
+title: "02: Programación desde cero absoluto con Zig: Fundamentos"
+description: |
+    Fundamentos de la computación, programas, componentes
+pubDate: "2024-07-16"
+tags: ["tech", "lenguajes", "intro", "tutorial"]
+image: 
+    url: ""
+    alt: ""
+    caption: ""
+---
+
+En este artículo explico conceptos fundamentales de los computadores,
+programas y computación.
+
+## Qué es un computador?
+
+Un computador es cualquier dispositivo que se puede **"configurar"**
+para que realize tareas que nosotros querramos.
+
+Por ejemplo, los celulares son computadores con los que podemos
+usar apps, escribir mensajes, tomar fotos y videos, jugar juegos,
+etc. 
+
+![Imagen de un iPhone](/img/blog/es/tutorial/001-iphone.jpg)
+
+Una calculadora también es un computador, nos permite realizar operaciones
+matemáticas simples. Solo que en cierto sentido, una calculadora solo es
+capaz de ejecutar un programa.
+
+![Imagen de una calculadora](/img/blog/es/tutorial/002-calculadora.jpg)
+
+Para hacer cada una de estas acciones utilizamos "apps" o "programas".
+
+Por ejemplo, utilizamos el **programa** "WhatsApp" para enviar y recibir
+mensajes de texto, voz o video, el **programa** "Photoshop" para editar
+fotos, o el **programa** "Word" para escribir documentos.
+
+
+## Qué es un programa
+
+Al nivel más fundamental, un programa es una lista de instrucciones
+que ejecuta un computador. Me gusta hacer la analogía de un Chef
+preparando una Pizza:
+
+
+![Imagen de un chef](/img/blog/es/tutorial/003-chef.jpg)
+
+Un Chef realiza una operacion: transforma ingredientes en un plato.
+Para esto necesita 2 cosas:
+
+- los ingredientes (obviamente) 
+- una receta
+
+El Chef toma la receta y sigue los pasos en ella. La receta indica qué
+tiene que hacer con cada ingrediente, cuándo y cómo.
+
+![Analogía 1](/img/blog/es/tutorial/004-analogia1.jpg)
+
+En esta analogía la receta es el programa, y el chef es el computador.
+
+
+![Analogía 2](/img/blog/es/tutorial/005-analogia2.jpg)
+
+El programa (por ejemplo, Photoshop) es una lista de instrucciones
+que, cuando el computador ejecuta, edita una foto.
+
+Aunque a nosotros nos parece que Photoshop tiene botones y figuras
+y paneles y demás, en realidad Photoshop no es más que un monton
+de instrucciones (**código**) debajo del capó.
+
+![Analogía 3](/img/blog/es/tutorial/006-codigo.jpg)
+
+
+## Qué es el código?
+
+```zig
+const std = @import("std");
+const parseInt = std.fmt.parseInt;
+
+test "parse integers" {
+    const input = "123 67 89,99";
+    const ally = std.testing.allocator;
+
+    var list = std.ArrayList(u32).init(ally);
+    // Ensure the list is freed at scope exit.
+    // Try commenting out this line!
+    defer list.deinit();
+
+    var it = std.mem.tokenizeAny(u8, input, " ,");
+    while (it.next()) |num| {
+        const n = try parseInt(u32, num, 10);
+        try list.append(n);
+    }
+
+    const expected = [_]u32{ 123, 67, 89, 99 };
+
+    for (expected, list.items) |exp, actual| {
+        try std.testing.expectEqual(exp, actual);
+    }
+}
+```
+
+Siguiendo la analogía del Chef, el código es lo que compone la "receta"
+(el programa). Se puede decir que son los "pasos" que la computadora realizará.
+
+Si la receta dice: `Amasar la masa durante 5 minutos`
+
+El código sería: `std.ArrayList(u32).init(ally)`
+
+
+
+## Qué es la programación?
+
+En la analogía, programar es **escribir la receta** que el Chef seguirá.
+
+Programar es escribir el **programa** que la **computadora** seguirá. Es
+escribir todas esas palabras raras con colores que estan en la imagen de arriba.
+
+Y así como hay recetas de pizzas en español, inglés o chino; los programas
+se escriben en **lenguajes de programación**, por ejemplo
+[Python](https://www.python.org/), [Java](https://dev.java/) o
+[Zig](https://ziglang.org/).
+
+
+## Siguiente artículo
+
+En el siguiente artículo pondremos manos a la obra escribiendo y ejecutando
+un programa.
+
+[Link al siguiente artículo](./programacion-03)
+
+
+

src/pages/blog/es/programacion-03.md

@@ -0,0 +1,63 @@
+---
+layout: ../../../layouts/BlogLayout.astro
+title: "03: Programación desde cero: Hola mundo"
+description: |
+    Escribí el tradicional programa "Hola mundo" por tí mismo!
+pubDate: "2024-07-17"
+tags: ["tech", "lenguajes", "intro", "tutorial", "zig"]
+image: 
+    url: ""
+    alt: ""
+    caption: ""
+---
+
+
+En este artículo vamos a escribir nuestro primer programa: Hola mundo. Vamos a
+modificarlo y entender algunos otros conceptos.
+
+## Hola mundo
+
+Hola mundo es tradicionalmente el [primer programa](https://es.wikipedia.org/wiki/Hola_mundo)
+que se escribe cuando se aprende a programar.
+
+Vamos a empezar con este programa. Entra a la siguiente página web:
+[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW)
+
+Veras lo siguiente:
+
+![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg)
+
+Arriba está el nombre de la página: "Zig Playground". A su derecha hay 3 botones en inglés:
+
+- "Run" ejecuta el programa.
+- "Format" hace algo llamado 'formatear' el código. No lo usaremos aún.
+- "Share" comparte el código que escribimos. No lo usaremos.
+
+Dentro del recuadro plomo está escrito el código **Zig**. No lo modifiques aún.
+
+Si lo modificaste y quieres volver al código original, cierra la página y vuelve a
+abrirla con el link de arriba.
+
+## Ejecutando el código
+
+Presiona el boton "Run". Aparecerá texto debajo del recuadro del código:
+
+![Zig online 2](/img/blog/es/tutorial/008-zig.png)
+
+Este texto es el resultado de ejecutar el programa. Se lee:
+
+- `Hola mundo!` : Este es el resultado del programa.
+- `Program exited.` : Significa "El programa terminó" en ingles. Nos 
+    indica que el programa terminó de ejecutarse. Puedes ignorarlo.
+
+Felicidades! Has ejecutado tu primer programa.
+
+> Desafio: Borra todo el código y vuelve a escribirlo, exactamente igual.
+    Utiliza la imágen como guía.
+
+
+## Inglés
+
+
+
+