swyx.io swyxio

Building offline apps with Amplify DataStore

To view and deploy the app covered in this chapter, check out this repo.

So far in this book we've worked with both REST APIs and GraphQL APIs. When working with the GraphQL APIs so far, we've used the API class to directly call mutations and queries against the API.

Amplify also supports another type of API for interacting with AppSync, Amplify DataStore. DataStore has a different approach than a traditional GraphQL API.

Instead of interacting with the GraphQL API itself using queries and mutations, DataStore introduces a client-side SDK that persists the data locally using the local storage engine of the platform you are working with (i.e. IndexDB for web, SQLLite for native iOS and Android). DataStore then automatically syncs the local data to the GraphQL backend for you as updates are made both locally and remotely.

KintoCompose Proposal

One of the earliest goals of Kinto team was to make every Git repository deployable to the cloud and compatible with any other repository. KintoCompose will aim to do this as an open source initiative.

Kinto is inspired by the kinto'un which is the magic cloud that Son Goku rides in Dragon Ball Z, or Wu Kong in the journey to the west.
Compose inspired by docker-compose and go modules through combining git repositories and their configuration to be served into any cloud via kubernetes.

KintoCompose Goals

Serve any Git repository into a public and private endpoint with ease.

Update

The first post has been published: https://www.swyx.io/writing/cloud-distros

The second post has been adapted for Temporal: https://www.swyx.io/why-temporal/

these are bullet points of a blogpost on a topic i know very little about but i feel like there is something there that is happening as we speak

The Composable Web Proposal

Serverless infrastructure like AWS Lambda and Google Cloud Functions have made it much cheaper for developers to offer server-side code for public consumption without keeping a server always running.

If these functions could be declared as stateless or deterministic, costs can be brought down even more because only the first invocation needs to be executed. Cached response could be returned for future invocations with the same input arguments.

All modern browsers support URL lengths of thousands of characters, even on mobile. A lot of data can be embedded and passed around directly in the URLs (instead of passing identifiers which requires a look-up which costs server time).

So here's a thought:

Reach UI Philosophy

Reach UI is an accessible foundation for React applications and design systems.

The three equally important goals are to be:

Accessible
Composable
Stylable

Contents:

Part 1: 🗺️ Netlify Edge
Part 2: ⚒️ Netlify Build
Part 3: 👩🏼‍💻 Netlify Dev
Part 4: 🗒️ Netlify Forms
Part 5: 🆔 Netlify Identity
Part 6: ✍️ NetlifyCMS
Part 7: ➕ Netlify Addons: Everything Else!
Part 8: 🍻 Netlify API

	.unreset {
	a {
	@apply text-blue-700 underline;
	}
	p {
	@apply my-4;
	}

	blockquote,
	figure {

	function ChatScroller(props) {
	const ref = useRef()
	const shouldScrollRef = useRef(true)
	useEffect(()=> {
	if (shouldScrollRef.current) {
	const node = ref.current
	node.scrollTop = node.scrollheight
	}
	})
	const handleScroll = () => {

	import React, { useEffect } from "react"

	import { META_DESCRIPTION } from "../../util"

	export const Page: React.FC<{
	title?: string
	metaDescription?: string
	}> = props => {
	useEffect(() => {
	document.title = props.title ?? "Execute Program"

	// // with thanks
	// https://dev.to/emreloper/react-router-v6-in-two-minutes-2i96
	// https://github.com/ReactTraining/react-router/blob/dev/docs/installation/getting-started.md
	// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9d29adedf662de685356f711951ef8b9e8342865/types/react-router/index.d.ts#L1
	// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9d29adedf662de685356f711951ef8b9e8342865/types/react-router-dom/index.d.ts#L1

	// // release notes
	// https://github.com/ReactTraining/react-router/releases/tag/v6.0.0-alpha.3

	declare module "react-router-dom" {