Kartones Blog

I'm a fan of dark UIs, and since Apple created the "dark mode" trend it's really easy to implement it. I built a quick implementation for my small RSS reader, and thought I could share how simple it is, because there are tons of articles with loads of code and Javascript and whatnot, but things can still be simple:

• No Javascript required (this means no toggle functionality, but not a big deal)
• No complex CSS rules or queries
• Not a pure black + pure white colors selection
• Good practices: remember hyperlinks & set a default almost-white image bg (because almost nobody remembers transparent images, except AWS blog posts)
• Good trick: apply a slight grayscale filter to images, so they aren't that bright
• Extra: A nice border color (I use Bootstrap at my RSS reader, so for the button and panel borders is nice)

All in 15 lines of code (12 if you don't want the border rule). Also, if the filter is not supported in your browser, will simply render the image normally, so the fallback is original behaviour instead of a degraded experience.

First, the director's cut commented version:

/* Works with Javascript-disabled, and if your browser doesn't supports media queries, it's way too old */
@media (prefers-color-scheme:dark) {
    /* A light-grey-but-not-white and a dark-but-not-pure-black, both stolen from Firefox's dark theme colors */
    body {
        color: #DCD8D9;
        background-color: #2A2A2E;
    }

    /* because browsers usually allow to customize default hyperlink colors */
    a {
        color: #DCD8D9;
    }

    img {
         /* subtle but easier on the eyes instead of full bright */
        filter: grayscale(30%);
         /* good practice: bg color for transparent images, diagrams, etc. */
        background-color: #EEE;
    }

    /* sample of something that has a border */
    div.panel-default {
        border-color: #4C4C4E;
    }
}

And the comment-less 15 lines version:

@media (prefers-color-scheme:dark) {
    body {
        color: #DCD8D9;
        background-color: #2A2A2E;
    }
    a {
        color: #DCD8D9;
    }
    img {
        filter: grayscale(30%);
        background-color: #EEE;
    }
    div.panel-default {
        border-color: #4C4C4E;
    }
}

And that's pretty much it.

2021-04-12

I love reading, and one of the things I enjoyed a lot as a child was reading Choose Your Own Adventure books. Well, technically they are called gamebooks, but as many others I tend to generalize the brand name as the book type. In any case, they were really simple books with branching paths and narratives, often with multiple endings.

I already have an unfinished but working project for building web CYOA readers, but as I really enjoy reading at bed from my Kindle, I wanted to do a little experiment: try to build ebooks that have branching paths and act like a classic gamebook.

The idea is really simple: Each relevant page number (as in "go to page XXX") becomes a chapter, and as ebooks support links as references to chapters (and they are trivial to set even with minimal formats such as Markdown), build the navigation based on chapters.

A quick search, reading a bit about Pandoc and using its official Docker image, and I was able to quickly build something: https://github.com/Kartones/cyoa-epub.

The sample generated in the repository is a very simple ebook with few chapters, but serves as a, introduction tutorial on how the metadata works, how to add a book cover (of course you can also have images at normal pages), how to add a table of contents, and a minimal "adventure" sample that puts to the test the approach.

And it indeed works! Here's an almost final version being tested:

I now guess if with some OCR and a bit of text cleaning and processing I could build digital versions of those childhood books... 🤔

2021-03-27

Review

Title: Ten Arguments for Deleting Your Social Media Accounts Right Now

Author(s): Jaron Lanier

I picked up this book after watching The Social Dilemma from Netflix (highly recommended, by the way) because the author briefly appears in the documentary. After reading the book, which predates Netflix's title, I'd say the film takes more than a few ideas as inspiration from Jaron's book.

The main topic is how private companies and algorithms developed by them (and kept secret) are permanently monitoring us, grabbing our data, and then shaping the window through which we see things inside them. Using an example from the book, everyone who visits Wikipedia (in language X) sees the same content, meanwhile every person who gets a different, "customized" Facebook feed, or a different list of results after a Google search, because the underlying algorithms adapt what we see to the models they have of our behaviours. And those companies, via advertising, are effectively being paid to manipulate those very same behaviours. So the algorithms get tweaked to favour radicalisms, conflicts and mostly negative topics, as they drive more "views", which means more money.

We get multitude of examples of each argument, in fact I really liked that contrary to other titles that simply say sentences without many proofs, here sometimes a single relevant paragraph can easily have three or more footnotes with related researches, news articles and studies.

It is quite blunt, as some arguments like "you are losing your free will" or "social media is making you into an asshole" exemplify. It's also hard against certain political figures and big tech companies, but always with a level of respect and facts that I admire. It would be very easy to write a collection of radical suggestions to induce rage and hate, and instead I found learning about the Theory of Mind, deindividuation effects or the concept of Data as Labor.

One closing sentence that I found interesting, regarding tech giants simply saying that they're sorry when their services are misused: A social media company is in a better position if it doesn’t know what’s going on, because then it makes just as much money, but with less culpability.

A not complex nor long but thought-provoking read, definitely recommended.

2021-03-15

A pet project that I wanted to do since quite a while (to be precise, since Google killed Google Reader) was building my own RSS reader. Most of the free alternatives I've seen online either have too much advertising for my taste (and while I use an Ad-blocker, there's no best way to encourage me to keep it enabled than to flood with ads), or don't fully work, hiding feed errors or applying some unclear caching policies that make posts sometimes take a day or two to appear in the reader.

