Anders Englöf Ytterström Anders Englöf Ytterströms hemsida sv https://madr.se yttan@fastmail.se (Anders Englöf Ytterström) yttan@fastmail.se (Anders Englöf Ytterström) Masonry-layouter med 2 rader CSS https://thathtml.blog/2026/04/masonry-now-css-grid-lanes/ https://thathtml.blog/2026/04/masonry-now-css-grid-lanes/ SV: | Anders Englöf Ytterström Ombyggnad 2026/2027 pågår - döda länkar förekommer. Mer information

Masonry Layout Solved! Hello CSS Grid Lanes

(thathtml.blog)

Tipsad 2026-05-01 på Anders Ytterströms webblogg

Masonry-layouter med 2 rader CSS

Dagen har slutligen kommit!

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Ytterligare några tusen rader JavaScript som kan pensioneras.

Ovanstående länktips publicerades 2026-05-01. Det går att prenumerera på länktips. Härifrån är följande mål rekommenderade:

]]> Fri, 01 May 2026 00:00:00 ECT Nya mode-ordet Progressive Web components https://arielsalminen.com/2026/progressive-web-components/ https://arielsalminen.com/2026/progressive-web-components/ SV: | Anders Englöf Ytterström Ombyggnad 2026/2027 pågår - döda länkar förekommer. Mer information

Progressive Web Components

(arielsalminen.com)

Tipsad 2026-04-30 på Anders Ytterströms webblogg

Nya mode-ordet Progressive Web components

Det här är något att hålla utkik på och lägga på minnet. Jag hoppas det kan bli en bra paraplyterm, precis som progressive webapps, html5 och css3 var när de begav sig.

A Progressive Web Component is a native Custom Element designed in two layers: a base layer of HTML and CSS that renders immediately, without JavaScript, and an enhancement layer of JavaScript that adds reactivity, event handling, and more advanced templating.

Exempel

Klassiskt jQuery-exempel:

<ol class="sortable-todolist">
  <li>Greppa handtaget.</li>
  <li>Öppna dörren.</li>
  <li>Gå ut.</li>
</ol>

<script>
  $(".sortable-todolist").sortable().todo();
</script>

Samma sak, med Progressive Web Components:

<todo-list>
  <sortable-list>
    <ol class="sortable-todolist">
      <li>Greppa handtaget.</li>
      <li>Öppna dörren.</li>
      <li>Gå ut.</li>
    </ol>
  </sortable-list>
</todo-list>

I båda fallen initieras en lista med möjlighet att lägga till CSS.

Ovanstående länktips publicerades 2026-04-30. Det går att prenumerera på länktips. Härifrån är följande mål rekommenderade:

]]> Thu, 30 Apr 2026 00:00:00 ECT Avlärande av Unobtrusive JavaScript https://thathtml.blog/2026/04/two-paradigms-for-enhancing-html-tags/ https://thathtml.blog/2026/04/two-paradigms-for-enhancing-html-tags/ SV: | Anders Englöf Ytterström Ombyggnad 2026/2027 pågår - döda länkar förekommer. Mer information

Two Paradigms for Enhancing HTML Tags

(thathtml.blog)

Tipsad 2026-04-30 på Anders Ytterströms webblogg

Avlärande av Unobtrusive JavaScript

Jag ägnade de bästa åren av karriären åt att tillämpa Unobtrusive JavaScript.

Det är ett verktyg som för att uppnå två saker:

  • Progressive enhancement. Börja med HTML. Använd JavaScript för att med hjälp av feature detection berika sektionen av HTML-dokumentet.
  • Graceful degradation. Om agenten inte stödjer en feature, fungerar fortfarande det väsentliga (läs: inga kraschar, inga felmeddelanden, ingen teknisk exkludering).

Jag blev därför litet provocerad när denna artikel nämner detta som ett förlegat, dåligt sätt. De nämner detta exempel (ändrat av mig för att vara mer korrekt i tiden, men poängen kvarstår):

