by roundabout, Tuesday, 7 May 2024, 08:55:53 (1715072153), pushed by roundabout, Wednesday, 10 July 2024, 16:59:59 (1720630799)
Author identity: vlad <vlad.muntoiu@gmail.com>
ab0475bb250a795d3a8b441d32f4162198f4102c
.idea/workspace.xml
@@ -4,8 +4,9 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="b2c629ea-d173-4caf-b306-cbeaee617270" name="Changes" comment="Index page">
<change beforePath="$PROJECT_DIR$/projects/ampoule.md" beforeDir="false" afterPath="$PROJECT_DIR$/projects/ampoule.md" afterDir="false" />
<list default="true" id="b2c629ea-d173-4caf-b306-cbeaee617270" name="Changes" comment="Responsive index page">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/articles/Moved to a roundabout.md" beforeDir="false" afterPath="$PROJECT_DIR$/articles/Moved to a roundabout.md" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -29,7 +30,9 @@
"Python.main.executor": "Run",
"RunOnceActivity.ShowReadmeOnStart": "true",
"git-widget-placeholder": "master",
"last_opened_file_path": "/home/vlad/blog/static/photos"
"last_opened_file_path": "/home/vlad/blog/static/photos",
"nodejs_package_manager_path": "npm",
"vue.rearranger.settings.migration": "true"
}
}</component>
<component name="RecentsManager">
@@ -58,6 +61,7 @@
<option name="IS_MODULE_SDK" value="true" />
<option name="ADD_CONTENT_ROOTS" value="true" />
<option name="ADD_SOURCE_ROOTS" value="true" />
<EXTENSION ID="PythonCoverageRunConfigurationExtension" runner="coverage.py" />
<option name="SCRIPT_NAME" value="$PROJECT_DIR$/main.py" />
<option name="PARAMETERS" value="" />
<option name="SHOW_COMMAND_LINE" value="false" />
@@ -71,7 +75,7 @@
<component name="SharedIndexes">
<attachedChunks>
<set>
<option value="bundled-python-sdk-0509580d9d50-746f403e7f0c-com.jetbrains.pycharm.community.sharedIndexes.bundled-PC-241.14494.241" />
<option value="bundled-python-sdk-babbdf50b680-746f403e7f0c-com.jetbrains.pycharm.community.sharedIndexes.bundled-PC-241.15989.155" />
</set>
</attachedChunks>
</component>
@@ -83,6 +87,7 @@
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1713536817770</updated>
<workItem from="1714414389204" duration="5000" />
</task>
<task id="LOCAL-00001" summary="Blog">
<option name="closed" value="true" />
@@ -228,7 +233,23 @@
<option name="project" value="LOCAL" />
<updated>1714393092467</updated>
</task>
<option name="localTasksCounter" value="19" />
<task id="LOCAL-00019" summary="Update ampoule example">
<option name="closed" value="true" />
<created>1714399758220</created>
<option name="number" value="00019" />
<option name="presentableId" value="LOCAL-00019" />
<option name="project" value="LOCAL" />
<updated>1714399758220</updated>
</task>
<task id="LOCAL-00020" summary="Responsive index page">
<option name="closed" value="true" />
<created>1714402578242</created>
<option name="number" value="00020" />
<option name="presentableId" value="LOCAL-00020" />
<option name="project" value="LOCAL" />
<updated>1714402578242</updated>
</task>
<option name="localTasksCounter" value="21" />
<servers />
</component>
<component name="Vcs.Log.Tabs.Properties">
@@ -260,6 +281,8 @@
<MESSAGE value="Build in another worktree" />
<MESSAGE value="More" />
<MESSAGE value="Index page" />
<option name="LAST_COMMIT_MESSAGE" value="Index page" />
<MESSAGE value="Update ampoule example" />
<MESSAGE value="Responsive index page" />
<option name="LAST_COMMIT_MESSAGE" value="Responsive index page" />
</component>
</project>
articles/Browsers are doing too much.md
@@ -0,0 +1,103 @@
---
title: Browsers are doing way too much nowadays
topics: ["web", "browser", "application", "opinion", "rant", "user experience"]
image: /static/photos/browsers-bad.png
image-alt: The Pocket integration in Mozilla Firefox
---
Ooh, shiny! Chrome is now forcing me to view my bookmarks in a ✨side panel✨! It's not like
we have windowing environments for that, right? Doesn't matter, it's modern, new so it's cool
and automatically better even though it sucks!
Sorry for the TikTok comment-like intro (no, I don't have social media), but I feel this is
what many people think about obviously poorly designed features in browsers. I'm not saying
that browsers should do very little. Many features that are directly web-related are useful
and enhance the user experience, like bookmarking, history, extensions, search engine management,
and so on.
However, there's been a new wave of features that I believe don't belong in a browser. Opera
is probably the biggest offender.
* Opera is going big on AI, and they made a chatbot called Aria. You press Control+/ and it brings
up the stupid robot. Yes, it can browse the web, but there are already chatbots that can execute
web searches. Yes, it can view what you have open, but you can already download the page and
send it to a chatbot, or use one that can scrape and give it the document's URL. Or, someone
could make a browser extension that does that. Having a chatbot in a browser is just a gimmick
that also leads to privacy concerns and provider lock-in. And the fact that it's in a side panel?
Just open a window!
* Firefox bought an app called Pocket, which allows users to save a list of articles they want to
read later on a server. Firefox's implementation of it is very messy. It behaves like a browser
extension, but it's not. It's a service that's integrated into the browser and impossible to
replace. Also, it's not free software. Chromium has a similar feature, the reading list, but
it's local, an extension of bookmarks that shows if you read the page or you still have to
read it. It can be synced, but that's optional and unrelated to the feature itself.
* Opera also now has a built-in VPN. It's a trap for provider lock-in, because you can't swap
it out for another VPN. A real VPN is a separate application that manages your network connection
directly. Also, I'd say to not trust Opera with your data; it doesn't matter they're Norwegian
and say they don't log, they can still do it. If you want a VPN, I'd recommend
[Proton VPN](https://protonvpn.com/), it has a good track record and works decently fast, for
free, and their clients are free software. This is not a sponsored message, and I think that
for privacy, Tor is more effective than a VPN, but it's slower and not good to manage
geographical restrictions.
* Opera, Brave, Vivaldi, and possibly others have a built-in ad blocker. This is not as bad,
but it'd be better if it was a preinstalled extension, since it's very extension-like, or it
could also be a separate application, because it's network-level in many cases. Dedicated
ad blockers can provide more customisation, block cookie banners and other annoyances, and
have element hiding, font blocking and other privacy and convenience features. Privacy Badger
is also an excellent extension as it dynamically adjusts to block trackers, even though it's
not an ad blocker. However, it blocks many ads too, and you can still use an ad blocker with it.
(However, don't forget about Brave's new way of doing ads, see below.)
* Brave has built-in video calls, which is probably very shady, even though the Brave browser
is free software. For really private video calls, I'd recommend [some Matrix client](https://matrix.org/),
[Jitsi](https://jitsi.org/), [Jami](https://jami.net/), or other programs that support distributed,
free protocols.
* DuckDuckGo made their own browser that works only with their own search engine. I think it's
self-explanatory why this is bad. And yes, I still use Google, because my life requires me to
use Google services, so why not also use their search? If I find another search engine that
has decent results and respects privacy, I'll switch to it. If not, I'll just use Google until
they destroy it. Also, don't get fooled, there are very few free software search engines, and
the ones that are free have very small indexes and are slow. Out of these free ones,
[Stract](https://stract.com/) looks promising, but the ranking is strange: searching for
Wikipedia gives me a page about "Wikipedia Anomalies", and the actual Wikipedia is not listed
on the first page. Still, you should check it out.
* Opera now has sidebar apps: various messengers (no, not the ones worthy of your time), music,
social media, and so on, that run as web apps in a side panel. You know that any browser can
do this, and more flexibly? Almost all window managers can tile windows, and you can tile
a browser window to the side of the screen.
* Opera and Brave have a crypto wallet. I'd rather not trust a browser company with my crypto.
There are dedicated wallets that are more secure and have more features. And it doesn't even do
anything related to WWW, it's a payment method!
* Brave does block ads, but they place ads inside the browser itself, which is even worse! It would
be like the television receiver overlaying ads that pay the cable company. They say you can earn
"Brave Attention Tokens" by viewing ads, and you can exchange them for gift cards, cryptocurrencies,
real currencies, or contribute to websites. I don't think they'd give you crypto for free if there
wasn't a catch. So better stay away from them.
* Opera made a gaming browser that can limit resources. But this feature is unrelated to the WWW.
All OSes can limit resources for a specific process.
* Chromium now forces you to view bookmarks in a side panel, as mentioned in the intro. It's
not that bad, but a poor design choice, since everyone and their mother has a window manager
that can tile windows. If it were my choice, I'd open chrome://bookmarks in a new window, but
that page is not responsive, so it won't work well.
* Chrome also has a password manager. I'd rather use a free software password manager that provides
a browser extension, like [Bitwarden](https://bitwarden.com/) which is free software; although
I don't use any password manager, maybe I need to change that, however trusting ANY entity
with your plaintext passwords is a major risk. Maybe the best password manager is pen and paper.
Then no one can hack it. But you can lose it, so it's a trade-off.
**I don't, however, oppose all extras**. For example, PDF viewing is good, because it's another type
of web documents that may be served as opposed to HTML. I also don't oppose "internet suites"
that have a browser, email, IRC, usenet, FTP and more because they acknowledge the focus is not
just the web. I also don't oppose extensions, because there are legitimate ways to enhance the
browsing experience.
The best browser, in my opinion, is a **"no-name" browser** from an **independent developer** with a
good track record and no funding from a big tech company. It should be free software, and it should
not have many gimmicky features other than the ones that are from upstream.
* [Ungoogled Chromium](https://github.com/ungoogled-software/ungoogled-chromium) (this is what I use on GNU/Linux desktop)
* [Librewolf](https://librewolf-community.gitlab.io/)
* [Tor Browser](https://www.torproject.org/)
* [Pale Moon](https://www.palemoon.org/)
* [IceCat](https://www.gnu.org/software/gnuzilla/)
* [Cromite](https://github.com/uazo/cromite) (this is what I use on my Android phone)
* [Iridium](https://iridiumbrowser.de/)
main.py
@@ -18,7 +18,7 @@ def markdown_filter(text):
def article_url(url):
url = url.lower().rpartition(".")[0]
url = url.lower().rpartition(".")[0] if "." in url else url.lower()
new_url = ""
for i in url:
@@ -48,12 +48,12 @@ projects_page = ampoule.Page(site, "projects.html", projects=projects)
topics = collections.defaultdict(list)
for article in articles:
for topic in article["topics"]:
topics[topic].append(article)
topics[topic].append(("posts", article))
for project in projects:
for topic in project["topics"]:
topics[topic].append(project)
topics[topic].append(("projects", project))
topics = sorted(topics.items(), key=lambda x: x[0])
index_page = ampoule.Page(site, "index.html", all_posts=list(articles)+list(projects), topics=topics)
index_page = ampoule.Page(site, "index.html", topics=topics)
# Add the pages to the site
site.add_page("/", main_page)
static/photos/browsers-bad.png
static/style.css
@@ -60,9 +60,18 @@ body {
font-variation-settings: "opsz" 14;
}
a {
:is(a:link, a:visited):not(nav a) {
color: #009688;
text-decoration-thickness: 0.125em;
text-decoration-thickness: 0.0625em;
text-underline-offset: 0.125em;
font-weight: 550;
}
a:hover:not(nav a) {
background: #B2DFDB;
color: #00796B;
border-radius: 0.25rem;
text-decoration: none;
}
header {
@@ -128,6 +137,7 @@ nav > ul > li > a {
text-decoration: none;
color: #000000;
text-decoration-thickness: 0.125em;
text-shadow: none !important;
}
nav > ul > li > a:hover {
@@ -209,12 +219,14 @@ h6 {
margin: 0;
}
.article-title {
.article-title, .article-title a:link, .article-title a:visited {
text-decoration: none;
text-align: center;
color: #009688;
color: #00796B;
display: block;
width: 100%;
background: transparent !important;
font-family: "Romanian League Gothic", sans-serif;
}
#mail-link {
@@ -249,17 +261,17 @@ pre {
padding: 0.5rem;
}
.project-title > a {
.project-title > a:link, .project-title > a:visited {
text-decoration: none;
background: #009688;
color: #ffffff;
padding: 0 1rem;
padding: 0.5rem;
border: 4px solid #00796B;
box-sizing: border-box;
line-height: 1.25em;
font-size: 0.875em;
font-family: "Romanian League Gothic Condensed", sans-serif;
align-self: stretch;
font-size: 0.625em;
font-family: "Romanian League Gothic", sans-serif;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
@@ -326,7 +338,7 @@ blockquote > p:last-child {
margin-bottom: 0;
}
img {
img:not(.article-image) {
max-width: 100%;
height: auto;
}
@@ -374,3 +386,12 @@ img {
grid-template-columns: 1fr;
}
}
.article-image {
width: calc(100% + 2rem) !important;
aspect-ratio: 64/27;
object-fit: cover;
position: relative;
top: -1rem;
left: -1rem;
}
templates/article.html
@@ -5,6 +5,12 @@
{% block content %}
<h1>{{ document["title"] }}</h1>
<div id="article-date">{{ document.date | strftime("%Y-%m-%d, %H:%M:%S") }}</div>
{% if document["image"] %}
<figure>
<img src="{{ document['image'] }}" alt="{{ document['image-alt'] }}" id="article-image-header">
<figcaption>Pictured: {{ document['image-alt'] }}</figcaption>
</figure>
{% endif %}
<article class="content-area">
{{ document.content | markdown }}
</article>
templates/default.html
@@ -26,6 +26,7 @@
<footer>
<p>Page generated on {{ timestamp.strftime("%A, %e %B %Y at %H:%M:%S") }}</p>
<p xmlns:cc="http://creativecommons.org/ns#" >This work is marked with <a href="https://creativecommons.org/publicdomain/zero/1.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC0 1.0 Universal</a> (🄍). No rights reserved.</p>
<a href="#">Back to top</a>
</footer>
</body>
</html>
templates/home.html
@@ -5,6 +5,9 @@
{% for article in articles %}
<article class="content-area">
{% if article["image"] %}
<img src="{{ article['image'] }}" alt="{{ article['image-alt'] }}" class="article-image">
{% endif %}
<h2><a href="/articles/{{ article.file_name }}" class="article-title">{{ article["title"] }}</a></h2>
<div class="home-article-date">{{ article.date | strftime("%Y-%m-%d") }}</div>
<p>{{ article.content | first_paragraph | markdown }}</p>
templates/index.html
@@ -8,9 +8,9 @@
<details class="topic-expander">
<summary><h2>{{ topic }}</h2></summary>
<div class="topic-posts">
{% for post in posts %}
{% for type, post in posts %}
<article class="content-area">
<h2><a href="/posts/{{ post.file_name }}" class="article-title">{{ post["title"] }}</a></h2>
<h2><a href="/{{ type }}/{{ post.file_name }}" class="article-title">{{ post["title"] }}</a></h2>
<div class="home-article-date">{{ post.date | strftime("%Y-%m-%d") }}</div>
<p>{{ post.content | first_paragraph | markdown }}</p>
</article>