2023-04-06 #html #frontend / elisehe.in

Elise Hein: 'Fighting inter-component HTML bloat'

As I'm refactoring an existing design system, this article by Elise Hein came quit timely.

We consider HTML to be cheap, but wrapping divs in divs in divs comes with a cost that slowly creeps up.

Why avoid extra wrapper elements?

  1. Bloated html hurts performance
  2. Redundant elements can create problems with accessibility
  3. Redundant elements can break styling
  4. Deeply nested dom trees are annoying to work with

2023-03-28 #frontend #svelte / www.youtube.com

Rich Harris: 'Rethinking reactivity'

As I roam deeper into Svelte territory, I came across this talk from 2019 by Rich Harris, creator of Svelte.

Rich explains how he arrived at Svelte's reactivity from first principles, swimming against the virtual-DOM stream other frameworks follow.

Despite being from 2019, it's still relevant. Even if you're not into Svelte, it's worth watching as a great standalone talk.


2023-02-28 #design #frontend / rauno.me

Rauno's web interface guidelines

Rauno Freiberg (designer at Vercel) shares his web guidelines for web interfaces. A few that stood out for me:

  • Inputs should be wrapped with a <form> to submit by pressing Enter
  • Interactive elements should disable user-select for inner content
  • Actions that are frequent and low in novelty should avoid extraneous animations

Read them all on Rauno's (beautiful) website, and check out the Craft section while you're there.


2021-03-29 #laravel #vite-with-laravel #frontend #build-tools

Vite with Laravel: Using Inertia.js

How to set up Inertia.js in Vite with Laravel.

Read more


2021-03-25 #laravel #vite-with-laravel #frontend #build-tools #react

Vite with Laravel: Using React

How to set up React in Vite with Laravel.

Read more


2021-03-25 #laravel #vite-with-laravel #frontend #build-tools #typescript

Vite with Laravel: Using TypeScript

How to set up TypeScript in Vite with Laravel.

Read more


2021-03-22 #laravel #vite-with-laravel #frontend #build-tools #blade

Vite with Laravel: Auto-refresh Blade views

How to set up Tailwind CSS in Vite with Laravel.

Read more


2021-03-22 #laravel #vite-with-laravel #frontend #build-tools #tailwind

Vite with Laravel: Using Tailwind CSS

How to set up Tailwind CSS in Vite with Laravel.

Read more


2021-03-22 #laravel #vite-with-laravel #frontend #build-tools

Vite with Laravel

I've had an eye on Vite for a while. With a stable release out the door (2.0, as 1.0 never left the release candidate stage) it seemed like a good time to give it a shot.

Vite is a frontend build tool like webpack. Instead of bundling development assets, Vite serves native ES modules transpiled with esbuild from the dev server. This means there's a lot less bundling to do, and results in a very fast developer experience. For production builds, Vite uses Rollup to bundle the assets.

Read more


2021-03-22 #laravel #vite-with-laravel #frontend #build-tools #vue

Vite with Laravel: Using Vue.js

How to set up Vue.js in Vite with Laravel.

Read more


2021-02-22 #programming #frontend / blog.royalsloth.eu

The complexity that lives in the GUI

RoyalSloth reviews the three most common patterns to model interconnected state in a user interface.

  • Connect the boxes: create the user avatar component and pass its instance to the inventory table component
  • 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
  • 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

Connect the boxes and lift the state up seem to be the most common choices for React apps; respectively prop drilling and context or single state trees (like Redux).

There's no silver bullet to UI complexity, all methods have their caveats.

Read the full article on blog.royalsloth.eu.