Compare commits
2 Commits
2ce75eadcd
...
e2cef6ba9e
| Author | SHA1 | Date | |
|---|---|---|---|
| e2cef6ba9e | |||
| 783aeb2399 |
BIN
public/IosevkaEtoile/Heavy.woff2
Normal file
BIN
public/IosevkaEtoile/Heavy.woff2
Normal file
Binary file not shown.
29
public/blog.css
Normal file
29
public/blog.css
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
@ -17,6 +17,15 @@
|
|||||||
src: url('/Iosevka/Bold.woff2') format('woff2');
|
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 {
|
:root {
|
||||||
--c-bg: #101010;
|
--c-bg: #101010;
|
||||||
--c-on-bg: #dedede;
|
--c-on-bg: #dedede;
|
||||||
|
|||||||
BIN
public/img/blog/001_responsible/thumb.webp
Normal file
BIN
public/img/blog/001_responsible/thumb.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
@ -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"
|
class="shadow-lg p-2 bg-c-bg-2 rounded-md max-w-[50rem] border border-slate-600 dark:border-transparent mb-2"
|
||||||
>
|
>
|
||||||
<h2
|
<h2
|
||||||
class="text-2xl font-bold bg-c-bg-2 py-2 pl-2 cursor-pointer hover:underline sticky top-0"
|
class="text-2xl font-bold bg-c-bg-2 py-2 pl-2 cursor-pointer hover:underline sticky top-0 font-etoile"
|
||||||
@click="open = !open"
|
@click="open = !open"
|
||||||
>
|
>
|
||||||
{title}
|
{title}
|
||||||
|
|||||||
@ -1,3 +1,8 @@
|
|||||||
|
---
|
||||||
|
const { frontmatter } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
@ -5,7 +10,8 @@
|
|||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<link rel="stylesheet" href="/global.css" />
|
<link rel="stylesheet" href="/global.css" />
|
||||||
<title>Fernando Araoz - Blog</title>
|
<link rel="stylesheet" href="/blog.css" />
|
||||||
|
<title>Blog - Fernando Araoz</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link
|
<link
|
||||||
@ -18,8 +24,59 @@
|
|||||||
href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css"
|
href="https://unpkg.com/@phosphor-icons/web@2.1.1/src/regular/style.css"
|
||||||
/>
|
/>
|
||||||
<script src="//unpkg.com/alpinejs" defer></script>
|
<script src="//unpkg.com/alpinejs" defer></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div id="blog" class="container mx-auto max-w-[1000px]">
|
||||||
|
<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 />
|
<slot />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="min-h-40"></div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
---
|
|
||||||
layout: ../../layouts/BlogLayout.astro
|
|
||||||
---
|
|
||||||
# First
|
|
||||||
|
|
||||||
The first page
|
|
||||||
|
|
||||||
@ -4,4 +4,18 @@ import BlogLayout from "../../layouts/BlogLayout.astro";
|
|||||||
|
|
||||||
<BlogLayout>
|
<BlogLayout>
|
||||||
<h1>Blog index, WIP</h1>
|
<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>
|
</BlogLayout>
|
||||||
|
|||||||
184
src/pages/blog/responsible-stack.md
Normal file
184
src/pages/blog/responsible-stack.md
Normal file
@ -0,0 +1,184 @@
|
|||||||
|
---
|
||||||
|
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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -4,7 +4,7 @@ import Languages from "../components/index/Languages.astro";
|
|||||||
import Learning from "../components/index/Learning.astro";
|
import Learning from "../components/index/Learning.astro";
|
||||||
import Tools from "../components/index/Tools.astro";
|
import Tools from "../components/index/Tools.astro";
|
||||||
---
|
---
|
||||||
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
|
|||||||
@ -8,6 +8,9 @@ export default {
|
|||||||
'c-on-bg': 'var(--c-on-bg)',
|
'c-on-bg': 'var(--c-on-bg)',
|
||||||
'c-bg-2': 'var(--c-bg-2)',
|
'c-bg-2': 'var(--c-bg-2)',
|
||||||
},
|
},
|
||||||
|
fontFamily: {
|
||||||
|
"etoile": ["'Iosevka Etoile Web'", "serif"],
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user