A CSS and HTML expert in the art is a marvel. Think less development and more engineering. The process of speedily assembling the minimum set of markup and style with maximum degrees of freedom. Like you know, a bassist can develop a new playing style, but there’s an engineering path where it’s perfected. OpenUI might end eternal widget development hell?

Can’t beat the hunch that once web components get widespread application there’ll be something like “micro apps”. Interoperable components between all js frameworks or something.

I know of four PHP static site generators.

1. Jigsaw: Laravel Blade templates. Source Code
2. Couscous: Twig templates. Source Code
3. Sculpin: Twig templates. Source Code
4. Spress: Twig templates. Source Code

The key advantage is obvious: dynamicity “technically” comes for free. Feedback/debugging loops “can” be made instantaneous, and scaling to a large output is probably not too difficult.

One downside is that corporate minded developers and consumers online will think you’re a noob for choosing PHP.

Watching the web tech mainstream/influencers transition back to a html first approach is fascinating. Frameworks are returning to single file soc approaches that bundle and progressively enhance scoped js and css components automatically.

See syntax for webc/11ty, svelte, enhance, lit/google, vuejs marko, astro, and more in a rare history lesson.

Kiwi Browser (download) is a Chromium derivative on Android that can directly expose the built–in dev tools on device. Remote debugging is my preference, but it makes quick web development debugging on Chrome for Android just a touch easier.

WordPress has an affinity for back–doored radioactivity. If I can get my way (which is hard), a WordPress install has only 1 theme and 0 plugins.

wordpress/
|-- public
`-- wp-config.php

/* Disable installing plugins and themes */
define('DISALLOW_FILE_MODS', true);

No more need for npm in my personal stack! The native browser’s path comes from which.

import puppeteer from "https://deno.land/x/puppeteer@16.2.0/mod.ts";

const chrome = "chromium";  // Browser Chrome: "firefox" | "chromium" | "google-chrome" | ...
const product = "chrome";   // Product Base:   "firefox" | "chrome"

const command = new Deno.Command("which", { args: [chrome] });
const { status, stdout, stderr } = command.outputSync();
const executablePath = new TextDecoder().decode(stdout).trim();

const browser = await puppeteer.launch({
  headless: false,
  executablePath: executablePath,
  product: product,
});

const site = "example.com";
const page = await browser.newPage();

await page.setViewport({ width: 1024, height: 768 });
await page.goto("https://" + site);
await page.screenshot({ path: site + ".png" });

await page.waitForSelector('a');

const url = await page.evaluate(() => {
  return document.querySelector('a').href;
});

console.log(url);

await browser.close();

deno run --allow-all main.ts

I’ve got so many feeds in my feed reader that selectively filtering terms is a necessity — it gets real meta huh? I know all I need to know about Next.js at this point, no more :-)

Static vs dynamic is a marketing trick. If truth be told a lot of tech marketing is highly suspicious…

“The finest eloquence is that which gets things done; the worst is that which delays them.”

I don’t know who said that, but that quote sums it all up.

Flexbox as a base layout is convenient but tricky due to CLS or “jank”. If the dimensions of the base flex container(s) are ambiguous, then the browser constantly recomputes the dimensions as HTML streams in.

My favorite trick is to give the browser dimension hints and avoid computational properties like flex. Set as many dimensions (width/height) as possible unambiguously. My Internet speed is sufficiently slow enough that I can see layout shifts in many sites, including my own (this micro blog).