<script defer>
  const someForm = document.querySelectorAll("[data-thing-form]")
  // do stuff with the forms on the page
</script>

<form data-thing-form>
  ...
</form>

Poängen är dock helt korrekt.

The reason this is bad is because you are brute-forcing the execution of the code in an imperative way, rather than using a declarative technique to execute the code whenever the relevant tag shows up. First of all, you likely want this code living in a tree of JS files somewhere else, rather than in a script tag next to the form. You might want the code to apply to various sorts of forms, not just one form with a particular ~ID~ data attribute (min ändring). Plus this technique will completely break at any time you use reactivity or hypermedia: what if the form comes in via a fragment after the page has loaded? Will your code know that an ajax fragment has suddenly resulted in a DOM update?

De två alternativen är enastående. Det som går att använda redan idag är vad jag kommer att använda från och med nu.

<script defer>
  export class ThingFormElement extends HTMLElement {
    // do stuff with the forms on the page
  }
</script>

<thing-form>
  <form>
      ...
  </form>
</thing-form>

Elegant!

Jag lärde mig mig också att customElements.define retroaktivt initierar alla förekomster av elementet i dokumentet. Det går alltså att behålla defer, om det är viktigt.

Ovanstående länktips publicerades 2026-04-30. Det går att prenumerera på länktips. Härifrån är följande mål rekommenderade:

]]> Thu, 30 Apr 2026 00:00:00 ECT Allt svårare att motivera JavaScript-skuld i takt med att CSS blir bättre https://blog.gitbutler.com/the-great-css-expansion https://blog.gitbutler.com/the-great-css-expansion SV: | Anders Englöf Ytterström Ombyggnad 2026/2027 pågår - döda länkar förekommer. Mer information

The Great CSS Expansion

(blog.gitbutler.com)

Tipsad 2026-04-30 på Anders Ytterströms webblogg

Allt svårare att motivera JavaScript-skuld i takt med att CSS blir bättre

Är detta en föraning på tillvaron efter React?

CSS now does what Floating UI, GSAP ScrollTrigger, Framer Motion, and react-select used to require JavaScript for. Here is exactly how much that saves, why these libraries were painful beyond their size, and what the platform still hasn't figured out.

JavaScript ger såklart mer kontroll. Det går inte att förneka vid diskussion. HTML med CSS är dock så pass kompetent idag att det skulle vara värt att överväga att skippa JavaScript.

Ovanstående länktips publicerades 2026-04-30. Det går att prenumerera på länktips. Härifrån är följande mål rekommenderade:

]]> Thu, 30 Apr 2026 00:00:00 ECT CSS eller humbug? https://www.keithcirkel.co.uk/css-or-bs https://www.keithcirkel.co.uk/css-or-bs SV: | Anders Englöf Ytterström Ombyggnad 2026/2027 pågår - döda länkar förekommer. Mer information

CSS or BS?

(www.keithcirkel.co.uk)

Tipsad 2026-04-30 på Anders Ytterströms webblogg

CSS eller humbug?

Ett utmanande quiz!

Jag lärde mig om följande properties idag: text-decoration-skip-ink, position-area och block-step-round.

Den andra hade förintat 600+ rader TypeScript i ett komponentbibliotek på ett tidigare jobb, om den funnits tillgänglig.

Ovanstående länktips publicerades 2026-04-30. Det går att prenumerera på länktips. Härifrån är följande mål rekommenderade:

]]> Thu, 30 Apr 2026 00:00:00 ECT form-saver webcomponent https://www.aaron-gustafson.com/notebook/never-lose-form-progress-again/ https://www.aaron-gustafson.com/notebook/never-lose-form-progress-again/ SV: | Anders Englöf Ytterström Ombyggnad 2026/2027 pågår - döda länkar förekommer. Mer information

Never Lose Form Progress Again

(www.aaron-gustafson.com)

Tipsad 2026-04-29 på Anders Ytterströms webblogg

form-saver webcomponent

Bra grej:

