Inlägg, delade länkar och notiser, sida 8

Grafiska gränssnitts komplexitet →

• Connect the boxes: create the user avatar component and pass its instance to the inventory table component. Whenever the edit state of the inventory table changes, the business logic in the inventory table should also trigger a state change in the user avatar component with the help of the user avatar’s public API.
• Lift the state up: move the internal state of the user avatar component and the state of the inventory table into a separate box/class. The logic of the user avatar and inventory table component will still be neatly separated in their own boxes, but they will be able to communicate without inventory table needing the direct access to the user avatar.
• Introduce a message bus: connect the inventory table and the user avatar component to the shared pipe that is used for distributing events in the application. The user avatar component subscribes to the message bus and every time it receives a table edit event, it executes an appropriate action (e.g turn the light on).

Jag gillar denna skarpt! Det som gör den riktigt bra är att den är skriven på ett teknik-agnostiskt sätt.

En person som skriver saker i LiveView eller Hotwire (som hanterar state backend) tar till sig idéerna och koncepten lika väl som folk som bara arbetar i rena SPA:er med React, Vue, Angular eller Elm.

Min egen inställning efter att ha byggt webbgränssnitt 15 år som yrkesverksam är att fokusera på leverans snarare än perfektion: Göra om är billigt, ändra befintligt efter nya lärdomar är dyrt.

Pulverised Records →

Skivbolag som har mycket dödsmetall. Bra att ha för inspiration eller när man är nyfiken på något nytt.

Nästlade selektorer i CSS, utan preprocessors →

This module introduces the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This increases the modularity and maintainability of CSS stylesheets.

Hoppla! Exempel, starkt inspirerat av hur Sass gör, finns på The future of CSS: Nesting Selectors.

Detta, CSS-variabler och nästlade media queries gör att det blir allt mindre risk i att slopa preprocessors som Sass, Less eler Stylus i mindre projekt.

Tre saker:

• Detta har potential att få utvecklarverktygen i webbläsarna till nya nivåer.
• @nest känns litet märklig, men kanske har den ett nyttigt signalvärde? Vi får se!
• Om inte stöd för &-- och &__ införs är detta ointressant för alla som använder BEM: dessa utvecklare kommer att stanna med preprocessors, tror jag.

Magiska känslan från Phoenix LiveView →

What you get is the speed, responsiveness and UX performance exceeding that of a React/Vue/javascript front end framework against a server API, but you haven’t written a line of javascript.

This is a magical feeling.

Kan verkligen bara hålla med.

Den här vägen, att skapa ett abstraktionslager som partiellt renderar om delar av sidor i realtid med serverside-renderad HTML över websockets, känner jag är framtiden.

Vue, React, Ember och Angular har visat världen vad som är möjligt, men rent arkitekturellt är det dags att sluta att blint tro på att Single Page Applications är ett måste för att skapa en bra användar- och utvecklarupplevelse.

Elixir faller inte alla i smaken, men denna rörelse finns som tur är i flera stora communities.

• .NET har Blazor.
• PHP har Laravel LiveWire.
• Rails har Hotwire.

Den senare är agnostisk, och kommer förmodligen portas till såväl Django som Laravel.