xiangzhihong8的专栏

无论是按 CVE-2023-4863 还是 CVE-2023-5129 的表述来看，libwebp 的这项漏洞都相当严重。因此在使用 App 之前，用户应确保对应的 Electron 版本已经升级为 v22.3.24、v24.8.3 或者 v25.8.1。

其实公司内部一般都有灰度配置系统，可以配置不同的版本的比例，然后流量经过这个系统之后，就会返回 Set-Cookie 的 header，里面按照比例来分别设置不同的 cookie。如果包含 version=1.0 的 cookie，那就走 version1.0_server 的服务，有 version=2.0 的 cookie 就走 version2.0_server 的服务，否则，走默认的。接下来的问题是，如何用 nginx 实现灰度，让一部分请求走一个版本的代码，一部分请求走另一个版本呢？

总的来说，React 18 的各项新功能在诸多方面提高了应用程序的性能水平。使用 Concurrent React 并发功能，渲染过程可以暂停并稍后恢复，甚至将其弃用。这样即使是在执行大型渲染任务期间，UI 也能立即响应用户的输出。Transitions API 允许在数据获取或屏幕内容变更期间，实现更平滑的过渡而不会阻止用户输入。

对于我在 Howest 的研究项目，我决定构建一个 3D 版本的 Lucas Bebber 的“交互式讲故事的动画地图路径”项目。我将使用 OSM 中的矢量轮廓来挤出建筑物的形状并将它们添加到 3js 场景中，随后我将对其进行动画处理。

IGES 格式最初由美国空军开发并于 1980 年发布。该格式是集成计算机辅助制造 (ICAM) 项目的产品，该项目旨在通过集成操作来降低制造成本。IGES 文件旨在允许航空航天相关设计在不同平台上传输，同时将数据丢失降至最低。在 IGES 格式出现之前，不同公司创建的 CAD 和计算机辅助制造 (CAM) 软件应用程序几乎没有兼容性。不同程序的开发人员没有动力支持另一个组织的文件格式，因为这将使使用竞争对手的平台变得更容易。这使得人们很难将一家公司软件中的设计转移到另一家设计或制造应用程序中。

为什么？电气化颠覆了传统的品牌差异化因素，自动驾驶汽车也是如此。随着驾驶体验变得越来越相似，HMI 对于提供有价值且独特的客户体验变得更加重要。输入 3D、计算能力的快速提高，与越来越多的针对汽车用途的图形编程工具集相匹配，使 OEM 能够利用 3D 为驾驶员创建更具吸引力、更易于访问和直观的交互。未来几年，3D 汽车 HMI 将成为汽车制造商的关键增长杠杆。探索该技术、它如何为更好的用户旅程提供动力、领先品牌的用例以及如何找到适合你需求的 3D 引擎。3D HMI 有潜力提供更刺激的驾驶交互。

很多时候，处于好奇或者其他的目的，我们会打开Chorme的调试功能，会看到页面会调用很多接口，然后有心的人可能会使用这些接口进行爬虫分析，破解后获取数据。为了 杜绝 这种情况，最简单的方法就是禁止人家调试自己的前端代码。

myshmup.com 允许在浏览器中创建 shmup（射击）游戏，我们可以使用具有创意通用许可证的资源或上传自己的艺术作品和声音。创建的游戏可以在网站上发布。该平台不需要编码，游戏对象的配置是在用户界面的帮助下执行的，后端是使用Django框架开发的，编辑器 UI 用 Javascript 编写并使用REACT框架游戏用 Typescript 编写并调用低级 Webgl API 进行渲染。接下来，我将解释我在游戏部分使用的优化，以确保在大多数浏览器中获得流畅的 60PS 体验。

Tango 是一个用于快速构建低代码平台的低代码设计器框架，借助 Tango 只需要数行代码就可以完成一个基本的低代码平台前端系统的搭建。Tango 低代码设计器直接读取前端项目的源代码，并以源代码为中心，执行和渲染前端视图，并为用户提供低代码可视化搭建能力，用户的搭建操作会转为对代码的修改。借助 Tango 可以实现 源码进，源码出的效果，无缝与企业内部现有的研发体系进行集成。

