Alex
LightNews LightNews
banner
alexdln.com
Alex
@alexdln.com
380 followers 380 following 1.1K posts
Web Engineer, Author, Contributor, Photographer
Frontend/React/Next.js/UX/DX/Сapybara/Performance/Growth

🔨 Building slidebook.dev | atsky.app | robindoc.com | nimpl.dev
🏡 Living alexdln.medium.com | github.com/alexdln
Posts Replies Media Videos
alexdln.com
A heavy day. Sending love and light to all
A park scene in autumn with golden leaves on the ground and trees framing the image. In the foreground, a black bird perches on a wooden balance beam structure. In the background, a person sits on a swing next to two strollers, and a small child runs across the grass. A metal swing set and other wooden playground equipment are scattered around the area, with warm evening light illuminating the scene.
November 20, 2025 at 2:08 PM
alexdln.com
Morning
A gray squirrel moves partially hidden among thick green and orange leaves, perched on a wooden fence rail covered by overgrown foliage. A gray squirrel runs along the top rail of a weathered wooden fence, with dense green and autumn-tinged foliage in the background.
November 19, 2025 at 8:58 AM
alexdln.com
I really like these canals! I didn’t realize they were such a popular way to get around here, or that you can travel to so many different places using them
A peaceful canal scene with several long narrowboats moored along the water, their reflections shimmering in the golden light of autumn. One narrowboat moves slowly down the canal, while another in the foreground has a bicycle resting on its roof. Trees with orange and yellow leaves line the banks, creating a warm, calm atmosphere
November 18, 2025 at 7:45 PM
alexdln.com
But I'm wondering what approach to recommend in the documentation - use a nested key, create a variable above, or export specific dialogs at the store level
const { TopLayerStore, Dialogs } = createTopLayer({ dialogs: { MyDialog: { data: { title: "Test Dialog" }, isolated: false, }, }, }); export const { MyDialog } = Dialogs; // or const TestComponent = () => ( <Dialogs.MyDialog> <div>Dialog Content</div> </Dialogs.MyDialog> ); // or const { MyDialog } = Dialogs; const TestComponent2 = () => ( <MyDialog> <div>Dialog Content</div> </MyDialog> );
November 18, 2025 at 2:53 PM
alexdln.com
It was once again a lot of fun working with TypeScript, but I still managed to come up with a convenient, stable, and typed solution. And all this within the context of Contection's reactivity approach
const { TopLayerStore, Dialogs } = createTopLayer({ dialogs: { MyDialog: { data: { title: "Test Dialog" }, isolated: false, }, }, }); const TestComponent = () => ( <TopLayerStore.Provider> <Dialogs.MyDialog> <div>Dialog Content</div> </Dialogs.MyDialog> </TopLayerStore.Provider> );
November 18, 2025 at 2:47 PM
alexdln.com
Since all the websites are down, I can only show off the header I came up with for Slidebook.

They say you should go out and communicate without the internet, but instead, you should go and play with SVG.
November 18, 2025 at 2:30 PM
alexdln.com
CloudFlare seems to be in a really bad state today... First, 500 errors, now a broken captcha 🫠
www.npmjs.com Please unblock challenges.cloudflare.com to proceed.
November 18, 2025 at 2:12 PM
alexdln.com
Morning
A peaceful canal scene with two narrowboats moored side by side - one red and blue, the other cream - with their reflections rippling in the water. Behind them is a wooden fence, scattered items like a bicycle and tools, and tall autumn trees with sparse leaves.
November 18, 2025 at 10:50 AM
alexdln.com
I finally took a walk. The videos were a disaster as always, but I managed to capture some adorable portraits of this gorgeous little being

* If you need portrait photos in London, call me on 4443434 😄*
Photo of a duck looking at the camera #1 Photo of a duck looking at the camera #2 Photo of a duck looking at the camera #3 Photo of a duck looking at the camera #4
November 17, 2025 at 11:40 PM
alexdln.com
For some reason, I feel like something here could be written more simply...

Nevertheless, I've almost completed an update for viewport tracking, which will allow you to register any element for tracking as quickly as possible
node?.addEventListener("resize", onSizeChangeThrottled); onSizeChangeThrottled(); const unlisten = listen("node", (newNode) => { node?.removeEventListener("resize", onSizeChangeThrottled); node = newNode || null; node?.addEventListener("resize", onSizeChangeThrottled); onSizeChangeThrottled(); }); return () => { unlisten(); node?.removeEventListener("resize", onSizeChangeThrottled); };
November 14, 2025 at 3:48 PM
alexdln.com
Fall magic
A narrow garden path lined with dry, brown, end-of-season plants leads to a tree stump and fallen branches against an old stone wall. The scene looks overgrown and autumnal, with scattered leaves and a few green shrubs among mostly withered vegetation
November 14, 2025 at 2:21 PM
alexdln.com
_And apparently the react compiler does exactly that. I don't know why I didn't think of him right away_
React Optimizing Compiler We gave an early preview of React Forget at React Conf 2021. It’s a compiler that automatically generates the equivalent of useMemo and useCallback calls to minimize the cost of re-rendering, while retaining React’s programming model. Recently, we finished a rewrite of the compiler to make it more reliable and capable. This new architecture allows us to analyze and memoize more complex patterns such as the use of local mutations, and opens up many new compile-time optimization opportunities beyond just being on par with memoization Hooks.
November 14, 2025 at 10:53 AM
alexdln.com
It's past midnight, and I've only just finished setting up the "enabled" setting.

Now "contection" and "contection-viewport" have setting for manually controlling when to activate the subscription and re-render. The option for SSR solutions is also available out of the box
const ComponentA = () => { const widthBreakpoint = useViewportWidthBreakpoint(ViewportStore, { enabled: "after-hydration" }); console.log("ComponentA, subscribing to width breakpoint", widthBreakpoint.current); return <div>ComponentA: {widthBreakpoint.current}</div>; }; const ComponentB = () => { const width = useViewportWidth(ViewportStore, { enabled: "after-hydration" }); console.log("ComponentB, subscribing to width", width); return <div>ComponentB: {width}</div>; };
November 14, 2025 at 12:16 AM
alexdln.com
Contection isn't just an optimized state manager. It's the foundation for optimizations across every interaction.

At the same time, I wanted to keep it simple, so I added modules - separate packages for specific tasks! And this is the first of them - contection-viewport
1. Create a Viewport Store import { createViewportStore } from "contection-viewport"; const ViewportStore = createViewportStore({ width: { device: { mobile: 0, tablet: 600, desktop: 1024, }, }, }); 2. Provide the Store function App() { return ( <ViewportStore> <YourComponents /> </ViewportStore> ); } 3. Use the Store import { useViewportWidthBreakpoint } from "contection-viewport"; function ResponsiveComponent() { // Component re-renders only when 'default' breakpoint changes const breakpoint = useViewportWidthBreakpoint(ViewportStore, "default"); return ( <div> {breakpoint.current === "mobile" && <MobileView />} {breakpoint.current === "tablet" && <TabletView />} {breakpoint.current === "desktop" && <DesktopView />} </div> ); } import { useViewportWidth, useViewportHeight } from "contection-viewport"; function Dimensions() { // Component re-renders when width changes const width = useViewportWidth(ViewportStore); // Component re-renders when height changes const height = useViewportHeight(ViewportStore); return ( <div> <p>Width: {width}px</p> <p>Height: {height}px</p> </div> ); }
November 13, 2025 at 2:01 PM
alexdln.com
Testing in a real project...
ComponentB, subscribing to width 1440 forward-logs-shared.ts:95 ComponentB, subscribing to width 1440 forward-logs-shared.ts:95 ComponentB, subscribing to <= lg false forward-logs-shared.ts:95 ComponentB, subscribing to <= lg false forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint xl forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint xl forward-logs-shared.ts:95 ComponentB, subscribing to width 1438 forward-logs-shared.ts:95 ComponentB, subscribing to width 1438 forward-logs-shared.ts:95 ComponentB, subscribing to width 1435 forward-logs-shared.ts:95 ComponentB, subscribing to width 1435 forward-logs-shared.ts:95 ComponentB, subscribing to width 1383 forward-logs-shared.ts:95 ComponentB, subscribing to width 1383 forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint lg forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint lg forward-logs-shared.ts:95 ComponentB, subscribing to width 1258 forward-logs-shared.ts:95 ComponentB, subscribing to width 1258 forward-logs-shared.ts:95 ComponentB, subscribing to <= lg true forward-logs-shared.ts:95 ComponentB, subscribing to <= lg true forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint md forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint md forward-logs-shared.ts:95 ComponentB, subscribing to width 1004 forward-logs-shared.ts:95 ComponentB, subscribing to width 1004 forward-logs-shared.ts:95 ComponentB, subscribing to width 866 forward-logs-shared.ts:95 ComponentB, subscribing to width 866 forward-logs-shared.ts:95 ComponentB, subscribing to width 790 forward-logs-shared.ts:95 ComponentB, subscribing to width 790 forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint sm forward-logs-shared.ts:95 ComponentA, subscribing to width breakpoint sm
November 13, 2025 at 1:41 PM
alexdln.com
Wow, that was a lot harder than I expected. But it was fun and a really good test of Contection's capabilities and weaknesses!
issue-32 implement viewport module #35 Open alexdln wants to merge 6 commits into main from issue-32 +2,880 −34 Conversation 0 Commits 6 Checks 1 Files changed 21
November 13, 2025 at 1:30 PM
alexdln.com
It's so nice to finally have a working idea after a day of work.

I'm testing Contection as a basis for other packages - that should be interesting!
PASS modules/viewport/__tests__/createViewportStore.test.tsx Test Suites: 3 passed, 3 total Tests: 36 passed, 36 total Snapshots: 0 total Time: 7.049 s Ran all test suites related to changed files.
November 12, 2025 at 8:28 PM
alexdln.com
There are already 760 lines in the README... I think it's time to think about a documentation website...
### `Consumer` Component that consumes the store using render props pattern. **Props:** - `children: (data) => React.ReactNode` - Render function - `options?: { keys?: string[], mutation?: Function }` - Optional subscription and mutation options: - `keys?: string[]` - Array of store keys to subscribe to. If omitted, subscribes to all keys. - `mutation?: (newStore, prevStore?, prevMutatedStore?) => T` - Function to compute derived value from subscribed state. Receives: - `newStore` - Current store state (or selected keys if `keys` is provided) - `prevStore` - Previous store state (or selected keys). `undefined` on first call - `prevMutatedStore` - Previous result of the mutation function. `undefined` on first call
November 12, 2025 at 10:39 AM
alexdln.com
In honor of the trailer for the new series, I can't not to share that I recently went into a Disney store for the first time. And when I saw this, I stood there and was as happy as a child 👶
A store display shelf featuring boxed toys of Buzz Lightyear and Woody from Toy Story. On the left are several Buzz Lightyear “Space Ranger” action figures in white and purple packaging, and on the right are Woody “Sheriff” dolls in blue and brown “Woody’s Roundup” boxes.
November 11, 2025 at 8:36 PM
alexdln.com
Well, I can understand when it's just another startup, but @github.com, how?
A screenshot of the GitHub PR creation interface, where an extra scrollbar appears at the bottom of the page.
November 11, 2025 at 6:24 PM
alexdln.com
I added support for the prevMutatedStore argument, which is the result of the previous call. Is there any way to dynamically type this argument?
const filteredItems = useStore(AppStore, { keys: ["items", "filter"], mutation: (newStore, prevStore, prevMutatedStore) => { // Reuse previous result if filter hasn't changed if (prevMutatedStore && prevStore?.filter === newStore.filter) { return prevMutatedStore; } return newStore.items.filter((item) => item.includes(newStore.filter)); }, });
November 11, 2025 at 1:08 PM
alexdln.com
And this is the file that allows to control all such changes and guarantee the reliability of their typing
// interface TestStore { // count: number; // name: string; // user: { // id: number; // email: string; // }; // theme?: "light" | "dark"; // items: string[]; // } // Update should accept partial store update({ count: 1 }); update({ name: "New", theme: undefined }); // @ts-expect-error - should not accept undefined value if it was not defined in the store update({ name: "New", items: undefined }); update({ name: "New", items: [] }); update((prev) => ({ count: prev.count + 1 })); // @ts-expect-error - should not accept invalid key update({ invalidKey: "value" }); // @ts-expect-error - should not accept undefined value if it was not defined in the store update((prev) => ({ count: prev.count + 1, items: undefined })); update((prev) => ({ count: prev.count + 1, items: [] }));
November 11, 2025 at 1:05 PM
alexdln.com
These simple checks make updates and optimization much easier, and also provide strong protection against accidental generic breakage
// Test 4: useStore with keys function testUseStoreWithKeys() { const data = useStore(Store, { keys: ["count", "name"] }); // Should return only selected keys const count: number = data.count; const name: string = data.name; // @ts-expect-error - should not have unselected keys const user = data.user; // @ts-expect-error - should not accept invalid keys const invalid = useStore(Store, { keys: ["invalidKey"] }); } // Test 5: useStore with mutation function testUseStoreWithMutation() { // Mutation without keys const doubled = useStore(Store, { mutation: (Store) => Store.count * 2, }); const doubledType: number = doubled; // Mutation with keys const computed = useStore(Store, { keys: ["count", "name"], mutation: (Store) => `${Store.name}: ${Store.count}`, }); const computedType: string = computed;
November 11, 2025 at 10:22 AM
alexdln.com
When implementing a small improvement resulted in half the types being refactored 🫠

(In fact, writing a file with tests for all type variations was one of the best ideas for a package like this)
A screenshot of the Github changes shows that many lines have been removed in the GlobalStoreConsumer type overloads.. More details at https://github.com/alexdln/contection/pull/28/files#diff-f09367ce42e4a7deddfb5df986db284563dae0359aad0f4ba4a21923746aa992
November 11, 2025 at 10:19 AM
alexdln.com
I'm getting used to writing out all my ideas, as I'm starting to think through more issues in parallel and forgetting about many parts. It's also more public-friendly, which clearly benefits the package 😊
Support prevMutatedStore argument in dispatch callback #27 @alexdln Description In some cases, a mutation will return an object, which will be created anew each time the mutation is called. This means a re-render will occur every time the subscribed keys change, even though the object's contents may remain the same. This issue will add the ability to handle such cases. Users will be able to immediately return prevMutatedStore if the data they need has not changed (similar to working with setState). The issue only concerns scenarios where there is a mutation and it returns an object; in other scenarios, everything is quite optimal.
November 10, 2025 at 9:09 PM