swyxio

now published as https://www.swyx.io/writing/svelte-amplify-datastore

Optimistic, Offline-first apps using serverless functions and GraphQL

Some thoughts on the challenges of the first 2 and possibly solving them with the latter 2.

Optimistic

In a world where API latency is unpredictable, the way to make user interactions seem instant is essentially by lying to the user. Most implementations of optimistic updates work like this:

sergiodxa

import { useRef, useEffect } from "react";
import NProgress from "nprogress";
import Router from "next/router";

function useNProgress(showAfterMs = 300, options = {}) {
  const timer = useRef(null);

  function routeChangeStart() {
    const { showAfterMs } = this.props;
    clearTimeout(timer.current);

sergiodxa

const messages = {
  year: { singular: 'year', plural: 'years', denominator: 365, inSeconds: 31536000 },
  day: { singular: 'day', plural: 'days', denominator: 24, inSeconds: 86400 },
  hour: { singular: 'hour', plural: 'hours', denominator: 60, inSeconds: 3600 },
  minute: { singular: 'minute', plural: 'minutes', denominator: 60, inSeconds: 60 },
  second: { singular: 'second', plural: 'seconds', inSeconds: 1 }
}

function pluralize(value, unit) {
  if (value === 1) return messages[unit].singular;

sergiodxa

// use JSX with el instead of React.createElement
/** @jsx createElement */

const Children = {
  only(children) {
    if (children.length > 1 || children.length === 0) {
      throw new Error('The children must have only one element');
    }
    return children[0];
  }

jimmyrolando

<?php

namespace App\Http\Middleware;

use Closure;
use Symfony\Component\HttpFoundation\Response;

class Cors
{
    /**