成熟的 Blender 3D 插件是令人惊奇的事情。作为 Python 和 Blender 的新手，我经常发现自己被社区中的人们创造的强大的东西弄得目瞪口呆。坦率地说，其中一些包看起来有点神奇，当自我怀疑或冒名顶替综合症的唠叨声音被打破时，很容易想到“如果有人能做出可以做xxx的东西就好了”。然后我记得，通过将好奇心和固执与良好的文档相结合，某人可以是任何人，X可以成为X、Y 和 Z。

3d模型可以为场景的仿真模拟带来真实感，它还有助于更轻松地识别场景中的所有内容。例如，如果场景中的所有对象都是简单的形状，如立方体和圆形，则很难在仿真中区分对象。

在本教程中，我们将学习一些 Blender 脚本技术，比如如何使用代码处理、操作、复制和动画网格图元。要结合所有这些技术，我们将创建一个波浪形的锥形图案：一个看起来很酷的动画，你可以将其转换为循环 GIF。我将使用bpy.data模块中的一系列属性和方法来回顾最重要的bpy库。我还将介绍如何从其他 Python 文件导入代码，以及如何使用其他代码编辑器来编写 Blender 代码。当然，使用 Blender 进行创意编码还有很多其他内容，但这就是我在这个简短的教程系列中所涵盖的全部内容。

可能大家比较关心，为什么一定要选择 Electron？其实我们是经过深思熟虑的：首先，全新 QQ 意味着我们应该专注在功能快速迭代上，否则，以 QQ 的体量战线会拉得非常长。我们希望最后选择的跨平台方案应该是足够成熟、低开发和使用成本，不需要为了使用框架本身，还需要投入额外巨大的人力成本。这个其实在 React Native、Flutter、Tauri 等跨平台框架的使用过程中，我们都遇到过类似的问题，除了功能开发，为了把框架生态、周边、工具链建设好，还需要投入巨大的额外成本，Qt 也有类似的问题。

我不会花太多时间讨论 Three.JS 渲染管道的工作原理，因为它在互联网上有详细记录（例如，我将在下图中列出基础知识，以便更容易理解各个部分的去向。

如前所述，生命游戏模拟显示为单元格网格。我们的应用程序需要一种可视化网格的方法，区分活动单元格和非活动单元格。此Codelab使用的方法是在活动单元格中绘制彩色方块，并将非活动单元格留空。这意味着我们需要为 GPU 提供四个不同的点，每个点对应正方形的四个角。例如，在画布中心绘制的正方形，从边缘拉入一定距离，其角坐标如下：为了将这些坐标提供给 GPU，我们需要将这些值放入 TypedArray 中。

在瞬息万变的互联网行业中，年过二十四的 QQ 堪称超长寿的产品，见证了中国互联网崛起的完整历程。然而，如今这个元老级产品经历了一次从内到外彻底的重构。在这次重构中，QQ 选择了 Electron 作为 UI 跨平台开发框架。尽管 Electron 被 Slack、Visual Studio Code 和 Discord 等大型产品广泛使用，但也引发了一些网友的担忧，例如内存占用、安装包体积和启动速度等方面的问题。

本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。开发准备工作获取微信小程序的 AppID登录 https://mp.weixin.qq.com ，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了，注意不可直接使用服务号或订阅号的 AppID 。 下载开发工具下载地址：https://mp.weixin.qq.com/debug/wxado

visx 是用于 React 的富有表现力的底层可视化组件集合，结合了 d3 的强大功能来生成可视化，以及 React 更新 DOM 的诸多优势。在 Airbnb 内部，visx 的目标是统一整个公司的可视化堆栈，在此过程中，创建了 visx 项目，从而有效的将 D3 的强大功能与 React 结合在一起。目前，visx在 Github 上通过 MIT 协议开源，有超过 17.5k 的 star、0.7k 的 fork、2.2k 的项目依赖量、代码贡献者 150+，妥妥的前端优质开源项目。

概述OpenGLOpenGL是渲染2D、3D矢量图形硬件的一种软件接口。本质上说，它是一个3D图形和模型库，具有高度的可移植性，并且具有非常快的渲染速度。OpenGL并不是一种语言，而是更像一个C运行时函数库。它提供了一些预包装的功能，帮助开发人员编写功能强大的三维应用程序。 OpenGL可以再多种操作系统平台上运行，例如各种版本的Windows、UNIX/Linux、Mac OS 和 OS/...

