I Shipped...

I fixed a CSS bug on the Jazz homepage where unwanted scrollbars were appearing all over the page. A recently added style on buttons was causing content to overflow its containers, so I removed the problematic rule.

macOS defaults to using a weird overlay scroll bar when you’re using a trackpad, which meant that the scrollbars were rendering over content, which looked ugly and unprofessional. I fixed it.

The Jazz docs site had a build issue where two pages were trying to use the same URL path, causing conflicts. I resolved the conflicting routes so the site could build and deploy successfully again.

We were starting to outgrow our existing nav structure for docs, with tens of articles and only two hierarchical levels. I extended the hierarchy to allow a third level of nesting, as well as collapsible subheadings in the nav menu.

Jazz is a framework for building collaborative apps, and its docs site had a quickstart guide for authentication. I extended this guide to show how to add passkey login (the kind where you use your fingerprint or face to sign in) alongside other auth methods, so developers can see how to offer multiple ways for users to log in.

We have some automated tests that run when we add new code to our repositories. For a while now, the end-to-end tests have been failing. I spent some time digging into the reasons for this, and fixed the tests so that they no longer fail when newer versions of Node are used to run the tests.

Jazz allows you to authenticate in many different ways. One way is using passkeys, and this was covered in the authentication quickstart guide I published last week. This adds an additional authentication method, passphrases, and shows how to use the two different authentication methods in conjunction to create an effective ‘recovery key’ option.

Our existing SSR agent was recommended for use to allow Server-Side Rendering in Next.js apps. However, I realised that the module itself is written in pure TypeScript, and there’s no good reason for it to be React-only. I modified the Svelte provider, changed the export, and updated the docs, as well as creating a small example app demonstrating how the SSR agent can be used to perform Server-Side Rendering in SvelteKit too.

We have a CodeGroup component which allows us to display some code with a copy button. This CodeGroup allows us to write special comments like // [!code --:1] to mark a line as ‘removed’. However, these were still being copied, resulting in inaccurate code snippets being copied when users clicked the button.

This PR removes those lines from the copied text.

I created a GetAPIKey snippet which can be re-used all over the docs to have a single, consistent message regarding API keys, and allow us to simplify updating and maintaining all these references.

The snippet can also optionally display how the API key can be used.

Most of our users need basic features like authentication and collaboration in their apps, but the guides we have are currently very reference-y and not so much practical implementation guides.

I wrote one guide that covers permissions in Jazz using groups, and how to share data and collaborate on it, and a second which shows how to add passkey authentication into your app using the basic passkey UI.

This should make it easier for users to build an app with the kind of features a real-world app needs.

In principle, according to the WebAuthn spec, cryptographic challenges should be at least 16 bytes long, however in our existing implementation, we had 3 bytes. Although this is technically within spec, it was causing issues for some users using third party passkey managers such as KeePassXC.

This PR builds on previous work and extends the challenge length to 20 bytes.

Due to various challenges with TypeScript generics, we can’t make the $jazz.ensureLoaded, $jazz.set and $jazz.subscribe methods typesafe on discriminated unions. This was causing warnings for one of our adopters in their project.

Although this was previously covered in the docs, it was hidden towards the bottom of the page.

This PR makes it clearer and more prominent.

By default, all credentials are stored under jazz but this makes it impossible to avoid namespace clashes (for example, if you have multiple apps running on the same domain, or in case you want to do local development of more than one Jazz app at a time.

This PR extends on work that was already done to add an option to the Svelte provider, allowing users to specify the prefix under which their credentials will be stored.

Jazz is a framework for building collaborative apps. Based on feedback from the community on Discord, I updated the docs to better explain when and why you’d use a particular data-loading function called ensureLoaded, making it clearer for developers who were confused about its purpose.

Our documentation on how to subscribe to CoValues and load them deeply was complex and difficult to reason about. I simplified, consolidated the examples, and created new illustrative content to make it clearer and easier to understand for users of varying knowledge levels.

When users try to build their applications, TypeScript will compile Jazz as part of their dependencies. However, there are a couple of options that Jazz doesn’t currently work well with. This PR makes it clear to users what options need to be set for compilation to work properly.

We launched our cloud dashboard recently, allowing users to sign up for API keys rather than using their email address. However, across all of our docs, we had verbiage that users should use their email as a temporary API key.

This PR addresses that by changing the wording to drive traffic to our dashboard instead of recommending email addresses.

We have a component in React, React Native and Svelte which can be used to display images with progressive sizes. Although we have an option to show a placeholder, and loading this is normally fast, in case there is a slower load (e.g. network issue, etc.), then there is a flash where the browser’s default placeholder will be displayed (normally just the alt text of the image).

This PR fixes that by instead setting the image to a transparent single pixel (which gets stretched as needed to fit the image based on the size needed by the user). Instead of getting a flash of alt text, nothing will display instead, until the Image Definition is loaded, at which point the default behaviour (show the placeholder or the alt text) will kick in.

Jazz is a framework for building collaborative apps. The docs site had a big, attention-grabbing warning box telling people they needed Node.js version 20 or higher. I toned it down to a simple note underneath the setup instructions, since it was more prominent than it needed to be.