Category Archives: General

SvelteKit Form Actions bound to TypeScript class + Validation (yup) w/dynamic array.

Last year, i wrote some posts using Svelte w/a forms lib + validation. Now that SvelteKit 1.0 is out, it includes new Form features, specifically Form Actions, which is a great way to do form handling in a very natural way for web browsers and web apps. Here, i’m intending to build a proof-of-concept which […]

Creating a callable Toast component in Svelte using bind:this (DaisyUI optional)

I’m using Svelte+Kit for new development, and also starting to use DaisyUI, i found a need to use the Toast component to show a message which appears for a while, then disappears, such as an error message on a form submit, or a success message. Creating a Svelte component called Toast.svelte would be easy. The […]

QRcode component in Svelte, featuring bind:this

I was just porting a hybrid mobile web app from Ionic+Angular to SvelteKit+Capacitor, and there was a qrcode generator page, where a number of qrcodes get generated in a sequence. I wasn’t happy with the custom libraries so i opted to use the generate node-qrcode package, which supports the ESM import syntax. Some other libs […]

Nhost Hasura Auth + SvelteKit implemented simply

This is a short and sweet example of using a SvelteKit frontend project with Nhost authentication. Overview Nhost is the serverless backend built on Hasura (graphql server backend). NHost is built on it’s open source Hasura Auth library (using JWTs). They are nearing v2 official release and have sample templates for React and Next.js, but […]

Svelte Complex Forms, part 3 – components using get/setContext() for less passing props

In my prior two posts, i created a more complex dynamic and hierarchical form, including radio buttons, and extracted the “sveltey” html into a couple components. In this post, i’m refining my components a bit, to reduce the boilerplate attributes needed for each instance. Currently, they look like this: I would like to remove the […]

Svelte Complex Forms with radio buttons, dynamic arrays, and Validation (svelte-forms-lib and yup)

Overview Building new web apps in 2021 using a Svelte front-end is fun, with more reactivity and less code. Almost any web app will have some kind of form, and it helps to have a basic form builder and validation framework. In this post, i’ll be exploring the svelte-forms-lib library to create a form, bound […]

How to connect Hasura GraphQL real-time Subscription to a reactive Svelte frontend using RxJS and the new graphql-ws Web Socket protocol+library

By Raul Nohea Goodness 2021 Overview I am in the middle of my about once or twice-a-decade process of reevaluating my entire web software development tools and approaches. I’m using a number of great new tools, but a new little JS lib i’m starting to use to tie them all together, hopefully in a […]

Partial Updates with HTTP PATCH using and the JSON Patch format (RFC 6902)

I have been looking into implementing partial updates using the HTTP PATCH method using and the JSON Patch format (RFC 6902) This is of interest since many updates do not neatly match the PUT method, which often is used for full entity updates (all properties). PATCH is intended to do one or more partial […]