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.
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.
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.
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.
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.
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.
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.
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.
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's documentation site lets you switch between different frameworks (like React and Svelte) to see relevant code examples. I fixed a bug where some parts of the page wouldn't update when you switched frameworks -- they'd stay stuck showing the one you first loaded. Now the whole page updates consistently when you pick a different framework.
Previously, users who wanted to get started with Jazz could either use the command line tool to scaffold a project, or they could work through an installation tutorial which covers the practical side of getting Jazz added to an app, but doesn't guide folks to an 'ah ha!' moment.
I wrote a quickstart guide which works for both React and Svelte, and added a follow up which shows how to use Jazz on the server with a worker. These guides will help users understand the core concepts of Jazz.
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.
Our existing docs explained how to use getters to recursively reference schemas, but weren't very clear about how to avoid ReferenceErrors caused by schemas creating circular references which resulted in references being evaluated while they were still in the temporal dead zone.
I added some additional keywords and explanation to help folks find these docs more easily when they're searching, as well as explaining the use cases in a bit more detail.
Jazz is a framework for building real-time collaborative apps. After a previous change required all example apps to use an API key from a configuration file, the Svelte starter template would crash if that file was missing. I fixed it so the app loads the key dynamically instead, meaning new developers can get started without hitting an error on their first run.
Jazz is a framework for building real-time collaborative apps. I updated all the example projects so they load the API key from a configuration file instead of having it hard-coded in the source code. This makes it easier for the Jazz team to track how their examples are being used and is a better practice for managing secrets.
Web pages often have ‘links’ that can change part of the page without reloading the whole thing. These changes sometimes show different content depending on the link. In Jazz, we can invite people to collaborate on data using links, and we need to notice when someone follows a link.
Previously, the code that checks the URL for invitations only checked once — when the component first appeared on the page. That worked if the person opened the page fresh, but it wouldn’t notice if the URL changed later (for example, if someone clicked a link that added extra info to the URL, called a ‘hash’).
What I did was adjust the code so it also watches for changes to that part of the URL — the hash — so it reacts immediately whenever someone follows a link, not just on page load. That way, no invitation is missed, no matter how the user navigates.
Jazz's docs site has a confirmation dialog that pops up when you want to delete your local data. The code for this dialog was written inline and couldn't be reused elsewhere. I extracted it into its own standalone component so it can be shared across different parts of the site.
Jazz has a status page that shows whether its services are running. During an outage, the "status" indicator correctly showed things were down, but the latency chart right next to it was still bright green, which was confusing and misleading. I made the latency bar turn red whenever there's an active outage, so the visual indicators are consistent.
Jazz is a framework for building collaborative apps that store data locally on your device. I added a button to Jazz's built-in developer tools that lets you clear all your local data, which is useful for testing and debugging. It comes with a clear warning so you don't accidentally delete things, and I also built a reusable confirmation dialog to go with it.