Logbook + Scratchpad

In the previous post I've mentioned Simple.css. I have successfully used it to quickly style two Web projects (which I'll show at some point) built on basic HTML. I've donated to the project because I found it perfectly suited for what I needed:

• Very lightweight drop-in
• Good defaults
• Easily customizable
• Dark theme included
• Use of HTML semantic elements
• No Javascript

After some time, though, I felt that I needed a bit more power and flexibility, and I took a look at Bulma. I can't say I have spent a lot of time with it, but I found it easy to use and aesthetically pleasing although it requires classes again. I'm planning to look at Bulma again and more extensively in the short term.

In the meantime, thinking about what I'm missing the most with a minimalistic framework such as Simple.css, I've found Pico.css. This framework is again mostly based on semantic elements, with just a handful of classes to deal with layout (at least with the usual container and grid). Since it seems to cover just what I miss from Simple.css without leaving the “comfort” of pure HTML, I really want to try it out.

#CSS #frameworks

As I have recently been revamping my knowledge of CSS, I have once again rediscovered the HTML semantic elements. Besides the common <header>, <footer>, <main>, and <nav>, I had basically forgotten about <section>, <article>, <aside>, and a few more.

Since for my (few) early Web design tasks I've mostly used frameworks like Bootstrap, I've become accustomed to using plenty of <div>s for styling. The nice thing about semantic elements is that they immediately make it clear what the function of a specific block of HTML is. A Web page that makes use of semantic elements can readily be styled with a basic CSS framework such as Simple.css, which I have successfully used for a couple more recent projects.

I've explored some combinations of sections and articles, and also <blockquote>s and <code>s. And I love how the omnipresent “accordion” is now an HMTL element as well: <details>.

Content cards without classes

A cool trick I have learned from the MVP.css mini-framework: how to create content cards using semantic elements only. The key is to use a number of <aside> elements within a <section>, for example like this:

<section>
    <aside>
      <h3>Card 1</h3>
      <p>Content 1</p>
    </aside>
    <aside>
      <h3>Card 2</h3>
      <p>Content 2</p>
    </aside>
    <aside>
      <h3>Card 3</h3>
      <p>Content 3</p>
    </aside>
  </section>

It may not work with every CSS framework, but it certainly does with Simple.css.

#CSS #HTML

I have just learned that f-strings have become much more flexible in Python 3.12.

Before Python 3.12, the following snippet would fail with a SyntaxError:

d = {"key": 42}
print(f"{d["key"]}")

File "<stdin>", line 1
  print(f"{d["key"]}")
              ^^^
SyntaxError: f-string: unmatched '['

Starting from Python 3.12, it just works. This is quite neat.

The Python launcher for Windows

Since I write code for more than 90% of my time on Linux or on a Unix-based OS, it has only come to my attention today that there is a Python launcher in Windows called py.

What is interesting about it is that you can use it to launch different (installed) versions of Python with just a version parameter. In fact, to try out the code above, I've run this command to launch Python 3.12:

py -3.12

#TIL #python

I am a big fan of animations. I became interested in Web animation when Flash was a thing, then continued with 3D animation, and recently I got interested in CSS animation too. I think I already know most of the animation concepts (for example what keyframes are, and how to combine them), so I am eager to try some with CSS.

As for color gradients, it is easy to overdo animation and get a kitsch result. What I am after, anyway, is not an entire application or game entirely made in CSS, nor a website where a lot of things are going on at the same time, as I personally dislike those. I don't have a specific idea yet, but I am keen to learn what is possible, especially after seeing how easy it is to get a nice scroll behavior with just a CSS property.

At the moment, I am going through the explanations and examples on the Mozilla developer docs and the W3Schools reference docs. There is a nice collection of ready-to-use CSS animations on Animate.css, but for some reason I have been attracted by the “Growing/Shrinking Bars” idea on a Hubspot blog post I've come across (with code on CodePen).

Hopefully a nice example will come up soon.

#CSS #animation

A quick thing I have learned today, which I thought was more difficult and it would take more time to get right than it actually does.

Do you know that effect when you click on a link to a section in a page (say from the nav) and the page smoothly scrolls until said section? Well, it is just a CSS property called... scroll-behavior with value... smooth. Duh.

Example:

html {
  scroll-behavior: smooth;
}

There are many other scroll-related properties related to snap points and margins, but this one alone goes a long way already.

#TIL #CSS #design

Speaking of Web and colors, some time ago I discovered a cool Web game for color nerds: Hexcodle. It is a sort of color-based version of the very well-known Wordle, which has inspired lots of conceptually similar games.

What I like about the game:

• It is very visual.
• It is for nerds, as it is based on the hex code of RGB colors.
• It gives information on the solution based on some concept of distance.
• It maps an interval of numbers (maybe slightly too large) to a guessing game.
• It helps you learn new colors.

