So you want to write a sync system for a web app with offline and realtime support? Good luck. You might find the following resources useful.
Database in a browser, a spec (Stepan Parunashvili)
What problem are we trying to solve with a sync system?
The web of tomorrow (Nikita Prokopov)
| import * as d3 from "d3"; | |
| import { | |
| eachMonthOfInterval, | |
| endOfMonth, | |
| format, | |
| isSameMonth, | |
| parseISO, | |
| startOfMonth, | |
| } from "date-fns"; | |
| import useMeasure from "react-use-measure"; |
| import { isTest } from "@/lib/constants"; | |
| import { Dialog } from "@headlessui/react"; | |
| import { motion } from "framer-motion"; | |
| const TRANSITIONS = { | |
| DURATION: !isTest ? 0.5 : 0, | |
| EASE: [0.32, 0.72, 0, 1], | |
| }; | |
| function Modal({ onClose = () => {}, initialFocusRef, children }) { |
| import firebase from "firebase/app"; | |
| import "firebase/auth"; | |
| import { gql, GraphQLClient } from "graphql-request"; | |
| import { SWRConfig } from "swr"; | |
| import create from "zustand"; | |
| import { computed } from "zustand-middleware-computed-state"; | |
| const firebaseConfig = { | |
| // | |
| }; |
| <html> | |
| <head> | |
| <title>Stripe Gradient</title> | |
| </head> | |
| <body> | |
| <canvas id="gradient-canvas" data-js-darken-top data-transition-in> | |
| <!-- | |
| Remove data-js-darken-top to keep the same brightness in the upper part of the canvas | |
| --> | |
| </canvas> |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| html { | |
| scroll-behavior: auto; | |
| } | |
| } |
| <!DOCTYPE html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <style> | |
| body {font-family: helvetica;} | |
| </style> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="chart"></div> |
| module.exports = { | |
| /** | |
| * Print Width | |
| * https://prettier.io/docs/en/options.html#print-width | |
| * | |
| * Specify the line length that the printer will wrap on. | |
| * | |
| * printWidth: <int> | |
| * default: 80 | |
| */ |
| #!/bin/bash | |
| remote=origin ; for brname in `git branch -r | grep $remote | grep -v /master | grep -v /HEAD | awk '{gsub(/^[^\/]+\//,"",$1); print $1}'`; do git branch --track $brname $remote/$brname || true; done 2>/dev/null |
| const { utils } = require('react-docgen'); | |
| const { default: resolveHOC } = require('react-docgen/dist/utils/resolveHOC'); | |
| const { | |
| default: resolveToModule, | |
| } = require('react-docgen/dist/utils/resolveToModule'); | |
| module.exports = ({ moduleName = 'styled-components' } = {}) => { | |
| const isStyledExpression = (tagPath, t) => | |
| (t.CallExpression.check(tagPath.node) && | |
| tagPath.get('callee').node.name === 'styled') || |