Florens Verschelde

@fvsch

Non-binary (they/them pronouns). Web developer, photography enthusiast.

185 Folgt230 Follower1.085 Posts

Bluesky

Ist das dein Profil?Übernimm es — dann gehört dir fvsch.dirty.social.Profil übernehmen

Florens Verschelde@fvsch· Jul 14

France vs Spain

Single cover for Téléphone's "Un autre monde"

Single cover for Mecano's "Hijo de la luna"

Florens Verschelde@fvsch· Apr 27

CSS tip: make sure that selected text remains readable. Style `::selection` to at least disable text effects like drop shadows, gradient fills, etc. A decent chunk of your users treat text selection as a reading aid, highlighting words or paragraphs to keep track of their position in the text.

Screenshot of a section of text on a website, with a heading and a couple paragraphs. Text is black on a light tinted gray background and has good contrast. The second paragraph is selected and has a dark pink background, which reveals a white drop shadow below each letter. The selected paragraph is very hard to read, being a bust mix of dark pink, black and white pixels.

Florens Verschelde@fvsch· Apr 27

Favorite Lord of the Rings character, wrong answers only. Mine is Fraudo Baggins.

Florens Verschelde@fvsch· Jan 14

He's very fluffy too.

Same cat sleeping on his back on a kitchen counter, exposing a large belly covered in long unkept gray and white hair.

Florens Verschelde@fvsch· Jan 14

Here's Tinouk, our youngest cat, reclaiming his title as the household's baby. He's always getting kicked out of the cosiest spots because they're "reserved for the twins" and he's supposed to "move [his] smelly butt out of there". Very unfair.

A big gray and white tabby cat lounging in a baby rocker, next to a few colorful baby toys.

Florens Verschelde@fvsch· Nov 21

I am very contrite.

A GitHub contributions graphs showing a grid with very few green squares and a lot of empty space, and the heading "142 contritions in the last year".

Florens Verschelde@fvsch· Sep 17

Screenshot of Firefox Nightly on macOS showing the “Settings > Firefox Labs” page with a “Media: JPEG XL” option checked.

Florens Verschelde@fvsch· Jun 12

Started my new job a few days ago. Lots to learn, and it's pretty tiring but I'm happy about it so far.

Two newborns share a transparent hospital crib. The picture is taken from behind their heads, so that the top of their heads and dark hair are visible but their faces aren't, or barely. They're wearing light teal and red sleeping bags. Their heads are close, almost touching.

Florens Verschelde@fvsch· Jun 4

Heads up that styles are not showing up in Firefox (Nightly). Stylesheet seems to hit some bad redirects, same for other resources linked in the page's <head>. (Page <title> is outside of <head> too, but browsers will manage.)

Screenshot of Firefox showing an error page with the title “This page isn’t redirecting properly” when requesting the /static/tw.css path.

Screenshot of Firefox showing an error page with the title “This page isn’t redirecting properly” when requesting the /favicon.ico path.

Screenshot of a blog post with the title “jujutsu on tangled” with not website styles applied.

Screenshot of Firefox showing the HTML source for a 404 page when requesting the /static/icon.png path.

Florens Verschelde@fvsch· May 12

After trying a bit on my own to find a method for computing digits in an arbitrary base, I used www.mathsisfun.com/base-convers... as a guideline, recreated the method in Soulver (which lacks an Euclidian division operator), then as a recursive Elixir function.

Screenshot of the Soulver calculator app, showing a series of divisions of a number by a base, computing a new digit at every step, until the remaining number to divide reaches zero.

A few lines read:

digit1 = num1 % base
num2 = (num1 − digit1) / base
digit2 = num2 % base

$A recursive `to_digits` function implemented as Elixir code. It reads: @spec to_digits(integer, integer, list) :: list defp to_digits(number, base, acc \\ []) defp to_digits(0, _base, []), do: [0] defp to_digits(0, _base, acc), do: acc defp to_digits(number, base, acc) do digit = rem(number, base) next = div(number, base) to_digits(next, base, [digit | acc]) end$

Florens Verschelde@fvsch· May 9

Heads up: design needs some text contrast fixes.

Screenshot of gray-on-white text with devtools showing a 2.09:1 contrast ratio.

Screenshot of website footer showing very low contrast text.

Screenshot of website footer with gray-on-black text, with very low contrast at 1.61:1

Screenshot of website with the description of the Vue Equipment toolkit shown as gray-on-black text, with very low contrast at 1.61:1

Florens Verschelde@fvsch· May 8

In theory, I like that WebKit on macOS is a more energy-efficient engine, and that apps using system webviews are lighter than Electron. In practice, I loathe the way WebKit paints text selections.

