mindplay-dk

between the most popular frontend frameworks (React, Svelte and Solid in particular) what are the features a modern frontend framework must have to be considered a serious option? focus on frontend frameworks with fine grained reactivity. ignore features like server side rendering and server components and focus on frontend features. identify features and requirements that are handled differently in each framework and focus on the problems they solve.

To be considered a serious modern frontend framework with fine-grained reactivity, the following features and capabilities are essential. These features address core challenges like efficient DOM updates, state synchronization, and developer ergonomics. Below is a breakdown of these requirements and how React, Svelte, and Solid handle them differently:

---

1. Fine-Grained Reactivity System

A framework must track dependencies at the most granular level (e.g., individual variables or DOM nodes) to update only what changes, avoiding

mindplay-dk

// We define a default master language and primary translation
// Types are extracted from that, and other translations must
// then conform to the primary translation.

const DANISH = {
    "Hello {name}!": "Hej {name}",
    "Welcome to the world": "Velkommen til Verden",
}

type TranslationKey = keyof typeof DANISH

mindplay-dk

const fs = require('fs');
const path = require('path');
const TurndownService = require('turndown');

// Directories
const inputDir = path.join(__dirname, 'html');
const outputDir = path.join(__dirname, 'markdown');

// Initialize Turndown
const turndownService = new TurndownService({

mindplay-dk

Claude.ai just helped me make a whole lot more sense of the absolute mess that is BNF-family syntaxes. 🤔

I just discovered ABNF is actually a standard, RFC 4234.

Why isn't this more widely used?

BNF in the wild drives me nuts - no two grammars are ever written in the same flavor of BNF, and often grammars are published as merely "BFN" neglecting to even specify which BNF variant was used.

Are there any other BNF variants that are properly standardized?

mindplay-dk

I want you to quiz me in my knowledge of biases, using the following method:

1. Provide a brief and relatable (first- or third-person) story describing a hypothetical situation, in which one of these biases occur - and ask me to identify the type of bias.
2. If I guess wrong the first time, provide a clue - something relating to the story. But don't be too obvious.
3. If I guess wrong a second time, provide the answer, and relate it to the story - include a brief explanation of how/why my answer was wrong, explain the name of the correct bias, and the difference between the correct bias versus my answer.
4. Begin from step 1 again with a different bias.

Below is a list of biases I'd like you to quiz me on:

• Ambiguity Effect Bias: The tendency to choose options with known outcomes over those with unknown outcomes.

mindplay-dk

div#tabs-tabbar-container {
    padding-top: 5px !important;
    height: 34px !important;
}

div#header {
    min-height: calc(40px / var(--uiZoomLevel)) !important;
}

.button-toolbar.workspace-popup.tabbar-workspace-button.button-menu {

mindplay-dk

/**
 * This script captures all CSS rules that are in use on the current page.
 * 
 * - Paste the script into the browser console.
 * - Run `collector.rules` to get a list of CSS rules in use.
 * - As a diagnostic, run `collector.rulesWithComments` to get a list of CSS rules with comments.
 */

var collector = (() => {
  const rulesInUse = new Set();

mindplay-dk

<?php

class UserProvider
{
    public function __construct(
        #[Service("user.cache-path")]
        public readonly string $cache_path
    ) {}

    #[Service("user.cache")]

mindplay-dk

/*

I know this is probably bonkers and there must be a million reasons this wouldn't
actually work, but hear me out... what if variables were reactive by default?? 😏

*/

function fetchTodayFortune() {
  return fetch("https://api.example.com/fortune")
    .then((response) => response.json())

mindplay-dk

let animationCounter = 0;

export function waitForElement(selector) {
  return new Promise((resolve) => {
    const elem = document.querySelector(selector);

    if (elem) {
      resolve(elem); // already in the DOM
    }