update everything
Bi-Rabittoh andronacomarco@gmail.com
Fri, 09 Apr 2021 14:29:31 +0200
15 files changed,
164 insertions(+),
95 deletions(-)
jump to
M
config.toml
→
config.toml
@@ -1,5 +1,5 @@
# primary config -base_url = "https://sbic.altervista.org" +base_url = "https://birabittoh.dev" title = "Bi-Rabittoh's Site" default_language = "en" minify_html = true
M
content/blog/_index.md
→
content/blog/_index.md
@@ -1,5 +1,5 @@
+++ -title = "My Blog" +title = "BiRabittoh's blog" sort_by = "date" template = "blog.html" page_template = "blog-page.html"
A
content/blog/modern-web-bloat.md
@@ -0,0 +1,113 @@
++++ +title = "Modern web bloat" +date = 2021-04-09 +[taxonomies] +category = ["tech"] +tags = ["tips", "vent"] ++++ + +This is it. My first blog post; I guess I just became a boomer. + +Inspiration +----------- + +Some time ago I stumbled upon [this video](https://odysee.com/@Luke:7/a-demonstration-of-modern-web-bloat:f), +where the popular Linux influencer [Luke Smith](https://lukesmith.xyz) +talked about the effort of looking up a Chicken Parmesan recipe in 2021 +without having any adblock or privacy extensions enabled. + +I decided to build this website on [`zola`](https://www.getzola.org/), +which is a modern engine for static sites! I was inspired by [lonami](https://lonami.dev/) +and I actually forked [his code](https://github.com/LonamiWebs/lonamiwebs.github.io) +to make [mine](https://github.com/Bi-Rabittoh/birabittoh.github.io). I +think our websites are a good example of how clean and fast a webpage +should be. + +Yeah, this looks like a first world problem and it probably is, but it's +not as subtle as you think. I'm actually convinced that the internet +*could* actually benefit from this way of thinking, and that's what I'm +going to talk about in this first article. + + + +The problem +----------- + +In the early days of the internet, it was common for webpages to be +written using only HTML, so we had very ugly but functional websites. + +As technology went on, sites needed to get more modern-looking and +_interactive_; that's why CSS and JavaScript were introduced into the +mix, allowing for dynamic websites that could actually change based +on user input. + +As of nowadays, a lot more stuff went into the mix, to the point where +the browser is now the most common program we use in our OS: you can, in +fact, use it for doing things that 15+ years ago required external +programs, like: + +* playing music and video, +* reading PDF files, +* doing office work, +* checking e-mail, +* cloud storage, +* etc... + +I guess people just find it more comfortable if they can do everything +with a single program, and they're not to blame for that. This _is_ +the easiest approach for unexperienced people: just have a program that +does everything, instead of having to learn how to use a bunch of +different software. + +This plethora of uses is possible today because of the existence of +various libraries and frameworks that simplify JavaScript and CSS and +make them easier to develop complicated websites with. +This is good for basic web users who just want functional websites, and +great for developers since they can easily code complicated code inside +the browser, making it the perfect cross-platform wet dream we all have. + +Sadly, this brings us to the problem: any modern website has become a +burden for any browser to load, since our browser needs to download and +parse through each library used and often fill the page contents as you +scroll through. +In his video, Luke Smith found that a simple Chicken Parmesan recipe +would take up to 5-10 megabytes, which doesn't sound like a lot, but it +actually is. + +It's easier to understand it if you think about it with video-games; +any game on 16-bit[^gaming-storage] consoles and earlier, including +full-fledged 30+ hour adventures like _Final Fantasy 6_ and _Chrono +Trigger_, weighs less than that one single recipe webpage. + + +The solution +-------- + +Well, I don't think this "problem" is getting solved soon, as new +frameworks for web development are constantly being introduced. Sadly, +it's a one-way train, but if you're a web-dev you could actually make a +difference yourself! + +I mean, this can not apply to all websites. Some of them just _NEED_ to +be as responsive and interactive as they are; most of them actually just +became bloated at a certain time period (probably mid-2000s) when having +a flashy website was cool and different from what everyone else had. + +Nowadays you can be different than other websites by using plain HTML +and CSS for your website: this ensures your pages will load instantly +and be compatible even with the oldest of browsers! + +If you like this philosophy, you can check out other projects that aim +for a simpler and faster web, like these: +* [based.cooking](https://based.cooking/), a modern recipe website based + on collaboration via GitHub; +* [wiby.me](https://wiby.me/), a search engine that aims to only index +classic style webpages. + +Footnotes +-------- + +[^gaming-storage]: As stated in [this article](https://blogs.umass.edu/Techbytes/2014/02/10/history-of-gaming-storage/#attachment_2827). + + +
M
deploy.sh
→
deploy.sh
@@ -6,7 +6,7 @@ git checkout gh-pages
# Forgetting to exclude `.git` has costed me several days worth of work and over 30 commits :))) find . -maxdepth 1 -not -name '.' -not -name '.git' -not -name 'public' -exec rm -r {} \; mv public/* . -echo "lonami.dev" > CNAME +echo "birabittoh.dev" > CNAME rmdir public/ git add . git commit -m "Deploy site"
M
static/style.css
→
static/style.css
@@ -45,7 +45,7 @@
nav.sections .left a { color: #666; border-bottom: solid 2px #A8A8A8; - padding: 0 16px; + padding: 0 16px 0 0; } nav.sections .left a.selected, nav.sections .left a:hover {@@ -94,7 +94,7 @@ font-size: 200%;
font-weight: lighter; text-transform: capitalize; padding-bottom: 10px; - border-bottom: 1px solid #000; + border-bottom: 1px solid #bcb6ae; text-align: center; }@@ -161,9 +161,7 @@ font-style: italic;
color: #bcb6ae; } -.footnote-definition:target { - background-color: rgba(255, 255, 0, 0.2); -} + dl img { margin-bottom: -0.4em;
M
templates/base.html
→
templates/base.html
@@ -9,9 +9,9 @@ <title>
{% block title %} BiRabittoh's {% if current_path == '/'%} - site + Site {% elif current_path is starting_with('/blog') %} - blog + Blog {% else %} Confused {% endif %}@@ -39,13 +39,12 @@ </main>
<footer> <div> <p> - Share your thoughts, or simply come hang with me - <a href="https://t.me/BiRabittoh"><img src="/img/telegram.svg" alt="Telegram" /></a> - <a href="mailto:andronacomarco@gmail.com"><img src="/img/mail.svg" alt="Mail" /></a> + Please use email for business inquiries + <a href="mailto:andronacomarco@gmail.com"><img src="/img/mail.svg" alt="mail" /></a> </p> </div> </footer> </article> - <p class="abyss">Glaze into the abyss… Oh hi there!</p> + <p class="abyss">owo what's this</p> </body> </html>
M
templates/blog-page.html
→
templates/blog-page.html
@@ -1,6 +1,6 @@
{% extends "base.html" %} -{% block title %}{{ page.title }} | Lonami's Blog{% endblock %} +{% block title %}{{ page.title }} | BiRabittoh's Blog{% endblock %} {% block content %} <h1 class="title">{{ page.title }}</h1>
M
templates/blog.html
→
templates/blog.html
@@ -1,10 +1,12 @@
{% extends "base.html" %} {% block content %} -<h1 class="title">{{ section.title }}</h1> +<h2 class="title">{{ section.title }}</h2> <p id="welcome" onclick="pls_stop()">Welcome to my blog!</p> -<p>Here I occasionally post new entries, mostly tech related. Perhaps it's tips for a new game I'm playing, perhaps it has something to do with FFI, or perhaps I'm fighting the borrow checker (just kidding, I'm over that. Mostly).</p> +<p>I will post about anything I find interesting or noteworthy, be it +related to irl stuff or the tech world. I hope someone can read this +and maybe find it inspiring? If you do, feel free to let me know.</p> <hr>@@ -22,7 +24,7 @@
<script> const WELCOME_EN = 'Welcome to my blog!' const WELCOME_IT = 'Benvenuto al mio blog!' - const APOLOGIES = "ok sorry i'll stop" + const APOLOGIES = "sorry i'll stop" const REWRITE_DELAY = 5000 const CHAR_DELAY = 30 const welcome = document.getElementById('welcome')
M
templates/index.html
→
templates/index.html
@@ -1,104 +1,62 @@
{% extends "base.html" %} -{% block css %} -{{ super() }} -<!-- -<style> -.golb { - transform: scaleY(-1); - transition: transform 300ms; -} - -.golb:hover { - transform: scaleY(1); -} -</style> ---> -{% endblock %} - {% block content %} <h1>BiRabittoh's Site</h1> -<p>Welcome to my personal website!</p> +<p>Welcome to my personal website and blog! I'll try to post here +about whatever comes across my mind in a specific moment, so that +people may read it when I become famous in 80+ years or so.</p> <h2 id="about">About me</h2> <p>Italian male <span id="age"><noscript>born in 1998</noscript></span>. I have been programming -<span id="programming"><noscript>since 2015</noscript></span> -and it is my passion.</p> +<span id="programming"><noscript>since 2016</noscript></span> +and I love it.</p> -<p>I enjoy nature, taking pictures, playing video-games, -drawing vector graphics, or just chatting online.</p> +<p>I enjoy art in every form, including video-games, as well as +every kind of humor. I usually hang around on Discord while +programming stuff I'll probably never actually get finished.</p> -<p>I can speak perfect Italian, read and write perfect English -and Python, and have programmed in C#, Java, JavaScript, Rust, -some C and C++, and designed pages like this with plain HTML -and CSS.</p> +<p>While Italian is my main language, I can read and write perfect +English. I'm a fast learner on any kind of programming language as long +as it follows human logic.</p> -<p>On the Internet I'm often known as BiRabittoh, but my -real name is Marco.</p> +<p>BiRabittoh comes from the japanese pronunciation of "B-Rabbit", as +said in +<i><a href="https://en.wikipedia.org/wiki/Pandora_Hearts">Pandora Hearts</a></i>, +which was the first anime I watched on the internet.</p> -<h2 id="projects">Project highlights</h2> +<h2 id="projects">Project contributions</h2> <ul> <li> -<a href="https://github.com/LonamiWebs/Telethon/">Telethon</a>: -Python implementation of the Telegram's API. +<a href="https://github.com/Render96/Render96ex">Render96ex</a>: +writing a translation for this <i>Super Mario 64</i> port. </li> <li> -<a href="klooni">1010! Klooni</a>: libGDX simple puzzle -game based on the original <i>1010!</i>. +<a href="https://github.com/nxengine/nxengine-evo">nxengine-evo</a>: +fixing the italian translation for <i>Cave Story</i>. </li> + <li> -<a href="https://github.com/LonamiWebs/Stringlate/">Stringlate</a>: -Android application that makes it easy to translate other FOSS apps. +<a href="#">URhythm</a>: +??? </li> </ul> -<p>These are only my <i>Top 3</i> projects, the ones I consider to be -the most successful. If you're curious about what else I've done, feel -free to check out my -<a href="https://github.com/LonamiWebs/">GitHub</a>.</p> - -<h2 id="more-links">More links</h2> -<dl> - <dt><a href="https://t.me/LonamiWebs"><img src="/img/telegram.svg" alt="" /> My Telegram</a></dt> - <dd>Come meet me at my group in Telegram and talk about anything!</dd> - - <dt><a href="/blog"><img src="/img/blog.svg" alt="" /> My blog</a></dt> - <dd>Sometimes I blog about things, whether it's games, techy stuff, or random life stuff.</dd> - - <dt><a href="/golb"><img src="/img/blog.svg" class="golb" alt="" /> My golb</a></dt> - <dd>What? You don't know what a golb is? It's like a blog, but less conventional.</dd> - - <dt><a href="https://github.com/LonamiWebs"><img src="/img/github.svg" alt="" /> My GitHub</a></dt> - <dd>By far what I'm most proud of. I love releasing my projects as open source. There is no reason not to!</dd> - - <dt><a href="/utils"><img src="/img/utils.svg" alt="" /> Several Utilities</a></dt> - <dd>Random things I've put online because I keep forgetting about them.</dd> - - <dt><a href="/stopwatch.html"><img src="/stopwatch.svg" width="24" height="24" alt="" /> stopwatch</a></dt> - <dd>An extremely simple JavaScript-based stopwatch.</dd> - - <dt><a href="donate"><img src="/img/bitcoin.svg" alt="" /> Donate</a></dt> - <dd>Some people like what I do and want to compensate me for it, but I'm fine with compliments if you can't afford a donation!</dd> - - <dt><a href="humans.txt"><img src="/img/humans.svg" alt="" /> humans.txt</a></dt> - <dd><a href="http://humanstxt.org/">We are humans, not robots.</a></dd> -</dl> +<p>If you're curious about my other projects, feel free to check out my +<a href="https://github.com/Bi-Rabittoh">GitHub</a>.</p> <h2 id="contact">Contact</h2> -<p>If you use Telegram you can join -<a href="https://t.me/LonamiWebs">@LonamiWebs</a> -and just chat about any topics you like politely.</p> +<p>If you use Discord you can add me +(<a href="https://discordapp.com/users/132123740724002816/">Bi-Rabittoh#5566</a>) +and chat about anything.</p> -<p>If you prefer, you can also send me a private email to -<a href="mailto:totufals@hotmail.com">totufals[at]hotmail[dot]com</a> -and I will try to reply as soon as I can. Please don't use the email -if you need help with a specific project, this is better discussed in -the group where everyone can benefit from it.</p> +<p>You can also send me an email to +<a href="mailto:andronacomarco@gmail.com">andronacomarco@gmail.com</a> +and I will try to reply as soon as I can.</p> <script type="text/javascript"> now = (new Date()).getFullYear(); document.getElementById("age").innerHTML = "aged " + (now - 1999); - document.getElementById("programming").innerHTML = "for " + (now - 2015) + " years"; + document.getElementById("programming").innerHTML = "for " + (now - 2016) + " years"; </script> {% endblock %}