Jovi 🐨
LightNews LightNews
jovidecroock.com
Jovi 🐨
@jovidecroock.com
1.2K followers 220 following 680 posts
🇧🇪 | he/him | Software Engineer @Shopify | passionate about DX & web perf | opinions are my own
Posts Replies Media Videos
jovidecroock.com
Not sure what's been happening to the NPM downloads of Preact but we've been going parabolic these past few weeks. I know that downloads don't indicate much but always fun to look at a project you've been working on for 7 years gain popularity

npmtrends.com/@angular/cor...
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
September 21, 2025 at 6:17 AM
jovidecroock.com
GPT-5 would really help you make the best. web-apps
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."
August 9, 2025 at 6:06 AM
jovidecroock.com
Fuse may not have taken off but it had a pretty amazing video showing the power of gql.tada gql-tada.0no.co
July 22, 2025 at 6:46 PM
jovidecroock.com
I felt like commenting on this, not with regards to AI or NFT's. Just about GraphQL, I agree that when GraphQL initially came out in 2015 that there was a lot of hype and that the community really didn't benefit from the perceived benefit.

The hype <--> value was at a weird point
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.
June 9, 2025 at 9:39 AM
jovidecroock.com
I also really love the bindings view, it's so clean
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
June 7, 2025 at 12:11 PM
jovidecroock.com
It's just fun to build things on @cloudflare.social - I have my domains registered at CloudFlare and I decided to send all of my newsletters to one of them.

I added an email worker that ingests the newsletter, visits all links and writes a daily summary to Notion for all of them.

What a concept!
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.
April 22, 2025 at 4:46 PM
jovidecroock.com
The doge.gov site should look at their hydration mismatch errors...

Also stop logging your data in production 😅
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).
February 14, 2025 at 12:59 PM
jovidecroock.com
An example
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.
January 28, 2025 at 8:45 AM
jovidecroock.com
I've been loving this little project I've been working on 👀
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.
January 19, 2025 at 9:58 AM
jovidecroock.com
What I think is happening is that plausible is doing some kind of event when you go from the previous page to the next page.

When I disable shield, refresh, enable shield, refresh, it will just work.
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"
January 6, 2025 at 10:51 AM
jovidecroock.com
It is tree-shakeable, a dist folder does not imply that something is not tree-shakeable in the slightest. I would however encourage you to not bundle in dependencies like graphql.web as that would prevent it from sharing with plugins/...
Only kind being exported coming down to 634 bytes gzip Only print being exported coming down to 1093 bytes gzip
December 23, 2024 at 7:53 AM
jovidecroock.com
Yes, it does, attached a little example from early testing
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
December 21, 2024 at 11:18 AM
jovidecroock.com
Looks like there's a theme in when I am not contributing, the yearly music festivals hit hard 😅
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.
December 19, 2024 at 9:35 AM
jovidecroock.com
I'll never not appreciate the people who go through the effort of leaving a comment in State of JS. These are the ones for Preact and as a maintainer I'm forever grateful given the time commitment these things are.
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
December 18, 2024 at 7:43 AM
jovidecroock.com
The rule was export *, also where is your hooks implementation 😇

Jokes aside, huge fan of solid!
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.
December 7, 2024 at 9:06 AM
jovidecroock.com
Fear not, you can have VDOM, hooks and signals for 8.35kb 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"
December 7, 2024 at 8:09 AM
jovidecroock.com
For the record, the latest bench results
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.
December 7, 2024 at 7:32 AM
jovidecroock.com
Not sure where they got the humour thing from, I am exclusively serious, we're talking GraphQL here.

blueskyroast.com/roast/jovide...
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."
December 1, 2024 at 2:33 PM