WebGL - 制作 3D 立体盒子
如何使用 WebGL
WebGL 只关心两件事：裁剪空间中的坐标值和颜色值，使用 WebGL 只需要给它提供这两个东西。
需要提供两个着色器来做这两件事，一个顶点着色器提供裁剪空间坐标值，一个片段着色器提供颜色值。
WebGL 应用程序代码是 JavaScript 和 OpenGL 着色语言的组合。
JavaScript 需要与 CPU 进行沟通
OpenGL 着色语言（GLSL），需要与 GPU 通信
使用 JavaScript 编写以下操作的代码：
初始化 WebGL − 用于初始化 WebGL 的上下文。
创建数组 − 创建数组来保存几何数据。
缓冲区对象 − 通过将数组作为参数来创建缓冲区对象（顶点和索引）。
着色器 − 创建，编译和连接着色器。
属性 − 创建属性，启用它们并与缓冲区对象关联。
全局变量 − 创建全局变量。
变换矩阵 − 创建变换矩阵。
使用 OpenGL 着色语言（GLSL）编写着色器。
制作 3D 立体盒子
新建一个 canvas 元素并设置一个 onload 事件处理程序来初始化我们的 WebGL 上下文。12345<body ...
WebGL 介绍和基本使用
介绍
WebGL（Web Graphics Library）是 Web 上 3D 图形的新标准，专为渲染 2D 图形和交互式 3D 图形而设计，允许 Internet 浏览器访问使用它们的计算机上的图形处理单元（GPU）。这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航、数据视觉化和 3D 网页游戏等。
WebGL 完美地解决了现有的 Web 交互式三维动画的两个问题：第一，它通过 HTML 脚本本身实现 Web 交互式三维动画的制作，无需任何浏览器专用渲染插件支持；第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的 OpenGL 接口实现的。
WebGL 程序包括用 JavaScript 写的控制代码，以及在图形处理单元（GPU, Graphics Process ...
🎉JavaScript 五彩纸屑库 js-confetti
介绍如果您有一个页面，您希望用五彩纸屑特效引起您的用户注意，那么这个插件就是为您准备的。去年介绍过一个很好用的插件 canvas-confetti，掘金年度作者投票按钮的特效就是使用的这个，两者对比如下：
两者都提供了 npm 安装和从 cdn 导入两种使用方式。
canvas-confetti 提供了很多自定义的选项，包括：发射原点、发射数量、扩散角度、发射角度、重力、消失的速度、颜色和形状等。而 js-confetti 自定义的选项比较少，但是体积也小了，压缩文件只有 6KB 多。
js-confetti npm 包体积 35.8 kB，canvas-confetti npm 包体积 66.3 kB。
js-confetti 支持表情符号作为五彩纸屑。
两者特效调用函数都返回 Promise 对象，当添加的五彩纸屑由于五彩纸屑的重力物理而从用户屏幕上消失时变成 resolved 状态。
另外，js-confetti npm 包中包含内置的 TypeScript 类型声明，而 canvas-confetti 需要额外的 npm 包 @types/canvas-confet ...
代码的浪漫 - SVG 心形波纹动画 + Click Love
介绍代码的世界可以很简单也可以很浪漫，又到了一年一度秀浪漫的日子（过去几天了），给大家介绍一个 SVG 心形波纹动画和 Click Love 页面点击特效，效果如下：
SVG 心形波纹动画
定义一个 svg 元素。123456<svg id="hearts" viewBox="-600 -400 1200 800" preserveAspectRatio="xMidYMid slice"> <symbol id="heart" viewBox="-69 -16 138 138"> <path d="M0,12 C 50,-30 110,50 0,120 C-110,50 -50,-30 0,12z" /> </symbol></svg>
viewBox 属性的值是一个包含四个数字的列表：x、y、width 和 height。x 和 y 表示视口的左上角坐标，width 和 height 代 ...
如何给开源项目提 PR，给 layui- vue 提了个 PR，已合并
Pull Request 介绍
贡献者请项目维护者“拉取”修改的软件内容（因此称为拉取请求），若此修改内容应该成为正式代码库的一部分，就需要合并拉取请求中提到的软件内容。
最常用的方式是“Fork + Pull”模式：如果要为拉取请求创建新分支，又没有仓库的写入权限，可以先对仓库 Fork，仓库参与者不必向仓库创建者申请提交权限，而是在自己的托管空间下建立仓库的派生（Fork）。
拉取请求只能在不同的两个分支之间打开，可以在创建拉取请求时指定要将更改合并到哪个分支。
创建拉取请求
Fork 创建存储库分支。
进行修复。
创建拉取请求。
在存储库的主页“Branch（分支）”菜单中，选择包含提交的分支。
在文件列表上方，单击 “拉取请求”。
使用基础分支下拉菜单选择要向其合并更改的分支，然后使用比较分支下拉菜单选择进行了更改的主题分支。
为你的拉取请求输标题和说明。
要创建可供审查的拉取请求，请单击“创建拉取请求”。若要创建草稿拉取请求，请使用下拉列表并选择“创建草稿拉取请求”，然后单击“草稿拉取请求”。
创建拉取请求后，你可以请求特定人员审查你提议的 ...
青训营大项目总结 ｜ 青训营笔记
介绍青训营大项目：
基于 NextJS 开发仿掘金站点
组件库
关于新冠疫情的数据可视化作品
我们团队做的是组件库项目。
项目需求虽然业界已经有非常多知名组件库(antd/iview/material design 等)，但实际工作中各团队通常也会应设计规范要求，自行开发属于团队内部的基础/业务组件库，对于高阶前端，开发一个属于自己的组件库已经是一种普遍但重要的基本技能。
实际开发中有许多需要考虑的细节：
使用何种语言开发组件库？
ts/es6 + babel + flow
less/sass/stylus/postcss/atomic-css
Sass/Less
Atomic CSS
css-in-js
完全支持样式覆盖
✅
✅
❗(需要使用className支持)
支持rem布局
✅
✅
❗(大部分库支持)
可读性
强
稍弱
强
上手成本
低
中
高
是否支持SSR
天然支持
天然支持
需要额外支持
是否支持流式渲染
天然支持
天然支持
需要额外支持
...
Vitest 知识总结 ｜ 青训营笔记
Vitest 简介由 Vite 提供支持的极速原生的单元测试框架。安装 pnpm add -D vitest，Vitest 需要 Vite >=v3.0.0 和 Node >=v14。
Vite 支持重复使用 Vite 的配置、转换器、解析器和插件 - 在您的应用程序和测试中保持一致。
兼容 Jest拥有预期、快照、覆盖等 - 从 Jest 迁移很简单。
智能即时浏览模式智能文件监听模式，就像是测试的 HMR！
ESM, TypeScript, JSX由 esbuild 提供的开箱即用 ESM、TypeScript 和 JSX 支持。
Vitest 跟其他的测试框架进行对比Vitest 和基于浏览器的运行器之间的主要区别是速度和执行上下文。简而言之，基于浏览器的运行器，如 Cypress，可以捕捉到基于 Node 的运行器（如 Vitest）所不能捕捉的问题（比如样式问题、原生 DOM 事件、Cookies、本地存储和网络故障），但基于浏览器的运行器比 Vitest 慢几个数量级，因为它们要执行打开浏览器，编译样式表以及其他步骤。
JestJ ...
测试知识总结 ｜ 青训营笔记
为什么需要测试
自动化测试能够预防无意引入的 bug，并鼓励开发者将应用分解为可测试、可维护的函数、模块、类和组件。这能够帮助你和你的团队更快速、自信地构建复杂的 Vue 应用。
与任何应用一样，新的 Vue 应用可能会以多种方式崩溃，因此，在发布前发现并解决这些问题就变得十分重要。
测试越早越好，因为拖得越久，应用就会有越多的依赖和复杂性，想要开始添加测试也就越困难。
测试的类型当设计你的 Vue 应用的测试策略时，你应该利用以下几种测试类型：
单元测试：检查给定函数、类或组合式函数的输入是否产生预期的输出或副作用。
组件测试：检查你的组件是否正常挂载和渲染、是否可以与之互动，以及表现是否符合预期。这些测试比单元测试导入了更多的代码，更复杂，需要更多时间来执行。
端到端测试：检查跨越多个页面的功能，并对生产构建的 Vue 应用进行实际的网络请求。这些测试通常涉及到建立一个数据库或其他后端。
每种测试类型在你的应用的测试策略中都发挥着作用，保护你免受不同类型的问题的影响。
端到端（E2E）测试虽然单元测试为所写的代码提供了一定程度的验证，但单元测试和组件测试在部署到生产时，对应用 ...
Vite 插件开发 ｜ 青训营笔记
Vite 简介Vite 开箱即用的功能等价于：
webpack
webpack-dev-server
css-loader
style-loader
less-loader
sass-loader
postcss-loader
file-loader
MiniCssExtractPlugin
HTMLWebpackPlugin
HMR 无需额外配置，自动开启
Tree Shaking 无需配置，默认开启
…
使用插件若要使用一个插件，需要将它添加到项目的 devDependencies 并在 vite.config.js 配置文件中的 plugins 数组中引入它。例如，要想为传统浏览器提供支持，可以按下面这样使用官方插件 @vitejs/plugin-legacy：
1npm add -D @vitejs/plugin-legacy
1234567891011// vite.config.jsimport legacy from '@vitejs/plugin-legacy'import { defineConfig } from ...
Vite 知识体系简单总结 ｜ 青训营笔记
Vite 介绍前端工程的痛点：
首先是前端的模块化需求。我们知道，业界的模块标准非常多，包括 ESM、CommonJS、AMD 和 CMD 等等。前端工程一方面需要落实这些模块规范，保证模块正常加载。另一方面需要兼容不同的模块规范，以适应不同的执行环境。
其次是兼容浏览器，编译高级语法。由于浏览器的实现规范所限，只要高级语言/语法（TypeScript、 JSX 等）想要在浏览器中正常运行，就必须被转化为浏览器可以理解的形式。这都需要工具链层面的支持，而且这个需求会一直存在。
再者是线上代码的质量问题。和开发阶段的考虑侧重点不同，生产环境中，我们不仅要考虑代码的安全性、兼容性问题，保证线上代码的正常运行，也需要考虑代码运行时的性能问题。由于浏览器的版本众多，代码兼容性和安全策略各不相同，线上代码的质量问题也将是前端工程中长期存在的一个痛点。
同时，开发效率也不容忽视。我们知道，项目的冷启动/二次启动时间、热更新时间都可能严重影响开发效率，尤其是当项目越来越庞大的时候。因此，提高项目的启动速度和热更新速度也是前端工程的重要需求。
那么，前端构建工具是如何解决以上问 ...