form-saver is a small web component that wraps a form, keeps an eye on it, stores values in localStorage, and restores them when the page loads again.

The component targets the first descendant form, saves values as users type or make changes, and restores them when they come back. No extra plumbing.

Ganska så klockrent användningsområde för WebComponents, enligt min åsikt. Om JavaScript inte finns eller mår dåligt fungerar det vanliga formuläret precis som vanligt.

Ovanstående länktips publicerades 2026-04-29. Det går att prenumerera på länktips. Härifrån är följande mål rekommenderade:

]]> Wed, 29 Apr 2026 00:00:00 ECT validation-enhancer webcomponent https://gitlab.com/alistairldavidson/validation-enhancer https://gitlab.com/alistairldavidson/validation-enhancer SV: | Anders Englöf Ytterström Ombyggnad 2026/2027 pågår - döda länkar förekommer. Mer information

Alistair Davidson/validation-enhancer

(gitlab.com)

Tipsad 2026-04-29 på Anders Ytterströms webblogg

validation-enhancer webcomponent

En Webcomponent för att validera formulär:

Wrap any HTML form in <validation-enhancer> to enhance its validation. <validation-enhancer> is a web component that brings native HTML validation to life - with the UX you want right out of the box

Jag gillar den här typen av tillämpning för Webcomponents, då det både uppfyller villkoren för graveful degradation och progressive enhancement.

Ovanstående länktips publicerades 2026-04-29. Det går att prenumerera på länktips. Härifrån är följande mål rekommenderade:

]]> Wed, 29 Apr 2026 00:00:00 ECT Alla webbläsare stödjer nu sizes="auto" på IMG-element https://piccalil.li/blog/the-end-of-responsive-images/ https://piccalil.li/blog/the-end-of-responsive-images/ SV: | Anders Englöf Ytterström Ombyggnad 2026/2027 pågår - döda länkar förekommer. Mer information

The end of responsive images

(piccalil.li)

Tipsad 2026-04-29 på Anders Ytterströms webblogg

Alla webbläsare stödjer nu sizes="auto" på IMG-element

Jag känner igen detta blott alltför väl:

I’ve been waiting for fourteen years to write this article. Fourteen years to tell you about one relatively new addition to the way images work on the web.

Nu finns loading="lazy" sizes="auto" i alla webbläsare, inkl Firefox och Safari. Bilder kommer att bli lättare framöver.

Ovanstående länktips publicerades 2026-04-29. Det går att prenumerera på länktips. Härifrån är följande mål rekommenderade:

]]> Wed, 29 Apr 2026 00:00:00 ECT En etisk verktygslåda https://tools.rmv.fyi/ https://tools.rmv.fyi/ SV: | Anders Englöf Ytterström Ombyggnad 2026/2027 pågår - döda länkar förekommer. Mer information

delphitools

(tools.rmv.fyi)

Tipsad 2026-04-17 på Anders Ytterströms webblogg

En etisk verktygslåda

A collection of small, low stakes and low effort tools.

No logins, no registration, no data collection.

delphitools is a collection of small, focused utilities that respect your privacy and work entirely in your browser. No data leaves your machine, no accounts required, no tracking. Just tools that do what they say.

Uppfriskande! Jag har själv ett par verktyg som jag skulle kunna bidra med. Jag ska göra ett försök.

De har dock kod-agenter aktiva. Hm.

Ovanstående länktips publicerades 2026-04-17. Det går att prenumerera på länktips. Härifrån är följande mål rekommenderade:

]]> Fri, 17 Apr 2026 00:00:00 ECT Amerikanerna anser att åldersverifiering på OS-nivå är rimligt https://itsfoss.com/news/os-level-age-verification-across-us/ https://itsfoss.com/news/os-level-age-verification-across-us/ SV: | Anders Englöf Ytterström Ombyggnad 2026/2027 pågår - döda länkar förekommer. Mer information

Oh No! Now A Federal Bill Wants OS-Level Age Verification for Everyone in the USA

(itsfoss.com)

