Compare commits

..

No commits in common. "d7349bca3a35ce6efbe754e3f1d38cd24db84f8d" and "3beeec63bedf6dba698b5f6545a0b5a9955bbae0" have entirely different histories.

20 changed files with 1558 additions and 2076 deletions

View File

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

View File

@ -11,13 +11,12 @@
}, },
"dependencies": { "dependencies": {
"@astrojs/check": "^0.5.10", "@astrojs/check": "^0.5.10",
"@astrojs/mdx": "^3.1.2",
"@astrojs/tailwind": "^5.1.0", "@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": { "devDependencies": {
"@shikijs/transformers": "^1.10.3" "@shikijs/transformers": "^1.6.0"
} }
} }

File diff suppressed because it is too large Load Diff

View File

@ -9,7 +9,7 @@ pre.astro-code {
padding: 1rem; padding: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
border: solid 1px var(--c-border-1); border: solid 1px var(--c-border-1);
font-size: 0.8rem; font-size: 0.9rem;
} }
pre.astro-code>code { pre.astro-code>code {
@ -39,14 +39,6 @@ pre.astro-code>code .line::before {
margin-bottom: 1.5rem; 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 { #blog li {
list-style-type: circle; list-style-type: circle;
margin: 0.5rem 0; margin: 0.5rem 0;
@ -57,22 +49,6 @@ pre.astro-code>code .line::before {
color: #3b82f6; 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) { @media (prefers-color-scheme: dark) {
.astro-code, .astro-code,

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 154 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 433 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

View File

@ -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" 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%;" 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 Fernando Araoz
</a> </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> </nav>
</div> </div>
<div id="blog" class="container mx-auto max-w-[1000px]"> <div id="blog" class="container mx-auto max-w-[1000px]">
@ -76,13 +66,11 @@ lang = lang ?? "en";
{ {
frontmatter?.image && ( frontmatter?.image && (
<figure> <figure>
<div class="text-center"> <img
<img class="dark:opacity-70 rounded pt-8"
class="dark:opacity-70 rounded pt-8 inline-block" src={frontmatter.image.url}
src={frontmatter.image.url} alt={frontmatter.image.alt}
alt={frontmatter.image.alt} />
/>
</div>
<figcaption class="text-xs text-center pt-2 pb-8 opacity-75"> <figcaption class="text-xs text-center pt-2 pb-8 opacity-75">
{frontmatter.image.caption} {frontmatter.image.caption}
</figcaption> </figcaption>

View File

@ -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)

View File

@ -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.

View File

@ -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.

View File

@ -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)

View File

@ -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