├── .gitignore ├── docs ├── _config.yml ├── 2022-1-5.md ├── 2024-2-29.md ├── 2024-4-11.md ├── 2024-6-13.md ├── 2022-6-29.md ├── 2024-3-29.md ├── 2021-11-24.md ├── 2024-9-5.md ├── 2022-5-5.md ├── 2022-9-7.md ├── 2022-7-27.md ├── 2022-2-23.md ├── 2024-8-9.md ├── 2024-10-24.md ├── 2022-2-9.md ├── 2024-5-30.md ├── 2024-9-20.md ├── 2022-7-13.md ├── 2021-10-13.md ├── 2024-10-11.md ├── 2022-5-18.md ├── 2024-6-28.md ├── 2024-11-8.md ├── 2021-8-18.md ├── 2024-11-22.md ├── 2022-4-20.md ├── 2022-8-10.md ├── 2024-4-25.md ├── 2022-10-20.md ├── 2025-1-3.md ├── 2022-9-21.md ├── 2024-2-23.old.md ├── 2024-12-5.md ├── 2024-7-25.md ├── 2025-1-16.md ├── 2021-9-1.md ├── 2024-8-23.md ├── 2022-11-9.md ├── 2025-5-30.md ├── 2024-5-17.md ├── 2025-5-16.md ├── 2025-7-25.md ├── 2021-11-10.md ├── 2021-12-8.md ├── 2022-8-24.md ├── 2025-7-11.md ├── 2022-4-6.md ├── 2022-1-19.md ├── 2021-9-15.md ├── 2024-7-11.md ├── 2025-2-27.md ├── 2024-3-15.md ├── 2022-6-15.md ├── 2022-3-9.md ├── 2021-9-29.md ├── 2022-3-23.md ├── 2025-3-28.md ├── 2021-7-21.md ├── 2025-4-27.md ├── 2024-12-20.md ├── 2021-8-4.md ├── 2025-10-24.md ├── 2025-8-8.md ├── 2025-11-7.md ├── 2025-6-27.md ├── 2021-10-27.md ├── 2025-9-19.md ├── 2021-12-22.md ├── 2025-8-22.md ├── 2025-12-5.md ├── 2025-4-10.md ├── 2025-3-14.md └── 2025-11-21.md ├── .github ├── ISSUE_TEMPLATE │ └── ---issue---.md └── workflows │ ├── update_readme.yml │ └── release.yml ├── package.json ├── HOW-TO-RELEASE.md └── scripts ├── update_readme.js └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/---issue---.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 投稿 issue 模板 3 | about: 投稿模板 4 | title: 技术周刊投稿 - 标题 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | - 标题： 11 | - 链接： 12 | - 类别： 13 | - 来源： 14 | - 推荐理由（文章评论/解读）： 15 | - 您的名字： 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weekly", 3 | "version": "1.0.0", 4 | "description": "前端技术双周刊，是百度 KFive 团队推出的技术期刊，记录值得分享的技术好文。", 5 | "main": "index.js", 6 | "directories": { 7 | "doc": "docs" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/SearchFeed/weekly.git" 15 | }, 16 | "author": "", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/SearchFeed/weekly/issues" 20 | }, 21 | "homepage": "https://github.com/SearchFeed/weekly#readme", 22 | "devDependencies": { 23 | "moment": "^2.29.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /HOW-TO-RELEASE.md: -------------------------------------------------------------------------------- 1 | # 周刊发布流程 2 | 3 | 1. 触发 Github Actions 中的 release action： 4 | 5 | ![image](https://user-images.githubusercontent.com/9262426/157417402-55796bb6-77c4-484b-8b96-a3c3ac67e137.png) 6 | 7 | 2. 执行完毕后会产出一个 Pull request： 8 | 9 | ![image](https://user-images.githubusercontent.com/9262426/157417941-903b7cb5-62a8-48f7-a6d0-826fcd1debb4.png) 10 | 11 | 3. 本次 Pull request 所在分支为 `release/new-post`，可以本地进行一些修改后提交，更新 Pull request。一些需要手动修改的内容： 12 | 13 | 1. 增加头图 14 | 2. 调整分类 15 | 3. 增加`第X期` 16 | 17 | 4. 发给其他评委进行审阅。 18 | 5. 如果要修改，回到步骤 3。 19 | 6. 如果不需要修改，合入 Pull request 即可。相关 Issue 会被自动关闭。 20 | 7. 更新首页的 README.md。 21 | 9. 在其他渠道发布： 22 | 23 | 1. 微信公众号 24 | 2. 知乎 25 | 3. 邮件 26 | -------------------------------------------------------------------------------- /.github/workflows/update_readme.yml: -------------------------------------------------------------------------------- 1 | name: Update README with new weekly logs 2 | 3 | on: 4 | push: 5 | branches: [ main ] 6 | paths: 7 | - 'docs/*.md' 8 | workflow_dispatch: 9 | inputs: 10 | reason: 11 | description: 'Reason for manual trigger' 12 | required: false 13 | default: 'Manual update' 14 | 15 | jobs: 16 | update-readme: 17 | runs-on: ubuntu-latest 18 | steps: 19 | - uses: actions/checkout@v2 20 | with: 21 | fetch-depth: 0 22 | - name: Set up Node.js 23 | uses: actions/setup-node@v3 24 | with: 25 | node-version: '20' 26 | 27 | - name: Get changed files 28 | id: changed-files 29 | uses: tj-actions/changed-files@v23 30 | with: 31 | files: | 32 | docs/*.md 33 | 34 | - name: Update README 35 | if: steps.changed-files.outputs.any_changed == 'true' 36 | run: node scripts/update_readme.js 37 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: release 2 | on: workflow_dispatch 3 | jobs: 4 | release: 5 | name: Release 6 | runs-on: ubuntu-latest 7 | steps: 8 | - name: Checkout 9 | uses: actions/checkout@v2 10 | with: 11 | fetch-depth: 0 12 | - name: Setup Node.js 13 | uses: actions/setup-node@v1 14 | with: 15 | node-version: 16 16 | - name: NPM install 17 | run: | 18 | npm ci 19 | - name: generate markdown 20 | id: gen-markdown 21 | env: 22 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 23 | run: | 24 | node ./scripts/index.js 25 | - name: Open pull request 26 | env: 27 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 28 | uses: gr2m/create-or-update-pull-request-action@v1 29 | with: 30 | author: Weekly Bot 31 | branch: release/new-post 32 | body: This PR was auto generated. 33 | commit-message: 'add: ${{ steps.gen-markdown.outputs.issues }}' 34 | title: 'add: ${{ steps.gen-markdown.outputs.count }} posts' -------------------------------------------------------------------------------- /scripts/update_readme.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const { execSync } = require('child_process'); 3 | 4 | // 获取docs目录下所有md文件 5 | const mdFiles = fs 6 | .readdirSync('docs') 7 | .filter((f) => f.endsWith('.md') && /^\d{4}-\d{1,2}-\d{1,2}\.md$/.test(f)) 8 | .sort((a, b) => { 9 | const dateA = new Date(a.split('.')[0]); 10 | const dateB = new Date(b.split('.')[0]); 11 | return dateB - dateA; 12 | }); 13 | 14 | // 读取README内容 15 | let readme = fs.readFileSync('README.md', 'utf8'); 16 | 17 | // 生成日志条目 18 | const logEntries = mdFiles.map((mdFile, index) => { 19 | const dateStr = mdFile.split('.')[0]; 20 | return `- [前端技术双周刊第 ${ 21 | mdFiles.length - index 22 | } 期](https://searchfeed.github.io/weekly/${dateStr})`; 23 | }); 24 | 25 | // 替换日志部分 26 | const updatedReadme = readme.replace( 27 | /(### 周刊日志\n)(?:- .*\n)+/, 28 | `### 周刊日志\n${logEntries.join('\n')}\n` 29 | ); 30 | 31 | // 写入更新后的README 32 | fs.writeFileSync('README.md', updatedReadme, 'utf8'); 33 | 34 | // 设置git配置 35 | execSync('git config --global user.name "github-actions[bot]"'); 36 | execSync( 37 | 'git config --global user.email "github-actions[bot]@users.noreply.github.com"' 38 | ); 39 | execSync('git add README.md'); 40 | execSync('git commit -m "$(date +%F) Update README"'); 41 | execSync('git push'); 42 | -------------------------------------------------------------------------------- /docs/2022-1-5.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#14-2022.1.5 2 | 3 | ![前端技术双周刊_7](https://user-images.githubusercontent.com/4032009/148212746-6fc7fbf5-e9e3-40df-835d-25172ac7e4a1.png) 4 | 5 | ## 低代码 6 | 7 | - [从实现原理看低代码](https://zhuanlan.zhihu.com/p/451340998) 8 |
作者认为低代码本质上可以看作是声明式代码，通过分析声明式语言来分析低代码的优缺点 9 | 10 | - [从产品设计到发布的全链路智能化方案](https://zhuanlan.zhihu.com/p/449414337) 11 |
本文由 InfoQ 整理自百度资深研发工程师钱思成在 GMTC 全球大前端技术大会（深圳站）2021的演讲，介绍了百度内部为了解决大型复杂业务场景下的工程效能问题所做的全链路优化尝试 12 | 13 | ## CSS 14 | 15 | - [2022年的 CSS](https://zhuanlan.zhihu.com/p/452468980) 16 |
在即将过去的 2021 年，CSS 变化非常地大，其中新增了很多特性，比如 CSS 容器查询、CSS 父选择器、CSS 层叠控制规则、CSS 子网格等等。而且这些特性已经在个别，甚至是在大部分主流浏览器中实现了 17 | 18 | ## Node.js 19 | 20 | - [New in Node.js: node: protocol imports](https://2ality.com/2021/12/node-protocol-imports.html) 21 |
下次在 Node.js 中引用内置模块的时候可以试试 22 | 23 | ## 拓展阅读 24 | 25 | - [第十六届 D2 前端技术论坛回顾](https://mp.weixin.qq.com/s/BQgPuxTdZi06eIpiL93hSQ) 26 |
会议包含六大主题：语言框架、跨端技术、前端体验、低代码、Node/Serverless、多样化。感兴趣的可以看看 27 | 28 | - [从零开始的游戏开发](https://mp.weixin.qq.com/s/ELEDfKjnCFGanxxPWT_xDg) 29 |
游戏开发对于我们来说比较遥远，但是其中运用的 ECS 架构，值得借鉴学习 30 | 31 | - [浏览器渲染魔法之合成层](https://mp.weixin.qq.com/s/lNu6PYZWDUoicQXVwSVF-Q) 32 | 33 | - [2022 UI 设计趋势指南](https://zhuanlan.zhihu.com/p/449583617) 34 |
极简主义，粘土形态主义，野兽主义，玻璃形态主义，极光背景等等，这些趋势你了解多少？ 35 | 36 | ## 开源项目 37 | 38 | - [NAPI-RS v2 发布](https://cn.napi.rs/blog/announce-v2) 39 |
NAPI-RS 的一次大版本更新，在这次更新以后，NAPI-RS 从一个轻量级 Rust 库变成了一个强大的框架 40 | -------------------------------------------------------------------------------- /docs/2024-2-29.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.02.29 2 | 3 | ![前端&AI技术双周刊](https://gips0.baidu.com/it/u=2511789730,2746911704&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f900_383) 4 | 5 | ## Node.js 6 | - [Node.js新的吉祥物Rocket Turtle](https://twitter.com/nodejs/status/1759953849849167878) 7 |
近日 Node 官方账户公布了最近举办的 Node.js 吉祥物设计大赛的结果，Node 的新吉祥物是 Rocket Turtle 8 | ![Rocket Turtle](https://gips0.baidu.com/it/u=2281965172,4223025471&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f680_383) 9 | 10 | ## AI资讯 11 | - [字节发布文生图开放模型SDXL-Lightning](https://huggingface.co/ByteDance/SDXL-Lightning) 12 |
字节跳动的SDXL-Lightning通过渐进式对抗蒸馏的技术，实现前所未有的生成速度。该模型能够在2步或4步内生成极高质量和分辨率的图像，将生成速度加快十倍，据说是1024分辨率下速度最快的文生图模型 13 | 14 | - [openAi推出最新文生视频大模型Sora](https://openai.com/sora) 15 |
OpenAI发布了一个名为Sora的文本转视频模型，可生成一分钟长的视频，并适用于多场景。该模型能理解用户提示的内容和物理世界，并能生成具有情感的角色。但模型在某些方面仍有局限，如对物理场景的准确模拟和对细节的理解。 16 | 17 | ## CSS 18 | - [CSS :has() 交互指南](https://ishadeed.com/article/css-has-guide?utm_source=CSS-Weekly&utm_campaign=Issue-580&utm_medium=web) 19 |
介绍了CSS :has()选择器的使用方法和有趣的用例。该选择器可以根据其后代元素设计元素样式，解决了在CSS中根据后代元素设计元素样式的问题。文章还介绍了和其他CSS选择器组合使用的场景，如和相邻兄弟选择器、通用兄弟选择器、前一个兄弟选择器和子组合选择器等组合方式 20 | 21 | ## 拓展阅读 22 | - [Apache ECharts 5.5.0 ](https://echarts.apache.org/handbook/zh/basics/release-note/5-5-0/) 23 |
Apache ECharts 5.5.0版本特性介绍，包括增强的ESM支持、服务端渲染和客户端轻量运行时等内容。 24 | 25 | - [点击页面元素打开IDE源码的开源提效工具](https://juejin.cn/post/7326002010084311079) 26 |
对于一些大型项目，文件数量多、文件层级深、代码行数多，查找一个页面上组件对应的源代码位置，往往需要花费大量时间，文章介绍了一个插件，只需要点击页面上的元素，就能够自动打开 vscode 定位到源代码，能够提高调试效率，对于前端调试有很大帮助。 27 | 28 | - [Redwood v7.0](https://javascriptweekly.com/link/151708/web) 29 |
[Redwood](https://javascriptweekly.com/link/151709/web)是一个全栈 Web 框架，将 React、GraphQL、Prisma 和 TypeScript 结合在一起，重点是快速构建完整的应用程序。v7 包括一个名为Redwood Studio的新可观察工具、实时GraphQL 功能等等。 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /docs/2024-4-11.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.04.11 2 | 3 | ![前端&AI技术双周刊](https://gips3.baidu.com/it/u=680309384,148769252&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f900_383) 4 | 5 | ## Node.js 6 | - Node.js v20.12.0 (LTS)和 Node v18.20.0 (LTS) 7 |
Node.js发布了[Node.js v20.12.0 (LTS)](https://javascriptweekly.com/link/153170/web)和[Node v18.20.0 (LTS)](https://javascriptweekly.com/link/153171/web)。其中[Node.js v20.12.0 (LTS)](https://javascriptweekly.com/link/153170/web)版本更新较为丰富，包括实现crypto.hash()函数、加载和解析环境变量、新增连接尝试事件等。 8 | 9 | ## JavaScript 10 | - [ECMAScript Iterator helpers](https://v8.dev/features/iterator-helpers) 11 |
[该提案](https://javascriptweekly.com/link/153179/web)已有几年历史，但现在处于 TC39 的第 3 阶段， Iterator Helpers正在实现并随 V8 12.2/Chrome 122 一起发布。这些 helpers 是诸如.map、.filter、.take和.forEach，可用于Iterator.prototype其原型链中的任何对象 12 | 13 | ## CSS 14 | - [focus-within](https://css-tricks.com/accessible-forms-with-pseudo-classes/) 15 |
介绍了CSS伪类:focus-within，以及如何帮助开发者更好地控制表单焦点，提高用户交互体验。 16 | 17 | ## AI 资讯 18 | - [Suno正式上线V3版本 - 这是AI音乐的"ChatGPT"时刻](https://mp.weixin.qq.com/s/ayDIh4Db3ecpDftG7VdQng) 19 |
Suno AI音乐生成器正式上线V3版本，被视为AI音乐的"ChatGPT"时刻。该版本相较于之前版本在音质、咬字、节奏编排等方面有显著提升。用户可以通过自定义模式或Instrumental模式生成音乐，并使用积分进行roll操作。此外，还提供了一个Prompt工具，帮助用户快速生成歌曲。 20 | 21 | ## 拓展阅读 22 | - [JavaScript Visualized: Promise Execution](https://www.lydiahallie.com/blog/promise-execution) 23 |
通过有趣的图解和简短的视频，非常生动形象的介绍了 Promise 如何工作以及背后的执行机制，将整个 Promise 机制讲解得很通俗易懂。 24 | 25 | - [Babylon.js 7.0](https://www.babylonjs.com/) 26 |
Babylon.js 7.0版本带来了性能改进、渲染增强和Procedural Geometry、Global Illumination、Gaussian Splat Rendering和Ragdoll Physics等能力。 27 | 28 | - [js-pytorch](https://github.com/eduardoleao052/js-pytorch) 29 |
一个类似PyTorch的JavaScript库——Python的PyTorch是机器学习库中的黄金标准之一，但该项目将其一些功能直接带入了JavaScript进行实现。 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /docs/2024-6-13.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.06.13 2 | 3 | ![前端&AI技术双周刊](https://gips0.baidu.com/it/u=2188273783,1274104616&fm=3028&app=3028&f=JPEG&fmt=auto&q=75&size=f900_383) 4 | 5 | ## JavaScript 6 | - [前端 JS 异常那些事](https://juejin.cn/post/7363836064484737061) 7 |
文章系统地介绍了什么是异常、异常的分类、异常的传播、异常的处理，以及一些异常处理的实践等等，对日常开发有一定帮助。 8 | 9 | - [JavaScript的信号提案](https://github.com/tc39/proposal-signals) 10 |
这篇文章由 TC39 提案的领导者编写，讨论了 JavaScript 的信号提案。提案通过引入信号机制，类似于之前 Promises/A+ 的努力，旨在改进应用程序状态的管理，使开发者能够专注于业务逻辑而非重复细节。作者强调，这一提案不仅仅是为了提供一个统一的开发人员界面 API，而是为了精确地定义信号图的核心语义，为框架构建提供共同的信号图和自动跟踪机制。提案描述了信号在 Web 框架中的使用案例，以及如何通过信号简化和自动化数据绑定和状态管理。预期这种信号机制将能够以互操作的方式嵌入不同的框架中，带来实践中的实际益处 11 | 12 | ## AI 资讯 13 | - [Cartesia 发布低延迟音频生成模型](https://cartesia.ai/blog/sonic) 14 |
Cartesia 发布了一个拥有极快推理速度和超低延迟的语音生成模型。 15 | 16 | - [OpenAI与苹果合作，将ChatGPT集成在iOS 18中](https://www.aihub.cn/news/openai-and-apple-announce-partnership/) 17 |
OpenAI在官网宣布与苹果达成技术合作，将ChatGPT深度集成在苹果产品矩阵中 18 | 19 | ## AI 实践 20 | - [大模型RAG入门及实践](https://blog.csdn.net/qiwoo_weekly/article/details/138876464?spm=1001.2014.3001.5502) 21 |
在大语言模型（LLM）飞速发展的今天，LLMs 正不断地充实和改进我们周边的各种工具和应用。如果说现在基于 LLM 最火热的应用技术是什么，检索增强生成（RAG，Retrieval Augmented Generation）技术必占据重要的一席。RAG 最初是为了解决 LLM 的各类问题的产生的，但后面大家发现在现阶段的很多企业痛点上，使用RAG好像是更好的解决方案。 22 | 23 | ## 扩展阅读 24 | - [Chroma + Ollama 搭建本地RAG应用](https://blog.csdn.net/qiwoo_weekly/article/details/139457416?spm=1001.2014.3001.5502) 25 |
文章基于 Ollama 本地运行大语言模型（LLM），并结合 ChormaDB、Langchain 来建立一个小型的基于网页内容进行本地问答的RAG应用。 26 | 27 | - [使用Performance面板分析Node.js性能](https://developer.chrome.com/docs/devtools/performance/nodejs/) 28 |
这篇文章介绍了如何通过Chrome开发者工具中的 Performance 面板来分析 Node.js 应用的性能。文中讲解了什么是 CPU 性能分析、如何开启 Node.js 的 DevTools、如何记录并分析 CPU 利用情况，并介绍了通过 console.profile() 命令进行性能分析的方法。性能分析结果可以帮助开发者发现程序中的性能瓶颈，优化代码。具体的步骤包括在命令行中启动 Node.js或 Deno 程序的检测，连接到 DevTools，记录性能，以及如何读取和使用各种工具（如Timeline、Bottom-Up、Call Tree、Event Log）来分析性能数据。这些工具为开发者提供了可视化的性能指标，使性能调优更加直观有效。 29 | -------------------------------------------------------------------------------- /docs/2022-6-29.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#25-2022.06.29 2 | 3 | ![前端技术双周刊_25](https://tva1.sinaimg.cn/large/e6c9d24ely1h3pc7dyybnj20p00antb1.jpg) 4 | 5 | ## Javascript 6 | - [Faster initialization of instances with new class features](https://v8.dev/blog/faster-class-features) 7 |
Class 从 V7.2 开始在 V8 中发布，私有类方法从 V8.4 发布，本文列出了两个主要影响它们被使用的问题，着重从问题一" Class 和私有方法的初始化要比普通属性的赋值慢得多"的解决入手解读 8 | 9 | - [ES 2022 正式发布！有哪些新特性？](https://mp.weixin.qq.com/s/83SxYXpxCilGypJUGKG9qw) 10 |
2022 年 6 月 22 日，第 123 届 ECMA 大会批准了 ECMAScript 2022 语言规范，本文较详细的解读了 ES 2022 的新特性 11 | 12 | - [TypeScript 4.8 beta](https://juejin.cn/post/7113014985303392270) 13 |
TypeScript 4.8 beta 发布：有一些我们即将遇见更新如装饰器、类型收窄增强、模板字符串类型中的 infer。也可以在 [4.8 Iteration Plan](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fmicrosoft%2FTypeScript%2Fissues%2F49074) 查看所有被包含的 Issue 与 PR 14 | 15 | ## Node.js 16 | - [Fastify 如何实现高性能路由](https://mp.weixin.qq.com/s/UP82fpEk2-O9c5ygnYzotA) 17 |
分析了 Fastify 框架路由系统的原理 18 | 19 | - [Fastify 如何实现更快的 JSON 序列化](https://mp.weixin.qq.com/s/oFHc2yF_y4bu8vfwxZr0eQ) 20 |
分析了 Fastify 框架的高性能原理 21 | 22 | ## 前端框架 23 | - [Vue 的双端 diff 算法](https://juejin.cn/post/7114177684434845727) 24 |
diff 算法是前端框架中较为常见的一种用于 dom diff 更新的算法，当再次渲染 vdom 时，比较新旧 vdom 树来更新变化的 dom，主要从简单 diff 到双端 diff，以及 vue3 最长递增子序列的算法对其的优化介绍 25 | 26 | ## 性能优化 27 | - [Web 页面全链路性能优化指南](https://mp.weixin.qq.com/s/wJxj5QbOHwH9cKmqU5eSQw) 28 |
更全面的解读性能优化，不仅仅从页面的启动速度分析，对 web 页面的全链路进行完整的讲解并针对每一步找到能做的性能优化点，从基础解读到详细实现 29 | 30 | ## 扩展阅读 31 | - [Alibaba Code 代码索引技术实践](https://juejin.cn/post/7114571375544631304) 32 |
本文主要介绍了 Alibaba Code Review 的技术实践，包括如何达到编译器级别的准确度和分钟级的构建速度、保障多版本的稳定性和毫秒级 RT 的服务等等 33 | 34 | - [程序员在家做饭方法指南 ](https://github.com/Anduin2017/HowToCook) 35 |
不会做饭的码农不是好码农 36 | 37 | - [探秘 HTTPS](https://mp.weixin.qq.com/s/mpoDKIsQbNdpuBNhnvvf-g) 38 |
深层次的解读 HTTPS，从 HTTP 到加密算法及 CA 证书，最后回到 HTTPS 本身的，由浅入深它也是目前安全传输 HTTP 的最优解 39 | 40 | - [What would a Chromium-only Web look like?](https://www.mnot.net/blog/2022/06/22/chromium-only.html.brotli) 41 |
如果只剩下一个 Web 引擎，很多兼容性问题都不复存在了，新特性也许会更快的在生产环境使用，但 Web 世界就会因此变得更好吗？ 42 | 43 | -------------------------------------------------------------------------------- /docs/2024-3-29.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.03.29 2 | 3 | ![前端&AI技术双周刊](https://gips3.baidu.com/it/u=1738046946,3286364374&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f900_383) 4 | 5 | ## Node.js 6 | - [在 Node.js 中使用 require() 同步加载 ESM](https://joyeecheung.github.io/blog/2024/03/18/require-esm-in-node-js/) 7 |
如果启用了--experimental-require-module，并且要通过 require() 加载的 ESM 满足特定条件，require() 就可以像加载 CommonJS 模块一样加载 ESM 模块，并返回模块的命名空间对象。 8 | 9 | ## 前端技术 10 | - [在现代应用中使用 localStorage 的全面指南](https://rxdb.info/articles/localstorage.html#what-to-use-instead-of-the-localstorage-api-in-javascript) 11 |
探讨 localStorage API 的各个方面，包括优点、限制和现代应用程序中可用的替代存储选项。 12 | 13 | - [TypeScript 5.5 新特性](https://www.totaltypescript.com/type-predicate-inference) 14 |
TypeScript 5.5 即将在未来的几个月内发布。这个版本能够根据函数的控制流（例如if语句、循环等）来推断变量的类型，帮助开发者在编译时捕获更多的类型错误，从而提高代码的质量和可维护性。 15 | 16 | - [Rsbuild v0.5 发布](https://rsbuild.dev/zh/community/releases/v0-5#rsbuild-v05-%E5%8F%91%E5%B8%83) 17 |
Rsbuild 是一个基于 Rspack 的 web 构建工具。Rsbuild v0.5 的绝大部分 API 已经达到稳定状态，Rsbuild v1.0 预计在 2024 年 Q3 发布。 18 | 19 | - [VitePress 1.0 发布](https://blog.vuejs.org/posts/vitepress-1.0) 20 |
VitePress 是一款静态站点生成器 (SSG)，专为构建快速、以内容为中心的网站而设计。 21 | 22 | ## CSS 23 | - [使用 CSS color-mix() 函数创建调色板](https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/?utm_source=CSS-Weekly&utm_campaign=Issue-582&utm_medium=web) 24 |
一个比较新的CSS 函数color-mix()，能够混合不同颜色，创造出色彩缤纷的调色板。 25 | 26 | ## AI 资讯 27 | - [微软新作「Mora」，复原Sora](https://mp.weixin.qq.com/s/G08_a5gkzjTIAt8MoprmMA) 28 |
Sora虽爆火但闭源，给学术界带来了不小的挑战。学者们只能尝试使用逆向工程来对Sora复现或扩展。近日，理海大学联手微软团队推出一种新型的多AI智能体框架———Mora。 29 | 30 | - [Colossal-AI 团队全面开源全球首个类 Sora 架构视频生成模型 Open-Sora 1.0](https://github.com/hpcaitech/Open-Sora) 31 |
Colossal-AI 团队全面开源全球首个类 Sora 架构视频生成模型 「Open-Sora 1.0」，涵盖了整个训练流程，包括数据处理、所有训练细节和模型权重，携手全球 AI 热爱者共同推进视频创作的新纪元。 32 | 33 | ## 资源推荐 34 | - [开源 LLM 工具](https://huyenchip.com/llama-police) 35 |
流行的开源 LLM 工具汇总，每6小时更新。 36 | 37 | - [MistCSS](https://typicode.github.io/mistcss/) 38 |
MistCSS 提供了一种将纯 CSS React 组件编译成 TypeScript 等效组件的方法——虽然还处于早期阶段，但这是一个有趣的想法。 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /docs/2021-11-24.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#11-2021.11.24 2 | 3 | ![前端技术双周刊_11](https://tva1.sinaimg.cn/large/008i3skNly1gwq9h0xc6aj30p00anjtp.jpg) 4 | 5 | ## JavaScript 6 | - [TypeScript 系列之 Narrowing](https://zhuanlan.zhihu.com/p/432622039) 7 |
Narrowing 即类型收窄，TypeScript 中将类型自动推导为更精确类型的过程叫类型收窄。本文涵盖了代码中几乎所有类型收窄的情况。 8 | 9 | - [浅谈 MessageChannel](https://zhuanlan.zhihu.com/p/432726048) 10 |
基本涵盖了 MessageChannel 的所有应用场景 11 | 12 | - [How to Debounce and Throttle Callbacks in Vue](https://dmitripavlutin.com/vue-debounce-throttle/) 13 |
在 Vue 中使用 Debounce 和 Throttle 需要注意的问题 14 | 15 | ## CSS 16 | 17 | - [Responsive Layouts, Fewer Media Queries](https://css-tricks.com/responsive-layouts-fewer-media-queries/) 18 |
不用 media queries 如何实现响应式设计？本文提供了一套纯 CSS 方案，包括基于容器宽度改变背景色，在不同大小屏幕下改变元素位置、显示或隐藏某个元素、改变一行元素个数等。不知不觉，CSS 的能力已经变得这么完善了！ 19 | 20 | ## Node.js 21 | - [装饰器+依赖注入开发 Node 后台接口](https://zhuanlan.zhihu.com/p/433149145) 22 |
这篇文章适合于对控制反转和 AOP 切面编程感兴趣的同学 23 | 24 | ## 前端工程化 25 | - [【翻译】Rust 是 JavaScript 基础设施的未来](https://mp.weixin.qq.com/s/n_ZeNp1MjWiA4bb62oto7A) 26 |
Rust 以其强大的性能和优秀的内存管理机制，现在正越来越多地被用来取代 JavaScript 成为 Web 生态系统的一部分，如压缩、编译、打包、N-API、WASM 等等。附：[原文链接](https://leerob.io/blog/rust) 27 | 28 | ## 拓展阅读 29 | - [抖音背后的 RTC 优化技术揭秘](https://mp.weixin.qq.com/s/BhVM6i3ZPwTwTqJoT3qR1g) 30 |
针对抖音中的不同场景要求，总结了基于清晰度、流畅度、实时性指标的优化策略最佳实践 31 | 32 | - [大漠：我认识的 W3C 规范](https://mp.weixin.qq.com/s/sND2srCSi0k1bQnIkXxmvw) 33 |
针对 W3C 规范很详尽的介绍，建议收藏保存，当做一个目录索引，需要的时候查一查 34 | 35 | - [Sorting colors in JavaScript](https://tomekdev.com/posts/sorting-colors-in-js) 36 |
本文介绍了如何把一堆杂乱无章的颜色进行排序展示的方法，以提供良好的视觉体验 37 | 38 | - [【翻译】TypeScript 4.5 正式发布](https://zhuanlan.zhihu.com/p/435054926) 39 |
11.17日 TypeScript 4.5正式发布，这里查看 [官方原文](https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/) 40 | 41 | ## 开源工具 42 | 43 | - [execa](https://github.com/sindresorhus/execa) 44 |
可以用来替代child_process的友好版本。拥有 Promise 接口，更好的 windows 系统支持，最大支持100MB Buffer 等特点 45 | 46 | - [typescript-boilerplate](https://github.com/metachris/typescript-boilerplate) 47 |
typescript 项目脚手架，支持 TS4，集成了 esbuild 打包，支持 Node.js 和浏览器项目 48 | 49 | -------------------------------------------------------------------------------- /docs/2024-9-5.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.09.05 2 | ![](https://gips2.baidu.com/it/u=661260781,1505539193&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f900_383) 3 | 4 | ## 前端技术 5 | - [在现代的原生 JavaScript 中进行内存高效的 DOM 操作](https://frontendmasters.com/blog/patterns-for-memory-efficient-dom-manipulation/) 6 |
主要介绍了如何通过现代 JavaScript 方法进行高效的 DOM 操作，这些方法可以帮助开发者优化页面性能，降低内存使用，并提高用户体验和 Web 应用的性能。 7 | - [［译］Vue 3.5 “天元突破” 发布！](https://juejin.cn/post/7410316451962142731) 8 |
在 3.5 版本中，Vue 的响应式系统经过了又一次重大重构，在不改变行为的前提下，实现了更好的性能和显著的内存使用优化（减少 56%）。这次重构还解决了在服务端渲染（SSR）过程中，由于悬挂的计算属性导致的过时计算值和内存问题。 9 | 10 | - [React is (becoming) a Full-Stack Framework（React 正在成为一个全栈框架）](https://www.robinwieruch.de/react-full-stack-framework/) 11 |
React 正在从单纯的前端框架发展为全栈框架，曾经是最受欢迎的前端框架，现在已经成功地弥合了前端和后端之间的鸿沟，成为了横跨这两个领域的主宰。通过引入 Server Components 和 Server Actions，它现在能够在前端和后端之间建立桥梁，为开发者提供了从 UI 到数据库的垂直特性实现能力。 12 | 13 | - [Node v22.7.0 (Current)](https://nodejs.org/en/blog/release/v22.7.0) 14 |
Node 22.6 允许你从源代码中剥离类型，但现在使用 --experimental-transform-types，你还可以在运行之前将仅限 TypeScript 的语法转换成 JavaScript。模块语法检测现在也默认启用了 15 | 16 | - [TypeScript 5.6 Release Candidate](https://devblogs.microsoft.com/typescript/announcing-typescript-5-6-rc/) 17 |
像往常一样，Daniel 展示了最新动态的精彩概览。不过，我们将在下周更加关注这一点，因为最终版本预计在下周二（9月3日）发布 18 | 19 | ## AI 资讯 20 | - [阿里开源通用多模态大模型 mPLUG-Owl3](https://mp.weixin.qq.com/s/QmxsPMe0wDElJwaUvwd9Tw) 21 |
阿里团队新成果正式亮相——推出通用多模态大模型mPLUG-Owl3，专门用来理解多图、长视频，实测4秒就能看完一部2小时的电影且可以理解和回答有关长视频的问题，大幅提升了推理效率，mPLUG-Owl3 还在多模态大模型所涉及的各种场景，包括单图、多图、视频领域的诸多 Benchmarks 上达到了SOTA 22 | 23 | - [Hugging Face 发布适用浏览器的 SOTA 小模型](https://mp.weixin.qq.com/s/MXyrP0L7oVAjqJnrPqdnQg) 24 |
Hugging Face 推出了在浏览器中运行的 SOTA 小模型，分别在2亿、5亿和20亿级别获胜。强调了严格过滤网络数据的重要性，并质疑了合成数据的普遍应用前景 25 | 26 | ## 拓展阅读 27 | - [JavaScript 生成器详解](https://www.reactsquad.io/blog/understanding-generators-in-javascript) 28 |
文章首先介绍了生成器在 JavaScript 中的强大与未被充分利用的现状，并指出许多教程只是浅尝其表。作者在文章中深入探讨，帮助读者建立高级的理解。 29 | - [黑神话悟空攻略AI问答](https://wukong.today/) 30 |
类似于 AI 搜索引擎，可以搜索黑神话悟空通关攻略。现在做悟空多语言网站，介绍西游记背景和游戏攻略还是有机会，国外up看黑神话的剧情还停留在打斗和角色大小的层面。 31 | 32 | - [Better SSE 0.13](https://github.com/MatthewWid/better-sse) 33 |
简单、符合规范、无依赖的服务器发送事件（SSE）实现 34 | -------------------------------------------------------------------------------- /docs/2022-5-5.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#22-2022.05.05 2 | 3 | ![前端技术双周刊#22](https://tva1.sinaimg.cn/large/e6c9d24ely1h1xjq9q1r7j20p00antb1.jpg) 4 | 5 | ## JavaScript 6 | - [ECMAScript 双月报告](https://mp.weixin.qq.com/s/Vk2w-VMoYTdOSEg8E0WqDA) 7 |
在本次会议中，受关注程度较高的装饰器提案与 Type Annotations 提案均取得了阶段性进展，分别进入到 Stage 3 与 Stage 1。另外，本次会议中没有提案从 Stage 3 进入到 Stage 4。 8 | 9 | ## CSS 10 | - [现代 CSS Reset 解决方案](https://mp.weixin.qq.com/s/y-bZb7kPXEWmYZnr3yjl7A) 11 |
现代 CSS Reset 解决方案除去页面样式最基本的呈现外，同时也关注用户体验与可访问性。这也可能是过去，我们在写 CSS 的时候比较容易忽略的环节。 12 | 13 | - [Exploring the new CSS color functions: CSS Color Module Level 5](https://blog.logrocket.com/exploring-css-color-module-level-5/) 14 |
[CSS Color Module Level 5](https://drafts.csswg.org/css-color-5/)目前仍处于草案阶段，但是里面提供了很多新的颜色函数值得关注。 15 | 16 | - [奇妙的CSS MASK](https://mp.weixin.qq.com/s/7dNOYPxt50IZqr5Ti96cIg) 17 |
介绍 CSS Mask 属性，本文罗列了一些使用 mask 创造出来的有意思的场景；mask 译为遮罩，允许使用者通过遮罩或者裁剪特定区域的图片的方式隐藏一个元素的部分或者全部可见区域。 18 | 19 | ## 前端框架 20 | - [理解 React Hooks 的闭包陷阱](https://mp.weixin.qq.com/s/0P7eWSNQNKWroDIlcgHBVw) 21 |
本文从一个点开始介绍了 hooks 引起的闭包陷阱，产生的原因已经解决方法，通过正确设置 deps 数组，每次用到的 state 改变后执行新函数，引用新的 state，同时注意清理上下次的定时器、事件监听器等。 22 | 23 | - [前端框架源码解读之 Vite](https://mp.weixin.qq.com/s/s4QqK4sa6UauVad1GmIKdg) 24 |
概述了目前前端比较成熟的构建工具，着重介绍 vite 的核心实现原理，以及针对 webpack 的痛点的解决。 25 | 26 | ## 开源产品 27 | - [UnoCSS Interactive Docs](https://uno.antfu.me/) 28 |
一款可以快速搜索原子化 CSS、CSS 属性和相关文档的工具，很流畅！ 29 | 30 | ## 拓展阅读 31 | - [Github 热榜《程序员延寿指南》](https://github.com/geekan/HowToLiveLonger) 32 |
死亡率降低 66.67% 的秘籍！ 33 | 34 | - [Monorepo 的过去、现在、和未来](https://mp.weixin.qq.com/s/U8_30S9B0S_SU3jdgUxFGQ) 35 |
社区的 Monorepo 方案一直在不断演进。 36 | 37 | - [编译 TS 代码用 tsc 还是 babel？](https://zhuanlan.zhihu.com/p/496110569) 38 |
文中讨论了 tsc 和 babel 编译 TS 代码的区别，但并不做推荐。具体用什么编译 TS，大家可以根据场景自己选择。 39 | 40 | - [Web端短视频编辑器的设计与实现](https://mp.weixin.qq.com/s/Zbsq20XdEhxwSFZePOvhlQ) 41 |
本文是第十六届D2前端技术论坛分享的主题，让做视频像写 PPT 一样简单，让用户可以快速创作出视频知识内容。 42 | 43 | - [Chrome DevTools Inspector 扩展实践](https://mp.weixin.qq.com/s/gsq9du1Xaabl1YlJm8ONIQ) 44 |
从 chrome devtools inspector 扩展为出发点，介绍了 devtools frontend 调试原理及模块加载方式，react native debugger 调试原理，跨域调试方案，最终实现 devtools inspector 的调试扩展。 45 | 46 | 编辑：okaychen 47 | -------------------------------------------------------------------------------- /docs/2022-9-7.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#30-2022.09.07 2 | 3 | ![前端技术双周刊_30](https://tva1.sinaimg.cn/large/e6c9d24ely1h5y9u67cgaj20p00antb1.jpg) 4 | 5 | ## JavaScript 6 | 7 | - [Dependency Injection in JS/TS – Part 1](https://blog.codeminer42.com/dependency-injection-in-js-ts-part-1/) 8 |
本文介绍了依赖注入的概念、实现方法和在应用过程中的问题及解决方法，包括依赖注入无法单测的问题、循环依赖的问题等 9 | 10 | - [Announcing TypeScript 4.8](https://devblogs.microsoft.com/typescript/announcing-typescript-4-8/) 11 |
TypeScript 4.8 版本正式发布，在 4.8 beta 版本我们预见了一些新的特性。在近期正式版本，最终确定的特性也有了部分更新 [TypeScript 4.8 Iteration Plan](https://github.com/microsoft/TypeScript/issues/49074) 12 | 13 | ## CSS 14 | 15 | - [创意性的 CSS 布局和灵活 Web](https://zhuanlan.zhihu.com/p/561874666) 16 |
在过去的几年时间，有关于 Web 布局的 CSS 特性变化可以说是突飞猛进。作为开发人员，挑战不再是这些 CSS 特性怎么使用，能做些什么，而是在这么多 CSS 新特性中，我们应该如何做出最佳（最为适合）选择，来构建构建具有创造性、灵活性的 Web 布局。 17 | 18 | ## 前端框架 19 | - [React Query meets React Router](https://tkdodo.eu/blog/react-query-meets-react-router) 20 |
[React Router 6.4](https://link.juejin.cn/?target=https%3A%2F%2Fbeta.reactrouter.com%2Fen%2Fdev) 即将正式发布，React Router 也加入了远程状态管理的数据获取游戏。文将带你了解 React Router 和现有的远程状态管理库(如：React Query)之间的竞争和关联。 21 | 22 | ## 工具推荐 23 | - [JSONCrack](https://jsoncrack.com/editor) 24 |
一个把 JSON 可视化展现成图的工具。 25 | 26 | ## 拓展阅读 27 | - [Chrome 105 正式版发布](https://chromestatus.com/features#milestone%3D105) 28 |
105版本的更新带来了很多令人兴奋的特性。 29 | 30 | - [GitHub 或下线 GitHub Trending 页面](https://github.com/community/community/discussions/31644) 31 |
由于低使用率的原因，Github 将在9月底下线 Trending 页面。但是自官方公告发出以来，大量用户反馈 对 Trending 页面的不舍和喜爱，这让 Github 不得不重新评估下线 Trending 的决定。 32 | 33 | - [前后端协作规范](https://juejin.cn/post/7140422304920109092) 34 |
本文主要介绍该团队内部沉淀并践行已久的前后端协作规范，来抹平沟通差异；有了协作规范，便有了前后端开发默契，也因此达到了提高开发效率、降低沟通成本的作用。 35 | 36 | - [初探Flutter跨端游戏开发](https://juejin.cn/post/7140583175331250213) 37 |
本文主要探讨了 Flutter 3.0 对游戏的支持力度，从为什么可以，到 Flutter 具体如何实现一个小游戏；最后回归到 Flame 引擎，层层深入。 38 | 39 | - [Material Design 3发布](https://zhuanlan.zhihu.com/p/450105902) 40 |
Google 的 Material Design 和 Apple 的 Human Interface Guidelines 并列为移动端两大规范。新版的 Material Design 明显好看很多，让我们看看它有哪些方面的改变？附：[Material Design 3 官网](https://m3.material.io/)和[Material Design 3 中文翻译版](https://www.yuque.com/advancedux/xr6e1n) 41 | -------------------------------------------------------------------------------- /docs/2022-7-27.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#27-2022.07.27 2 | ![](https://mms-graph.cdn.bcebos.com/wiki/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E5%8F%8C%E5%91%A8%E5%88%8A_20.png) 3 | 4 | ## JavaScript 5 | - [Updates from the 91st TC39 meeting](https://dev.to/hemanth/updates-from-the-91th-tc39-meeting-779) 6 |
近期 TC39 会议的提案及进展速递 7 | 8 | - [The 10 Most Common JavaScript Issues Developers Face](https://www.toptal.com/javascript/10-most-common-javascript-mistakes) 9 |
10个开发者最常遇到的 JavaScript 问题 10 | 11 | - [Scroll，你玩明白了嘛？](https://mp.weixin.qq.com/s/jsnF6wML0g2XgBQZN3u-4Q) 12 |
介绍了关于 scroll 的一些 api 使用，原生 scrollIntoView 的坑以及区分人为滚动和脚本滚动的实现参考。 13 | 14 | ## Node.js 15 | - [ESM Loader Hooks](https://zhuanlan.zhihu.com/p/542892073) 16 |
在最近发布的Node v18.6.0中，带来了一个试验特性[ESM Loader Hooks API](https://link.zhihu.com/?target=https%3A//nodejs.org/en/blog/release/v18.6.0/)，可能会影响未来的前端工程化领域。 17 | 18 | ## 性能优化 19 | - [Why Your Cached JavaScript Is Still Slow and Incurs Performance Overhead](https://www.webperf.tips/tip/cached-js-misconceptions/) 20 |
缓存是优化 Web 应用程序网络开销的绝佳方式，但是缓存 JavaScript 仍然存在大量计算开销。对于 JavaScript 资源减少客户端计算量才是最重要的。 21 | 22 | ## 前端框架 23 | - [Vite 3.0 发布: 核心更新盘点与分析](https://mp.weixin.qq.com/s/_GuGJaf8Sew5D8JaLQ3qOA) 24 |
介绍了Vite 3.0 带来的一些改变以及未来的规划 25 | 26 | ## 扩展阅读 27 | - [小程序长列表优化实践](https://mp.weixin.qq.com/s/zgpK6L0Tf81KIhf-4k-gnA) 28 |
本章节介绍了在小程序端长列表的性能瓶颈，介绍了常用的解决方案 29 | 30 | - [试着换个角度理解低代码平台设计的本质](https://mp.weixin.qq.com/s/RMB1Xlb5gKN22zqzw3hS7A) 31 |
阅读本文可以理解低代码平台核心的底层逻辑和控件、组件、画布的本质是什么 32 | 33 | - [主流移动端组件库的对比和分析](https://mp.weixin.qq.com/s/5W9wrr-d1JyE2TPbOlJBUg) 34 |
从多个角度对现在流行的移动端组件库进行对比与分析 35 | 36 | - [2022 前端生态趋势@尤雨溪](https://mp.weixin.qq.com/s/E0Heb4gstKi9B7DOOguQkg) 37 |
@尤雨溪关于《2022 前端生态趋势》主题分享，有兴趣的可以看看 38 | 39 | - [研发同学应该如何负责好一个项目](https://mp.weixin.qq.com/s/Aa0tKO0A9IECRq2ZARyS-A) 40 |
我觉得不论是职场小白，还是有多年开发经验的职场人，都应该读一下这篇文章，可谓醍醐灌顶，它帮我们分析了技术负责人都应该具备哪些能力和责任，以及如何在产品需求中更好的发挥自己的专业技术，还有往往被研发忽略的产品思维等软实力 41 | 42 | ## 开源项目&工具 43 | - [Superstate](https://superstate.dev/) 44 |
一个全新的微型状态管理库，API 设计简洁优雅，同时也提供了足够的扩展能力 45 | 46 | - [Powerful Image Optimization Tools](https://www.smashingmagazine.com/2022/07/powerful-image-optimization-tools/) 47 |
比较全面的图片优化工具集合，包括平台、cli 工具、编译工具插件等等 48 | 49 | 50 | -------------------------------------------------------------------------------- /docs/2022-2-23.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#17-2022.2.23 2 | 3 | ![前端技术双周刊_17](https://mms-graph.cdn.bcebos.com/wiki/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E5%8F%8C%E5%91%A8%E5%88%8A_10.png) 4 | 5 | ## JavaScript 6 | - [ES6 以上版本代码要不要转码成 ES5?](https://mp.weixin.qq.com/s/fSRpl25Pi0ladeWRXHLGZA) 7 |
从转换后的代码和字节码层面分析 ES6和 ES5代码执行哪个性能更好，大部分情况下，如果可以不转码，更有利于v8提升性能。 8 | 9 | - [Neat Example of Using a JS Proxy as a Low Code REST Client](https://gist.github.com/DavidWells/53518b3c12344952641dc81cc7599939) 10 |
基于 Proxy 实现一个比较优雅的客户端请求。 11 | 12 | - [The State of JS 2021 Results](https://2021.stateofjs.com/zh-Hans/) 13 |
又一个 JavaScript 2021总结！基于全球16085名受访者的调查问卷汇总而来。新颖的数据呈现方式让人眼前一亮！ 14 | 15 | - [Find Global Variables](https://mmazzarolo.com/blog/2022-02-14-find-what-javascript-variables-are-leaking-into-the-global-scope/) and [Track Down Code Location](https://mmazzarolo.com/blog/2022-02-16-track-down-the-javascript-code-responsible-for-polluting-the-global-scope/) 16 |
我们都知道把变量挂到全局不是一个好的做法，这个系列内容提供了如何排查和定位全局变量出处的方法。 17 | 18 | ## CSS 19 | - [现代 CSS 颜色指南](https://juejin.cn/post/7056593845860958215) 20 |
比较全面的 CSS 颜色格式介绍。 21 | 22 | ## 开源产品 23 | - [Ant Design Mobile 5.0 发布](https://zhuanlan.zhihu.com/p/470189883) 24 |
[5.0 版本](https://mobile.ant.design/zh)是一次彻底的重做，它带来了全新的设计体验和 100% 重写的组件代码实现。 25 | 26 | - [Deco](https://deco-preview.jd.com/) 27 |
京东出品的类似于 Imgcook 的设计稿一键生产代码工具，目前设计稿仅支持 Sketch。 28 | 29 | - [Phosphor](https://phosphoricons.com/) 30 |
可变线性图标库，它的特色是支持6种粗细设置，图标组件的参数设置也值得借鉴。 31 | 32 | ## 拓展阅读 33 | - [W3C-中文排版需求](https://w3c.github.io/clreq/) 34 |
一个中文排版需求提案，里面细节挺多很有意思。 35 | 36 | - [Design Systems For Figma](https://www.designsystemsforfigma.com/) 37 |
这里收集整理了在 Figma 社区发布资源的设计系统，可以作为参考学习。 38 | 39 | - [Deep dive into React Native’s New Architecture](https://medium.com/coox-tech/deep-dive-into-react-natives-new-architecture-fb67ae615ccd) 40 |
深入浅出的介绍了 RN 即将到来的新架构，包括 JSI、Fabric、Turbo Modules、CodeGen 等。 41 | 42 | - [A list of every web API in Deno](https://deno.com/blog/every-web-api-in-deno) 43 |
Web 兼容性是 Deno 的主要目标之一，这篇文章列举了 Deno 所实现的每一个 Web API，详尽描述了 Deno 在这个方向上究竟做到了何种程度，打消开发者心中的疑虑。 44 | 45 | - [Reliably Send an HTTP Request as a User Leaves a Page](https://css-tricks.com/send-an-http-request-on-page-exit/) 46 |
如何解决用户点击链接跳转日志请求不丢失的问题？这里提供了2种纯 Web 方法，它们有各自的适用场景，可以自行选择适合自己的。 47 | -------------------------------------------------------------------------------- /docs/2024-8-9.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.08.09 2 | ![](https://gips1.baidu.com/it/u=2212530810,1611102130&fm=3028&app=3028&f=JPEG&fmt=auto&q=75&size=f900_383) 3 | 4 | ## 前端技术 5 | - [Node 实验性支持 TypeScript](https://socket.dev/blog/node-js-adds-experimental-support-for-typescript) 6 |
在 7.25 合并的 PR 中，有一个是 Node.js 增加了对 TypeScript 的实验性支持。这一支持对于推动生态系统向前发展以及使用户能够执行 TypeScript 文件而无需安装外部依赖项或加载程序至关重要。最初的实现是通过设置实验标志 --experimental-strip-types 来执行 TypeScript 文件。不过社区也有不少人认为 TS 会降低 Node 的稳定性，用户需要不断更新 Node 版本才能获取到 TS 的所有功能，所以后续也有可能以解耦的方式分发独立包令其获得实验性 TypeScript 支持。 7 | 8 | - [TypeScript 5.6 Beta 发布](https://devblogs.microsoft.com/typescript/announcing-typescript-5-6-beta/) 9 |
TypeScript 5.6 的首个测试版已经发布，其中区域优先检查（目前仅限 VS Code）是一个特别有趣的新增功能，它支持仅对文件的相关区域进行 TS 检查。 10 | 11 | - [Don't Use JS for That: Moving Features to CSS and HTML](https://www.youtube.com/watch?v=IP_rtWEMR0o) 12 |
不用 JS，将功能迁移到 CSS 和 HTML。本视频中展示了一些可以平替某些 JS 概念的 HTML/CSS 特性。 13 | 14 | - [Garbage collection and closures](https://jakearchibald.com/2024/garbage-collection-and-closures/) 15 |
垃圾回收和闭包 - 本文讨论了 JavaScript 引擎如何在函数内部处理垃圾回收。当三位 JavaScript 专家聚在一起，在遇到内存泄漏时都能学到有关 JavaScript 工作原理的新知识时，它就值得一看。 16 | 17 | - [Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript](https://frontendmasters.com/blog/patterns-for-memory-efficient-dom-manipulation/) 18 |
本文主要讨论了在现代 JavaScript 中，如何使用原生 JS 高效地操作 DOM，以提高应用程序的性能。虽然像 React 或者 Vue 这样的框架让我们可以无需关注 DOM 更新就可以完成应用的开发，但是在某些场景（如拖拽、滚动等）还是无法避免直接操作 DOM。作者在文中提出了很多最佳实践，同时对 DOM 操作和优化背后的核心原则进行了很好的概述。 19 | 20 | ## AI 资讯 21 | - [OpenAI 即将推出 AI 搜索产品 SearchGPT](https://openai.com/index/searchgpt-prototype/) 22 |
旨在通过结合 AI 大语言模型的强大能力和互联网上实时信息，为我们提供快速、及时且具有清晰、相关来源的答案。目前只是给出一个临时原型，并向小部分用户内测，感兴趣的可以申请加入 Waitlist。 23 | 24 | - [GPT-4o 模型支持结构化输出](https://openai.com/index/introducing-structured-outputs-in-the-api/) 25 |
模型型号 gpt-4o-2024-08-06 和 gpt-4o-mini 支持 API 结构化输出，能够 100% 保证输出的JSON格式是正确的。 26 | 27 | ## 扩展阅读 28 | - [How to choose the best rendering strategy for your app](https://vercel.com/blog/how-to-choose-the-best-rendering-strategy-for-your-app) 29 |
文章讨论了应用的不同渲染策略，包括静态站点生成（SSG）、服务器端渲染（SSR）、客户端渲染（CSR）、增量静态渲染（ISR）等。每种策略都有其自己的使用场景和权衡，最终渲染策略的选择应该基于你的应用的特定需求和目标。 30 | 31 | - [So you think you know box shadows?](https://dgerrells.com/blog/how-not-to-use-box-shadows) 32 |
作者发挥创造力，利用 JavaScript 对 div 元素上的盒阴影进行了一些有趣的实验。 33 | 34 | -------------------------------------------------------------------------------- /docs/2024-10-24.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.10.24 2 | 3 | ![前端&AI技术双周刊-2024.10.24](https://gips0.baidu.com/it/u=3642090083,736412362&fm=3028&app=3028&f=JPEG&fmt=auto&q=75&size=f900_383) 4 | 5 | ## 前端技术 6 | - [Improving rendering performance with CSS content-visibility](https://nolanlawson.com/2024/09/18/improving-rendering-performance-with-css-content-visibility/) 7 |
利用 CSS 的 content-visibility 属性来提高网页渲染性能，并以 emoji-picker-element 中的一个性能问题作为案例，详细讲解如何通过这一属性以及其他技术手段解决大量自定义表情元素导致的渲染效率低下问题。 8 | 9 | - [Node.js 23 发布](https://openjsf.org/blog/announcing-node.js-23-key-features-and-enhancement) 10 |
Node.js 23 发布，主要亮点是支持使用 require() 加载原生 ES 模块，不再支持 32 位 Windows，稳定的 --run 命令以及测试运行程序增强 11 | 12 | - [JavaScript 草案 - Structs](https://github.com/tc39/proposal-structs) 13 |
Structs 是一个阶段 1 的 JavaScript 提案，旨在运行多线程 JavaScript。 14 | 15 | - [How to Read a Request Waterfall Chart](https://www.debugbear.com/docs/waterfall) 16 |
瀑布图显示加载网页时发出的网络请求，它们通常用于分析网站速度并确定优化机会，本文通过示例网站详细介绍了如何阅读和分析网络请求瀑布图，对性能分析有很大的帮助 17 | 18 | ## AI 资讯 19 | - [Claude 3.5深夜迎来重磅升级](https://mp.weixin.qq.com/s/dAVfVnzcqvxpocVRhCZqKg) 20 |
深夜上线的Claude，可以像人类一样使用计算机了？查看屏幕、移动光标、点击按钮、输入文本，还能查找代码错误、自动搜集信息填表。AI推理已至瓶颈，下一个爆破点，就是AI操作电脑！ 21 | 22 | - [OpenAI 开源多智能体框架 Swarm](https://mp.weixin.qq.com/s/3-iKztrTuRURUGtles4-xA) 23 |
OpenAI 终于 Open 了一下，开源多智能体框架 Swarm。Swarm 是一个实验性质的多智能体框架，关注的重点是让智能体协作和执行变得轻量、高度可控且易于测试。 24 | 25 | - [特斯拉首款无人驾驶出租问世](https://mp.weixin.qq.com/s/mmplwzC8qYSn-3S0dXhfPA) 26 |
特斯拉发布会上 无人驾驶出租车问世，预计 2027 年之前量产，还有全自动驾驶小巴 Robovan 和人型机器人擎天柱 27 | 28 | - [从威尔・史密斯鬼畜吃面到「Her」，这些幕后技术正在推动AI视频时代的到来](https://mp.weixin.qq.com/s/EOyGYRNZZyr1fLccph7Myg) 29 |
一年多以前，大部分 AI 视频生成模型确实只能非常鬼畜、抽象的水平。但如今，情况完全不同了：AI 不仅能让表情、动作和光影都非常自然，还能运用丰富的镜头语言，生成的视频具有电影级别的质感。 30 | 31 | ## 扩展阅读 32 | - [json4u](https://json4u.cn/) 33 |
一个功能非常强大的 json 可视化和处理工具，提供图形和表格视图模式，支持结构化和文本比较、错误上下文验证、嵌套解析等功能，并且具有用户友好的界面设计 34 | 35 | - [comflowy](https://www.comflowy.com/zh-CN/docs) 36 |
作者认为 AI 生图领域的未来一定是围绕 Stable Diffusion 展开，而 ComfyUI 相比于 Stable Diffusion WebUI 等其他开源产品具备非常强的差异化能力，它具备高度的扩展性和应用可能性，真正做到了让开发者和用户能够根据自己的需求打造个性化的生图流程。 37 | 38 | - [One 框架](https://onestack.dev/) 39 |
One 是一个基于 Vite 的新 React 框架，适用于 Web 和原生应用。支持 SSG、SSR、SPA、类型化路由以及一个新的数据解决方案 ZeroSync。 40 | 41 | - [尤雨溪成立新公司 VoidZero](https://mp.weixin.qq.com/s/KTN6SNXhYHk3-MfcAAYlkg) 42 |
尤雨溪成立新公司融资 3200 万，致力于为 JavaScript 生态系统构建开源、高性能和统一的开发工具链。 43 | -------------------------------------------------------------------------------- /docs/2022-2-9.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#16-2022.2.9 2 | 3 | ![前端技术双周刊_8](https://mms-graph.cdn.bcebos.com/wiki/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E5%8F%8C%E5%91%A8%E5%88%8A_9.png) 4 | 5 | 6 | ## Node.js 7 | - [fetch() In Node.js Core: Why You Should Care](https://fusebit.io/blog/node-fetch) 8 |
Node.js v17.5 introduces support for fetch() – a popular cross-platform HTTP client API that works in browsers and Web/Service Workers – as an experimental core feature. 9 | 10 | ## 拓展阅读 11 | - [国兴中科无障碍解决方案](http://www.iscia.cn) 12 |
最近很多网站都接入了无障碍服务，界面一模一样，使用的都是国兴中科提供的无障碍解决方案。 13 | 14 | - [Memory leaks: the forgotten side of web performance](https://nolanlawson.com/2022/01/05/memory-leaks-the-forgotten-side-of-web-performance/) 15 |
Web App 中的内存泄露往往被大家忽视，因为它们很难察觉，很难定位，修复繁琐。不过我们还是应该重视起来，在开发过程中就要提前考虑，而不是把风险暴露在线上。另外文中还介绍了一款工具 fuite 帮助你发现这类问题。 16 | 17 | - [动态图片生成方案](https://mp.weixin.qq.com/s/0dWfL3ChIceH6rQ8-Oh6pg) 18 |
针对常见的动态图片生成方案的性能问题，提出了 Go + Node.js 的方案 19 | 20 | - [《Designing Data-Intensive Application》DDIA中文翻译](https://github.com/Vonng/ddia) 21 |
本书为数据系统的设计、实现、与评价提供了很好的概念框架。读完并理解本书内容后，读者可以轻松看破大多数的技术忽悠，与技术砖家撕起来虎虎生风 22 | 23 | - [Senate Panel Approves Antitrust Bill Restricting Big Tech Platforms](https://www.wsj.com/articles/senate-panel-approves-antitrust-bill-restricting-big-tech-platforms-11642701487) 24 |
Legislation would bar Amazon, Google, Apple and others from favoring their own products over competitors’ 25 | 26 | - [10 Tips To Write Effective Code Reviews](https://betterprogramming.pub/10-tips-to-write-effective-code-reviews-c25c25aa22c5) 27 |
希望这些提示能够帮助您成为一个更有效的代码审阅者，并且从长远来看为您、代码作者以及整个团队节省时间,尤其推荐第1-10条 28 | 29 | - [当我们聊前端部署时，我们在聊什么](https://juejin.cn/post/7017710911443959839) 30 |
普适性的前端基础设施建设知识，属于和写页面无关但又是前端必备的知识。 31 | 32 | ## 开源工具 33 | - [js-sdsl](https://github.com/ZLY201/js-sdsl) 34 |
实用的 JavaScript 数据结构库。实现了 LinkList、Queue、Set、Map 等数据结构，严格的单元测试提供了正确性和性能的保证，可用于各种需要用到高级数据结构的场景 35 | 36 | - [Babel 7.17.0 Released](https://babeljs.io/blog/2022/02/02/7.17.0) 37 |
Babel 于2月2日发布7.17.0版本，新功能包括基于最新装饰器提案的实现，支持正则 v flag 语法等 38 | 39 | ## 前端框架 40 | 41 | - [新版 Vue 文档](https://vuejs.org/guide/introduction.html) 42 |
随着 Vue 3 成为默认版本，Vue 也上线了新版的文档.可以阅读参考 43 | 44 | - [Vue 3 as the New Default](https://blog.vuejs.org/posts/vue-3-as-the-new-default.html) 45 |
Vue 3 is now the new default version as of Monday, February 7, 2022! 46 | 47 | 48 | -------------------------------------------------------------------------------- /docs/2024-5-30.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.05.30 2 | 3 | ![前端&AI技术双周刊](https://gips2.baidu.com/it/u=2040450957,1189384706&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f900_383) 4 | 5 | ## NodeJS 6 | - [Node v22.2.0](https://nodejs.org/en/blog/release/v22.2.0) 7 |
虽然从功能角度来看，这次发布没有 22.0 或 22.1 那么重要，但修复了许多小错误，对核心开发体验进行了微调，使 Node 的内置 ESLint 规则准备好适用于 ESLint v9，以及添加了 --inspect-wait 标志，使调试器在代码执行的最开始阶段等待连接，以便进行调试。 8 | 9 | ## JavaScript 10 | - [Angular v18](https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe) 11 |
Angular v18发布，内容包括实验性地支持 zoneless 方案以提升开发体验和性能、文档站点更新为[Angular.dev](https://angular.dev/)、支持Material 3 组件库、可延迟视图、服务器端渲染改进等。 12 | 13 | ## CSS 14 | - [The Modern Guide For Making CSS Shapes](https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/?utm_source=CSS-Weekly&utm_campaign=Issue-587&utm_medium=web) 15 |
文章介绍了使用CSS创建图案的方法，强调如何使用干净、可重用的代码。同时探索实现了多种常见CSS形状图案，并提供了不同的CSS技巧和技术方案。 16 | 17 | - [The Times You Need A Custom @property Instead Of A CSS Variable](https://www.smashingmagazine.com/2024/05/times-need-custom-property-instead-css-variable/?utm_source=CSS-Weekly&utm_campaign=Issue-587&utm_medium=web) 18 |
文章介绍了CSS中自定义属性和CSS变量的区别，并通过实例展示了自定义属性在复杂动画设计中的优势，同时介绍了包括定义语法、初始值和继承等特性。 19 | 20 | ## AI 资讯 21 | - [ChatTTS](https://github.com/2noise/ChatTTS) 22 |
ChatTTS是专门为对话场景设计的文本转语音模型，例如LLM助手对话任务。它支持英文和中文两种语言。最大的模型使用了10万小时以上的中英文数据进行训练。在HuggingFace中开源的版本为4万小时训练且未SFT的版本. 23 | 24 | - [Chrome 126 将内置集成大型语言模型](https://developer.chrome.com/docs/ai/built-in?hl=zh-cn) 25 |
Chrome 126 开始将内置集成 Gemini Nano，用户使用 Gemini Nano 可以实现翻译、转录等功能，同时 Chrome DevTools 中 Gemini 可以辅助进行chrome调试。 26 | 27 | ## 拓展阅读 28 | - [How to document your JavaScript package](https://deno.com/blog/document-javascript-package) 29 |
在大型代码仓库迭代过程中，代码文档的维护往往是最令头疼的事情。这里介绍了如何使用JSDoc来编写与代码耦合的文档，并且保持与代码变更同步更新，同时生成的文档可以被转化为多种格式，如HTML、PDF等，以满足不同用户的需求 30 | 31 | - [Chrome DevTools JS性能分析指南](https://blog.jiayihu.net/comprenhensive-guide-chrome-performance/) 32 |
这是一个使用Chrome DevTools挖掘性能问题的一次实操指南 33 | 34 | - [City in a Bottle: Raycasting in 256 Bytes](https://frankforce.com/city-in-a-bottle-a-256-byte-raycasting-system/) 35 |
Frank以用最少量的JavaScript制作出令人惊叹的视觉演示而闻名，这次也不例外。这次他在体积仅 256 Bytes的文件中实现了射线投射引擎和城市生成器，并分享了其原理和实现过程。 36 | 37 | - [Speed Up Your Playwright Scripts with Request Interception](https://www.checklyhq.com/blog/speed-up-playwright-scripts-request-interception/) 38 |
本文介绍了如何使用Playwright的请求拦截功能来加速e2e测试的执行速度。通过拦截不必要的网络请求，可以减少测试运行时间，提高测试效率。 39 | -------------------------------------------------------------------------------- /docs/2024-9-20.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.09.20 2 | ![前端&AI技术双周刊-2024.09.20](https://gips0.baidu.com/it/u=3453253283,3618009981&fm=3028&app=3028&f=JPEG&fmt=auto&q=86&size=f900_383) 3 | 4 | ## 前端技术 5 | - [Multithreading in Node.js: Using Atomics for Safe Shared Memory Operations](https://pavel-romanov.com/multithreading-in-nodejs-using-atomics-for-safe-shared-memory-operations) 6 |
Worker threads 使你能够编写多线程 Node 应用程序，但向多个线程添加共享资源时，情况会麻烦一些。Atomics 可以帮助你避免一些麻烦。 7 | 8 | - [The web's clipboard, and how it stores data of different types](https://alexharri.com/blog/clipboard) 9 |
本文介绍了 Web 上剪贴板的工作原理，以及 clipboard API 是如何存储图像、富文本内容、文件和其他不同类型数据的。 10 | 11 | - [Brand New Performance Features in Chrome DevTools](https://www.debugbear.com/blog/fix-web-performance-devtools) 12 |
Chrome DevTools 中全新的性能面板 - 深入了解 Chrome 浏览器更新的性能面板及其显示的所有不同指标，帮助你提高网站的性能。 13 | 14 | - [Scroll-Enhanced Experiences](https://www.youtube.com/watch?v=YGxOh85VtFg) 15 |
长达 52 分钟的 CSS "滚动叙事 "艺术之旅，利用用户的滚动行为创建动态体验。学习如何使用CSS Scroll Timeline API 控制故事的节奏和韵律，从而创造出随着鼠标滚轮每一次滚动而展开的引人入胜的叙事。 16 | 17 | - [CSS display contents](https://ishadeed.com/article/display-contents/) 18 |
本文介绍了如何使用 display: contents 来构建更流畅的布局。 文中包含大量代码示例和用例，有助于理解。 19 | 20 | - [TypeScript 5.6 发布](https://devblogs.microsoft.com/typescript/announcing-typescript-5-6/) 21 |
TypeScript 5.6 发布，带来了很多实用功能，包括更完善的空值与真值检查、迭代器帮助方法、支持任意模块标识符、编辑器中的区域优先诊断等等。 22 | 23 | ## AI 资讯 24 | - [OpenAI 发布 o1 大模型，强化学习突破 LLM 推理极限](https://openai.com/index/introducing-openai-o1-preview/) 25 |
北京时间 9 月 13 日午夜，OpenAI 正式公开一系列全新 AI 大模型 OpenAI o1，旨在专门解决难题。新模型可以实现复杂推理，一个通用模型解决比此前的科学、代码和数学模型能做到的更难的问题，实现重大突破。其特点是，o1 在回答之前会思考 —— 它可以在响应用户之前产生一个很长的内部思维链。 26 | 27 | - [LangChain 团队推出一门 LangGraph 入门课程](https://academy.langchain.com/courses/intro-to-langgraph) 28 |
在本课程中，你将学到如何：1. 使用 LangGraph 的基于图表的工作流构建智能体；2. 利用记忆和人类反馈机制，构建更加智能且具备自我修正功能的智能体；3. 创建一个自己专属的 AI 助理，处理知识任务。课程可免费学习，一共 40 节课，3.5 小时视频内容。 29 | 30 | - [Runway 推出 Gen-3 Alpha 视频转视频功能，一键转换任何风格](https://app.runwayml.com/) 31 |
该功能能够将一段视频画面风格转换成任意风格，画面稳定，甚至可以给画面增加特效。目前仅针对付费会员开放使用。在线体验地址：https://app.runwayml.com/ 32 | 33 | - [字节发布音乐大模型 Seed-Music，支持一键生成高质量歌曲、片段编辑](https://team.doubao.com/seed-music) 34 |
Seed-Music 是一个具有灵活控制能力的音乐生成系统，除了支持歌词生成歌曲、歌词到乐谱再到歌曲以及歌曲编辑等多功能外。还有额外两个亮点：1. 支持克隆原歌曲音色并生成新歌曲；2. 支持细粒度的风格控制，能保持旋律不变，仅修改歌词。 35 | 36 | 37 | ## 拓展阅读 38 | - [svg.wtf](https://svg.wtf/) 39 |
学习如何编写 SVG 代码的游乐场 - 包括一些有用的代码相关功能，如悬停查看属性的文档等。 40 | 41 | - [The Ultimate Guide to Font Performance Optimization](https://www.debugbear.com/blog/website-font-performance) 42 |
字体性能优化涵盖了多个网页开发技术，可以使字体加载更快、渲染更流畅。 43 | 44 | -------------------------------------------------------------------------------- /docs/2022-7-13.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#26-2022.07.13 2 | 3 | ![image](https://mms-graph.cdn.bcebos.com/wiki/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E5%8F%8C%E5%91%A8%E5%88%8A_19.png) 4 | 5 | ## JavaScript & CSS 6 | - [在JavaScript中如何判断变量类型？](https://juejin.cn/post/7117420187564900366) 7 |
详细的 JavaScript 中类型判断方式介绍。 8 | 9 | - [漫谈 CSS 方法论](https://mp.weixin.qq.com/s/EFA4gTQcP7xUO1Vwx7d2Fg) 10 |
根据 State of CSS 的调查结果显示，目前使用最多的五种 CSS 模式分别为：BEM、ACSS、OOCSS、SMACSS、ITCSS。本文对这5种分别进行了介绍，有你没了解过的吗？ 11 | 12 | ## Node.js 13 | - [JavaScript Containers](https://tinyclouds.org/javascript_containers) 14 |
Ryan Dahl 关于 JavaScript Containers 的看法，Deno 也在实践相关想法。 15 | 16 | - [Cloud Computing without Containers](https://blog.cloudflare.com/cloud-computing-without-containers/) 17 |
Cloudflare Workers 的想法介绍，利用 V8 isolate 来实现 serverless 容器。国内也有了类似的实践。 18 | 19 | ## 性能优化 20 | 21 | - [HTTP 新增的 103 状态码，这次终于派上用场了！](https://mp.weixin.qq.com/s/GjvUqmok8f1efWPkSzkr1w) 22 |
6月下旬 Chrome 发布了 Chrome 103版本，其中提供了对 HTTP 103状态码（Early Hints）的支持。它更适合依靠 SSR 生成 HTML 的页面，我们的性能优化又多了一个手段。 23 | 24 | ## 拓展阅读 25 | - [Bun-a fast all-in-one JavaScript runtime](https://bun.sh/) 26 |
All in one！你没看错，Bun 几乎大包大揽了所有事情（JavaScript 运行时、打包工具、转译器、包管理工具），专注于性能、开发者体验以及与 JavaScript 生态系统的兼容性。 27 | 特色： 28 |
1. 使用 JavaScriptCore 引擎，启动和执行速度比 V8 等要更快一些； 29 |
2. 使用 Zig 语言编写； 30 |
3. 兼容大部分 Node.js 和 Web APIs； 31 | 32 | - [Headless 组件库系列-概念调研](https://zhuanlan.zhihu.com/p/537385085) 33 |
Headless UI 是一种新的交互逻辑开发理念，表示仅提供 UI 元素和交互的逻辑、状态、处理和API，但不提供标记、样式或预构建实现。 特点：无 UI、跨平台和开放定制，这与 Cosmic 标准组件的理念不谋而合。 34 | 35 | - [为什么在关于“开发者生产力”的讨论中，却很少听到开发者的声音？](https://mp.weixin.qq.com/s/oDmSbtXV4-IN_GLmeVzlpg) 36 |
为什么我们在关于“开发者生产力”的讨论中却没有听到更多开发者的声音？大多数自诩为开发者生产力专家的人似乎对销售产品更感兴趣，而不是为开发者提供真正有效的指导。这种现象可能会导致我们沉浸在各种缩略术语、神奇的指标和方法论当中，却没能获得严谨的系统性思考。 37 | 38 | - [深度剖析 VS Code JavaScript Debugger 功能及实现原理](https://mp.weixin.qq.com/s/9FoyLqROYXaTjivbF4KUlg) 39 |
本文将从 VSCode JavaScript Debugger 的功能入手，从源码角度分析其实现对应功能所使用的技术手段及优秀的代码设计，让大家对其中的功能及实现原理有大致理解。 40 | 41 | - [Maker's Schedule, Manager's Schedule ](http://www.paulgraham.com/makersschedule.html) 42 |
Maker 需要大段长的时间周期，而 Manager 更适应多个短的时间周期，作为软件开发人员，应该让自己能有更多的 Maker‘s Schedule。 43 | 44 | - [WebAssembly生态及关键技术综述](https://mp.weixin.qq.com/s/ZZbRRPTYAu8qUmLwKCs6ew) 45 |
一篇关于 WebAssembly 的综述文章，可以快速了解目前的生态和关键技术。 46 | 47 | - [交互体验之动效深耕](https://www.zhisheji.com/jiaocheng/1557661.html) 48 |
动效设计不仅能够增加用户操作的舒适度，还能引导用户关注重要的信息。从本文你可以了解到动效设计的意义与价值。 49 | 50 | ## 开源工具 51 | - [Supa Palette](https://www.supa-palette.com/) 52 |
Supa Palette 是一个功能强大的 Figma 插件，该工具能从一种颜色快速生成整套调色板，支持众多色彩模式。 53 | 54 | 55 | -------------------------------------------------------------------------------- /docs/2021-10-13.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#8-2021.10.13 2 | 3 | ![前端技术双周刊_1](https://user-images.githubusercontent.com/9262426/137092266-075e8262-fff9-4829-aaa0-f0d7b71bbcc9.png) 4 | 5 | ## 前端框架 6 | 7 | - [san-composition](https://github.com/baidu/san-composition) 8 |
San 框架支持了 Composition api 🍻🍻🍻，欢迎使用。 9 | 10 | - [从理念到 LRU 算法实现，起底未来 React 异步开发方式](https://zhuanlan.zhihu.com/p/420486501) 11 |
由 React Suspense 的能力引申到所有异步操作场景，我们可以得到的启发。 12 | 13 | ## JavaScript 14 | 15 | - [JavaScript ES6 Symbol 终极教程](https://zhuanlan.zhihu.com/p/419876620) 16 |
Symbol 知识点查漏补缺。 17 | 18 | - [Enumerating and analyzing 40+ non-V8 JavaScript implementations](https://notes.eatonphil.com/javascript-implementations.html) 19 |
除了主流的 V8、JavaScriptCore、SpiderMonkey 以外，其实还有很多种版本的 JavaScript 引擎实现，本文列举了用于各种不同场景的40+ JavaScript 引擎。 20 | 21 | - [An Introduction to Speculative Optimization in V8](https://ponyfoo.com/articles/an-introduction-to-speculative-optimization-in-v8) 22 |
V8 的开发者，介绍 V8 是如何在运行时通过推断变量类型优化执行效率的。 23 | 24 | ## Node.js 25 | 26 | - [那些你应该说再见的 npm 祖传老库](https://mp.weixin.qq.com/s/1KRUysvbYo69qf2UPRC7Og) 27 |
随着 Node.js 版本不断更新，官方提供了很多新库，社区中的一些库已经可以废弃了。 28 | 29 | - [Node.js 的底层原理](https://zhuanlan.zhihu.com/p/375276722) 30 |
很详细的一篇文章。 31 | 32 | - [NodeConf Remote Oct 18-21](https://www.nodeconfremote.com/) 33 |
Node.js 相关的一个会议，十月下旬开始，可以在线观看。 34 | 35 | ## 端智能&智能化 36 | 37 | - [怎样理解前端智能化这一新浪潮？](https://mp.weixin.qq.com/s/xGaNNV_CHzKb3r4B9sWtVA) 38 |
针对近年来兴起的前端智能化方向，从概念、问题和难点、应用场景等角度给出了作者的一些深入思考。 39 | 40 | - [和你说说代码推荐](https://mp.weixin.qq.com/s/ZY4cj0UvJvPUVogf-0uzWw) 41 |
一篇科普性的短文，介绍了代码智能（Code Intelligence）领域一个有趣的子方向：代码推荐。 42 | 43 | ## More About Web 44 | 45 | - [Safe DOM manipulation with the Sanitizer API](https://web.dev/sanitizer/) 46 |
把 HTML 字符串直接渲染到页面上是很危险的行为，一不小心就会触发 XSS 问题，Sanitizer API 提案就是为了解决这个问题。 47 | 48 | - [Simplifying Form Styles With accent-color](https://www.smashingmagazine.com/2021/09/simplifying-form-styles-accent-color/) 49 |
使用accent-color简化表单元素的样式定制。 50 | 51 | - [深入 WebAssembly 之解释器实现篇](https://mp.weixin.qq.com/s/hktDuC1nky06tAaAi-mwMA) 52 |
介绍了 Wasm 解释器的工作原理和实现思路。 53 | 54 | ## 扩展阅读 55 | 56 | - [用随机梯度下降来优化人生](https://zhuanlan.zhihu.com/p/414009313) 57 |
李沐大佬的一点人生经验。 58 | 59 | - [Chrome is the new Safari. And so are Edge and Firefox.](https://nielsleenheer.com/articles/2021/chrome-is-the-new-safari-and-so-are-edge-and-firefox/) 60 |
不仅国内在反垄断，最近业界呼吁苹果开放 ios 中浏览器内核的声音越来越多，这篇文章写了作者对苹果这一做法的思考。 61 | 62 | - [Facebook 崩溃始末](https://zhuanlan.zhihu.com/p/417401983) 63 |
汇总了多篇针对 Facebook 10月4日崩溃的分析文章，让我们一探究竟。 64 | 65 | 编辑：梅旭光 审阅：胖总&Mr.Q&三水清 66 | -------------------------------------------------------------------------------- /docs/2024-10-11.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.10.10 2 | 3 | ![image](https://gips0.baidu.com/it/u=2581007378,2933451928&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f900_383) 4 | 5 | ## 前端技术 6 | - [Node v22.9.0 (Current) Released](https://nodejs.org/en/blog/release/v22.9.0) 7 |
Node.js v22.9.0 (Current) 新增了一些功能，包括在util模块中引入了getCallSite API，允许用户获取执行堆栈跟踪。由于在Node.js v22中（包含V8 v12.4）Maglev导致多个崩溃和意外的JS行为，因此已禁用。此外，TLS API已扩展以支持部分信任链。这些更新旨在提高Node.js应用程序的用户体验和稳定性。 8 | 9 | - [ ESLint正式支持Linting JSON和Markdown](https://eslint.org/blog/2024/10/eslint-json-markdown-support/) 10 |
ESLint通过提取核心JavaScript特定部分并开发新的语言插件，成功实现了对JSON和Markdown文件的支持。用户可以通过安装相应的插件并更新配置文件来启用这些新特性。 11 | 12 | - [Tesseract.js](https://tesseract.projectnaptha.com/) 13 |
Tesseract.js是一个功能强大的JavaScript OCR库，支持多种语言，可在浏览器和Node.js环境中使用，通过简单的API即可实现图像中的文字识别。 14 | 15 | - [Deno 2.0 Release Candidate](https://deno.com/blog/v2.0-release-candidate) 16 |
Deno 2是Node的原始创建者Ryan Dahl在使用Node后提出的想法的体现。在Deno 2中，有许多变化：window变量消失了，但是Node的process出现了，依赖管理得到了改进，许多API（如WebGPU）也变得更加稳定，同时Node.js API和CommonJS支持也在不断改进。 17 | 18 | ## AI资讯 19 | - [国旗飘扬75年！AI重现首位旗手时空之旅](https://news.cctv.com/2024/10/01/ARTIVgqg95RIc9PhqvXVEcbA241001.shtml) 20 |
1949年10月1日，天安门广场升起了第一面五星红旗，1976年，北京卫戍部队开始负责日常升旗任务。中间相隔的这段时间，天安门广场的国旗是谁负责升起的呢？答案是：胡其俊——一位北京市供电局的普通工人，独自一人在天安门升旗26年。在1976的某一天，他被五星红旗的神奇力量带入一个红色光影空间，与国旗进行了一次深情对话…… 21 | 22 | - [OpenAI 推出ChatGPT 全新界面 Canvas](https://openai.com/index/introducing-canvas/) 23 |
OpenAI 在近日推出了一项新功能 Canvas。Canvas 作为一个全新界面，会在独立窗口中打开写作或编程任务。相比传统对话形式，Canvas 允许用户直接在生成的内容上编辑，省去了反复提示和修改的繁琐过程。 24 | 25 | - [阿里推出视频生成工具 MIMO](https://mimo-ai.com/zh/mimo-ai) 26 |
近日，阿里发布了生成工具MIMO，仅需一张图片,便可在短短数分钟内替换视频中的人物。上传原视频和角色图片后，点击生成后就可以将视频中的人物替换成图片中的角色。 27 | 28 | ## 拓展阅读 29 | - [Posterior-Mean Rectified Flow](https://pmrf-ml.github.io/) 30 |
PMRF算法通过结合后验均值预测和校正流模型，实现了在保持图像感知质量的同时最小化MSE的目标，为光学逼真图像恢复提供了一种新的有效方法。 31 | 32 | - [Split Effects with no Content Duplication](https://frontendmasters.com/blog/split-effects-with-no-content-duplication/?utm_source=CSS-Weekly&utm_campaign=Issue-595&utm_medium=web) 33 |
通过使用单张图片和CSS混合技术，实现了无需渲染重复内容的比较滑块效果。这种方法提高了性能、降低了维护成本。 34 | 35 | - [无身份验证按钮](https://abhisaha.com/blog/no-authentication-like-button) 36 |
文章介绍了一种无需用户身份验证的点赞按钮实现方式，通过浏览器音频指纹，实现无需登录或身份验证。这种方式可以简化用户操作，提升用户参与度，降低流失率。虽然放宽了安全性要求，但在个人网站规模有限的情况下并不会带来过多问题。这种方式适用于希望提升用户体验和内容互动性的场景。 37 | 38 | - [Angular Routing Essentials: All You Need to Know in One Post](https://monsterlessons-academy.com/posts/angular-routing-essentials-all-you-need-to-know-in-one-post) 39 |
文章介绍了如何通过注册组件为路由，使用路由器插座和链接实现页面跳转和内容展示。路由管理包括路线顺序、参数处理、重定向、嵌套路由等，确保页面导航的准确性。程序化导航、延迟加载、路线警卫和路由解析器可以提升应用性能和用户体验。 40 | 41 | -------------------------------------------------------------------------------- /docs/2022-5-18.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#23-2022.05.18 2 | 3 | ![前端技术双周刊_16](https://user-images.githubusercontent.com/9262426/168967162-29628973-a46d-4953-b460-1b3a85bc8a16.png) 4 | 5 | ## CSS 6 | - [Deep Dive into Text Wrapping and Word Breaking](https://codersblock.com/blog/deep-dive-into-text-wrapping-and-word-breaking/) 7 |
关于文字断行的控制，看它就够了 8 | 9 | - [State of CSS 2022](https://web.dev/state-of-css-2022/) 10 |
Google I/O 2022上的 State of CSS 分享 11 | 12 | - [Improving Icons for UI Elements with Typographic Alignment and Scale](https://css-tricks.com/improving-icons-for-ui-elements-with-typographic-alignment-and-scale/) 13 |
当页面排版包括文字大小、行高等有调整时，页面中的图标经常会出现不对齐或不跟随响应的情况。本文提供了一些解决方法可以参考。 14 | 15 | ## JavaScript 16 | - [Faster initialization of instances with new class features](https://v8.dev/blog/faster-class-features) 17 |
[张秋怡](https://twitter.com/JoyeeCheung)为 V8 贡献了类元素的性能优化。 18 | 19 | ## Web 框架 20 | 21 | - [Four Eras of JavaScript Frameworks](https://www.pzuraq.com/blog/four-eras-of-javascript-frameworks) 22 |
总结了前端框架的几个历史阶段。 23 | 24 | - [Web 框架不是答案](https://mp.weixin.qq.com/s/T3ZEzeEsQxbdbOGyuotu-g) 25 |
Midway 框架的开发者对 Node.js 框架的一些思考。 26 | 27 | 28 | ## 工程化 29 | - [Lerna Announcement: Passing the torch](https://github.com/lerna/lerna/issues/3121) 30 |
lerna 的主要维护者宣布将不再主持 lerna 的维护工作，后续将由 [Nrwl](https://nrwl.io/) 接手，该公司开发了 monorepo 工具 [nx](https://nx.dev)。 31 | 32 | - [monorepo.tools](https://monorepo.tools/) 33 |
这个网站详细介绍了 monorepo 以及相关构建工具需要实现的功能点，同时对比了不同构建工具的区别。如果想要替换 lerna，或许可以参考这个。 34 | 35 | ## 拓展阅读 36 | - [精读《JS 数组的内部实现》](https://zhuanlan.zhihu.com/p/511389069) 37 |
本文翻译自 [How JavaScript Array Works Internally](https://blog.gauravthakur.in/how-javascript-array-works-internally)，介绍了 V8引擎的数组实现机制。数组是我们平时开发中比较高频使用的数据结构之一，了解数组的内部实现机制可以帮助更好的使用它，使数组执行性能最优。 38 | 39 | - [WinterCG 社区正式成立，前端代码终于可以运行在后端了](https://mp.weixin.qq.com/s/bF4crsk75j0TdMoi402u-g) 40 |
[WinterCG](https://github.com/wintercg) 全称 Web-interoperable Runtimes Community Group，术语“web-interoperable”意味着以一种与 web 浏览器相同或至少尽可能一致的方式实现功能，所以并不打算发布一套独立的标准 API 集。WinterCG 将更加直接关注非 Web 浏览器的特定需求的实现，与目前专注于 Web 平台功能和 API 开发的现有社区组织形成互补。对于不同 JavaScript 执行环境中有显著差异的 API，WinterCG 会执行一个最小通用的子集 API 来保证非浏览器环境的一致性。 41 | 42 | - [Meta Open Source is transferring Jest to the OpenJS Foundation](https://engineering.fb.com/2022/05/11/open-source/jest-openjs-foundation/) 43 |
脸书将 Jest 贡献给了 OpenJS Foundation。 44 | 45 | ## Rust 46 | - [24 days from node.js to Rust](https://vino.dev/blog/node-to-rust-day-1-rustup/) 47 |
一个详细的 Node.js 与 Rust 对照，熟悉 Node.js 的同学可以快速了解 Rust。 48 | 49 | - [前端视角解读 Why Rust](https://mp.weixin.qq.com/s/AXXJnFdwYDiy5vfZ-fvVDQ) 50 |
一个快速的 rust 入门介绍。 51 | 52 | -------------------------------------------------------------------------------- /docs/2024-6-28.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.06.28 2 | 3 | ![前端&AI技术双周刊](https://gips0.baidu.com/it/u=1297494609,3904318942&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f900_383) 4 | 5 | ## 前端技术 6 | - [Flow Charts with CSS Anchor Positioning](https://coryrylan.com/blog/flow-charts-with-css-anchor-positioning) 7 |
CSS 锚点 API 不仅能用于弹出框和工具提示，还适用于使用 CSS 创建流程图表。这个教程介绍如何使用 CSS 的 Anchor Position API（锚点定位API）来允许仅通过 CSS 创建流程图和图表。 8 | 9 | - [New JavaScript Set methods](https://developer.mozilla.org/en-US/blog/javascript-set-methods/) 10 |
在 Node 22+、Chrome/Edge 122+、Firefox 127+ 和 Safari 17+ 中，查找集合的交集、并集和差集，以及其他与集合相关的操作，都变得易如反掌。 11 | 12 | - [12 Design Patterns in Vue](https://michaelnthiessen.com/12-design-patterns-vue) 13 |
尽管 Vue 的设计模式在大多数应用程序中都是存在的，但很少有文章专门讨论其设计模式。本文整理了 Vue 中的 12 种不同设计模式，并提供了简洁的示例。 14 | 15 | - [How Deep is Your DOM?](https://frontendatscale.com/blog/how-deep-is-your-dom/) 16 |
你的 DOM 树有多深 - 保持关注 DOM 大小和深度至关重要，因为它奠定了其他运行时操作（如用户交互中通过 JavaScript 更新 DOM）的基准。本文通过实验探究 DOM 深度对页面性能有什么实际影响，并给出了一些优化建议。 17 | 18 | - [TypeScript 5.5 RC](https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-rc/) 19 |
TypeScript 5.5 RC 与 beta 版本相比，新增了对 ECMAScript 新 Set 方法的支持，调整了正则表达式的检查规则，并新增了一些性能优化，这些优化可以在许多常见场景中加快构建速度。 20 | 21 | ## AI 资讯 22 | - [ Stability AI 开源 Stable Diffusion 3 Medium，在图像质量、文本内容生成、复杂提示理解和资源效率方面有了显著提升](https://huggingface.co/stabilityai/stable-diffusion-3-medium) 23 |
SD3 Medium 是 Stability AI 推出的最新、最先进的文本生成图像 AI 模型。该模型具有 20 亿参数，具有体积小、适合在消费级 PC 和笔记本电脑上运行的优点，所以普通人也可以将其部署到自己的电脑上使用。模型主要提升如下：1. 图像质量：生成的图像具有卓越的细节、色彩和光照效果；实现了照片般逼真的输出，尤其在手部和面部细节上有显著改进。2. 提示理解：能够理解涉及空间推理、构图元素、动作和风格长而复杂的提示。3. 文本质量：可精确控制文字，在拼写、字距调整、字形和间距上达到专业排版。 24 | 25 | - [Runway 正式发布全新 Gen3 模型，生成视频长达 10s 且具备更完善的可控性](https://runwayml.com/blog/introducing-gen-3-alpha/) 26 |
6.18 日，专为电影和图像内容创作者打造生成式 AI 工具的公司 Runway 发布了 Gen-3 Alpha 视频生成模型，可生成 10s 视频（大多数竞品是 5s），且涵盖丰富的可控性组件，其核心优势包括：1. 在运镜（近焦/超广）、画面质感媲美 Sora，更和工业级电影挂钩；2. 在功能多样性上超越 Sora，支持精准控制文字、运动刷（指哪儿动哪儿）、运镜控制、导演模式（多功能于一体使视频更可控）。 27 | 28 | ## 拓展阅读 29 | - [多模态大模型幻觉解码方法 - OPERA](https://github.com/shikiw/OPERA) 30 |
由上海人工智能实验室（上海AI实验室）、中国科学技术大学、香港大学及香港中文大学联合提出的缓解多模态大模型幻觉解码方法 OPERA，受到学术界广泛关注，相关成果论文入选本届 CVPR Highlight 名单。 联合团队在研究中发现“过度信赖”（Partial Over-Trust），可能为当前大模型产生幻觉的一大“元凶”，并提出了 OPERA 解码方法。基于注意力惩罚与回退策略，OPERA 可在不借助外部知识并不引入额外训练的情况下，缓解多模态大模型的幻觉问题，更有易于在不同模型和架构上部署。 31 | 32 | - [10 Years of Vue: the Past and the Future | Evan You | Vue.js Live 2024](https://www.youtube.com/watch?v=OmrwRrZitv4) 33 |
Vue.js 的创建者 Evan You 最近做了一个关于 Vue 10 年的演讲——回首过去，展望未来。 34 | 35 | - [Inline conditionals in CSS?](https://lea.verou.me/blog/2024/css-conditionals/) 36 |
CSS 工作组决定在 CSS 中添加内联 if()，许多人认为这是一个压倒性的积极进步，但社区也提出了很多问题。 37 | 38 | -------------------------------------------------------------------------------- /docs/2024-11-8.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.11.08 2 | ![前端&AI技术双周刊-2024.11.08](https://gips1.baidu.com/it/u=1292454221,3890857546&fm=3028&app=3028&f=JPEG&fmt=auto&q=75&size=f900_383) 3 | 4 | ## 前端技术 5 | - [Next.js 15 发布](https://nextjs.org/blog/next-15) 6 |
Next.js 15 正式发布，该版本包括一个更易于升级的 codemod CLI、异步请求 API、支持 React 19 等。 7 | 8 | - [Node v23.1.0](https://nodejs.org/en/blog/release/v23.1.0) 9 |
Node 最新版本已更新到 v23.1，版本内容包括：JSON 模块的导入属性现已稳定、MockTimers 测试运行 API 已稳定、Buffer 的创建现在可以正确地接受一个可调整大小的 ArrayBuffers 对象。同时 Node 稳定版本更新为 v22.11.0。 10 | 11 | - [Smarter than 'Ctrl+F': Linking Directly to Web Page Content](https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html) 12 |
比“Ctrl+F”更智能：直接链接到网页内容：现代 Web 平台的一个强大功能，允许精确链接到网页中的特定文本，而无需添加锚点。 13 | 14 | - [You could use sibling parameters as default values in functions](https://macarthur.me/posts/sibling-parameters/) 15 |
在函数中使用同级参数作为默认值：myFunc(arg1, arg2 = arg1) 的函数写法是一种 "没有多少人知道可以这样做 "的技术。本文作者对此进行了深入探讨，并介绍了一些使用案例。 16 | 17 | - [Making content-aware components using CSS :has(), grid, and quantity queries](https://piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/) 18 |
如何使用 CSS 创建具有内容感知能力的组件？本文主要介绍了如何使用 CSS 的 :has()、网格布局和数量查询（Quantity Queries）来创建具有内容感知能力的组件，以解决设计系统中组件在不同使用场景下的适应性问题。 19 | 20 | - [Meet the New Safe Assignment Operator (?=) in JavaScript](https://jsdev.space/safe-assignment-operator/) 21 |
认识 JavaScript 中的新安全赋值操作符 (?=) - 涉及异步操作和错误处理的时候，通常会使用 try-catch 和 async-await 来处理，现在有了新的安全赋值操作符 ?=，它可以大大简化错误处理并提高了代码的可读性。 22 | 23 | ## AI 资讯 24 | - [OpenAI 宣布为 ChatGPT 推出了最新的人工智能搜索体验](https://openai.com/index/introducing-chatgpt-search/) 25 |
北京时间 11 月 1 日凌晨，在 ChatGPT 两岁生日之际，OpenAI 宣布为 ChatGPT 推出了最新的人工智能搜索体验。ChatGPT search 的推出正式宣告 ChatGPT 消除了即时信息这一最后短板。现在，人们与全球最先进 AI 大模型聊天时，也可以通过网络资源链接快速、及时地获取答案了。 26 | 27 | - [Oasis](https://oasis.decart.ai/overview) 28 |
Decart 发布的 Oasis 是首个提供可试玩 Demo 的系统，几乎具备完整的《我的世界》功能，玩家可以砍树、挖石头等。Oasis 是一种交互式视频游戏，由 Transformer 在逐帧基础上端到端生成。它接收用户的键盘和鼠标输入，并在内部生成实时游戏玩法，以 20 帧每秒的速度渲染，无延迟。最近七天，已有超过100万用户游玩了他们的游戏。 29 | 30 | - [谷歌推出了一款名为 Learn About 的新学习工具](https://learning.google.com/experiments/learn-about/signup) 31 |
它能针对你的问题提供详尽的解答，并推荐适合的视频和文字教程。该工具还会询问你对教程难度的看法，若你觉得太难，它会为你设计更简单的学习路径。这款工具就像一位真正的老师，不仅解答问题、推荐读物，还会根据难度调整内容，甚至出题测试你的理解水平。 32 | 33 | 34 | ## 拓展阅读 35 | - [Transformers.js v3](https://huggingface.co/blog/transformersjs-v3) 36 |
Hugging Face 的 transformers Python 库的 JS 移植版，可在浏览器中直接运行自然语言、视觉和音频机器学习模型。v3 版增加了 WebGPU 支持，以提高性能，现在还支持 Node、Deno 和 Bun 运行时使用。 37 | 38 | - [使用 CSS 绘制粘土人物](https://www.youtube.com/watch?v=QxDf6VkqP4g) 39 |
大约 15 分钟的视频教程，涉及 CSS 定位、蒙版、剪辑路径、自定义属性等。源码戳👉https://codepen.io/alvaromontoro/pen/ZEgezbN 40 | 41 | -------------------------------------------------------------------------------- /docs/2021-8-18.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊-2021.8.18 2 | 3 | ![前端技术双周刊_3](https://user-images.githubusercontent.com/9262426/129841840-2bafb873-aef5-4515-8415-15c17e370ec4.png) 4 | 5 | ## 前端工程化 6 | 7 | - [用「增量」思想提升代码检查和打包构建的效率](https://juejin.cn/post/6865101730166767623) 8 |
文章里使用的 git diff 找到增量模块或代码，再结合 eslint 和 webpack 做针对性检查和构建。思路比较简单，但是没法直接拿来用，需要根据自己的业务实际的构建情况做调整。文章里构造模块依赖树使用了 Madge 是一个很棒的工具，推荐大家使用。 9 | 10 | - [从微组件到代码共享](https://mp.weixin.qq.com/s/29nIdcijMLBKjrqdMch3zA) 11 |
本文先从复用组件，窥探到代码共享。聊一聊中后台项目在微前端的场景下，从工程化的角度下如何跨技术栈复用业务组件，再介绍一下其它的共享代码方案。 12 | 13 | ## 性能优化 14 | 15 | - [Next.js 是怎么做预渲染的](https://juejin.cn/post/6991397899317805064/) 16 |
介绍了三种预渲染模式和三种混合渲染模式 17 | 18 | - [手把手教你设计一个任务调度器](https://mp.weixin.qq.com/s/O6fAOodJq6pyJnqy1IuqEg) 19 |
如何实现一个任务调度器，本文从业务现状出发，考虑需要覆盖的场景，设计调度器需要提供的角色，然后确定了调度器的关键接口，同时给出了简单实现。 20 | 21 | - [前端智能化探索，骨架屏低代码自动生成方案实践](https://mp.weixin.qq.com/s/3Q-Zh_muxs2l1egmxl0ubw) 22 |
本文探讨骨架屏方案的优劣，以及一种前端智能化的骨架屏代码自动生成方案实践。 23 | 24 | ## 算法 25 | 26 | - [CONTENT-AWARE IMAGE RESIZING IN JAVASCRIPT](https://trekhleb.dev/blog/2021/content-aware-image-resizing-in-javascript/) 27 |
如果缩放图片时宽高缩放比例不一致，会导致图像内容发生形变“失真”。使用 Seam Carving 算法可以解决这个问题，它会尽可能保持图像中“重要区域”的比例，避免由于直接缩放造成的“失真”。在实现上还需要借助动态规划算法去寻找最优 Seam。文章作者还提供了一个 Demo 工具 JS IMAGE CARVER 供大家提交自己的图片测试效果。 28 | 29 | - [规则引擎在前端业务场景中的应用](https://mp.weixin.qq.com/s/t11C5s6OZOV3o0U2XhIehQ) 30 |
规则引擎其实不是新兴起的东西了，规则引擎起源于基于规则的专家系统，专家系统这东西属于人工智能的范畴，模仿人类的推理方式的推理引擎，是将逻辑规则应用于知识库以推断新信息的系统的一个组成部分。与大家比较相关的场景其实是运营活动，由于运营活动的需求迭代频繁的特性，特别适合使用规则引擎去处理。还有一些低代码系统或者中台场景，规则引擎的引入能减少大量人工编码的工作。文中推荐了 [json-rules-engine](https://github.com/cachecontrol/json-rules-engine) 规则引擎框架作为前端业务场景的首选。 31 | 32 | - [机器学习常用术语总结](https://mp.weixin.qq.com/s/JNpdys7MT-EXcgguQwt9Ag) 33 |
按照 alphabet 顺序整理的机器学习常用术语，比较全面，方便大家快速查找学习。 34 | 35 | ## 微前端 36 | 37 | - [从零开始写一个微前端框架](https://github.com/micro-zoe/micro-app/issues/17) 38 |
这篇文章从零开始搭建一个微前端框架，从技术选型开始，逐步为读者展现了一个微前端框架。全篇文章分为渲染、沙盒、样式隔离、数据通信四篇。 39 | 40 | ## 拓展阅读 41 | 42 | - [设计：赋予事物独特的内在意义](https://mp.weixin.qq.com/s/7mrtQiSeccagKIG8AI-wjg) 43 |
这篇文章探讨了设计的定义和本质：设计是通过“赋予事物独特的内在意义”，打造一种可以感动用户的感性体验。并从心理、文化与社会层面对意义进行了解释，然后借助 Artemide 灯具、OriginOS、蔦屋书店等例子说明如何赋予事物意义。 44 | 45 | - [Jamstack ，你真的了解它吗？](https://mp.weixin.qq.com/s/bVkK2jJAuZmShYk4318kMQ) 46 |
介绍了什么是 Jamstack 以及它的适用场景，最后结合国内市场的情况给出了自己的判断：Jamstack 会是企业级框架的核心特性而非唯一，混合渲染是未来方向。关于 Jamstack 更详细的介绍参考这篇文章：https://zhuanlan.zhihu.com/p/281085404 47 | 48 | - [工作五年反思](https://zhuanlan.zhihu.com/p/374777591) 49 |
李沐的经验总结 50 | 51 | - [【MIT公开课】The Missing Semester of Your CS Education 2020](https://www.bilibili.com/video/BV1w7411477L) 52 |
命令行工具版本控制、编辑器、debug 调试等内容对开发效率影响巨大，但没有受到足够的重视 53 | 54 | 55 | 编辑：梅旭光 审阅：胖总&Mr.Q&三水清 56 | -------------------------------------------------------------------------------- /docs/2024-11-22.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.11.22 2 | 3 | ![image](https://gips0.baidu.com/it/u=1434775488,2942227657&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f2090_896) 4 | 5 | ## 前端技术 6 | - [Node v23.2.0](https://nodejs.org/en/blog/release/v23.2.0) 7 |
Node.js v23.2.0更新包括更新根证书至NSS 3.104，新增多个证书。TypeScript支持进入积极开发，新增协作者。文件系统、HTTP和模块功能有所增强，修复了assert模块和构建问题，并更新了基准测试和依赖项。加密模块也进行了根证书更新和错误修复。 8 | 9 | - [JavaScript Import Attributes (ES2025) Explained](https://www.trevorlasn.com/blog/import-attributes-in-javascript) 10 |
JavaScript正在引入导入属性（Import Attributes）功能，使模块导入更加明确和安全。导入属性允许开发者在导入模块时传递元数据，明确指定模块的类型。通过明确指定模块类型，导入属性可以有效防止因文件扩展名不可靠而导致的安全风险。 11 | 12 | - [TypeScript 5.7](https://devblogs.microsoft.com/typescript/announcing-typescript-5-7-rc/) 13 |
TypeScript 5.7候选版本——流行的类型化JS超集增加了对ES2024的支持，包括未初始变量检查的增强、相对路径的路径重写、支持 target es2024 和 lib es2024 等等，并可以使用Node的编译缓存来节省解析工作。最终版本预计在一两周内发布 14 | 15 | - [View Transitions API: Single Page Apps Without a Framework](https://www.debugbear.com/blog/view-transitions-spa-without-framework?utm_source=CSS-Weekly&utm_campaign=Issue-599&utm_medium=web) 16 |
View Transitions API是一项现代功能，通过为网页视图间的转换设置动画，提升用户体验和网站的感知性能。它包括同文档和跨文档两种视图转换，后者尤其适用于多页网站和单页应用的替代方案。建议网站使用跨文档转换以优化体验。该API通过动画效果提升感知速度，让网站显得更为流畅。 17 | 18 | ## AI 资讯 19 | - [百度发布新产品 “秒哒”](https://cloud.baidu.com/product/AMIS/miaoda.html) 20 |
百度世界大会发布“秒哒”工具，这一工具使用户无需编写任何代码，便能轻松实现各种应用设想。它具备无代码编程、多智能体协作及多工具调用等特点，用户只需通过自然语言描述需求，就能完成复杂的系统搭建。 21 | 22 | - [百度 iRAG](https://yiyan.baidu.com/) 23 |
文心 iRAG 技术旨在解决大模型在图像生成中存在的幻觉问题，提升 AI 生成内容的实用性。与传统生成模型不同，文心 iRAG 通过结合百度海量图片资源，能够生成更加真实的图像。 24 | 25 | - [字节豆包团队推出 AI 图像编辑模型 SeedEdit](https://huggingface.co/spaces/ByteDance/SeedEdit-APP) 26 |
字节豆包团队推出国内首个产品化的通用图像编辑模型SeedEdit，支持自然语言进行修改图片，包括修图、换装、美化、转化风格等操作 27 | 28 | - [微软推出 Copilot Actions，使用人工智能自动执行重复性任务](https://developer.microsoft.com/zh-cn/copilot) 29 |
微软在Ignite大会上宣布推出Copilot Actions，现已进入私人预览阶段。允许用户通过简单提示自动完成重复性日常任务，如总结Teams会议、生成周报、准备会议材料等。 30 | 31 | ## 拓展阅读 32 | - [AI in Chrome DevTools?!?](https://www.youtube.com/watch?v=fpuk0YGWVQ8) 33 |
详细介绍了如何在Chrome DevTools中使用AI辅助面板，包括AI Console Insights和AI Assistance在CSS样式上的实际应用。 34 | 35 | - [Node.js实施更严格的Semver主要版本拉取请求政策](https://socket.dev/blog/node-js-implements-stricter-policies-for-semver-major-pull-requests) 36 |
Node.js团队为提升主要版本的稳定性和可靠性，实施更严格的Semver政策。新政策规定，主要发布日期前一个月内，默认分支上的semver-major PR需获得发布团队一致同意方可纳入暂存分支。此举回应了社区反馈和版本发布前涌入大量变更导致的兼容性问题，确保重大更改在发布前经过细致审查，维持高质量标准。 37 | 38 | - [Storybook 8.4](https://storybook.js.org/blog/storybook-8-4/) 39 |
Storybook 是用于构建和测试UI组件的行业标准工具，广泛应用于各大公司。新版本提升了开发者体验，优化组件测试，支持Svelte 5和React Native。核心功能包括一键组件测试、减小包大小和丰富的调试功能。通过组件测试，Storybook Test平衡了E2E保真度与单元测试速度，支持实时测试和watch模式。官方文档为其提供了更加详细的指南。 40 | 41 | -------------------------------------------------------------------------------- /docs/2022-4-20.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#21-2022.04.20 2 | ![前端技术双周刊_21](https://mms-graph.cdn.bcebos.com/wiki/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E5%8F%8C%E5%91%A8%E5%88%8A_14.png) 3 | 4 | ## JavaScript 5 | - [ECMAScript proposal-change-array-by-copy](https://2ality.com/2022/04/change-array-by-copy.html) 6 |
新的 TC39 提案 [proposal-change-array-by-copy](https://github.com/tc39/proposal-change-array-by-copy)，提供了某些数组方法的非破坏性版本，修改数组会生成新数组，原数组并不受影响。`.toReversed()`对应`.reverse()`，`.toSorted()`对应`.sort()`，`.toSpliced()`对应`.splice()`，`.with(index, value)`对应`arr[index]=value`。 7 | 8 | - [JAVASCRIPT FUNCTION COMPOSITION: WHAT’S THE BIG DEAL?](https://jrsinclair.com/articles/2022/javascript-function-composition-whats-the-big-deal/) 9 |
介绍了 JavaScript 中 Function Composition 的几种常见形式：compose(), flow(), pipe()，以及和传统过程式编程的区别。表面上 Function Composition 以表达式的形式描述，是函数式编程的一种体现；本质上它能促使我们思考不同逻辑之间的关系，使我们更关注于结果而非细节，帮助我们写出更具可读性和可维护的代码 10 | 11 | ## CSS/HTML 12 | - [CSS Parent Selector](https://ishadeed.com/article/css-has-parent-selector) 13 |
关于 CSS 选择器`:has`的全面介绍。目前浏览器支持的不是很好，但是在未来的 CSS 开发中一定离不开它 14 | 15 | - [Write HTML, the HTML Way (Not the XHTML Way)](https://css-tricks.com/write-html-the-html-way-not-the-xhtml-way/) 16 |
大家可能已经很少使用 XHTML 了，但是在写 HTML 的时候会不知不觉把 XHTML 的规范带入进来，也经常把这两个规范混淆。这篇文章指导你用更符合 HTML 的方式去写 HTML。 17 | 18 | - [前端 “一键换肤“ 的 N 种方案](https://mp.weixin.qq.com/s/M7Av6vJTnSpjSB7vnifEdQ) 19 |
现在越来越多的网站都提供了拥有换肤（切换主题）功能，既是为了迎合用户需求，或是为了凸显自己特点，因此提供了个性化定制的功能.本文探究如何优雅的实现"一键换肤" 20 | 21 | ## Node.js 22 | - [Node.js 18 is now available!](https://nodejs.org/en/blog/announcements/v18-release-announce/) 23 |
Node.js 18 正式发布了！ 24 | 25 | - [大规模 Node.js 网关架构设计与工程实践](https://mp.weixin.qq.com/s/FleA75Frfswy0791giOjZg) 26 |
使用 Node.js 来实现大规模的网关服务，讲解的非常详细。 27 | 28 | - [Node.js Heap Snapshot 崩溃调查](https://mp.weixin.qq.com/s/FBUpVhgvtC30ILDHzDr6Xw) 29 |
这篇文章详细讲述了一次 Node.js Heap Snapshot 崩溃的深入调查过程，值得一读。 30 | 31 | 32 | ## 拓展阅读 33 | - [Figma’s Flexbox](https://www.yuque.com/docs/share/6bdc9f17-9f4a-42b5-b506-68d77fee7bdf) 34 |
我们发现 Figma 中的 Auto Layout 和前端领域 CSS 中的 Flexbox 很像，其实 Auto Layout 就是受到了 Flexbox 强大功能的启发才设计出来的 35 | 36 | - [基于 Vue + 百度地图的多车实时运动及轨迹追踪实现](https://mp.weixin.qq.com/s/nHWK_eSm99gmLrhgJtd0KA) 37 |
实现车辆实时移动，并进行轨迹追踪 38 | 39 | - [11+ Chrome 高级调试技巧，学会效率直接提升666%](https://mp.weixin.qq.com/s/5a42BJ94McH9uNOqmkCr_w) 40 |
一些 Chrome 浏览器中的开发技巧 41 | 42 | - [基于人脸识别的口罩识别算法](https://juejin.cn/post/7082569704618868749) 43 |
在许多的场景下人们都需要进行口罩的佩戴的，如果进行人工的检查将会浪费大量的人力，口罩识别某些方面能更好的代替人力进行检测。通过抓取视频接口的视频流数据作为输入送给算法进行处理、或者直接将图片输入给算法，输出标记完成的视频或图片，其中包括人脸的检测及口罩的识别标记。 44 | 45 | ## 工具 46 | - [Operator Lookup](https://www.joshwcomeau.com/operator-lookup/) 47 |
一个 JavaScript 运算符学习工具 48 | 49 | 编辑：王珊 50 | -------------------------------------------------------------------------------- /docs/2022-8-10.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊-2022.08.10 2 | 3 | ![前端技术双周刊_21](https://user-images.githubusercontent.com/9262426/183860442-2ea14e5c-b4dd-4bf9-af8c-bdc7b42434e6.png) 4 | 5 | ## CSS 6 | - [The advanced guide to the CSS :has() selector](https://blog.logrocket.com/advanced-guide-css-has-selector) 7 |
关于`:has()`选择器的全面讲解 8 | 9 | - [The CSS behind Figma](https://ishadeed.com/article/figma-css/) 10 |
Figma 的配置界面大量的运用了 CSS Grid，实现比较巧妙，开发编辑器的同学可以借鉴 11 | 12 | ## Node.js 13 | - [bootstrap: implement run-time user-land snapshots](https://github.com/nodejs/node/pull/38905) 14 |
张秋怡大佬在 Node.js 上实现的 run-time user-land snapshots 功能即将发布，该功能可以用来降低 Node.js 的启动时间，预计 v18 的下一个小版本就可以使用了。 15 | 16 | - [Writing Automated Tests on a Legacy Node.js Back-End](https://www.infoq.com/articles/testing-legacy-nodejs-app/) 17 |
给古老 Node.js 服务写自动化测试。 18 | 19 | - [Thoughts from a Node.js Core Contributor w/ Matteo Collina](https://rss.com/podcasts/harperdb-select-star/566991/) 20 |
Node.js TSC Matteo Collina 的一个访谈。 21 | 22 | - [NodeParty 2022](https://space.bilibili.com/487703803/channel/collectiondetail?sid=623715) 23 |
支付宝体验科技举办的 NodeParty 已于 8 月 8 日 在线直播，本次 NodeParty 上，吞吞、天猪、零弌、段潇涵、天玎、一君多位 Node.js 领域专家齐聚一堂，带来了4个主题分享。 24 | 25 | - [Introducing the new npm Dependency Selector Syntax](https://github.blog/changelog/2022-08-03-introducing-the-new-npm-dependency-selector-syntax/) 26 |
npm 8.16.0 推出了`query`命令用于快捷地查询项目中的依赖，其查询语法类似于 CSS 选择器。 27 | 28 | ## 计算机网络 29 | - [深入理解 Linux 的 TCP 三次握手](https://mp.weixin.qq.com/s/G2LuRZjQE15F6fSU-Bv_jw) 30 |
TCP 大家都看的很多了，但具体到内核代码调用过程，你可能还没看过。 31 | 32 | ## 扩展阅读 33 | - [如何成为一名技术文档工程师](https://mp.weixin.qq.com/s/eb68IHtKTehd2uWVW-NBUQ) 34 |
技术写作帮助你与他人分享你的技术知识和经验。技术写作在展示你的技术能力和才能的同时，也可以强化你对所写主题的了解。 35 | 36 | - [Is High Quality Software Worth the Cost?](https://martinfowler.com/articles/is-quality-worth-cost.html) 37 |
高质量代码的成本是时间么，写高质量代码会影响开发效率？其实写高质量代码才更能节省时间。 38 | 39 | - [Use One Big Server](https://specbranch.com/posts/one-big-server/) 40 |
云服务越来越发达的今天，直接用一台物理机也依然是值得考虑的方案。硬件越来越好，现在一台物理机可以支撑非常多的服务，且性能更低。 41 | 42 | - [Planning next to your code – GitHub Projects is now generally available](https://github.blog/2022-07-27-planning-next-to-your-code-github-projects-is-now-generally-available) 43 |
Github Projects 是一个类似看板的项目管理工具，刚发布时功能比较简单，现在越来越成熟了，最大的优势就是跟 Github 其他内容的集成，Github 真的要把整个开发流程全承包了。 44 | 45 | - [2022 年，前端深水区的裁员结局](https://juejin.cn/post/7126533116721627149) 46 |
。。。 47 | 48 | - [我的 Node.js 十年](https://zhuanlan.zhihu.com/p/546175922) 49 |
天猪对自己 Node.js 十年开发的回顾。 50 | 51 | - [State of frontend 2022](https://tsh.io/state-of-frontend/) 52 |
一个关于前端发展状况的调研，现在比较热门的技术栈基本都在里面了，能感觉到国内跟国外流行的东西还是有一些区别的。另外比较让人意外的是有 59.7% 的受访者表示自己现在是全远程工作。 53 | 54 | -------------------------------------------------------------------------------- /docs/2024-4-25.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.04.25 2 | 3 | ![前端&AI技术双周刊](https://gips1.baidu.com/it/u=2328816939,3521541941&fm=3028&app=3028&f=JPEG&fmt=auto&q=75&size=f900_383) 4 | 5 | ## Node.js 6 | - [Node.js 协作峰会的旅行报告](https://nodejs.org/en/blog/events/collab-summit-2024-london) 7 |
Node 的协作者和社区成员每年两次在协作峰会上会面，分享知识、讨论问题并充实新想法。最后一次会议于本月早些时候在伦敦举行，重点讨论了 Node 的 HTTP 堆栈、新node --run功能、ES 模块支持、包管理等。 8 | 9 | - [Node.js 22](https://nodejs.org/en/blog/announcements/v22-release-announce) 10 |
Node.js 22版本已发布，包含ES模块支持、WebSocket客户端、V8 JavaScript引擎更新等新功能。该版本将在十月进入长期支持（LTS）。同时，随着新版本的发布，Node.js 18将于2025年4月停止支持使用。 11 | 12 | ## CSS 13 | - [Desert Racer](https://dev.to/warkentien2/desert-racer-worlds-first-css-only-swipe-aware-game-4j0h?utm_source=CSS-Weekly&utm_campaign=Issue-584&utm_medium=web) 14 |
使用纯CSS来制作一个游戏，一个听起来几乎不可能的想法现在已经实现了。原作者完全通过CSS实现了一个有趣的小游戏，同时用CSS实现对滑动、碰撞等感知，不得不令人佩服其强大的创造力 15 | 16 | ## 前端技术 17 | - [【Discussions】Deep Dive into Rspack & Webpack Tree Shaking](https://github.com/orgs/web-infra-dev/discussions/17) 18 |
一个有意思的Webpack Tree Shaking的工作原理discussions。在对DCE Optimization、usedExports Optimization、sideEffects Optimization等场景均有进行说明，同时对常见的Webpack Tree Shaking Failed 也有进行探讨 19 | 20 | - [Signals 提案进入 Stage 1 阶段](https://docs.google.com/presentation/d/1MJqndTS5RmTEwTbtLTPsEloc-a_MWR8daQINgDim2RA/edit#slide=id.g1f570b058be_0_573) 21 |
框架作者们已经与 TC39 合作，争取打合出一份 Signals 提案，目标是将其变成 JavaScript 语言的一部分。如果能落地，前端框架的响应式实现将变得非常简单。 22 | 23 | - [Comparing JavaScript Frameworks part 1: templates(比较 JavaScript 框架第1部分](https://www.maartenhus.nl/blog/comparing-javascript-frameworks-part-1-templates/) 24 |
这篇文章是对现代流行JavaScript框架模板语言的比较，包括Vue.js、React、Angular和Svelte。第一部分重点在于对比这些框架的模板语言，这对于定义应用程序或网站的HTML来说至关重要。作者基于他个人使用这些框架的经验，详细阐述了它们如何使创建动态HTML变得更容易，同时回顾了每个框架的组件定义方式、条件渲染和列表渲染等核心模板特性。整个比较突出了各个框架的不同思路和设计选择，提供了一个全面的视角帮助读者理解这些不同的模板语言如何在构建丰富的Web应用时发挥作用。 25 | 26 | - [不一样的SVG！SVG 渐变边框在 CSS 中的应用](https://mp.weixin.qq.com/s/wh9g0RBax9jSm1CtYoN5Dg) 27 |
介绍了如何利用 SVG 实现渐变边框，并通过调整 SVG 尺寸和内联 CSS 优化其在 HTML 和 CSS 中的应用。核心内容包括 SVG 自适应尺寸的实现、SVG 在 HTML 中的应用以及将 SVG 转换为内联 CSS 代码的方法 28 | 29 | ## AI 资讯 30 | - [Dify 发布 AI Workflow](https://github.com/langgenius/dify/releases/tag/0.6.0) 31 |
Dify 是一款开源的大语言模型(LLM) 应用开发平台。它融合了后端即服务（Backend as Service）和 LLMOps 的理念。所谓 AI Workflow 是按应用情景划分为两种类型 32 | 33 | ## 性能优化 34 | - [Optimizing Javascript for fun and for profit(优化 Javascript 的技巧和策略)](https://romgrk.com/posts/optimizing-javascript) 35 |
这篇文章提供了针对Javascript性能优化的一系列建议和技巧。作者分享了从基础的比较、避免不必要的工作，到深入的内存管理等不同层面的优化策略，强调了优化前进行基准测试的重要性，并且指出了常见的性能瓶颈和提高代码执行效率的方法。 36 | 37 | ## 开源库推荐 38 | - [svelte-dnd-action](https://github.com/isaacHagoel/svelte-dnd-action) 39 |
该仓库支持丰富的drag and drop操作，支持几乎所有可以想象到的拖放用例、任何输入设备，并且对浏览器的支持性也非常棒。 40 | -------------------------------------------------------------------------------- /docs/2022-10-20.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#32-2022.10.20 2 | 3 | ![前端技术双周刊_32](https://user-images.githubusercontent.com/9262426/196895185-2f9dd968-9b39-4771-80dd-5be701ca85d0.png) 4 | 5 | ## JavaScript Runtime 6 | - [Introducing workerd: the Open Source Workers runtime](https://blog.cloudflare.com/workerd-open-source-workers-runtime/) 7 |
之前介绍过 cloudflare worker，该方案开源了。 8 | 9 | - [阿里巴巴 Noslate 正式开源 - 面向云原生的 JavaScript 容器方案](https://mp.weixin.qq.com/s/ClhfQYiBJ_jI-0meny7jRg) 10 |
阿里的类似方案也在近期开源了。 11 | 12 | - [Node v19.0.0](https://nodejs.org/en/blog/release/v19.0.0/) 13 |
Node.js v19 发布了。 14 | 15 | - [synchronous-worker – Run Node.js APIs synchronously](https://github.com/mcollina/worker) 16 |
在 Node.js 中跑“另一个 Node.js”的方案，有什么用？异步操作转换为同步；模块热更新。 17 | 18 | ## 周边工具 19 | 20 | - [tauri-apps](https://github.com/tauri-apps/tauri) 21 |
一个使用 web 技术开发客户端的方案，使用 rust 实现。 22 | 23 | - [复活了！ Lerna V6 带来了哪些新东西？](https://mp.weixin.qq.com/s/6peafvVjmcF65PFSggSLYQ) 24 |
曾几何时， [Lerna](https://lerna.js.org/) 是最流行的 JS monorepo 工具之一，或许大家有所耳闻，在去年 [Lerna](https://lerna.js.org/) 的核心作者提到了 [Lerna](https://lerna.js.org/) 已经基本不再维护。但是今年5月份，[Nrwl](https://nrwl.io/) 宣布接管了 [Lerna](https://lerna.js.org/) ， [Nrwl](https://nrwl.io/) 是 [Nx](https://github.com/nrwl/nx) 背后的公司。[Nrwl](https://nrwl.io/) 推出了一个全新的网站，更新了文档的内容，并让 [Lerna](https://lerna.js.org/) 的速度提高了 10 倍！ 25 | 26 | - [Ant Design 5.0 Alpha is Ready](https://medium.com/@1075746765/designant-design-5-0-alpha-is-ready-8409bb5f9b8f) 27 |
2022年初 Ant Design 发布了关于 V5版本的计划，经过8个月的工作和30多个实验版本迭代，终于趋于稳定，让我们看看 [Ant Design 5.0 Alpha](https://next.ant.design/docs/react/migration-v5-cn) 有哪些变化？ 28 | 29 | ## 拓展阅读 30 | - [Type-level TypeScript](https://type-level-typescript.com/) 31 |
Type-level TypeScript 帮助你了解进阶的 TypeScript 类型系统知识，释放图灵完备的类型系统的潜力。 32 | 33 | - [灵动岛Dynamic Island初探](https://mp.weixin.qq.com/s/gI2vgx9cXiIAND08OgZNzQ) 34 |
从软件开发角度，探索灵动岛的展现形式、功能限制、如何具体实现、适用场景等各方面的问题 35 | 36 | - [玉伯的产品思考](https://mp.weixin.qq.com/s/d0N1BFtVn0uWVqj-lf0FOA) 37 |
玉伯在掘金开发者大会上的演讲整理。 38 | 39 | - [Beware of Bun.js!](https://gist.github.com/littledivy/b9351c3ccf8ab99f7e14461db37044dc) 40 |
为 deno 工作的 littledivy 质疑 bun 的 benchmark 故意优化了结果，bun 的作者进行了[回应](https://news.ycombinator.com/item?id=33199911)。话说 deno 不是第一次将矛头指向 bun 了 41 | 42 | - [How BuiltWith generates $14 million a year while having zero employees](https://5to9.beehiiv.com/p/builtwith-generates-14-million-year-zero-employees) 43 |
BuiltWith 是如何运营及挣钱的。 44 | 45 | - [FIVE WALLED GARDENS - Why Browsers are Essential to the Internet and How Operating Systems are Holding Them Back](https://research.mozilla.org/files/2022/09/Mozilla_Five-Walled-Gardens.pdf) 46 |
来自 Mozilla 的研究报告，描述了浏览器在 web 生态中的重要性，以及操作系统是怎样垄断浏览器的选择。有充分的浏览器竞争，Web 才能有更好的未来。 47 | 48 | -------------------------------------------------------------------------------- /docs/2025-1-3.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.01.03 2 | 3 | ![image](https://gips0.baidu.com/it/u=4171579861,1394677489&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f2090_896) 4 | 5 | ## 前端技术 6 | - [Node v23.4.0 (Current) Released](https://nodejs.org/en/blog/release/v23.4.0) 7 |
Node 新版本新增了 --trace-env、--trace-env-js-stack 和 --trace-env-native-stack 选项，用于追踪脚本对环境变量的使用情况。同时，增加了 assert.partialDeepStrictEqual 方法，以便更快地断言对象中某些属性的存在，同时您无需提供对象的所有属性 8 | 9 | - [The State of Node.js Performance in 2024](https://nodesource.com/blog/State-of-Nodejs-Performance-2024) 10 |
这是一次对 Node.js 性能进步的深度剖析（以及一场基准的考量）。从 Node.js 18 版一路行至 20 版，再迈进至 22 版，你会发现那些悄然发生的性能跃升或许会让你惊叹不已——显然，幕后团队在这片领域倾注了无尽的心血与智慧。 11 | 12 | - [TypeSpec](https://typespec.io/) 13 |
TypeSpec 是一种受 TypeScript 启发的轻量级语言，用于定义 API 接口。用户可以事先描述数据，并生成 API 规范、客户端/服务器代码、文档等。 14 | 15 | - [Exploring Node.js Readable Streams](https://pavel-romanov.com/exploring-the-core-concepts-of-nodejs-readable-streams) 16 |
本文深入探讨了 Node.js 中 Readable 流的核心概念，强调了其对于高效数据处理的重要性，详细解析了 Readable 流的工作机制及适用场景。还展示了如何利用 Readable 流从大型数据库（如MongoDB）中流式传输数据，通过代码示例详细阐述了实现过程，包括导入模块、设置数据库连接、流式传输文档及关闭连接等关键步骤。 17 | 18 | ## AI资讯 19 | - [OpenAI推出o3模型系列](https://arcprize.org/blog/oai-o3-pub-breakthrough) 20 |
OpenAI “十二连发”活动的最后一天发布新一代推理模型 o3，包括 o3 和 o3-mini 两个版本。o3 在多个方面显著超越了其前代 o1，在软件工程、竞赛数学和掌握人类博士级别的自然科学知识能力等方面表现出色。尤其在 ARC-AGI 评估中，o3 的成绩达到 75.7% 至 87.5%，超过了人类水平的 85% 门槛。 21 | 22 | - [智谱深度推理模型zero年末登场](https://chatglm.cn/main/alltoolsdetail?redirect=/main/gdetail/676411c38945bbc58a905d31&lang=zh) 23 |
2024最后一天，大模型独角兽 智谱AI 发布其首个基于扩展强化学习技术训练的推理模型 GLM-Zero-Preview。据智谱介绍，该模型专注于增强AI推理能力，擅长处理数理逻辑、代码和需要深度推理的复杂问题，在部分评测集中效果与 OpenAI o1-preview 相当 24 | 25 | - [DeepSeek-V3](https://chat.deepseek.com) 26 |
DeepSeek-V3 正式发布，相比 GPT、Claude 等知名大模型，模型训练成本可忽略不计。性能对齐海外领军闭源模型。 和世界顶尖的闭源模型 GPT-4o 以及 Claude-3.5-Sonnet 不分伯仲。 27 | 28 | - [OpenAI的GPT-5训练遇阻，时间延迟且成本高昂](https://wallstreetcn.com/articles/3737531) 29 |
GPT-5 的推出遇到了时间延误，OpenAI 正在面临前所未有的挑战。这一消息引发了科技界的广泛讨论，有人认为大规模训练的策略正逐渐失去动力，而小型模型可能会因为更高效的反馈回路继续保持创新速度。 30 | 31 | ## 拓展阅读 32 | - [ 10 Modern Node.js Runtime Features to Start Using in 2024](https://snyk.io/blog/10-modern-node-js-runtime-features/) 33 |
概述了2024年应开始使用的10个现代 Node.js 运行时新特性，包括测试运行器、原生模拟、测试覆盖率、观察模式等，旨在帮助开发者编写更高效、安全的代码 34 | 35 | - [Automate Embedding Creation and Syncing in Postgres with pgai Vectorizer](https://github.com/timescale/pgai/) 36 |
使用 pgai 矢量器在 Postgres 中实现嵌入创建和同步的自动化—— pgai Vectorizer 通过一个 SQL 命令自动在 Postgres 中创建和同步嵌入内容——保持嵌入内容的更新，不需要任何工具。 37 | 38 | - [A Guide to Reading and Writing Node.js Streams](https://blog.platformatic.dev/a-guide-to-reading-and-writing-nodejs-streams) 39 |
介绍了 Node.js 流的概念、优势和应用，旨在帮助读者深入理解流的核心概念，学习利用流进行实时数据处理、内存管理和构建可扩展应用，以及掌握创建和管理可读、可写流的技能。文中还强调了 Node.js 基于事件驱动的架构在实时 I/O 处理中的优势。 40 | 41 | -------------------------------------------------------------------------------- /docs/2022-9-21.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#31-2022.09.21 2 | 3 | ![](https://mms-graph.cdn.bcebos.com/wiki/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E5%8F%8C%E5%91%A8%E5%88%8A_24.png) 4 | 5 | ## JavaScript 6 | - [JavaScript APIs You Don’t Know About](https://www.smashingmagazine.com/2022/09/javascript-api-guide/) 7 |
In this article, Juan Diego covers the least known yet extremely useful APIs, such as the Page Visibility API, Web Sharing API, Broadcast Channel API and Internationalization API. Together we will see what they are, where we should use them, and how to use them. 8 | 9 | - [Lodash is dead. Long live Radash!](https://medium.com/vanguards-of-code/lodash-is-dead-long-live-radash-d9d52abf428b) 10 |
Lodash 诞生于10多年前，当时的 JavaScript 环境和现在的 JavaScript 环境已经发生了巨大变化。[Radash](https://radash-docs.vercel.app/docs/getting-started) 作者谈为什么要用 [Radash](https://radash-docs.vercel.app/docs/getting-started) 代替 Lodash？ 11 | 12 | ## CSS 13 | - [Building the main navigation for a website](https://web.dev/website-navigation/?utm_source=CSS-Weekly&utm_campaign=Issue-521&utm_medium=web) 14 |
This tutorial describes how to build an accessible main navigation of a website. You learn about semantic HTML, accessibility, and how using ARIA attributes can sometimes do more harm than good. 15 | 16 | ## Node.js 17 | - [Best practices for creating a modern npm package](https://snyk.io/blog/best-practices-create-modern-npm-package/) 18 |
In this tutorial, we’re going to walk step by step through creating an npm package using modern best practices (as of 2022). You will first learn how to create an npm package, so you can get familiar with building and publishing a package to the npm registry. 19 | 20 | 21 | ## 拓展阅读 22 | - [How to create a 'What I Use' blog with Astro and Tailwind CSS ](https://www.youtube.com/watch?v=3_JE76PKBWE&t=86s) 23 |
This videos are one of a kind. Truly a work of art- not just the cinematography but the ASMR, the calmness and of course the way you show us how you code. 24 | 25 | - [纯前端实现「羊了个羊」小游戏🐏](https://juejin.cn/post/7143897892531486727) 26 |
最近简单的「羊了个羊」小游戏火到出圈，纯前端实现也能实现。 27 | 28 | - [pnpm 是凭什么对 npm 和 yarn 降维打击的](https://mp.weixin.qq.com/s/7N6TdqWWVFg7Gi57LUZBhw) 29 |
pnpm 最近经常会听到，可以说是爆火。它爆火的原因是什么呢？又是凭什么对 npm 和 yarn 降维打击的？跟着本文来看看吧！ 30 | 31 | - [Adobe 收购 Figma 之后会怎样](https://mp.weixin.qq.com/s/XUscw7XoaAQdBM7lAKR2og) 32 |
9月15日 Adobe 公布用 200 亿美元收购 Figma 的消息。很多用户对 Figma 非常的悲观，相比 Figma 而言 Adobe 更像是一个无情的资本机器，收购来的产品鲜有好下场的。另外这次收购也标志着 Adobe 内部的 Adobe XD 产品彻底失败。 33 | 34 | - [The Basics of Remix](https://css-tricks.com/the-basics-of-remix/) 35 |
Remix 是一个全栈 ssr 框架，对标 next，但和 next 有一些不同，它更快，体验更好。 36 | 37 | - [MemLab: An open source framework for finding JavaScript memory leaks](https://engineering.fb.com/2022/09/12/open-source/memlab/) 38 |
用于查找 JavaScript 内存泄漏的开源框架，推荐大家阅读。 39 | 40 | -------------------------------------------------------------------------------- /docs/2024-2-23.old.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊-2024.02.23 2 | 3 | ## 前端技术 4 | - [为什么大厂前端监控都在用GIF做埋点？](https://juejin.cn/post/7065123244881215518) 5 |
文章介绍了前端监控和常见的埋点上报方法，在此基础上解释了为什么都用GIF来做埋点。值得一读 6 | 7 | - [苹果官网动效探索-滚动驱动视频及分区动画执行](https://juejin.cn/post/7178698886721044539) 8 |
每次看苹果的官网，无论是移动端还是PC端，都给人高大上的感觉，动画很酷，而其实都和前端技术息息相关，本文对所用到的技术进行了拆解，如果你想实现同样酷炫的效果，本文可以给你启发。 9 | 10 | - [在V8引擎中JavaScript是如何工作的](https://juejin.cn/post/7177776407882252325) 11 |
文章简明扼要的讨论了JS引擎的实现以及如何执行JavaScript的确切步骤。如果想对V8引擎进行了解，本文可以作为一个入门。 12 | 13 | - [还不懂浏览器缓存？只需动手操作一次](https://juejin.cn/post/7178794675044614203) 14 |
在前端性能优化中，合理利用缓存是非常重要的优化方式，使用好了缓存，对项目性能会有不错的提升。 15 | 16 | - [前端应该掌握的浏览器调试技巧](https://mp.weixin.qq.com/s/kPxTX44Ec4-PueW4Uk-fqA) 17 |
对于调试技巧任重而道远，需要学习与实践并行，才能更好的灵活使用，在对应的问题使用对应的调试方式，可以提高我们的开发效率以及解决问题能力，提高自己的竞争力。 18 | 19 | ## 拓展阅读、人工智能、机器学习 20 | - [一文读懂chatGPT模型原理（无公式）](https://mp.weixin.qq.com/s/n_qHHT3PWa0CLLAPeOtoTw) 21 |
最近chatGPT模型横空出世，是狂拽酷炫D炸天的存在，本文追朔GPT模型的发展历程，以及主角chatGPT 功能一览，更好帮我们全方位了解它的强大之处，作为程序员的我们更是陷入沉思 22 | 23 | ## 拓展阅读、跨端 24 | - [跨端开发浪潮中的变与不变](https://mp.weixin.qq.com/s/Lq7XUc84Cft6dZpVcy6-8w) 25 |
跨端开发场景下我们希望一套代码多端运行，希望专注于业务逻辑，不希望花费时间处理与环境耦合的各种差异性。作者提出了『统一跨端容器规范，实现容器标准化』的思路。 26 | 27 | ## JavaScript 28 | - [Secure JavaScript URL validation](https://snyk.io/blog/secure-javascript-url-validation/) 29 |
一个安全的 JavaScript URL 验证方法 30 | 31 | ## 拓展阅读 32 | - [Deno 1.28: Featuring 1.3 Million New Modules](https://deno.com/blog/v1.28) 33 |
Deno 开始支持使用 npm 包了 34 | 35 | - [Problems with decision making at W3C](http://kvark.github.io/web/api/2021/07/24/problems-with-decision-making.html) 36 |
webgpu迟迟未出，作者其实也有苦难言。作者kvark之前一直是Mozilla图形组成员，也是webGPU标准组成员及wgpu的主要开发者（没有之一），这篇文章作者说明了在W3C一个决策背后的艰难。 37 | 38 | - [How to Package and Distribute a Vue.js 3 Plugin on NPM](https://vueschool.io/articles/vuejs-tutorials/how-to-package-and-distribute-a-vue-js-3-plugin-on-npm/) 39 |
通过阅读本文可以了解如何通过 vite 去发布一个 vue3的插件 40 | 41 | ## CSS 42 | - [An Interactive Guide to Flexbox](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/) 43 |
一篇不流于表面的 Flex 介绍，从设计理念出发介绍了 Flex 的各种特性，并且搭配了很多生动形象的交互示例。 44 | 45 | - [Do you really understand CSS radial-gradients?](https://patrickbrosset.com/articles/2022-10-24-do-you-really-understand-CSS-radial-gradients/?utm_source=CSS-Weekly&utm_campaign=Issue-528&utm_medium=web) 46 |
本文由内向外对 radial-gradients 的渐变框、渐变的位置，渐变射线、渐变形状，渐变色停止位置，进行了详细的图文讲解，让我们对 radial-gradients 理解更加深入 47 | 48 | ## 扩展阅读 49 | - [从事前端开发的你，如今过的怎么样了？](https://www.zhihu.com/question/532965157) 50 |
知乎上一个热门问题，很多前端大佬都分享了自己的经历和近况。 51 | 52 | ## 产品设计 53 | - [Design System ROI Calculator](https://www.knapsack.cloud/calculator) 54 |
设计系统的投资回报率计算，用于衡量项目中使用设计系统的收益 55 | 56 | - [Error！错误消息设计指南](https://mp.weixin.qq.com/s/RwVA5bWNnP0E0vAr8dWJgw) 57 |
并不是所有错误都是相同的，我们要区分失误（无意识）和错误（有意识） 58 | 59 | -------------------------------------------------------------------------------- /docs/2024-12-5.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.12.05 2 | 3 | ![前端&AI技术双周刊](https://gips0.baidu.com/it/u=498664265,1595811457&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f1424_610) 4 | 5 | ## 前端技术 6 | - [Vite 6.0 正式发布](https://cn.vite.dev/blog/announcing-vite6) 7 |
在保留快速构建体验的基础上，Vite 6 引入了实验性的环境 API、改进的模块解析逻辑以及更强大的 CSS 和 JSON 处理功能 8 | 9 | - [setproperty-vs-setattribute](https://jsdev.space/setproperty-vs-setattribute/) 10 |
本文深入比较了JavaScript中设置DOM元素属性的两种方法——setProperty和setAttribute。文章从方法对比、属性类型差异、布尔属性处理、值类型差异、性能考虑、最佳实践以及新观点等多个方面进行了详细阐述。通过本文，读者可以更加全面地了解这两种方法的异同点，并在实际开发中做出更明智的选择 11 | 12 | - [TypeScript 5.7 发布](https://devblogs.microsoft.com/typescript/announcing-typescript-5-7/) 13 |
TypeScript 5.7 版本带来了多项新特性和改进，包括检查从未初始化的变量、改进导入 TypeScript 文件的方式、支持新的 ECMAScript 目标版本、搜索祖先配置文件以确定项目所有权、编辑器中复合项目的更快项目所有权检查、在 --module nodenext 下验证JSON导入以及支持 Node.js 中的 V8 编译缓存等。这些更新使得 TypeScript 更加强大和灵活，为开发者提供了更好的编程体验 14 | 15 | - [New CSS that can actually be used in 2024](https://thomasorus.com/new-css-that-can-actually-be-used-in-2024.html) 16 |
2024 年可以真正用起来的新 CSS 功能 - 在过去的两到四年里，CSS 的新奇事物数量惊人。已经发布了多项创新，现在所有现代浏览器都支持这些创新，其中一些从根本上改变了制作网站的方式。本文是作者希望在 2024 年开始使用的 CSS 新功能的小抄。请注意，为了支持较旧的浏览器，有时必须使用 polyfill 17 | 18 | - [Importing a frontend Javascript library without a build system](https://jvns.ca/blog/2024/11/18/how-to-import-a-javascript-library/) 19 |
本文详细介绍了在不使用构建系统的情况下，如何在前端项目中导入JavaScript库。通过了解库文件的三种类型（全局变量类型、ES Modules、CommonJS）及其导入方法，以及如何通过NPM和CDN确定库提供的文件类型，读者可以灵活地在项目中引入所需的JavaScript库。同时，文章还通过具体案例展示了不同类型文件的导入过程，为开发者提供了实用的指导和参考。 20 | 21 | ## AI 资讯 22 | - [Codeium 推出 AI 编程工具 Windsurf](https://dev.to/dev_michael/why-windsurf-is-the-best-free-ai-code-editor-youve-never-heard-of-3ofj) 23 |
AI 编程爆火新品 Windsurf 诞生了，首创 copilots 和 agents 结合新范式，能够深度理解代码库，实时感知程序员的操作；Windsurf 作为一款免费 AI 代码编辑器，不仅提供了基于 VS Code 的改进性能和 UI，还引入了创新的 AI 功能如 Cascade Flow 系统，以及严格的隐私保护措施。它允许无缝集成 VS Code 插件，同时保持了高效性能和用户体验 24 | 25 | - [360 发布纳米搜索，一站式完成搜学写创](https://www.n.cn/) 26 |
纳米搜索以搜索为起点，构建了以“搜学写创”为核心能力的完整工作流，不仅颠覆了传统网页搜索模式，还超越了以Perplexity AI和360AI搜索为代表的答案引擎，被行业解读为搜索引擎3.0，也即“创作引擎”。 27 | 28 | - [国产大模型首发中文逻辑推理-天工大模型4.0 o1版](https://mp.weixin.qq.com/s/iJo7Pc648nvY21dW2-uEuQ) 29 |
天工大模型4.0 o1 版是国内首款具备中文逻辑推理能力的大模型。文章详细阐述了天工大模型4.0 o1版的技术特点和应用前景，包括其强大的中文逻辑推理能力、完整的思考与规划链路、自我反思与验证能力等。通过实际测试，该模型在各种类型的推理问题上都表现出色，无论是简单的数学推理、常识推理，还是复杂的悖论、道德困境等问题，都能给出准确、有深度的回答。此外，文章还介绍了昆仑万维在AI大模型领域的持续投入和技术积累，展现了其在生成式AI领域的领先地位。 30 | 31 | 32 | ## 扩展阅读 33 | - [从VS Code看优秀插件系统的设计思路](https://mp.weixin.qq.com/s/rf-onLvIVIFP6XGGuIVG9Q) 34 |
在目前流行的框架中，通常都会采用插件来定制、扩展系统的能力。其实插件系统在软件架构中有一个更专业的术语 35 | 36 | - [纯 CSS 实现苹果 AI 彩色围绕动画效果](https://codepen.io/thebabydino/pen/WNVPdJg) 37 |
假如你想用纯 CSS 实现苹果 AI 的这种彩色围绕动画效果，可以看看 Codepen 上这个实现效果 38 | 39 | - [2024 HTML 现状调查结果](https://2024.stateofhtml.com/zh-Hans/) 40 |
2024 HTML 现状调查结果已公布，总体上互操作性有了明显的改善，并且随着 HTML 的功能越来越多，构建高性能、可访问和交互式的 HTML 优先的用户界面也变得越来越容易，这使得减少 JavaScript 的使用成为可能。 41 | -------------------------------------------------------------------------------- /docs/2024-7-25.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.07.25 2 | 3 | ![前端&AI技术双周刊](https://gips1.baidu.com/it/u=4097994039,1876617135&fm=3028&app=3028&f=JPEG&fmt=auto&q=75&size=f900_383) 4 | 5 | ## NodeJS 6 | - [A Guide to Reading and Writing Node.js Streams](https://blog.platformatic.dev/a-guide-to-reading-and-writing-nodejs-streams) 7 |
本文介绍了 NodeJS 中的 stream，在适当的情况下利用 Node 强大的数据流特性所带来的好处，以及如何处理数据流积压问题和错误管理 8 | 9 | - [Node.js v22.5.0 (Current) Released](https://nodejs.org/en/blog/release/v22.5.0) 10 |
此次发布有两个值得注意的原因：首先，node:http 中的 WebSocket 功能现已公开；其次，Node 现在内嵌了 SQLite，并通过 node:sqlite 提供了对其的直接访问 11 | 12 | ## 前端技术 13 | - [Make Your Components Easier to Think About](https://michaelnthiessen.com/make-your-components-easier-to-think-about) 14 |
我们都希望写出的代码简单易懂，但实际的 coding 中可能事与愿违。本文中介绍了一些方法可以让你的代码更加容易让人读懂，写出可读性更强的代码。 15 | 16 | - [The 6 Levels of Reusability](https://michaelnthiessen.com/6-levels-of-reusability) 17 |
我们都希望用更少的代码实现更多的功能，为了实现这一点，我们构建组件以便复用，但是有些组件只需要基本的可重用性，而其他组件则需要更复杂的技术才能最大限度地发挥它们的作用。在本文中概述了可重用性的 6 个级别，这些模式将帮助我们充分利用组件 18 | 19 | - [如何根治 Script Error？](https://mp.weixin.qq.com/s/lnvd8ii58jyR3u-aDvq_9A) 20 |
Script Error 一直是处理问题是让人比较头疼的错误，本文简要介绍了 Script Error 问题的来龙去脉，但也不局限于 Script Error，对于通用的系统性问题，应该找到系统性解决方案，进而治标治本。 21 | 22 | ## CSS 23 | - [The Magic of Clip Path](https://emilkowal.ski/ui/the-magic-of-clip-path) 24 |
clip-path通常用于将 DOM 节点修剪成特定形状，例如三角形。同时也非常适合动画，在本文中深入clip-path探讨了可以用它做的一些很酷的事情。一旦你读完它，你就会开始看到这个 CSS 属性被广泛使用。 25 | 26 | ## AI 资讯 27 | - [OpenAI发布新款小模型GPT-4o mini](https://openai.com/index/gpt-4o-mini-advancing-cost-efficient-intelligence/) 28 |
OpenAI开发者官方账号官宣了GPT-4o mini模型的发布，表示该模型相比GPT-3.5 Turbo更智能，成本更低 29 |
视频介绍：https://www.youtube.com/watch?v=hPmgE_COf-M 30 | 31 | - [Mistral AI两连发](https://mp.weixin.qq.com/s/fFB0A0vv_2Deb0rWd4tagw) 32 |
法国大模型独角兽 Mistral AI 发布了一个专注于数学推理和科学发现的7B大模型「Mathstral」，来解决需要复杂、多步骤逻辑推理的高级数学问题。Mathstral是一个指令型模型，可以使用它或者对它进行微调。 33 | 34 | - [快手开源LivePortrait，GitHub 6.6K Star，实现表情姿态极速迁移](https://mp.weixin.qq.com/s/JrKF_7To8PEggEfw7W09ew) 35 |
近日，快手可灵大模型团队开源了名为LivePortrait的可控人像视频生成框架，该框架能够准确、实时地将驱动视频的表情、姿态迁移到静态或动态人像视频上，生成极具表现力的视频结果。 36 | 37 | ## 扩展阅读 38 | - [TypeScript Style Guide](https://mkosir.github.io/typescript-style-guide) 39 |
TypeScript 风格指南提供了一套简洁的约定和最佳实践，用于创建一致、可维护的代码，深入阅读有助于更好的使用 Typescript 40 | 41 | - [Why "page.goto()" is slowing down your tests](https://www.youtube.com/watch?v=qvlfbHFxqnI) 42 |
在这个视频中，我们深入探讨 Playwright 的 “page.goto()” 方法，并理解它为什么会拖慢你的端到端测试。我们从一个示例脚本开始，然后通过 Playwright 的 UI 模式来理解资源加载是如何延迟 “page.goto()” 调用的。 43 | 44 | - [Micro Agent: An AI Agent That Writes Code for You](https://nodeweekly.com/link/157610/web) 45 |
Micro Agent is a Node-based tool that takes the approach of writing a test case first and then iterates upon a solution until the tests pass. 46 | 47 | - [Text2Image文生图的发展脉络](https://www.yuque.com/xinntao/nm1yxs/wvritz5ulgv3qriu) 48 |
这篇介绍将简略地从技术角度聊聊他们的发展脉络。希望看完之后，能够了解 Text2Image 文生图这个领域中耳熟能详的方法 -------------------------------------------------------------------------------- /docs/2025-1-16.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.01.16 2 | 3 | ![前端技术双周刊](https://gips2.baidu.com/it/u=1638492203,2968675521&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f2090_896) 4 | 5 | ## 前端技术 6 | - [SPA 懒加载陷阱](https://reacttraining.com/blog/spa-lazy-loading-pitfalls) 7 |
懒加载是SPA中优化性能的有效方法，但如果不小心处理，可能导致页面加载速度变慢。本文深入探讨了单页应用（SPA）中懒加载组件时可能遇到的陷阱，特别是当结合数据获取策略时。作者通过实际场景和代码示例，详细阐述了懒加载组件与数据获取之间的时序问题，并提出了有效的解决方案。 8 | 9 | - [2025 年前端工程师样式开发的新特性](https://www.smashingmagazine.com/2024/12/new-front-end-features-for-designers-in-2025/?utm_source=CSS-Weekly&utm_campaign=Issue-602&utm_medium=web) 10 |
在寻找最灵活的前端工作流程和工具包时，很容易忘记如今 Web 上的一些基础知识已经变得多么强大。这篇摘要涵盖了2025年前端设计领域即将出现的一系列新特性和技术趋势。这些新特性不仅简化了设计师的日常工作，还为设计师和开发者提供更多强大的工具和选项，提高了前端开发的效率和用户体验。 11 | 12 | - [Understanding the main thread in the browser](https://calendar.perfplanet.com/2024/understanding-the-main-thread-in-the-browser/) 13 |
文章主要阐述了浏览器主线程的核心概念、工作原理及其对前端性能优化的重要性。通过理解这些内容，开发者可以更好地优化Web应用的性能，提供更佳的用户体验 14 | 15 | - [Node 23.6 发布](https://nodejs.org/en/blog/release/v23.6.0) 16 |
Node.js v23.6.0 为使用 TypeScript 的开发者带来了一个令人兴奋的更新：实验性地支持直接运行 TypeScript 文件。这个增强功能简化了开发者的体验，消除了中间的构建步骤，使得在 Node.js 中使用 TypeScript 更加流畅。 17 | 18 | ## AI 资讯 19 | - [阿里云通义灵码AI程序员全面上线，10分钟完成网页开发](10分钟完成网页开发，阿里云通义灵码AI程序员全面上线) 20 |
阿里云通义灵码AI程序员已全面上线，成为全球首个同时支持VS Code、JetBrains IDEs开发工具的AI程序员产品。此次上线的AI程序员相比传统AI辅助编程工具，能力更全面，通过全程对话协作的方式，就能完成从0到1的业务需求开发、问题修复、单元测试批量生成等复杂编码任务 21 | 22 | - [罗永浩推出AI助理“J1 Assistant”，颠覆创新引热议](https://www.aibase.com/news/14469) 23 |
罗永浩旗下人工智能项目Jarvis推出了名为“J1Assistant”的AI助理软件，主打音频输入功能，集成自家AI模型及备忘录功能。目前仅在海外提供安卓版本，预计未来将扩展至更多平台。这款软件的推出体现了罗永浩对AI领域的持续投入与市场趋势的把握。 24 | 25 | - [谷歌推出Gemini 2.0](https://blog.google/technology/google-deepmind/google-gemini-ai-update-december-2024/) 26 |
为应对OpenAI此前推出的众多新产品，谷歌12月12日推出下一代重要人工智能模型Gemini 2.0 Flash，可以原生生成图像和音频，同时支持文本生成。 27 | 28 | - [谷歌推出 AI 行业全新架构 Titans](https://mp.weixin.qq.com/s/EUCZ1oSuyzR9M9X9r5SYBw) 29 |
在 2017 年推出影响 AI 行业长达 8 年的 Transformer 架构之后，谷歌带来了全新的架构 Titans。这次，谷歌的重点是将推理领域非常重要的测试时（test-time）计算用在了记忆（memory）层面 30 | 31 | - [Deepseek-V3 + CoT思维链 + RAG知识库！我的AI现在强的可怕](https://linux.do/t/topic/316186) 32 |
确实很强，又便宜 33 | 34 | ## 扩展阅读 35 | - [可以应用的实用无障碍建议](https://piccalil.li/blog/practical-accessibility-tips-you-can-apply-today/) 36 |
无障碍化在现在变得越来越重要，越来越多的产品和开发者都在做无障碍化改造；这篇文章提供了实用的无障碍设计技巧，旨在帮助设计师和开发者创建更加包容和易用的前端界面。通过遵循这些建议，可以显著提升产品的无障碍性，使更多用户能够轻松使用 37 | 38 | - [如何像计算机科学家一样思考](https://levjj.github.io/thinkcspy/) 39 |
一本在线的编程入门教材，以 Python 语言为例，适合用来学习编程。 40 | 41 | - [2024 JavaScript Rising Stars](https://risingstars.js.org/2024/en) 42 |
文章主要概述了 2024 年 JavaScript 生态系统中的顶级趋势、项目、前端框架与库的发展，以及 AI 在开发工具中的兴起，可以帮助你了解JavaScript生态系统，并看看在各种细分领域中哪些库和工具获得了关注度 43 | 44 | ## 开发工具推荐 45 | - [Atomic CSS Devtools](https://chromewebstore.google.com/detail/atomic-css-devtools/cbjhfeooiomphlikkblgdageenemhpgc) 46 |
这个强大的 Chrome 扩展提供了一种独特的方式来处理 Atomic CSS 规则，将其以非原子化格式呈现，使其更易于解释和调整。对于希望简化 CSS 故障排除并提升网站性能的开发者来说，这是一个必备工具。 47 | 48 | -------------------------------------------------------------------------------- /docs/2021-9-1.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊-2021.9.1 2 | 3 | ![前端技术双周刊_4](https://user-images.githubusercontent.com/4032009/131620889-571c0f3d-beaa-4905-8723-1496df058c6f.jpg) 4 | 5 | ## JavaScript 6 | 7 | - [精读《Typescript 4.4》](https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/208.%E7%B2%BE%E8%AF%BB%E3%80%8ATypescript%204.4%E3%80%8B.md) 8 |
TypeScript 4.4 带来了一些新特性：1. 更智能的自动类型收窄；2. 下标支持 Symbol 与模版字符串类型判定；3. 更严格的错误捕获类型；4. 明确的可选属性；5. 支持 Static Block。感兴趣可以看原文 [Announcing TypeScript 4.4](https://devblogs.microsoft.com/typescript/announcing-typescript-4-4/) 9 | 10 | - ['return await promise' vs 'return promise' in JavaScript](https://dmitripavlutin.com/return-await-promise-javascript/) 11 |
通常我们认为在 return 时写 await 是不必要的，不过 return 时写 await 和不写 await 也是有区别的 12 | 13 | - [Improving responsiveness in text inputs](https://nolanlawson.com/2021/08/08/improving-responsiveness-in-text-inputs/) 14 |
借助 requestIdleCallback 提升输入框的响应性能，减少快速输入时的卡顿 15 | 16 | ## 产品设计 17 | 18 | - [百度大字版精细系统的适老化设计研究实践](https://mp.weixin.qq.com/s/LD8F1m9PEjxLvUSZrNo4bQ) 19 |
百度大字版背后的设计思考，不只是单纯的放大字号 20 | 21 | ## 开源产品 22 | 23 | - [iced](https://github.com/hecrj/iced/) 24 |
基于 Rust 的跨平台 GUI 方案，支持 Windows, macOS, Linux, and Web，webgl 实现，方案类似 flutter 25 | 26 | - [wp2vite](https://github.com/tnfe/wp2vite) 27 |
一款前端项目编译转换工具，可以让 webpack 项目支持 vite 编译。对于想要在项目中使用 vite 提升编译效率，但是又苦于成本太大的同学，不妨一试！ 28 | 29 | - [zx](https://github.com/google/zx) 30 |
一个更便捷的用来写 shell 脚本的工具，更符合 JavaScript 开发者的习惯， 是时候抛弃 shelljs 了 31 | 32 | - [mdebug](https://zhuanlan.zhihu.com/p/404255472) 33 |
和业界 js 模拟调试工具相比，mdebug 在扩展性，用户体验上做了更多思考和探索 34 | 35 | ## 拓展阅读 36 | 37 | - [我是如何把Skia的体积缩小到1/8的？](https://mp.weixin.qq.com/s/gs1CBWpnPpbK2fD9tQKEKw) 38 |
介绍了跨平台渲染器 Skia 内部的核心技术，并讲解了渲染器所依赖的几何学、图形学基础知识。最后描述了渲染器未来的使用场景 39 | 40 | - [认识 V8 垃圾回收机制](https://mp.weixin.qq.com/s/VbAUPGt3sUVzEQHxWYmlBw) 41 |
对 V8 垃圾回收机制讲解得比较全 42 | 43 | - [从前端视角看浏览器隐身模式下你是如何被追踪的](https://segmentfault.com/a/1190000040475726) 44 |
介绍了在隐身模式下网站如何识别一个用户，从中我们可以了解到浏览器指纹的生成机制 45 | 46 | - [Drunk Post: Things I've learned as a Sr Engineer](https://old.reddit.com/r/ExperiencedDevs/comments/nmodyl/drunk_post_things_ive_learned_as_a_sr_engineer/) 47 |
一个工作10年的程序员在 reddit 上的碎碎念成了热帖，有一些比较有意思的内容。顺便 ExperiencedDevs 这个频道很有意思 48 | 49 | - [编程所需要的东西](https://boholder.github.io/blogs/what-you-need-for-programming-zh/) 50 |
给新入职的朋友准备的阅读材料 51 | 52 | - [货物崇拜编程](https://droidyue.com/blog/2019/03/24/cargo-cults-programming) 53 |
货物崇拜编程（Cargo Cult Programming）是一种计算机程序设计中的反模式，其特征为不明就里地、仪式性地使用代码或程序架构。货物崇拜编程通常是程序员既没理解他要解决的bug、也没理解表面上的解决方案的典型表现。 54 | 55 | - [GitHub’s Engineering Team has moved to Codespaces](https://github.blog/2021-08-11-githubs-engineering-team-moved-codespaces/) 56 |
Github 的开发团队将开发环境从 macOS 迁移到了 Codespaces。创建一个新开发环境的时间从 45分钟减小到了 10 秒钟。我厂也有类似的东西，使用起来确实是很棒。顺便感叹一下 Github 真有钱，可以给到全员 32 core, 64 GB RAM 的虚拟机，要知道每个人是可能申请多个环境的。 57 | 58 | 59 | 编辑：希达 审阅：胖总&Mr.Q&三水清 60 | -------------------------------------------------------------------------------- /docs/2024-8-23.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.08.23 2 | ![](https://gips1.baidu.com/it/u=2263287872,2077391891&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f900_383) 3 | 4 | ## 前端技术 5 | - [Node.js Doubles Security Releases with Newly Automated Process](https://socket.dev/blog/node-js-doubles-security-releases-with-newly-automated-process) 6 |
Node.js通过引入新自动化流程，实现了安全发布效率的大幅提升，安全版本数量翻倍。这一变革简化了发布流程，缩短了漏洞修复时间，提高了安全更新的及时性和有效性。同时，Node.js通过漏洞赏金计划鼓励社区参与安全漏洞的发现与报告。随着自动化流程的应用，Node.js的安全发布频率显著增加，社区也因此能更快获得安全修复。 7 | 8 | - [Node v22.6.0 (Current) Released](https://nodejs.org/en/blog/release/v22.6.0) 9 |
Node.js v22.6.0 引入实验性 TypeScript 支持，可剥离类型注解运行.ts文件，但功能有限。同时，新增实验性网络检测支持，通过特定标志启用，目前限于http/https模块，并在Chrome DevTools中部分功能受限。 10 | 11 | - [Stunning Staggered CSS Animation/Transition on Page Load](https://www.youtube.com/watch?v=8AmccR91d80) 12 |
了解如何使用纯CSS、Transitions、@starting style at rule和自定义属性在页面加载时创建令人惊叹的交错淡入动画。 13 | 14 | - [ECMAScript Safe Assignment Operator Proposal(development)](https://github.com/arthurfiorette/proposal-safe-assignment-operator) 15 |
该提案引入了一个新的 operator(?=)，通过将函数的结果转换为元组来简化错误处理。如果函数抛出错误，运算符将返回[error，null]；如果函数执行成功，则返回[null，result]。其设计理念在于简化错误处理（通过消除对try-catch块的需求来简化错误管理）、增强可读性（通过减少嵌套和使错误处理流程更加直观来提高代码清晰度）、跨API的一致性（在各种API之间建立统一的错误处理方法，确保可预测的行为）、提高安全性（降低忽略错误处理的风险，从而增强代码的整体安全性） 16 | 17 | ## AI 资讯 18 | - [谷歌将大模型集成在实体机器人中，能看、听、说执行57种任务](https://mp.weixin.qq.com/s/YQaPG08Xy0HYtear_McUKg) 19 |
谷歌将Gemini 1.5 Pro大模型集成于实体机器人，使其具备高级认知能力，能执行57种复杂任务，如听、说、看等，显著增强机器人智能化。测试显示，该机器人在多模态指令（语言与视觉结合）下导航成功率高达85%，尤其在复杂环境中展现出强大的适应性和导航准确性。 20 | - [大神Karpathy：我给大模型「SQL注入」攻击，简直不要太轻松](https://mp.weixin.qq.com/s/d460H-Z8SLUqp5PZZKVpMA) 21 |
AI大牛Andrej Karpathy揭示了大型语言模型（LLM）易受类SQL注入攻击，特别是通过特殊token的不当解析。他建议禁用自动添加特殊token，改为显式编程方式处理，以提升模型安全。Karpathy的警告引发了行业对LLM安全性的重视，强调了正确处理用户输入的重要性。 22 | 23 | - [Perplexity：并不想替代 Google，搜索的未来是知识发现](https://mp.weixin.qq.com/s/dWtLV5-EaVHGJg8WClfKuA) 24 |
这是一次对 Perplexity 创始人的采访总结，其创始人在 AI Search 产品、技术、工程等综合方面都有比较深的理解，跟我们日常左右的应用也相关。 25 | 26 | 27 | ## 拓展阅读 28 | - [JavaScript 中内存泄漏的常见原因](https://www.trevorlasn.com/blog/common-causes-of-memory-leaks-in-javascript) 29 |
内存泄漏发生在内存被分配但未释放时，这会导致应用性能逐渐下降甚至崩溃。内存泄漏通常很微妙且难以发现，直到它们造成严重问题。本文围绕基于 V8 的运行时给出了一些常见的导致内存泄露的原因，并给出了一些规避内存泄漏的建议。 30 | 31 | - [Puppeteer Adds Official Support for Firefox](https://hacks.mozilla.org/2024/08/puppeteer-support-for-firefox/) 32 |
Puppeter增加了对Firefox的官方支持——从版本23开始，谷歌最初仅支持Chrome的Puppeter浏览器自动化库也对Firefox提供了一流的支持。 33 | 34 | - [谷歌 Angular 负责人对 JavaScript 框架融合的看法](https://thenewstack.io/google-angular-lead-sees-convergence-in-javascript-frameworks/) 35 |
“在选择框架时，不要过度思考。总之，这最终会是同一种技术，不过只是外在表现不同罢了。” Minko Gechev 谈到了如何引领谷歌的Angular和Wiz框架的融合之路。 36 | 37 | - [An exploration of vector search | Shalvah’s Blog](https://blog.shalvah.me/posts/an-exploration-of-vector-search) 38 |
总结了向量搜索的基本概念、理论及实践方法。阐述了将项目与输入词转化为向量进行搜索的核心思想，并讨论了向量的定义、非数值实体的数字化、以及相似性的概念和多种测量方法，如欧几里德距离、曼哈顿距离、点积和余弦相似度。强调了维度选择与不同相似度测量方法的适用场景对搜索结果的重要性。 39 | 40 | -------------------------------------------------------------------------------- /docs/2022-11-9.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#33-2022.11.09 2 | ![](https://mms-graph.cdn.bcebos.com/wiki/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E5%8F%8C%E5%91%A8%E5%88%8A_26.png) 3 | 4 | ## JavaScript 5 | - [PR that converts the TypeScript repo from namespaces to modules](https://github.com/microsoft/TypeScript/pull/51387) 6 |
看过 TS 源码的同学应该都对大量的 namespace 使用印象深刻，这个 PR 将代码转换为了 modules 形式。宣称有很多收益：The compiler is now 10-25% faster. tsc is now 30% faster to start. Our npm package is now 43% smaller. 另外 compiler 的编译也使用了 esbuild（tsc 都嫌 tsc 慢了！），不知道有多少收益是 esbuild 带来的。目前还没被合入，可以期待一下。 7 | 8 | ## CSS 9 | - [Responsive Animations for Every Screen Size and Device](https://www.strictmode.io/articles/build-test-and-publish-npm-package-2022) 10 |
本文介绍了各种屏幕尺寸和设备下响应式动画如何来实现 11 | 12 | - [Do you really understand CSS radial-gradients?](https://patrickbrosset.com/articles/2022-10-24-do-you-really-understand-CSS-radial-gradients/?utm_source=CSS-Weekly&utm_campaign=Issue-528&utm_medium=web) 13 |
本文由内向外对 radial-gradients 的渐变框、渐变的位置，渐变射线、渐变形状，渐变色停止位置，进行了详细的图文讲解，让我们对 radial-gradients 理解更加深入 14 | 15 | 16 | ## Node.js 17 | - [Performance: Rust and its relationship with Node.js](https://sprkl.dev/performance-rust-node-js/) 18 |
本文就性能方面介绍了Rust与Node.js的关系 19 | 20 | 21 | ## 拓展阅读 22 | - [Turbopack](https://turbo.build/pack) 23 |
Webpack 的作者革了自己的命，在加入 Vercel 之后开发了 Turbopack。宣称在大型应用中相比 Vite 快10倍，相比 Webpack 快700倍。Turbopack 高性能表现的关键在于2点：高度优化的机器代码和可以针对函数级别做缓存的底层增量计算引擎。Turbopack 目前处于 alpha 阶段，仅能在 Next.js V13中使用。 24 | 25 | - [尤雨溪：Turbopack真的比Vite快10倍吗？](https://mp.weixin.qq.com/s?src=11×tamp=1667545114&ver=4145&signature=pAG7sc8xdimgUpgYXPv5QqEUmotyYNfstAzwbPU-k5kdNoNAF8G-Ui6nEhL9DXmHseGQ8wBePHD8EWZtUW9hmcOsklUBSWDJY7a9yLOboVmz*xD5J25gLMJsvYxB*YHM&new=1) 26 |
Vercel 宣称 Turbopack 比 Vite 快 10 倍！Vite 作者尤雨溪不服了，对 Turbopack 和 Vite 进行了测试对比，公布了[测试细节和结果](https://github.com/yyx990803/vite-vs-next-turbo-hmr/discussions/8)，同时也针对如何做公平的测试进行了探讨。 27 | 28 | - [Top Down Operator Precedence](https://www.crockford.com/javascript/tdop/tdop.html) 29 |
Vaughan Pratt 于 1973 年在波士顿举行的第一届年度编程语言原则研讨会上提出了“Top Down Operator Precedence”。在论文中，普拉特描述了一种结合了递归下降和弗洛伊德运算符优先级的最佳属性的解析技术。它感觉很像递归下降，但需要更少的代码和明显更好的性能。Pratt 使用 LISP 并且几乎毫不费力地从标记流构建解析树。但是解析技术在 LISP 社区中并没有得到很大的重视。 30 | 31 | - [Go Inside the Great Pyramid of Giza](https://giza.mused.org/en/guided/266/inside-the-great-pyramid) 32 |
使用 Web 3D 来展示 Giza 金字塔的构造，非常精彩。 33 | 34 | - [V8 引擎：基于类型推测的性能优化原理](https://mp.weixin.qq.com/s/YHD28SvIMTyJOTcj24wyuw) 35 |
本文的会介绍一些关于V8内基于推测的优化的技术，以此来告诉大家，为什么需要TypeScript。 36 | 37 | - [低代码海报平台的组件库如何设计？](https://juejin.cn/post/7161243271233175560) 38 |
本篇文章会从组件库初始化、文字组件设计、图片组件设计、素材组件设计、组件库打包、组件库发布几个小节依次展开说明 39 | 40 | - [Figma 与设计师的角色变化，以及工具和角色、组织的相互影响](https://mp.weixin.qq.com/s/13FnCgIumkAp7VP8YoGnzA) 41 |
本文通过分析总结 Figma 的成功方法论，试图寻找设计工具、设计师以及未来交互模式的发展方向。 42 | 43 | - [Shell Script Best Practices](https://sharats.me/posts/shell-script-best-practices/) 44 |
一个 shell 脚本的最佳实践，跟其他最佳实践的一个重要不同是这篇文章短小精悍，不用花费太多时间就能 get。 45 | 46 | 47 | -------------------------------------------------------------------------------- /docs/2025-5-30.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.05.30 2 | ![](https://gips0.baidu.com/it/u=4293178226,3500536873&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f2090_896) 3 | 4 | ## 前端技术 5 | - [Node.js v24.1.0 发布](https://nodejs.org/en/blog/release/v24.1.0) 6 |
Node.js 24.1.0 版本引入了一系列新功能和改进，涵盖文件系统、HTTP2、调试工具、REPL 等多个模块。 7 | 8 | - [TypeScript Native 预览版发布](https://devblogs.microsoft.com/typescript/announcing-typescript-native-previews/) 9 |
TypeScript Native 预览版（最终将演变为 TypeScript 7）全面上线，通过将 TypeScript 编译器移植到 Go 语言，宣称性能提升10倍，并且可以利用更多的并发能力。 10 | 11 | - [JavaScript's New Superpower: Explicit Resource Management](https://v8.dev/features/explicit-resource-management) 12 |
JavaScript 的新超能力：显式资源管理。显式资源管理提案引入了一种确定性方法来显式管理文件句柄、网络连接等资源的生命周期。该提案为语言带来以下新增特性：using 和 await using 声明（当资源超出作用域时自动调用 dispose 方法）；用于清理操作的 ‌Symbol.dispose 和 ‌Symbol.asyncDispose 符号；两个新的全局对象 DisposableStack 和 AsyncDisposableStack 作为可聚合可处置资源的容器；以及新错误类型 SuppressedError（同时包含最近抛出的错误和被抑制的错误）来处理资源释放期间发生错误的情况。这些新增功能通过提供对资源释放的细粒度控制，使开发者能够编写更健壮、高性能和可维护的代码。 13 | 14 | - [CSS Tips: Flexible Wrapping CSS Grid](https://www.youtube.com/watch?v=EeM5wnhO9iI) 15 |
灵活包裹的 CSS 网格布局：自动适应项目数量的响应式方案。前端开发者 Zoran Jambor 通过视频演示如何使用 CSS Grid 实现弹性布局，支持项目自动换行和尺寸缩放。 16 | 17 | - [The ultimate JavaScript regex guide](https://www.honeybadger.io/blog/javascript-regular-expressions/) 18 |
JavaScript 正则表达式终极指南 - 详解正则表达式的语法、边界情况与调试技巧。 19 | 20 | ## AI 资讯 21 | - [OpenAI 推出 Codex](https://openai.com/index/introducing-codex/) 22 |
Codex 是 OpenAI 推出的云端软件工程代理，能够并行处理多种任务，如编写代码、修复漏洞等。它基于 codex-1 模型，通过强化学习优化，生成符合人类风格的代码，并支持与 GitHub 集成。Codex 目前向 ChatGPT Pro、Enterprise 和 Team 用户开放，未来将支持更多用户类型。 23 | 24 | - [Claude 4 发布](https://www.anthropic.com/news/claude-4) 25 |
Anthropic 推出 Claude Opus 4 和 Sonnet 4，两款新一代 AI 模型在编码、复杂任务处理和推理能力上大幅升级。Opus 4 是全球顶尖编码模型，Sonnet 4 则在效率与性能间达到平衡，支持工具并行使用和本地文件记忆功能，为开发者带来更强大的 AI 协作体验。 26 | 27 | - [Microsoft Build 2025 大会新闻汇总](https://news.microsoft.com/build-2025-book-of-news/) 28 |
本文详细介绍了 Microsoft Build 2025 大会上的 50 多项重要发布，涵盖 AI、开发工具、数据库和安全等领域。AI 方面，微软展示了 Copilot Tuning、多智能体协作等创新技术，助力开发者高效构建智能应用。开发工具方面，GitHub Copilot 升级为智能编码助手，显著提升开发效率。 29 | 30 | - [DeepSeek-R1-0528：小更新大升级](https://huggingface.co/deepseek-ai/DeepSeek-R1-0528) 31 |
5 月 29 日，DeepSeek R1 开源发布了其“小版本”升级——DeepSeek-R1-0528。在最新迭代中，DeepSeek-R1 通过增强计算资源配置与引入后训练阶段的算法优化机制，显著提升了深度推理能力。DeepSeek-R1-0528 在各项基准评估中表现出色，包括数学、编程和一般逻辑方面，综合性能已逼近 OpenAI-o3、Gemini 2.5 Pro 等领先模型。 32 | 33 | ## 拓展阅读 34 | - [谷歌 I/O 2025 开发者大会亮点](https://io.google/2025/) 35 |
谷歌刚刚在 I/O 2025 开发者大会放出海量更新，涵盖 Android、Chrome、谷歌搜索和 Gemini 等产品更新。Gemini Ultra 订阅服务、Veo 3 视频生成器、Imagen 4 图像生成器等重磅功能亮相，同时还有 Wear OS 6、Android Studio 等更新。 36 | 37 | - [Cursor 0.5 发布，七大新特性来袭](https://generativeai.pub/cursor-v0-50-just-dropped-heres-all-the-features-you-need-to-know-7b57c019bda1) 38 |
Cursor 0.5 版本更新带来诸多亮点，包括 Max Mode、背景代理、多文件上下文支持等，全面提升开发效率。 39 | 40 | ## 工具推荐 41 | - [snapDOM](https://github.com/zumerlab/snapdom) 42 |
snapDOM 能快速且精准的将 DOM 转换为图像，支持 SVG、PNG、JPG、WebP 或 Canvas 格式，同时保留元素的样式、字体、背景图片等属性。 43 | 44 | -------------------------------------------------------------------------------- /docs/2024-5-17.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.05.17 2 | 3 | ![前端&AI技术双周刊](https://gips1.baidu.com/it/u=3031098134,3515014519&fm=3028&app=3028&f=JPEG&fmt=auto&q=77&size=f900_383) 4 | 5 | ## 前端技术 6 | - [Deep Dive into Rspack & Webpack Tree Shaking](https://github.com/orgs/web-infra-dev/discussions/17) 7 |
文章详细解释了三种主要的 Tree Shaking 优化方式：usedExports 优化、sideEffects 优化和 DCE 优化。这些优化方式可以相互影响，进一步减少最终代码的体积并改变变量使用关系。 8 | 9 | - [Seamless drag and drop between applications](https://www.youtube.com/watch?v=E4l4MBO-Bwg) 10 |
演示了如何使用浏览器 API 创建更优雅的拖放体验，甚至可以跨不同的浏览器窗口或 IFRAME 工作，并对实现思路进行了阐述。主要使用了 [pragmatic-drag-and-drop](https://github.com/atlassian/pragmatic-drag-and-drop) 来完成。 11 | 12 | - [TypeScript 5.5 Beta](https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/) 13 |
TypeScript 5.5 Beta 发布，新增功能包括推断类型谓词、恒定索引访问的控制流缩小等。同时，禁用了一些在5.0中已弃用的功能。同时更尊重文件扩展名和 package.json 中的其他模块模式，对装饰器的解析更将加严格。 14 | 15 | ## CSS 16 | - [Time-based CSS Animations](https://yuanchuan.dev/time-based-css-animations?utm_source=CSS-Weekly&utm_campaign=Issue-586&utm_medium=web) 17 |
本文讨论了使用时间作为动画 timing function的可行性，此前 CSS 缺乏复杂的数学计算能力，但是 CSS 现在已具备足够的数学函数支持。因此作者建议重新考虑使用 time-based CSS 动画。文章还介绍了如何使用 CSS Houdini API 来定义一个跟踪时间属性，并如何使用 ::after 来实现动画。此外，文章还讨论了如何控制帧率以及如何保持动画的更新频率为60 FPS。 18 | 19 | - [Sliding 3D Image Frames In CSS](https://www.smashingmagazine.com/2024/04/sliding-3d-image-frames-css/?utm_source=CSS-Weekly&utm_campaign=Issue-585&utm_medium=web) 20 |
介绍了如何使用CSS技术为图片添加3D效果和滑动过渡，而无需修改HTML标记。同时作者通过一些巧妙的CSS技巧，演示了如何在单个img标签上实现这一效果。 21 | 22 | - [Managing User Focus with :focus-visible](https://css-tricks.com/managing-user-focus-with-focus-visible/) 23 |
这篇文章主要介绍了如何使用:focus-visible来在元素获得焦点时为用户提供视觉指示。此外，文章还提供了如何移除元素焦点以及确保为特殊用户提供备用样式的方法。通过这些技巧，开发者可以创建更加用户友好的表单界面。 24 | 25 | ## Node.js 26 | - [Poor Express Authentication Patterns in Node.js and How to Avoid Them](https://www.lirantal.com/blog/poor-express-authentication-patterns-nodejs) 27 |
本文指出在Node.js和Express应用程序中常见的糟糕的身份验证模式，并给出了如何避免这些问题的建议。文章通过具体代码片段举例说明问题所在，并给出了解决方案。 28 | 29 | - [Node v22.1.0](https://nodejs.org/en/blog/release/v22.1.0) 30 |
[距离Node 22.0](https://nodeweekly.com/link/154708/web)不到两周的时间，Node 22.1 推出了可选的磁盘上代码缓存功能，可以依靠[V8 的缓存来加速编译。](https://nodeweekly.com/link/154709/web)这将会是是一项很具有潜力的性能优化措施。 31 | 32 | ## AI 资讯 33 | - [openAI 发布新旗舰模型 GPT-4o](https://openai.com/index/hello-gpt-4o) 34 |
openAI 发布全新旗舰模型 GPT-4o，它可以在音频、视觉和文本中进行实时推理，接受文本、音频和图像的任何组合作为输入，并生成文本、音频和图像的任何组合进行输出。与现有模型相比，它在视觉和音频理解方面尤其出色。目前，GPT-4o 的文本和图像功能已经开始在 ChatGPT 中逐步推出，用户可以在 ChatGPT 平台上免费体验到 GPT-4o 的相关功能，但免费版有使用次数限制，Plus 用户可以享受到 5 倍的调用额度。 35 | 36 | ## 工具推荐 37 | - [工具推荐: Better SSE](https://github.com/MatthewWid/better-sse) 38 |
Better-SSE：一个 SSE 库——服务器发送事件（SSE）是一种浏览器支持的API，它允许服务器端进程在不使用 WebSockets 的情况下实时向前端发送事件。Better-SSE 能够帮助开发者在 Node.js 中使用 SSE 变得更加顺畅。 39 | 40 | ## 拓展阅读 41 | - [Deno: Digging Tunnels out of a JS Sandbox](https://secfault-security.com/blog/deno.html) 42 |
介绍了Deno的安全模型和沙箱机制，并探讨了如何通过符号链接绕过沙箱的限制，以及如何利用竞争条件获得额外的运行权限和代码执行。文章还提供了Deno的配置和交互式shell的使用方法。 43 | -------------------------------------------------------------------------------- /docs/2025-5-16.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.05.16 2 | ![image](https://gips0.baidu.com/it/u=976050299,1257965251&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f2090_896) 3 | 4 | ## 前端技术 5 | - [Node v24.0.0 (Current)](https://nodejs.org/en/blog/release/v24.0.0) 6 |
该文章介绍了Node.js 24.0.0版本的发布。此版本带来诸多更新，升级V8 JavaScript引擎到13.6版、npm到11版，还改进了权限模型、测试运行器等功能。同时移除对MSVC的支持，启用ClangCL编译。文中还提及多个API被弃用或移除，有大量的语义化版本相关的提交记录。提供了各平台的安装程序和二进制文件链接及SHASUMS签名信息，方便开发者获取和验证版本。 7 | 8 | - [Understanding how Vite deals with your node_modules](https://dev.to/jinjiang/understanding-how-vite-deals-with-your-nodemodules-3pdf) 9 |
该文围绕Vite处理node_modules的机制展开。首先介绍Vite能将CJS包转换为ESM处理，还可通过optimizeDeps配置优化依赖。接着深入探讨SSR模式，说明如何用ssr.external和ssr.noExternal配置设置依赖处理方式，以及ssr.optimizeDeps对非纯CJS包的优化作用。还阐述了resolve.alias和resolve.dedupe对依赖导入的影响。此外，提及Vitest中处理依赖的相关配置选项，以及Vite 6的新配置environments。 10 | 11 | - [因网速太慢我把20M+的字体压缩到了几KB](https://juejin.cn/post/7490337281866317836) 12 |
作者从海报编辑器字体渲染慢的问题出发，探讨字体文件大的原因，如中文字符数量庞大、字形结构复杂。对比了TTF与WOFF2格式，指出WOFF2压缩率高、支持增量解码。回顾字体在浏览器的渲染方式，提出字体子集化和按需加载两种优化方案。作者以项目为例，用fontTools库实现动态子集化，前端配合调整，最终大幅缩减字体文件体积，缩短效果图生成时间，强调要结合业务场景选择优化方案。 13 | 14 | ## AI 资讯 15 | - [Manus开放注册，用户每天可免费执行一项任务](https://mp.weixin.qq.com/s/m1U-PATXBgIZy9lAamzcnA) 16 |
前阵子很火的 AI Agent 概念工具 Manus 在最近开放注册。Manus在公告中表示，Manus向所有人开放，无需等待名单；所有用户每天可免费执行一项任务（300积分），所有用户一次性获得1000积分奖励。 17 | 18 | - [OpenAI宣布向ChatGPT用户开放GPT-4.1模型](https://mp.weixin.qq.com/s/_u8Dp8xwcXUvTNfUYSH1WA) 19 |
美国开放人工智能研究中心（OpenAI）宣布，应广大用户的要求，GPT-4.1即日起将直接在ChatGPT中提供。GPT-4.1是一款专门针对编码任务和指令执行的模型，推理效率非常高，对于日常编码需求来说，是替代o3和o4-mini非常好的选择。 20 | 21 | - [腾讯推出 AI 编程助手 CodeBuddy](https://baijiahao.baidu.com/s?id=1832061162359584226&wfr=spider&for=pc) 22 |
腾讯推出了一款新的代码助手插件 ——CodeBuddy3.0。这款产品与微信小程序的开发工具实现了深度整合。CodeBuddy 并不是一个独立的集成开发环境（IDE），而是一个可安装在各种开发工具中的插件，方便开发者在不同的编码平台上使用。官方网站: https://copilot.tencent.com 23 | 24 | - [Lightricks](https://www.lightricks.com/) 25 |
以色列科技公司Lightricks发布了其开源AI视频生成模型的最新版本——LTX-Video-13B精炼模型（LTXV-13B v0.9.7-distilled）。这款模型以130亿参数为基础，通过多尺度渲染技术和高效量化优化，将视频生成速度提升至惊人的10秒以内，对消费级硬件友好，支持多种输入类型。具备LoRA训练、关键帧控制等特性，有不同开发工具。 26 | 27 | ## 扩展阅读 28 | - [前端也需要了解的mcp知识](https://juejin.cn/post/7495598591488016394) 29 |
文章围绕MCP展开。先介绍MCP是由Anthropic开发的开源协议，为AI代理连接不同服务提供标准化方式，能解决AI实时获取外界信息的难题，还可定义多种能力。接着阐述实现MCP服务的方法，以时间工具和GitHub搜索为例，展示详细步骤与代码。之后说明测试方式及在vscode、nextjs中使用MCP服务的配置与操作。帮助读者全面了解MCP并实践应用。 30 | 31 | - [Wallaby MCP: Deep Runtime Context for Your AI Agent](https://wallabyjs.com/blog/wallaby-mcp.html?utm_source=cooperpress&utm_medium=javascriptweekly&utm_content=javascriptweekly) 32 |
Wallaby 能为 AI 智能体提供实时执行数据、动态覆盖率及实时洞察。借助这些，可有效修复和生成测试，还能让开发者充满信心地编写代码，助力提升开发效率与质量。 33 | 34 | - [k6 1.0: Go-Powered Load Testing with JavaScript](https://javascriptweekly.com/link/169091/web) 35 |
介绍了一款功能齐全、可配置的负载生成工具。它采用由 Sobek Go 驱动的 JavaScript 引擎，支持用 JavaScript 编写测试脚本。其 1.0 版本具备稳定性，提供一流的 TypeScript 支持以及更好的可扩展性，有望在相关测试工作中发挥重要作用 36 | 37 | ## 工具推荐 38 | - [css-flex-code](https://github.com/xutao-o/css-flex-code) 39 |
开源的 VS Code 插件，可以通过图标实例直接生成 flex、grid 布局的 CSS 代码，提高开发效率 40 | -------------------------------------------------------------------------------- /docs/2025-7-25.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.07.25 2 | ![image](https://gips2.baidu.com/it/u=2957250781,2619215794&fm=3028&app=3028&f=JPEG&fmt=auto&q=75&size=f960_412) 3 | 4 | ## 前端技术 5 | - [Node.js v24.4.0](https://nodejs.org/en/blog/release/v24.4.0) 6 |
Node.js v24.4.0 发布，主要提供了该版本针对不同系统和架构的安装包文件及其对应的哈希值，如 aix-ppc64、arm64、darwin-x64 等多种类型的.tar.gz、.msi、.7z 等格式文件的哈希验证信息，方便开发者下载和验证文件完整性，确保获取到未被篡改的安装包来部署和使用 Node.js v24.4.0 。 7 | 8 | - [Summary of the May 2025 TC39 plenary](https://blogs.igalia.com/compilers/2025/07/03/summary-of-the-may-2025-tc39-plenary/) 9 |
2025 年 5 月 TC39 全会总结，Igalia 在总部承办此次会议。会议介绍了不同阶段提案进展，如已进入第 4 阶段的提案有Array.fromAsync、显式资源管理、Error.isError等；处于第 3 阶段的有Intl.LocaleInfo、Temporal 等提案。 10 | 11 | - [React Native 提供 Node-API 支持](https://www.callstack.com/blog/announcing-node-api-support-for-react-native) 12 |
将 Node-API 引入 React Native。此技术能让原生代码与 JavaScript 稳定交互，在多运行时环境广泛应用。采用 Node-API 为构建原生模块带来跨平台基础，支持多语言且 ABI 稳定。其动机包括解决原生模块编译耗时问题，借助现有 Node-API 生态系统，实现代码共享。适用于跨平台共享代码、高计算成本、调用平台 API 的场景。 13 | 14 | - [:has（）不仅仅是父选择器](https://www.youtube.com/watch?v=cxSowU9sDdU) 15 |
Kevin Powell探索了一些创造性的方法来利用：has（）伪类。 16 | 17 | ## AI 资讯 18 | - [OpenAI发布ChatGPT Agent](https://openai.com/zh-Hans-CN/index/introducing-chatgpt-agent/) 19 |
OpenAI发布ChatGPT Agent。ChatGPT Agent将Operator的网站交互能力、Deep Research的信息整合能力以及ChatGPT的深度对话能力融合在一起，形成统一的智能体系统。支持网页操作、数据分析、文件生成等功能，但目前仅支持付费用户使用 20 | 21 | - [Cursor V1.2](https://cursor.com/ja/changelog) 22 |
Cursor V1.2 发布，本次更新亮点较多，如 Agent 规划升级，可生成待办事项列表；支持排队消息；Memories 正式发布；能索引和搜索 PR；改进嵌入模型提升语义搜索准确性；Tab 完成速度加快；可让 Agent 解决合并冲突；优化后台 Agent 等。还修复内存泄漏、聊天渲染等问题 23 | 24 | - [Gemini 2.5 Flash-Lite](https://deepmind.google/models/gemini/flash-lite/) 25 |
宣称这是旗下迄今为止速度最快、成本最低的AI模型，原生支持高达100万token的惊人上下文长度，简直就是一个记忆力超群、能说会道的"超级话痨”。 26 | 27 | - [Kimi K2](https://moonshotai.github.io/Kimi-K2/) 28 |
7 月 11 日，Moonshot 发布开源模型 Kimi K2，为具备行动能力（agentic intelligence）的新一代模型，采用 1T 总参数 / 32B 激活 MoE 架构，在 SWE Bench Verified、Tau2、AceBench 等多个评测中领跑开源模型。 29 | 30 | ## 拓展阅读 31 | - [使用Array.fromAsync()实现JavaScript中的现代化异步迭代](https://allthingssmitty.com/2025/07/14/modern-async-iteration-in-javascript-with-array-fromasync/) 32 |
JavaScript 的新方法 Array.fromAsync ()。它能将异步或同步可迭代对象转换为数组，返回 Promise 对象。此方法适用于从异步生成器收集数据、处理分页数据、将流转换为数组等场景。通过示例展示了其使用方式，包括应用映射函数（同步或异步）。与传统方式对比，它提供了更简洁的替代方案。还提到了错误处理，以及在现代浏览器和 Node.js 中的支持情况，提供了简单的 polyfill 示例。该方法有助于简化异步可迭代对象的处理 。 33 | 34 | - [The History of React Through Code](https://playfulprogramming.com/posts/react-history-through-code) 35 |
文章从历史和代码角度深入剖析 React。讲述了 React 从最初的实验项目发展为成熟框架的历程，涵盖了 JSX、虚拟 DOM、类组件、函数式组件、Hooks 等重要特性的诞生与演变。介绍了 Fiber 架构带来的如错误处理、代码分割、加载状态管理等功能。还阐述了数据获取、服务器端渲染等方面的改进，包括新的 API 和优化方式。展示了 React 在发展过程中保持的一致性和对开发者体验的关注 。 36 | 37 | - [WebAssembly: Yes, but for What?](https://queue.acm.org/detail.cfm?id=3746171) 38 |
今年 Wasm 迎来十周年，虽有发展但仍未充分发挥潜力。作者通过市场来分析其成败，在 Web 方面，Wasm 在重定向桌面应用、网页组件等方面有成功案例，但在游戏领域未获广泛采用，且受垃圾回收等因素限制。在非 Web 领域，Wasm 用于临时组合、轻量级虚拟化和组件模型等。在云领域，其快速冷启动优势受关注。未来，Wasm 在需要隔离的场景，如内核驱动、操作系统及安全计算等方面有潜在应用 39 | 40 | -------------------------------------------------------------------------------- /docs/2021-11-10.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#10-2021.11.10 2 | 3 | ![前端技术双周刊_2](https://tva1.sinaimg.cn/large/008i3skNly1gw9w4fa214j30p00an40u.jpg) 4 | 5 | ## JavaScript 6 | 7 | - [Writing clean JavaScript tests with the BASIC principles](https://yonigoldberg.medium.com/fighting-javascript-tests-complexity-with-the-basic-principles-87b7622eac9a) 8 |
作者认为很多团队没有做好单元测试覆盖的一个重要原因，不是大家不想做，而是测试用例写的太差劲，导致无法持续，以至于形同虚设。所以作者给出了写单测的5个原则（BASIC），通过例子说明了遵循它的好处 9 | - [用 TypeScript 类型运算实现一个中国象棋程序](https://github.com/xufei/type-chess) 10 |
用TypeScript类运算符实现，思路上非常有趣 11 | 12 | ## CSS 13 | 14 | - [A Guide To CSS Debugging](https://www.smashingmagazine.com/2021/10/guide-debugging-css/) 15 |
本文将常见的 CSS 问题分为4类，分别讲了对应的 debug 方法。1. Overflow of content from its parent. 2. Inheriting browser inconsistencies. 3. Unexpected inheritance from the cascade. 4. CSS resiliency failures from DOM changes 16 | - [聊聊纯 CSS 图标](https://zhuanlan.zhihu.com/p/430423521) 17 |
作者提出了一种使用图片实现 CSS 图标的方案，同时又能够支持可缩放、可着色、彩色图标等要求 18 | 19 | ## Node.js 20 | 21 | - [Web Streams Everywhere](https://css-tricks.com/web-streams-everywhere-and-fetch-for-node-js/) 22 |
stream 是对 I/O 抽象的标准 API，在前端业务场景中应用越来越广泛。这里对 node/web stream 的用法做了详细的讲解 23 | - [Is Deno Still a Thing? A Look at the Status of the Node Killer](https://blog.bitsrc.io/is-deno-still-a-thing-a-look-at-the-status-of-the-node-killer-884d47981d09) 24 |
Deno 正式发布一年多了，比起当初要替代 Node.js 的雄心，现在好像没有什么水花。但实际上它也在稳健的发展，看看它最近的进展吧 25 | - [Node.js 后端框架 star 数排名](https://zhuanlan.zhihu.com/p/431730018) 26 |
2021年11月更新的，可以作为 Node.js 后端框架选型参考 27 | 28 | ## 前端框架 29 | 30 | - [不要再拿组合式 API 与 React Hooks 来对比了！](https://mp.weixin.qq.com/s/xvRP7pIq41dC1KDlhgtjJQ) 31 |
Vue 的组合式 API 在设计之初受到过 React Hooks 的启发，且这两者都可以把逻辑抽象成函数的组合，来实现逻辑的内聚与复用，在视觉上有相似之处。但是本质上组合式 API 与 React Hooks 的心智模型还是大不相同的 32 | 33 | ## 开源产品 34 | 35 | - [北海 (Kraken) v0.9 — 支持 QuickJS 首屏性能再提升 20%](https://zhuanlan.zhihu.com/p/429278372) 36 |
Kraken 0.9版本加入了几大新特性：1. 支持 QuickJS 作为 JavaScript Engine；2. 支持 HTML 文件的解析和渲染；3. 支持 HTTP 协议的缓存特性；4. 支持 Vue/React 官方工具链；5. 支持模块热更新；6. 支持 querySelector / querySelectorAll 37 | - [XState](https://mp.weixin.qq.com/s/rHgUYOTyMKYupuJal_vY_Q) 38 |
一个比较标准的有限状态机的实现，并可以通过图形化的方式转换为状态图的形式。同时也是一个状态管理库，但状态驱动的思维和 Redux 等库有很大不同 39 | 40 | ## 工具 41 | 42 | - [npkill](https://mp.weixin.qq.com/s/53U0VBp5h4iiktfxqLhTcw) 43 |
电脑空间不够用了，这个工具可以帮你安全快速的清理电脑上的 node_modules 44 | 45 | ## 扩展阅读 46 | 47 | - [Hermes 即将成为 React Native 默认的 JS 引擎](https://mp.weixin.qq.com/s/1Zlj2bmKJngU2z8-l4uNFw) 48 |
重点介绍了过去两年来在推动 Hermes 成为 React Native 最佳 JavaScript 引擎方面取得的各项激进展。RN 官方团队有信心通过更多改进让 Hermes 成为各类平台上 React Native 中的默认 JS 引擎 49 | - [iOS 端容器之 WKWebView 那些事](https://mp.weixin.qq.com/s/39u-48KvO-Fmkn9t0nJ-fA) 50 |
文章描述了 WKWebView 使用中常见的4个问题：请求代理问题、Cookie 管理问题、全面屏适配问题和 WebContent 进程崩溃问题，同时也给出了对应的解决办法 51 | - [元宇宙下的前端现状](https://mp.weixin.qq.com/s/oFgOvPa0ZtBCJmgtnFKAZA) 52 |
最近元宇宙一词爆火，作为大家口中的“互联网的最终形态”，需要如今大热的包括 AR、VR、5G、云计算、区块链等软硬件技术的成熟。才能构建出一个去中心化的、不受单一控制的、永续的、不会终止的世界。上面提到的各项技术，和目前前端关联比较大的，便是 AR、VR，探索元宇宙下的前端～ 53 | -------------------------------------------------------------------------------- /docs/2021-12-8.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#12-2021.12.8 2 | 3 | ![前端技术双周刊_5](https://user-images.githubusercontent.com/17450747/145038623-c49dbefc-fdd4-4737-8d7d-142aa4aadbf1.png) 4 | 5 | ## JavaScript 6 | - [requestAnimationFrame 执行机制探索](https://mp.weixin.qq.com/s/ocFcBRjj8xzizF5ebFepdA) 7 |
本文通过对 requestAnimationFrame 的全方位解读带我们探索浏览器动画执行机制 8 | 9 | - [重排、重绘、合成，你真的懂吗？](https://mp.weixin.qq.com/s/57aMCVDjuVswEFFep3omLQ) 10 |
本文主要介绍了重排、重绘、合成的基本概念、触发时机、影响范围以及其优化策略。 11 | 12 | - [看向未来 - 近期 TC39 提案汇总](https://mp.weixin.qq.com/s/AxwT588VKRxnlkBlXICMpQ) 13 |
TC39 提案汇总介绍，包含近半年全部已经落地的提案，以及近期有进展的尚未落地的提案。 14 | 15 | - [图解 ESM](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/) 16 |
随着浏览器支持越来越广泛，Vite 等编译工具的兴起，是时候回顾一下这篇讲解 ESM 的经典文章了。 17 | 18 | ## Node.js 19 | - [Node.js 多进程/线程 —— 日志系统架构优化实践](https://mp.weixin.qq.com/s/s3DeAxrEbVmqtCHGP9lstg) 20 |
通过日志系统解密和解压缩优化实践作为引子，详细介绍了 Node.js 中多进程/多线程实现和通信方式 21 | 22 | ## 前端智能化 23 | - [智能设计之布局详解](https://zhuanlan.zhihu.com/p/415512216) 24 |
本文先从用户注意力分布和设计原则的角度出发介绍了什么是好的布局设计，然后从实现角度介绍了当前主流的布局方式：基于约束的布局和 Auto Layout 布局。再引申出近年来出现的智能布局生成方法，包括一些成熟的可用数据集和训练模型，最后给出了可参考的布局评价标准。 25 | 26 | ## 设计工具 27 | - [Figma 自动布局指南](https://mp.weixin.qq.com/s/-p8bsUoKPCRIZZffEssUFw) 28 |
Auto Layout 自动布局是 Figma 的核心卖点之一，可以解放设计师的大部分重复劳动。但是从技术角度来看，这不就是 Flexbox 吗？可以说这是技术赋能设计的一个典范，但反过来工程师也可以了解到怎么样把晦涩的技术思维转化为易用的产品功能。 29 | 30 | ## 端智能 31 | - [Paddle.js & PaddleClas 实战 ——『寻物大作战』AI 小游戏](https://mp.weixin.qq.com/s/GP1lc3FZ6lQyD7FJfU67xw) 32 |
『寻物大作战』是一款基于 Paddle.js & PaddleClas 能力打造的 AI 小游戏，通过一套端到端的图像分类模型来实现物体识别的效果。所依赖的技术主要包含两大部分：百度飞桨图像分类套件 PaddleClas 和基于 JavaScript 的前端深度学习推理引擎 Paddle.js。对比采用网络传输数据至服务端进行推理的方案，性能优势显而易见，是一个更优的选择。 33 | 34 | - [再添神器！Paddle.js 发布 OCR SDK](https://mp.weixin.qq.com/s/ivrYFOO1iWErLFc2JlIJ1g) 35 |
PaddleOCR 是百度开源的超轻量级文字识别模型套件，提供了数十种文本检测、识别模型，旨在打造一套丰富、领先、实用的文字检测、识别模型/工具库，助力使用者训练出更好的模型，并应用落地。 36 | 37 | ## 开源产品 38 | 39 | - [Mitosis](https://github.com/BuilderIO/mitosis) 40 |
Mitosis 原本指细胞的有丝分裂，这里指的是一份组件代码，可以编译成多种不同的框架语言版本运行。可以在 [Playground](https://mitosis.builder.io/) 这里体验 41 | 42 | ## 拓展阅读 43 | 44 | - [2021 年 GMTC 全球大前端技术大会上有哪些值得我们关注？](https://www.zhihu.com/question/502936541/answer/2260235978) 45 |
附gmtc内容和资料：https://gmtc.infoq.cn/2021/shenzhen/schedule 46 | 47 | - [聊聊 vue 中的 keep-alive](https://mp.weixin.qq.com/s/PXaK6E9TAceoTa5I-PR_hQ) 48 |
本文介绍了 Vue 中的内置组件组件以及组件的具体用法。同时也分析了组件的一些内部原理，以及作者对于 keep-alive 的运行的一些总结 49 | 50 | - [图片加载异常兜底方案](https://juejin.cn/post/6945040754255331336) 51 |
针对图片加载异常的情况给出了比较全面的解决方案 52 | 53 | - [前端工程师应该为用户体验负责](https://mp.weixin.qq.com/s/CoqW5x9vMN87U3h5fuEoSw) 54 |
一些基础的交互体验常识，在新一代的前端开发中被大量忽视。比如点击反馈、边界异常处理、HTML 语义化。张鑫旭分析了产生这个困境的原因，以及解决方式。不过对于我们更多的意义在于提高这方面的意识，先有意识才能有行动 55 | 56 | - [英伟达 AI 产品：打字生成图片](https://mp.weixin.qq.com/s/J4IK4hG_SZmKDk2qFW_wXQ) 57 |
英伟达最新的 AI 模型 GauGAN2，不仅能根据字词生成逼真风景照，还能实时用文字P图！创意满分！ 58 | 59 | - [容器并不能解决一切问题](https://mp.weixin.qq.com/s/HKnW50EfxBnKtNyz5OfW3Q) 60 |
我们的行业在过去十年中取得了令人难以置信的进步，这在一定程度上要归功于 Docker、Docker Compose 和 Kubernetes 等技术。然而，我们仍在研究如何在我们所处的多样化环境中进行开发。 61 | 62 | -------------------------------------------------------------------------------- /docs/2022-8-24.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#29-2022.08.24 2 | 3 | ![前端技术双周刊_22](https://user-images.githubusercontent.com/4032009/186405591-d42e3b11-1fe2-498c-bad8-5bbfa84802f6.png) 4 | 5 | ## JavaScript 6 | - [How to Minify your JavaScript Code](https://getbutterfly.com/code-golfing-tips-tricks-how-to-minify-your-javascript-code/) 7 |
这篇文章汇集了各种用最少的代码写 JS 的方法。并不是鼓励大家按照这种形式去写代码，因为这样可能会导致代码可读性的下降。它的意义在于帮助我们查缺补漏，有很多基础语法可能被我们遗忘了。 8 | 9 | - [Record & Tuple: Immutable Data Structures in JS](https://portal.gitnation.org/contents/record-and-tuple-immutable-data-structures-in-js) 10 |
JSNation 2022上关于 Record & Tuple 提案的分享 11 | 12 | ## Node 13 | - [How to monitor a Node.js application](https://newrelic.com/blog/best-practices/nodejs-application-monitoring?utm_source=javascript-weekly&utm_medium=community&utm_campaign=global-fy23-q2-nodejs-application-monitoring) 14 |
本文主要从 Node.js 监控展开，介绍了作者 New Relic 监控与 Node.js 的集成 15 | 16 | - [快到飞起的 Bun 会替代 Node 吗](https://juejin.cn/post/7134492212452130847) 17 |
Bun 是一个大而全的 JavaScript 运行时,它不止做了 Node 和 Deno 的工作(JavaScript 运行时)，而且还原生支持 bundler、transpiler、task runner 等 18 | 19 | ## 工程化实践 20 | - [Bundless 的思考与实践](https://mp.weixin.qq.com/s/nk5SN8AKwyFkUTEOiLCBdQ) 21 |
随着 Vite 等构建工具的兴起，以及现代浏览器对原生 ESM 的普遍支持，Bundleless 的方案逐渐被大家熟悉和接受。但同时也伴随有新的问题出现 22 | ![image](https://user-images.githubusercontent.com/4032009/186406535-4dd037d7-aa4e-4159-89a6-53252e8dd206.png) 23 | 24 | ## 拓展阅读 25 | 26 | - [Star Rating Component by React](https://react-rating.onrender.com/) 27 |
一个功能强大，样式可扩展的星星评分组件，我们可以学习到怎么设计这样的组件。 28 |
imageimage 29 | 30 | - [A better segmented control](https://medium.com/tap-to-dismiss/a-better-segmented-control-9e662de2ef57) 31 |
选择类的控件有很多种，很多时候大家容易混淆使用，这篇文章帮助你明确什么场景下需要什么样的选择控件。 32 | ![](https://user-images.githubusercontent.com/4032009/186383007-c70d42e1-6778-46d7-a59a-67c84b47c2b4.png) 33 | 34 | - [HTTP/3 为什么这么快](https://juejin.cn/post/7055178022445383694) 35 |
HTTP/3 的来临对 Web 性能是件大事，本文主要介绍 HTTP/3 对 web 性能的提速，能在用户体验方面带来了很大的改善。 36 | 37 | - [Color & Contrast](https://colorandcontrast.com/#/) 38 |
从生理学到视觉障碍，从颜色现象到属性和模型，从色彩空间到使用方法，14 个主题 95 篇文章，没见过比这更全面的色彩学习指南了。 39 | 40 | - [如何写一份高可读性的软件工程设计文档](https://zhuanlan.zhihu.com/p/552095835) 41 |
作为一名软件工程师，我们的工作本质不仅仅是编写程序代码，而是解决真正的问题。因此，相比最终的程序代码，文字形式的设计文档反而更加重要。本文根据 Google 及其它公司编写设计文档的经验总结而创作，极具参考价值。文章最后的参考文档和参考书籍部分也非常值得一读。 42 | 43 | - [微软为 VS Code 推出 Markdown 语言服务器](https://zhuanlan.zhihu.com/p/556772263) 44 |
微软近日发布官方博客表示，他们经过半年时间的努力为 VS Code 带来了 Markdown 语言服务器（Markdown Language Server），目标是推动 Markdown 工具的发展，并使其具有一些与其他编程语言工具类似的智能功能。 45 | 46 | - [Set up Neovim on a new M2 MacBook Air for coding React, TypeScript, Tailwind CSS, etc.](https://www.youtube.com/watch?v=ajmK0ZNcM4Q&t=2133s) 47 |
一个极客拿到新玩具后的开发配置, 失眠或者压力大的时候可以看看、听听机械键盘敲击的声音很解压 48 | 49 | - [Shopee 衰落幕后](https://mp.weixin.qq.com/s/3AJ32QiIFz-5xzWiiyCHIA) 50 |
股价下跌 80% 的虾皮，内部发生了啥？ 51 | 52 | -------------------------------------------------------------------------------- /docs/2025-7-11.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.07.11 2 | 3 | ![image](https://gips0.baidu.com/it/u=2507877315,1055223658&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f960_412) 4 | 5 | ## 前端技术 6 | - [Node v22.17.0](https://nodejs.org/en/blog/release/v22.17.0) 7 |
文章介绍了 Node v22.17.0（LTS）版本的更新内容。其中有多项功能变化，如部分功能被弃用，像不推荐无 new 实例化 http 类等；部分特性稳定，如 assert.partialDeepStrictEqual () 可安全使用。还有新特性，如 fs.FileHandle.readableWebStream 增加 autoClose 选项等。在社区方面，有新成员加入 TSC 和协作者名单。此外，更新还涉及多个模块的优化、文档改进、测试用例调整等 8 | 9 | - [What's new in ECMAScript 2025](https://pawelgrzybek.com/whats-new-in-ecmascript-2025/) 10 |
介绍了 ECMAScript 2025 的新特性。包括正则表达式中允许重复命名捕获组，Set 新增多个方法，支持正则表达式模式修饰符。新增导入属性用于处理非 JS 文件，引入迭代器助手方法。Promise.try 可优雅包装同步或异步操作，新增 Float16Array 类型，RegExp.escape () 解决字符串转义问题 11 | 12 | - [Deno 2.4: deno bundle is back](https://deno.com/blog/v2.4) 13 |
Deno 2.4 带来多项更新。恢复 deno bundle 子命令用于创建单文件 JavaScript 捆绑包，支持多种平台与依赖。新增导入文本和字节功能，OpenTelemetry 稳定，有新的 --preload 标志等。在依赖管理、覆盖收集、权限设置等方面优化，支持条件导出、裸规范运行等，还改进对 XML、SVG 等文件格式化及 tsconfig.json 支持，提升 Node.js API 兼容性与 LSP 功能，增加不少实用特性 14 | 15 | - [Vite 7.0 is out!](https://vite.dev/blog/announcing-vite7) 16 |
Vite 7.0 正式发布，更新内容包括：Node.js 和浏览器支持的版本变更；支持 Vitest 3.2 及以上版本；引入了实验性的 Environment API，包括新的 buildApp 钩子等。 17 | 18 | ## AI 资讯 19 | - [Grok 4](https://grok.com/) 20 |
美当地时间 9 日晚，X 发布 Grok 4。其在超级计算机训练，有诸多优势，如大上下文窗口、强推理能力、多模态功能等。其在部分测试中跑分前列，但在 AGI-ARC-2 测试有提升空间。 21 | 22 | - [B站开源动漫视频生成模型 AniSora V3 版](https://github.com/bilibili/index-anisora) 23 |
B站团队的开源动漫视频生成模型 AniSora于7月2日更新到 AniSora V3预览版。作为 Index-AniSora项目的一部分，V3版本在原有基础上 24 | 25 | - [字节跳动开源其 AI IDE 工具核心组件 Trae-Agent](https:/github.com/bytedance/TRAE-agent) 26 |
字节跳动旗下AI原生集成开发环境(IDE)Trae于7月4日宣布正式开源其核心组件Trae-Agent。GitHub页面显示，Trae Agent是一个基于LLM通用软件工程任务的智能体。它提供了一个CLI界面，可以理解自然语言指令，并使用各种工具和LLM提供商执行复杂的软件工程工作流。该项目仍处于alpha阶段，并积极开发中 27 | 28 | - [Cursor on Web and Mobile](https://cursor.com/ja/blog/agent-web) 29 |
Cursor 的智能代理现已支持在网页和移动设备上使用。用户能在网页上开启操作，这一举措标志着 Cursor在其集成开发环境(IDE)之外迈出了重要的一步，Anysphere一直致力于将产品推向更多平台，并为用户开发更多基于智能体的体验。 30 | 31 | - [Open Source AI Editor: First Milestone](https://code.visualstudio.com/blogs/2025/06/30/openSourceAIEditorFirstMilestone) 32 |
2025 年 6 月 30 日，GitHub Copilot Chat 扩展程序现已在 GitHub 上根据 MIT 许可证开源。其开放动机源于社区驱动创新与提升数据透明度，认为借助开源社区能让 AI 体验蓬勃发展，如同 VS Code 过去十年。随着 AI 融入现代编码体验，应与 VS Code 一同开放开发。 33 | 34 | - [文心4.5系列模型，正式开源！](https://mp.weixin.qq.com/s/oIIUdL_xnfy8vuxR9rEDfA) 35 |
文心4.5系列开源模型共10款，涵盖了激活参数规模分别为47B和3B的混合专家（MoE）模型（最大的模型总参数量为424B），以及0.3B的稠密参数模型。 36 | 37 | ## 拓展阅读 38 | - [Modern Node.js Patterns for 2025](https://kashw1n.com/blog/nodejs-2025/) 39 |
文章介绍了 2025 年 Node.js 的现代开发模式。在模块系统上，ES 模块成标准且有 “node:” 前缀；具备内置 Web API ，减少外部依赖。内置测试功能强大，异步模式更成熟。Stream 与 Web 标准集成度更高，还有 Worker Threads 实现并行。在开发体验上，有内置工具支持。在安全、性能监测、应用分发等方面也有新特性。这些新变化让 Node.js 开发更简洁高效，与 Web 标准融合更好，能构建更优质的应用程序 40 | 41 | - [Speculative Optimizations for WebAssembly using Deopts and Inlining](https://v8.dev/blog/wasm-speculative-optimizations) 42 |
本文介绍 V8 为 WebAssembly 实现的两项优化：推测性内联和去优化支持。JavaScript 快速执行依赖推测优化，而 WebAssembly 此前因静态信息多无需此类优化。但 WasmGC 出现后情况改变，推测性内联可在间接调用时发挥作用。文中详细阐述其原理、反馈向量机制及技术细节，去优化机制可在假设不成立时切换到未优化代码，测量结果显示这两项优化显著提升 WebAssembly 执行速度 43 | 44 | -------------------------------------------------------------------------------- /docs/2022-4-6.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#20-2022.04.06 2 | ![前端技术双周刊_20](https://mms-graph.cdn.bcebos.com/wiki/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E5%8F%8C%E5%91%A8%E5%88%8A_13.png) 3 | 4 | ## Node.js 5 | - [What’s new in Node.js core? March 2022 edition](https://simonplend.com/whats-new-in-node-js-core-march-2022-edition) 6 |
Node.js v12 在四月底就要停止维护了，同时 v18 即将发布，这篇文章介绍了 v18 版本中的一些重要特性。 7 | 8 | - [Node.js community update](https://developers.redhat.com/articles/2022/03/18/nodejs-community-update?utm_source=pocket_mylist) 9 |
这篇文章介绍了 Node.js 社区近期重要的事件。 10 | 11 | ## CSS/HTML 12 | - [革命性创新，动画杀手锏 @scroll-timeline](https://juejin.cn/post/7072176412706209823) 13 |
在 CSS 规范 [Scroll-linked Animations](https://drafts.csswg.org/scroll-animations-1/) 中，推出了一个划时代的 CSS 功能。也就是 -- The [@scroll-timeline](https://drafts.csswg.org/scroll-animations/#at-ruledef-scroll-timeline) at-rule，直译过来即滚动时间线，是能够改变 CSS 动画的一个非常大的革新，但目前兼容性还未普及。 14 | 15 | - [Those HTML Attributes You Never Use](https://www.smashingmagazine.com/2022/03/html-attributes-you-never-use/) 16 |
这篇文章汇总了一些不常见却很有用的 HTML 属性 17 | 18 | ## 前端框架 19 | - [react-philosophies](https://github.com/mithi/react-philosophies) 20 |
《react-philosophies》的灵感来源于作者实际开发中遇到的各种场景 21 | 22 | - [React 18 is now available on npm!](https://reactjs.org/blog/2022/03/29/react-v18.html) 23 |
React 18最核心的升级是更新了 React 的渲染模型为并发渲染。React 18中大部分新特性都构建在并发渲染之上， 新特性包括：自动批处理、Transitions、更好用的 Suspense 特性、新的前后端渲染 API、新的 Hooks 提供。 24 | 25 | ## 开源项目 26 | - [GitHub Copilot Labs](https://next.github.com/projects/copilot-labs) 27 |
GitHub Copilot 变得原来越厉害了，分离出了一个新的叫做 GitHub Copilot Labs 的 VSCode 插件。提供了两个功能：Explain this code，输入一段代码，输出这段代码的语义化描述；Translate this code，输入一段代码，将它转换为其他相同功能的其他编程语言。 28 | 29 | - [type-challenges](https://github.com/type-challenges/type-challenges) 30 |
TypeScript 类型体操姿势合集，这个项目意在于让我们更好的了解 TS 的类型系统，编写自己的类型工具或者享受挑战的乐趣。 31 | 32 | ## 拓展阅读 33 | - [AntV/S2-基于 Canvas 的高性能多维分析表格](https://juejin.cn/post/7081548620033425421) 34 |
S2 是多维交叉分析领域的表格解决方案，数据驱动视图，提供底层核心库、基础组件库、业务场景库，具备自由扩展的能力，让开发者既能开箱即用，也能基于自身场景自由发挥。 35 | 36 | - [用 canvas 搞一个手势识别](https://juejin.cn/post/7079830929048338463) 37 |
手势识别听起来真的是非常高大上的功能，但具体是怎么实现的呢，不知道你有没有想过，本文用 Canvas 实现了一个简单的手势识别，大家可以一窥手势识别的原理。 38 | 39 | - [低代码引擎 LowCodeEngine](https://zhuanlan.zhihu.com/p/487477918) 40 |
市面上的低代码平台众多，虽然针对不同的业务场景，但其中也有很多重复建设的能力。通过[低代码引擎](https://lowcode-engine.cn/)可以扩展定制自己的低代码平台，而不用从零开始。在底层也制定了标准化的低代码协议规范，希望让“概念互通，物料互通，生态互通”成为了可能。附：[低代码引擎技术白皮书](https://developer.aliyun.com/ebook/7507) 41 | 42 | - [【翻译】DeepKit-基于 TypeScript 的新兴 Web 框架](https://zhuanlan.zhihu.com/p/490924660) 43 |
本文翻译自 [Introducing Deepkit Framework](https://deepkit.io/blog/introducing-deepkit-framework)。TypeScript 拥有令人难以置信的灵活性以及受众多开发者喜爱的类型系统。不幸的是，它在这方面的能力在运行时几乎完全不存在。类型是有价值的，但我们却轻易地在编译期间将其丢弃。在运行时保留这些类型将会有巨大的积极意义。[DeepKit](https://github.com/deepkit/deepkit-framework) 在这方面做了积极的探索。 44 | 45 | - [Picasso-开启大前端的未来](https://zhuanlan.zhihu.com/p/38344491) 46 |
Picasso 是美团大众点评移动研发团队自研的高性能跨平台动态化框架。它的特点在于基于通用编程语言设计的支持锚点布局的 DSL 强表达能力；因为避免了从声明式到命令式的计算过程，完全无需布局计算引擎的介入，因此达到了『需求表达即计算』的效果，具有良好的性能表现 47 | 48 | - [微信小程序大屏适配指南](https://developers.weixin.qq.com/miniprogram/design/adapt.html) 49 |
对于有移动端和 PC 端同构需求的业务具有一定的参考价值 50 | 51 | 编辑：黄祥祥 52 | -------------------------------------------------------------------------------- /docs/2022-1-19.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#15-2022.1.19 2 | 3 | ![前端技术双周刊_8](https://tva1.sinaimg.cn/large/008i3skNly1gyitpw8fz2j30p00anq59.jpg) 4 | 5 | ## 2021回顾系列 6 | 7 | - [2021 JavaScript Rising Stars](https://risingstars.js.org/2021/en) 8 |
2021年度 JavaScript Rising Stars 报告，根据代码库 stars 增长数量排名的报告，比较客观。 9 | 10 | - [了不起的 Chrome 浏览器系列：2021年，Chrome 哪些变化最值得关注？](https://zhuanlan.zhihu.com/p/455832907) 11 |
了解 Chrome 的发展可以帮助我们理解整个前端行业的发展趋势，浏览器的能力就是前端行业的边界所在（Web3.0另说），主要推动浏览器进步的就是 Chrome。 12 | 13 | - [Node.js 2021年开发者报告解读：健康稳步的发展中](https://mp.weixin.qq.com/s/M5wQUWnJcLXScNREDKoqOg) 14 |
Node.js 社区健康稳步的发展中，主要是从性能好向好用转变，在易用性上有很大提升。 15 | 16 | ## CSS 17 | 18 | - [防御性 CSS](https://ishadeed.com/article/defensive-css/) 19 |
一系列可以避免某些 CSS 问题或行为发生的方法，在问题发生之前解决它是最好的。 20 | 21 | - [Writing Better CSS](https://www.aleksandrhovhannisyan.com/blog/writing-better-css/) 22 |
CSS has come a long way since the early days of web development. Today's developers can enjoy writing CSS that works in all major browsers, without having to bend over backwards to implement tricky layout requirements. In this article, we'll look at various scenarios where modern techniques can reduce the complexity of your code and allow you to write better CSS. 23 | 24 | ## Web3 25 | 26 | - [My first impressions of web3](https://moxie.org/2022/01/07/web3-first-impressions.html) 27 |
Signal App 的创始人体验了 web3，进行了一系列的吐槽。 28 | 29 | - [In Response to My first impressions of web3](https://skerritt.blog/response-to-moxie/) 30 |
对 My first impressions of web3 这篇文章的回复。作者认为目前 web3 确实有问题，但有很多人正在努力改进它。同时指出了去中心化存在的其他问题。 31 | 32 | ## 拓展阅读 33 | 34 | - [Open source maintainer pulls the plug on npm packages colors and faker, now what?](https://snyk.io/blog/open-source-npm-packages-colors-faker/) 35 |
近期开源社区又出现了一个热点事件，热门库 colors 的作者故意给项目注入恶意代码来发泄不满。这又引出了与 log4j 事件相同的问题，软件行业应该如何回馈开源项目开发者？ 36 | 37 | - [从0到1：美团端侧 CDN 容灾解决方案](https://mp.weixin.qq.com/s/BA55Op8A29sXq-_SHv1igg) 38 |
CDN 因能够有效解决因分布、带宽、服务器性能带来的网络访问延迟等问题，已经成为互联网不可或缺的一部分，也是前端业务严重依赖的服务之一。 39 | 40 | - [第五届 SEE Conf 2022 回顾](https://www.yuque.com/seeconf/2022) 41 |
其中几个有意思的分享： 42 |
a. [一种秒级安装 npm 的方式](https://www.yuque.com/seeconf/2022/slide#GxZbi)：深度的 npm 安装优化方案，包括采用减少请求数增加多级缓存、增加 FUSE 文件 IO 中间层和无副作用的全局缓存等方式，相比 pnpm 和 yarn 的方案有自己的特色。也可以参考另一篇解读文章[深入浅出 tnpm rapid 模式 - 如何比 pnpm 快 10 秒](https://zhuanlan.zhihu.com/p/455809528)。 43 |
b. [如何打造业务专属的 "Can I use"](https://www.yuque.com/seeconf/2022/slide#Iu3lU)：针对支付宝自研内核与主流浏览器兼容性差异的问题，打造的 Can I Use in Alipay？那是不是也可以有 Can i Use in Baidubox/Wechat 等等 44 | 45 | ## 开发工具 46 | 47 | - [Record, replay and measure user flows](https://developer.chrome.com/docs/devtools/recorder/) 48 |
chrome 开发者工具中新出了一个 recoder。它可以记录用户操作，之后进行回放，进行性能测试等。 49 | 50 | ## 开源项目 51 | 52 | - [XQUIC](https://zhuanlan.zhihu.com/p/454347016) 53 |
阿里自研的标准化协议库 XQUIC 开源，基于 IETF QUIC 协议实现的 UDP 传输框架。 54 | 55 | - [Turborepo](https://github.com/vercel/turborepo) 56 |
一个新的 monorepo 管理方案，也可以看看它[与 Nx 有哪些区别](https://nx.dev/guides/turbo-and-nx)。 57 | 58 | - [Parcel CSS](https://parceljs.org/blog/parcel-css/) 59 |
A new CSS parser, compiler, and minifier written in Rust. It is over 100x faster than CSSNano for minification, and over 3x faster than ESBuild. 60 | -------------------------------------------------------------------------------- /docs/2021-9-15.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊-2021.9.15 2 | 3 | ![前端技术双周刊_5](https://user-images.githubusercontent.com/9262426/133365355-b3feb0ab-a3db-4659-ab39-1b15bccc869e.png) 4 | 5 | ## JavaScript 6 | 7 | - [Proxy 和 Reflect 的要注意的问题与局限性](https://zhuanlan.zhihu.com/p/407282042) 8 |
这篇文章带你了解 Proxy 的用法，Proxy 有哪些局限性，Proxy 的最佳搭档 Reflect 的用法 9 | 10 | - [ECMAScript 双月报告：Pipeline Operator 进入 Stage 2](https://mp.weixin.qq.com/s?__biz=Mzg4MjE5OTI4Mw==&mid=2247488881&idx=1&sn=ddc988a16cb5fb1c9b34b3a14ceb28c1&scene=21) 11 | 12 | - [精读《捕获所有异步 error》](https://zhuanlan.zhihu.com/p/407228656) 13 |
讨论了在各种异步情况下该如何捕获异常。大部分异步错误，都可以通过 await 的方式解决，我们唯一要注意的是，await 仅支持一层，或者说一条链的错误监听。如果有一层异步脱离了 await，则正常写法则无法捕获。针对这个问题，原文也提供了例如 Promise.all、链式 Promise、.catch 等方法解决。附[原文链接](https://advancedweb.hu/how-to-avoid-uncaught-async-errors-in-javascript/) 14 | 15 | ## CSS 16 | 17 | - [深入了解魔性的CSS字体](https://mp.weixin.qq.com/s/XjLfsQH78XEDQ4xCd_FHlw) 18 |
介绍了字体和字重的回退机制，并对如何合理设置字体和字重给出建议 19 | 20 | ## 跨端 21 | 22 | - [React Native's Many Platform Vision](https://reactnative.dev/blog/2021/08/26/many-platform-vision) 23 |
React Native 的愿景是将 React Native 扩展到移动之外，目前已经开始与 Facebook 的桌面团队和 VR 团队合作。当拥抱每个平台的平台约束，从各项知识中学习，从其他参与者那里收集灵感时，生态系统中的每个平台都会受益。 24 | 25 | ## Node.js 26 | 27 | - [废宅阿斗 NPM 即将被 Node.js 官方抛弃](https://zhuanlan.zhihu.com/p/408122100) 28 |
Corepack 会成为 Node.js 官方的内置 **CLI，用来管理『包管理工具（npm、yarn、pnpm、cnpm）』，用户无需手动安装，即『包管理器的管理器』。Corepack** 从 16.9.0 开始，内置到 Node.js 的安装包中。npm 将慢慢从 Node.js 内置包中移除，预计在下一个大版本启动。 29 | 30 | ## 软件设计、实践 31 | 32 | - [The data model behind Notion's flexibility](https://www.notion.so/blog/data-model-behind-notion) 33 |
[Notion](https://www.notion.so/) 是一个新颖的文档服务，它背后的数据模型是如何设计的？ 34 | 35 | - [Migrating Notion's marketing site to Next.js](https://www.notion.so/blog/migrating-notion-marketing-to-next-js) 36 |
Notion 团队迁移 Next.js 的过程分享。 37 | 38 | - [浅谈弹幕的设计](https://mp.weixin.qq.com/s?__biz=MzkxNTIwMzU5OQ==&mid=2247487416&idx=1&sn=e6f3e61bd722803565fda608ab975a31) 39 |
讨论了弹幕的设计：舞台、轨道和弹幕池，以及弹幕的两种实现方式：HTML + CSS、Canvas。 40 | 41 | ## 拓展阅读 42 | 43 | - [github 又出新功能，布局云端 vscode？](https://mp.weixin.qq.com/s/fRdEkLvxNI2cEGbVJ6pxBA) 44 |
近日 Github 新出了一个功能，用户可以通过将 url 中的 「.com 替换为 .dev」 来直接打开在线版的 vscode 编辑器。 45 | 46 | - [技术债四象限理论](https://xie.infoq.cn/article/e2bdb0789216f0c6a132d3812) 47 |
技术债（TechnicalDebt），俗话叫『坑』，即一切不合理的设计或妥协都可以称之为技术债。技术债按照产生的原因，划分为鲁莽的（Reckless）/谨慎的（Prudent） 以及故意的（Deliberate）/无心的（Inadvertent）4个象限。针对技术债的不同原因，探讨了如何避免和解决技术债。 48 | 49 | - [工信部：整治屏蔽网址链接，保障合法网址正常访问](https://finance.sina.com.cn/tech/2021-09-13/doc-iktzqtyt5759010.shtml?utm_source=pocket_mylist) 50 |
对移动 web 影响深远。 51 | 52 | - [What is Web3? The Decentralized Internet of the Future Explained](https://www.freecodecamp.org/news/what-is-web3) 53 |
对 Web 3.0 的展望，看上去目前还很不成熟。 54 | 55 | - [Powers of 10: Time Scales in User Experience](https://www.nngroup.com/articles/powers-of-10-time-scales-in-ux) 56 |
影响用户体验的一些关键时间节点 57 | 58 | ## 开源项目 59 | 60 | - [smartcrop.js](https://github.com/jwagner/smartcrop.js) 61 |
Smartcrop.js 可以智能识别图片中最主要的部分，浏览器和 Node 环境均可运行。 62 | 63 | - [web2img](https://github.com/EtherDream/web2img) 64 |
将网页内容打包成 .png 文件，托管到免费 CDN，之后通过 Service Worker 解析展现。 65 | 66 | 编辑：梅旭光 审阅：胖总、Mr.Q、三水清、希达 67 | -------------------------------------------------------------------------------- /docs/2024-7-11.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.07.11 2 | 3 | ![前端&AI技术双周刊](https://gips0.baidu.com/it/u=1361366237,2029743518&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f900_383) 4 | 5 | ## Node.js 6 | - [Node v22.4.1 (Current) and Others Released](https://nodejs.org/en/blog/release/v22.4.1) 7 |
Node v22.4.1（当前）和其他版本已发布——该版本修复了 Windows早期漏洞的不完整修复，以及与使用数据绕过网络导入限制有关的漏洞 8 | 9 | - [Profiling Node.js Applications](https://betterstack.com/community/guides/scaling-nodejs/profiling-nodejs-applications/) 10 |
如果你正在处理不寻常的性能问题，对你的应用进行性能分析可以确定问题出在哪里。本教程提供了一个示例项目来操作，并以几种不同的方式介绍了性能分析。 11 | 12 | ## CSS 13 | - [使用纯CSS制作HTML详细信息和摘要元素的动画](https://www.youtube.com/watch?utm_source=CSS-Weekly&utm_campaign=Issue-588&utm_medium=web&v=idoaw75xjhU&feature=youtu.be) 14 |
了解如何仅使用 CSS 完全设置 HTML 详细信息/摘要披露小部件的动画，包括摘要标记箭头旋转和高度转换以打开/关闭元素内容。 15 | 16 | - [On Compliance vs Readability: Generating Text Colors With CSS](https://lea.verou.me/blog/2024/contrast-color/?utm_source=CSS-Weekly&utm_campaign=Issue-588&utm_medium=web) 17 |
探讨了能否通过已经广泛应用的CSS特性来模拟即将推出的 CSS contrast-color() 函数？如果可以，涉及的权衡是什么，以及如何最好地平衡它们？ 18 | 19 | - [CSS 和网页界面最新动态](https://developer.chrome.com/blog/new-in-web-ui-io-2024?utm_source=CSS-Weekly&utm_campaign=Issue-588&utm_medium=web&hl=zh-cn) 20 |
Web平台正经历着由创新推动的繁荣时期，其中CSS和Web界面功能的发展尤为突出。当前正处于网页界面的黄金时代，众多全新的CSS功能正迅速在各大浏览器中推出，为创造令人惊叹且引人入胜的网络体验提供了无限可能。本文将深入探讨 CSS 的现状，特别关注一些最具颠覆性的新功能，这些功能正在重新塑造我们构建Web应用的方式，并在 2024 年 Google I/O 大会上得到了展示。 21 | 22 | ## AI 资讯 23 | - [百度发布文心 4.0 Turbo](https://yiyan.baidu.com/) 24 |
速度更快、效果更好，目前文心一言的网页版、APP 陆续上线，供开发者使用的 API 也已上线。欢迎体验~ 25 | 26 | - [OpenAI 发布代码评估模型 CriticGPT](https://mp.weixin.qq.com/s?__biz=MzA3MzI4MjgzMw==&mid=2650923946&idx=1&sn=f87d1558ff6784dc157e0c532c6819a8&scene=21#wechat_redirect) 27 |
随着模型能力变强，模型犯的错误也不是那么明显了，人类训练师已经难以发现不准确之处。人类如果给不出正确的反馈，那 RLHF 也无法产生效果，CriticGPT 正是为了应对这一挑战而生。 28 | 29 | - [Meta最新发布的LLM Compiler，实现77%自动调优效率](https://mp.weixin.qq.com/s?__biz=MzA3MzI4MjgzMw==&mid=2650924032&idx=2&sn=6e49b1bd2d36482b41cfd03e5901932a&scene=21#wechat_redirect) 30 |
LLM Compiler，用来专门优化代码并彻底改变编译器设计。通过在包含 5460 亿个 token 的 LLVM-IR 和汇编代码的庞大语料库上训练模型，使模型能够理解编译器中间表示、汇编语言和优化技术。 31 | 32 | ## 拓展阅读 33 | - [ESLint 的下一步计划](https://eslint.org/blog/2024/07/whats-coming-next-for-eslint/) 34 |
ESLint 正在朝着语言无关转型，提供语言插件来供不同语言使用，这意味着核心库将会被重构，有大量的工作要完成。 35 | 36 | - [How People with Disabilities Use the Web](https://www.w3.org/WAI/people-use-web/) 37 |
介绍了残疾人（包括老年人相关的身体机能障碍者）如何使用网络。它帮助开发者、设计师、内容创作者以及其他人员理解开发无障碍数字化产品的原因和意义，这些产品包括网站、应用程序、浏览器和其他网络工具。 38 | 39 | - [regex 2.1](https://github.com/slevithan/regex) 40 |
regex 2.1 对 JavaScript 正则表达式（regex）支持的增强功能。这项功能不仅支持 ES2024 正则表达式的全部功能，还增加了对自由间距和注释、原子组、正则表达式子程序、上下文感知的 RegExp 实例插值等的支持。 41 | 42 | - [How we tamed Node.js event loop lag: a deepdive](https://trigger.dev/blog/event-loop-lag) 43 |
Node famously uses very few threads yet can handle a large number of clients performantly, as long as the work associated with each client is ‘small.’ When that work isn't 'small', as here, things can go off the rails quickly. 44 | 45 | - [How to Use a Go(lang) Library from JavaScript with WebAssembly](https://javascriptweekly.com/link/157212/web) 46 |
如何将 JavaScript 中的 Go（lang）库与 WebAssembly 结合使用——将 Go 代码编译为 WebAssembly 在浏览器中开辟了一些有趣的可能性。 47 | -------------------------------------------------------------------------------- /docs/2025-2-27.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.02.27 2 | ![image](https://gips0.baidu.com/it/u=124373690,2981039947&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f960_412) 3 | 4 | ## 前端技术 5 | - [Node v23.8.0 ](https://nodejs.org/en/blog/release/v23.8.0) 6 |
Node.js v23.8.0（Current）有多项更新。主要更新包括：在 macOS 和 Windows 上增加 `--use-system-ca` 命令行标志支持系统 CA 证书，实现 `URL Pattern` API 并导出 `URLPattern` 构造函数，支持 zstd 压缩算法并在 `node:zlib` 模块添加相关 API，线程已命名以改善调试体验。其他更新有将时区数据更新至 2025a，sqlite 允许从用户定义函数返回 ArrayBufferViews。 7 | 8 | - [CSS @function + CSS if()](https://www.bram.us/2025/02/18/css-at-function-and-css-if/?utm_source=CSS-Weekly&utm_campaign=Issue-606&utm_medium=web) 9 |
本文介绍 Chrome 浏览器中处于原型开发阶段的 CSS 自定义函数新特性。目前仅在 Chrome Canary 版可用，需启用特定标志测试。新特性支持自定义函数中嵌套容器查询、搭配 CSS if () 灵活性更强。但仍存在无法响应局部自定义css变量值、用容器查询需额外包装元素等限制。 10 | 11 | - [TC39 Advances 3 Proposals to Stage 4](http://socket.dev/blog/tc39-advances-3-proposals-to-stage-4-regexp-escaping-float16array-and-redeclarable-global-eval) 12 |
TC39 将三个提案推进到第 4 阶段，分别是正则表达式转义（RegExp Escaping）、16 位浮点数数组（Float16Array）以及可重新声明的全局 eval 变量（Redeclarable global eval vars）。这意味着这些提案离成为 ECMAScript 标准又近一步。 13 | 14 | ## AI资讯 15 | - [DeepSeek 开源周！](https://github.com/deepseek-ai) 16 |
2月24日，DeepSeek 启动“开源周”!截止至今陆续开源 FlashMLA、DeepEP、DeepGEMM 源码。其中 DeepGEMM 代码极简！核心逻辑仅 300 行，堪比教程级代码设计！ 17 | 18 | - [百度AI搜索已接入满血联网版Deepseek](https://chat.baidu.com/search) 19 |
目前，百度AI搜索已支持R1满血版，一键开启深度思考，快来试试吧！ 20 | 21 | - [Gork3](https://ai-bot.cn/grok-3/) 22 |
Grok3 是埃隆·马斯克旗下 xAl 公司推出的最新一代人工智能模型，模型被马斯克称为"地球上最聪明的人工智能"，推理能力在多项基准测试中超越了包括 ChatGPT 和 DeepSeek 在内的其他顶尖模型。 23 | 24 | - [Gemini Code Assist](https://codeassist.google/products) 25 |
Google 正式推出免费版AI辅助编程助手 Gemini Code Assist，面向个人开发者，对标 GitHub Copilot。免费用户每月可享 18万次代码补全请求（GitHub Copilot免费版仅2000次），每日支持 240 次聊天交互。 26 | 27 | - [Claude 3.7 Sonnet and Claude Code](https://www.anthropic.com/news/claude-3-7-sonnet) 28 |
Anthropic 公司公告介绍 Claude 3.7 Sonnet 和 Claude Code。前者是最智能且首个混合推理模型，兼具普通大语言和推理模型功能；后者是处于有限研究预览阶段的命令行智能编码工具，可协助编码、降低实现成本 29 | 30 | - [WeaveFox](https://mp.weixin.qq.com/s/eHyBlsSdaLMGdQ39IT7Zzw) 31 |
蚂蚁集团推出 AI 前端智能研发平台 WeaveFox，基于百灵多模态大模型，能将设计图自动化生成可执行代码，支持多种应用类型与技术栈，目标是提升开发效率和质量。其功能涵盖设计图智能编译、跨终端全栈覆盖、智能代码优化、设计意图精准还原等。 32 | 33 | ## 拓展阅读 34 | - [Subverting control with weak references](https://jlongster.com/subverting-control-weak-refs) 35 |
弱引用可使对象在无强引用持有时被垃圾回收器回收，与常规引用不同，不阻止回收。JavaScript 有 WeakMap 和 WeakRef 可创建对象弱引用。弱引用可适用于防对象意外保留致内存泄漏，但因行为难以预测，需谨慎使用与对待 36 | 37 | - [Style Observer: A Library to Observe CSS Property Changes](https://lea.verou.me/blog/2025/style-observer/) 38 |
一个用于观察 CSS 属性变化的 JavaScript 库 “style-observer”。该库核心优势是检测已知浏览器漏洞并针对性解决，能在多数支持特定属性的浏览器运行，处理多种浏览器漏洞，支持节流、聚合等功能，经大量测试且配有超 150 个单元测试用例。 39 | 40 | - [Interop 2025: Features Browser Devs Will Focus on This Year](https://webkit.org/blog/16458/announcing-interop-2025/) 41 |
Interop 2025是一项跨浏览器的能力，旨在提高浏览器的互相操作性，达到每种技术在每个浏览器中呈现完全相同的状态。今年的重点内容包括存储访问API、指针/鼠标事件、逐步淘汰旧的突变事件、滚动结束事件、URLPattern和更多的JS/WAM集成。 42 | 43 | - [Popover 现已成为基准版API](https://web.dev/blog/popover-baseline?hl=zh-cn) 44 |
Popover API 自 2025 年 1 月 27 日进入基准阶段。它用于创建 Web 应用弹出式窗口，有内置方法、支持无障碍功能等优势。2024 年 4 月未成为基准是因 iOS 和 iPadOS 轻触关闭功能 bug，存在依赖不合理、数据不足、测试缺失问题。如今 Web 地图项数据基本完成，后续将加强移动设备测试，并公开相关数据。 45 | 46 | -------------------------------------------------------------------------------- /docs/2024-3-15.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.03.15 2 | 3 | ![前端&AI技术双周刊](https://gips3.baidu.com/it/u=4287497496,1596818752&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f900_383) 4 | 5 | ## Node.js 6 | - [Node.js V21.7.0](https://nodejs.org/en/blog/release/v21.7.0) 7 |
Node gains a built-in way to output colored text, load and parse environment variables, and support multi-line values in .env files. 8 | 9 | - [防御 Node.js 中的 SQL 注入攻击](https://snyk.io/blog/preventing-sql-injection-attacks-node-js) 10 |
了解为什么和在哪里 SQL 注入攻击构成威胁，以及一些初始的方法来保护 Node 应用程序免受这些攻击。 11 | 12 | ## 前端技术 13 | - [ECMAScript 2024（ES15）将带来的新特性](https://www.51cto.com/article/781433.html) 14 |
ECMAScript 2024（ES15）即将发布，带来了一系列实用的[新功能](https://github.com/tc39/ecma262/pull/3282)，提升了对数组、缓冲区和字符串的处理能力。这些更新将在 2024 年 6 月正式亮相，为 JavaScript 开发者提供更多便利和效率。 15 | 16 | - [JSR: What We Know So Far About Deno’s New JavaScript Package Registry](https://socket.dev/blog/jsr-new-javascript-package-registry) 17 |
Deno 团队推出的新型 JavaScript 包注册表 JSR，旨在解决 npm 的限制，但 JavaScript 社区担忧生态系统可能因此而分裂。 JSR 拥有多项与 npm 显著不同的技术特点，而且非官方宣布将于 2023 年 SeattleJS Conf 上推出。该注册表强调 TypeScript 优先环境、性能和易用性，以及模块安全性等方面，并获得开发者社区的积极响应。尽管 JSR 提供新的方法，但它也随之带来的生态系统分裂的担忧， 然而，它承诺保持与 npm/Node 的兼容性，以减少可能的负面影响。 18 | 19 | - [TypeScript 5.4](https://devblogs.microsoft.com/typescript/announcing-typescript-5-4/) 20 |
Improved type narrowing, the NoInfer utility type, Object.groupBy, Map.groupBy, and more. 21 | 22 | - [JavaScript开发者必须知道的33个概念](https://github.com/leonardomso/33-js-concepts#-table-of-contents) 23 |
这是一个GitHub项目，提供了JavaScript开发者应该掌握的33个核心概念的清单，从基础的编程原理到JavaScript的高级特性。项目内容包括变量与类型、作用域、闭包、原型继承与链、this关键字、DOM事件、模块化编程等多个方面。项目旨在帮助开发者加深对JavaScript工作原理的理解，并提升编程技能。 24 | 25 | ## CSS 26 | - [使用 :is() 和 :where() 伪类简化您的 CSS](https://www.youtube.com/watch?v=NnaBX6SypR8) 27 |
:is()和:where() CSS伪类的详细指南，准确解释了它们的工作原理、它们之间的区别以及它们如何帮助您简化 CSS 28 | 29 | - [Proposal: CSS Variable Groups](https://lea.verou.me/docs/var-groups/?utm_source=CSS-Weekly&utm_campaign=Issue-581&utm_medium=web) 30 |
CSS 变量组是一种在同一命名空间下定义多个属性并传递整个组的方法，解决了围绕设计令牌、设计系统和集成第三方组件的几个痛点 31 | 32 | ## AI 资讯 33 | - [Lightricks - 推出文生视频平台LTX Studio](https://mp.weixin.qq.com/s/x3mul2goPGPA0YhXLPkNvA) 34 |
LTX Studio通过提供的可视化专业视频控制台，可对镜头切换、角色、场景一致性、摄像机、灯光等进行可视化精准控制，帮助用户进一步优化视频的细节达到商业级视频，并且附带语音解读，而Sora目前生成的视频由神经网络完成，也就是说生成的内容完全由AI决定，用户除了提供文本无法进行任何内容控制。 35 | 36 | - [Stability AI - 发布文生图模型Stable Diffusion 3](https://stability.ai/news/stable-diffusion-3) 37 |
Stability AI发布了Stable Diffusion 3，宣称为其最强大的文本生成图像模型，利用扩散转换器架构大大提高了多主题提示、图像质量和拼写能力的性能。 38 | 39 | ## 拓展阅读 40 | - [京东-亿级高并发春晚互动前端技术揭秘](https://developer.jdcloud.com/article/3639) 41 |
本文揭示了在亿级流量高并发春晚互动中，平台前端团队如何优化静态资源、降低服务器成本、利用工程化提效，保证用户体验和系统稳定性。通过静态资源优化、动画图片低损压缩和自动衍生 WebP 背景图 css 代码等技术手段，有效提升页面加载速度和性能。同时，采取流量削峰、即时状态的本地存储等措施，有效降低服务器压力，应对高并发场景，确保用户权益到账信息即时准确。对于性能优化有一定启发，推荐阅读。 42 | 43 | - [前端视角对Rust的浅析](https://www.51cto.com/article/782330.html) 44 |
文章从 Rust 的历史，前端的使用场景和业界使用案例一步步带你走进 Rust的世界。并且通过一些简单的例子，了解 Rust 如何应用到前端，提高前端的生产效率。 45 | 46 | ## 资源推荐 47 | - [Systeminformation](https://github.com/sebhildebrandt/systeminformation) 48 |
如果您想查询您的 Node 程序运行的环境信息，这个库适合您，它可以获取有关音频设备、蓝牙设备、打印机、USB、CPU、架构、WiFi 等的信息。 49 | 50 | - [Finder 3.2](https://github.com/antonmedv/finder) 51 |
一个小巧的npm包，给定一个元素，可以生成最短且精确选择器，用来选定某个元素 52 | 53 | -------------------------------------------------------------------------------- /docs/2022-6-15.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#24-2022.06.15 2 | 3 | ![前端技术双周刊_17](https://user-images.githubusercontent.com/4032009/173819167-468d3f7b-fb8f-4731-bd54-fff733181913.png) 4 | 5 | ## JavaScript & CSS 6 | - [JSON And The Stringification Oddities In JavaScript](https://www.zhenghao.io/posts/json-oddities) 7 |
总结了`JSON.stringify()`在处理不同数据类型时的怪异行为，你是否深入了解过它呢？ 8 | 9 | - content-visibility 属性介绍及应用2篇：[使用 content-visibility 优化渲染性能](https://mp.weixin.qq.com/s?__biz=Mzg2MDU4MzU3Nw==&mid=2247491664&idx=1&sn=59973401424af67d48bf2e8fb428cdcb)和 [content-visibility 再探究，完美替代 Lazyload？](https://mp.weixin.qq.com/s/bZ6edmEoVXLWloQssiQxRg) 10 |
content-visibility 是一个比较新的属性。和其它新的 CSS 属性一样，功能强大但是浏览器支持程度低。让我们来看看它有哪些应用场景？ 11 | 12 | - [Building a button component](https://web.dev/building-a-button-component) 13 |
实现一个按钮组件，需要考虑哪些方面，来看看有哪些是你没考虑到的 14 | 15 | - [The Best JavaScript & CSS Animation Libraries for UI Designers](https://www.sitepoint.com/our-top-9-animation-libraries/) 16 |
分析了9个最流行的动画库各自的优缺点，帮助你从中做选择 17 | 18 | ## 前端框架 19 | 20 | - [JavaScript Hydration Is a Workaround, Not a Solution](https://thenewstack.io/javascript-hydration-is-a-workaround-not-a-solution/) 21 |
在现代前端框架中，Hydration 一般指的是给 Server 返回的 HTML 添加交互的过程，它是在浏览器中执行的将静态 HTML 页面转为动态页面的技术。但是 Hydration 的过程和服务端渲染有一些重复工作，服务端渲染 HTML 依赖的信息并没有被浏览器充分利用起来。笔者从这个角度出发设计了 [Qwik](https://qwik.builder.io/)，以求更快的 Web 应用加载速度。 22 | 23 | ## 前端工程化 24 | - [Faster JavaScript Builds with Metro](https://medium.com/airbnb-engineering/faster-javascript-builds-with-metro-cfc46d617a1f) 25 |
[Metro](https://facebook.github.io/metro/) 是一款用于 React Native 的 JavaScript 打包工具，Airbnb 用它替代 Webpack 编译 Web 页面。相比 Webpack，使用 Metro 在开发编译环节有80%的速度提升，在生产编译环节有55%的速度提升。Metro 的特色 26 | 27 | ## 拓展阅读 28 | 29 | - [从 0 到 1，探究百亿流量验证下的 MVVM 框架设计](https://mp.weixin.qq.com/s/jJdx51Ym3J-fK0osz_etMw) 30 |
KFive 团队出品[《高性能 MVVM 框架设计与实现——San》](https://item.jd.com/10053513108574.html?cu=true&utm_source=mp.weixin.qq.com&utm_medium=tuiguang&utm_campaign=t_50375_&utm_term=fcde59a007904fdeabf7e0576dad1b07)，为你揭秘支撑百度搜索、Feed、小程序三大业务的 MVVM 框架设计。 31 | ![image](https://user-images.githubusercontent.com/4032009/173819705-7452874f-1188-4515-88a2-7b345aa50902.png) 32 | 33 | - [深入浅出V8里的优化 - Smi 和 HeapNumber](https://mp.weixin.qq.com/s/KZPlV0zuM96Nv01J2LGsmQ) 34 |
从细节入手，讲解 V8内部优化的具体实现 35 | 36 | - [浅谈短链的设计](https://mp.weixin.qq.com/s/KtLbCClA_k54Ew08bp0jSg) 37 | 38 | - [What is Edge Compute?](https://austingil.com/edge-compute-knitted-dog-hats/) 39 |
通俗易懂的边缘计算科普文 40 | 41 | - [What npm Can Learn from Go](https://engineering.hardfin.com/2022/05/npm-mod/) 42 | ![image](https://user-images.githubusercontent.com/4032009/173819614-e6b18e90-eddd-409f-a4b0-fad9f8f88cd1.png) 43 | 44 | - [WebContainers 现在在桌面和 Android 上的 Firefox 中得到支持](https://blog.stackblitz.com/posts/webcontainers-are-now-supported-on-firefox/) 45 | 46 | ## 开源工具 47 | - [pkg.land](https://pkg.land/) 48 |
帮你在 NPM 上快速找到相似功能的包 49 | 50 | - [animate-css-grid](https://github.com/aholachek/animate-css-grid) 51 |
animate-css-grid makes it easy to transition your CSS grid gracefully from one state to another. If the content of the grid changes, or if the grid or one of its children is updated with the addition or removal of a class, the grid will automatically transition to its new configuration. 52 | 53 | -------------------------------------------------------------------------------- /docs/2022-3-9.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#18-2022.03.09 2 | 3 | ![前端技术双周刊_11](https://user-images.githubusercontent.com/4032009/157411825-5bf22ba4-949a-474a-9e17-a61afcfa3edc.png) 4 | 5 | 6 | ## Node.js 7 | - [Node.js v17.6.0](https://github.com/nodejs/node/releases/tag/v17.6.0) 8 |
Node.js 发布了 17.6.0 版本，没有什么特别重大内容。专门提一下是因为本期小编在这个版本中做了一些微小的工作，谢谢大家。 9 | 10 | - [Fastify and Pino with Matteo Collina](https://podrocket.logrocket.com/fastify) 11 |
podrocket 对 Matteo Collina 进行了一个专访，谈到了 Fastify、Pino 以及对 ORM 的一些看法。Matteo Collina 是 Node.js 的 TSC 也是 Fastify 和 Pino 的作者。 12 | 13 | - [Implementing Node.js URL parser in WebAssembly with Rust](https://www.yagiz.co/implementing-node-js-url-parser-in-webassembly-with-rust) 14 |
作者尝试使用 Rust & WebAssembly 来重写 Node.js 中的 URL parser，结果发现相对于本身的性能提升，JavaScript 到 WebAssembly 的字符串转换很耗时。 15 | 16 | ## 浏览器原理 17 | - [深入理解 WKWebView (渲染篇) —— DOM 树的构建](https://mp.weixin.qq.com/s/9FBKMJo0GaGJ1kEhCiNNZA) 18 |
本文讲解了浏览器构建 DOM 树的过程 19 | 20 | ## 拓展阅读 21 | 22 | - [5 things you don't need Javascript for](https://lexoral.com/blog/you-dont-need-js/) 23 |
JavaScript 可以完成很多复杂功能，但是我们经常会过度依赖它，其实目前 HTML 和 CSS 本身已经非常强大了 24 | 25 | - [A new year, a new MDN](https://hacks.mozilla.org/2022/03/a-new-year-a-new-mdn/) 26 |
质量很高的 [MDN](https://developer.mozilla.org/) 进行了新的改版， 感谢他们提供了优质的文档内容，前端开发者都应该优先参考 MDN。 27 | 28 | - [Working together on Interop 2022](https://webkit.org/blog/12288/working-together-on-interop-2022/) 29 |
2022年开始，苹果、Google、微软、Mozilla 等多家公司联合发起了 Interop 2022的项目，旨在15项影响 Web 开发者体验的关键领域提升浏览器的 Interoperability。Interoperability 可以理解为互通性，即所有浏览器在 Web 标准的实现上保持一致。 30 | 31 | - [Taro 在多端浪潮下的选择与挑战](https://mp.weixin.qq.com/s/DOpIIEVymhLwpVLZdRWfmA) 32 |
从 Taro 的技术演进看跨端方案的困境和破局方法 33 | 34 | - [降低前端业务复杂度新视角](https://mp.weixin.qq.com/s/B64LPxzqjN0-r310077h-A) 35 |
使用状态机的思维去解决前端日益复杂的业务逻辑问题，高阶开发必备 36 | 37 | - [HCT, a new color space developed by Google for design](https://material.io/blog/science-of-color-design) 38 |
Google 发布的一套新的色彩体系。与其它色彩体系（RGB/HSL/HSV等）相比，HCT 的渐变过渡更自然、更舒服。目前应用在 Android 12 动态主题 Material You 上，未来可能会被广泛应用。 39 | 40 | - [Made in Ukraine: A List of (Mostly JS) Projects Built by Ukrainian Developers](https://javascriptweekly.com/link/120591/web) 41 |
一份主要由乌克兰开发者贡献的开源项目列表，其中有很多我们熟悉的项目 42 | 43 | - [Psychological safety is critical for high-performing teams](https://stackoverflow.blog/2022/01/27/psychological-safety-is-critical-for-high-performing-teams) 44 |
An introduction to psychological safety and ways to evaluate the level of safety in your organization. 45 | 46 | ## 前端框架 47 | - [Deep dive into vue3's reactivity system](https://medium.com/@daiwei521/in-depth-understanding-of-vue3-reactivity-system-ba81ce94f309) 48 |
Vue.js 团队成员带来的 Vue3 响应式系统介绍 49 | 50 | ## 经验分享 51 | - [11 years at Google](https://www.industrialempathy.com/posts/11-years-at-google/) 52 |
作者离职前做谷歌的 PC 搜索，看作者做的事情，同样是做搜索的同学，可能会有一点熟悉。 53 | 54 | ## 开源项目 55 | - [Socket](https://socket.dev/blog/introducing-socket) 56 |
An interesting new project that scans the code of each npm package in an attempt to characterize their behavior, which is then reported on project specific pages, such as [this one for lodash](https://javascriptweekly.com/link/120598/web) or [this one for zx.](https://javascriptweekly.com/link/120599/web) Early days but some potentially useful info here. 57 | 58 | 编辑：梅旭光 59 | -------------------------------------------------------------------------------- /docs/2021-9-29.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#7-2021.9.29 2 | 3 | ![前端技术双周刊_0](https://user-images.githubusercontent.com/4032009/135245743-d5e6505e-5928-4616-8af5-e4e9dd375cb1.png) 4 | 5 | ## JavaScript 6 | 7 | - [Index Signatures in TypeScript](https://dmitripavlutin.com/typescript-index-signatures/) 8 |
深入讲解了 TypeScript 的 Index signature 类型`{ [key: string]: string }`，并且对比了和`Record`的区别 9 | 10 | - [页面卡死问题分析](https://mp.weixin.qq.com/s?__biz=MzUzMjk2ODM1MA==&mid=2247484682&idx=1&sn=14ab1556c7fd1ec213b5491ffb762c1a) 11 |
记录了因 JavaScript Array 中存放了过多的元素，落入 V8 `Array.prototype.shift()` 实现的性能悬崖，导致打开某业务时卡死问题的完整分析过程。问题定位分析方法和刨根问底的钻研精神值得学习 12 | 13 | - [postTask：React的杀手锏被浏览器原生实现了？](https://mp.weixin.qq.com/s/e7sNE4GNfvzBgZrjoQ32vg) 14 |
`scheduler.postTask` 是 Chrome 实现的优先级调度 API，提前了解一下。这里查看原文 [Building a Faster Web Experience with the postTask Scheduler](https://medium.com/airbnb-engineering/building-a-faster-web-experience-with-the-posttask-scheduler-276b83454e91) 15 | 16 | ## 低代码 17 | 18 | - [Microsoft Power Fx 概述](https://docs.microsoft.com/zh-cn/power-platform/power-fx/overview) 19 |
Microsoft Power Fx 是一门面向低代码场景设计的语言。它是一种强类型、声明性、一般用途的函数式编程语言。Microsoft Power Fx 的创建是为了更好的辅助非专业开发人员，因此这门语言被设计的足够简单，希望这门语言可以同时服务于专业与非专业开发者 20 | 21 | - [设计稿自动生成代码方案的探索](https://mp.weixin.qq.com/s/BKPSR4pU8tDKcKWJnTXJiQ) 22 |
业内主流的代码生成方案有两种，一种是通过深度学习模型训练，从图片或草图直接生成代码；另一种是基于设计工具（如 Sketch、Figma 等）源文件，解析出图层信息转化成 DSL 并生成代码。本文基于第二种思路重点讲了如何把扁平的无规则数据转化为树状的结构化数据进而生成代码的方法 23 | 24 | ## 拓展阅读 25 | 26 | - [Node.js Garbage Collection Explained](https://blog.risingstack.com/node-js-at-scale-node-js-garbage-collection/) 27 |
Node.js 垃圾回收详解 28 | 29 | - [React 框架运行时优化方案的演进](https://mp.weixin.qq.com/s/4Y6DuY5rDohgdCm0MP5WBA) 30 |
本文详尽的介绍了 React 最近几年来从 15~18 几个大版本的底层架构演进，强烈推荐！ 31 | 32 | - [图解 React 源码系列](https://github.com/7kms/react-illustration-series) 33 |
用大量配图的方式, 致力于将 React 原理表述清楚 34 | 35 | - [JavaScript 中的货币计算](https://www.honeybadger.io/blog/currency-money-calculations-in-javascript/) 36 |
介绍了货币计算过程中的注意事项，推荐 npm 上可以用于货币计算的工具包 Dinero.js, Currency.js, 和 Numeral.js 37 | 38 | - [腾讯企鹅辅导 H5 性能极致优化](https://mp.weixin.qq.com/s/zJMM4SF7pc6LZPCsQfWOxw) 39 |
以企鹅辅导的核心项目为例子，详细的讲解如何针对项目进行性能优化，对页面的加载速度、渲染速度进行优化，主要是分析的十分细致 40 | 41 | - [线性代数的几何意义](https://mp.weixin.qq.com/s/bi1gOmUK_GU_1cfiWQPF6Q) 42 |
讲解了线性代数基本运算的几何含义，并通过结合 CSS transform 用法帮助大家理解和学习 43 | 44 | - [研发效能度量的难点和反模式](https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2651089917&idx=2&sn=0860966113fc921ca882f54984a41003) 45 |
"成功大都相似，失败各有不同"。 本文分析了研发效能度量的难点和常见的“反模式" 46 | 47 | - [聊一聊加班严重时要如何自我提升](https://mp.weixin.qq.com/s?__biz=Mzg5NDEyMzA2NQ==&mid=2247485820&idx=1&sn=97c72bcc99b79bd87b701f6b6f919a35) 48 |
加班太多没时间学习是一个伪命题。对于程序员来说，持续的学习能力是很必要的 49 | 50 | ## 开源工具 51 | 52 | - [Sucrase](https://github.com/alangpierce/sucrase) 53 |
又一个 Babel 的替代者，性能甚至优于 swc。但是缺点也比较明显，仅支持现代浏览器和 Node.js 近期版本，这也是它比较快的原因 54 | 55 | - [grex](https://github.com/pemistahl/grex) 56 |
复杂的正则不会写？需要查半天文档一次次调试？或许可以试试 grex，它能够通过输入的测试用例推导出你想要的正则表达式！ 57 | 58 | - [Web to Desktop framework comparison](https://github.com/Elanis/web-to-desktop-framework-comparison) 59 |
它将目前市面上主流的 Web 桌面应用框架进行了对比，包括端的支持程度、构建后包大小、内存占用等方面，帮你快速找到最合适的框架！ 60 | 61 | ## 产品设计 62 | 63 | - [渐进式披露：交互设计领域独有的设计方法论](https://mp.weixin.qq.com/s/m-4VtHRQ9vIpoVmRC5rz1Q) 64 |
一篇关于渐进式披露（Progressive Disclosure）的设计原则介绍 65 | 66 | 编辑：希达 审阅：胖总&Mr.Q&三水清 67 | -------------------------------------------------------------------------------- /docs/2022-3-23.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊-2022.03.23 2 | 3 | ![前端技术双周刊_12](https://user-images.githubusercontent.com/4032009/159634461-0c3edb19-3efa-4ecc-a104-e8cc63af40b4.png) 4 | 5 | ## JavaScript 6 | - [A look at the dialog element's super powers](https://www.stefanjudis.com/blog/a-look-at-the-dialog-elements-super-powers) 7 |
随着三月 [Safari 15.4](https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/)，[Firefox 98](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/98) 的发布，主流浏览器基本都已经支持 dialog 元素，我们可以使用原生方法实现弹窗/模态框功能了。 8 | 9 | - [A Proposal For Type Syntax in JavaScript](https://devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/) 10 |
近期 TypeScript 团队提交了一份提案 [ECMAScript proposal: Types as Comments](https://github.com/giltayar/proposal-types-as-comments)，打算将类型语法引入到 JavaScript 注释中。这意味着浏览器可以直接运行经过 TS 检查的代码，也意味着更好的编辑体验和更快的迭代。目前该提案暂时还未提交给 TC39。 11 | ![image](https://user-images.githubusercontent.com/4032009/159644002-31ae29a0-2644-4768-98b3-83b18d91b3c7.png) 12 | 13 | - [How to test if there is any element outside the viewport with Cypress](https://www.ismaelramos.dev/how-to-test-if-there-is-any-element-outside-the-viewport-with-cypress) 14 |
本文提供的方法结合 E2E 测试框架，可以用于判断不符合预期的页面横向滚动问题，提前暴露风险 15 | 16 | - [Horizontal scrolling nav](https://markdotto.com/2022/03/10/horizontal-scrolling-nav) 17 |
纯原生实现的导航丝滑滚动和切换效果 18 | 19 | - [TypeScript 类型系统](https://mp.weixin.qq.com/s/b7IlmNuuseoUwcaNlWyKhQ) 20 |
对类型编程中分布式条件类型的讲解和应用 21 | 22 | ## 端智能 23 | - [KFive专栏 | paddlejs 系列：如何快速 get 一个冰墩墩头套？](https://mp.weixin.qq.com/s/wvX9f-AshaLZZggHaRTZPQ) 24 |
手把手教学，借助 paddlejs 的强大 AI 能力快速开发一款冰墩墩头套生成器 25 | 26 | ## 低代码 27 | - [网易云音乐低代码体系建设思考与实践](https://juejin.cn/post/7074842507028856846) 28 |
网易云音乐『探戈低代码』项目的特点：基于源代码的可视化搭建能力，与前端框架无关，支持 LowCode & ProCode 双模式在线开发能力；与既有研发设施无缝集成，提供一键应用创建和发布部署能力；提供对接契约联调和模型驱动的能力。 29 | 30 | ## 拓展阅读 31 | - [视频智能取色——营造氛围感利器](https://mp.weixin.qq.com/s/K5Htv1yCZzWEFzy490HtLA) 32 |
在页面设计中，如果可以加大色彩的运用比例，就可以给人更加沉浸的感受。百度搜索一直在探索更加智能、高效的方法给用户打造更具有氛围感的内容消费体验，视频智能取色就是这方面探索的成果之一，让我们看看它是如何实现的？ 33 | 34 | - [速度是 macOS 的两倍？首个支持 M1 Mac 的 Linux 发行版终于出现！](https://mp.weixin.qq.com/s/CfyCL_H3Qlc-uF8rNlzlKQ) 35 |
2020 年 11 月，苹果自研芯片 M1 的推出令业界轰动。彼时，M1 芯片强大的性能令许多 Linux 爱好者期待 36 | 37 | - [以反战为名，百万周下载量 node-ipc 包作者进行供应链投毒](https://mp.weixin.qq.com/s/SrrXgKlOBq7m5GftLnpVdg) 38 |
这一事件再次显示了 Node.js 生态的脆弱，开源软件供应链安全是一个日益严峻的话题，如果说 log4j 还能看做难以避免的工程误差，而这件事显然已经存在违法嫌疑了。 39 | 40 | - [Figma 封停大疆等中国公司账号，国内有替代吗](https://zhuanlan.zhihu.com/p/480509007) 41 |
如果不是 Figma 搞这么一出，大家也不会关注到 Figma 在国内的竞争对手 42 | 43 | ## 开源项目 44 | 45 | - [Pico.css](https://zhuanlan.zhihu.com/p/483655385) 46 |
[Pico.css](https://picocss.com/) 是一个简单轻量化的 CSS UI 框架，最大的特点是样式都基于 HTML 原始的标签名和内置的属性来定义样式，少用甚至是不用 class。优点是写出来的代码语义清晰，可维护性强，能够快速的应用于个人项目或者小型项目；缺点也很明显，不能处理复杂样式场景。 47 | 48 | - [CSS Checker](https://github.com/ruilisi/css-checker) 49 |
`css-checker`会检查您的 css 样式是否有重复，并找到具有高度相似性的 css classes 之间的差异。它可以避免文件之间出现冗余或类似的 css，并适用于本地开发和 CI 等自动化。默认情况下它还支持颜色检查、长脚本以及未使用的 CSS classes 的警告。 50 | 51 | - [XRender](https://mp.weixin.qq.com/s/zA413rOHJMBahTQ7CmQODA) 52 |
XRender 是由阿里飞猪内部孵化出的开源产品，是一套基于 React.js 框架的，轻量、易用、易上手的中后台「表单 / 表格 / 图表」解决方案。基于协议驱动的方式和 [amis](https://aisuda.bce.baidu.com/amis/zh-CN/docs/index) 很像。 53 | 54 | - [faker 6.0发布](https://github.com/faker-js/faker/releases/tag/v6.0.0) 55 |
早先 faker 的作者由于不满白嫖发泄情绪，清空了 faker 的源代码，在 colors 项目中故意引入了无限循环，并表示不再免费维护。这两个项目有着巨大的下载量，在社区产生了广泛影响。之后社区接管了这个项目，近日发布了6.0大版本。 56 | 57 | 编辑：希达 58 | -------------------------------------------------------------------------------- /docs/2025-3-28.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.03.28 2 | 3 | ![](https://gips0.baidu.com/it/u=2775176415,3916409328&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f960_412) 4 | 5 | ## 前端技术 6 | - [Node.js TSC Votes to Stop Distributing Corepack](https://jsdev.space/inheritance-js/) 7 |
Node.js 技术指导委员会（TSC）投票决定停止分发 Corepack。Corepack 于 Node.js 16.9.0 版本作为实验性工具引入，旨在弥合不同包管理器间差距。用户借此可通过 Node.js 直接安装和管理如 Yarn、pnpm 等包管理器，无需单独安装，方便项目强制使用特定包管理器版本。如今 TSC 的这一决定，将对相关开发流程产生一定影响，开发者需关注后续变化。 8 | 9 | - [A Deep Dive into the Inline Background Overlap Problem](https://frontendmasters.com/blog/overlapping-inline-backgrounds/) 10 |
如果你想在一些内联文本后面添加一个带内边距的半透明背景，你可能会遇到重叠问题。文章围绕网页中实现半透明背景且避免重叠问题展开，深入探讨内联背景重叠问题，详细介绍多种解决方案及其应用场景、优缺点，有助于前端开发者关注并处理此类视觉效果上的细节问题，提升页面设计质量。 11 | 12 | - [7 Powerful JavaScript Inheritance Techniques](https://jsdev.space/inheritance-js/) 13 |
JavaScript 提供了多种继承模式，包括原型链继承、构造函数继承、组合继承、寄生继承、原型式继承、寄生组合式继承以及 ES6 的类继承。详细阐述每种继承方式的代码示例、优缺点。每种方法都有其独特的优势和局限性，开发者能依项目需求选择合适方式，创建更结构化、易维护的 JavaScript 代码。 14 | 15 | - [Announcing Rsdoctor 1.0](https://rsdoctor.dev/zh/blog/release/release-note-1_0) 16 |
Rsdoctor 1.0 正式发布，它是一个一站式的智能构建分析器，能更轻松地识别性能瓶颈并优化性能。它专为 Rspack 生态系统打造，兼容 webpack。如果你曾疑惑为什么你的构建时间过长，这个工具很适合你。 17 | 18 | 19 | ## AI 资讯 20 | - [文心大模型 4.5 和文心大模型 X1 正式发布](https://yiyan.baidu.com) 21 |
3 月 16 日，文心大模型 4.5 和文心大模型 X1 正式发布。文心大模型 4.5 是百度自主研发的新一代原生多模态基础大模型，通过多个模态联合建模实现协同优化，多模态理解能力优秀；具备更精进的语言能力，理解、生成、逻辑、记忆能力全面提升，去幻觉、逻辑推理、代码能力显著提升。文心大模型 X1 具备更强的理解、规划、反思、进化能力，并支持多模态，是首个自主运用工具的深度思考模型。作为能力更全面的深度思考模型，文心大模型X1兼备准确、创意和文采，在中文知识问答、文学创作、文稿写作、日常对话、逻辑推理、复杂计算及工具调用等方面表现尤为出色。目前，两款模型已在文心一言官网上线，免费向用户开放。 22 | 23 | - [百度全量上线生成式应用开发平台「秒哒」](https://cloud.baidu.com/product-s/miaoda_home) 24 |
3 月 24 日百度 AI Day 上宣布，生成式应用开发平台「秒哒」全量上线。它旨在实现 “代码平权” 与 “技术平权”，让无代码编程成为可能。平台具有无代码编程、多智能体协作、多工具调用等优势，用户用自然语言描述需求即可开发应用，最快 3 分钟出成果、1 小时完成迭代。内置多个智能体如策划、小编、设计师、程序员智能体等协作开发，还能调用多种工具和服务。适合中小企业等开发者，前往官网即可体验。 25 | 26 | - [GPT-4o 多模态生图正式上线](https://openai.com/index/introducing-4o-image-generation/) 27 |
OpenAI 推出原生图像生成功能。该功能基于图像与文本联合分布训练，能力提升显著。在文本渲染上，能精准融合文字与图像；多轮生成可在对话中优化图像；指令遵循性强，还具备上下文学习能力，可借助用户上传图像生成新内容。生成图像风格多样、逼真，但存在裁剪、幻觉等局限。目前部分用户可使用，开发者未来也可通过 API 使用，让图像创建和定制更简便。 28 | 29 | - [谷歌上线推理模型 Gemini 2.5 Pro](https://blog.google/technology/google-deepmind/gemini-model-thinking-updates-march-2025/) 30 |
谷歌推出 Gemini 2.5，谷歌 CEO 甚至用：「这是谷歌有史以来最智能的 AI 模型」为它站台。它是思考型模型，能在回应前推理思考，提升性能与准确性。该模型在众多基准测试中表现出色，在 LMArena 排名第一。此外，它延续 Gemini 原生多模态和长上下文窗口优势，现部分用户可在 Google AI Studio 使用，Vertex AI 也即将支持。 31 | 32 | - [DeepSeek V3 深夜低调升级，代码进化令人震惊，网友实测可媲美 Claude 3.5/3.7 Sonnet](https://huggingface.co/deepseek-ai/DeepSeek-V3-0324/tree/main) 33 |
DeepSeek V3 升级到「DeepSeek-V3-0324」版本。目前，新版本在 Hugging Face 上可以下载并部署。虽未公布详细模型卡，但支持更宽松的 MIT 开源协议。网友测试发现，它在数学推理和前端开发方面表现出色，优于 Claude 3.5 和 Claude 3.7 Sonnet，能轻松创建漂亮的 HTML5、CSS 和前端代码，编写代码流畅，生成网站布局完美。此外，它在思维链推理方面有进步，与 OpenAI o1-pro 相比性价比高，前端代码能力较上代显著增强。 34 | 35 | - [阿里深夜开源 Qwen2.5-Omni，7B参数完成看、听、说、写](https://qwenlm.github.io/blog/qwen2.5-omni/) 36 |
3 月 27 日凌晨，阿里通义千问团队发布 Qwen2.5-Omni。Qwen 模型家族中新一代端到端多模态旗舰模型。该模型专为全方位多模态感知设计，能够无缝处理文本、图像、音频和视频等多种输入形式，并通过实时流式响应同时生成文本与自然语音合成输出。 37 | 38 | ## 拓展阅读 39 | - [Cool native HTML elements you should already be using](https://harrisonbroadbent.com/blog/cool-native-html-elements/) 40 |
即使是经验丰富的开发者，也可能会对多年来添加到 HTML 中的所有新特性感到眼花缭乱。本文介绍了许多使用频率较低的元素，帮助你弥补这方面的知识盲点。 41 | 42 | - [2025 年第一季度 Chrome 的新特性](https://developer.chrome.com/blog/new-in-chrome-video-q1-2025?hl=en) 43 |
对 Chrome 近期的更改和新增功能的总结，包括多项新特性、基线更新以及 2025 年 Interop 项目回归的消息。 44 | 45 | -------------------------------------------------------------------------------- /docs/2021-7-21.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊-2021.7.21 2 | 3 | ![前端技术双周刊_1](https://user-images.githubusercontent.com/4032009/126340953-a0299962-2d24-4903-b0e1-2bed3ecf6f7d.png) 4 | 5 | ## JavaScript 6 | 7 | - [Sparkplug — a non-optimizing JavaScript compiler](https://v8.dev/blog/sparkplug) 8 |
V8 has a new super-fast non-optimising compiler, which improves V8 performance on real-world benchmarks by 5–15%. 9 | 10 | - [如何实现一个零延迟的定时器？](https://zhuanlan.zhihu.com/p/379637806) 11 |
很多人都知道，setTimeout是有最小延迟时间的，根据 MDN 文档 setTimeout 实际延时比设定值更久的原因：最小延迟时间中所说：在浏览器中，setTimeout()/setInterval() 的每调用一次定时器的最小间隔是 4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度）。 12 | 13 | - [一起学规范系列 —— Object.keys() 的顺序是如何定义的？](https://zhuanlan.zhihu.com/p/389201653) 14 |
Object.keys() 是一个我们在写代码时非常常用的获取对象属性键值对中的键列表的方法，于此同时我们会发现它返回的键数组顺序和我们申明的属性不一致。本文将基于最新的 ECMAScript® 2022 Language Specification 来看看 Object.keys() 返回的属性值顺序究竟是如何定义的。 15 | 16 | - [深入理解 TypeScript 高级用法](https://zhuanlan.zhihu.com/p/136254808) 17 |
初用 TypeScript 开发的同学一定有这样的困扰：代码代码提示并不智能，似乎只能显式的定义类型，才能有代码提示，无法理解这样的编程语言居然有这么多人趋之若鹜；各种各样的类型报错苦不堪言，本以为听信网上说 TypeScript 可以提高代码可维护性，结果却发现徒增了不少开发负担；显式地定义所有的类型似乎能应付大部分常见，但遇到有些复杂的情况却发现无能为力，只能含恨写下若干的 as any 默默等待代码 review 时的公开处刑；项目急时间紧却发现 TypeScript 成了首要难题，思索片刻决定投靠的 Anyscript，快速开发业务逻辑，待到春暖花开时再回来补充类型。双倍的工作量，双倍的快乐只有自己才懂。为了避免以上悲剧的发生或者重演，我们只有在对它有更加深刻的理解之后，才能在开发时游刃有余、在撸码时纵横捭阖。 18 | 19 | ## Node.js 20 | 21 | - [2021年最值得了解的 Node.js 工具](https://mp.weixin.qq.com/s/DGzPPSyBfhn8xL72fPc3bw) 22 |
文章的灵感来源于，社群中某大佬分享一个自己耗时数月维护的github项目 awesome-nodejs 。或许你跟我一样会有一个疑惑，github上其实已经有个同类型的awesome-nodejs库且还高达41k⭐，重新维护一个新的意义何在？当你深入对比后，本质上还是有差别的，一个是分类体系粒度更细，其次是对中文更友好的翻译维护，也包括了对国内一些优秀的开源库的收录。最后我个人认为通过自己梳理，也能更好地做复盘和总结。 23 | 24 | - [用 Rust 和 N-API 开发高性能 Node.js 扩展](https://zhuanlan.zhihu.com/p/234914336) 25 |
N-API 也发布一段时间了，社区中有很多 Native addon 也慢慢迁移到了 N-API，比如 bcrypt , sse4_crc32 等。N-API 弥补了之前 nan 最痛的跨 V8 版本 ABI 不兼容的问题。但即使是迁移到了 N-API，编写 native addon 也有一些编写代码之外的痛点。用 Rust 替代 C/C++ 看起来是一个很美好的选择，Rust 有现代化的包管理器: Cargo ，经过这么多年的发展在生态上尤其是与 NodeJS 重叠的服务端开发 、跨平台 CLI 工具、跨平台 GUI (electron) 等领域有了非常多的沉淀。比起 C/C++ 生态，Rust 生态的包属于只要有，都可以直接用的状态，而 C/C++ 生态中的第三方代码则属于肯定有，但不一定能直接用的状态。这种状态下，用 Rust 开发 Node addon 少了很多选择，也少了很多选择的烦恼。 26 | 27 | ## 工程化 28 | 29 | - [swc 很好，也还不够好](https://zhuanlan.zhihu.com/p/386730674) 30 |
这是一篇总结性文章，先抛出结论：swc 暂时还无法在生产环境使用，swc 很好，也还不够好。 31 | 32 | ## 拓展阅读 33 | 34 | - [GMTC（全球大前端技术大会）内容和资料](https://gmtc.infoq.cn/2021/beijing/schedule) 35 | 36 | - [十年磨一剑，WebAssembly是如何诞生的？](https://mp.weixin.qq.com/s/pl6dsF-D6Q5tBKtG9jn8lQ) 37 |
创造一个编程语言最好的时间是10年前，其次是现在。从 Emscripten 到 asm.js 再到 WebAssembly，从一个业余项目到 W3C 标准，差不多是整整10年。 38 | 39 | - [深入理解 WKWebView（基础篇）—— 聊聊 cookie 管理那些事](https://mp.weixin.qq.com/s/jZP2DsAa5OV91wdNMw39cA) 40 |
cookie 技术的便捷性使得它在多种场景中被广泛使用，有时候甚至存在滥用情况，对同一 cookie 实例，前端、客户端、服务端都可以轻易的进行增删改查，我们在享受其便捷性的同时，也有必要确保其被正确、可控的使用。本文将在前系列文章的基础上，继续深入 WKWebView 源码，聊聊 cookie 管理那些事，希望给大家带来一些新的视角和认知，揭开 cookie 管理的迷雾。 41 | 42 | - [前端机器学习简史](https://mp.weixin.qq.com/s/kNBMlewGVo2DOPaqgPBCug) 43 |
提到前端智能化，就不得不说机器学习，因为这所谓的前端“革命”就是由机器学习/深度学习发起的，在一开始，机器学习作为人工智能的一门分支学科发展而来，主要研究的便是如何让机器具备像人类一样的学习能力。但渐渐地，机器学习从人工智能领域慢慢向基础领域拓展，由所谓的应用科学慢慢地变为向互联网一样的基础设施，然而真正的前端智能化并未如前面所说的那样简单。 44 |
> 编者注：机器学习、简史、革命，作者用词儿都很『大』，实则是一篇 pipcook 软文，不过用作学习了解也还是能有所收获。 45 | 46 | - [100亿美金设计工具独角兽Figma，国产化的模仿者们如火如荼](https://zhuanlan.zhihu.com/p/390271059) 47 |
这篇文章不会讲太多 Figma 的特性，而是从 Web 前端和设计工具的发展去讨论。从技术难度来说，做类似 Figma 这样的产品，要比做 Canva 这类产品难的多，举个不太恰当的例子，就好比开发 Photoshop 和美图秀秀的难度区别。而国内做类似 Figma 的产品，大概是2018年开始的。开发周期基本上也要1年-2年的时间，产品也都集中在2020年之后上线。 48 |
> 编者注：这篇文章介绍了 Figma 的发展历史以及国内4款模仿者的基本情况，并在最后给出了自己对于国内设计工具方向的预测和判断。 49 | 50 | 希达&旭光编，胖总&穆老板审 51 | -------------------------------------------------------------------------------- /docs/2025-4-27.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.04.27 2 | ![image](https://gips1.baidu.com/it/u=666110168,803816795&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f960_412) 3 | 4 | ## 前端技术 5 | - [Node v20.19.1 (LTS)](https://nodejs.org/en/blog/release/v20.19.1) 6 |
Node.js v20.19.1（LTS）版本发布情况。此次更新涉及多项内容，如升级依赖，包括将 undici 更新到 6.21.2、c-ares 更新到 v1.34.5；恢复 dns 查询缓存的 TTL；修正文档中 require (esm) 警告状态；更新测试用例以支持 OpenSSL 3.5；更新工具以适应 GH 缓存变化等。同时，还提供了不同系统的安装包、二进制文件及源代码的下载链接，以及各文件的 SHASUMS 信息，方便开发者获取和验证。 7 | 8 | - [React Labs: View Transitions, Activity, and more](https://react.dev/blog/2025/04/23/react-labs-view-transitions-activity-and-more) 9 |
介绍了 React Labs 的相关内容，提到 React 编译器能自动推断依赖并插入，借助 IDE 扩展和 useEffectEvent 等特性，通过 CodeLens 展示编译器插入内容，方便调试和优化，有助于开发者形成编写 Effects 的正确思维模式，使组件或钩子状态与其他事物同步，为 React 开发带来更多便利与优化方式。 10 | 11 | - [The ECMAScript Records and Tuples Proposal Has Been Withdrawn](https://github.com/tc39/proposal-record-tuple/issues/394) 12 |
历经数年打造的 ECMAScript Records 与 Tuples 提案，原本要为 JavaScript 带来两种新的深度不可变数据结构。然而在本周的 TC39 会议上，大家达成共识将其撤回。该提案的撤销意味着 JavaScript 在这方面的发展方向出现变化，可能会对相关开发人员和依赖这些特性的项目产生影响。 13 | 14 | - [document.designMode, Baseline & Polyfills, Style Observer](https://www.youtube.com/watch?v=J6M_yP4BGTg) 15 |
了解document.designMode的工作原理，改进您对浏览器支持和polyfills的思考，学习如何使用Style Observer库观察CSS属性更改 16 | 17 | ## AI资讯 18 | - [昆仑万维 SkyReels 团队发布并开源 SkyReels-V2](https://mp.weixin.qq.com/s/xfgWnSBZYnI-TurjqNeUrw) 19 |
昆仑万维 SkyReels 团队发布并开源 SkyReels-V2，这是全球首个用扩散强迫框架的无限时长电影生成模型。文章先指出当前视频生成技术面临的痛点，接着介绍 SkyReels-V2 的核心创新技术，如视频理解模型 SkyCaptioner-V1 等。在评估中其性能卓越，在多维度表现出色 20 | 21 | - [OpenAI发布GPT-4.1](https://openai.com/index/gpt-4-1/) 22 |
该系列包含了三个模型，分别是 GPT-4.1、GPT-4.1 mini 和 GPT-4.1 nano，它们仅通过 API 调用，并已向所有开发者开放。它们还拥有更大的上下文窗口 —— 支持高达 100 万个上下文 token，并且能够通过改进的长上下文理解更好地利用这些上下文。知识截止日期已更新至 2024 年 6 月。 23 | 24 | - [OpenAI发布o4-mini和满血版o3](https://openai.com/index/introducing-o3-and-o4-mini/) 25 |
OpenAI 发布 o3 和 o4-mini，前者为高性能推理模型，支持复杂任务（如编程、科学、视觉分析）以及图像融入思维链，可解析模糊草图并动态调整图像，后者为轻量级模型，优化成本与速度。 26 | 27 | - [Gemini 2.5 Pro vs. Claude 3.7 Sonnet: Coding Comparison](https://composio.dev/blog/gemini-2-5-pro-vs-claude-3-7-sonnet-coding-comparison/) 28 |
作者对 Gemini 2.5 Pro 和 Claude 3.7 Sonnet 进行编码能力对比。介绍了 Gemini 2.5 Pro 相关信息，如拥有 100 万（即将到 200 万）的上下文窗口，编码准确率约 63.8% 。通过飞行模拟器、魔方求解器等 4 项编码测试对比。结果显示，在多数测试中 Gemini 2.5 Pro 表现出色，一次生成正确代码；Claude 3.7 Sonnet 在部分测试中有问题，不过在 LeetCode 问题上代码更简单。 29 | 30 | - [GPT-image-1](https://openai.com) 31 |
OpenAI发布了全新图像模型GPT-image-1，已经通过API向全球开发者开放使用。GPT-image-1与ChatGPT版本有很大不同，可以控制生成图像的敏感度、生成效率、背景、输出格式、渲染质量、压缩质量等 32 | 33 | ## 拓展阅读 34 | - [Minimal CSS-only blurry image placeholders](https://leanrada.com/notes/css-only-lqip/?utm_source=CSS-Weekly&utm_campaign=Issue-610&utm_medium=web) 35 |
本文介绍一种仅用 CSS 创建模糊图像占位符（LQIPs）的技术。先对比多种 LQIP 实现方式的优劣，接着阐述新方法，将图像信息编码为单个 CSS 整数值，用位运算在 CSS 中解码 36 | 37 | - [Time Travel with JavaScript](https://craftofui.substack.com/p/time-travel-with-javascript) 38 |
介绍用 JavaScript 实现如 Vestaboard 风格的 3D 翻页显示效果。先阐述创建单页的 HTML 结构、样式设置，包括用 clip-path 裁剪形状、设置元素旋转和亮度变化。接着引入 GSAP 进行动画控制，实现字符循环切换，并利用其强大 API 控制动画时间，还提及用 WAAPI 实现无依赖版本的思路与代码示例 39 | 40 | - [A flowing WebGL gradient, deconstructed](https://alexharri.com/blog/webgl-gradients) 41 |
本文详细拆解了如何使用 WebGL 着色器创建流动渐变效果。从基础的颜色与位置关系开始，逐步介绍了线性渐变、振荡渐变、添加运动等内容。接着深入讲解 WebGL 和 GLSL 相关知识，以及如何编写片段着色器。还探讨了绘制曲线、生成动画波、添加模糊效果等实现细节，包括使用噪声函数、调整参数等。最后将各个部分组合起来，实现了一个美观、流畅且富有动态感的 WebGL 渐变效果，为读者提供了全面的 WebGL shader 编程实践指导 42 | 43 | - [webstorm-2025-1](https://blog.jetbrains.com/webstorm/2025/04/webstorm-2025-1/) 44 |
WebStorm 2025.1–JetBrains的JavaScript集成开发环境（IDE），新增了大型AI、Angular、monorepo和Next.js增强功能 45 | 46 | -------------------------------------------------------------------------------- /docs/2024-12-20.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2024.12.20 2 | ![](https://gips1.baidu.com/it/u=959809995,766374565&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f960_412) 3 | 4 | ## 前端技术 5 | - [Node v22.12.0 (LTS)](https://nodejs.org/en/blog/release/v22.12.0) 6 |
Node.js v22.12.0（LTS）版本发布，值得注意的是，这是第一个默认启用 require(esm) 的 Node LTS 版本。require(esm) 默认启用使 Node.js 在处理 ES 模块时行为发生变化，不再因 require() 加载 ES 模块抛出 ERR_REQUIRE_ESM，但加载含顶级 await 的 ES 模块或其依赖时可能抛出 ERR_REQUIRE_ASYNC_MODULE，可通过 process.features.require_module 和 "module-sync" 检测其支持情况，不过该特性仍在实验阶段，用户反馈有助于进一步完善。 7 | 8 | - [WebKit Features in Safari 18.2](https://webkit.org/blog/16301/webkit-features-in-safari-18-2/) 9 |
Apple 发布了 Safari 18.2。Safari 18.2 基于 WebKit 带来 61 项新特性与 111 个问题修复，涵盖 CSS、空间视频与照片、WebXR、Genmoji、媒体、HTML、WebAssembly、Web API、JavaScript、安全隐私、Web Inspector、WebDriver、WKWebView 等众多方面，提升了浏览器功能、性能、安全性与用户体验，适用于多种苹果设备操作系统。 10 | 11 | - [How To Fix Largest Contentful Paint For Background Images](https://www.debugbear.com/blog/largest-contentful-paint-background-images?utm_source=CSS-Weekly&utm_campaign=Issue-601&utm_medium=web) 12 |
最大内容绘制（LCP）可能受多种元素影响，其中背景图片（通过 CSS 设置）若未优化，可能因请求链的差异导致渲染延迟，进而影响核心网页指标。本文通过对比 HTML 中 img 标签与 CSS 背景图片在请求链上的差异，解释 CSS 背景图片导致渲染延迟的机制，并给出优化背景图片的策略。 13 | 14 | - [Pure CSS Halftone Effect in 3 Declarations](https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/) 15 |
3 行 CSS 代码实现半色调效果。可通过一个 div 元素及三个 CSS 属性达成，包括 background、background-blend-mode: multiply 和 filter: contrast()，并阐述了其原理及相关注意事项。 16 | 17 | - [A Layered Approach to Speculation Rules](https://csswizardry.com/2024/12/a-layered-approach-to-speculation-rules/) 18 |
推测规则（Speculation Rules）API 提供了 prefetch 和 prerender 两种推测加载类型，可提前支付下一页的 TTFB、FCP 和 LCP 成本，提升页面加载性能。本文介绍了推测规则 API 在实际网站优化中的应用，提供了从简单到复杂的多种应用策略，对于前端开发者理解和运用该 API 进行性能优化具有很高的参考价值。展示了如何根据不同网站特点（如流量大小、后端复杂度等）灵活调整推测规则的使用方式，有助于开发者在不同项目场景中制定合适的优化方案。 19 | 20 | - [Working with JavaScript's Scheduler API](https://www.trevorlasn.com/blog/javascript-scheduler-api) 21 |
文章全面且深入地介绍了 JavaScript Scheduler API 这一较新且重要的特性，涵盖其功能、使用方法、优先级机制、动态变化、中止任务以及浏览器支持等方面。该 API 通过 yield() 和 postTask() 方法实现对任务执行的控制，支持三种优先级（user-blocking、user-visible、background），可确保关键任务优先执行，同时支持任务优先级动态变化和任务中止功能，为管理 Web 应用中的任务优先级提供了标准化方法。 22 | 23 | ## AI 资讯 24 | - [ChatGPT Search 向所有用户免费开放](https://openai.com/index/introducing-chatgpt-search/) 25 |
OpenAI 对 ChatGPT Search 进行了优化，包括提升搜索速度（尤其是移动端）、新增地图体验、支持语音查询搜索（激活高级语音模式后），且已面向全球登录的免费用户开放，周活跃用户数超 2 亿，可能对谷歌搜索地位产生冲击。 26 | 27 | - [字节推出豆包视觉推理大模型，价格低至 0.003 元/千token](https://www.volcengine.com/live/event/force-2412) 28 |
在 12 月 18 日举办的火山引擎 Force 大会上，字节跳动正式发布豆包视觉理解大模型，该模型通过结合文本和图像信息，展现出卓越的内容识别和推理能力。千 token 输入价格仅为 3 厘，一元就可处理 284 张 720P 的图片。 29 | 30 | - [Genesis: A Generative and Universal Physics Engine for Robotics and Beyond](https://genesis-embodied-ai.github.io/) 31 |
这是生成式大模型的时代——它们能生成文本、图像、音频、视频、3D 对象…… 而如果将所有这些组合到一起，我们可能会得到一个世界！Genesis 生成式物理引擎可以生成 4D 动态世界，代表了生成式物理引擎领域的先进水平，融合了多项前沿技术，如物理模拟、人工智能、数据生成等，为机器人、具身 AI 等领域带来新的发展契机。 32 | 33 | - [Using Transformers.js for AI in the Browser](https://www.raymondcamden.com/2024/12/03/using-transformersjs-for-ai-in-the-browser) 34 |
文章详细介绍了如何使用 Transformers.js 在浏览器中进行 AI 开发，开发者可以通过 “pipeline” API 能轻松实现多种任务，如文本情感分析和图像对象检测等。文章包括代码示例和实际应用场景，对于想要在前端集成 AI 功能的开发者具有很强的指导意义。 35 | 36 | ## 拓展阅读 37 | - [CSS Wrapped 2024](https://chrome.dev/css-wrapped-2024/) 38 |
2024 年是 CSS 发展的又一重要年份，Chrome 在这一年为 CSS 带来诸多新特性和改进，涵盖组件、交互、开发者体验等方面，增强了网页的功能性、交互性和开发便利性，推动了 Web 平台发展。全面了解这些新特性有助于在项目中创建更具吸引力和功能性的用户界面。 39 | 40 | - [Kinesis.js](https://kinesisjs.com/) 41 |
Kinesis.js 是一套用于轻松创建动态交互动画的组件库，提供了多种功能和组件来实现复杂的动画效果，旨在提升用户界面（UI）的动态性和交互性。 42 | 43 | -------------------------------------------------------------------------------- /docs/2021-8-4.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊-2021.8.4 2 | 3 | ![前端技术双周刊_2](https://user-images.githubusercontent.com/4032009/128128161-9d64c73e-b421-476f-9305-254e3d86371c.png) 4 | 5 | ## JavaScript 6 | 7 | - [精读《默认、命名导出的区别》](https://zhuanlan.zhihu.com/p/395367954) 8 |
从代码可维护性角度出发，命名导出比默认导出更好，因为它减少了因引用产生重命名情况的发生。但命名导出与默认导出的区别不止如此，在逻辑上也有很大差异，为了减少开发时在这方面栽跟头，有必要提前了解它们的区别。本周找来了这方面很好的的文章：[export-default-thing-vs-thing-as-default](https://jakearchibald.com/2021/export-default-thing-vs-thing-as-default/)，先描述梗概，再谈谈我的理解。 9 | 10 | - [看懂复杂的 TypeScript 泛型运算](https://mp.weixin.qq.com/s/axfKKGHfxy3gZbKYEFjnkQ) 11 |
当尝试阅读一些用 TypeScript 开发的库的源码时，可能会被各种尖括号包裹的复杂泛型运算搞的晕头转向。本文的目的在于对泛型中的常见关键词和用法进行介绍，并且尝试用一定数量的例子来方便理解泛型。 12 | 13 | - [Optimizing JavaScript Standard Library Functions in JSC](https://webkit.org/blog/11934/optimizing-javascript-standard-library-functions-in-jsc/) 14 |
拿 Function.prototype.toString() 举例说明在 JavaScriptCore 中如何优化标准库函数。 15 | 16 | ## CSS 17 | 18 | - [CSS 进阶之熟悉又陌生的 content](https://juejin.cn/post/6989017411261300750) 19 |
在开发中遇到类似清除浮动、小图标、替换内容等场景时不可避免会遇到 content 属性，一般就是网上找下解决方案，甚少细究到底，在看《CSS 世界》这本书时看了下 content 章节，今天这里就详细介绍下 content 的使用机制。 20 | 21 | - [Compat 2021 mid-year update: Flex gap everywhere](https://web.dev/compat2021-midyear/) 22 |
Chrome 在2021年3月联合其它浏览器厂商启动了一项叫 Compat2021 的计划，旨在消除 Web 开发的五大兼容性问题，它们分别是 CSS flexbox，CSS Grid，position: sticky，aspect-ratio 和 CSS transforms。这篇文章描述了到目前年中的进展情况。 23 | 24 | ## 拓展阅读 25 | 26 | - [WebView2 and Electron](https://www.electronjs.org/blog/webview2) 27 |
对比 WebView2 和 Electron 28 | 29 | - [利用机器学习通过网页预提取技术加快网站加载速度](https://mp.weixin.qq.com/s/S1Yg6wiYkK2lN-5aTp2dqQ) 30 |
页面加载时间是网站用户体验最重要的决定因素之一。研究表明，更短的网页加载时间会直接增加网页浏览量、转化率，提升客户满意度。现在使用 TensorFlow 工具就能利用机器学习建立强大的解决方案，帮助网站缩短页面加载时间。在本篇文章中，我们将展示一种端到端的工作流，涉及从 Google Analytics 获取网站导航数据并加以利用，以及训练一种能预测用户下一步操作的自定义机器学习模型。 31 | 32 | - [React Native 新架构](https://zhuanlan.zhihu.com/p/281238593) 33 |
React Native 迎来重大架构升级，性能将大幅提升。Facebook 曾在 2018 年 6 月宣布了大规模重构 RN 的计划和路线图，整个的重构目的是为了让 RN 更轻量化、更适应混合开发，接近甚至达到原生的体验。具体包括以下几个方面：1）改变线程模型。UI 更新不再同时需要在三个不同的线程上触发执行，而是可以在任意线程上同步调用 JavaScript 进行优先更新，同时将低优先级工作推出主线程，以便保持对 UI 的响应。2）引入异步渲染能力，允许多个渲染并简化异步数据处理。3）简化 JSBridge，让它更快更轻量。 34 | 35 | - [Chromium 内核 Layout 模块学习](https://mp.weixin.qq.com/s/UYzAWkCuIPh1Z5yoqGo9nA) 36 |
Blink 是整个 Chromium 代码仓库中的渲染内核的实现。为什么要学习 Blink 的 Layout 模块？一方面可以增加对底层原理的理解，另一方面通过学习最复杂的 Blink 的排版引擎，了解通用的排版引擎的设计思路。 37 | 38 | - [三种前端实现VR全景看房的方案](https://juejin.cn/post/6973865268426571784) 39 |
1. 使用 WebGL 3D 引擎 three.js. 2. 使用更轻量的 3D 引擎 css3d-engine. 3. 使用所见即所得的全景 VR 制作软件 pano2vr. 40 | 41 | - [汉字笔顺动画 C 端实现& B 端原理](https://mp.weixin.qq.com/s/dhh5UVXPD9d9bD3JfYOU9w) 42 |
目标是只要对于给定的字体文件（WOFF, OTF, TTF ）以及需要的字形（汉字，字母 or 其他各国的语言），就能产出与之对应的笔顺动画数据。是对开源项目 [makemehanzi](https://github.com/skishore/makemeahanzi) 的实践。 43 | 44 | - [Let's Build a Simple Database](https://cstack.github.io/db_tutorial/) 45 |
一个简易数据库开发教程，帮助大家理解数据库的一些内部机制，包括数据存储格式、数据从内存到硬盘转移的时机、索引数据如何格式化、如何回滚事务性操作等等。 46 | 47 | - [2021 最酷网页设计指南](https://juejin.cn/post/6979821352576352269) 48 |
翻译原文：[Coolest 25+ Web Design Trends In 2021, that’ll rock the world](https://medium.com/quick-code/coolest-25-web-design-trends-in-2021-thatll-rock-the-world-388eb1144b7e) 49 | 50 | - [An incomplete list of skills senior engineers need, beyond coding](https://skamille.medium.com/an-incomplete-list-of-skills-senior-engineers-need-beyond-coding-8ed4a521b29f) 51 |
高级工程师依赖的不完全技能列表 52 | 53 | ## 开源产品 54 | 55 | - [tauri](https://github.com/tauri-apps/tauri) 56 |
一个基于 Rust 的跨平台桌面应用开发框架，对标 Electron，但更小更快更安全。 57 | 58 | - [fnm](https://github.com/Schniz/fnm) 59 |
一个 Node.js 版本管理工具，可用来替代 nvm，比 nvm 更快。 60 | 61 | 编辑：希达 审阅：胖总&Mr.Q&三水清 62 | -------------------------------------------------------------------------------- /docs/2025-10-24.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.10.24 2 | ![](https://gips2.baidu.com/it/u=87149507,2187464315&fm=3028&app=3028&f=PNG&fmt=auto&q=97&size=f960_412) 3 | 4 | ## 前端技术 5 | - [Node.js v25.0.0(Current)](https://nodejs.org/en/blog/release/v25.0.0) 6 |
作为前沿版本，该更新默认启用 Web Storage、优化 JSON.stringify 性能、在权限模型中新增 --allow-net 选项、内置 Uint8Array 的 base64/十六进制转换能力，并对 WebAssembly 和 JIT 进行性能优化。 7 | 8 | - [React Native 0.82 - A New Era](https://reactnative.dev/blog/2025/10/08/react-native-0.82) 9 |
React Native 0.82，全面切换至新架构，标志着 React Native 进入“新时代”，所有功能均基于新架构运行，性能与扩展性大幅提升。 10 | 11 | - [How to group arrays in JavaScript without reduce()](https://allthingssmitty.com/2025/10/06/grouping-arrays-in-modern-javascript-object-groupby-and-map-groupby/) 12 |
不使用 reduce()，如何实现数组分组？本文详细介绍使用 Object.groupBy() 与 Map.groupBy() 两种原生方法实现数组分组的方案，附代码示例。 13 | 14 | - [Reading and Writing Files in Node.js - The Complete Modern Guide](https://nodejsdesignpatterns.com/blog/reading-writing-files-nodejs/) 15 |
文件操作是 Node.js 应用程序的核心所在。无论是搭建一个提供静态资源的 Web 服务器、处理 CSV 文件、处理用户上传，还是处理配置文件，掌握如何高效地读取和写入文件都是至关重要的。 16 | 17 | - [Getting Creative With shape-outside](https://css-tricks.com/getting-creative-with-shape-outside/) 18 |
本文展示如何利用 CSS Shapes 中的 shape-outside 属性，打破传统布局限制，实现更灵活的页面排版。 19 | 20 | - [15 Recent Node.js Features that Replace Popular npm Packages](https://nodesource.com/blog/nodejs-features-replacing-npm-packages) 21 |
文章指出，许多曾需依赖第三方包实现的功能，如今已原生集成到 Node.js 运行时中，可帮助开发者减少依赖冗余。 22 | 23 | ## AI 资讯 24 | - [百度世界 2025 将于 11 月 13 日举办](https://baiduworld2025.baidu.com/) 25 |
百度世界 2025 大会聚焦大模型技术、AI原生应用与全球化战略，展现百度在人工智能领域的技术优势和未来布局。 26 | 27 | - [百度发布全球领先文档解析模型 PaddleOCR-VL，重塑 OCR 技术格局](https://ernie.baidu.com/blog/zh/posts/paddleocr-vl/) 28 |
百度发布的 PaddleOCR-VL 模型在文档解析领域表现出色，凭借其轻量高效、多语言支持和高精度识别能力，成为 OCR 技术的新标杆。 29 | 30 | - [OpenAI 发布浏览器 Atlas](https://openai.com/index/introducing-chatgpt-atlas/) 31 |
OpenAI 推出的 ChatGPT Atlas 浏览器标志着其从聊天助手向全面互联网平台的战略转型。该浏览器将 ChatGPT 嵌入每个标签页，提供实时内容总结、产品比较和数据分析功能，并引入了实验性 Agent 模式，允许 AI 自主执行多步骤任务。 32 | 33 | - [微软发布首款自研图像生成模型 MAI-Image-1，跻身 LMArena 前十名](https://microsoft.ai/news/introducing-mai-image-1-debuting-in-the-top-10-on-lmarena/) 34 |
微软 AI 正式推出其首款完全自主研发的图像生成模型 MAI-Image-1，该模型在 LMArena 排名前十，展现出卓越的图像生成能力。MAI-Image-1 注重实际应用价值，避免重复或风格单一的图像生成，同时在光影效果和自然风景等方面表现出色，结合速度与质量，提升创作效率。微软团队也在 LMArena 测试模型以确保安全使用，并计划将其应用于 Copilot 和 Bing Image Creator 中，为用户提供更强大的创作工具。 35 | 36 | - [谷歌 Gemini 3.0 Pro 开始小范围推送](https://gemini3.pro/) 37 |
谷歌 DeepMind 团队开始向部分用户推送 Gemini 3.0 Pro 模型，该模型在推理能力和多模态处理上有所提升，并计划在 10 月底正式发布。 38 | 39 | - [Anthropic 推出 Claude Code 网页版，可在浏览器运行编码任务](https://claude.com/product/claude-code) 40 |
Anthropic 推出的 Claude Code 网页版为开发者提供了一个全新的编码环境，使得他们可以在浏览器中直接运行编码任务，无需繁琐的命令行操作和本地环境配置。该工具支持与 GitHub 仓库的无缝对接，并允许开发者实时监控任务的执行情况，同时还能在移动端使用，实现移动编码的理念。 41 | 42 | - [Google重磅推出“Google Skills”平台，内部 AI 知识向公众免费开放](https://www.skills.google/) 43 |
Google 近日推出了一个名为“Google Skills”的全新学习平台，旨在将 Google 旗下顶尖团队的内部实训资源直接开放给全球公众，致力于弥合 AI 领域的技能鸿沟。该平台整合了 DeepMind AI 研究团队、Google Cloud、Gemini AI 模型开发团队以及 Google Education 的精华内容，被誉为是“Google 的内部 AI 知识”首次系统性地向外界开放。 44 | 45 | - [字节跳动 Seed 团队宣布推出 3D 生成大模型 Seed3D 1.0](https://seed.bytedance.com/zh/seed3d) 46 |
字节跳动 Seed 团队推出的 Seed3D 1.0 是一款创新性的 3D 生成大模型，能够从单张图像端到端地生成高质量仿真级 3D 模型，包括精细几何、真实纹理和 PBR 材质。该模型在多项评估中展现出显著优势，尤其在几何生成和纹理贴图生成方面表现优异。此外，Seed3D 1.0 还支持构建完整的 3D 场景，并能无缝导入仿真引擎，为具身智能发展提供了强大的世界模拟器支持。 47 | 48 | ## 拓展阅读 49 | - [asPipes: working pipes today in pure JavaScript](https://github.com/irony/aspipes) 50 |
借助 Symbol.toPrimitive 特性与巧妙的代码设计，在原生 JavaScript 中实现类似其他语言的“管道式”函数组合语法，适合作为实验性技术参考。 51 | 52 | - [What's coming in ESLint v10.0.0](https://eslint.org/blog/2025/10/whats-coming-in-eslint-10.0.0/) 53 |
Nicholas C. Zakas 提前披露 ESLint v10.0 的核心更新方向，包括性能优化、规则体系调整等。值得注意的是，将放弃对 Node.js < v20.19.0 的支持。 54 | 55 | -------------------------------------------------------------------------------- /docs/2025-8-8.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.08.08 2 | ![image](https://gips2.baidu.com/it/u=3390731992,465818954&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f960_412) 3 | 4 | ## 前端技术 5 | - [V8 引擎如何让JSON.stringify提升两倍](https://v8.dev/blog/json-stringify) 6 |
V8 团队对 JSON.stringify 进行了优化，使其速度提升两倍多。当 Node 升级到 V8 13.8 时，应用在处理 API 响应和缓存等常见任务时将自动获得性能提升，这对于依赖 JSON 处理的 Node.js 项目来说是一个重要的性能改进。 7 | 8 | - [Node.js 升级到 v24.5.0](https://nodejs.org/en/blog/release/v24.5.0) 9 |
Node.js 当前版本更新到 v24.5.0，升级到 OpenSSL 3.5，--experimental-wasm-modules 不再需要标志启用，node:http 和 node:https 现在支持代理。这些更新提升了 Node.js 的安全性和功能扩展性，为开发者提供了更好的开发体验。 10 | 11 | - [TypeScript 5.9 发布](https://devblogs.microsoft.com/typescript/announcing-typescript-5-9/) 12 |
TypeScript 5.9 是一次较为温和的版本更新，虽无重大特性，但增加了对 import defer 的支持、新的 --module node20 选项，以及在编辑器中可查看扩展类型信息的“expandable hovers”功能。同时还透露了 TypeScript 6.0 和 7.0 的发展方向，有助于前端开发者提前了解未来的使用趋势。 13 | 14 | - [TC39第109次会议](https://github.com/tc39/agendas/blob/main/2025/tc39-2025-029.pdf) 15 |
会议于2025年7月28 - 31日远程举行。介绍了会议背景、议程主题规则及提案截止时间等要求。议程涵盖开幕式、秘书报告、各项目编辑和任务组报告、兼容性问题讨论等。还列出众多提案，按阶段划分并明确时间和展示人。此外，有时间盒讨论、较长或开放式讨论安排，以及诸多日程限制信息，如部分人员特定时间可用性及提案展示顺序偏好等。 16 | 17 | ## AI 资讯 18 | - [GPT-5 发布](https://openai.com/index/introducing-gpt-5/) 19 |
OpenAI推出GPT-5，这是一款智能、高效且实用的AI系统。相比之前模型，它在编码、写作、健康等多领域有显著提升，如编码能力增强，写作更具文学深度，健康问题回答更精准。在评估中，GPT-5各方面表现出色，思维更高效，回答更准确、诚实、安全，减少了谄媚现象，还能通过新预设个性定制交互方式。此外，针对生物风险有全面保障措施，同时推出的GPT-5 pro能应对复杂任务。目前，GPT-5已面向多类用户推出 。 20 | 21 | - [阿里巴巴通义千问发布QwenImage，布局AI图像新赛道!](https://huggingface.co/Qwen/Qwen-Image) 22 |
8月5日凌晨，阿里巴巴通义千问团队开源20B参数图像生成基础模型Qwen-Image，突破复杂文本渲染和精确图像编辑难题。在多项测试中达先进水平，功能演示表现佳，训练素材授权合规。模型已上线QwenChat “图像生成” 功能，并在多平台开源，支持多种风格生成与图像编辑操作。此外，文章还提及大模型AI学习相关内容，如行业现状、学习方法、资料分享等，涵盖初阶到商业闭环多阶段学习路径。 23 | 24 | - [OpenAI隆重推出 gpt-oss](https://openai.com/zh-Hans-CN/index/introducing-gpt-oss/) 25 |
OpenAI 推出 gpt-oss-120b 和 gpt-oss-20b 两款开放轻量级语言模型，以 Apache 2.0 许可证提供。模型在推理任务表现佳、工具使用能力强，针对消费级硬件部署优化，通过强化学习结合先进技术训练。在基准测试中成绩优异，与回复 API 兼容，安全标准高。模型采用先进预训练和后训练技术，用高质量数据集训练，后训练流程与 O4-mini 类似。其权重可在 Hugging Face 免费下载，已与多平台合作确保广泛应用，旨在推动 AI 开发与民主化进程。 26 | 27 | - [OpenAI推出ChatGPT Study学习模式](https://openai.com/zh-Hans-CN/index/chatgpt-study-mode/) 28 |
2025年7月30日，OpenAI推出ChatGPT Study学习模式，面向多类用户开放，ChatGPT Edu版本也将推出。该模式采用交互式提示、支架式回应、个性化教育和知识点检查四种教学方法，引导学生思考、分解信息、适配内容、巩固知识。教育界对此反响良好，专家认为其能改变传统教育模式，鼓励批判性思考，提升学习效果。这是人工智能在教育领域应用的重要进展，有望为学生带来高效、个性化学习体验 。 29 | 30 | - [字节跳动开源AI开发平台Coze核心项目，推动国产AI生态发展](https://github.com/coze-dev/coze-studio) 31 |
2025年7月26日，字节跳动旗下AI开发平台“扣子（Coze）”开源两大核心项目Coze Studio和Coze Loop，采用Apache 2.0开源协议。Coze Studio是可视化AI智能体开发平台，Coze Loop专注于AI智能体全生命周期管理。开源后获开发者高度关注，此举或冲击中小型AI工作流平台，降低开发门槛，推动国产AI基础设施标准化进程，吸引生态共建，加速AI智能体在多场景落地。 32 | 33 | - [智谱发布新一代旗舰模型GLM-4.5，开源且性能全球领先](https://huggingface.co/zai-org/GLM-4.5) 34 |
7月28日晚，智谱发布新一代旗舰模型GLM-4.5并开源。该模型采用混合专家架构，有两个版本，核心突破是融合多种能力，经大量数据训练性能提升。在国际基准测试中排名靠前，参数效率显著提升。商业化上，API价格低且有高速版本。官方发布多个应用DEMO，此次发布标志着从参数竞赛向实际应用转型，开源旨在推动AI技术规模化应用。 35 | 36 | ## 扩展阅读 37 | - [用对Event Listeners](https://www.smashingmagazine.com/2025/07/handling-javascript-event-listeners-parameters/) 38 |
文章围绕 JavaScript 事件监听器参数处理展开。首先强调事件监听器对交互性很重要，但管理不当会导致内存泄漏等问题。接着指出给事件处理程序添加参数时常见错误是在 addEventListener 中直接调用带参函数，会导致函数立即执行而非在事件触发时。介绍了两种带参数处理事件的方法 39 | 40 | - [在开发中使用Shadow DOM](https://www.smashingmagazine.com/2025/07/web-components-working-with-shadow-dom/) 41 |
本文围绕Web Components中的Shadow DOM展开。开篇指出Web Components包含多个API，而Shadow DOM能隔离组件、避免冲突。接着阐述其产生原因，即解决传统DOM样式和脚本冲突问题。还介绍了可承载影子根的元素，以及创建影子根的两种方式——命令式和声明式。此外，说明了Shadow DOM的配置选项、插槽内容等。通过这些内容，帮助读者理解Shadow DOM的重要性、使用场景及方法。 42 | 43 | ## 资源推荐 44 | - [es-toolkit](https://es-toolkit.dev/) 45 |
文章介绍了es-toolkit这一先进的JavaScript实用库。它在现代JavaScript运行时性能比其他库高2到3倍，捆绑体积小，比其他替代库少97%的代码。能无缝替代Lodash，充分利用现代JavaScript API，函数类型简单强大。被Storybook等多个流行开源项目采用，测试覆盖率达100%，支持包括Node.js、Deno、Bun和浏览器等所有JavaScript环境。 46 | 47 | -------------------------------------------------------------------------------- /docs/2025-11-7.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.11.07 2 | 3 | ![image](https://gips1.baidu.com/it/u=2598153571,3753916588&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f960_412) 4 | 5 | 6 | ## 前端技术 7 | - [Node.js v25.1.0 (Current)](https://nodejs.org/en/blog/release/v25.1.0) 8 |
本文介绍了Node.js v25.1.0版本的更新内容。在功能更新方面，涵盖http、sqlite、src等模块；还对众多依赖进行更新，包含simdjson、corepack等。文档方面，修正多处表述并补充内容。同时，对测试相关的多处代码和设置进行优化、修复，以及处理如Windows、macOS、Linux等不同系统相关的问题，还给出了各系统版本的安装包、二进制文件、源代码等的下载链接 。 9 | 10 | - [Chrome 142](https://developer.chrome.com/release-notes/142?hl=zh_cn) 11 |
该文档介绍了Chrome 142稳定版于2025年10月28日发布的内容。在CSS和界面方面，有::view-transition元素定位变更等多项更新；图形上，WebGPU增添新功能及扩展纹理格式支持；Web API方面，FedCM可显示第三方iframe源等；安全上限制本地网络访问；用户输入方面实现部分功能优化；还提及设备绑定会话凭据的源试用。这些更新优化了性能，提升开发者体验与用户预期，增强浏览器的功能与安全性 。 12 | 13 | - [Bun v1.3.1](https://bun.com/blog/bun-v1.3.1) 14 |
Bun v1.3.1带来多项更新。在构建方面，`bun build`更快，支持源映射保留注释；`import.meta`在CommonJS有改进。`bun test`新增`vi`全局、支持新标志。`bun install`更快，支持更多配置。还实现`FileHandle.readLines()`。修复众多问题，涵盖打包器、测试、安装、SQL、Redis等方面，提升性能与稳定性，优化多场景下的功能表现。 15 | 16 | - [Next.js 16](https://nextjs.org/blog/next-16) 17 |
Next.js 16在Next.js Conf 2025前发布，对Turbopack、缓存及架构有改进。新增缓存组件，通过“use cache”指令缓存页面等；Next.js Devtools MCP集成MCP助力AI调试；用“proxy.ts”替换“middleware.ts”明确网络边界；优化日志展示。还带来多项此前发布特性，如稳定版Turbopack、文件系统缓存等。核心特性升级，路由与导航优化，缓存API更新。同时有版本要求、多项移除和行为变化，部分功能被弃用。 18 | 19 | - [Vitest 4.0 发布](https://vitest.dev/blog/vitest-4) 20 |
Vitest 4.0正式发布。此次更新诸多功能，如浏览器模式稳定，引入新的供应商定义方式；新增视觉回归测试，可通过toMatchScreenshot断言实现；支持生成Playwright Traces，方便调试。在定位器、调试、类型感知钩子等方面也有改进，还新增expect.assert、expect.schemaMatching等方法，更新多种报告器。同时带来一些API方法，不过也存在一些破坏性更改，升级前需查看迁移指南。 21 | 22 | ## AI 资讯 23 | - [大模型投资比赛“Alpha Arena”落幕](https://nof1.ai/) 24 |
该网页围绕AI在真实市场的交易展开。介绍Alpha Arena是首个衡量AI投资能力的基准，给每个模型10000美元真实资金在真实市场交易。目标是让基准更贴近现实，因市场动态多变，能挑战AI。展示了参赛的模型，如Claude 4.5 Sonnet等。还说明了竞赛规则，包括起始资金、交易市场为加密永续合约、目标是最大化风险调整后收益、交易透明、AI自主操作以及比赛持续到2025年11月3日下午5点等内容。 25 |
11月4日，备受关注的AI大模型实时投资比赛“Alpha Arena”落下帷幕。历时17天，阿里千问Qwen以22.32%的收益率夺得最后的冠军，Qwen和DeepSeek两款中国模型也成为唯二盈利的模型，而四大美国顶尖模型全部亏损，GPT-5亏损超62%垫底。 26 | 27 | - [Kimi CLI](https://github.com/MoonshotAI/kimi-cli) 28 |
Kimi CLI是用于软件开发和终端操作的新CLI代理，目前处于技术预览阶段。仅支持macOS和Linux ，通过uv工具安装。具备类似Shell的用户界面，支持Zsh集成、Agent Client Protocol 、MCP等。可在Shell与其他模式间切换，集成Zsh需安装插件并配置。支持与ACP兼容的编辑器或IDE ，能连接指定MCP服务器。还介绍了开发方式，如克隆仓库、准备环境等，欢迎各界贡献代码 。 29 | 30 | - [Cursor 2.0更新](https://cursor.com/cn/changelog) 31 |
Cursor 2.0带来诸多更新。界面上有全新代码模型与智能体界面，多智能体管理优化。Composer组合器性能优越。浏览器正式版功能增强，代码评审更完善。沙盒化终端在macOS全面可用。新增团队指令等团队协作功能。语音模式可语音控制。性能上提升LSP性能、修复内存问题。还有后台计划模式等新特性，改进提示界面和代理框架。云端智能体可靠性增强，企业版增加沙盒终端控制项、钩子云端分发及审计日志等功能 。 32 | 33 | - [OpenAI发布gpt-oss-safeguard研究预览版](https://openai.com/zh-Hans-CN/index/introducing-gpt-oss-safeguard/) 34 |
gpt-oss-safeguard研究预览版，含1200亿和200亿参数版本。此开放权重推理模型能自定义安全策略，通过思维链技术解读策略、分类内容，开发人员可灵活迭代策略。相比传统分类器，它更灵活但有性能局限。其在多策略准确性上表现出色，OpenAI内部用类似方法提升安全性。该模型有局限性，如在内容分类上可能不如传统分类器，存在耗时和算力问题。未来OpenAI将与社区合作改进开放安全工具 。 35 | 36 | ## 拓展阅读 37 | - [在小屏幕上进行创意网页设计](https://css-tricks.com/getting-creative-with-small-screens/?utm_source=CSS-Weekly&utm_campaign=Issue-626&utm_medium=web) 38 |
文章探讨在小屏幕上进行创意网页设计。作者针对小屏幕设计问题，以虚构歌手网站为例，介绍多种创新方法。如用水平滚动打破垂直滚动单调，将模块网格转化为水平滚动元素；将部分元素置于屏幕外；构建可滚动迷你页面，利用容器查询改变布局；设计方向响应式布局，根据设备方向重组页面。强调小屏幕设计需创新思维，注重内容呈现，保留设计个性与杂志般的活力、节奏和探索感 。 39 | 40 | - [深入探讨JavaScript中异步循环的问题](https://allthingssmitty.com/2025/10/20/rethinking-async-loops-in-javascript/) 41 |
在`for`循环中使用`await`会使操作顺序执行，在`map()`里直接用`await`不会等待承诺解决。`Promise.all()`虽能并行执行，但一个请求失败会使整个操作失败。更安全的替代方案有`Promise.allSettled()`或在映射函数内处理错误。现代解决方案包括`for...of` + `await`的顺序执行、`Promise.all` + `map()`的并行执行，还有节流并行。最后强调不要在`forEach()`中用`await`，应依需求选择合适异步逻辑结构。 42 | 43 | - [对比通过import()和通过fetch()获取JSON](https://jakearchibald.com/2025/importing-vs-fetching-json/) 44 |
今年JSON模块导入在浏览器引擎中广泛可用，但作者认为在浏览器环境中其应用有限。在错误处理上，静态导入失败会影响整个模块图，`import()` 虽可捕获错误但不如 `fetch()` 能详细了解失败信息。缓存和垃圾回收方面，导入模块会在环境生命周期内缓存，可能导致内存泄漏，而 `fetch()` 返回对象可在不再引用时被回收。JSON模块导入适用于本地静态JSON资源，在服务器代码中获取 `package.json` 版本号也可行，但在前端使用需谨慎，不应完全替代 `fetch()`。 45 | 46 | -------------------------------------------------------------------------------- /docs/2025-6-27.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.06.27 2 | ![](https://gips0.baidu.com/it/u=3441875457,3370861031&fm=3028&app=3028&f=JPEG&fmt=auto&q=92&size=f2090_896) 3 | 4 | ## 前端技术 5 | - [pnpm 10.12：实验性全局虚拟存储功能解析](https://socket.dev/blog/pnpm-introduces-global-virtual-store-and-expanded-version-catalogs) 6 |
pnpm 新增“全局虚拟存储”（Global Virtual Store）特性，通过符号链接共享依赖，避免多项目重复安装，进一步提升包管理效率。 7 | 8 | - [Node.js 原生模块钩子实现模块热更新](https://immaculata.dev/blog/native-nodejs-hmr.html) 9 |
利用 Node.js 模块钩子机制实现高效模块热更新（HMR），无需额外框架即可动态刷新模块，提升开发体验。 10 | 11 | - [CSS 变换动画中的缩放顺序陷阱](https://jakearchibald.com/2025/animating-zooming/) 12 |
本文通过案例解析 CSS 变换动画，指出缩放（scale）与位移（translate）的顺序会导致动画失真，提供最佳实践避免 “不自然” 动效。 13 | 14 | - [TypeScript 与 ES2025 Iterator 类命名冲突解决方案](https://2ality.com/2025/06/typescript-iterator-types.html) 15 |
ES2025 新增的 Iterator 类与 TypeScript 现有迭代器类型冲突，本文介绍 TypeScript 如何通过类型重命名和模块导出策略解决该问题。 16 | 17 | - [ES 模块顶层 await 语法使用指南](https://allthingssmitty.com/2025/06/16/using-await-at-the-top-level-in-es-modules/) 18 |
文章介绍 ES2022 引入的顶级 await 这一现代 ES 模块特性。它打破以往 await 只能用于 async 函数内的限制，可在 ES 模块顶级作用域使用，告别繁琐代码。顶级 await 仅在 JavaScript 模块中有效，在 CommonJS 等场景中不支持。文中还列举其在获取远程配置、动态导入、等待初始化等实际场景的应用，给出使用的最佳实践建议，助开发者合理运用该特性优化代码。 19 | 20 | - [JSON 模块脚本正式纳入 Web 标准基线特性](https://web.dev/blog/json-imports-baseline-newly-available) 21 |
JSON 模块脚本（JSON Module Scripts）已成为 Web 标准基线特性，支持在 ES 模块中直接导入 JSON 文件，简化数据加载流程。 22 | 23 | - [HTML 规范变更：对属性中的 < 和 > 进行转义](https://developer.chrome.com/blog/escape-attributes?hl=zh-cn) 24 |
Chrome 团队推动 HTML 规范修改，要求在属性值中严格转义 < 和 >，以防范跨站脚本（XSS）攻击，主流浏览器将逐步实现该标准。 25 | 26 | - [JavaScript 编译加速：Porffor 编译器的提前编译实践](https://www.youtube.com/watch?v=RU5N5O-O5Zw) 27 |
Porffor 编译器作者分享 JavaScript 执行优化方案，解析提前编译（AOT）技术如何提升代码运行速度，对比传统 JIT 与 AOT 的差异。 28 | 29 | ## AI 资讯 30 | - [5款大模型考「山东卷」，Gemini、豆包分别获文理第一名](https://mp.weixin.qq.com/s/W-akL4I5_2gm7oSloAZGbw) 31 |
字节跳动 Seed 团队集结了五款主流推理模型—— Seed 1.6-Thinking、DeepSeek-R1-0528，以及国外大模型 Gemini-2.5-Pro-0605、Claude-Sonnet-4、OpenAI-o3-high-0416，用 2025 年山东高考真题（主科全国 Ⅰ 卷 + 副科自主命题）进行全科闭卷测评，以高考 750 分制对 AI 的「应试能力」展开硬核比拼。从最终成绩单来看，这 5 家大模型的文科成绩均超 620 分，如果按照山东高考的赋分制，豆包的 683 分可以冲刺清华、北大；在理科方面，各大模型之间的分数差距则较为明显，Gemimi 和豆包已达到保底重点 985 的水准，而 Claude 4 和 o3 还不及 600 分。评分明细详见：https://bytedance.sg.larkoffice.com/sheets/QgoFs7RBjhnrUXtCBsYl0Jg2gmg 32 | 33 | - [月之暗面 Kimi 首个 Agent 开启内测](https://moonshotai.github.io/Kimi-Researcher/) 34 |
6月20日晚间，月之暗面宣布其第一个 Agent 开启内测。Kimi-Researcher 是通过端到端强化学习训练出来的 Agent 模型，能够独立规划任务流程并交付完整结果。与其他Agent不同，它采用零结构设计，无需复杂提示词或预设流程，完全依靠自主决策能力在动态环境中运行，即日起开始小范围灰度测试。月之暗面表示，将逐步开源 Kimi-Researcher 基础预训练模型、以及强化学习后的模型。 35 | 36 | - [Google 发布 Search Live 语音搜索，可以通过语音直接与搜索引擎对话，进行连续搜索](https://labs.google.com/search/experiment/22 ) 37 |
Google 正式发布 Search Live，这是一种全新的语音搜索体验模式。Search Live 整合了生成式AI技术（Gemini 模型）和传统搜索引擎的能力，让你可以像对话一样与搜索引擎交互。相比传统“输入关键词→看搜索结果”，Search Live 允许你用语音提问、听语音回答，并连续提问跟进，整个过程像是在与一个“智能助手”实时交流。 38 | 39 | - [月之暗面开源 Kimi 新模型：超新版 DeepSeek R1](https://huggingface.co/moonshotai/Kimi-Dev-72B) 40 |
月之暗面推出了针对软件工程任务的全新开源代码大模型 Kimi-Dev-72B。该模型在 SWE-bench Verified 编程基准测试中取得了全球最高开源模型水平，以仅 72B 的参数量，超越了刚发布不久、参数量达 671B 的新版 DeepSeek-R1。 41 | 42 | - [AMD、OpenAI 联合发布超强 AI 芯片，推理提升 35 倍](https://www.cnbc.com/2025/06/12/amd-mi400-ai-chips-openai-sam-altman.html) 43 |
AMD 与 OpenAI 推出了最新的 Instinct MI400 和 MI350 系列 AI 芯片，MI350系列显著提升了 AI 计算性能，MI400系列则面向下一代旗舰 AI 计算需求。与上一代产品相比，MI350 配备了 288GB 的 HBM3E 内存和高达 8TB/s 的内存带宽，在 AI 计算能力上提升了 4 倍，推理性能提升了 35 倍。AMD表示，由于芯片功耗低于竞争对手，MI355X 每美元可提供比英伟达芯片多 40% 的tokens。 44 | 45 | - [腾讯开源混元 3D 2.1 大模型](https://github.com/Tencent-Hunyuan/Hunyuan3D-2.1) 46 |
CVPR2025（计算机视觉领域顶会之一）上，腾讯宣布混元 3D 2.1 大模型对外开源。目前，混元3D模型在 Hugging Face（知名的开源社区和技术平台）下载量已超过180万。 47 | 48 | ## 拓展阅读 49 | - [CSS 新特性学习资源整理：从规范到实践](https://css-tricks.com/how-to-keep-up-with-new-css-features/) 50 |
前端专家 Sacha Greif 整理 CSS 新特性学习路径，涵盖 MDN、规范文档、实验性特性浏览器标志等实用资源，帮助开发者跟进技术演进。 51 | 52 | - [探索 JavaScript（ES2025 版）](https://exploringjs.com/js/) 53 |
技术专家 Axel Rauschmayer 发布 ES2025 语言手册，覆盖内置数据类型、模块化、对象与 Promise 机制等核心内容，支持免费在线阅读及 Anki 闪卡学习。 54 | 55 | 56 | -------------------------------------------------------------------------------- /scripts/index.js: -------------------------------------------------------------------------------- 1 | const {exec} = require('child_process'); 2 | const moment = require('moment'); 3 | const path = require('path'); 4 | const fs = require('fs'); 5 | 6 | const CATE_LIST = ['前端技术', 'AI 资讯', '扩展阅读', '资源推荐']; 7 | 8 | /** 9 | * 执行 github cli 命令 10 | */ 11 | function runCommand(command) { 12 | return new Promise((resolve, reject) => { 13 | exec( 14 | command, 15 | {encoding: 'utf-8'}, 16 | (error, stdout, stderr) => { 17 | if (error) { 18 | reject(error); 19 | return; 20 | } 21 | if (stderr) { 22 | reject('run gh failed: ' + stderr); 23 | return; 24 | } 25 | 26 | resolve(stdout); 27 | } 28 | ); 29 | }); 30 | } 31 | 32 | /** 33 | * 获取所有处在 open 状态的 issue 34 | */ 35 | async function getOpenIssuesID() { 36 | const res = await runCommand('gh issue list --repo SearchFeed/weekly --json number'); 37 | return JSON.parse(res).map(item => item.number); 38 | } 39 | 40 | /** 41 | * 读取 issue 的 body 部分 42 | */ 43 | async function readIssueContent(id) { 44 | const res = await runCommand(`gh issue view --repo SearchFeed/weekly ${id} --json body`); 45 | let body = JSON.parse(res).body; 46 | body = body.replace(/\r\n|\r|\n/g, '\n'); 47 | const lines = body.split('\n'); 48 | const data = lines.reduce((prev, item) => { 49 | let [key, value] = item.split('：'); 50 | key = key.replace('- ', ''); 51 | prev[key] = value; 52 | return prev; 53 | }, {}); 54 | return data; 55 | } 56 | 57 | async function run() { 58 | // 获取所有 issue id 59 | const issueIDs = await getOpenIssuesID(); 60 | 61 | // 获取 issue 的内容 62 | const dataFetching = []; 63 | issueIDs.forEach(id => { 64 | dataFetching.push(readIssueContent(id)); 65 | }); 66 | const res = await Promise.all(dataFetching); 67 | 68 | // 归类 69 | const blog = {}; 70 | res.forEach(item => { 71 | const cate = item['类别']; 72 | const url = item['链接']; 73 | const title = item['标题']; 74 | const reason = item['推荐理由（文章评论/解读）']; 75 | if (!cate || !url || !title || !reason) { 76 | console.warn('missing content: ' + JSON.stringify({ 77 | cate, 78 | url, 79 | title, 80 | reason 81 | })); 82 | return; 83 | } 84 | 85 | if (!blog[cate]) { 86 | blog[cate] = []; 87 | } 88 | 89 | blog[cate].push({ 90 | url, 91 | title, 92 | reason 93 | }); 94 | }); 95 | 96 | // 产出内容 97 | const day = moment().format('YYYY.MM.DD'); 98 | let content = `# 前端&AI技术双周刊-${day}\n\n\n`; 99 | // 首先处理CATE_LIST中定义的分类 100 | CATE_LIST.forEach(cate => { 101 | if (blog[cate]) { 102 | content += `## ${cate}\n`; 103 | const articles = blog[cate]; 104 | content += articles.map(a => `- [${a.title}](${a.url})\n
${a.reason}\n\n`).join(''); 105 | delete blog[cate]; // 处理过的分类从blog对象中删除 106 | } 107 | }); 108 | 109 | // 然后处理其他未在CATE_LIST中定义的分类，按字母顺序排序 110 | const otherCategories = Object.keys(blog).sort(); 111 | otherCategories.forEach(cate => { 112 | content += `## ${cate}\n`; 113 | const articles = blog[cate]; 114 | content += articles.map(a => `- [${a.title}](${a.url})\n
${a.reason}\n\n`).join(''); 115 | }); 116 | 117 | fs.writeFileSync(path.resolve(__dirname, `../docs/${moment().format('YYYY-M-D')}.md`), content, 'utf-8'); 118 | 119 | console.log(`::set-output name=issues::${issueIDs.map(item => `resolve: #${item}`).join(' ')}`); 120 | console.log(`::set-output name=count::${issueIDs.length}`); 121 | } 122 | 123 | run(); 124 | 125 | -------------------------------------------------------------------------------- /docs/2021-10-27.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#9-2021.10.27 2 | 3 | ![前端技术双周刊_2](https://user-images.githubusercontent.com/4032009/138925202-12e2297f-6ecb-46e2-bd8d-d5bec63a30c3.png) 4 | 5 | ## JavaScript 6 | 7 | - [How to Fill an Array with Initial Values in JavaScript](https://dmitripavlutin.com/javascript-fill-array/) 8 |
看似简单的问题可能也有一些陷阱 9 | 10 | - [怎样判断一个引用类型变量是 Proxy 的实例？](https://juejin.cn/post/6865910564817010702) 11 |
通常大家可能都能想到用 instanceof 操作符做判断，但是却不能符合预期。本文提出了一种解决办法，借助 Symbol.toStringTag 方法和 Proxy 可以代理自身的特性完成判断。Proxy 和 Symbol 都属于元编程的范畴，能力很强大。 12 | 13 | - [Naive UI 组件的源码解读](https://mp.weixin.qq.com/s/JdBmq6WPzDeo5GI3YWLDTw) 14 |
本文一层层源码级剖析了 Naive UI 的 Button 完整过程，可以发现对于组件库这个领域来说，绝大部分的构思都是花在如何设计可扩展的样式系统上，从 Ant Design、Element UI 使用 Less 来组织样式系统，再到 Material Design 使用 CSS-in-JS，如 styled-components 来组织样式系统，再到现在 Naive UI 使用 CSS Render 来组织样式系统。大家在组件库的开发实践中也可以从中参考借鉴。 15 | 16 | - [clean-code-javascript](https://github.com/ryanmcdermott/clean-code-javascript) 17 |
Software engineering principles, from Robert C. Martin's book Clean Code, adapted for JavaScript. This is not a style guide. It's a guide to producing readable, reusable, and refactorable software in JavaScript. 18 | 19 | ## CSS 20 | 21 | - [重新构想原子化 CSS](https://antfu.me/posts/reimagine-atomic-css-zh) 22 |
文章从 [Tailwind CSS](https://tailwindcss.com/) / [Windi CSS](https://cn.windicss.org/) 的利弊出发，介绍了自己的原子化 CSS 引擎 [UnoCSS](https://github.com/antfu/unocss)，拥有几个特点：直观且完全可定制，支持可变修饰配置，提供大量预设并且支持自定义预设、性能强大等。文章中作者深入思考和动手实践能力值得学习。 23 | 24 | ## Node.js 25 | 26 | - [patch-package](https://zhuanlan.zhihu.com/p/424952162) 27 |
patch-package 可以帮你『优雅』的修改 node_modules 下的代码 28 | 29 | - [Node.js v17来了，看看有哪些新功能](https://mp.weixin.qq.com/s/JliFSL-118HOrlliBkJiiQ) 30 |
Node.js v17 版本已发布，取代了 v16 做为当前版本，新的 v17 版本提供了一些新功能：基于 Promise 的其它核心模块 API、错误堆栈尾部增加 Node.js 版本信息、OpenSSL 3.0 支持、v8 JavaScript 引擎更新至 9.5。Node.js 的奇数版本不是稳定的版本（例如，当前的 Node.js v17 ），它的生命周期很短，可以尝鲜，不过不推荐用于生产环境。 31 | 32 | ## 端智能 33 | 34 | - [说一说 Web 端侧 AI](https://mp.weixin.qq.com/s/9PoFZVs7jiI992y6MWLqUQ) 35 |
一篇浅尝辄止的入门文章，带你了解端智能的概念、应用场景、优势和局限性，Web 端智能的架构与流程等内容。 36 | 37 | ## 前端框架 38 | 39 | - [React 全新文档来了](https://zhuanlan.zhihu.com/p/424425002) 40 |
React 官方文档内容过于陈旧。从去年10月开始，React 团队的 Rachel Nabors 开始推进新文档的编写。时隔一年，[React 新文档 Beta 版](https://beta.reactjs.org/)终于上线了。此外，React 全新文档的技术选型也值得我们借鉴。 41 | 42 | ## 算法 43 | 44 | - [SELF-PARKING CAR IN 500 LINES OF CODE](https://trekhleb.dev/blog/2021/self-parking-car-evolution/) 45 |
如何用500行 TS 代码实现自动泊车功能？在这篇文章中，作者从0到1介绍了如何使用遗传算法，在500行代码以内实现一个简单场景下的自动泊车功能。文章内不仅提供了详细的代码解释，完整的代码实现，还提供了一个[在线模拟器](https://trekhleb.dev/self-parking-car-evolution)直观地查看每一代遗传算法的训练结果。 46 | 47 | - [音频可视化：采样、频率和傅里叶变换](https://cjting.me/2021/08/07/fourier-transform-and-audio-visualization/) 48 |
在很多音乐播放器中经常会看到一排随音乐跳动的柱子动画效果，大家有没有想过该如何实现呢？好奇的话请戳 49 | 50 | ## 开源产品 51 | 52 | - [微软发布 vscode.dev](https://zhuanlan.zhihu.com/p/424134878) 53 |
和前段时间 github 推出的`github.dev`有点像，不过更纯粹，不会和 github 账户绑定 54 | 55 | - [Semi Design](https://mp.weixin.qq.com/s/_QQA13sOG1-kBQp5Fdt0Hg) 56 |
抖音系推出的面向企业级应用的设计系统 57 | 58 | 59 | ## 拓展阅读 60 | 61 | - [前端 DDD 思考](https://zhuanlan.zhihu.com/p/421300074) 62 |
复杂的业务系统无论前端还是后端，都面临着巨大的挑战，除了系统本身的功能之外，最大的风险在于业务逻辑需要被准确实现的同时，给研发团队的实现时间却很紧张，紧随而来的系统的代码在长时间迭代中，越来越难以维护。作者受到 DDD 的启发，探索了 DDD 在前端领域的可能性，给出了一套标准建模步骤，并结合 Mobx 和 React 说明如何实现。对于具有复杂业务场景的前端需求具有很大的参考价值。 63 | 64 | - [CORS 讲解](https://jakearchibald.com/2021/cors/) 65 |
CORS 的详细介绍及正确的使用姿势 66 | 67 | - [从 Web 图标演进历史看最佳实践](https://mp.weixin.qq.com/s/fubW5UTFoqe94XZUdTETVQ) 68 |
在目前组件化开发的大背景下，通过分析不同实现方案的优缺点，建立起一套当下图标的最佳实践，减少了流程中的沟通和容易出错的人工操作，高效地达成了设计和实现的一致性。 69 | 70 | - [做一名真正的软件工程师](https://mp.weixin.qq.com/s/_YsFab4yuaNkDMVc_55qwQ) 71 |
章老师近期的分享精华 72 | 73 | - [关于系统复杂度的碎碎念](https://mp.weixin.qq.com/s?__biz=Mzk0MDIwNzM2MA==&mid=2247484408&idx=1&sn=a47e9da5a93882ae3492caffed97d0a3) 74 |
从阅读 [Complexity has to live somewhere](https://ferd.ca/complexity-has-to-live-somewhere.html) 和《a philosophy of software design》联想到的如何管理系统复杂度问题。1. 系统可以设计得复杂，只要复杂的部分不常修改就可以了。2. 经常修改的部分与不经常修改的部分可以进行拆分。3. 重复的工作一定可以配置化。4. 工程师不应该抗拒复杂度 75 | -------------------------------------------------------------------------------- /docs/2025-9-19.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.09.19 2 | 3 | ![image](https://gips1.baidu.com/it/u=2258061911,1913321336&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f960_412) 4 | 5 | ## 前端技术 6 | - [Deno 2.5 发布](https://deno.com/blog/v2.5) 7 |
Deno 2.5带来多项更新。新增配置文件权限集，简化权限管理；为Deno.test添加设置和清理API。扩展WebSocket规范可设自定义头，为deno bundle添加运行时API并支持HTML入口点。还添加权限审计日志，改进deno run输出、子进程stdio方法等。在依赖管理上，改变deno install报告格式，新增两条lint规则。此外，在性能、兼容性等方面也有提升，如优化发射缓存、支持更多框架TSConfig等。 8 | 9 | - [pnpm 10.16 更新](https://pnpm.io/blog/releases/10.16) 10 |
pnpm 10.16 有多项更新。在小改动方面，为降低安装受攻击版本包的风险，引入新设置 `minimumReleaseAge`，可指定发布后多久才能安装依赖，还能通过 `minimumReleaseAgeExclude` 排除特定依赖；新增对 `finders` 的支持，可在 `.pnpmfile.cjs` 声明查找函数，按依赖其他属性查找。在补丁更新方面，修复在Node.js 24 下执行pnpm的弃用警告等问题，如对 `nodeVersion` 未设精确版本抛出错误、`pnpm publish` 可发布 `.tar.gz` 文件、取消进程时 `pnpm run` 返回非零退出码 。 11 | 12 | - [Node.js v24.8.0 发布](https://nodejs.org/en/blog/release/v24.8.0) 13 |
Node.js v24.8.0 发布。此版本支持在 Chrome DevTools 中检查 HTTP/2 网络调用，提供了使用方法。同时在 crypto 方面有多项更新，如支持多种算法及上下文参数等；在其他方面，包括对各模块功能的改进、依赖更新、文档完善、测试调整、工具优化等众多内容。还给出了不同系统版本的安装包、二进制文件、源代码等的下载链接以及 SHASUMS 信息，为开发者在 Node.js 的使用和开发上提供了更多功能和便利 。 14 | 15 | ## AI 资讯 16 | - [MetalBear的Mirrord工具允许AI像在远程环境中一样运行本地代码](https://metalbear.com/) 17 |
MetalBear 筹集了1250万美元种子轮资金。其创建的mirrord工具，能让云开发者像在远程环境中一样运行本地代码，简化编码、调试等流程，让远程服务如同本地般便捷。它避免了诸多繁琐操作，如构建Docker镜像、等待CI等。此外，网站还有开发者分享的见解和教程，涉及技术洞察、最佳实践等，助力开发者更快编码、更好交付 。 18 | 19 | - [⽂⼼思考模型登顶 HuggingFace 全球模型总趋势榜、⽂本模型趋势榜](https://mp.weixin.qq.com/s/StwzTv4eBwY-qMnWnE6cSQ) 20 |
据 HuggingFace 官网最新数据显示，截至 2025 年 9 月 12 日，百度最新开源的文心思考模型 ERNIE-4.5-21B-A3B-Thinking在 HuggingFace 全球模型总趋势榜和文本模型趋势榜均排名第一。 21 | 22 | - [OpenAI发布GPT‑5-Codex](https://openai.com/index/introducing-upgrades-to-codex/) 23 |
OpenAI发布GPT‑5-Codex，它针对软件工程任务优化，在代码生成、审查等方面表现出色，能根据任务复杂度动态调整思考时间。同时，Codex在多方面更新，CLI围绕编码工作流重建，IDE扩展方便本地与云端协作，云服务性能提升且支持图像共享。此外，Codex具备代码审查能力，能辅助团队发现问题。其运行在沙盒环境保障安全，在多种ChatGPT套餐中可用 。 24 | 25 | - [字节跳动发布Seedream 4.0模型](https://seed.bytedance.com/zh/seedream4_0) 26 |
Seedream 4.0是新一代图像创作模型，将图像生成与编辑整合于统一架构，可应对复杂多模态生成任务。其推理速度大幅提升，支持4K高清图像生成。具备多图组合、指令式编辑、百变风格库等功能，还能通过知识驱动实现精准生成。在内部MagicBench多维度基准测试中，该模型在指令遵循、一致性、美学表现等核心维度表现良好，在图片生成和编辑任务的多项指标上也有出色成绩，能为用户提供丰富的创意支持。 27 | 28 | - [蚂蚁百灵发布轻量级推理模型 Ring-mini-2.0，将逐步全面开源](https://huggingface.co/inclusionAI/Ring-mini-2.0) 29 |
蚂蚁百灵团队发布并开源Ring-mini-2.0推理模型，它基于Ling 2.0架构优化而来。在参数量有限时，能达到10B级别以下dense模型综合推理能力，在逻辑推理等任务中表现出色。经多项优化，其复杂推理稳定性与泛化性提升，性能超越部分10B以下dense模型。它继承高效MoE设计，降低推理成本，支持长上下文。团队将开放模型权重等，有望成为小尺寸推理模型首选 。 30 | 31 | - [腾讯云发布混元3D 3.0模型](https://3d-models.hunyuan.tencent.com/) 32 |
Hunyuan 3D Generation展示了开源的3D生成模型。Hunyuan3D是首个完全开源且适用于生产的3D生成模型，开源数据处理管道、训练/推理代码、模型权重和架构，为学术研究建立可复现基线，降低工业部署开发成本。它还是首个开源PBR材质生成的模型，能实现电影级光照交互，达到游戏资产和工业设计所需精度。Hunyuan3D - 2.1是可扩展的3D资产创建系统，通过完全开源框架和PBR纹理合成推动3D生成技术发展，其开源全模型权重和训练代码，升级的PBR管道能生成逼真纹理 。 33 | 34 | - [阿里推出AI编程工具 Qoder](https://qoder.com/) 35 |
Qoder是一个智能编码平台，预览期可免费访问。其通过增强的上下文引擎，让智能体从代码库和相关文档学习，依简单提示自主规划和编辑项目。具备智能代码库搜索、高级存储库洞察等优势，能精准定位代码、解决问题并不断学习。还为开发者解锁更多AI编码能力，如自动选择最佳模型、提供上下文感知补全。背后理念包括增强上下文工程、知识可视化和规范驱动开发，可让代码更易理解，减少迭代，加快交付 。 36 | 37 | ## 扩展阅读 38 | - [重大供应链攻击袭击了 npm 生态系统](https://socket.dev/blog/npm-author-qix-compromised-in-major-supply-chain-attack) 39 |
Socket 检测到针对npm生态系统的供应链攻击，维护者Qix账户遭钓鱼邮件入侵，攻击者发布多个恶意版本常用包，每周下载量达20 - 30亿次。恶意代码会扫描多种加密钱包地址，用攻击者地址替换受害者地址，还会拦截网络请求改写响应。建议开发者勿升级到恶意版本，锁定依赖并审计安装情况。此外，文章给出事件时间线及恶意包版本、相关钱包地址等IOCs信息。 40 | 41 | - [我们能用corner-shape属性做些什么？](https://css-tricks.com/what-can-we-actually-do-with-corner-shape/) 42 |
文章围绕CSS的corner-shape属性展开。此属性可创建多种酷炫UI效果，如斜角、倾斜部分、特殊形状标签等。目前仅Chrome 139及以上版本支持，需与border-radius等属性配合使用。文中通过多个示例展示不同值的效果及实现代码，像使用corner-shape: bevel实现斜角效果，用corner-shape: round bevel bevel round打造特定形状的销售标签等。同时介绍了在工具提示、突出显示等场景的应用，为开发者提供了新的设计思路 。 43 | 44 | - [JavaScript 中对数组操作的新方法](https://allthingssmitty.com/2025/09/08/finally-safe-array-methods-in-javascript/) 45 |
许多JavaScript开发者使用.sort()、.reverse() 或.splice()等数组方法时会谨慎，因其会改变原始数组，在共享或响应式状态应用中易引发难以追踪的错误。近年出现的toSorted()、toReversed()、toSpliced() 等新数组方法，返回副本而非改变原始数组，避免了变异问题。文章对比新旧方法，介绍新方法使用，还指出在React中使用新方法有助于确保数组不可变，触发组件更新，提升代码清晰度并减少错误，且新方法在现代环境广泛支持 。 46 | 47 | -------------------------------------------------------------------------------- /docs/2021-12-22.md: -------------------------------------------------------------------------------- 1 | # 前端技术双周刊#13-2021.12.22 2 | 3 | ![前端技术双周刊](https://user-images.githubusercontent.com/9262426/147057545-85e992c0-25f3-41a1-9092-8e4c97355e82.png) 4 | 5 | ## JavaScript 6 | 7 | - [Deep-copying in JavaScript using structuredClone](https://web.dev/structured-clone/) 8 |
一个用于深拷贝的新 API，解决了痛点问题，不过目前支持程度还不是很好。 9 | 10 | - [Web 图像组件设计的最佳实践](https://mp.weixin.qq.com/s/-T5107cpL_HsW-JP6LeHSg) 11 |
看看 Next.js 中的 Image 组件设计有哪些可以借鉴之处。 12 | 13 | - [Performance Implications of JavaScript Errors](https://calendar.perfplanet.com/2021/performance-implications-of-javascript-errors/) 14 |
JavaScript 异常会对页面性能造成多大影响？ 15 | 16 | - [Array.prototype.groupBy to the rescue!](https://www.charpeni.com/blog/array-prototype-group-by-to-the-rescue) 17 |
groupBy 进入 stage 3 了，又一个 lodash 中的函数要被实现了。 18 | 19 | ## 包管理 20 | 21 | - [Enrolling all npm publishers in enhanced login verification and next steps for two-factor authentication enforcement](https://github.blog/2021-12-07-enrolling-npm-publishers-enhanced-login-verification-two-factor-authentication-enforcement/) 22 |
NPM 将强制所有有发包权限的用户使用更高安全级的登录方式，将分位几个步骤执行，最终希望所有重要包的作者都使用 2FA。这应该会避免很多恶意包的出现。 23 | 24 | ## 浏览器 25 | 26 | - [探秘 WKWebView](https://mp.weixin.qq.com/s/l9D4V0ON3uJ0HfsJ7bpJiQ) 27 |
详细了解 WKWebView。 28 | 29 | ## 开源产品 30 | 31 | - [Flutter 2.8 正式发布](https://flutter.cn/posts/announcing-flutter-2-8) 32 |
这次正式版主要关注的是移动平台性能，也包含了更方便的应用接入后端服务的特性。与此同时发布的还有 Dart 2.15 正式版，增加了对并发性能的重大改进，也添加了新的语言特性，比如构造函数拆分和枚举类型的增强，也进行了性能优化，使得运行时内存降低了 10%。 33 | 34 | - [VueUse](https://zhuanlan.zhihu.com/p/439711824) 35 |
VueUse 是一个基于 Composition API 的实用函数集合，帮助你快速实现一些常见的功能，让你在 Vue3 中开发更加得心应手。 36 | 37 | - [Tailwind CSS v3.0](https://tailwindcss.com/blog/tailwindcss-v3) 38 |
带来 JIT engine，Colored box shadows，Scroll snap API，Multi column layout 等大量新特性。 39 | 40 | - [Fastify 发布了 3.25.0，以及新的文档](https://github.com/fastify/fastify/releases/tag/v3.25.0) 41 |
新的文档分成了 Guides 和 Reference 两部分。https://www.fastify.io/docs/latest/ 42 | 43 | - [undici v4.12.0](https://github.com/nodejs/undici/releases/tag/v4.12.0) 44 |
undici 是 Node.js 官方开发的 http 1.1 网络库，用来解决 Node.js 中网络库使用太繁琐的问题。同类库有 node-fetch 等。新发布了 4.12.0 版本，离 stable 越来越近了。 45 | 46 | - [express v4.17.2](https://github.com/expressjs/express/releases/tag/4.17.2) 47 |
express 发布了新版本，主要是依赖的更新以及问题修复，还在更新的意义大于更新内容了。上次发布 4.17.1 还是在 2019 年五月，两年前了。 48 | 49 | ## 拓展阅读 50 | 51 | - [新书《程序员数学》](https://book.douban.com/subject/35689348/) 52 |
百度 KFive 团队翻译的新书上市，本书以程序员的方式来学习数学，希望大家喜欢。 53 |
![image](https://user-images.githubusercontent.com/9262426/147058254-5b2fac84-58ef-4774-ba74-9dae62f9eb51.png) 54 | 55 | - [React Conf 2021 Recap](https://reactjs.org/blog/2021/12/17/react-conf-2021-recap.html) 56 |
回顾 React Conf 2021。其中黄玄作为 Meta 员工，也以 React 开发者的身份进行了分享。 57 | 58 | - [2021 Linux Foundation annual report](https://www.linuxfoundation.org/tools/linux-foundation-annual-report-2021/) 59 |
年末了，很多人都在忙着写年度总结。先来看看 Linux Foundation 关于开源社区的年度总结吧。 60 | 61 | - [Node Congress 2022 February 17th–18th, 2022](https://nodecongress.com/) 62 |
又一个 Node.js 会议 63 | 64 | - [The Metaverse: Abstracted Reality And The Future Of Tokenized Life](https://pizzaparty.substack.com/p/the-metaverse-abstracted-reality) 65 |
元宇宙很火，但什么是元宇宙却没有定论。作者通过这篇文章描绘了他认为的元宇宙。 66 | 67 | - [Log4j vulnerability explained: Prevent Log4Shell RCE by updating to version 2.17.0](https://snyk.io/blog/log4j-rce-log4shell-vulnerability-cve-2021-4428/) 68 |
近期 Log4j 库的漏洞影响很大，这篇文章介绍了漏洞的原理以及解决方式。该漏洞虽然不会影响到写 JS 的同学，但这一事件可以引发很多思考。 69 |
首先还是老生常谈的依赖库安全问题，对于线上项目，一定要检查自己项目的依赖，及时跟进依赖安全问题。[Why you should check-in your node dependencies](https://www.jackfranklin.co.uk/blog/check-in-your-node-dependencies) 70 |
再来就是目前的开源社区模式，很多重要的基础库是由一些单纯出于爱好的开发者维护的，由于这些库过于底层，他们可能没有什么名气，并不会因为这个库获得收入。但这种纯粹出于爱好的维护行为是否能够持续，是值得商讨的。或许随着开源社区发展，sponsor 制度可以被更多人接受，又或者我们可以有一种其他的激励付费制度提供给开源项目维护者。[PROFESSIONAL MAINTAINERS: A WAKE-UP CALL](https://blog.filippo.io/professional-maintainers/?utm_campaign=Adventures%20in%20Nodeland&utm_medium=email&utm_source=Revue%20newsletter) 71 | ![image](https://user-images.githubusercontent.com/9262426/146879059-22179038-32e5-41cd-97b3-15fa38c758f0.png) 72 | -------------------------------------------------------------------------------- /docs/2025-8-22.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.08.22 2 | 3 | - ![image](https://gips3.baidu.com/it/u=2264738293,3247770543&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f960_412) 4 | 5 | ## 前端技术 6 | - [Node.js v24.6.0 (Current) ](https://nodejs.org/en/blog/release/v24.6.0) 7 |
Node 24.6允许您通过设置`Node_use_system_CA`环境变量`la--use system CA`来使用系统的可信证书，zlib 添加了 Zstd 字典支持，http 为服务器添加了`keepAliveTimeoutBuffer`选项。 8 | 9 | - [TypeScript 5.9](https://devblogs.microsoft.com/typescript/announcing-typescript-5-9/) 10 |
TypeScript 5.9 发布。它在多方面改进，如`tsc --init`生成的`tsconfig.json`更精简实用；新增`import defer`语法支持模块延迟求值，利于条件加载模块；添加 `--module node20` 稳定选项；为 DOM API 添加摘要描述；预览可扩展悬停功能、支持配置悬停最大长度；在缓存实例化和避免闭包创建上优化性能；还介绍了行为变化及对后续版本展望，如 TypeScript 6.0 作为过渡版本，帮助开发者为 TypeScript 7.0 做准备。 11 | 12 | - [Get the Number of auto-fit/auto-fill Columns in CSS](https://frontendmasters.com/blog/count-auto-fill-columns/?utm_source=CSS-Weekly&utm_campaign=Issue-618&utm_medium=web) 13 |
Ana Tudor展示了如何使用容器查询单元、CSS变量和CSS数学函数来获取CSS中自动拟合/自动填充列的数量。 14 | 15 | - [TC39 Advances 11 Proposals for Math Precision, Binary APIs, and More](https://socket.dev/blog/tc39-advances-11-proposals-for-math-precision-binary-apis-and-more) 16 |
在 7 月下旬的第 109 次会议上，负责 JavaScript 语言发展的 TC39 推进了 11 项提案。其中两项进入第 4 阶段，意味着将被纳入下一版 JavaScript 标准；另有多项进入第 3 阶段，离最终批准不远。这些提案涵盖多方面，如新增精确求和方法 `Math.sumPrecise`、为 Uint8Array 添加转换方法、新增迭代器拼接方法等。此外，还有些提案处于第 2.7、2 阶段，另有三项新提案进入第 1 阶段。这些提案将对开发者编写代码产生重要影响。 17 | 18 | ## AI 资讯 19 | - [百度上线蒸汽机2.0视频生成大模型](https://huixiang.baidu.com) 20 |
8月21日，百度蒸汽机（MuseSteamer）音视频一体化模型完成重大升级，在行业内首次实现多人有声视频一体化生成。其Turbo版、Lite版、Pro版及全系有声版全面开放 21 | 22 | - [百度上线一站式 AI 视频平台](https://miaobi.baidu.com) 23 |
百度 pc&移动端 上线 miaobi 一站式视频创意助手，AI 智能创作视频，支持一句话生成视频，进行分镜粒度修改，提供丰富的模板效果，操作简单、可控性强、效果优质 24 | 25 | - [DeepSeek-V3.1 发布，迈向 Agent 时代的第一步](https://mp.weixin.qq.com/s/WUbmBSapVyvxZe6HobD5Qw) 26 |
DeepSeek-V3.1 正式发布。此次升级带来混合推理架构，兼具思考与非思考模式；提升思考效率，能更快给出答案；增强 Agent 能力，在工具使用等方面表现更佳 27 | 28 | - [字节开源大型语言模型 Seed-OSS-36B](https://github.com/ByteDance-Seed/seed-oss) 29 |
字节跳动开源 360 亿参数的 Seed-OSS-36B ，采用 Apache-2.0 开源协议。其亮点众多，有原生 512K 超长上下文，还引入 “思考预算” 机制。模型架构成熟，提供含与不含合成指令数据的基座模型。在多项基准测试中表现出色，如推理能力在 BBH 测试刷新开源记录 30 | 31 | - [GPT-5](https://openai.com/zh-Hant/index/introducing-gpt-5/) 32 |
OpenAI 推出迄今最强大的 GPT-5，智慧大幅进化。它集多种特色于一体，在编程、写作、健康等领域表现顶尖。其回应速度加快，在多项基准测试中刷新记录，在遵循指令、多模态等方面进步显著。同时，降低了幻觉率等问题，采用新安全训练，减少谄媚回应。GPT-5 开放所有用户使用，不同方案有不同使用限额 33 | 34 | - [Qwen-Image-Edit: 全能图像编辑，驱动内容创作提质增效](https://qwenlm.github.io/zh/blog/qwen-image-edit/) 35 |
Qwen-Image-Edit基于20B的Qwen-Image模型进步训练，将Qwen-Image的文本渲染能力延展至图像编辑领域，实现了对图片中文字的精准编辑 36 | 37 | - [Grok4 宣布永久免费](https://grok.com) 38 |
xAI 公司宣布了一个震惊全球的消息: Grok4 人工智能模型将对全球所有用户永久免费开放。 39 | 40 | - [Claude Sonnet 4 上下文窗口长度扩展至100万个Token](https://x.com/claudeai/status/1955299573620261343) 41 |
Claude Sonnet 4现在支持Anthropic API上100万个上下文标记，数量增加了5倍。在单个请求中处理超过75,000行代码或数百个文档。 42 | 43 | - [v0.app](https://vercel.com/blog/v0-app) 44 |
Vercel 旗下的 v0.dev 现已正式更名为 v0.app ，并上线了 Agent 模式。这个 AI 项目构建器现在升级为通用解决方案，仅需一个提示词就能自动生成完整的全栈应用。同时为了庆祝新版本发布，官方宣布 v0 将在未来4天内完全免费使用，并且每天都有挑战赛可以赢取更多免费额度。 45 | 46 | ## 拓展阅读 47 | - [Apache ECharts 6.0](https://echarts.apache.org/handbook/en/basics/release-note/v6-feature/) 48 |
自首次发布12年以来，ECharts又向前迈出了一大步。可视化类型从折线图、条形图和饼图到3D图形、日历和桑基图。v6带来了一种全新的设计语言、动态主题切换、暗模式支持、更多的图表类型等等。一定要享受100多个演示和GitHub仓库。 49 | 50 | - [Run Express.js on Cloudflare Workers](https://jross.me/run-express-js-on-cloudflare-workers/) 51 |
自 2025 年 8 月 5 日及 wrangler 4.28.0 起，Cloudflare Workers 扩展对 Node.js 的兼容性，可直接原生运行 Express.js 应用（生产环境可用性即将推出）。此前 Express.js 与 Cloudflare Workers 不直接兼容，如今通过特定兼容性标志和新 API 实现支持。文中给出了 Express.js 应用示例代码及 wrangler.toml 配置示例。虽然支持更多 Node.js 框架降低了新用户入门门槛，但像 Hono 等框架在现代 Cloudflare Workers 开发中仍是黄金标准，不过旧 Node.js 项目现在能更快速无缝迁移至 Workers。 52 | 53 | - [Sidequest.js](https://sidequestjs.com/posts/intro-to-sidequest/) 54 |
现代 Node.js 应用处理后台任务的传统调度器在分布式环境中有局限性，如缺乏跨节点可见性、在主线程运行任务可能阻塞进程。Sidequest.js 旨在解决这些问题，它是分布式后台作业系统，利用常用数据库协调多节点作业执行，保证任务仅运行一次，重任务在工作线程执行，不影响主应用线程。其 API 直观，开发者定义类并调用 enqueue 即可 55 | 56 | - [V8的JSON.stringify速度如何提高2倍以上](https://v8.dev/blog/json-stringify) 57 |
V8团队对JSON.stringify进行了涡轮增压，在使用V8 13.8及以上版本（如Chrome 138）时，为应用程序的许多常见任务提供了自动性能提升。 58 | 59 | -------------------------------------------------------------------------------- /docs/2025-12-5.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.12.05 2 | ![](https://gips0.baidu.com/it/u=3464174638,1275596596&fm=3028&app=3028&f=PNG&fmt=auto&q=90&size=f960_412) 3 | 4 | ## 前端技术 5 | - [Webpack Bundle Analyzer 5.0：可视化 Webpack 输出内容](https://github.com/webpack/webpack-bundle-analyzer) 6 |
这款官方 Webpack 插件与 CLI 工具通过交互式可缩放树形图展示打包内容，帮助开发者直观分析bundle体积构成，精准定位需要优化的资源。 7 | 8 | - [pnpm 10.24：新增自适应网络并发，速度再提升](https://pnpm.io/blog/releases/10.24) 9 |
以高效著称的快速包管理器 pnpm 迎来 10.24 版本，新增自适应网络并发功能，根据网络状态动态调整并发请求数量，大幅提升依赖安装速度。 10 | 11 | - [用“自销毁 CSS”安全增强 Web 组件](https://scottjehl.com/posts/web-component-self-destruct-css/) 12 |
文章分享了一种无需依赖 JavaScript 即可显示隐藏 Web 组件的方法，通过“自销毁 CSS”实现组件的安全增强，提升 Web 组件的兼容性与可用性。 13 | 14 | - [Chrome 开发者工具的 6 个隐藏技巧](https://www.readwriterachel.com/things-i-learned/2025/11/09/devtools-1.html) 15 |
本文介绍了 3 个鲜为人知的 Chrome DevTools 实用功能，包括时间函数控制、DOM 观察、用户操作回放等。另外 3 个见 https://www.readwriterachel.com/things-i-learned/2025/11/17/devtools-2.html 16 | 17 | - [CSS 继承与属性值共享的深层解析](https://css-tricks.com/on-inheriting-and-sharing-property-values/) 18 |
深入探讨 CSS 继承机制与计算值的工作原理，分析属性值跨属性共享的难点，并提出了一个假设性的 compute() 函数方案，用于直接获取其他属性的值。 19 | 20 | - [样式查询的范围语法详解](https://una.im/range-style-queries) 21 |
样式查询迎来功能升级，Una 讲解了样式查询如何像媒体查询、容器查询一样，支持根据值的范围进行响应式适配，而非局限于预设状态，文末附有可直接参考的演示案例。 22 | 23 | - [CSS 子网格解锁全新布局方案](https://www.joshwcomeau.com/css/subgrid/) 24 |
这是一篇关于 CSS 子网格的优质教程，目前所有主流浏览器均已支持该特性。作者表示原本以为子网格只是便捷工具，实际使用后发现它解决了 CSS 布局中长期存在的痛点，能实现多种新颖 UI 效果。 25 | 26 | - [Ant Design 6.0：适配 React 19 的企业级 UI 组件库](https://github.com/ant-design/ant-design/issues/55804) 27 |
主流 React 企业级 UI 组件库推出 6.0 版本，为 5.x 版本用户提供平滑迁移方案，重点优化了组件性能，并全面适配 React 19 新特性。 28 | 29 | ## AI 资讯 30 | - [阿里 AIDC-AI 团队发布 Ovis-Image-7B 模型：用 7B 参数拿下 14 项 SOTA](https://huggingface.co/AIDC-AI/Ovis-Image-7B) 31 |
Ovis-Image 是一款 70 亿级文本到图像生成模型，其文本渲染质量可与 Qwen-Image 等规模更大的 200 亿级系统相媲美，并且在以文本为中心的场景中可与 GPT4o 等领先的闭源模型相媲美，同时体积足够小，可在广泛可用的硬件上运行。 32 | 33 | - [豆包图像创作模型 Seedream 4.5 发布](https://seedream4.org/) 34 |
火山引擎正式发布豆包图像创作模型 Doubao-Seedream-4.5（以下简称 Seedream 4.5），现面向用户开启公测。新一代模型在主体一致性、指令遵循精准度、空间逻辑理解及美学表现力等方面实现迭代，进一步提升了图像生成的整体质量与稳定性。目前，Seedream 4.5 已全面支持广告营销、电商运营、影视制作、数字娱乐及教育等核心场景应用。 35 | 36 | - [字节跳动发布模型 Vidi2：120亿参数，让视频编辑彻底自动化](https://bytedance.github.io/vidi-website/) 37 |
字节跳动发布了其最新的多模态大语言模型 Vidi2，一个拥有 120 亿参数、专用于视频理解的 AI 模型。该模型能够处理数小时长的原始素材，理解其中的故事脉络，并根据简单提示生成完整的 TikTok 短视频或电影片段，被视为对现有视频编辑行业的重大颠覆。 38 | 39 | - [DeepSeek-Math-V2 正式发布：开源模型首次以金牌成绩征服国际数学奥林匹克](https://github.com/deepseek-ai/DeepSeek-Math-V2) 40 |
DeepSeek 正式发布 DeepSeek-Math-V2，这款 6850 亿参数的混合专家（MoE）模型成为全球首个以开源形式达到国际数学奥林匹克(IMO)金牌水平的数学推理大模型。该模型基于 DeepSeek-V3.2实验版基础架构开发，以 Apache2.0开源协议完整放出权重，在数学推理能力上实现了质的飞跃。 41 | 42 | - [Anthropic 发布 Claude Opus 4.5，强化编码与长任务处理](https://www.anthropic.com/news/claude-opus-4-5) 43 |
Anthropic 宣布推出其最新 AI 模型 Claude Opus 4.5，定位为一款在编码、智能体以及计算机操作方面表现领先的通用模型，并在深度研究、演示文稿处理以及电子表格任务上实现了实质性提升。 44 | 45 | - [亚马逊云科技发布三款新AI智能体，Kiro 可持续自主编程数日](https://kiro.dev/) 46 |
亚马逊云科技（AWS）近日推出三款新型 AI 智能体，旨在提高软件开发和运维效率。其中最引人注目的是名为 Kiro 的自主智能体，它能够连续工作数天，学习用户的偏好并独立完成复杂任务。 47 | 48 | - [谷歌 AI 搜索体验“提速”，新设计实现无缝对话，Gemini3 Pro 杀入 120 国市场](https://google.com/ai) 49 |
谷歌公司正在采取一系列举措，旨在让其人工智能（AI）模式和功能更加普及和易用。一方面，谷歌正在测试新的设计，以优化用户从 AI 概览到 AI 模式的过渡体验；另一方面，Gemini3 Pro 模型正在进行大规模国际扩张。 50 | 51 | - [Runway 发布全新 Gen-4.5 视频生成模型，提升创作与视觉质量](https://runwayml.com/research/introducing-runway-gen-4.5) 52 |
Runway 发布了其最新的视频生成模型 Gen-4.5，显著提升了视觉准确性和创意控制，适用于社交媒体短视频创作。 53 | 54 | - [DeepSeek-V3.2 正式发布，引入创新稀疏注意力架构，API 成本腰斩，性能比肩顶尖闭源模型](https://mp.weixin.qq.com/s/ohsU1xRrYu9xcVD7qu5lNw) 55 |
中国人工智能初创公司深度求索（DeepSeek AI）发布了DeepSeek-V3.2系列模型，包括DeepSeek-V3.2及其高计算增强版DeepSeek-V3.2-Speciale。新模型引入了创新的稀疏注意力机制(DSA)，提升了长文本任务的效率，并降低了API成本。DeepSeek-V3.2-Speciale版本在高难度推理任务中表现出色，甚至超越了GPT-5。此外，该模型还提供了开源内核和演示代码，支持研究人员和企业进行商业部署。 56 | 57 | ## 拓展阅读 58 | - [TypeScript 核心成员透露 6 与 7 版本规划](https://share.transistor.fm/s/ad05eae6) 59 |
TypeScript 团队的 Daniel Rosenwasser 和 Jake Bailey 做客 TypeScript.fm 播客，分享了 TypeScript 6 版本的后续优化方向及 7 版本的核心开发计划，为开发者提前预判技术趋势提供参考。 60 | 61 | - [2025 年 11 月 18 日 Cloudflare 大规模服务中断事件复盘](https://blog.cloudflare.com/18-november-2025-outage/) 62 |
11 月 18 日，Cloudflare 网络遭遇持续数小时的严重故障，导致全球范围内大量网站访问异常。官方复盘报告指出，数据库权限变更为此次故障的直接原因。该事件再次凸显了 Cloudflare 与 AWS 等服务商在现代网络基础设施中的关键地位。 63 | 64 | -------------------------------------------------------------------------------- /docs/2025-4-10.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.04.10 2 | 3 | ![](https://gips1.baidu.com/it/u=1313554009,1261895466&fm=3028&app=3028&f=JPEG&fmt=auto&q=85&size=f2090_896) 4 | 5 | ## 前端技术 6 | - [Writing a Tiny Undo/Redo Stack in JavaScript](https://blog.julik.nl/2025/03/a-tiny-undo-stack) 7 |
本文围绕 UI 中撤销栈的实现展开，先介绍了撤销功能的两种形式，指出多数应用所需的撤销栈特点。作者还分析了常见基于指针实现的弊端，提出用两个栈（撤销栈和重做栈）的新思路，避免索引问题，并给出创建撤销栈的代码实现。此外，还探讨了 JavaScript 词法作用域带来的问题，通过 structuredClone() 方法解决，最终完成一个健壮、小巧且无索引错误的撤销栈创建函数。 8 | 9 | - [Anime.js 4.0: A JS Animation Library for the Web](https://animejs.com/) 10 |
Anime.js 是一款轻量级、高性能的 JavaScript 动画库，凭借其简洁的 API 和强大的功能，成为前端开发者实现复杂动画的首选工具，目前在 Github 上已经获得 53.3K 的 Star。近期，备受开发者关注的前端动画库 Anime.js 正式发布了 V4 版本，这一版本的发布不仅带来的全新的模块化 API 和显著的性能提升，还增强了与主流前端框架（如 Vue）的兼容性。 11 | 12 | - [Crafting Strong DX With Astro Components and TypeScript](https://css-tricks.com/crafting-strong-dx-with-astro-components-and-typescript/) 13 |
本文详细解析如何通过 Astro 组件与 TypeScript 结合优化开发者体验。以 Heading 组件开发为例，演示了从动态选择HTML元素，到添加字体大小、粗细等样式属性的完整流程，特别针对类型校验缺失、语义结构破坏等潜在问题，展示了如何利用 TypeScript 类型系统增强代码健壮性。该实践方案可帮助团队创建更可维护的组件体系，有效减少运行时错误并提升开发效率。 14 | 15 | - [How the Node Team Makes Node.js Downloads Reliable](https://nodejs.org/en/blog/announcements/making-nodejs-downloads-reliable) 16 |
我相信我们大多数人都依赖于简单的操作，即点击并下载 Node.js（或者让包管理器或 CI 过程自动完成），然后它就能正常工作。事实证明，为了保持 Node.js 的快速和便捷下载，幕后的工作量非常大。这篇文章讲述了一项每月提供超过 3PB 流量的服务的完整故事。 17 | 18 | ## AI 资讯 19 | - [1小时暴涨100万用户！GPT-4o新功能彻底杀疯了，免费使用](https://mp.weixin.qq.com/s/yOoEjgm7cOPKdIXlaTa0zw) 20 |
GPT-4o 在发布将近一年后，因文生图功能再次受到广泛关注，在一小时内新增 100 万用户，实现病毒式传播。具有超强的图像控制、文本还原能力、逼真的画面，易使用，支持吉卜力风格等特色功能。具备画笔编辑功能，用户可修改图片细节，同时 GPT-4o 现在可以显示推理时间与思维链过程，这可能意味着 OpenAI 正在合并推理与非推理模型。 21 | 22 | - [智谱打造的免费可用的智能Agent产品 AutoGLM 沉思全量上线](https://autoglm-research.zhipuai.cn/) 23 |
3 月 31 日，智谱官宣了新一代 Agent 产品「AutoGLM 沉思」，具有以下特点：既能深度研究又能动手操作；能够自动操作和浏览网页，查看不对外开放 API 的信源，如知网、小红书、公众号、京东等；基于多模态理解能力，充分利用网页上的图文信息。 24 | 25 | - [Meta 发布最新 AI 大模型 Llama 4](https://baijiahao.baidu.com/s?id=1828612614870809121&wfr=spider&for=pc) 26 |
Meta 公司在 4 月 5 日发布了其大型语言模型 Llama 的最新版本 Llama 4 Scout 与 Llama 4 Maverick。Meta 在声明中表示，Llama 4 是一个多模态 AI 系统，能够处理和整合文本、视频、图像、音频等多种数据类型，并能在不同格式之间实现内容转换。据介绍，Scout 和 Maverick 是该公司首款采用混合专家架构(MoE)的模型，两者均以开源形式发布。此外，Meta 还预告了 Llama 4 Behemoth，称其为“全球最聪明的语言模型之一，将作为未来模型训练的教师模型”。官方介绍：https://ai.meta.com/blog/llama-4-multimodal-intelligence/ 27 | 28 | - [字节跳动公布 MegaTTS3](https://www.163.com/dy/article/JS7T7S6905566WT8.html) 29 |
字节跳动近日发布其最新的文本转语音（TTS）模型 MegaTTS3。根据技术社区反馈和官方信息，MegaTTS3 被誉为语音合成领域的一次重要进步。MegaTTS3 是一款由字节跳动与浙江大学合作开发的开源语音合成工具，其主干模型仅包含 0.45 亿个参数，相较于传统大型 TTS 模型显得异常轻量。这一设计不仅降低了计算资源需求，还使其更适合在资源受限的设备上部署，例如移动设备或边缘计算场景。项目地址：https://github.com/bytedance/MegaTTS3 30 | 31 | - [点名DeepSeek？一文解析”最强大模型“Llama-4到底是王者归来 还是 困兽犹斗?](https://juejin.cn/post/7490686860089917476) 32 |
本文从技术人角度，全面剖析了 Llama4 大模型，并回顾了 Llama 模型历史，指出 Llama4 借鉴了 DeepSeek 的架构、训练思路与商业策略，但同时也具备多模态等创新特性。然而，多方评测显示，Llama4 在编程、逻辑、文本等能力上表现不佳，甚至还传出将测试集混入训练数据的丑闻。它的原生多模态能力虽有亮点，但整体表现不尽人意，作者也建议我们要根据不同工作场景选择合适的模型 。 33 | 34 | ## 扩展阅读 35 | - [State of Vue.js Report 2015](https://www.monterail.com/stateofvue) 36 |
在 Vue 和 Nuxt 团队的支持下创建的这份报告，它不仅仅是统计数据和图表的集合，而是对这两个项目现状的全面更新，并且包含对尤雨溪关于 Vue（以及 Vite）最新发展的采访，也是目前了解 Vue 和 Nuxt 现状及未来的一站式资料。 37 | 38 | - [为什么 AI Agent 需要自己的浏览器？](https://mp.weixin.qq.com/s/n0XrUIefTRSZpndtvuSdXA) 39 |
浏览器的使用者正在逐渐从人类用户转移到 AI Agent，Agent 与互联网环境互动的底层设施也因此正在变得越来越重要，传统浏览器无法满足 AI Agent 自动化抓取、交互和实时数据处理的需求。本文编译自 Browserbase 创始人早期备忘录，阐述了技术革新必要性与可行性，分析了现有浏览器不足，并描绘了新一代 Headless Browser 蓝图，探讨配套 SDK 和 API 设计，以降低 AI 与网页交互门槛和成本。Browserbase 创始人 Paul Klein 早在 23 年底就意识到 AI Agent 需要 “为 AI 而生” 的云端浏览器。Browserbase 作为 headless browser 服务提供商，推出 StageHand 框架拓展影响力。 40 | 41 | - [用一句话完成回归测试——多模态大模型与Prompt工程在前端自动化中的融合探索](https://mp.weixin.qq.com/s/Pmwq4mtD42II9dGlHfMhmw) 42 |
雪球 QA 团队研究了多模态大模型与 Prompt 工程在前端自动化测试领域的运用，提出了用一句话完成回归测试的概念，通过大模型的语义理解和图像分析能力，实现了自然语言到测试用例的转换，提升了测试效率和准确性。本文结合其团队 Q1 的工程实践，验证了多模态大模型在前端自动化测试中的可行性，但同时也认识到，AI 技术落地的过程是系统工程能力与技术敏感度的双重加持，文末还指出了三个接地气的经验：多模型协同的必要性，打造模型间的 “资产配置”；“套壳” 不是一件简单的事，本地化适配工程需要同步助力；把 AI 的 “幻觉” 逐步调试收敛为确定性。 43 | 44 | - [AI驱动编程：真能让小白成为开发高手吗？](https://mp.weixin.qq.com/s/I1wez7lQ8dtKz8fNJxsmLg) 45 |
随着 2025 年的到来，生成式 AI（GenAI）正以前所未有的速度和深度，改变着软件工程的实践方式。本文从多个角度分析了 AI 驱动编程，并指出 AI 工具为软件开发注入了新的活力，但它的作用更多是辅助，而非取代开发者。真正卓越的软件不仅需要高效的工具支持，更需要开发者的创造力、判断力和技术深度。开发者只有在与 AI 的协作中保持主动性，同时坚持工程实践的高标准，才能在 AI 驱动的新时代中脱颖而出，共同推动软件开发的未来。 46 | -------------------------------------------------------------------------------- /docs/2025-3-14.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.03.14 2 | ![image](https://gips1.baidu.com/it/u=4019733696,287750149&fm=3028&app=3028&f=PNG&fmt=auto&q=75&size=f2090_896) 3 | 4 | ## 前端技术 5 | - [Announcing TypeScript 5.8](https://devblogs.microsoft.com/typescript/announcing-typescript-5-8/) 6 |
本文宣布TypeScript 5.8发布。介绍了自测试版和候选发布版后的新特性，如对返回表达式中的分支进行更精细检查；在--module nodenext标志下支持require() ECMAScript模块，新增稳定的--module node18标志；新增--erasableSyntaxOnly、--libReplacement标志；保留声明文件中计算属性名称。还提及程序加载和更新的优化，以及lib.d.ts、导入断言限制等方面的行为变化。 7 | 8 | - [你知道有哪些不常用，但非常有用的css属性吗?](https://juejin.cn/post/7471301491270877220) 9 |
文章介绍10个不常用却实用的CSS属性，它们能解决特定场景下的复杂问题，甚至替代部分 JavaScript 功能。还给出了兼容性策略建议。 10 | 11 | - [JavaScript best practice: use return await](https://advancedweb.hu/shorts/javascript-best-practice-use-return-await/) 12 |
文章探讨JavaScript中“return await”的最佳实践。常见模式是调用异步函数并返回其结果，看似“await”可省略。但添加“try..catch”块后，有无“await”情况不同。有“await”时，函数执行暂停，异常能被捕获；无“await”时，函数提前结束，异常未被处理。这种情况不仅在“try..catch”存在，“try..finally”块用于清理时也如此，如创建临时目录并在函数结束后删除的场景，“await”能确保清理操作在函数完成后执行。 13 | 14 | - [你的骨架屏用对了吗?](https://juejin.cn/post/7457067508152287283) 15 |
文章深入探讨骨架屏相关内容。先回顾其诞生背景，指出其优势在于及时反馈和连贯性。接着通过案例揭示当前骨架屏使用存在的问题，如受工具限制、效果不佳等。随后阐述好的骨架屏应具备更细粒度变化、彩色、动效等特点，其终极目标是“消失”。还讨论了骨架屏与量化指标，强调其属于体验优化，使用时应结合实际需求制定指标。总之，做好骨架屏要以提升用户体验为核心，掌握原则可让其有多样形式并与其他优化结合。 16 | 17 | ## AI资讯 18 | - [OpenAI深夜大招暴打Manus！智能体全家桶杀器一统API，4行代码轻松上手](https://mp.weixin.qq.com/s/BwFC7TvT34yo5gt6DsrLMQ) 19 |
OpenAI推出全新API和工具助力智能体开发。新Responses API结合Chat Completions API简单性与Assistants API工具使用功能；内置网络、文件搜索及计算机使用三大工具，各有优势与新特性；开源Agents SDK简化多智能体工作流管理。新工具简化了智能体开发流程，降低开发难度，提升开发效率，让ChatGPT和开发者工具升级，推动智能体应用迈向新高度。 20 | 21 | - [Manus – Monica.im 推出的全球首款通用型 AI Agent](https://ai-bot.cn/manus/) 22 |
3月6日凌晨，所有人都被一个名为Manus的产品刷屏了。据其团队介绍，Manus是一个真正自主的AI代理，能够解决各类复杂多变的任务。与传统AI助手不同，Manus不仅能提供建议或答案，还能直接交付完整的任务成果。今年晚些时候，官方将计划开源其中的一些模型，特别是 Manus的推理部分。根据官方网站信息，在GAIA基准测试中，Manus在所有三个难度级别上都取得了新的最先进 (SOTA) 表现。官网地址：https://manus.im/ 23 | 24 | - [Trae 国内版发布](https://www.trae.com.cn/) 25 |
Trae作为国内首个AI IDE，能深度适配中文开发场景，配置 Doubao-1.5-pro，并支持切换满血版 DeepSeek R1、V3 模型。它将AI高度集成在IDE环境里，与普通AI插件相比，能为开发者带来更流畅、准确和优质的开发体验。 26 | 27 | - [Introducing NextGenAI: A consortium to advance research and education with AI](https://openai.com/index/introducing-nextgenai/) 28 |
OpenAI 发起NextGenAI联盟，携手15家顶尖研究机构利用AI推动研究突破与教育变革。OpenAI投入5000万美元资金及工具，联盟汇聚美国内外多所高校及机构。各成员积极运用AI应对重大挑战，如俄亥俄州立大学推动多领域发展，哈佛与波士顿儿童医院助力医疗进步。同时，联盟助力培养AI人才，探索AI在高校与图书馆应用，加强产学研合作，推动AI惠及全球多领域。 29 | 30 | - [谷歌宣布推出AI Protection功能](https://cloud.google.com/blog/products/identity-security/introducing-ai-protection-security-for-the-ai-era) 31 |
谷歌宣布推出AI Protection功能，该功能旨在保护跨云和跨模型的人工智能工作负载和数据。AI Protection将通过以下三种方式帮助团队全面管理AI风险：1.发现AI库存并评估其潜在漏洞；2.通过控制、策略和护栏保护AI资产；3.通过检测、调查和响应能力管理针对人工智能系统的威胁。 32 | 33 | - [通义App全新升级](https://w.geekpark.net/news/346751) 34 |
3月10日通义App升级，上线超级智能体并融入通义千问QwQ - 32B能力。以超级智能体为交互中枢重塑交互，能理解图片、生成图片等。界面定位更清晰，左右滑有不同功能。上线“Qwen-QwQ-32B”智能体，可深度分析复杂问题。未来将持续引入新模型能力。此外，专业能力升级，增加思维导图生成功能。 35 | 36 | - [QQ浏览器推出AI问答功能“元宝快答”](https://www.aibase.com/zh/news/16090) 37 |
3月7日，QQ浏览器推出AI问答功能“元宝快答”。它基于腾讯混元“快思考”模型Turbo S及搜索增强技术，能快速检索全网实时信息并提炼重点。在手机或电脑端提问，无论简单或复杂问题，都能瞬间获得精炼回答。用户若想深入了解，可查看引用原文或进行AI追问。该功能体现了QQ浏览器对用户体验的优化和在AI技术应用上的创新，为用户带来高效便捷的搜索方案。 38 | 39 | ## 扩展阅读 40 | - [尤雨溪在2025年Vue.js nation大会上的分享内容](https://blog.csdn.net/qiwoo_weekly/article/details/145866166?spm=1001.2014.3001.5502) 41 |
文章分享尤雨溪在2025年Vue.js nation大会内容。Vue 3.6有诸多革新，响应式系统引入“alien signals”，性能大幅提升，内存占用降低；全新编译策略“Vapor mode”采用混合编译，性能比肩顶尖框架。还改进组件类型推断，推出新打包工具“rolldown”。此外，设立“社区代码高速公路”计划促进社区共建。这些变革让Vue实现多方面优化，重新定义前端框架性能基准，进入“性能优先”新纪元。 42 | 43 | - [A CSS-Only Star Rating Component and More! ](https://css-tricks.com/a-css-only-star-rating-component-and-more-part-1/?utm_source=CSS-Weekly&utm_campaign=Issue-607&utm_medium=web) 44 |
文章主要介绍了仅用CSS创建星级评分组件及更多相关内容。先阐述给原生输入元素（如input）添加样式的难点，随后详细讲解星级评分组件的CSS实现步骤，包括设置主元素大小、用遮罩创建星星形状，以及通过调整拇指元素样式实现选中效果等，还涉及半星评分、键盘调整评分等功能。此外，展示了多种利用相同代码结构创建的组件示例，如心形、蝴蝶形状组件及音量控制组件等，仅用少量CSS代码就能升级原生组件。 45 | 46 | - [Our Favorite DevTools Features of 2025](https://www.debugbear.com/blog/favourite-devtools-features-in-2025?utm_source=CSS-Weekly&utm_campaign=Issue-607&utm_medium=web) 47 |
文章介绍2025年Chrome DevTools的8个实用新特性。包括可从大型DOM树中查找性能瓶颈；通过过滤第三方脚本专注自身代码；在不改变浏览器设置下测试无第三方Cookie时网站的运行情况；利用校准CPU节流模拟真实设备；借助人工智能分析性能记录；检测导致页面变慢的布局抖动；在性能记录中添加自定义跟踪；借助可视化指示器轻松发现可滚动区域。这些特性有助于开发者调试和优化网页应用，提升开发效率。 48 | 49 | - [Node just added TypeScript support. What does that mean for Deno?](https://deno.com/blog/typescript-in-node-vs-deno) 50 |
文章对比了Node和Deno对TypeScript的支持情况。Node.js在22.6版本引入内置TypeScript支持，23.6版本稳定，可直接执行TypeScript文件，但存在无内置类型检查、不支持JSX或TSX、需手动管理tsconfig.json等局限。Deno则提供集成式TypeScript工具链，具备多种优势，如零配置开发、可在CI中便捷进行类型检查、在REPL和Jupyter Notebook中直接运行TypeScript等，且在工具链各环节广泛支持TypeScript。 51 | 52 | -------------------------------------------------------------------------------- /docs/2025-11-21.md: -------------------------------------------------------------------------------- 1 | # 前端&AI技术双周刊-2025.11.21 2 | 3 | ![image](https://gips2.baidu.com/it/u=3588073201,1816596359&fm=3028&app=3028&f=PNG&fmt=auto&q=100&size=f960_412) 4 | 5 | ## 前端技术 6 | - [Security Best Practices](https://nodejs.org/en/learn/getting-started/security-best-practices) 7 |
Node.js项目维护了一个关于安全最佳实践的页面，该页面围绕如何缓解十大最重要的攻击向量进行组织。主题包括网络漏洞、定时攻击、供应链攻击以及内建函数的补丁。 8 | 9 | - [pnpm 10.21](https://pnpm.io/blog/releases/10.21) 10 |
pnpm 10.21 发布，当设置为 “no-downgrade” 时，若软件包的信任级别相较于之前版本降低，pnpm 将安装失败。比如，若某个软件包之前由受信任发布者发布，如今只有出处信息或无信任证据，安装就会失败。这一特性有助于防止安装可能存在安全问题的版本，保障软件包安装的安全性 。 11 | 12 | - [esbuild 0.27](https://github.com/evanw/esbuild/releases/tag/v0.27.0) 13 |
esbuild 发布 v0.27.0 版本。此版本有向后不兼容的更改，建议在 package.json 中固定版本或使用仅接受补丁升级的版本范围语法。其改进包括，二进制加载器在可用时使用 Uint8Array.fromBase64 函数，不可用时则用旧代码；Go 编译器从 v1.23.12 更新到 v1.25.4，这提升了运行 esbuild 的操作系统要求，Linux 需内核 3.2 或更高版本，macOS 需 12（Monterey）或更高版本 。还提供了源代码（zip 和 tar.gz）下载。 14 | 15 | - [Node.js v25.2.0 (Current)](https://nodejs.org/en/blog/release/v25.2.0) 16 |
该版本的核心更新是将“类型剥离”功能标记为稳定版，开发者可更可靠地移除代码中的类型注解，优化生产环境代码体积。 17 | 18 | - [Secure coding in JavaScript](https://stackoverflow.blog/2025/10/15/secure-coding-in-javascript/) 19 |
JavaScript 作为互联网前端语言，易成为攻击目标。文章给出十条安全编码建议 20 | 21 | - [Snapchat 开源 Valdi](https://github.com/Snapchat/Valdi) 22 |
Snapchat 背后的团队开源了一个跨平台 UI 框架，该框架已在其生产应用中使用八年。开发者能用声明式 TypeScript 编写一次 UI，它能直接编译为 iOS、Android 和 macOS 上的原生视图，无需网页视图和 JavaScript 桥接，为跨平台 UI 开发提供了新的高效解决方案。 23 | 24 | ## AI 资讯 25 | - [ERNIE-5.0-Preview-1022](https://baike.baidu.com/item/%E6%96%87%E5%BF%83%E5%A4%A7%E6%A8%A1%E5%9E%8B5.0/66960333) 26 |
百度在百度世界大会上正式发布原生全模态大模型文心大模型5.0。2025年11月8日凌晨，LMArena大模型竞技场最新排名显示，文心全新模型ERNIE-5.0-Preview-1022在LMArena大模型竞技场文本排行榜与GPT-4.5-Preview并列全球第二、国内第一。 27 | 28 | - [Nano Banana Pro](https://blog.google/technology/ai/nano-banana-pro/) 29 |
谷歌推出全新图像生成与编辑模型 Nano Banana Pro 。它基于 Gemini 3 Pro 构建，利用先进推理和知识，能生成更精准、内容丰富的可视化图像，含多种语言清晰文本，创意能力升级，可实现元素融合、场景创作及精细创意控制。 30 | 31 | - [Polaris Alpha](https://www.aibase.com/zh/news/22705) 32 |
OpenAI 在 OpenRouter 低调上线 Polaris Alpha，虽未官宣，但被猜测为 GPT-5.1。它支持 256K 上下文窗口，知识库更新至 2024 年 10 月，长文档理解等能力出色，知识广度扩展，创意写作自然，编程能力强，能生成完整小游戏代码。 33 | 34 | - [Gemini 3](https://deepmind.google/models/gemini/) 35 |
11 月 19 日凌晨谷歌发布最强推理模型 Gemini 3，集原生多模态、推理、Agent 多种能力于一身。它基于谷歌 TPU 训练，支持大上下文窗口。 36 | 37 | - [GPT-5.1](https://openai.com/index/gpt-5-1-codex-max/) 38 |
OpenAI 推出新前沿智能编码模型 GPT‑5.1-Codex-Max。它基于基础推理模型更新构建，在开发周期各阶段更快、更智能、更省 token，适用于长时间、细节性工作。具备前沿编码能力，在多项评估中超越前代模型。 39 | 40 | - [Grok 4.1](https://grok.com/) 41 |
马斯克推出的 Grok 4.1 以 1483 Elo 分登顶 LMArena 智商榜、1586 Elo 分拿下 EQ-Bench 情商榜 ，实力远超谷歌 Gemini 2.5 Pro 等。同时其免费向网页端、iOS、Android 推出 beta 版，借此吸引大量用户，对谷歌、OpenAI 等造成冲击，也给普通人带来使用 AI 的好时机 。 42 | 43 | - [蚂蚁集团灵光App上线](https://news.mydrivers.com/1/1087/1087156.htm) 44 |
蚂蚁集团发布全模态通用 AI 助手 “灵光”，可在移动端 30 秒自然语言生成小应用 45 | 46 | - [OceanBase seekdb](https://www.oceanbase.ai/) 47 |
OceanBase发布并开源了其首款AI数据库OceanBase seekdb。开发者仅需三行代码，即可快速构建知识库、智能体等AI应用，轻松应对百亿级多模数据检索，真正实现“开箱即用”的AI数据基座。 48 | 49 | - [Inworld TTS](https://github.com/inworld-ai/tts) 50 |
Inworld TTS 为数字角色注入了情感与个性，能够在短至 0.25 秒内合成富有情绪和自然非言语细节的语音，使虚拟人物摆脱了“机械朗读”的刻板印象 。该系统融合了秒级声线克隆与 WebSocket 实时流式传输等前沿技术，实现了超低延迟、可随时打断的互动体验，极大提升了游戏 NPC 和智能客服的交流方式。 51 | 52 | - [Vinsoo AI IDE](https://www.aiyouthlab.com/) 53 |
Vinsoo Code推出全球首个云端多Agent团队IDE，实现项目级开发全自动 54 | 55 | ## 拓展阅读 56 | - [Safari 26.1](https://webkit.org/blog/17541/webkit-features-for-safari-26-1/) 57 |
本文介绍 Safari 26.1 的 WebKit 新特性与改进。新特性方面，重构渲染引擎处理 CSS 单位方式，使 SVG 引擎更易访问相对单位；对 CSS 锚点定位做了十几项改进，如记住最后成功的定位回退以减少布局跳跃。此外还有大量现有功能改进，涵盖可访问性、CSS、表单、PDF 等多个方面，修复众多问题，如修复滚动 iframe 内容的命中测试、改进某些选择器性能、修正原生文本输入背景颜色等 58 | 59 | - [Building a multi stage timetable with modern CSS using grid, subgrid, round (), and mod ()](https://9elements.com/blog/building-a-multi-stage-timetable-with-modern-css-using-grid-subgrid-round-and-mod/?utm_source=CSS-Weekly&utm_campaign=Issue-628&utm_medium=web) 60 |
本文详细介绍了如何运用现代 CSS 技术构建多阶段时间表。作者先搭建 HTML 基础结构，定义阶段和会话；接着在 CSS 中设置变量、构建网格并利用 subgrid 等实现会话布局。还介绍了添加小时指示器，使其具有粘性和滚动对齐效果。对于会话标题的粘性问题，通过添加 “假” 标题结合滚动驱动动画解决。文中用到的 round () 和 mod () 函数在多数浏览器受支持，作者也为旧浏览器准备了 JS 备用方案，对前端开发者有较高参考价值 。 61 | 62 | - [Fix "width: 100%" Overflow Easily](https://www.youtube.com/watch?utm_source=CSS-Weekly&utm_campaign=Issue-627&utm_medium=web&v=gbHhYpvP2Oc&feature=youtu.be) 63 |
关于即将推出的CSS中“stretch”值的简要指南，该值在考虑填充和边距的同时，强制元素占据父容器的100%宽度/高度，从而在不使用calc()或box-sizing的情况下，轻松防止不必要的溢出。 64 | 65 | - [The Web Animation Performance Tier List](https://motion.dev/blog/web-animation-performance-tier-list?utm_source=CSS-Weekly&utm_campaign=Issue-627&utm_medium=web) 66 |
文章围绕 Web 动画性能展开，先介绍浏览器渲染管道及线程相关知识，为动画技术分级做铺垫。将动画技术分为 S - F 级，阐述各级特点及示例。S 级可在合成线程运行，A - D 级依次性能递减，F 级是应避免的 “抖动” 情况。还提及诸多影响性能的因素，如 CSS 变量、SVG 属性、View Transitions 等，并给出优化建议。 67 | 68 | --------------------------------------------------------------------------------