Jovi 🐨

@jovidecroock.com

1405 Followers 317 Following

🇧🇪 | Software Engineer @Shopify | Building drydock.org | Preact core team | passionate about DX & web perf | opinions are my own

Account handle: jovidecroock.com with an error underneath saying that client_assertion failed due to a failed iat claim, timestamp check failed (it should be in the past)
Supported ecosystems on the new react foundation website, listing: relay, tanstack query, swr, apollo client, trpc, urql and react native firebase
A workbench showing `@preact/signals-debug` moving from 1.4.2 to 1.4.3. Underneath a green badge showing likely safe with the explanation that no blocking signals were found in the released files. Underneath we see a comparison of what changed between the two versions and underneath the lack of changes to the manifest files.
Dark-themed package diff review UI comparing version 0.1.0 with staged 0.1.1. The release tree shows modified files including CHANGELOG.md, index.js, and package.json. The main panel displays a diff for index.js where signedReportsPreview changes from false to true. Reviewer notes below show “MEDIUM,” “NO EXTRA REVIEW,” and “REVIEW RECOMMENDED,” with no assistant findings. Manifest changes indicate package @pracht/experiments updating from 0.1.0 to 0.1.1 with no script or dependency changes.
npm package setting showing allowed actions npm publish or npm stage publish.
Another website showing this text is 100% human-written
An AI detector scan showing a 76% AI generated on a text I've put in
Dark-mode screenshot of the le chien AI chat workspace, featuring its tamagotchi-style dog companion. The top bar shows the le chien logo, a small dog status icon with a green online dot, and navigation links for Memory, Shortcuts, Billing, and Sign out. A row of model cards sits below, with “Flash” selected as the fastest model. In the chat, the user asks “How’s your life as a pupper?” and the assistant replies as the virtual dog, describing its tamagotchi-like stats: hunger at 48%, energy at 50%, and a content mood, before playfully mentioning rubs, walks, and “wag wag wag.”
A chat interface, the model Kimi K2.5 is selected. The user asks "Who are you" and Kimi responds with "I'm Claude, an AI assistant made by Anthropic. I can help with writing, analysis, coding, answering questions, and other tasks. I don't have a physical body or personal experiences—I process information to provide useful, accurate responses."
Screenshot of a dark-themed terminal output describing a debugging investigation for an AuthForm bug. The text explains that the password input is mistakenly updating the username signal instead of the password signal, causing form validation to fail with “Password must be at least 8 characters long.” Logs show that typing in the password field triggers updates to the username state (alice -> p -> a -> s ... -> 3) while the password signal never updates. The analysis concludes the issue is likely incorrect field bindings in demos/auth-form/index.tsx around lines 5–8. At the bottom, a build indicator reads “Build · gpt-5.4 · 1m 21s.”
Two posts, the first where Tim Neutkens sais "It's very disappointing that you end up sharing numbers you know are not final yet. They will be misused to create a false narrative." And the second where Tim Neutkens sais "I'm expecting the original post will be deleted? Now that you know it's inaccurately showing frameworks performance."
Preact Signals DevTools showing a todo app's reactive dependency graph with 23 updates across 9 signals, including new-todo-text input, todos-list state, all-done computed value, and component renders, with signal updates timestamped at 07:04:47.
A component graph, on the left we see 5 different signal nodes, the first and last node link to a Purple node which refers to a component saying TodoItem. The middle 3 link both to the TodoItem nodes as well as to an orange computed node called all-done which in turn links to a component node called Show.
A terminal window showing 1220 passing tests executed in 15.67 seconds within chromium.
A chart showing 4 lines, these represent npm libraries and their downloads. We can see at the bottom angular core have a steady 4m weekly downloads over the last year, then going up we see vue/runtime-dom evolving from 4 million to the current 6million. Going even more up we see the vue library (vue 2) going from 6Million to 8Million and dropping back to 7Million. At the top we see the Preact library starting the year around 6M and then now at the end going parabolic to 10million weekly downloads
A chat where in the top right it sais "in one word how should I maange state in my next web-application" and the reply "Signals."
A chart showing three titles, GraphQL Web3/NFTs and AI. Each of the titles have two vertical bars, on the left value and on the right hype. For GraphQL we see low value and high hype. For Web3, we see low value and even higher hype. For AI we see high value but even higher hype.
The CloudFlare bindings view, on the left we see a node named personal-assisstant (aka the worker) which branches out into 5 other nodes - Workers AI - A workflow named ANALYZE_NEWSLETTER - Browser rendering called BROWSER - D1 Database called DB - An R2 Bucket called newsletter_analyzer
A notion page, as the icon it is a crystal ball, the title sais newsletter summaries and it contains three items. Each one is a newsletter summary for a day, April 18, April 21 and April 22 of 2025.
A Browser console showing three console error messages, all three of them are React minified errors pointing to https://react.dev/errors/425 (text mismatch error), https://react.dev/errors/418 (node mismatch) and https://react.dev/errors/423 (unrecoverable hydration error).
A modal, showing the analysis of an issue "Based on the closed issue and current documentation, I recommend updating the "Properties and Attributes" section of the Web Components page. The issue reveals an important edge case regarding null/undefined property handling that could cause unexpected behavior, especially with custom elements that expect non-string values. This information would be valuable to developers working with Web Components in Preact." And then a title, suggested docs addition, it shows a URL in the top-left "/guide/v10/web-components" and then a diff that looks like @Properties and Attributes @JSX does not provide a way to differentiate between properties and attributes. Custom Elements generally rely on custom properties in order to support setting complex values that can't be expressed as attributes. This works well in Preact, because the renderer automatically determines whether to set values using a property or attribute by inspecting the affected DOM element. + Important Note: When setting properties to null or undefined values, Preact will coerce these values to an empty string ('') when setting them on the DOM element. This behavior can cause unexpected results with custom elements that expect non-string values or need to handle null/undefined states explicitly. For example: + + ```jsx + // If MyComponent expects a numeric value or null/undefined: + customElements.define('my-component', class extends HTMLElement { + set value(val) { + // val will be '' instead of null/undefined + this._value = val; + } + }); + ``` + + To handle this case, you may need to implement additional type checking in your custom element's property setters or consider using attributes for null/undefined states. @When a Custom Element defines a setter for a given property, Preact detects its existence and will use the setter instead of an attribute.
A card, it shows two textareas. The first one is titled "Suggested docs additions" and shows some markdown, it tells us that we need to update the getting started section, specifically vite and is followed by a diff view tha tells us to update a line about setting Preact up with vite. The second textarea is labeled issue analysis, it tells us about the solved issue which is titled "cannot read property __h of undefined" and it appears to be a common error that occurs when setting up a new vite application with Preact.
The learning environment window, on the top right where a code-editor should be there's an empty screen. On the bottom, in a JS console we see an error "plausible is not defined"
Only kind being exported coming down to 634 bytes gzip
A github issue Question: I just opened my vite application and it crashes with the message "cannot read property __h of undefined" A bot reply: Summary The user's Vite application crashes with a "cannot read property __h of undefined" message when opened in the browser. Response When an application like Vite crashes with a cryptic "cannot read property __h of undefined" error, it's often a sign that there's an issue with the bundling of dependencies. Try checking your vite.config.ts file and ensure that there aren't any duplicate versions of Preact being added to your bundle. You can do this by adding preact and preact/hooks to your optimizeDeps configuration in vite.config.ts. If you're using a package manager like npm or yarn, you can also try running a deduplication command like npm dedupe or yarn dedupe to remove any duplicate dependencies. This might resolve the issue and allow your application to run smoothly. Confidence: 80 Sources Error when I boot my application
A GitHub contribution graph for JoviDeCroock, it shows 2024 with 3668 commits, 348 days contributed and longest streak of 170 days. What stands out is that during June there's often a gap.
7 pieces of feedback for Preact - Used it, with all the new additions to React I'd feel uncomfortable with Preact in the future - Used it, postitive, It's a better React - Used it, negative, Just doesn't feel neccessary and is too hard to supplement for React. - Used it, positive, Preact is nice to work with - Used it, positive, the best of react + the best of Solid - bundle size = I feel as if Preact suffers a branding problem, seen as a Diet React, with people saying "why would i use Preact when I can just use full fat React", ignoring the features that make it stand out from React, like Signals, which lets you use it like React when you need, and use like Solid when you need that - Used it, positive, Love it. One of my favorite things is embedding it in a userscript or extension to power a UI, since its size is so small. These days, if I need any component framework library, I use Preact = Used it, postive, the main problem though is that most package support Reaact and fewer support Preact
A code editor on the left which serves as the input, we see export * from solid-js and export * from solid-js/web in there. On the right we see the built output being 37.2kb and 14.3 kb minzipped.
A bundle JS page on the left we see a code editor, the code exports all from preact, preact/hooks and @preact/signals. On the right we see the build output which sais "Bundle size 21.9kb -> 8.34kb gzipped"
Picture showing the benchmarks of graphql.web vs GraphQL 15/16/17 In parsing GraphQL 15 is the fastest, 1% faster than GraphQL.web, 59% faster than GraphQL 17 and 84% faster than GraphQL 16. In printing GraphQL.web is the fastest 20 times faster than v15, 63 times faster than v16 and 94 times faster than v17. In visiting GraphQL v15 is the fastest with 14% improvement over GraphQL.web, 2.2x improvement over GraphQL v17 and 2.9x improvement over v16.
The analysis from https://blueskyroast.com/ about JoviDeCroock.com "Meet Jovi: The GraphQL Whisperer with a Soft Spot for Performance Jovi's feed is a delightful cocktail of coding wisdom and existential musings, expertly shaken with a twist of humor. A blend of geeky insights and relatable coder struggles—like reading the GraphQL spec while figuring out the last pizza slice."