11 changed files with 11 additions and 300 deletions
--- a/public/IosevkaEtoile/Heavy.woff2
+++ b/public/IosevkaEtoile/Heavy.woff2
--- a/public/blog.css
+++ b/public/blog.css
@ -1,29 +0,0 @@
 #blog code {
    font-family: "Iosevka Fixed Web", Iosevka, monospace;
    border: solid 1px var(--c-on-bg);
    padding: 0 0.25rem;
    border-radius: 0.25rem;
 }
 #blog p {
    margin: 1rem 0;
 }
 #blog h2 {
    font-size: 1.5rem;
    font-family: "Iosevka Etoile Web", serif;
    font-weight: 900;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
 }
 #blog li {
    list-style-type: circle;
    margin: 0.5rem 0;
 }
 #blog a {
    text-decoration: underline;
    color: #3b82f6;
 }
--- a/public/global.css
+++ b/public/global.css
@ -17,15 +17,6 @@
 	src: url('/Iosevka/Bold.woff2') format('woff2');
 }
@font-face {
 	font-family: 'Iosevka Etoile Web';
 	font-display: swap;
 	font-weight: 900;
 	font-stretch: normal;
 	font-style: normal;
 	src: url('/IosevkaEtoile/Heavy.woff2') format('woff2');
 }
 :root {
    --c-bg: #101010;
    --c-on-bg: #dedede;
--- a/public/img/blog/001_responsible/thumb.webp
+++ b/public/img/blog/001_responsible/thumb.webp
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@ -7,7 +7,7 @@ const { title } = Astro.props;
    class="shadow-lg p-2 bg-c-bg-2 rounded-md max-w-[50rem] border border-slate-600 dark:border-transparent mb-2"
 >
    <h2
-        class="text-2xl font-bold bg-c-bg-2 py-2 pl-2 cursor-pointer hover:underline sticky top-0 font-etoile"
+        class="text-2xl font-bold bg-c-bg-2 py-2 pl-2 cursor-pointer hover:underline sticky top-0"
        @click="open = !open"
    >
        {title}
--- a/src/layouts/BlogLayout.astro
+++ b/src/layouts/BlogLayout.astro
@ -1,8 +1,3 @@
 ---
 const { frontmatter } = Astro.props;
 ---
 <!doctype html>
 <html lang="en">
    <head>
        <meta charset="utf-8" />
@ -10,8 +5,7 @@ const { frontmatter } = Astro.props;
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <link rel="stylesheet" href="/global.css" />
-        <link rel="stylesheet" href="/blog.css" />
+        <title>Fernando Araoz - Blog</title>
        <title>Blog - Fernando Araoz</title>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
@ -24,59 +18,8 @@ const { frontmatter } = Astro.props;
            href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css"
        />
        <script src="//unpkg.com/alpinejs" defer></script>
        <style>
            html {
                font-size: 18px;
            }
        </style>
    </head>
    <body>
-        <div id="blog" class="container mx-auto max-w-[1000px]">
+        <slot />
            <a
                class="font-etoile text-3xl text-center py-10 font-bold dark:bg-c-bg-2 text-c-on-bg my-4 rounded 
                    inline-block w-full hover:underline cursor-pointer"
                href="/"
            >
                Fernando Araoz: le ブログ
            </a>
            <div class="py-6">
                {
                    frontmatter?.title && (
                        <h1 class="font-etoile text-center text-4xl py-2">
                            {frontmatter.title}
                        </h1>
                    )
                }
                {
                    frontmatter?.pubDate && (
                        <p class="text-center text-sm">
                            Published: {frontmatter.pubDate}
                        </p>
                    )
                }
                {
                    frontmatter?.image && (
                        <figure>
                            <img
                                class="dark:opacity-70 rounded pt-8"
                                src={frontmatter.image.url}
                                alt={frontmatter.image.alt}
                            />
                            <figcaption class="text-xs text-center pt-2 pb-8 opacity-75">
                                {frontmatter.image.caption}
                            </figcaption>
                        </figure>
                    )
                }
            </div>
            <div class="text-base">
                <slot />
            </div>
            <div class="min-h-40"></div>
        </div>
    </body>
 </html>
--- a/src/pages/blog/first.md
+++ b/src/pages/blog/first.md
@ -0,0 +1,7 @@
 ---
 layout: ../../layouts/BlogLayout.astro
 ---
 # First
 The first page
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@ -4,18 +4,4 @@ import BlogLayout from "../../layouts/BlogLayout.astro";
 <BlogLayout>
    <h1>Blog index, WIP</h1>
    <p>Some day there will be a procedurally generated list of pages here!</p>
    <p>Until then:</p>
    <p>Posts:</p>
    <ul>
        <li>
            <a class="underline" href="/blog/responsible-stack/">
                The responsible stack
            </a>
        </li>
    </ul>
 </BlogLayout>
--- a/src/pages/blog/responsible-stack.md
+++ b/src/pages/blog/responsible-stack.md
@ -1,184 +0,0 @@
 ---
 layout: ../../layouts/BlogLayout.astro
 title: The responsible tech stack
 description: tech stack
 pubDate: "2024-05-20"
 tags: ["tech stack"]
 image: 
    url: /img/blog/001_responsible/thumb.webp
    alt: Visual representation of the blog
    caption: ThePrimeagen & Theo, as depicted by the author.
 ---
 > TLDR: There's a theoretical "responsible" tech stack that would
 > ...
 At my first job I worked at a small shop, as "the computer guy". I did
 everything, from converting word files to `pdf`, to mantain 10 years old
 legacy PHP webpages, to implementing internal systems.
 I was the only IT guy, there were around 5-10 call center people and
 the boss only came like 3 times a week.
 After passing an easy interview, I found my predecessor (and their
 predecessors) were stuck in the 90s. Code was directly edited on the
 shared hosting, there was absolutely no version control, a bunch of
 `page final.php`, `page final2.php`, `page final final3.php` files were
 flying around, etc. A total mess.
 So, after collecting and moving around hardware I managed to assemble a
 little """server""" where I installed Ubuntu Server, set up RAID-5,
 SMB file sharing, Gitea for VCS, Jenkins for CI/CD, Docker, etc.
 Something closer to today's tech.
 And then the time came to implement my first internal system, which
 would remove a lot of administrative work that I had to do. This system
 would remain for whoever came after me, and they would have to maintain
 it.
 So, I began to think about what tech stack to use.
 ## A first approach
 The administrative work occupied around 90% of my time. I wasn't required
 to improve anything, making a system was my own initiative, to be less
 stressed and have more time to do actual dev things. So an idea I had
 at the time was to use whatever was the fastest way to start.
 Since it was to be deployed on an internal server, I could use (almost)
 any tech stack. I was only limited by a remote MySQL database. And since
 I was the only IT guy there, I could do whatever I wanted.
 I decided to use Node.js with Nest.js and Solid.js, as it was the
 tech I had used the most at the time. In a few days I had a small MVP,
 and as time passed I added more functionalities and logic.
 Eventually, I was able to automate almost all administrative work with
 my system. The system had a few bugs here and there, but since I made
 the thing, I knew exactly how to solve it.
 After some time, as I added more features and requirements changed,
 working with a SSR-JS-FE-Framework proved to be a pain. The code
 became a mess, it was hard to make changes and ensure that previous
 functionality didn't broke, and I may or may not have manually used
 bleeding edge Server Side Rendering not made for Nest.js.
 And then, I was told that there would be a new person on IT, part time,
 as business was growing. So, as the junior dev that I was, I decided
 that it was time to do a rewrite.
 ## Using what I knew & liked
 I had been learning Rust on my free time, and I fell in love with the
 language. It was (and still is) my favorite language, almost perfect,
 in my opinion. So when time for a rewrite came, I decided to evaluate
 what I knew & liked:
 - I learned Java at uni, but I didn't really like the verbosity.
 - I already used Node.js, it was a mess. And even with TypeScript,
    its not the same as a strongly typed language.
 - Python? Meh.
 - Rust... How about Rust...
 So, I did some research on Rust web frameworks. I explored Leptos,
 Dioxus, Rocket, Axum, raw html templates, even Tauri. In the end, I
 decided to rewrite the backend in Rust with Rocket, reuse the
 Solid.js frontend minus the SSR, and communicate between REST.
 It was a success. I was able to rewrite the backend quickly,
 errors went down to almost zero, it was **blazingly fast**, and I
 enjoyed developing the system. Perfect.
 ## A new system
 After learning of my successful implementation, my boss wanted me
 to develop a new internal system, this time to be used by the other
 staff at the company. So, I went back to the drawing board.
 But this time, there were some different circumstances. Mainly, that
 the requirements would change a lot during, and after development.
 And so my successors would have to constantly maintain and improve
 the system. So, what tech stack to use?
 At the time, I was being red-pilled by ThePrimeagen into using htmx.
 There was the possibility to use Rust as a full-stack language.
 However, how many people knew about Rust? And HTMX? If I used those,
 would the people after me be able to maintain (let alone improve)
 the system? Would me leaving lead to the demise of the company?
 Was I being too delusional?
 I began to think what would be the best course of action. At my
 university we all learned Java, and it along with C# was very common
 in my city. Node.js was beginning to pop up, and there was a lot
 of PHP. Really mid languages tbh.
 Frontend was all React or plain html. There was a little of Vue/Angular
 here and there. Tailwind was the new shiny thing (this is 2023).
 Some ex-classmates I asked didn't know there were things outside React.
 Like Solid, Svelte, Astro, etc. And they didn't know there were other
 programming languages. No one knew what Rust, or Go, or Elixir were.
 But I knew about these knew things. I had used them successfully, and
 they are better. So, I thought:
 I could use new tech, develop **blazingly fast** by myself, as fault-tolerant
 of a system as possible, such that the system would continue to work,
 and few changes would be required in the future. But, future workers
 would not be able to understand the system, and they would have to learn
 Rust & HTMX (which tbh I don't have a lot of faith people would be able to).
 Or, I could use whatever people use. Maybe some PHP with Laravel and React.
 Or even Java if I felt fancy. I would be misserable developing it,
 there would be many opportunities for bugs, and more maintenance would
 be required in the future. But, future workers would be able to do such
 tasks.
 ## The responsible stack
 So, **I** could be happy and **blazingly fast** and productive and efficient,
 and build a reliable piece of software that would have better chances to work
 correctly and reliably;
 but the company would have trouble hiring, new people would get in trouble
 because they have to learn Rust and HTMX before they could even read the code but
 the boss wants new features by yesterday, they might become frustrated and
 resign, etc, etc. Not very good looking forward.
 Or, I could be the adult, pick well established and understood technologies
 with a large talent pool, facilitate the future of the company in spite of
 (possibly) developing a worse product, and perpetuating the current system
 of **if it ain't broke don't fix it**, promoving inadequate technologies
 and ultimately, contributing to the users having a worse experience, such
 that future devs have a better experience.
 JUST USE REACT!! IT'S INDUSTRY STANDARD!!
 [\*\*cue in sad defeat music\*\*](https://www.youtube.com/watch?v=XdofmoYcJNE)
 ## !!!
 Alright, I've been thinking. When life gives you React, don't make a
 SPA, make life take the React back. Get mad! I don't want your damn
 React meta frameworks, what am I supposed to do with these?
 Demand to see life's manager! Make life rue the day it thought it could
 give ~~Cave Johnson~~ React.
 Do you know who I am? I'm the man who is going to BURN your house DOWN! With the
 React. I'm gonna get my engineers to invent a combustible RUST FRAMEWORK
 that BURNS your house DOWN!
 ---
 So I began working with Rust.
 A month later I was let go. Good luck Edith, I hope you like low level languages.
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -4,7 +4,7 @@ import Languages from "../components/index/Languages.astro";
 import Learning from "../components/index/Learning.astro";
 import Tools from "../components/index/Tools.astro";
 ---
-<!DOCTYPE html>
+
 <html lang="en">
    <head>
        <meta charset="utf-8" />
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@ -8,9 +8,6 @@ export default {
 				'c-on-bg': 'var(--c-on-bg)',
 				'c-bg-2': 'var(--c-bg-2)',
 			},
            fontFamily: {
                "etoile": ["'Iosevka Etoile Web'", "serif"],
            }
 		},
 	},
 	plugins: [