Release 2023-02-06 The Proxy API Is So Powerful That Every Web Developer Should Master It!、Vercel January Product Update、TypeWind、reusable Cypress workflows、Two ways to safely break a long word in HTML、Replace Create React App recommendation with Vite、Nuxt3 useAsyncData()、use-zustand、Replace listeners array with a Map for better performance、CSS:has()、eta.js、shadcn/ui、umi4 prepare · innocces/st

摘要

The Proxy API Is So Powerful That Every Web Developer Should Master It!
Vercel January Product Update
TypeWind
reusable Cypress workflows
Two ways to safely break a long word in HTML
Replace Create React App recommendation with Vite
Nuxt3 useAsyncData()
use-zustand
Replace listeners array with a Map for better performance
CSS:has()
eta.js
shadcn/ui
umi4: prepare

The Proxy API Is So Powerful That Every Web Developer Should Master It!

The Proxy API Is So Powerful That Every Web Developer Should Master It! blog

The 8 Major Usage Scenarios of the Proxy API That 80% of Web Developers Should Not Be Aware Of!

Vercel January Product Update

Vercel January Product Update blog

From saving decades of build time to rapid iteration, 2022 was a big year for helping teams deploy faster.

TypeWind

TypeWind github

The safety of Typescript with the magic of Tailwind.

reusable Cypress workflows

reusable Cypress workflows blog

name: ci
on: [push]
jobs:
  test:
    # https://github.com/bahmutov/cypress-workflows
    uses: bahmutov/cypress-workflows/.github/workflows/parallel.yml@v1
    with:
      n: 4
    secrets:
      recordKey: ${{ secrets.CYPRESS_RECORD_KEY }}

Two ways to safely break a long word in HTML

Two ways to safely break a long word in HTML blog

<wbr>

<p>super<wbr />califragilistic<wbr />expialidocious</p>

<p>super&shy;califragilistic&shy;expialidocious</p>

Replace Create React App recommendation with Vite

Replace Create React App recommendation with Vite RFC

阐述了 historica context of why cra exists - fast-moving ecosystem

Before Create React App, you had to install a bunch of tools and wire them up together, provide the right presets to use JSX, configure them differently for development and production environments, provide the right settings for asset caching, configure the linter, and so on. This was very tricky to do correctly. People coped with this by creating and sharing "boilerplate" repositories that you could clone. However, that created a different problem: once you cloned the boilerplate and adjusted it for your project, it was hard to pull updates. Your project setup would get stale, and you'd either give up on updating or spend a lot of effort getting all tools to work together again. In a fast-moving ecosystem, this was very difficult.

指出了目前的痛点 - Many pointed out in this thread that it is slower than the alternatives, and doesn't support some popular tools that people want to use today.

阐述了目前 spa 的效率低下的问题.

render chaining
csr vs ssg vs ssr
waterfalls performance & fetching with routing
growing bundle size by feature & extra deps u add & bunding with route

最后的解: Turn Create React App into a launcher

Nuxt3 useAsyncData()

Nuxt3 useAsyncData() blog

Nuxt3 集成的请求方案

Looks pretty familiar so far! However, the magic comes in the third parameter to the useAsyncData() composable and that’s the watch key. What this does is allows us to pass an array of reactive sources that will re-query when changed.

use-zustand

use-zustand github

emmmm~ 不懂. 用法不变. 核心从 useSyncExternalStore 变成了 useReducer + useEffect

Replace listeners array with a Map for better performance

Replace listeners array with a Map for better performance github

Array.indexOf + splice -> key + Map.delete

getting rid of this little perf footgun is nice.

CSS:has()

CSS:has() blog

=.- 真难

li:has(+ li a:is(:hover, :focus)) a::before,
li:has(a:is(:hover, :focus)) + li a::before {
  --move: var(--move-1);
  --lightness: 31%;
}

a:is(:hover, :focus)::before {
  --move: var(--move-0);
  --lightness: 45%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px
      30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

li:has(+ li + li a:is(:hover, :focus)) a::before,
li:has(a:is(:hover, :focus)) + li + li a::before {
  --move: var(--move-2);
  --lightness: 21%;
}