shuding

#!/bin/bash

# Required parameters:
# @raycast.schemaVersion 1
# @raycast.title Random Branch
# @raycast.mode silent

# Optional parameters:
# @raycast.icon 🎲

shuding

if (typeof window !== 'undefined') {
  let onResize
  if (window.visualViewport) {
    onResize = () => {
      const vh = window.visualViewport.height
      document.documentElement.style.setProperty('--vh', `${vh}px`)
    }
    window.visualViewport.addEventListener('resize', onResize)
    onResize()
  } else {

shuding

<div class="spinner">

.spinner {
  margin: 12px;
  width: 28px;
  height: 28px;
  animation: spinner-rotating 1.2s infinite;
  animation-timing-function: steps(12, end);
}
.spinner:before {

shuding

The Journey of SWR and Suspense

We are trying to combine the idea of SWR ("stale-while-revalidate") and React Suspense together, and this write-up covers all our findings from this journey.

Background

When React Hooks launched, people started to rely on useEffect to initiate data fetching:

function User () {

shuding

import { unstable_serialize, useSWRConfig, SWRConfig } from 'swr'
import { useEffect } from 'react'

const counter = {}
const gc = useSWRNext => (key, fetcher, config) => {
  const { cache } = useSWRConfig()
  const serializedKey = unstable_serialize(key)
  
  useEffect(() => {
    counter[serializedKey] = (counter[serializedKey] || 0) + 1

shuding

function useWhyDoesItRerender(obj: any) {
  for (let k in obj) {
    useEffect(() => {
      console.log('Value', k, 'changed to', obj[k]);
    }, [obj[k]]);
  }
}

// useWhyDoesItRerender({ propA, propB, stateC })

shuding

const delaySort = (arr) => {
  const r = []
  for (let x of arr) {
    setTimeout(v => { r.push(v); if (r.length === arr.length) console.log(r) }, x, x)
  }
}

// delaySort([3, 2, 1]) => [1, 2, 3]

shuding

import Image from 'next/image'
import { useState } from 'react'

function Home() {
  const [load, setLoad] = useState(false)
  return <>
    <h1>Image Optimizer Home</h1>
    {load ? <>
      <Image src="https://source.unsplash.com/3840x512/weekly?water" width="3840" height="512" layout="intrinsic" />
      <Image src="https://source.unsplash.com/3840x512/weekly?hill" width="3840" height="512" layout="intrinsic" />

shuding

// SmoothScroll
class SmoothScroll {
    constructor() {
        // the <main> element
        this.DOM = {main: document.querySelector('main')};
        // the scrollable element
        // we translate this element when scrolling (y-axis)
        this.DOM.scrollable = this.DOM.main.querySelector('div[data-scroll]');
        // the items on the page
        this.items = [];

shuding

// /swr/project.js
import useSWR, { mutate } from 'swr'

export async function fetchProject (id) {
  mutate(`/api/project/${id}`, fetch(`/api/project/${id}`))
}

export default function useProject (id) {
 // don't pass the fetcher so it won't fetch