Javascript roundup 2025-07

2025-07-21 Monday

"Javascript roundup" is a curated collection of links I've gathered in the past related all aspects of development. I've added a brief summary (mostly for myself) next to the links so I have some memory what was the reason I collected the link in the first place. Consider these roundups as public bookmarks.

Local-first software

Local-first ideals include the ability to work offline and collaborate across multiple devices, while also improving the security, privacy, long-term preservation, and user control of data.

…it is easy to create a web application in which the server takes ownership of all the data. But it is too hard to build collaborative software that respects users’ ownership and agency. In order to shift the balance, we need to improve the tools for developing local-first software.

https://www.inkandswitch.com/essay/local-first

Modern Scroll Shadows Using Scroll-Driven Animations

I have used this pattern myself previously, but I have done it with much more manual and cumbersome approach. This one is for the future.

https://css-tricks.com/modern-scroll-shadows-using-scroll-driven-animations/

Implementing an Undo/Redo System in a Complex Visual Application

Undo/redo systems in creative software are often invisible heroes—until they fail. As vital as they are though, they’re expected to “just work,” and building one that does—especially in a complex, visual app—is far from simple.

https://mlacast.com/projects/undo-redo

Architecting with constraints: a pragmatic guide

This is the essence of good architecture: making deliberate choices based on trade-offs. It’s about understanding that developer comfort should not be the primary driver of technical decisions. Performance, user experience, and project requirements should come first.

By starting with constraints, you force yourself to think critically about what the application truly needs. You move from simply implementing features in your favorite tool to engineering a solution that is purpose-built for the problem at hand. This mindset is what separates developers from architects.

https://www.lorenstew.art/blog/always-architect-with-contraints

To be a better programmer, write little proofs in your head

The idea is that you can judge the quality of your code by the ease with which you can reason about it. If it's easy for you to prove to yourself that your code is correct, it's probably pretty well-designed. On the other hand, if it's consistently frustrating or difficult, you should consider cleaning up or restructuring your code to make it more straightforward.

Matthew Prast writes:

• Write code that is monotonic and uses immutable data structures.
• Start with pre- and post-conditions and write your code around those. Structure your code so that the pre- and post-conditions are easy to conceptualize and verify.
• You can prove a function maintains an invariant by proving each unit of work does. → You should subdivide your code into the smallest possible units that can maintain the invariant.
• Pay attention to where component boundaries act as "firewalls" that prevent change propagation. → Do your best to build as many of these "firewalls" as possible, and take advantage of them when writing new features.
• Use induction to prove things about recursive functions incrementally instead of all at once. Assume the inductive hypothesis is already proved, and use that to your advantage. → Write your recursive functions incrementally. Assume the recursive call is already implemented and write the part of the function that builds the case from the case. Then, separately, implement the base case.

https://the-nerve-blog.ghost.io/to-be-a-better-programmer-write-little-proofs-in-your-head

CSS conditionals with the new if() function

From Chrome 137 you can try out CSS inline conditionals with the if() function. if() enables a cleaner developer interface for dynamic styles like style queries and media queries, with some key differences.

Note: this is only for Chrome at the moment.

https://developer.chrome.com/blog/if-article

/********************************/

/** Current media-query -approach */

button {
    aspect-ratio: 1;
    width: 44px;
}

@media (any-pointer: fine) {
    button {
        width: 30px;
    }
}

/********************************/

/** New if() syntax */

button {
    aspect-ratio: 1;
    width: if(media(any-pointer: fine): 30px; else: 44px);
}

/********************************/

Stop Using CustomEvent

Since we can subclass Event when we need to, this is my main and most general recommended alternative to CustomEvent. Event subclasses are better all-around.

// Register globally
declare global {
    interface GlobalEventHandlersEventMap {
        "my-event": MyEvent;
    }
}

// Subclass
// An event that's fired when foo happens.
export class MyEvent extends Event {
    static readonly eventName = "my-event";

    readonly foo: number;
    readonly bar: string;

    constructor(foo: number, bar: string) {
        super(MyEvent.eventName, { bubbles: true, composed: true });
        this.foo = foo;
        this.bar = bar;
    }
}

// Create an EventTarget instance
const eventTarget = new EventTarget();

// Add listener
eventTarget.addEventListener(MyEvent.eventName, (e: MyEvent) => {
    console.log("Event received!", { foo: e.foo, bar: e.bar });
});

// Dispatch the event
const myEvent = new MyEvent(42, "hello world");
eventTarget.dispatchEvent(myEvent);

https://justinfagnani.com/2025/06/25/stop-using-custom-event

The Web Is Your Component Library

YoinkUI lets you copy any UI component from any web page in just one click.

Thousand minus points from uncopyable text on the page headline. I blame Tailwind and careless development approach. The idea is interesting though.

https://www.yoinkui.com

This is for the next time I will try Neovim...

https://tamerlan.dev/ive-been-using-neovim-for-the-past-6-months-heres-what-i-learned/

...and go back to VSCode because I get more stuff done by not spending time on configuring irrelevant stuff to get basic stuff working.