使用顶点绘制的 2D 或 3D 模型称为网格,网格中的每个面都称为多边形，多边形由 3 个或更多顶点组成。要在 WebGL 渲染上下文中绘制模型，就必须使用 JavaScript 数组定义顶点和索引。例如，如果我们想创建一个位于坐标 {(5,5), (-5,5), (-5,-5)} 上的三角形，如下图。为了更好地理解指数，请考虑更复杂的模型，如 square，我们可以将正方形表示为一组两个三角形。

WebGPU 是用于 Web 的下一代图形和计算 API。它提供对现代 GPU 的基础访问，从而在 Web 平台上实现高性能 3D 图形、图像处理和通用计算。经过多年的开发和测试，WebGPU 已经到了推荐阶段，可以被主流浏览器采用。谷歌宣布 Chrome 从版本 113 开始提供 WebGPU 支持，从而在 ChromeOS、Windows 和 macOS 设备上实现惊人的视觉效果和复杂的计算。WebGPU 为 Web 开发开辟了很多新的可能性。

所谓调试，是泛指重现软件缺陷问题、定位和查找问题根源，最终解决问题的过程，软件调试的最终目的就是修复软件缺陷。事实上，修复 软件缺陷并不是什么高深的技术，大多数Bug其实就是由字符错录或代码行里的小问题引发，但查找Bug并定位问题却是无比艰难。开发人员往往得花上大量时间才能抽丝剥茧、厘清问题的根源。使用高质量的代码编辑器，应具备行编号、彩色编码、代码校验、自动补全、括号匹配、参数提示等功能。使用 Git 等源代码控制系统以管理代理修订工作。

新技术的出现和老技术的淘汰让前端开发者们需要不断地学习和更新知识。特别是在经济不好的情况下，是否掌握新的技术很大程度决定着你是否被淘汰。虽然应用程序试图将网站替代，但前端 Web 开发业务仍在快速变化和增长，前端开发人员的功能并没有消失，以下总结了2023 年需要关注的一些前端 Web 开发趋势。

前面文章说过（），在 Vite 依赖预构建的底层实现中，大量地使用到了 Esbuild 这款构建工具，实现了比较复杂的 Esbuild 插件功能和技巧。接下来，我就来带你揭开 Vite 预构建神秘的面纱，从核心流程到依赖扫描、依赖打包的具体实现，带你彻底理解Esbuild预构建背后的技术。

我们知道，Vite 在开发阶段实现了一个按需加载的服务器，每一个文件请求进来都会经历一系列的编译流程，然后 Vite 会将编译结果响应给浏览器。而在生产环境下，Vite 同样会执行一系列编译过程，将编译结果交给 Rollup 进行模块打包。这一系列的编译过程指的就是 Vite 的插件工作流水线(Pipeline)，那它是如何实现的呢？

一文中我们介绍过了 Vite 中 HMR 的 API 使用，同时也介绍了基于 HMR Boundary (HMR 边界)的更新模式，即当一个模块发生变动时，Vite 会自动寻找更新边界，然后更新边界模块，如下图所示。那么，在 Vite 内部，服务端究竟是如何定位到 HMR 边界模块，以及客户端是如何接受更新并加载最新模块内容的呢？接下来，我们一起深入 Vite 的底层实现，梳理 HMR 的各个实现要点，从而对Vite 的 HMR 实现原理有比较深入的认识。

Lightning CSS 是一个用 Rust 编写的极快的 CSS 解析器、转换器和压缩器。通俗的讲，Lightning CSS就是Rust版本的PostCSS,然后 Lightning CSS内置了一些功能，比如 CSS压缩，语法降级，语法支持前缀，CSS模块化功能。并且，Lightning CSS可以与 Parcel 一起使用，也可以作为独立库或 CLI，或通过插件与任何其他工具一起使用。

WebGL(全写 Web Graphics Library)是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2.0 的一个 JavaScript 绑 定，WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统 显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。

