Transfer to git
This commit is contained in:
168
pages/articles/about-host_en.html
Normal file
168
pages/articles/about-host_en.html
Normal file
@@ -0,0 +1,168 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | About this hosting</title>
|
||||
<link rel="stylesheet" href="../../css/articles/about-host/about-host.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<div class="logo">
|
||||
<img src="../../img/logo/logo_smth.png" alt="">
|
||||
<a href="../../main_en.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="../articles/about_en.html">About me</a></b>
|
||||
</div>
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lang-picker panel">
|
||||
<b><a href="../articles/about-host_es.html">Español</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="panel">
|
||||
<p>
|
||||
Hello, <br><br>
|
||||
|
||||
You clicking this article means you have an interest on how this
|
||||
website is structured, and what infrastructure it runs in.
|
||||
I've gotta say this will probably change over time, but there is one
|
||||
aspect I will adhere to, mantaining custody over my own data, in practice
|
||||
that means everything I host will be hosted on-site on my own infrastructure,
|
||||
just below a little about the <i>homelab's</i> history and some details.<br>
|
||||
</p>
|
||||
<h3>Specs</h3>
|
||||
<div class="specs panel">
|
||||
<p>
|
||||
CPU: AMD Ryzen 5 4600G <br>
|
||||
RAM: 32GB DDR4 3200MHZ <br>
|
||||
Motherboard: ASRock A320M-HDV 4.0 <br>
|
||||
PSU: EVGA 450W 80plus <br>
|
||||
Storage: <br>
|
||||
<span class="li">x1 1TB SSD NVME Samsung 970 Plus</span>
|
||||
<span class="li">x2 3TB HDD WD Green (RAID 1)</span>
|
||||
Case: No-name brand,
|
||||
quite square-ish.<br>
|
||||
</p>
|
||||
</div>
|
||||
<h3>History</h3>
|
||||
<p>
|
||||
Each one of the components has a different origin, the case, psu and motherboard
|
||||
have always been the same since the begining, part of the original PC I got as
|
||||
a birthday present a while back, it was equiped with 8gb of ram, a modest HDD,
|
||||
together with an AMD Ryzen 3 3200G, it was enough back then, but just as it came,
|
||||
I got myself a brand new laptop, somewhat comparable (or even better) to the pc,
|
||||
I ended up using it way more, thanks to it being portable.
|
||||
</p>
|
||||
<p>
|
||||
After some time, can't quite remember the reason, I took the decision to move it to its
|
||||
current location, a secure place with a good broadband connection, this was all the way
|
||||
back at the start of 2022, when I installed Ubuntu Server 22.04 LTS.
|
||||
</p>
|
||||
<p>
|
||||
I graudually updated it, I got the current proccesor over on amazon, then the ram
|
||||
(attempted to purchase it from Aliexpress, but once it arrived I discovered it
|
||||
wasn't compatible, had to re-sell it, and buy my current 2x16gb kit), and last but
|
||||
not least, two 3tb disks which I thought was plenty for my usecase (foreshadowing).
|
||||
</p>
|
||||
<p>
|
||||
I currently still have the same Ubuntu Server install on bare hardware, and almost
|
||||
every single service I host is using a docker container, managed using Portainer.
|
||||
</p>
|
||||
<h3>Networking</h3>
|
||||
<h4>Domain name</h4>
|
||||
<p>
|
||||
I've used several domain names over time, starting with No-IP to ssh remotely, rapidely migrating
|
||||
to DuckDNS, that setup endured quite a while but after having some problems with DNS resolution, and
|
||||
limitations on their DNS capabilities (they used AWS) thanks to my sub-domain repertoire I
|
||||
decided to finally make the leap and purchase my own domain on some of the internet's registrars,
|
||||
ended up with this domain on Porkbun, for a measly 5 dollars and a half, a lot /s.
|
||||
</p>
|
||||
<h4>Proxy & DDNS</h4>
|
||||
<p>
|
||||
I use NginxProxyManager to manage all my domains and redirects, I don't plan on migrating to
|
||||
Traefik for now because NPM does the job, and increasing my infrastructure's complexity isn't my
|
||||
number one priority, maybe in the future. For Dynamic DNS I use DDClient, my ISP (Antel) doesn't
|
||||
provide static IPs to residential addresses, so I'm stuck having to update my registers once or
|
||||
twice a day in-leiu of having a fixed one.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
172
pages/articles/about-host_es.html
Normal file
172
pages/articles/about-host_es.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | About this hosting</title>
|
||||
<link rel="stylesheet" href="../../css/articles/about-host/about-host.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<div class="logo">
|
||||
<img src="../../img/logo/logo_smth.png" alt="">
|
||||
<a href="../../main_es.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="../articles/about_es.html">Sobre mí</a></b>
|
||||
</div>
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lang-picker panel">
|
||||
<b><a href="../articles/about-host_en.html">English</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="panel">
|
||||
<p>
|
||||
Buenas, <br><br>
|
||||
|
||||
Si estás leyendo esto es que te interesa saber un poco sobre la estructura
|
||||
en la que están hosteados mis servicios, y esta página.
|
||||
He de decir que esto irá cambiando, pero si hay algo que no creo cambie
|
||||
será el hecho de que quiero mantener la custodia de mis datos, por lo que
|
||||
todos lo que hostee será hosteado en mi propio <i>homelab</i>, debajo detalles e historia.<br>
|
||||
</p>
|
||||
<h3>Especificaciones</h3>
|
||||
<div class="specs panel">
|
||||
<p>
|
||||
Procesador: AMD Ryzen 5 4600G <br>
|
||||
RAM: 32GB DDR4 3200MHZ <br>
|
||||
Placa: ASRock A320M-HDV 4.0 <br>
|
||||
PSU: EVGA 450W 80plus <br>
|
||||
Almacenamiento: <br>
|
||||
<span class="li">x1 1TB SSD NVME Samsung 970 Plus</span>
|
||||
<span class="li">x2 3TB HDD WD Green (RAID 1)</span>
|
||||
Gabinete: Marca genérica, <br>
|
||||
es bastante cuadrado.
|
||||
</p>
|
||||
</div>
|
||||
<h3>Historia</h3>
|
||||
<p>
|
||||
Cada componente tiene una historia un poquito diferente, el gabinete,
|
||||
fuente y placa madre han sido la misma, y fueron un regalo de cumpleaños
|
||||
de hace tiempo, en su momento con 8gb de ram, un disco HDD modesto, y
|
||||
un AMD Ryzen 3 3200G, en su momento era algo, mas justo coincidió que
|
||||
en esa ocasión, había recibido una laptop, a la cual le terminé dando
|
||||
muchísimo más uso que a la torre, sumado al hecho de poderla transportarla
|
||||
que personalmente me fue un gran plus.
|
||||
</p>
|
||||
<p>
|
||||
Tiempo después, ya no recuerdo bien en qué contexto, decido llevarla al
|
||||
lugar dónde ahora se encuentra, dónde estaba segura y con una buena conexión
|
||||
de fibra óptica, esto fue por 2022, cuándo le instalé Ubuntu Server 22.04 LTS.
|
||||
</p>
|
||||
<p>
|
||||
Gradualmente la fui mejorando, le compré su procesador actual por internet, luego
|
||||
la memoria ram (intenté comprarla por Aliexpress, pero resultaba era incompatible,
|
||||
por lo que tuve que revenderla, y comprarme los dos sticks de 16gb que tengo ahora),
|
||||
y por último la decisión de comprar dos discos de 3tb para tener almacenamiento de
|
||||
sobra (que resulta no lo fue) para lo que quisiese.
|
||||
</p>
|
||||
<p>
|
||||
Actualmente sigo teniendo instalado el Ubuntu directo sobre el hardware, y casi todo
|
||||
lo que tengo instalado allí lo manejo usando Docker a través de Portainer.
|
||||
</p>
|
||||
<h3>Red</h3>
|
||||
<h4>Dominio</h4>
|
||||
<p>
|
||||
He usado varios dominios, al principio llegué a usar No-IP para conectarme remotamente,
|
||||
para luego rápidamente migrar a DuckDNS, que me supo proveer de dominios gratuitos por varios años,
|
||||
sin embargo, luego de toparme con las limitaciones de su servicio (por la cantidad de sub-dominios,
|
||||
y debido a su dependendencia en servidores de no tan buena calidad de AWS) decidí invertir y
|
||||
comprarme el dominio que estoy usando actualmente, con el registrante de Porkbun, que
|
||||
debo decir fue muy económico, actualmente pago unos 5 dólares y medios al año, básicamente nada.
|
||||
</p>
|
||||
<h4>Proxy y DDNS</h4>
|
||||
<p>
|
||||
Para manejar los dominios y redirecciones he usado y seguiré usando NginxProxyManager, por ahora
|
||||
no tengo planeado migrar a Traefik puesto que no está dentro de mis prioridades añadir
|
||||
esa complejidad a mi setup (aunque quizás en un futuro lo haga). Uso DDClient para el DNS dinámico
|
||||
puesto que mi ISP (Antel) no provee IP fijas a planes residenciales, y necesito actualizar los
|
||||
registros con mi IP cada vez que esta cambia.
|
||||
</p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
104
pages/articles/about_en.html
Normal file
104
pages/articles/about_en.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | About me</title>
|
||||
<link rel="stylesheet" href="../../css/articles/about/about.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<div class="logo">
|
||||
<img src="../../img/logo/logo_smth.png" alt="">
|
||||
<a href="../../main_en.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="../articles/about_en.html">About me</a></b>
|
||||
</div>
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lang-picker panel">
|
||||
<b><a href="../articles/about_es.html">Español</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="panel">
|
||||
Still under construction.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
104
pages/articles/about_es.html
Normal file
104
pages/articles/about_es.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | Sobre mí</title>
|
||||
<link rel="stylesheet" href="../../css/articles/about/about.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<div class="logo">
|
||||
<img src="../../img/logo/logo_smth.png" alt="">
|
||||
<a href="../../main_es.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="../articles/about_es.html">Sobre mí</a></b>
|
||||
</div>
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lang-picker panel">
|
||||
<b><a href="../articles/about_en.html">English</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="panel">
|
||||
Todavía en progreso.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
169
pages/articles/article-blank_en.html
Normal file
169
pages/articles/article-blank_en.html
Normal file
@@ -0,0 +1,169 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | [REPLACE]</title>
|
||||
<link rel="stylesheet" href="../../css/articles/[REPLACE]/[REPLACE].css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<div class="logo">
|
||||
<img src="../../img/logo/logo_smth.png" alt="">
|
||||
<a href="../../main_en.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="../articles/about_en.html">About me</a></b>
|
||||
</div>
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lang-picker panel">
|
||||
<b><a href="../articles/article-blank_es.html">Español</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="panel">
|
||||
<p>
|
||||
Hello, <br><br>
|
||||
|
||||
You clicking this article means you have an interest on how this
|
||||
website is structured, and what infrastructure it runs in.
|
||||
I've gotta say this will probably change over time, but there is one
|
||||
aspect I will adhere to, mantaining custody over my own data, in practice
|
||||
that means everything I host will be hosted on-site on my own infrastructure,
|
||||
just below a little about the <i>homelab's</i> history and some details.<br>
|
||||
</p>
|
||||
<h3>Specs</h3>
|
||||
<div class="specs panel">
|
||||
<p>
|
||||
CPU: AMD Ryzen 5 4600G <br>
|
||||
RAM: 32GB DDR4 3200MHZ <br>
|
||||
Motherboard: ASRock A320M-HDV 4.0 <br>
|
||||
PSU: EVGA 450W 80plus <br>
|
||||
Storage: <br>
|
||||
<span class="li">x1 1TB SSD NVME Samsung 970 Plus</span>
|
||||
<span class="li">x2 3TB HDD WD Green (RAID 1)</span>
|
||||
Case: No-name brand,
|
||||
quite square-ish.<br>
|
||||
</p>
|
||||
</div>
|
||||
<h3>History</h3>
|
||||
<p>
|
||||
Each one of the components has a different origin, the case, psu and motherboard
|
||||
have always been the same since the begining, part of the original PC I got as
|
||||
a birthday present a while back, it was equiped with 8gb of ram, a modest HDD,
|
||||
together with an AMD Ryzen 3 3200G, it was enough back then, but just as it came,
|
||||
I got myself a brand new laptop, somewhat comparable (or even better) to the pc,
|
||||
I ended up using it way more, thanks to it being portable.
|
||||
</p>
|
||||
<p>
|
||||
After some time, can't quite remember the reason, I took the decision to move it to its
|
||||
current location, a secure place with a good broadband connection, this was all the way
|
||||
back at the start of 2022, when I installed Ubuntu Server 22.04 LTS.
|
||||
</p>
|
||||
<p>
|
||||
I graudually updated it, I got the current proccesor over on amazon, then the ram
|
||||
(attempted to purchase it from Aliexpress, but once it arrived I discovered it
|
||||
wasn't compatible, had to re-sell it, and buy my current 2x16gb kit), and last but
|
||||
not least, two 3tb disks which I thought was plenty for my usecase (foreshadowing).
|
||||
</p>
|
||||
<p>
|
||||
I currently still have the same Ubuntu Server install on bare hardware, and almost
|
||||
every single service I host is using a docker container, managed using Portainer.
|
||||
</p>
|
||||
<h3>Networking</h3>
|
||||
<h4>Domain name</h4>
|
||||
<p>
|
||||
I've used several domain names over time, starting with No-IP to ssh remotely, rapidely migrating
|
||||
to DuckDNS, that setup endured quite a while but after having some problems with DNS resolution, and
|
||||
limitations on their DNS capabilities (they used AWS) thanks to my sub-domain repertoire I
|
||||
decided to finally make the leap and purchase my own domain on some of the internet's registrars,
|
||||
ended up with this domain on Porkbun, for a measly 5 dollars and a half, a lot /s.
|
||||
</p>
|
||||
<h4>Proxy & DDNS</h4>
|
||||
<p>
|
||||
I use NginxProxyManager to manage all my domains and redirects, I don't plan on migrating to
|
||||
Traefik for now because NPM does the job, and increasing my infrastructure's complexity isn't my
|
||||
number one priority, maybe in the future. For Dynamic DNS I use DDClient, my ISP (Antel) doesn't
|
||||
provide static IPs to residential addresses, so I'm stuck having to update my registers once or
|
||||
twice a day in-leiu of having a fixed one.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
104
pages/articles/article-blank_es.html
Normal file
104
pages/articles/article-blank_es.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | [REPLACE]</title>
|
||||
<link rel="stylesheet" href="../../css/articles/[REPLACE]/[REPLACE].css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<div class="logo">
|
||||
<img src="../../img/logo/logo_smth.png" alt="">
|
||||
<a href="../../main_es.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="../articles/about_es.html">About me</a></b>
|
||||
</div>
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lang-picker panel">
|
||||
<b><a href="../articles/article-blank_en.html">English</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div class="panel">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
178
pages/articles/diy-calculator_en.html
Normal file
178
pages/articles/diy-calculator_en.html
Normal file
@@ -0,0 +1,178 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | Calculator</title>
|
||||
<link rel="stylesheet" href="../../css/articles/diy-calculator/diy-calculator.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
<script src="../../js/articles/diy-calculator/calc.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<div class="logo">
|
||||
<img src="../../img/logo/logo_smth.png" alt="">
|
||||
<a href="../../main_en.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="../articles/about_en.html">About me</a></b>
|
||||
</div>
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lang-picker panel">
|
||||
<b><a href="../articles/diy-calculator_es.html">Español</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div>
|
||||
<div class="calc panel">
|
||||
<h1>Calculator</h1>
|
||||
<div class="viewing panel">
|
||||
<span id="output"></span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button onclick="q_manage('add',1)">1</button>
|
||||
<button onclick="q_manage('add',2)">2</button>
|
||||
<button onclick="q_manage('add',3)">3</button>
|
||||
<button onclick="q_manage('add','+')">+</button>
|
||||
<button onclick="q_manage('add',4)">4</button>
|
||||
<button onclick="q_manage('add',5)">5</button>
|
||||
<button onclick="q_manage('add',6)">6</button>
|
||||
<button onclick="q_manage('add','-')">-</button>
|
||||
<button onclick="q_manage('add',7)">7</button>
|
||||
<button onclick="q_manage('add',8)">8</button>
|
||||
<button onclick="q_manage('add',9)">9</button>
|
||||
<button onclick="q_manage('add','*')">*</button>
|
||||
<button onclick="">(</button>
|
||||
<button onclick="q_manage('add',0)">0</button>
|
||||
<button onclick="">)</button>
|
||||
<button onclick="q_manage('add','/')">/</button>
|
||||
<button onclick="q_manage('remove')"><</button>
|
||||
<button onclick="q_manage('add','^')">^</button>
|
||||
<button onclick="q_execute('add','=')" id="equal">=</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info panel">
|
||||
<h1>About this project</h1>
|
||||
<p>
|
||||
It has certainly been a while since I've touched Javascript,
|
||||
and I wanted to regain some of the know-how I had about it,
|
||||
that's why decided to code this calculator from scratch
|
||||
without using any external libraries, nor chatbots, only
|
||||
wikis like w3 school about the language itself even if
|
||||
that required more time.
|
||||
</p>
|
||||
<p>
|
||||
So it began my learning journey, coding this entire calculator
|
||||
has been quite a joy I must say, and even if the final product
|
||||
is lacking some funcionality like parenthesis parsing it still
|
||||
works completely fine for most things, as it process inputs using
|
||||
PEMDAS.
|
||||
</p>
|
||||
<p>
|
||||
Were I to make it all over again, I would probably go about
|
||||
things differently, researching about more efficient algorithms
|
||||
and methods and not reinventing the wheel, but the thing is,
|
||||
that's the entire point of this excersice, wasn't for that
|
||||
self-impossed limitation, I could make use of tons of more
|
||||
efficient libraries.
|
||||
</p>
|
||||
<p>
|
||||
Now about the inner workings of the script, I implemented a
|
||||
simple array that stores every character typed, and once the
|
||||
equal key is pressed, it sends the array to be processed in
|
||||
the following steps:
|
||||
<span class="li">Concatenate the digits, from [1,1,'+',2,3] to [11,'+',23].</span>
|
||||
<span class="li">Search for term separators, and create multidimensional arrays with
|
||||
each level representing one type of operation.
|
||||
</span>
|
||||
<span class="li">Undo all this array but backwards, processing the output as it goes.
|
||||
</span>
|
||||
It looks easy on paper, but I spent an entire day and a half coding and dealing with
|
||||
each aspect of programming, things I didn't quite remember, others I didn't know from
|
||||
the get-go, etc. (I must add a personal rant about how difficult is dealing with
|
||||
multidimensional arrays, it's not a trivial task for sure).
|
||||
</p>
|
||||
<p>
|
||||
Update 23/01/2026 <br>
|
||||
I showed my calculator to a friend of mine and they
|
||||
pointed out I was lacking a 0 button, how could I miss
|
||||
that, seriously XD.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
175
pages/articles/diy-calculator_es.html
Normal file
175
pages/articles/diy-calculator_es.html
Normal file
@@ -0,0 +1,175 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75">
|
||||
<title>masiv's lair | Calculadora</title>
|
||||
<link rel="stylesheet" href="../../css/articles/diy-calculator/diy-calculator.css">
|
||||
<link rel="icon" href="../../img/favicon/favicon-lair.png">
|
||||
<script src="../../js/articles/diy-calculator/calc.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar top blank"></div>
|
||||
<div class="navbar top">
|
||||
<div class="logo">
|
||||
<img src="../../img/logo/logo_smth.png" alt="">
|
||||
<a href="../../main_es.html" class="logo-text">masiv's lair</a>
|
||||
</div>
|
||||
<div class="about panel">
|
||||
<b><a href="../articles/about_es.html">Sobre mí</a></b>
|
||||
</div>
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lang-picker panel">
|
||||
<b><a href="../articles/diy-calculator_es.html">Español</a></b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div class="primary">
|
||||
<div>
|
||||
<div class="calc panel">
|
||||
<h1>Calculadora</h1>
|
||||
<div class="viewing panel">
|
||||
<span id="output"></span>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button onclick="q_manage('add',1)">1</button>
|
||||
<button onclick="q_manage('add',2)">2</button>
|
||||
<button onclick="q_manage('add',3)">3</button>
|
||||
<button onclick="q_manage('add','+')">+</button>
|
||||
<button onclick="q_manage('add',4)">4</button>
|
||||
<button onclick="q_manage('add',5)">5</button>
|
||||
<button onclick="q_manage('add',6)">6</button>
|
||||
<button onclick="q_manage('add','-')">-</button>
|
||||
<button onclick="q_manage('add',7)">7</button>
|
||||
<button onclick="q_manage('add',8)">8</button>
|
||||
<button onclick="q_manage('add',9)">9</button>
|
||||
<button onclick="q_manage('add','*')">*</button>
|
||||
<button onclick="">(</button>
|
||||
<button onclick="q_manage('add',0)">0</button>
|
||||
<button onclick="">)</button>
|
||||
<button onclick="q_manage('add','/')">/</button>
|
||||
<button onclick="q_manage('remove')"><</button>
|
||||
<button onclick="q_manage('add','^')">^</button>
|
||||
<button onclick="q_execute('add','=')" id="equal">=</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info panel">
|
||||
<h1>Sobre este projecto</h1>
|
||||
<p>
|
||||
Hace tiempo que no programaba en Javascript, y quería
|
||||
nuevamente agarrarle la mano, por lo que decidí hacer esta
|
||||
calculadora sin hacer uso de absolutamente nada más que
|
||||
w3 school y algunas búsquedas sobre javascript, nada de
|
||||
preguntar mis dudas a ninguna IA (aunque sea más lento).
|
||||
</p>
|
||||
<p>
|
||||
Así que me puse manos a la obra re-aprendiendo algunas cosas,
|
||||
he de decir que fue un ejercicio divertido, y aunque el
|
||||
resultado carece de algunas características (cómo el uso
|
||||
de paréntesis), sigue el orden de las operaciones, y eso
|
||||
es bastante.
|
||||
</p>
|
||||
<p>
|
||||
En un futuro si la hiciese nuevamente, podría implementar
|
||||
algoritmos más eficientes, puesto que realmente lo hice de
|
||||
la manera que se me fue ocurriendo, y realmente debe ser muy
|
||||
ineficiente, si quisiese eficiencia tendría mil maneras y
|
||||
librerías, pero el objetivo de este ejercicio es aprender.
|
||||
</p>
|
||||
<p>
|
||||
Yendo un poco más a lo técnico, mi idea principal fue almacenar
|
||||
cada caracter escrito en un array, y luego procesarlo de la
|
||||
siguiente manera:
|
||||
<span class="li">Unir los números, de [1,1,'+',2,3] a [11,'+',23].</span>
|
||||
<span class="li">Buscar dónde están los separa términos, e ir creando arrays
|
||||
multidimensionales, cada nivel tiene un tipo de operación (on orden).
|
||||
</span>
|
||||
<span class="li">Deshacer ese array multidimensional, e ir procesando
|
||||
todas las operaciones.
|
||||
</span>
|
||||
Dicho así parece sencillo, pero esutve un día y medio programando y lidiando
|
||||
con cosas que, o no sabía, o no recordaba. (He de decir que trabajar con tanta iteración
|
||||
en los arrays multidimensionales es un trabajo no trivial).
|
||||
</p>
|
||||
<p>
|
||||
Actualización 23/01/2026 <br>
|
||||
Le mostré la calcualdora a unx amigx, y me hizo darme
|
||||
cuenta de que no había implementado el botón del 0,
|
||||
la verdad no tengo ni idea cómo no me di cuenta XD.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar bot blank"></div>
|
||||
<div class="navbar bot">
|
||||
<div class="links">
|
||||
<div class="social-media github">
|
||||
<img src="../../img/icons/github.png" alt="">
|
||||
<a href="https://github.com/masiv1001" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media instagram">
|
||||
<img src="../../img/icons/instagram.png" alt="">
|
||||
<a href="https://instagram.com/sietezip/" target="_blank">sietezip</a>
|
||||
</div>
|
||||
<div class="social-media pixelfed">
|
||||
<img src="../../img/icons/pixelfed.png" alt="">
|
||||
<a href="https://pixelfed.social/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media twitter">
|
||||
<img src="../../img/icons/twitter.png" alt="">
|
||||
<a href="https://twitter.com/_visam/" target="_blank">_visam</a>
|
||||
</div>
|
||||
<div class="social-media reddit">
|
||||
<img src="../../img/icons/reddit.png" alt="">
|
||||
<a href="https://www.reddit.com/user/masiv_o/" target="_blank">masiv_o</a>
|
||||
</div>
|
||||
<div class="social-media steam">
|
||||
<img src="../../img/icons/steam.png" alt="">
|
||||
<a href="https://steamcommunity.com/id/masiv1001/" target="_blank">masiv1001</a>
|
||||
</div>
|
||||
<div class="social-media osu">
|
||||
<img src="../../img/icons/osu.png" alt="">
|
||||
<a href="https://osu.ppy.sh/users/19273464/" target="_blank">masiv_</a>
|
||||
</div>
|
||||
<div class="social-media mail last">
|
||||
<img src="../../img/icons/mail.png" alt="">
|
||||
<a href="mailto:masiv_@ethernal.win" target="_blank">masiv_ @ethernal.win</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user