前端新技术

---

rspack 字节官网

从 Vite 到 Rsbuild：一次意想不到的构建性能飞跃

---

Unocss | Unocss 中文网

UnoCSS: A quick introduction

内部 UnoCSS 培训文档

UnoCSS: A quick introduction

UnoCSS极速入门

用过 UnoCSS 之后，还是选择 Tailwind CSS？

Icons preset

---

es-toolkit 官网 | es-toolkit 中文网 | es-toolkit - git

Lit 官网 | Lit - git Lit docs

Lit Events

web-components-examples - git

Biome 官网 | Biome - 中文

Biome 是一个适用于 JavaScript、TypeScript、JSX、TSX、JSON、CSS、以及 GraphQL 的 快速格式化器，与 Prettier 的兼容性达到 97%，从而节省了 CI 和开发者的时间。
像 Prettier 一样格式化代码，节省时间

https://icon-sets.iconify.design/ |iconify 图标库官网
https://blog.csdn.net/gaotlantis/article/details/143309845 |vue3项目中使用iconify

Lit 官网 build fast web component

UNPKG is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file on npm using a URL like:

https://unpkg.com/

FormKit 不仅支持使用 Vue 组件的形式来构建表单，同时支持使用 Schema 的形式来构建。
Form Schema: https://formkit.com/essentials/schema
FormKit Inputs: https://formkit.com/inputs

https://cloud.tencent.com/developer/article/2381834 |什么是K8s里的CRD

https://blog.csdn.net/m290345792/article/details/148627875 |深入剖析 OpenAPI 规范


https://zhuanlan.zhihu.com/p/720915586 |OKLCH：现代色彩管理
https://oklch.com : 一个是转换器，可以方便从其他色彩空间转换过来。
https://huetone.ardov.me 是一个色板生成器， 可以更方便观察色板的梯度以及检查文字的对比度。

Using custom elements

custom elements

class MyCustomElement extends HTMLElement {
  static observedAttributes = ["color", "size"];

  constructor() {
    // Always call super first in constructor
    super();
  }

  connectedCallback() {
    console.log("Custom element added to page.");
  }

  disconnectedCallback() {
    console.log("Custom element removed from page.");
  }

  connectedMoveCallback() {
    console.log("Custom element moved with moveBefore()");
  }

  adoptedCallback() {
    console.log("Custom element moved to new page.");
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Attribute ${name} has changed.`);
  }
}

customElements.define("my-custom-element", MyCustomElement);


Lit 定制el
<script type="module">
// Import LitElement from Lit
import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js';

// Define a simple Lit component
class MyElement extends LitElement {
  render() {
    return html`
      <p>Hello, Lit!</p>
    `;
  }
}
customElements.define('my-element', MyElement);
</script>

<my-element></my-element>