Articles about basic programming

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()],
-    markdown: {
-        shikiConfig: {
-            themes: {
-                light: "catppuccin-latte",
-                dark: "github-dark"
-            },
-        },
-    },
+  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",
-    "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.5"
+    "astro": "^4.11.5",
+    "tailwindcss": "^3.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 {
@@ -49,6 +49,17 @@ pre.astro-code>code .line::before {
     color: #3b82f6;
 }
 
+#blog img {
+    max-height: 400px;
+}
+
+#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/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/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
+
+
+
+