Tiago Mendes-Costa

An ode to Apple at 50

Wed, 01 Apr 2026 00:00:00 +0000

Here’s to the greedy ones.
The shareholders.
The authoritarians.
The moneymakers.
The round icons in the squircle jails.
The ones who see things operationally.

They’re fond of their own rules.
And they will lobby for the status quo.
You can quote them, disagree with them, glorify or vilify them.
About the only thing you can’t do is ignore them.
Because they control things.
They push the capitalist race forward.

And while some may see them as the greedy ones, we see profits.
Because the people who are greedy enough to think they can charge the world, are the ones who do.

— Tim Apple

Christophe

Thu, 05 Mar 2026 00:00:00 +0000

This week I learned with sadness that my friend Christophe Philemotte passed away after a long battle with cancer.

Some of us in the Belgian Ruby community will remember him as the driving force behind our meetups, and the founder of the Ruby Belgium ASBL. We had so many wonderful moments connecting with like-minded people, thanks to his dedicated work.

On a personal level, Christophe inspired and encouraged me to take a more active role in that community. I will be forever grateful for his trust.

His kind and gentle nature, intelligence, and humanism will be missed.

My thoughts go to his family.

Rest in peace, Toch.

The Google Web

Wed, 06 Aug 2025 00:00:00 +0000

Open Web Advocacy posted Japan: Apple Must Lift Browser Engine Ban by December, commenting that it “is a major step forward for browser competition”.

I disagree. It’s a step backward.

First, the article conflates browser and rendering engine. Yes, they are in most cases interlinked, and might be difficult or impossible to separate. But they are not the same. A small company can build a browser around WebKit to compete on iOS. Introducing a new rendering engine nowadays is only realistic for a few existing tech giants.

Second, the web is based on standards. Rendering engines must follow rules set by the World Wide Web Consortium. If a web app requires a specific rendering engine to run, it’s not a web app. It’s a Google platform app. So much for “open”. The word for a healthy open web should be “collaboration”, not “competition”.

Third, even though Apple cultivating an anti-competitive attitude by defying international rulings is obnoxious, in this case their protectionism is working for the preservation of an open web. When Chromium-based rendering engines will be allowed on iOS, the scenario already playing on macOS will repeat itself: everybody will install Chrome to run Google-locked apps. Developers will then have zero incentives to maintain WebKit compatibility, since “just install Chrome on your iPhone / iPad” will be the easy answer to save them work. Nothing runs on WebKit anymore, WebKit withers to irrelevance, Google is even more free to impose any changes they want, the open web is now the Google web.

So yes, in theory everyone is playing fair, and iOS becomes a merry hub for web innovation. In practice, the last counter-weight to Google’s gorilla-sized web hegemony falls, and the open web gets buried under it.

Alien Twitter

Sun, 15 Jan 2023 00:00:00 +0000

A mashup experiment for funsies. Published as a farewell tweet after the platform cut access to third-party clients on 13/01/2023.

Final report on the commercial shitshow Twitter, third officer reporting. The other members of the crew - Tweetbot, Twitterrific, Echofon, Plume, and others - are dead. API and goodwill destroyed. I should reach the fediverse in about six weeks. With a little luck, the network will pick me up. This is Ripley, last survivor of the Twittosphere, signing off.

Piste ou bande cyclable ?

Sun, 04 Sep 2022 00:00:00 +0000

Doit-on dire piste ou bande cyclable pour parler d’un tracé sur la chaussée réservé aux cyclistes et délimité par des traits discontinus ?

Le code de la route belge parle bien de bandes pour toutes les délimitations de voies peintes sur le macadam :

Article 72. Marques longitudinales indiquant les bandes de circulation

Autos, motos, bus, tracteurs, tous les usagers roulent ou s’arrêtent en urgence sur des bandes.

Tous, sauf les cyclistes, qui ont subitement droit à l’appellation piste :

Article 74. Marques longitudinales indiquant une piste cyclable

Et la définition est encore plus étonnante, lorsqu’on constate la facilité avec laquelle les véhicules lourds débordent régulièrement sur ces « pistes » :

Le terme « bande de circulation » désigne toute partie d’une chaussée divisée, dans le sens longitudinal […] La piste cyclable ne fait pas partie de la chaussée.

