Alice-Ti

Appearance

月刊少女 2023-限定版 ​

Feb ​

Import maps 即将获得跨浏览器平台的支持性 ​

Vue 3 使用 esbuild 替换了 rollup 进行构建 ​

Vue Amsterdam 2023 举行 ​

React 纪录片 React.js: The Documentary ​

油管直接搜可看，或者B站转播

浏览器 scrollend 事件 ​

文章 ​

web.dev 推出新专栏 Learn Images

react 相关 ​

Little React Things: Cleaning up dependencies - Zeke Hernandez

The Future of Create React App and Why It Exists

React recursively re-renders child components, but there is a nuance

How to handle errors in React: full guide

React Component Composition

Modularizing React Applications with Established UI Patterns

杂项 ​

2023 年的响应式设计指南

Try out CSS Nesting today | WebKit

一个程序员决定写代码到60岁

Mar ​

字节跳动自研 Web 构建工具 Rspack 正式发布 ​

Rspack是一个基于 Rust 的高性能构建引擎， 具备与 Webpack 生态系统的互操作性，可以被 Webpack 项目低成本集成，并提供更好的构建性能。

Chrome 111 ​

  • View Transitions API

  • new colors devtools

  • ...

JavaScript import maps 可以在所有现代浏览器使用 ​

相关

javascript
<script type="importmap">
  {
    "imports": {
      "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
    }
  }
</script>

JAVASCRIPT站点生成器2023 ​

测评框架：Astro、Eleventy、Enhance、Gatsby、Next.js、Nuxt、Remix、SvelteKit

  • Astro 2.0.15
  • Eleventy 2.0.0
  • Enhance 1.4.6 (added 27 February 2023)
  • Gatsby 5.7.0
  • Next.js 13.2.1
  • Nuxt 3.2.2
  • Remix 1.13.0
  • SvelteKit 1.8.3

Mrm ​

为你项目的配置文件提供配置模版，包括 ESLint、Prettier、lint-staged 等。

shell
npx mrm eslint prettier lint-staged

文章 ​

杂项 ​

April ​

Rome v12 ​

Rome 旨在成为与 JavaScript 源代码处理相关的所有功能的综合工具。

Rome v12 新增如下特性：

  • 支持 JSON 文件
  • 支持 TypeScript 4.7 、TypeScript 5.0
  • 通过 CLI 支持导入排序
  • 优化配置、诊断和自动发现等

pnpm v8.0.0 ​

  • Node.js 14 不再支持
  • 一系列关于 peer dependencies 的默认配置项更新，以便在从其他包管理器迁移时能够更加丝滑
  • Lockfile 锁文件采用 Lockfile v6，去除了包 ID 的哈希值，提升锁文件的可读性，对 Git 合并冲突有更强的抵抗力
  • 当 package.json 中有 files 字段时，只有其中列出的文件才有幸被 deploy
  • 直接依赖项去重，减肥成功

Chrome 113：支持直接在 DevTools 里就修改 HTTP Header ！ ​

You can now override response headers in the Network panel. Previously, you needed access to the web server to experiment with HTTP response headers.

Chrome 113

🧪 Nodejs 20 ​

主要特性如下

  • 引入权限模型
  • 自定义 ESM 加载器钩子在专用线程上运行，与主线程隔离
  • 同步的 import.meta.resolve()，与浏览器行为保持一致
  • V8 升级到 11.3
  • Test Runner 达到稳定状态
  • 配备了最新版本的 URL 解析器 Ada 2.0，为 URL 解析带来了显著的性能改进
  • 单个可执行应用现在需要注入 Blob
  • Web Crypto API 函数参数现已按照 WebIDL 的定义，进行强制和验证，提升了与 Web Crypto API 的其他实现的互操作性
  • 官方支持 ARM64 Windows
  • WASI 的版本需要被指定

Vite 4.3 ​

Vite 4.3 发布，主要改进了开发服务器的性能。

该版本优化了解析逻辑，改进了热路径，并实现了智能缓存，以查找 package.json、TS 配置文件和已解决的 URL。

Tips: 这将是今年唯一的 Vite 主要版本，同时也会放弃对 Node.js 14 和 16 的支持。

ECMAScript 2023 有哪些新特性 ​

译文版本

  • 从后向前查找数组元素——findLast()和findLastIndex()
  • 通过复制改变数组——toReversed()、toSorted() 和 toSpliced()，它们会返回一个新的数组。
  • Symbol作为WeakMap键
  • Hashbang语法

