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

摘要

• 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

1. <wbr>

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

2. ­

<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%;
}

eta.js

eta.js website

ejs?

shadcn/ui

shadcn/ui website

开始靠一个 readme 圈千星. emmmm~ 但是我真的用不太来 radix

现在还出了 figma 的物料

umi4: prepare

umi4 releases

依赖分析

umi4 现在还支持 react-query、valtio

文章推荐

• How good is your TypeScript? Interview with just 3 questions.

常用网站推荐

• DEV

• Medium

• Github

• Stackoverflow

• V2

• Producthunt

2023-01-19 Design System、Tailwind Rust RegExp、CSS Fallbacks for WebP background images with @supports、use querySelectorAll() with wildcards、Optimizing resource loading with Priority Hints、Painter、vite-plugin-legacy-qiankun

摘要

• Design System

• Tailwind Rust RegExp

• CSS Fallbacks for WebP background images with @supports

• use querySelectorAll() with wildcards

• Optimizing resource loading with Priority Hints

• Painter

• vite-plugin-legacy-qiankun

Design System

Design System blog


Design System – Figma UI kit with dashboard templates

Tailwind Rust RegExp

tailwind 的 作者公布了部分实验性的使用 rust 重写的 tailwind 的 benchmark

We've been exploring rewriting the code that scans all of your templates for Tailwind classes in Rust for better performance — fun to benchmark.

Still no idea what I'm doing so lots of room for improvement I'm sure, but this is extracting classes from 250 template files

CSS Fallbacks for WebP background images with @supports

CSS Fallbacks for WebP background images with @supports Blog

=.- 支持的浏览器直接 @supports. 不支持的可以 multibackground urls

use querySelectorAll() with wildcards

use querySelectorAll() with wildcards blog

CSS 选择器水真的很深

Optimizing resource loading with Priority Hints

Optimizing resource loading with Priority Hints blog

Priority Hints indicate the relative priority of resources to the browser. They can enable optimal loading and improve Core Web Vitals.

A few key areas where Priority Hints can help:

• Boost the priority of the LCP image by specifying fetchpriority="high" on the image element, causing LCP to happen sooner.
• Increase the priority of async scripts using better semantics than the current hack that is commonly used (inserting a <link rel="preload"> for the async script).
• Decrease the priority of late-body scripts to allow for better sequencing with images.

首屏主图可以使用 fetchpriority="high" 来提升 LCP
脚本使用 preload

Painter

Painter juejin

题主从替换的思路和排查问题的方式写的非常详细

vite-plugin-legacy-qiankun

vite-plugin-legacy-qiankun juejin
vite-plugin-legacy-qiankun github

在不破坏 qiankun 机制的基础上, 支持使用 vite 开发. 生产打包依然使用 webpack

其他方案:

• vite-qiankun-starter
• vite-plugin-qiankun

2023-01-09 BarcodeDetector、JavaScript Rising Stars、Qwik blog、ReactNative V0.71.0、proxy-memoize V2.0、Zustand vs. Signals

摘要

• BarcodeDetector

• 2022 JavaScript Rising Stars

• Qwik blog

• ReactNative V0.71.0

• proxy-memoize V2.0

• Zustand vs. Signals

BarcodeDetector

BarcodeDetector MDN
BarcodeDetector blog

浏览器原生支持的二维码解析

// create new detector
const barcodeDetector = new BarcodeDetector({
  formats: ['code_39', 'codabar', 'ean_13']
})

// check compatibility
if (barcodeDetector) {
  console.log('Barcode Detector supported!')
} else {
  console.log('Barcode Detector is not supported by this browser.')
}

2022 JavaScript Rising Stars

2022 JavaScript Rising Stars Site

年度识图. 看看自己都认识哪些？

年度冠军: 996.bun

Qwik blog

Qwik blog juejin

文章对比了 CSR SSR 以及 水合 惰性加载等. 可以阅读了解
(主要是铺天盖地的宣传, 你不想看到都不可能)

ReactNative V0.71.0

ReactNative V0.71.0 blog

RC5 了. 包含默认的 ts 模版以及大量新的特性

proxy-memoize V2.0

proxy-memoize V2.0 changelog

valtio 的 机制库.

Zustand vs. Signals

Zustand vs. Signals blog

Wait, but what about Context?

2023-01-02 Mesh Gradients、TamagUI、Jotai、UI-Buttons、core.js、Bun、Pytorch、PyScript、Vue 2022-year-in-review

3202 年快乐呀！🎉

摘要

• Mesh Gradients

• TamagUI 1.0

• Jotai V2

• UI-Buttons

• core.js V3.27.0

• bun v1.0 will coming

• Pytorch

• PyScript

• Vue 2022-year-in-review

Mesh Gradients

Mesh Gradients Site

弥散渐变. 不得不说 UI 玩的真花

TamagUI 1.0

TamagUI Blog

Tamagui UI is a suite of React components and hooks that adapt nicely to both Native and Web.

又是一个 CSS-IN-JS 的组件库 (但我觉得它在卖一种很特别的萌~)

从定制化和个性化上我还是更倾向于 Chakra. 不多不说 Chakra 的样式设计系统确实大而全

Jotai V2

Jotai V2 Sandbox

越来越看不懂了. 你总想离开 React 要干什么？其实我很反感脱离 React 本身的机制做一些东西的库. 这让使用者调试会特别痛苦.

React: 是我给你自由过了火？

UI-Buttons

UI-Buttons Github

不知道为啥一股子 CSS 指北的味道。。。

core.js V3.27.0

core.js V3.27.0 release