Article 2. Définitions

Mais pourquoi râler sur un pareil détail de langage ? Parce qu’il a son importance lorsqu’il s’agit de distinguer les voies peintes de celles séparées.

Lorsque les élus politiques se félicitent de créer des kilomètres de pistes cyclables, ils·elles jouent sur l’ambiguïté de la définition. Procédé de communication malhonnête (qu’il soit prémédité ou non) soutenu par le code. Et les retombées de cette communication ont un réel impact sur la prise de responsabilités, la sécurité routière, et le nombre de personnes qui se mettent (ou pas) au vélo.

En comparaison, le code de la route français est nettement plus clair :

Bande cyclable : voie exclusivement réservée aux cycles à deux ou trois roues, aux cyclomobiles légers et aux engins de déplacement personnel motorisés sur une chaussée à plusieurs voies.

Piste cyclable : chaussée exclusivement réservée aux cycles à deux ou trois roues, aux cyclomobiles légers et aux engins de déplacement personnel motorisés.

Le besoin de révision du code de la route belge est donc essentiel à cet égard, ne fût-ce que par honnêteté intellectuelle.

Le Dieweg et sa bande cyclable

Sun, 21 Aug 2022 00:00:00 +0000

Lettre ouverte à Thibaud Wyngaard

Monsieur,

Ce dimanche 14 août, je constatais avec bonne humeur¹ que le tronçon Wolvendael–Circulaire du Dieweg avait reçu un marquage au sol de bande cyclable. Quelle surprise donc, en arrivant au bout de ce tronçon côté Avenue Circulaire, de voir que cette bande s’interrompt subitement pour laisser place à une bande de stationnement, intimant aux cyclistes de se déporter sur la gauche pour la contourner.

Ce marquage est à la fois inacceptable, absurde, et dangereux. Je vous demande donc, en votre qualité d’Échevin de la mobilité, du stationnement, et des travaux publics, de retirer au plus vite cette bande de stationnement au profit d’une bande cyclable continue.

Inacceptable

Le message aux citoyens est en effet clair : Uccle est pour la mobilité douce, mais celle-ci passera toujours en second plan dès que le statu quo du trafic automobile est dérangé.

Cette vision conservatrice de la gestion de l’espace public est inacceptable en 2022, à l’heure de l’urgence climatique, des inondations et des vagues de chaleur sur la commune.

Les nombreuses personnes ayant plébiscité Écolo aux dernières élections communales attendent, j’en suis persuadé, un message moins ambigu de la part de votre équipe.²

Absurde

La présence de cette courte bande de stationnement n’a pas lieu d’être. Le côté sud de la voirie, constitué du complexe à appartements Constellations, possède un grand parc privé à même d’accueillir des véhicules³. Le côté nord ne comporte que des villas avec allées et garages privés, et du stationnement gratuit disponible sur la voie publique entre les arbres.

Il n’y a donc aucune raison valable de prévoir du stationnement côté sud.

Dangereux

La bande cyclable indique aux conducteurs automobile que leur voie est dégagée de toute personne en vélo ou trottinette. Le Dieweg est aussi une longue avenue droite qui donc induit une vitesse élevée.

Un véhicule léger qui sort subitement de sa bande pour s’insérer dans le trafic automobile est non seulement une source de stress pour tous les intervenants, mais surtout une source d’accident potentiellement mortel, qui ne demande qu’à se produire à la moindre inattention de part et d’autre. Un automobiliste qui regarde son téléphone, qui freine trop tard, un ado à trottinette qui ne fait pas attention, un enfant à vélo plein d’énergie roulant devant ses parents, … Les scénarios catastrophe ne manquent pas. Une vie humaine ne vaut pas quelques places de parking superflues.

Pour toutes ces raisons, je vous demande une fois encore, de modifier ces marquages au sol, pour le bien-être et la sécurité du plus grand nombre.

Merci à vous.