I also explored using some existing open-source feed readers, but almost everything is either PHP or Go, and while the later would be pretty easy to setup, in the end I had an excuse to play around with Python once again.

The result is PBRR - Pretty Basic RSS Reader, a very simple but working RSS feed. First a screenshot and then I'll give an overview of the (few) things it does and how:

It is designed with the same principle as a static-site generator: via Python you execute a runner that fetches from an OPML feeds export all feeds, generates a very simple html files and folders structure (based on simple templates), dumps each post as an html, plus the lists of posts, list of sites, etc. Then, using the incredibly useful Unpoly Javascript library performs AJAX calls to render the data without any server-side code (the alternative would have been to use iframes).

Basically, you setup a cron to run for example hourly to regenerate any new feeds, and set your webserver to serve static content (JS, CSS & HTML). And that's all, nothing scales better and runs faster than purely static content :)

It groups sites into categories (if the OPML had them), sends a proper Last-Modified header to be a good feed consumer citizen, and uses localStorage and a few Javascript lines to differentiate sites with new posts from already seen ones.

You can check the source, fork it, etc. at https://github.com/Kartones/pbrr.

I am using it myself so I might enhance or add new features in the future, but this v1.0 serves my needs and, after some fighting with non-standard feeds (there's always a case or two where feedparser library can't help with malformed feeds), works with all but one RSS subscriptions I had.

2021-03-13

During February I read somewhere that LinkedIn was offering some of their Learning Path course packs for free for a limited time. I gave a look at them, and liked the Become a Data Analyst one, so decided to give it a go.

First of all, a disclaimer: I don't plan to finish the full path, because I mostly wanted theory and generic examples. Learning Tableau, Power BI, Excel and Access is always interesting but not in my radar, so I focused on around 50% of the contents, and that's what this small review is about.

Each course is between 1.5 and 3.5 hours, and in total I think it was around 24h of content.

Course 1: Learning Data Analytics

Very very tied to Microsoft Office suite products. It is basic and introductory, there's some bits of theory here and there, but I'd say 90% is learning to do things in Excel or Access.

Course 2: Data Fluency: Exploring and Describing Data

This one was better in my humble opinion. Gives a general overview of many terms, ways of representing data, techniques to interpret data and graphs...

Represents exactly what I was expecting to find: teaching me the basics, but the meaningful basics.

Course 3: Learning Data Visualization

Another quite interesting item, both regarding data visualization itself as a topic, and regarding some tips & tricks for massaging data to better represent it.

Easily my favourite by the amount of concepts explained, always alongside at least one example.

Parts of the video are old as mention IE7 and the like, but still broadly atemporal.

The others

I'm currently watching a fourth course, Learning Excel: Data Analysis, but this one at a slower pace as I want a generic overview of how to do common operations with a spreadsheets software (be it Microsoft Excel or Google Spreadsheets).

And there are three more courses, with self-explanatory titles:

• Excel Statistics Essential Training: 1
• Power BI Essential Training
• Tableau Essential Training (2020.1)

2021-03-10