针对更细粒度的拆包，Vite 的底层打包引擎 Rollup 提供了manualChunks，让我们能自定义拆包策略，它属于 Vite 配置的一部分，示例如下。build: {output: {// manualChunks 配置},},manualChunks 主要有两种配置的形式，可以配置为一个对象或者一个函数。我们先来看看对象的配置，也是最简单的配置方式，你可以在上述的示例项目中添加如下的manualChunks配置代码。

Eslint是前端大牛Nicholas C. Zakas在2013年开源的一个用于监测JavaScript代码的项目，可以用它来检查语法规则和代码风格，从而保证项目中的代码语法正确、风格统一。目前，Eslint已成为前端工程化的必备插件。ESLint的使用并不复杂，主要通过配置文件对各种代码格式的规则(rules)进行配置，以指定具体的代码规范。

Vue 是一款用于构建用户界面的 JavaScript 框，它基于标准 的HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，用以帮助开发者高效地开发用户界面。目前，Vue 3.0正式版也发布了两年的时间，越累越多的开发者也用上了Vue 3.0。对比Vue2.x，Vue 3.0在性能提升了1.3~2倍左右，打包后的体积也更小了，同时Vue 3.0还提供了更好的TypeScript支持和渲染器。今天，就来给大家分享 10 个基于 Vue3.0开发的开源项目。

近几年，在技术领域低代码是比较热门的话题，比如阿里云推出了易搭，通过简单的拖拽、配置，即可完成业务应用的搭建，腾讯云则是推出了微搭，通过行业化模板、拖放式组件和可视化配置快速构建多端应用。低代码是基于可视化和模型驱动理念，结合云原生与多端体验技术，它能够在多数业务场景下实现大幅度的提效降本，为专业开发者提供了一种全新的高生产力开发范式。下面就来分享几个值得学习和使用的低代码开源项目，更深入地了解什么是低代码。

一、介绍vue-core-video-player是一款基于 vue.js 的轻量级的视频播放器插件插件，支持如下特性：个性化配置i18n服务端渲染画中画模式事件订阅易于开发移动端适配1.1 官方文档https://core-player.github.io/vue-core-video-player/zh/get-started.html1.2 安装和快速使用首先，在项目中安装插件，安装的方式有两种：npm install --save vue-core-video-play

一、

一、Vite简介Vite (法语意为 “快速的”，发音 /vit/) 是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。1.1 Vite组成Vite构建工具由两部分组成：一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如模块热更新（HMR）。一套构建指令，它使用 Rollup 打包你的代码，

众所周知，不管是Flutter还是uni-app，其实都是一个UI框架，他们都是运行在原生系统之上的。自然，我们可以在Flutter工程中集成uni-app。一、下载离线SDK首先，我们创建一个Flutter普通应用，并使用Android Studio打开Android工程。接下来，打开uni-app官网https://nativesupport.dcloud.net.cn/AppDocs/download/android下载最新离线sdk，如下图所示。解压后，可以使用Android Studio打

新年还没过完，Vite就发布了2.0版本，不得不佩服尤大大。Vite是什么Vite（法语意思是 “快”，发音为 /vit/，类似 veet）是一种全新的前端构建工具，你可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，但是更轻更快。Vite 利用浏览器原生的 ES 模块支持和用编译到原生的语言开发的工具（如 esbuild）来提供一个快速且现代的开发体验。Vite由两个主要部分组成：一个通过本机 ES 模块提供源文件的开发服务器，具有丰富的内置特性和快得惊人的热模块替换(HMR)。一

今天给大家开源一个仿美团外卖的Vue项目，介绍Vue和vue-router的基本用法。工程结构工程目录结构比较简单，如下图所示。运行效果部分运行效果如下图，实现了基本的页面切换，导航菜单，购物车等功能。如何运行和其他的Vue项目一样，只需要下载源码，然后执行以下命令即可。npm installnpm run dev源码链接...

vue3-jd-h5项目介绍vue3-jd-h5是一个电商H5页面前端项目，基于Vue 3.0.0 + Vant 3.0.0 实现，主要包括首页、分类页面、我的页面、购物车等，部分效果如下图。本地线下代码vue2.6在分支demo中，使用mockjs数据进行开发，效果图请点击这里master分支是线上生产环境代码，因为部分后台接口已经挂了????，可能无法看到实际效果。vue3搭建步骤首先,在本地选择一个文件，将代码clone到本地：git clone https:/

一、Weex简介大约两年前，为了写一本Weex的入门书籍，我花了几个月的时间学习了下Weex跨平台相关的知识。Weex 是阿里前端技术团队开源的一套跨平台开发方案，能以Web的开发体验构建高性能、可扩展的 Native 应用。简单来说，在集成了 WeexSDK 之后，开发者就可以使用 JavaScript 语言和前端开发经验来开发移动应用。Weex 渲染引擎与DSL语法层是分开的，Weex 并不强依赖任何特定的前端框架。Weex 应用的页面表示层使用Vue，并遵循 W3C 标准实现了统一的 JSEngi