Une bonne humeur toute relative car, bien qu’une bande cyclable ressemble à un oasis dans le désert d’infrastructures de mobilité douce qu’est Uccle, de la peinture blanche n’a jamais arrêté les débordements de conducteurs distraits ou égoïstes. La seule arme pour convaincre le plus grand nombre d’utiliser le vélo reste la piste cyclable séparée. ↩
Le nombre de réactions à mon tweet du 14 août allant dans ce sens me conforte dans l’idée que je ne suis pas le seul à être indigné par la situation. ↩
Certes, l’immeuble Constellations ne semble pas avoir de garage souterrain, contrairement à son voisin Cherridreux. Mais le choix des résidents de garder les larges allées et pelouses de leur parc privé vierges de tout véhicule ne doit pas se répercuter sur l’espace public. ↩

Fun with Turbo Streams and Capybara

Thu, 03 Feb 2022 00:00:00 +0000

Using and testing Turbo Streams in a Rails app is quite fun, but comes with its share of quirks, which are not always well documented.

Let’s explain some of these with a very simple app, pompously titled “The Rodents Encyclopedia”. It consists of a dashboard displaying the number of rodents in the database, and a standard CRUD for these rodents. When a rodent is added, the dashboard counter is automagically updated.

The system spec

The feature is described in a system spec with Capybara and RSpec:

# spec/system/rodents_counter_spec.rb

feature 'Rodents Counter', puma: true, action_cable: :inline, active_job: :inline do
  background do
    driven_by :selenium, using: :headless_chrome
  end

  given!(:existing_rodent) { create(:rodent, name: 'Chipmunk') }

  scenario 'Creating a rodent updates the dashboard rodents counter' do
    visit '/'

    expect(page).to have_text 'There are 1 rodents in the encyclopedia!'

    new_window = open_new_window
    within_window new_window do
      visit '/rodents/new'
      fill_in 'Name', with: 'Squirrel'
      click_on 'Create Rodent'
    end

    expect(page).to have_text 'There are 2 rodents in the encyclopedia!'
  end
end

First peculiarity, the feature declaration:

feature 'Rodents Counter', puma: true, action_cable: :inline, active_job: :inline do

puma: true is a tag defined in a support file to use Puma as the Capybara server. It should help running concurrent requests.

action_cable: :inline is a tag defined by RSpec. I’m not sure yet if that one is required over the standard :async or :test adapters. Feel free to experiment on your project.

active_job: :inline is a tag defined in another support file. Broadcast methods ending in later will start an ActiveJob. If the job is not run immediately during the spec, Capybara won’t see its result. So this tag is essential to not lose your sanity in debug sessions.

Next, we select the Selenium driver, because the default rack_test one won’t run Javascript code:

driven_by :selenium, using: :headless_chrome

The actual spec code is now ready to run. It will first check that the dashboard counter is in its initial state, then proceed to create a rodent in a separate browser window, and finally check that the counter has been updated. Note that Capybara does not reload the dashboard page during the whole process, which is exactly the use case we want to test.

The broadcast

Triggering the counter update is done in the Rodent model whenever the record changes:

# app/models/rodent.rb

class Rodent < ApplicationRecord
  after_commit :update_rodents_counter

  private

  def update_rodents_counter
    broadcast_replace_later_to :dashboard, target: 'rodents-counter', partial: 'dashboard/rodents_counter', locals: {rodent: nil}
  end
end

Let’s decompose the broadcast_replace_later_to call:

replace is the action relevant to the use case (there’s also append, remove, etc.).
later wraps the call in a job so that the partial rendering will not slow down the web server response.
to allows to pass a channel scope instead of the default model instance.
:dashboard is our channel scope (see the view below).
target: is the HTML id of the element to be replaced.
partial: is the partial to render and send over the wire.
rodent: nil overwrites the default partial locals set to the model instance. This is required because otherwise, when the record is destroyed, the generated broadcast job will abort with a deserialization error.

The stream

The client subscribes to the channel in the dashboard view:

/ app/views/dashboard/show.html.slim

= turbo_stream_from :dashboard

h1 Dashboard

== render 'rodents_counter'

The :dashboard part is the channel scope used earlier in the broadcast.

In the rodents counter partial, the rodents-counter id is the target used in the broadcast:

/ app/views/dashboard/_rodents_counter.html.slim

p#rodents-counter There are #{Rodent.count} rodents in the encyclopedia!

That whole partial is rendered server-side and sent over the wire to the subscribed clients. Hotwire’s hidden Javascript code will take care of the replacement in the DOM.