文章 ​

CSS 100 天挑战完结

May ​

React **canary ** ——在Meta之外启用增量功能发布 ​

React 团队希望给 React 社区提供一个选项，使其可以在新功能的设计接近完成时就可以选择使用这些功能，而不必等到它们发布为稳定版本，因此引入了一个新的官方支持的 Canary 发布渠道，这个渠道将使用单独的 React 功能与 React 发布计划解耦。

Next.js 发布 13.4 ​

译文版本

Astro 2.4版本发布 ​

Astro 在2.4版本新增以下特性：

  • 更强的 CSS 作用域：新增了一个配置项 scopedStyleStrategy，允许开发者为 Astro 组件的作用域样式配置更高的特异性。
  • 改进的 <Code/> 组件：升级了 Shiki 并支持内联。
  • 站点地图（sitemap）的 SSR 支持：已知路由现在将在构建过程中内置到站点地图中。
  • 中间件（实验性）：定义在页面组件和端点之前运行的代码，以拦截请求和修改响应。
  • CSS 内联（实验性）：允许你配置何时应通过 标记内联样式表。

文章 ​

React相关 ​

语言相关 ​

杂项 ​

July ​

Storybook v7 ​

新版本包括：

  • ⚡一流的vip支持
  • 🧩通过新的 Frameworks API，对 NextJS 和 SvelteKit 进行零配置支持
  • 🔖Component Story Format 3，增强了类型安全性
  • 📝文档大修：支持 MDX2 和简化的文档 block
  • 💅全新的 UI 设计
  • ✅改进的交互测试和测试覆盖率
  • 🚥通过预打包和生态系统 CI 增强稳定性
  • 💯在各个层面上进行了数百项改进

译文

Chrome 115 ​

Chrome 115 有哪些值得关注的新特性？

滚动动画 ​

一项新的 Scroll-driven Animations 规范定义了两种可供我们使用的新时间线类型：

  • Scroll Progress Timeline: 链接到滚动容器沿特定轴的滚动位置的时间线。
  • View Progress Timeline: 链接到特定元素在其滚动容器内的相对位置的时间线。

下面是一个代码示例

html
<body>
  <div id="progress"></div>
  …
</body>
css
@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

Fenced Frames ​

Fenced Frames

常规的用法和 iframe 一样

html
<fencedframe src="conardli.html"></fencedframe>

CSS display 多值语法 ​

CSS display 属性现在接受多个关键字作为值，除了旧的预组合关键字。

它允许我们这样写:

css
display: block flex;

创建一个块级容器，具有 Flex 子元素。

css
display: inline flex;

创建一个内联容器，具有 Flex 子元素。

September ​

Astro 3.0 ​

Astro 3.0 发布，第一个支持 View Transitions API 的框架

Node.js 原生支持 .env 文件 ​

Npm 发布 10 ​

  • 删除对 node 14 和 16 的支持，npm 现在支持 node ^18.17.0 || >=20.5.0

Tailwind Connect 2023 ​

新一代 Web 预渲染技术 ​

  • Speculation Rules API 可以以编程的方式告诉 Chrome 需要预渲染哪些页面。

Vercel推出的前端AI工具v0 ​

  • 当前还处于Alpha阶段，要想试用需要先排队。官网入口

  • UI与样式分离

    v0生成的React组件代码中，样式与UI分别基于两个库：

    • 样式：基于TailwindCSS
    • UI：基于shadcn

文章 ​

一文搞懂前端各种调试方法的原理

Next.js 的新文档《迁移 Vite 项目到 Next.js》

《为什么 htmx 没有构建步骤，而是选择使用纯 JavaScript》

《Astro View Transitions》

理解 React Server Components

October ​

Frontend Developer in 2023 ​

一步步指导你在2023年成为一名现代前端开发人员

NextJs 14 ​

  • 服务端操作（稳定）：逐步增强的数据变更
    • 集成了缓存和重新验证
    • 简单的函数调用，或者与表单原生配合工作
  • 部分预渲染（预览）：快速的初始静态响应 + 流式动态内容
  • Next.js Learn（全新）：教授 App Router、身份验证、数据库等内容的免费课程。
bash
npx create-next-app@latest

What’s New in Next.js 14?

Next.js 14 正式发布，更快、更强、更可靠！

November ​

December ​

2023年前端大事件 ​

Summary ​

  1. 大型语言模型（LLMs）——TDDO-ABOUT
  2. WebGL

Last updated: