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
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
Awareness is the best thing you can do.

Today you might repeat something harmful to “that author on bsky”, tomorrow - to a close friend, and later - to your child. Where you draw the line between hatred and love is up to you.

Ignorance can come at an unbearably high cost.
#TransgenderAwarenessWeek
November 14, 2025 at 3:00 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
While searching for ways to speed up React apps, I decided to read up on the history of React Forget (compiler). I understand that it and Contection share the same goal, but they approach it from different angles...
November 14, 2025 at 10:44 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
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
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
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
Broken scrollbars have become too common problem 🫠
This is what happens when the entire company is Apple-powered...

* Please don't use 100vw within a scrollbar element, use 100% *
November 10, 2025 at 9:34 PM
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
alexdln.com
How complex and complicated any update becomes at some point. It's great that they're coming up with new abstractions instead of creating hundreds of workarounds or crutches to make it work
Fix: Activity should hide portal contents #35091 Merged acdlite merged 2 commits into facebook:main from acdlite:activity-portals-fix 16 minutes ago +245 −57 Conversation 11 Commits 2 Checks 240 Files changed 4 commented 9 hours ago This PR updates the behavior of Activity so that when it is hidden, it hides the contents of any portals contained within it. Previously we had intentionally chosen not to implement this behavior, because it was thought that this concern should be left to the userspace code that manages the portal, e.g. by adding or removing the portal container from the DOM. Depending on the use case for the portal, this is often desirable anyway because the portal container itself is not controlled by React. However, React does own the contents of the portal, and we can hide those elements regardless of what the user chooses to do with the container. This makes the hiding/unhiding behavior of portals with Activity automatic in the majority of cases, and also benefits from aligning the DOM mutations with the rest of the React's commit phase lifecycle. The reason we have to special case this at all is because usually we only hide the direct DOM children of the Activity boundary. There's no reason to go deeper than that, because hiding a parent DOM element effectively hides everything inside of it. Portals are the exception, because they don't exist in the normal DOM hierarchy; we can't assume that just because a portal has a parent in the React tree that it will also have that parent in the actual DOM. So, whenever an Activity boundary is hidden, we must search for and hide any portal that is contained within it, and recursively hide its direct children, too. To optimize this search, we use a new subtree flag, PortalStatic, that is set only on fiber paths that contain a HostPortal. This lets us skip over any subtree that does not contain a portal.
November 10, 2025 at 4:03 PM
alexdln.com
I was choosing an emoji and realized it could’ve been me with my mid-level mechanical qualification from the factory 😅
alexdln.com Alex @alexdln.com · 4d
Well, now it’s even more stable and reliable 🧑‍🔧
[Success] Daily auto tests for React Canary Daily auto tests for React Canary #3: Manually run by alexdln main 2 minutes ago 29s [Failed] Daily auto tests for React Canary Daily auto tests for React Canary #2: Manually run by alexdln main 11 minutes ago 25s [Failed] Daily auto tests for React Canary Daily auto tests for React Canary #1: Manually run by alexdln main 20 minutes ago 28s
November 10, 2025 at 3:51 PM
alexdln.com
Hmm, interesting cursor update!
Now I misclick the File tab every time...
November 10, 2025 at 3:09 PM
alexdln.com
I'm trying to decide if I need to make dispatch in Contection asynchronous.

And I'm like: "How should they work then? What's the queue? What if something changes in the meantime? What, how, where, aaaAAAA"
November 10, 2025 at 2:36 PM
alexdln.com
I love my sabbatical too much and physically can't apply for positions.
If I die of hunger - know that I died happy and in writing packages!
November 10, 2025 at 2:34 PM
alexdln.com
I love those moments when the interviewer's gaze speaks louder than words when asking about a company or product
November 10, 2025 at 2:30 PM
alexdln.com
"A second before jumping"

Morning!
A blurry photo of a golden-brown dog running on green grass in a park, likely about to jump at the photographer, with trees and people visible in the sunny background.
November 10, 2025 at 9:06 AM
alexdln.com
Well, congratulations, Bluesky, on your growth! This is another sign that the platform is growing and developing, which is great.

* I hope all users here know that such messages and links have nothing to do with reality *
Dear user, Your Bluesky access will be paused if safety verification is not completed within 24 hours. This measure is necessary to confirm the integrity of your account. Verify your account within 24 hours to complete verification and restore full access. 🔗 is.gd/**** We appreciate your timely attention to this matter. Sincerely, © Bluesky Security
November 9, 2025 at 10:18 PM
alexdln.com
I finally finished them. Now the magic of Contection is completely covered in tests!
issue-6 add unit tests +6,278 −479 > contection-tests@1.0.0 test /home/runner/work/contection/contection/tests > jest PASS src/unit/__tests__/useStore.test.tsx PASS src/unit/__tests__/consumer.test.tsx PASS src/unit/__tests__/provider.test.tsx PASS src/unit/__tests__/createStore.test.tsx PASS src/unit/__tests__/useStoreReducer.test.tsx Test Suites: 5 passed, 5 total Tests: 57 passed, 57 total it("should re-render only when mutation result changes", () => { let renderCount = 0; const UpdateComponent = () => { const [, update] = useStoreReducer(TestStore); return <button onClick={() => update((prev) => ({ count: prev.count + 1 }))}>Update</button>; }; render( <TestStore.Provider> <TestStore.Consumer options={{ mutation: (store) => (store.count === 2 ? "two" : "not two"), }} > {(result) => { renderCount++; return <div data-testid="result">{result}</div>; }} </TestStore.Consumer> <UpdateComponent /> </TestStore.Provider>, ); expect(renderCount).toBe(1); expect(screen.getByTestId("result")).toHaveTextContent("not two"); act(() => screen.getByText("Update").click()); expect(renderCount).toBe(1); expect(screen.getByTestId("result")).toHaveTextContent("not two"); act(() => screen.getByText("Update").click()); expect(renderCount).toBe(2); expect(screen.getByTestId("result")).toHaveTextContent("two"); });
November 9, 2025 at 9:59 PM
alexdln.com
I thought I needed to develop some additional tools to make Contection compatible with forms. But it seems to already handle it perfectly!
export const FormComponent = () => { const [store, dispatch] = useStoreReducer(ShopStore); return ( <Form> <Input placeholder="Name" /> <Input placeholder="Email" /> <Input placeholder="Phone" /> <Input placeholder="Address" /> <Label> <Checkbox placeholder="Select" onChange={(e) => dispatch({ payBy: e.target.checked ? "credit_card" : null })} defaultChecked={store.payBy === "credit_card"} /> Pay with credit card </Label> <ShopStore.Consumer options={{ keys: ["payBy"], mutation: (newStore) => newStore.payBy === "credit_card" }}> {(payByCreditCard) => ( <Activity mode={payByCreditCard ? "visible" : "hidden"}> <Input placeholder="Credit Card Number" /> <Input placeholder="Expiration Date" /> <Input placeholder="CVV" /> </Activity> )} </ShopStore.Consumer> </Form> ); };
November 9, 2025 at 2:13 PM
alexdln.com
I love writing tests for external solutions. You immediately find the specific case you were planning for, but it doesn't work!
November 9, 2025 at 1:31 PM