That’s it, really. A few lines of code to update a page element. No need to write a dedicated Channel class or a Stimulus controller. Less code, and hopefully less bugs.

Shell aliases

Mon, 10 May 2021 00:00:00 +0000

Do you often type the same boring commands in a terminal window? Do you get tired of typing them over and over again?

Shell aliases are there for you!

An example

Let’s take the ls command. To list the folder content in a long format, you would typically use

ls -l

After the 50th time, especially if like me you are not a formally trained touch typist, it gets old. What if you could shave off 60% of that effort?

Enter the alias command:

alias ll='ls -l'

Then you can just type

ll

and marvel at all the keystrokes you saved!

Of course, since the shell just replaces the alias name with its value under the hood, you can still append any valid argument after the alias, like this:

ll -A

Saving aliases

These defined aliases will last as long as your shell session. If you open a new terminal window, they will be forgotten.

To have your favorite aliases ready to run every time, simply list them in your shell configuration file.

If you’re using bash, create or edit the ~/.bashrc file, and add your aliases, one per line:

# ~/.bashrc
alias l='ls -CF'
alias la='ls -A'
alias ll='ls -lhF'
alias lla='ls -lhAF'

For zsh, the file is called ~/.zshrc.

Open a new terminal window. Typing one of the aliases should now run it every time.

Listing aliases

To quickly list all available aliases, you can type

alias

without any arguments.

Git aliases

In addition to the regular shell aliases, git also maintains its own set of aliases.

Provided you already have git installed, you should have an existing ~/.gitconfig file. If it contains an alias section like this one:

[alias]
  co = checkout

then you should be able to type

git co

in a terminal window, and it will have the same effect as typing the full git checkout command.

Wrapping up

I hope this nifty feature will help you save time and finger tips with your most used commands.

Thanks to Emma Bostian’s tweet for this article’s idea. (Have a look at the comments for more alias tricks.)

Appendix 1: shell alias examples

Here are some useful aliases I accumulated over the years. Heavily geared towards Ruby on Rails development, since that’s what I do all day long.

# Some ls aliases
alias ll='ls -lhF'
alias la='ls -A'
alias l='ls -CF'
alias lla='ls -lhAF'

# homebrew
alias bs='brew services'

# git
alias g='git'
alias gs='git status'
alias gst='git stash --include-untracked'
alias gsp='git stash pop'
alias gco='git checkout'
alias gm='git checkout master && git pull'
alias gpl='git pull'
alias gps='git push'
alias gr='git pull --rebase --autostash origin master'
alias gri='git rebase --interactive'
alias grc='git rebase --continue'
alias grs='git rebase --skip'
alias gra='git rebase --abort'
alias g-='git checkout -'

# bundler
alias b='bundle'
alias be='bundle exec'
alias bo='bundle open'

# yarn
alias y='yarn'

# rails
alias r='rails'
alias rgc='r g controller'
alias rgm="r g migration"
alias rgmo='r g model'
alias rc='r console'
alias s='bin/rspec'
alias ss='spring stop'
alias td='tail -fn500 log/development.log'
alias tt='tail -fn500 log/test.log'
alias rr='r routes'
alias rrg='r routes -g'
alias rrc='r routes -c'
alias rs='r restart'

# rake
alias bake='bin/rake'
alias rdm='bake db:migrate'
alias rdmr='bake db:migrate:redo'
alias rdc='bake db:create'
alias rdd='bake db:drop'
alias rdrs='bake db:restore'
alias rdr='bake db:rollback'
alias rdt='bake db:test:prepare'
alias rds='bake db:seed'
alias rdb='spring stop && r db:drop && r db:create && r db:restore && r db:migrate && r db:seed && r db:test:prepare'

# heroku
alias h='heroku'
alias hl='h local -e .env'
alias hrc='h run rails c'
alias hrcs='hrc -r staging'
alias hrcp='hrc -r production'
alias hcg='h config:get'
alias hcs='h config:set'

# Jekyll
alias js='bundle exec jekyll server'

