前端

作者 | 褚杏娟  近日，不少开发者（https://v2ex.com/t/840562#reply11）在使用到 vue -cli 中的 node-ipc 模块时，这个依赖项会在桌面以及其他位置创建一个叫做“WITH-LOVE-FROM-AMERICA.txt”的文件，不过打开这个文件是空的。据悉，该 package 每周下载量达到了百万。另外，使用 Yarn 的开发者也受到了影响。 以反战为名的供应链投毒？ 开始有人以为只是个恶作剧，但事情并非如此简单。有开发者在对代码进行测试处理后发现，node-ipc 包的作者 RIAEvang

概要7月，字节跳动 Web Infra 做过一次主题为《迈入现代 Web 开发（字节跳动的现代 Web 开发实践）》的分享，在分享中我们梳理了「传统前端技术栈」的典型组成部分，展示了其中每个部分都存在的瓶颈问题。也介绍了在这些问题的驱动下，业界正在发生从「传统 Web 开发范式」到「现代 Web 开发范式」的「范式转移」。在这个分享的最后预告了 Modern.js 开源项目。10 月 27-28 日的稀土开发者大会上，字节跳动 Web Infra 正式发起 Modern.js 开源项目。本文是宋振伟同学跟我一起准备的专场分享内容，也是第一次介绍 Modern.js。第一部分先介绍了业界和字节内

😀 加个关注，后续上新不错过~ ByteDance Web Infra 字节跳动

Hi~大家好，今天给大家介绍一个现代的包管理工具，名字叫做 pnpm，英文里面的意思叫做 performant npm ，意味“高性能的 npm”，官网地址可以参考 https://pnpm.io/。目前 pnpm 在字节内部已经有很多项目中得到了实践和落地，例如下图中的 TikTok FE 团队，我们团队自研的 Monorepo 工具目前最新版本同样在底层默认了以 pnpm 作为依赖管理工具。pnpm 相比较于 yarn/npm 这两个常用的包管理工具在性能上也有了极大的提升，根据目前官方提供的 benchmark 数据可以看出在一些综合场景下比 npm/yarn 快了大概两倍：在这篇文章中

前些日子在 GMTC 北京 2021 技术大会上分享的《字节跳动的现代 Web 开发实践》，介绍了「现代 Web 开发」这场「范式转移」，在字节跳动如何转化成具体的技术栈和研发体系，在内部广泛落地和从中获益。分享中也预告了开源项目 Modern.js、发布了「现代 Web 开发者问卷调查」。截止 8 月 20 日，已经收到了 612 份有效回复，在汇总和交叉对比之后，可以看到很多跟「现代 Web 开发」有关的结果： 编程语言 ES6+ 和 TypeScript 已经成为绝对的主流，分别有 88.4% 和 77.63% 的开发者勾选了这两项。 仍然有接近一半的开发者勾选了 ES5，由于问题设

短视频内容是淘宝内容分发的核心，需要创作者创作高质量的视频内容。封面图是影响视频点击的核心因素。我们提供了智能封面图之后还是存在将近20%的用户选择主动上传封面图。为了优化这一个操作，提供视频自定义截取功能。技术调研由于淘宝目前的链路，我们只能在浏览器上做视频解析的操作，这也给到前端一些机会。社区上存在两种自定义截帧的方案，一种是使用video+canvas，一种是用FFmpeg+WebAssembly。FFmpeg 是视频处理最常用的开源软件。它功能强大，用途广泛，大量用于视频网站和商业软件（比如 Youtube 和 iTunes），也是许多音频和视频格式的标准编码/解码实现。FFmpeg

为什么要写这个文章呢？其实发现很多同学对一些很简单又有效的 debug 手段都不太了解，找 bug 的方式都不是很高效，导致最终 bug 找不到或者走了很多弯路。Devtools作为前端开发，chrome 的 devtools 一定不陌生，下面讲一讲 devtools 里面 debug 的一些思路。breakpoint其中断点是最最经常用到的，但很多同学都只用过默认的 breakpoint，其实还有其他两种。breakpoint当代码执行到该行代码时暂停conditional breakpoint条件断点，当表达式为 true 时才会暂停，下图是当变量a === 1时才暂停。经典应用场景是当

前言：希望像做游戏一样做 Web 开发的 dexteryy 同学今天在 GMTC 技术大会上又搞了一场「跨年演讲」（内容超多的意思），不但现场爆满、超时严重，而且一如既往的讲完之后只要把讲稿和幻灯片拼起来就能发出来，大家可按需取用。亮点：为了方便大家理解，dexteryy 同学为这次分享画了 90 张图（工具是 Keynote），其实