A screenshot of the Dash app on macOS, showing a page from the Elixir documentation with a heading, a couple paragraphs and a code block selected. The text selection is painted as a large contiguous but uneven area. On some lines, the selection touches the edges of the text, while on other lines it extends into the padding of the paragraph or the whole page. For some nested paragraphs or blocks in the selection, part of the inner block text or padding does not have a selection background, leaving what looks like random blanks in the selection.

Florens Verschelde@fvsch· Apr 17

Looking into Elixir (elixir-lang.org), and I’m both horrified and excited that — as I understand it — there is no `if` control flow keyword but instead there is a `if/2` function that takes a condition and a linked list of tuples, and all the more normal-looking forms are syntactic sugar.

Variations of equivalent lines of Elixir code:

if(true, [{:do, "Yes"}, {:else, "No"}])

if(true, [do: "Yes", else: "No"])

if(true, do: "Yes", else: "No")

if true, do: "Yes", else: "No"

if true do
"Yes"
else
"No"
end

Florens Verschelde@fvsch· Mar 3

Long long caaaaaat

A gray and white long haired cat, seen from the back standing on its hind legs on a small platform, with its front legs against a window. It's looking outside at something on a wall, just out of frame.

Florens Verschelde@fvsch· Feb 12

I tend to display images zoomed out to take up only two thirds or half of the display area. Keeps the image's angular size (en.wikipedia.org/wiki/Angular...) small enough, and as a bonus: lines from the image don’t touch lines from the UI or the screen's edges. Here’s an example from a 27" screen.

Screenshot of a photo viewer software with a sidebar on the right showing metadata for a 40 million pixels image. Most of the user interface is one dark gray display area taking up the left and middle parts of the UI, with one photograph displayed at the center. The image takes a bit more than half of the height and width of the viewing area, leaving ample dark gray margins around it. At the bottom, a status bar with more metadata shows that the image is displayed at a zoom level of 25%. The photograph itself shows an old garage building with the hint of a tiled roof and three metal doors painted pale blue. The blue paint is faded and flaking. In front of the center door, three stalks or branches have cracked the bitumen open and shoot up more than a meter high; they would probably stop anyone from opening that garage, suggesting that no-one has opened that door in a couple years or more. The top of the frame shows a tall wall behind the garage, painted beige or maybe a faded yellow.

Florens Verschelde@fvsch· Jan 9

@d3lm.bsky.social UI bug report for the course's learning environment: if you click the icon at the right of the Console/Memory Inspector tab list, it doesn't toggle the panel, because the `event.target` is the `i.toggle` element and not the `div.tab-list` element.

Screenshot of a DOM tree in Firefox DevTools showing the JS code for a click event listener.

Florens Verschelde@fvsch· Jan 7

And there was much rejoycing.

A still of animated naked men blowing trumpets with their arses, drawn in a style evocative of medieval manuscript illuminations, from the movie Monty Python and the Holy Grail.

Florens Verschelde@fvsch· Dec 31

A white and gray cat laying in a crown-shaped cat bed near a window. He looks half-asleep and a bit startled, with one leg in the air.

The same cat laying on a kitchen counter with his head resting on a bag containing bottles of nail polish.

A different white-and-gray cat with long hair and a brown blue eyed cat, sat around a couple water bowls on a tiled floor, looking up at the photographer. The brown cat is licking his nose.

Two white-and-gray cats caught mid-fight. One is grabbing the other's back and shows his tongue (probably after licking his brother's head). The other one looks nonplussed.

Florens Verschelde@fvsch· Oct 30

Tired of BackBlaze's flakiness. Once it marked my backup as invalid and I had to recreate it from scratch. Routinely it does not see changes on my external drive; this time it’s been ignoring changes for 4 days. I’ve removed, added or changed hundreds of files in that time.

Screenshot of an “Overview” page on the BackBlaze site showing a computer nicknamed florens-mba-again and a table with two drives. The Latest File Uploaded column for the first drive says “Today” and for the second drive it says “4 days ago”.

Florens Verschelde@fvsch· Oct 11

I used pkg-graph.info to generate the npm dependency graphs for `servitsy`, `servor`, `sirv-cli` and `serve`.

A network diagram with a single box in the middle, labelled "servitsy".

A network diagram with a single box in the middle, labelled "servor".

A network diagram with a box labelled "sirv-cli" in the middle, connected to a dozen other boxes around it.

A network diagram with box labelled "serve" in the middle, connected to dozens of other boxes. It looks like a spider's web.

Florens Verschelde@fvsch· Aug 29

In Firefox, you can style the way a plain text response looks like by adding a `Link: <url>; rel=stylesheet` HTTP header. Sadly doesn’t work in Safari or Chrome.