新增了包括但不限于 异步迭代器、 Set、 setImmediate、 DisposableStack、String.dedent 等方法

Bun V1.0 will coming...

Bun Github

“bun can be used as a bundler separate from the runtime” becomes a thing

Pytorch

Pytorch Github

开源版的 ChatGPT，基于 PaLM 实现的 PLHF.

PyScript

PyScript Github

=.- 我要记得没错 py 不是和 FireFox 有专门合作的么. 但这个 pyscript 像是一个解释器.

Vue 2022-year-in-review

Vue Post

recap what happened in 2022, and discuss what to expect in 2023.

2022-12-26 daisyUI、Docus、fnm、Tailwind Pocket & V4、Next13.1、TypeScript 4.9、Bun 0.4.0

最近大家不要毒奶自己. 真的很治嚣张的人!!!

摘要

• daisyUI

• docus

• fnm

• tailwind Pocket

• tailwind v4

• Next13.1

• TypeScript 4.9

• bun v0.4.0

daisyUI

daisyUI Github

近些年不管是 HeadlessUI 还是 CSSUI 都很火. 这当中的集大成者莫过于是 Tailwind 了. daisyUI 就是以 Tailwind 为宿主所衍生的一个框架、编译器无关的 CSSUI 组件库. 高达 40+个组件可用. 并且提供了很多套主题. 当然这些都是可选的. 你可以通过配置来进行个性化定制.

一些使用场景:

1. 配合一些 HeadlessUI 得库来进行 UI 布局. 比如 Adobe 的 react-aria

2. 快速建站. 比如一些商品类的门户首页. 只要你的 UI 愿意配合你. 产出一些可用的模版真的很方便. 这不得不说最近 Tailwind 它们的一些 template theme 了. 国外就在卖模版. 新的商机！！！副业可以搞起来了！！

3. 文档主题. 并不是所有的文档框架的主题都符合你的喜好. 当你自己要自定义一些文档主题的时候 UI 设计就是一个门槛了. 但 daisyUI 提供了很多套成型的主题. 也许你可以根据这些主题来快速找到你喜欢的配色. 下面要说的 docus 就有这样的示例

4. Astro. 其实这和第三点有点重合. 不过因为 CSS 本就无样式限制. 就很自然的会和 Astro 联想到一起.

Docus

Docus Github

docus v1.2.3 发布了. 感觉自打 1.0 版本之后, 就没有什么新的功能并入了. 一直在修复一些问题和做一些简单的提升

docus 是以 Nuxt3 为基础的一个文档建站工具. 优点是 Nuxt 很全. 那么 Nuxt 的大部分东西你都可以使用. 并且提供了很多 module 可以使用. 算是你的另一个建文档的选择吧.

fnm

fnm Github

一个 Rust 开发的 node 多版本管理工具. 可能你比较常知道的是 n/nvm/nvm-windows/pnpm env 等. 但这些工具(除 pnpm)都有端的限制. fnm 是一个全部平台都支持的 node 版本管理工具. 还号称很快(反正 Rust 开发的东西都说它很快).

你可以快捷的使用 .node-version(.nvmrc 这明显是想吃 nvm 的用户) 文件来标识你当前的项目所使用的 node 版本. 然后通过 fnm use (一股子 nvm 的味道.) 来快速切换 node 版本.

下载对应版本

$ fnm install 18

总体从 nvm 切换到 fnm 的成本不大. 看你喜欢了

我想吐槽的一点是. 你的官网地址是摆着唬人的么. 一波重定向回 github？？？？

Tailwind Pocket

Tailwind Pocket Website

炒个冷饭. Tailwind + Framer Motion 打造的一个移动终端的模版.

$299!!! 你自己想吧！！！

不过大家真的可以尝试一下 Framer Motion. so cool!!!

Tailwind V4

11.22 号, 作者 Adam 发布了对 V4 的展望:
Goals for Tailwind CSS v4.0:

🤏 Simplify mental model, fewer framework-specific concepts
🪄 Less configuration, without less power
✂️ Fewer dependencies
⚡️ 10x faster

Aggressively defend against complexity, double down on robustness and stability 🤝

(就是说. 数字焦虑可以去掉的)

然后 20 号来了一波投票

Rust 的选项支持度是最高的. 2202 年了. 马上 3202 年了. xdm, Rust 可能真的要搞起来了.

Next13.1

Next13.1 blog

就是小. 缩减 bundle. 主动集成了 babel-plugin-transform-imports. 对应的 swc 也使用了 modularizeImports. emmmm~ 其实我 swc 体感不好. 可能我没怎么深入使用, 所以我说的也没啥可信度. 哈哈哈哈哈哈

TypeScript 4.9

announcing-typescript-4-9-beta

这也是个冷饭. 但是值得提一下

感觉通篇其实在讲述关于联合类型上我们如何让 TS 更智能的来推断类型. 就像推文中说的:

we want to ensure that some expression matches some type, but also want to keep the most specific type of that expression for inference purposes.

比如图中的例子. 当你访问 green.startsWith 的时候会得到错误提示 Property 'startsWith' does not exist on type 'Color'.. 这是因为使用断言将 green 定义为了联合类型 Color. 以前我们想要让 TS 正确推导出类型需要进行类型判断: typeof green === 'string' && green.startsWith. 这个时候就可以正常使用了. 而 satisfies 的出现我们可以省去判断的一步直接获得正确的类型. 甚至可以和 as const 联用获取到精准的值类型.

Bun V0.4.0

Bun V0.4.0 blog

释出了 bunx 命令. 100x fast npx 的 slogen. 真是天下武功, 唯快不破. 但其实对我来说目前 pnpx 也管够用