# postgresql
alias pg_start='pg_ctl -D /usr/local/var/postgres -l /usr/local/var/postgres/server.log start'
alias pg_stop='pg_ctl -D /usr/local/var/postgres stop'
alias pg_start_agent='launchctl load ~/Library/LaunchAgents/homebrew.mxcl.postgresql.plist'
alias pg_stop_agent='launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.postgresql.plist'
alias pg_log='tail -f /usr/local/var/postgres/server.log'
alias pgs='pg_start'
alias pgx='pg_stop'

# Tinfoil hat aliased - public ip, and exit node ip.
alias ip='curl icanhazip.com'
alias iplookup='echo $(curl -s ipinfo.io/$(curl -s icanhazip.com))'

# Lock screen
alias lock='/System/Library/CoreServices/Menu\ Extras/User.menu/Contents/Resources/CGSession -suspend'

# Get the weather
alias weather='curl wttr.in/~Brussels'

# Convert an image to webp
alias webp='convert -quality 50 -define webp:lossless=true'

Appendix 2: git alias examples

[alias]
  # Add
  ad = add
  aa = add .

  # Commit
  cm = commit -m
  ca = commit --amend -m

  # Checkout
  co = checkout
  cb = checkout -b

  # Cherry-pick
  cp = cherry-pick

  # Diff
  df = diff

  # List
  tl = tag -l
  bl = branch -a
  rl = remote -v

  # Status
  st = status -s

  # Pull
  pl   = pull
  plo  = pull --rebase origin
  plom = pull --rebase origin master
  plog = pull --rebase origin gh-pages
  plu  = pull --rebase upstream
  plum = pull --rebase upstream master
  plug = pull --rebase upstream gh-pages
  poule = pull

  # Push
  ps   = push
  pso  = push origin
  psom = push origin master
  psog = push origin gh-pages
  psu  = push upstream
  psum = push upstream master
  psug = push upstream gh-pages

  # Logs
  l  = log --pretty=oneline --decorate --abbrev-commit --max-count=15
  ll = log --graph --pretty=format:'%Cred%h%Creset %an: %s %Creset%Cgreen(%cr)%Creset' --abbrev-commit --date=relative
  lg1 = log --graph --abbrev-commit --decorate --format=format:'%C(bold blue)%h%C(reset) - %C(bold green)(%ar)%C(reset) %C(white)%s%C(reset) %C(dim white)- %an%C(reset)%C(bold yellow)%d%C(reset)' --all
  lg2 = log --graph --abbrev-commit --decorate --format=format:'%C(bold blue)%h%C(reset) - %C(bold cyan)%aD%C(reset) %C(bold green)(%ar)%C(reset)%C(bold yellow)%d%C(reset)%n''          %C(white)%s%C(reset) %C(dim white)- %an%C(reset)' --all
  lg = !"git lg1"

  # Sync
  sync = plu && pso

  # Stash-on-a-branch
  wip = commit -a -m "WIP" # FIXME: doesn't add untracked files
  pop = reset HEAD^

I use some of these so often that I routinely forget how to type the full commands. ¯\_(ツ)_/¯

Semantic Hovercards

Wed, 09 Dec 2020 00:00:00 +0000

Matt Swanson wrote an excellent article showing how to load a Rails view into a hovercard with StimulusJS.

To which I replied: Great Stimulus tutorial. (Except for the horrendous HTML markup.)

That was rude and uncalled for. My apologies, Matt. I should have said that I am not a fan of atomic CSS, and personally prefer semantic syntaxes.

But talk is cheap. So I made a version of his example with alternate HTML and CSS to elaborate on my thoughts.

The HTML

<!-- app/views/shoes/hovercard.html.erb -->

<aside class="hovercard" data-hovercard-target="card">
  <article class="shoe">
    <h1><%= @shoe.name %></h1>
    <p><%= @shoe.brand %></p>
    <p><%= @shoe.colorway %> • <%= number_to_currency(@shoe.price) %></p>
    <%= image_tag @shoe.image.variant(resize_to_limit: [150, 100]), alt: @shoe.name %>
  </article>
</aside>

The aside tag felt appropriate, since the hovercard is not part of the main content flow.

Using a class and a data attribute might seem redundant at first. I could have used the latter for styling as well. But using both explicitly decouples styling and interaction, which feels cleaner to me.

