TLDR WEB DEV 2024-12-16

ARCHITECTURES OF MODERN FRONT-END APPLICATIONS

This article goes over various front-end application architectures. The “classic” approach organizes projects into basic folders like pages, components, and helpers, but can quickly become chaotic and hard to maintain as the app scales. The “modular” approach divides applications into layers (pages, modules, components, and UI), making sure of encapsulated logic and clear separation of responsibilities. The “feature-sliced design” approach is a more refined modular approach that structures the project by functional features instead of layers.

THE GIFT YOU DO NOT WANT: A DIV IN A BUTTON'S CLOTHING

Semantic HTML can be important for accessibility, as shown by the difference between using a `button` element versus a `div` styled as a button. By comparing the accessibility tree representations and keyboard behavior of both genuine and fake buttons, this article shows how using a `div` requires extra code to achieve proper accessibility, whereas a `button` inherently provides the necessary features.

ISOMORPHIC WEB COMPONENTS

While basic web components (using `template` and custom elements) can be easily rendered on the server, true isomorphic rendering (running the same code client-side and server-side) requires more sophisticated techniques. Libraries like Lit and Enhance offer SSR capabilities, but often introduce dependencies and deviate from "vanilla" web component development. Instead, a direct isomorphic approach using a DOM emulator like Happy DOM is probably better.

PREFERRING THROWAWAY CODE OVER DESIGN DOCS

Instead of creating design docs before coding, a similar, but better, approach might be to create a prototype instead. This involves creating a draft pull request (PR) as a prototype, seeking early feedback, and iteratively refining the code into production-ready PRs, potentially discarding the initial draft. PRs are then used as living documentation, compared to design docs which often go out of date.

WHY ALMOST EVERYONE I SEE USES TAILWIND CSS? WHAT'S THE HYPE? (REDDIT THREAD)

A Redditor asks what the hype is about Tailwind CSS. While many users initially found it unintuitive, they found that it helped them develop much faster after they got used to it. The inline styling eliminates the need for separate CSS files and it also makes responsiveness much easier to implement.

with Clerk. Click to learn more.

WAVE TERMINAL

WaveTerm is an open-source, cross-platform terminal that integrates CLI functionality with graphical widgets, including a file browser, editor, web browser, and AI chat, aiming to bridge the gap between CLI and GUI applications.

CYPHERNETES

Cyphernetes is a Kubernetes query language that uses a graph-based approach that simplifies CRUD operations with easy syntax and interactive visualization.

FUN

fun provides a local development runtime for serverless functions. It supports various runtimes (Node.js, Python, and Go) and closely mimicks the AWS Lambda environment. fun was created by Vercel.

COMPUTING INSIDE AN AI

This author proposes a shift in how we interact with AI, moving from the current "model-as-person" metaphor to a "model-as-computer" approach. The approach would involve AI-generating GUIs similar to modern apps, with buttons, sliders, and visual outputs for easier interaction. The "model-as-person" method is reliant on textual conversation, and is slow and inefficient for complex tasks.

SHOULD YOU DITCH SPARK FOR DUCKDB OR POLARS?

A performance benchmark compared Spark, DuckDB, and Polars for typical lakehouse data engineering tasks. This author found that Spark's performance scaled better with increased compute resources than DuckDB and Polars, which experienced out-of-memory errors at lower core counts. While DuckDB and Polars were great at ad-hoc queries, Spark was very competitive for larger ELT processes.

CSS WRAPPED 2024

CSS Wrapped 2024 highlights seventeen new CSS features launched in Chrome and the web platform in 2024, including improvements to animations, scrollbars, view transitions, and developer experience features like `@property` and `light-dark()`.

PROGRAMMERS WANT FLOW. WHEN PROGRAMMING, LIGHT TURNS RED

This article goes over a "FlowLight" system that uses Emacs Lisp and a CircuitPython-powered Adafruit MagTag to indicate whether a dev is in a state of flow or not by changing colors on an LED light.

WORKING WITH ENGINEERS THAT FOCUS ON DOING FANCY SH*T (REDDIT THREAD)

A software engineer at a fast-paced startup is frustrated by a colleague who constantly introduces unnecessary new technologies, leading to discussions about the need for a clearer engineering strategy and better team communication.