CSS Wishlist 2023

Twenty twenty-two brought plenty of goodness to the web platform. Cascade layers, dynamic viewport units, :has and so much more. Hopefully, the pace for 2023 will be no different.

Inspired by Dave Rupert's CSS Wishlist 2023, here is my own css Wishlist for 2023.

  • leading-trim – It might just be wishful thinking. (It probably is) But, I really do believe that this singular property would be a game changer for web typography. Finally we would be able to get rid of all the hacks and magic values littering our css just to get our fonts to align properly. Ethan Wang has a great write-up highlighting the ramifications of this property.
  • text-wrap: balance – I'm sick of rolling my own text balancing algorithms. I would much prefer the browser make my custom iplementations of NYTimes text balancer obsolete.
  • Event for stickiness change – Technically javascript, but having these events would make it a lot easier to style position: sticky; elements when they are in their "stuck" state.

That's my list from the top of my head. What's yours?

Flytta bloggen till Wordpress?

Jag går i tankarna att flytta bloggen ännu en gång. Från att hostas på micro.blog till att använda en egen Wordpress-instans som ett ”headless cms” kopplat till en statisk sidgenererare.

Det blir en något mer komplex uppsättning än den här nuvarande och jag överväger ännu om det är värt att ta språnget. Utöver att spara in de $5/mån som micro.blog kostar mig så vinner jag även en större frihet att kunna modifiera bloggen som jag vill. Främst då möjligheten att skapa upp egna inläggstyper.

Nackdelarna är uppenbara. Jag är osäker på om jag kommer orka med att drifta något sådant här på fritiden. 😬

Jag har byggt en prototyp baserat på mitt Hugotema för den här sajten. Netlify ombesörjer att hosta och bygga om sajten när något ändras i mitt GitHub-repo eller när inlägg publiceras/uppdateras i Wordpress.

Prototypen ligger här för den som är nyfiken: johanl-wp.netlify.app

👨‍💻 Kodknåp med ESLint

På jobbet har vi velat experimentera med nya, hjälpsamma, eslint-regler i ett av våra huvudrepositories. Det har dock känts en smula övermäktigt att introducera strama regler i en befintlig kodbas.

En lösning som vi landat i är att enbart köra eslint på de filer vi jobbar med. I vårt fall de filer som ingår i en merge request. Så småningom, när vi lämnat från oss varje fil något prydligare än vi hittade den, har vi således en genomgången kodbas. En merge request i taget.

I GitLab har vi lagt till det här jobbet i vår CI/CD-pipeline:

code-quality:
  image: node:16-alpine
  stage: test
  before_script:
    - apk add git
  script:
    - git fetch
    - DIFFED_FILES_TO_LINT=$(git diff origin/$CI_DEFAULT_BRANCH... --name-only -- "*.ts" "*.tsx" "*.js" "*.jsx")
    - npm ci
    - npx eslint $DIFFED_FILES_TO_LINT
  only:
    - merge_requests