在 Web 动画方面，有一套非常经典的原则 -- Twelve basic principles of animation，也就是关于动画的 12 个基本原则（也称之为迪士尼动画原则），网上对它的解读延伸的文章也非常之多： Animation Principles for the Web [译文]网页动画的十二原则 其中使用的示例 DEMO 属于比较简单易懂，但是没有很好地体现在实际生产中应该如何灵活运用。今天本文将带大家再次复习复习，并且替换其中的最基本的 DEMO，换成一些到今天非常实用，非常酷炫的动画 DEMO 效果。 Squash and stretch -- 挤压

经过了一年的迭代， 近 2 个月集中开发， AppWorks 正式发布。AppWorks地址：https://appworks.site/AppWorks 是社区受到开发者广泛关注的 VS Code 套件，在 VS Code 插件市场有 2w+ 的下载量，是 VS Code 插件市场受开发者喜爱的百佳套件之一，多次登陆 VS Code 插件市场周/月趋势榜。在淘宝内部，AppWorks 日均创建项目 50+ 次，日均区块被使用 50+ 次，DAU 400+。AppWorks 正式版本定位前端研发工具集，目标是让前端应用的开发更快更好更轻松什么是工具集？工具集是指 AppWorks 包

很多文章都在讨论事件循环 (Event Loop) 是什么，而几乎没有人讨论为什么 JavaScript 中会有事件循环。博主认为这是为什么很多人都不能很好理解事件循环的一个重要原因 —— 知其然不知其所以然。所以本文试图抛砖引玉，从一些更溯源的方式来与大家探讨 event loop，希望大家能从中有些收获。本文从三个角度来研究 JavaScript 的事件循环：为什么是事件循环事件循环是什么浏览器与 Node.js 的事件循环差异为什么是事件循环JavaScript 是网景 (Netscape) 公司为其旗下的网景浏览器提供更复杂网页交互时所推出的一个动态脚本语言。其创作者 Eich 在 1

导读随着互联网技术的发展，web应用已经越来越流行，技术的发展越来越迅速，尤其是移动互联网的到来使得HTML5技术，Hybrid混合开发，更加火爆起来，但是web应用没能摆脱PC时代的一些根本性的问题，所需的资源依赖网络下载，用户体验始终要依赖浏览器，这让web应用和Native应用相比尤其在移动手机端的体验，总让人感觉"不正规"，而PWA技术的到来，让下一代web应用终于步入正轨！基于此，本文主要有以下几部分内容：PWA基本概念讲解Service Worker原理讲解Web Push协议讲解将一个SPA项目改造为PWAmanifest.json配置解析Service Worker资源缓存添加

为什么又造个轮子？为什么又要构建一个 JavaScript 构建工具呢？因为当前用于 Web 的构建工具比用户期望的性能至少慢一个数量级。我希望这个项目可以作为一种“存在证明”，证明我们的 JavaScript 工具实际上能比现在快得多。基准测试我想到的用例是打包用于生产的大型代码库。这个流程包括压缩代码以减少网络传输时间，以及生成源映射（对于调试生产中的错误是非常重要的）。理想情况下，构建工具还应该具备快速构建能力，而不必先预热缓存。我的主基准测试会将 three.js 库复制 10 次并从头开始构建单个包，过程中没有任何缓存，从而模拟一个大型代码库。在这个基准测试中，esbuild 比我测

引言 想必前端同学对npm的devDependencies和dependencies都比较熟悉，但是对peerDependencies可能就有点陌生，尤其是没有写过npm包插件的同学，比如之前使用grunt自动化工具的相关插件（如grunt-contrib-jasmine等）或者目前基于某个框架的ui组件库等等，这些都是需要对peerDependencies有一定了解的。下面我们就来说说peerDependencies。 npm2中dependencies与peerDependencies区别 假设我们当前的项目是MyProject，项目中有一些依赖，比方其中有一个依赖包Packag

作者 | 彭星编辑 | 尾尾一、回顾历史：移动时代之初，Web遭遇两大枷锁1. Web 在移动时代遭遇两大枷锁当 Web 自信满满，步入移动时代之时，它还没有做好充足的准备。回顾 2014 到 2015 年那段时间，作为前端开发人员，我正忙着前后端分离和体验优化。那时，我投入精力最多的就是移动站点的体验优化，例如提升首屏速度，提升动画流畅性等。为了达到更好的优化效果，我心力