State of Frontend 2024 & 1024 技术书单
周刊
国内
快手 - 在线表格渲染引擎 Kola2d
打造高性能在线电子表格:WebGL 渲染引擎 Kola2d 自研之路
https://mp.weixin.qq.com/s/oqG_IsF8cef8tP9M4X15hg
本文介绍了快手效率工程部开发的在线电子表格产品Docs，为提高渲染性能自研了基于WebGL的渲染引擎Kola2d。Kola2d通过硬件加速、并行处理等优势，实现了50+FPS的渲染性能，支持百万单元格的大表格。文章详细阐述了Kola2d的设计思路、职责范围、高效渲染原理以及针对多人协同场景的优化策略，为高性能在线表格的发展提供了有价值的参考。
58 - AI条漫创作
AI条漫速成秘籍!零基础变身漫画大师，免费工具大放送
https://mp.weixin.qq.com/s/fw1Pg1Guq5veKB8jCuPLEw
本文介绍了如何利用AI技术创作条漫，从提取核心内容到生成高质量图像的全过程。条漫适合手机阅读，设计灵活，易于理解。文章通过案例展示了AI在条漫创作中的应用，包括合规审查、政策解读等，强调了AI技术在提高漫画产出效率方面的优势。
58 - AI图像工具 Ideogram
AI这么厉害，能帮我直接出海报吗?
https://mp.weixin.qq.com/s/0Q7nsDIRJeTpLwVNk2x5UA
AI图像工具Ideogram能生成高质量的海报和字体设计，具有文本生成和排版的优势。用户只需提供详细提示词，Ideogram即可快速生成图像。尽管目前只支持英文，功能有待完善，但其设计能力已十分成熟，能显著提高设计效率。
哔哩哔哩 - Swift Macro
Swift Macro 在业务开发中的探索与实践
https://mp.weixin.qq.com/s/3eivuJtH6zcd123DUEgLhw
文章介绍了Swift Macro在业务开发中的应用，包括其在模块化开发和曝光场景中的实践。Swift Macro通过减少重复代码，提高开发效率和代码可读性。文章还讨论了Swift Macro的实现原理和不同类别的宏，以及它们在实际开发中的应用案例。
360 - 前端性能优化
前端性能优化
https://mp.weixin.qq.com/s/FnHHq9lmVH-Lb9m6n7JY0Q
本文介绍了前端性能优化的多种方法，包括资源压缩和最小化、使用CDN、浏览器缓存、异步和延迟加载技术，以及Vue中的异步组件加载和路由懒加载。还提到了监控和分析性能的重要性，并提供了一些额外的优化技巧。
CSS - Chrome 130 box-decoration-break
Chrome 130 新增对 box-decoration-break 属性的支持
https://mp.weixin.qq.com/s/Y7X1i4-sXCdF5Dt2KcBLXw
Chrome 130新增对CSS属性box-decoration-break的支持，允许开发者控制内联和块级内容碎片化的视觉效果。该属性有两个主要值：slice（默认）和clone，分别表示在每个碎片处切割盒模型和克隆装饰性样式。此外，该属性还影响background、border等CSS属性的表现。目前，box-decoration-break在Chrome 130+、Firefox 32+、Safari 7+、Edge 130+、Opera 15+等浏览器中均有支持。
转转 - 静态代码扫描
转转自建devops平台建设历程之静态代码扫描实践
https://mp.weixin.qq.com/s/mfTB2DMK5DrlXdPUIRimqQ
文章介绍了转转自建的devops平台beetle在静态代码扫描方面的实践。静态代码扫描有助于在开发测试阶段发现并修复安全漏洞和编码错误。转转使用beetle和sonarQube等工具，通过流水线管理和权限控制，实现了静态扫描的自动化和集成。文章还讨论了规则挑选、增量计算和推广流程等关键步骤，并总结了静态扫描在转转开发测试流程中的重要性。
阿里云 - AI 企业智能化
对话阿里云 CIO 蒋林泉:AI 时代，企业如何做好智能化系统建设?
https://mp.weixin.qq.com/s/PPVCM01nv8DQlOP8Si1RPA
阿里云CIO蒋林泉在InfoQ《C位面对面》栏目中讨论了AI时代企业CIO的角色转变、智能化转型路径、AI落地实践与人才培养。他强调CIO需要从信息管理转向智能系统建设，利用AI技术提升业务效率。蒋林泉分享了阿里云在AI领域的探索成果，包括CRM系统和aliyun.com的AI助理应用，以及如何克服部门墙阻力，推动企业信息系统智能化。他还讨论了知识库在AI时代的重要性，以及如何确保AI给出的答案是准确可靠的。对于技术储备不足的企业，他建议更多关注应用创新和业务目标，将底层技术交给服务商。
阿里云 - Agent 六顶思考帽
Agent 从想法到实现之六顶思考帽
https://mp.weixin.qq.com/s/R41HfOz8n8sHwqr9NO1sFQ
本文介绍了六顶思考帽的概念和优势，探讨了智能体的概念及其平台，并以创建六顶思考帽智能体为例，详细讲解了从想法到实现的全过程。文章强调了AI在提高决策全面性和团队协作效率方面的作用，并提醒读者在使用AI时要平衡独立思考。
阿里云 - AST 问题修复
实操|基于抽象语法树(AST)的代码问题修复
https://mp.weixin.qq.com/s/3g5aHnLXFoouqVKL3yXzvw
文章介绍了如何利用抽象语法树（AST）技术自动化解决前端代码治理问题，如未使用的变量或函数参数。通过解析、转换和生成三个阶段，使用工具如babel和eslint，实现代码的自动化调整。
京东金融 - 跨端框架
揭秘动态化跨端框架在鸿蒙系统下的高性能解决方案
https://mp.weixin.qq.com/s/jlKmIQqOLc8_UGOyIWCDWg
文章介绍了京东金融大前端团队研发的动态化跨端框架在鸿蒙系统下的高性能解决方案。通过使用方舟虚拟机和V8虚拟机，实现了业务代码的热更新和多线程架构，提升了性能。同时，引入JSI技术，减少了通讯成本，提高了线程通讯性能。文章还探讨了进一步优化的方向，如减少UI层级、降低通讯成本和将JS逻辑下沉到C++。
得物 - 流量巡检
增长在流量规则巡检的探索实践|得物技术
https://mp.weixin.qq.com/s/_-VHNG5IopTTXYTxxlQDLw
得物技术团队通过流量规则巡检实践，有效提升了生产稳定性。他们采用线上异常日志监控、数据核对等手段，通过编写校验业务规则，利用流量采集能力，完成全环境全流量的业务逻辑巡检校验。文章总结了流量规则巡检的优势，包括线上巡检、研发自测、需求右移、发布验证和线下拦截，并提出了易发现问题的场景。
AntV S2 - 多维表格 性能优化
玩转多维表格|性能优化大作战-海量数据加载、交互更丝滑
https://mp.weixin.qq.com/s/Oq9JfYQHP91Hs2wqJkbugQ
AntV S2 是一款高性能、易扩展的多维交叉分析表格，支持富交互和海量数据。它基于 Canvas 实现，使用 @antv/g 作为渲染引擎，优化了数据转换、层级结构生成和单元格信息获取等性能关键点。S2 采用树形结构的 Map 数据结构，实现了高效的数据查询。通过按需渲染和缓存设计，S2 在渲染性能上具有明显优势，支持百万级别数据的渲染。
Vue3.5 响应式重构
看不懂来打我!让性能提升56%的Vue3.5响应式重构
https://mp.weixin.qq.com/s/_KQyb9cQv-r-tR2gTT0ZCQ
Vue 3.5版本通过响应式重构，使用双向链表和版本计数实现性能提升56%。文章详细解释了新的响应式模型中Dep依赖、Sub订阅者和Link节点的工作原理，以及依赖收集和触发的过程。
国外
State of Frontend 2024
State of Frontend 2024
https://tsh.io/state-of-frontend/
报告提供了对前端开发领域的全面洞察，包括团队构成、技术栈、开发者和用户体验、行业趋势和未来预测。报告指出，React 和 Vue.js 保持流行，TypeScript 成为新标准，Vite 因其速度和简洁性受到青睐。AI 在前端开发中的应用越来越广泛，而可访问性仍然是一个挑战。报告还探讨了跨平台应用、全栈框架、GraphQL、微前端等技术的未来趋势。
ViteConf 2024
ViteConf 2024 was a blast
https://blog.stackblitz.com/posts/viteconf-2024-recap/
ViteConf 2024 回顾，这是第三届，规模最大，3.5 万成员注册。Vite 生态发展迅速，每周下载量达 1500 万且持续增长，核心库贡献者达 1000 人。会上有诸多发布，如 Evan You 创立公司、Vite 项目更新域名和页面、新的 Environment API 等，还有框架、测试、生产等多方面进展，多位演讲者分享成果并推动社区发展，最后感谢参与者并期待 2025 年的会议。
Vercel - microfrontends
How Vercel adopted microfrontends
https://vercel.com/blog/how-vercel-adopted-microfrontends
Vercel adopted vertical microfrontends for its main website. Initially a single Next.js app, growth led to issues like long build times. Using Turbo and Turbopack helped. They chose vertical over horizontal splits for microfrontends. Migration involved splitting into areas like marketing, docs, and dashboard. Incremental migration was done using Next.js Multi - Zones and feature flags. There were challenges like local testing and performance issues which they worked on, and they plan to further enhance microfrontends in future.
Next.js 15
Next.js 15
https://nextjs.org/blog/next-15
Next.js 15 正式稳定并可用于生产。它包含诸多新特性，如 @next/codemod CLI 便于升级，异步请求 API、缓存语义等有重大改变，支持 React 19，Turbopack Dev 稳定，还有新的静态指示器等。此外在表单增强、配置文件类型支持、自托管改进、服务器操作安全、外部包捆绑优化、ESLint 9 支持以及开发和构建性能提升等方面均有更新。
Google - Android 15 无边框设计
技巧干货分享 | Android 15 默认采用无边框设计后，边衬区如何处理?
https://mp.weixin.qq.com/s/NCiRQKjib7bccrdTRyKbcg
本文介绍了Android 15默认采用无边框设计后，如何通过多种API和属性处理边衬区，确保关键界面元素可访问。包括使用Material组件简化处理、绘制无边框背景、处理刘海屏和标题栏边衬区、处理列表项和IME边衬区、使用enableEdgeToEdge实现向后兼容等技巧。
Google - AI 挑战赛
即刻报名 | Google Chrome Built-in AI 挑战赛
https://mp.weixin.qq.com/s/RVT2Wmsu8hA5WXTVjmCvVg
Google Chrome Built-in AI 挑战赛邀请开发者使用集成AI模型和API创建Web应用和Chrome扩展程序。挑战赛设有16个奖项，总价值65,000美元。参与者有机会与Google团队交流并获得官方活动邀请。报名截至2024年12月4日。
Gartner - 2024新兴技术成熟度曲线
解读2024年Gartner Hype Cycle™ 新兴技术成熟度曲线
https://mp.weixin.qq.com/s/PgSO09eOk_Bk8v2jIM-n3Q
2024年Gartner新兴技术成熟度曲线聚焦能重塑商业模式的技术创新，涵盖自主AI、开发者生产力、全面体验和以人为本的安全隐私四大领域。这些技术为企业带来机遇和挑战，路线图指导企业评估技术影响，制定战略把握新兴技术。
产品/设计
盒马 - 自助收银
为了让你在盒马自助收银更省心，我们费了好多脑细胞
https://mp.weixin.qq.com/s/mQ-vnsj2uWtgMFdHsrO0Eg
盒马设计团队致力于提升自助收银体验，通过优化交互结构、支付流程、支付信息呈现和评价系统，以及创造更多运营价值，提高结算效率和顾客满意度。
百度APP - AI设计
AI创新设计:捏合总结的实践与思考
https://mp.weixin.qq.com/s/dTYZqGFUbiYLOq_yFeZMxg
本文介绍了百度APP新上线的「捏合总结」功能，探讨了如何将AI技术与设计思维结合，提升产品的智能感知和用户体验。文章从背景现状出发，介绍了捏合总结功能的设计过程，包括创新链路体验、AI智能化设计语言、结构化排版等方面，旨在提高用户获取信息的效率。
钉钉 - 产品文案
钉钉产品体验那些事:我们没有写好的 10 条产品文案
https://mp.weixin.qq.com/s/QHQ-bVB2KIF_x7QevH6P4Q
钉钉产品体验中，产品文案是容易被忽视的要素。文章介绍了产品文案的重要性，分享了钉钉在产品文案写作上的四个原则：清晰准确、友好尊重、简洁有效、表述一致。通过10个案例，展示了如何从用户视角出发，优化产品文案，提升用户体验。
行业/组织/个人
智谱 - 自主智能体 CogAgent AutoGLM-Web
自主 agent 的「一小步」:今天，把电脑交给大模型
https://mp.weixin.qq.com/s/8sDDAyRyG6rxOq-Rww0bmg
文章介绍了自主智能体在人工智能领域的最新进展，特别是CogAgent和AutoGLM-Web两个模型的应用。CogAgent能通过自然语言交互完成信息获取和功能触发，而AutoGLM-Web能模拟用户访问网页并执行任务。两者都旨在实现模仿人类的Plan-Do-Check-Act循环，以自我反馈和提升。
人工智能 LLM 自然语言处理
一文搞懂大模型!基础知识、 LLM 应用、 RAG 、 Agent 与未来发展
https://mp.weixin.qq.com/s/groI097gj0w7XMHIy3eERA
本文全面介绍了大型语言模型（LLM）的基础知识、应用场景及未来发展方向。文章首先解释了LLM的概念，探讨了其与自然语言处理（NLP）的关系，接着介绍了LLM在问答系统、文本处理等方面的应用，并讨论了通过提示词工程和本地知识库提升LLM性能的方法。文章还介绍了Agent和工作流的概念，并展望了LLM在多模态能力和通用人工智能（AGI）实现中的潜在作用。
1024 技术书单
程序员的核心竞争力都藏在这个书单里了丨1024书单
https://mp.weixin.qq.com/s/2CyQyJfCLHySKJ8aPymA6w
程序员节之际，腾讯云开发者联合四大出版机构推出1024书单，旨在增强程序员核心竞争力。书单包括编程、算法、系统架构、AI等领域的经典和实用书籍，覆盖从基础到高级的多个层次，旨在帮助程序员提升技术水平和职业素养。
