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(), mdx()],
+    integrations: [tailwind()],
     markdown: {
         shikiConfig: {
             themes: {
                 light: "catppuccin-latte",
                 dark: "github-dark"
-      }
+            },
-    }
+        },
-  }
+    },
 });

package.json

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

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.8rem;
+    font-size: 0.9rem;
 }
 
 pre.astro-code>code {
@@ -39,14 +39,6 @@ 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;
@@ -57,22 +49,6 @@ 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,22 +39,12 @@ 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
+                    <a class="font-semibold inline-block text-2xl hover:underline" href="/">
-                        class="font-semibold inline-block text-2xl hover:underline"
-                        href="/"
-                    >
                         Fernando Araoz
                     </a>
-                    <a
+                    <a class="ml-6 inline-block hover:underline" href="/side-projects">Side projects</a>
-                        class="ml-6 inline-block hover:underline"
+                    <a class="ml-6 inline-block hover:underline" href="/blog/en">Eng Blog</a>
-                        href="/side-projects">Side projects</a
+                    <a class="ml-6 inline-block hover:underline" href="/blog/es">Es Blog</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]">
@@ -76,13 +66,11 @@ lang = lang ?? "en";
                     {
                         frontmatter?.image && (
                             <figure>
-                                <div class="text-center">
                                 <img
-                                        class="dark:opacity-70 rounded pt-8 inline-block"
+                                    class="dark:opacity-70 rounded pt-8"
                                     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

@@ -0,0 +1,13 @@
+---
+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

@@ -1,200 +0,0 @@
----
-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

@@ -1,94 +0,0 @@
----
-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

@@ -1,135 +0,0 @@
----
-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

@@ -1,63 +0,0 @@
----
-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
-
-
-
-