A completely unrelated nerd game I love, to help learn regular expressions or just have fun if you know them: Regex Crossword.

#fun #games

Today I struggled quite a bit to successfully run scp on Windows 11 and copy files to a remote SFTP server. It took quite some research to try and find out (without results) why the scp command was hanging up on a line like the following (with -v enabled):

[...]
debug1: Sending command: scp -v -t path/

The weird thing is that the same command would work perfectly on Linux, so it was definitely a Windows issue. My gut feeling was that scp was not using the SFTP subsystem, but there was no -s option (like in its Linux counterpart) to force its usage.

Running ssh -V returned version 8.6. Knowing that SFTP is the default protocol starting from OpenSSH 9.0, I decided to upgrade OpenSSH. Luckily, the latest versions of OpenSSH include an MSI installer to make installation easier.

In a nutshell, this is what I had to do:

• Get the Win64 MSI installer from the latest release of OpenSSH (v9.5.0.0p1-Beta when I did this).
• Run the installer, which does not have a UI so it seems to exit abruptly, but it installs everything correctly.

• Follow the instructions on the GitHub wiki, which basically involve updating the path with the following command in a PowerShell with admin rights:

  [Environment]::SetEnvironmentVariable("Path", [Environment]::GetEnvironmentVariable("Path",[System.EnvironmentVariableTarget]::Machine) + ';' + ${Env:ProgramFiles} + '\OpenSSH', [System.EnvironmentVariableTarget]::Machine)
  

• Close and reopen the terminal where I was using scp.

• Run ssh -V to confirm the update.

After the update, scp ran without issues.

#tech #windows

I love colors. Whenever I have a chance to use colors, I do. At the risk of it looking kitsch, I like quite much color gradients because of the many colors they include.

Although nowadays the preference goes towards minimalism and color “exhuberance” is mostly frowned upon, it seems there has been a resurgence of gradients in Web pages. There are nice tools that help both with the choice of colors and with translating that into CSS properties, for example:

background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);

When it comes to Web design, though, choosing the right colors is not just a matter of taste but also of usability. Is using many colors too distracting? Does it make it difficult to read the text? Is it annoying?

A tool I find useful for this is the Contrast Checker, which returns a score on the contrast between a background color and a foreground color. With a gradient, this check is more complex because of the “changing” nature of the background.

I am still on a quest to figure out the best way to make gradient, font, and text color to work beautifully together.

#tech #CSS #design

I am not new to the font-feature-settings CSS property. In fact, while looking at the Raleway font some time ago, I wanted to change the appearance of the letter w, so I had to figure out both how to make use of font features and why the feature I wanted seemed not to be working.

Find the features

First of all, not all fonts have features. In the case of Raleway, I was sure because they are listed on the font page. Apparently they have the wrong stylistic set number (this was my issue), but they are there.

If the features are not known, you can use a tool to drag-and-drop the font file, than see and try all the font features (if there are any). I used FontDrop, then I learned about two more from the Mozilla developer docs:

• https://wakamaifondue.com/
• https://www.axis-praxis.org/

Use the features

Once you know what features are available for your font, you can include them in your CSS file.

I did use the font-feature-setting for Raleway, with a configuration like this:

@font-face {
    font-display: swap;
    font-family: "Raleway";
    font-style: normal;
    font-weight: normal;
    src: url("/path/to/Raleway-Regular.woff2");
}

body {
    font-family: "Raleway", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-feature-settings: "lnum", "salt", "ss09", "liga" 0;
}

Here, the font-feature-settings enables the “lining figures”, “stylistic alternates”, and the “stylistic set 9” features; it also disables ligatures.

CSS offers more specialized properties like font-variant and its related longhand properties but, according to the Mozilla docs, font-feature-settings is the only one that is fully implemented across browsers. I will stick to it for the time being.

#tech #CSS

A couple days ago, I was looking at the WriteFreely logs to find out why a follower was not being counted in the Stats page. While investigating the WriteFreely API later on, I was somewhat surprised that such information was not being exposed.

It turns out that the next version of WriteFreely will have both an endpoint and a detailed page to view the subscribers (I've just looked at the related PR). In the meantime, I decided to take a look at the database.

The following SQL query shows the public ID and URL of the followers (assuming the database is the one WriteFreely uses):

SELECT actor_id, url FROM remoteusers;

I've also found another interesting table that contains the users' public keys:

SELECT id, public_key FROM remoteuserkeys;

This of course got my interested in some more technical details of the ActivityPub format. I want to experiment a little with my own profile, but at the moment it is still unavailable so I'll hold off until I restore it.

#TIL #tech #fediverse