Hacker News Reader

Comment by petesergeant | Hacker News Reader

I love TypeScript, and I think React is mostly very elegant, and I still find front end work to be a real chore. Fucking around with forms and CSS and responsive breakpoints is not my idea of a good time!

View on HN

You shouldn't need breakpoints 98% of the time. Use flex box and grid. Failing that, try container queries.

A really good form is still a PITA. I've been trying to perfect it for years but haven't found anything to sync frontend and backend validation that doesn't suck/involve a lot of boilerplate.

Can you detail your troubles with syncing frontend and backend validation?

Well, for my latest iteration, I'm using Bun+Elysia on the server which uses Typebox for request validation+schema, which is effectively JSON Schema so you could do something similar in other languages. I can pass that schema down to the client/browser, and I could use AJV to run that schema against the request before I send it to the server, but there's a couple tricky parts.

1.Json schema/AJV return not very human friendly results and they're hard to associate with a specific field to display the error nicely 2. If you want to validation as the user is typing to clear errors as they're satisfied, you have to run the entire schema, not just for that one field 3. Any async validations like checking if a username is unique is harder if not impossible with this approach

Have you checked out https://kirimase.dev?

This looks excellent, thank you. I'm iterating a lot of startups at the moment, and sort of home-growing a framework, but each new product I want to replace bits of it with off-the-shelf tooling, and this is an excellent selection of components.

No, hadn't heard of that. Looks like it's doing a bit too much. I'm not sold on ORMs or auto-genned scaffolding apps. The tRPC lib they're using OTOH looks interesting. Kind of. Looks like I'd have to give up my server lib/router for theirs, but then it looks like they botched the client-side error formatting which is the one thing I haven't solved: https://trpc.io/docs/server/error-formatting How is this good UX?

    <pre>Error: {JSON.stringify(mutation.error.data.zodError, null, 2)}</pre>

Formik (https://formik.org/docs/api/errormessage) does OK with the "touched" and "errors" objects, that helps you render out the error messages nicely, next to the inputs, but for my very first use-case I wanted to validate a File input and it seems to struggle with that a bit. Can't do it without suppressing some TS errors but maybe it's an edge case. And it of course doesn't handle the server half of the equation. So.. yeah.

Reply on news.ycombinator.com