Tipsad 2026-04-17 på Anders Ytterströms webblogg

Amerikanerna anser att åldersverifiering på OS-nivå är rimligt

Detta är en bra samlingssida med vad som pågår i USA just nu. Det började i Kalifornien, och fortsätter nu i andra delstater. Det har nyligen kommit upp på Federal nivå.

Många Linuxdistributioner har tagit ställning emot detta. Andra har sett till att försöka införa ålderskontroll på ett bra sätt, t ex genom att göra det i Systemd.

Jag iakttar och stundtals förfasas.

Ovanstående länktips publicerades 2026-04-17. Det går att prenumerera på länktips. Härifrån är följande mål rekommenderade:

]]> Fri, 17 Apr 2026 00:00:00 ECT Frankrike ersätter Windows med Linux på klientdatorer inom offentlig sektor och myndigheter https://itsfoss.com/news/france-government-linux-switch/ https://itsfoss.com/news/france-government-linux-switch/ SV: | Anders Englöf Ytterström Ombyggnad 2026/2027 pågår - döda länkar förekommer. Mer information

Good News! France Starts Plan to Replace Windows With Linux on Government Desktops

(itsfoss.com)

Tipsad 2026-04-17 på Anders Ytterströms webblogg

Frankrike ersätter Windows med Linux på klientdatorer inom offentlig sektor och myndigheter

Frankrike ansluter till Tyskland om att agera snöplog åt övriga Europa vad gäller att bevisa att Microsofts monopol inte ska tas för givet.

Det ska bli intressant att följa hur det går för dem!

Ovanstående länktips publicerades 2026-04-17. Det går att prenumerera på länktips. Härifrån är följande mål rekommenderade:

]]> Fri, 17 Apr 2026 00:00:00 ECT Stora AI-språnget https://leehanchung.github.io/blogs/2026/04/05/the-ai-great-leap-forward/ https://leehanchung.github.io/blogs/2026/04/05/the-ai-great-leap-forward/ SV: | Anders Englöf Ytterström Ombyggnad 2026/2027 pågår - döda länkar förekommer. Mer information

The AI Great Leap Forward

(leehanchung.github.io)

Tipsad 2026-04-09 på Anders Ytterströms webblogg

Stora AI-språnget

In 1958, Mao ordered every village in China to produce steel. Farmers melted down their cooking pots in backyard furnaces and reported spectacular numbers. The steel was useless. The crops rotted. Thirty million people starved.

In 2026, every other company is having top down mandate on AI transformation.

Same energy.

I samma text: hur allt var "sparvarnas fel", och hur fort det straffar sig att ha ett systemfel som belönar överdrifter.

Elegant.

Ovanstående länktips publicerades 2026-04-09. Det går att prenumerera på länktips. Härifrån är följande mål rekommenderade:

]]> Thu, 09 Apr 2026 00:00:00 ECT Internet är hotat. Igen. https://www.anildash.com/2026/03/27/endgame-open-web/ https://www.anildash.com/2026/03/27/endgame-open-web/ SV: | Anders Englöf Ytterström Ombyggnad 2026/2027 pågår - döda länkar förekommer. Mer information

Endgame for the Open Web

(www.anildash.com)

Tipsad 2026-04-08 på Anders Ytterströms webblogg

Internet är hotat. Igen.

En lång text av Anil Dash.

Den är en nutidstemp för hur Internet mår under första kvartalet 2026. Hur landskapet kring det varit turbulent på sistone. Den är värt att läsa och begrunda.

På sätt och vis är det förmodligen värre än det någonsin har varit. Mina egna känslor har främst bestått av en otrolig oro och frustration.

Jag har sett allt som texten nämner. Det är en känsla av att se någon drunkna, med åskådare som står och fnissar och pekar, men ingen hjälper till.

Vi får se hur den här texten åldras.

Ovanstående länktips publicerades 2026-04-08. Det går att prenumerera på länktips. Härifrån är följande mål rekommenderade:

]]> Wed, 08 Apr 2026 00:00:00 ECT