Julien Delort

Introducing informel, a lightweight framework-agnostic headless forms library: juliendelort.github.io/informel/. Main features 👇 (Using React? Check out the last tweet). #forms #formlibrary #javascript #react #webcomponents #FrontEnd

I wanted to try #NotebookLM's feature to generate a podcast, so I did it with this article I wrote a few months back: dev.to/juliendelort/c… The result just blew my mind 🤯

Just tried @excalidraw "text to diagram" feature. I didn't expect much from this prompt and I have to admit, I was blown away 🤯

Better late than never, I've just published my first-ever blog post! Over the past 6 months, I've had to either create or refactor a custom checkbox component twice. So I thought I'd share what I've learned along the way. dev.to/juliendelort/c…

In Next.js, if you wish you could access the search params from the Layout, this workaround, involving parallel routes, looks interesting. Could potentially be used for route params too. nico.fyi/blog/workaroun…

@TkDodo Got a similar case where key on <Suspense> is needed: working with search params on a nextjs route. When navigating to the same route with different search params, I needed a key on <Suspense> for the fallback to be shown again while loading the new data.

what 😮?

I used github.com/gothinkster/re… to build a demo app using: - Next.js (RSCs) - Prisma - Tailwind Repo: github.com/juliendelort/c… Demo: conduit-nextjs.vercel.app

Changed my mind about @nextjs's app router & RSCs. Tried last year, found it too complex and had a lot of issues. Decided to try again with a side project, things were much smoother. No issues and the mental model now makes sense. Also, those perfs... (project info in reply)

@devongovett @rauchg A form is not strictly required here, a server action can be used directly with an event listener: #event-handlers" target="_blank" rel="nofollow noopener">nextjs.org/docs/app/build… The a11y concern of using field-less forms is interesting though, would love to hear more about it. Wondering if that's an issue with Remix as well 🤔

I’m worried about the accessibility implications of abusing forms like this. Is a form with no fields really a form? If every button is wrapped in a form it’ll make screen reader landmark navigation pretty useless. Plus, there are places where you want to trigger an action that a form/button is invalid (eg inside a menu, only menu items are allowed).

Couple cool App Router patterns that blew my mind. 1️⃣ Logout is a <form>, not a <Link> If it quacks like a form, needs CSRF protection, mutates remote state, has a pending state, it's a Server Action, not a <Link> or effect…

If you're fuzzy about the new concept of "partial prerendering" in @nextjs, this video explains it very well: youtu.be/MTcPrTIBkpA

This is absolutely wild 🤯 m.youtube.com/watch?v=FWn8HB… Especially the part about using `view-timeline`, `anchor-name` and `animation-timeline` to put the current value of the range in a CSS variable without JS!

Damn! How did I not know about this VS Code feature earlier?

@housecor How about: 3. Server side rendered react app (Remix or Next.js page router for example)

Imagine you’re building a React app. How do you decide between these two options: 1. Traditional SPA 2. React Server Components (RSC) SPA benefits: ✅ Proven and mature. ✅ Lets us use more of the React ecosystem of third party libraries. ✅ Simple. Easy to understand. ✅ Cheaper and easier to host. RSC benefits: ✅ Likely renders the first page faster. ✅ Likely saves bandwidth (each RSC adds zero K to bundle). ✅ Use heavy libraries solely on the server to save bandwidth ✅ Requires less code for data fetching (may even call the DB directly instead of hitting an API). Given these tradeoffs, if we already have a REST/GraphQL API, or we want cheap, simple hosting, I lean toward SPA. If we don’t have a web API, or performance is critical, I lean toward RSC.

Informel validation strategy: youtube.com/shorts/wREKFcE… First validation on blur, then validate corrections as the user types.

No-build reactive JS libraries make me excited. Just came across this list unsuckjs.com containing a few gems, like vanjs.org. That list would have made a nice advent calendar!

After spending a few days working on a @QwikDev app, followed by some time spent this week working on a Next.js app, here are some observations: The API surface area of Qwik is pretty small. I read through most of the docs in a couple of hours and was able to start building. The experience was smooth and enjoyable. Very few moments of frustration or surprise - things just seem to work the way you would expect them to once you grasp a few basic principles. Working with Next.js / React is filled with far more frustration and feelings of "well.. it works but I'm not at all sure I should be doing it like this 🤷". I ended up poring over GitHub threads full of other people trying to figure things out just like me. Bear in mind I'm a bit of a noob at both Qwik & React. But from this perspective Qwik is just a much more satisfying experience. Another example: running my qwik app in dev mode feels almost as fast and solid as in prod. The Next app on the other hand has a sluggish dev cycle - waiting for things to build & tons of confusing noise in the console. On top of that, the perf of the Qwik app is just absurd - basically 100% green across the board without even trying. Next app I have to build, I'll probably be using Qwik.

Came across this tiny library, at a meetup yesterday: scrollapp.org/rawjs/ It helps create DOM elements in vanilla JS. Very simple, but some clever stuff in there with events and styles. Worth checking out when working with vanilla JS 👀 (thinking web components)

I've completed Day Six - Advent of TypeScript 2023 typehero.dev/challenge/day-6 #AdventOfTypescript

@BHolmesDev @jamesqquick Can't agree more. This is the behavior I've mplemented in @informel_js informel.site/showing-errors

@jamesqquick Absolutely! Best default is: - validate on-blur for the first pass (no distractions) - if there's an error, validate on-input (instant feedback as you correct)

Some people disagree but I really don't think you should validate inputs until the user tabs away. This is annoying and distratcting 👇

@markdalgleish @CSSHooks I was _hooked_ at "no build step"!

If you’re using Tailwind with React, what are your thoughts on @CSSHooks? Check it out first if you haven’t already. Would you switch? If not, why not?

@CSSHooks Very promising!

1/6 In response to community feedback, we'll soon be making some small changes in our recommended format for defining hooks. Don't worry: We aren't breaking compatibility in any way!