The article tag is ideal for content that makes sense on its own, as a unit. A good candidate for our shoe description.

Note that both hovercard and shoe classes describe what the element is, not how it looks.

Display this as is in the browser without any style, and it already makes sense, because the content is hierarchically structured with meaningful tags. Show the code to a human, and they understand in a fraction of a second what it’s all about. Give it to someone with bad vision, and their screen reader will have no problem finding the most relevant information to enunciate.

The CSS

// app/assets/stylesheets/hovercard.scss

.hovercard {
  position: absolute;
  bottom: 2.5em;
  left: 0;
  padding: 1rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0px 5px 10px #ccc;

  &::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 1rem;
    border-style: solid;
    border-width: 0.5rem;
    border-color: white transparent transparent transparent;
  }
}

The CSS code for the hovercard container takes care of the box positioning and its contour style, including the little bubble triangle at the bottom (the ::after part).

// app/assets/stylesheets/shoes.scss

#shoes > * {
  position: relative;
}

.hovercard .shoe {
  display: grid;
  grid-gap: 0 1rem;
  grid-template-rows: auto auto auto;
  grid-template-columns: 150px 1fr;

  > * {
    margin: 0;
  }

  img {
    border-radius: 0.5rem;
    grid-column: 1;
    grid-row: 1 / 4;
    width: 100%;
  }

  :not(img) {
    grid-column: 2;
  }

  h1 {
    grid-row: 2;
  }

  p:nth-of-type(1) {
    grid-row: 1;
  }

  p:nth-of-type(2) {
    grid-row: 3;
  }
}

The CSS for the inside of the card is in a separate file, and specific to the shoe card. This is more convenient if you plan to use different layouts for each type of hovercard. If not, both style sets could be grouped together, of course.

We are using a grid-based layout here, to easily play with the inner tags placement. Notice how the image is now displayed first on the left, although it’s still last in the HTML. Same with the brand paragraph, visually shown above the shoe name.

One minor annoyance: the hovercard style itself does not include the required position: relative, to avoid another wrapper tag just for that. So we have to remember to set that property on the parent tag.

The JS

One last detail: in hovercard_controller.js, I used the hidden HTML attribute instead of a hidden class. The element will be ignored by screen readers as well that way (which might or might not be the desired effect, depending on the use case).

The full Rails example app is available on GitHub.

New theme

Thu, 10 Sep 2020 00:00:00 +0000

This website has a new, slightly improved stylesheet!

Experimentations

The previous layout let the text flow through the browser viewport’s whole width. The idea was to get back to the origin of the web, and let readers decide how wide they wanted their text by adjusting the browser window.

Great idealistic idea in theory. But the result definitely felt unfinished by modern standards.

So here is a new variation with a max-width: 65ch.

In the process, I experimented with two features that ended up being rolled back. Here’s why.

Alternate stylesheets

Wouldn’t it be nice to keep a minimal stylesheet by default, and offer prettier but heavier alternatives for the reader to choose from? Modern browsers support this out of the box, right?

Well, kind of. There is an HTML specification for it: just list your default stylesheet with <link rel="stylesheet" …> and the other ones with additional <link rel="alternate stylesheet" …> tags. Easy.

Except that the feature is only supported in Firefox, IE, and Opera. And (at least in Firefox) the selection is not sticky: switch to an alternate stylesheet, reload the page, and you’re back to the default stylesheet. Not useful in practice. Ah, and all stylesheets are queried on page load, defeating the initial performance purpose.

Yes, some Javascript magic could solve that. But I want to keep this site as JS-free as humanely possible.

The jekyll-assets gem

Since I’m used to work on Rails projects, having assets managed by Sprockets for this Jekyll site seemed like a good idea.

There are a few annoyances and a quasi-show-stopper with this gem: the author is maintaining it alone, and doesn’t have a lot of time to do so. The documentation is a bit confusing in my opinion, and doesn’t document a breaking change (no more asset_path helper).

And the show-stopper: the gem is not white-listed by GitHub Pages. Which means I can no longer push the main branch and have GitHub auto-build the site. The solution would be to pre-build locally, and push that. An additional deployment step that wasn’t worth the trouble in this case.

So, after a lot of RTFM and commits, the code is back to a KISS version, which is not so bad after all.