- Everything about Google Translate crashing React (and other web apps)
- Jotai Tips daishi 自己对自己的库的总结
- How does use() work internally in React?
- How does useOptimistic() work internally in React? useOptimistic()
- React Server Components React Sever Components 的一系列文章
- Accessible, Typesafe, Progressively Enhanced Modern Web Forms 类型安全的 Form 写的蛮好的。
- 《马斯克传》里面,哪些是 “学得来” 的?哪些是 “学不来” 的? 从马斯克身上学习到的集中精神
- 干货 | 携程度假基于 RPC 和 TypeScript 的 BFF 设计与实践 RPC 和 BFF
- Understanding React Server Components 详细的讲了 RSC 的一些知识点。
- 干货 | 携程商旅大前端 React Streaming 的探索之路 关于使用 React Stream 的一些心得,以及内部实现原理的解析。
- 负责淘宝业务前端开发 9 年,聊聊我的心得 一篇比较好的文章来
- Demystifying Create React Signals Internals Dai shi 对 signal 的探索还是蛮多的。
- React Server Components anything Dan 回答了关于 RSC 的一些提问,值得去看。
- React vs Signals: 10 Years Later 讲述了 solid 中的 signal 以及 React 坚持不使用 signal。说实话有点踩 React 捧自己 solid 框架的倾向。回复也值得看
- how pnpm links 一篇非常棒的文章,关于 pnpm 是如何工作的
- Connection to Signals vue 中关于 Signals 的一些对比
- 从零开始撸一个「响应式」框架 写的不错的一篇文章
- TypeScript: Union to intersection type 深度了解 TS 交集和并集
- 字节前端监控实践 字节前端监控
- Replace Create React App recommendation with Vite Dan 讲述了 CRA 的前世今生,并给出了 CRA 最终的方向。
- Zod: The Next Biggest thing after Typescript zod 实现了类型和 schema 的互相转换。
- 花了好几个小时,终于懂了什么叫 SWR 讲的确实不错,结论如下
- max-age 内直接读取缓存,不会请求服务器。
- max-age ~ max-age + swr 之间,会读取缓存的同时,在后台请求更新缓存。
- max-age + swr 后,请求会直接打到服务器,返回最新的内容。
- Stale-while-revalidate 一张图解释 swr
- How to debounce and throttle in React without losing your mind 实现一个 debounce hook
- Optimize Time to First Byte
- Handling errors like a pro in TypeScript 如果设置错误,这种经常会在后端出现定义自己的错误格式。前端也可以定义自己的错误格式。
- 为 iframe 正名,你可能并不需要微前端 是否需要微前端根据自己的业务来判断。
- Why React Re-Renders 一篇写的非常不错的文章
- 从 0 到 1:美团端侧 CDN 容灾解决方案 有时资源会加载失败,但是加载失败了却无法很好的做出应对之策,因此需要对资源做好监控以及对应的容灾策略。
- HTML Attribute VS DOM Property React 也是对齐的是 Dom Property 这也就回答了为啥使用的是 classname 而不是 class
- React Streaming SSR 原理解析 从源码角度讲解了 SSR 的原理
- 基于 Module Federation 的模块化跨栈方案探索| 得物技术 得物的模块联邦技术
- 重新理解 Web 对 web 比较好的一次科普了。
- 从 React 源码彻底搞懂 Ref 的全部 api 一篇比较好的文章,解析了 react 几个 api。
- deferred data 使用 defer 后,数据请求方式会从
document -> JavaScript -> Lazy Loaded Route -> data fetch
=>document -> JavaScript -> Lazy Loaded Route & data (in parallel)
- 基于 MF 的组件化共享工作流 组件共享一个很好的方案
- Request.cache fetch 携带 cache
- 为什么说 90% 的前端不会调试 Ant Design 源码 这是一篇涉及多个知识点的的文章。
- 字节前端监控 SDK 体积与性能优化实践 开发中容易忽略注入的第三方脚本对性能的影响。
- 【第 2759 期】异步分片计算在腾讯文档的实践 一个比较好的实现一个简单的分片。
- 通天塔页面搭建提效揭秘:设计稿自动生成楼层 通天塔是如何做搭建的。
- 改了 3 个字符,10 倍的沙箱性能提升?!! qiankun 沙箱性能提升。
- The Web’s Next Transition 详细讲述了 web 的发展,以及各自的优缺点。
- 解决页面间体验问题的纯前端容器 Lath 用户体验问题一直都是很重要的一个点,从容器角度来解决各种不好解决的问题。
- When to use the different log levels log 什么时候去使用
- How I am so productive kent 是如何安排一天并保持高效的。
- 最详细的 Module Federation 的实现原理讲解 MF 讲解的蛮详细的。
- 谈谈 JS 二进制:File、Blob、FileReader、ArrayBuffer、Base64 一个比较不错的文章对一些二进制对象的介绍
- 为什么 B 站的弹幕可以不挡人物 巧妙的 css 属性
mask-image
来实现遮挡的效果
- React 18 vs 17 benchmarks Dan 说明了 18 和 17 的区别。
- Remesh 介绍:用以开发大型复杂 Web App 的 DDD 框架 Remesh 框架的介绍
- 做了 6 年程序员,我学到的 10 条经验 写的很棒,保持着一颗敬畏之心。
- 京东零售平台:前端组件资源共享与中心化管理实践 如何实现组件的分享,讲的非常的清晰,很多团队值得一试。
- 什么是前端差异化竞争?来看看 Astro Astro 实现了部分注水,追求性能的极致体验。比较适合内容类的站点。
- Islands Architecture 孤岛架构。
- 性能提升 30%以上, JDHybrid h5 加载优化实践 原生是荣如何助力 H5 实现性能的提升的。
- How We Built Hydrogen: A React Framework for Building Custom Storefronts 建造高性能的框架基于 React 的一些技术。
- 如何基于 UDP 协议实现可靠传输? 对 UDP 讲解的非常棒。
- 用 Node.js 手写一个 DNS 服务器 一篇非常棒的文章写关于 DNS 的解析过程,以及如何实现这样一个过程。
- Layouts RFC NextJs 支持嵌套式的 layout 路由。蛮好的。
- Scroll,你玩明白了嘛? 对 scroll 的几种行为分析的很好。
- 【访谈实录】对话 Lee Robinson :聊聊前端的未来 & Vercel 强烈建议阅读,写的非常棒。
- 我在淘宝做弹窗,2022 年初的回顾与展望 一篇非常好的文章关于一个做一个产品从 0 到 1 的过程。
- 深入浅出前端监控 对前端监控感兴趣的可以看看,蛮不错的。
- DeepKit:基于 TypeScript 的颠覆性新兴 Web 框架 将 ts 运用于运行时。
- Code Kitchen:一个支持多文件与私有库的离线 React Playground 方案 既然其他的 playground 方案满足不了,不如自己造一个。
-
Gaining security and privacy by partitioning the cache 缓存策略的改变。一篇非常好的文章介绍 chrome 缓存策略的转换。总结如下:
-
Chrome: Uses top-level scheme://eTLD+1 and frame scheme://eTLD+1
-
Safari: Uses top-level eTLD+1
-
Firefox: Planning to implement with top-level scheme://eTLD+1 and considering including a second key like Chrome
- React v18.0 React18 发布。
- 为自己的团队定制 CSS 框架 写的蛮好的,尤其是结合 css-modules
- 如何从一个技术高手转技术管理? 打开格局,抓大放小。抓重避轻。
- 微服务前端数据加载的最佳实践 关于微服务下前端数据加载的最佳实践,写的很棒。
个人看了这篇文章,也总结一下使用 BFF 的有点和缺点。
优点
- 接口整合。
- 加入缓存。需要记得加入缓存淘汰机制。和 localStorage 处理一样,可以采用 LRU 的算法来处理。(需要考虑多实例情况,因为在服务端,可能缓存只存在于一个实例上,如果命中另外一个实例,则无法读取缓存,所以需要一个统一的缓存处理机制)。还需要考虑到缓存击穿,缓存雪崩和缓存穿透。
缺点:
- 占用服务资源,可能会导致资源的浪费。
- 调试很难,一旦出问题,需要调试多处。
- 容灾处理。
- 一文彻底搞懂前端沙箱 文章偏长,最新的标准沙箱应该是 Realm
- Upgrading Next.js for instant performance improvements
- View the formatted RFC. React18 新的
Suspense
API,相比于旧的改了不好。并且支持最新的stream
渲染了。相关 pr - React18 RFC React18 的 RFC。介绍了关于即将发布的 18 版本一些 feature。
- Running commands with execa in Node.js 通过 execa 执行命令
- 为什么 try catch 能捕捉 await 后 promise 错误? 和执行栈有关系吗? 高分回答为什么 promise 被 await 后就可以被上层的 try catch 捕获了。而原始 promise 的回调中如果出现错误并不会被捕获,这个和 setTimeout 抛错是同理的。比如
try {
throw new Error('111')
} catch (error) {
console.log('error:', error)
}
此时的错误可以被捕获到,但是改成这样
try {
setTimeout(() => {
throw new Error('111')
})
} catch (error) {
console.log('error:', error)
}
就捕获不到了。
- Tao of Node - Design, Architecture & Best Practices 关于 node 的一个教程。
- 关于电竞职业选手转前端开发这件事 推荐阅读,很激励别人。
- 在字节跳动做在线文档的那些事儿 对文档感兴趣的话可以看看。
- Improving Web Performance with React Hydration Strategies 作者讲解了 hydrated 的几个策略,渐进式的注水比较容易实现。
- Optimizing third-party script loading in Next.js Next.js 是如何优化第三方脚本的。
- 前端 Leader 如何做好团队规划?阿里内部培训总结公开 作者从多个方面介绍了如何做好团队规划。
- 谈谈性能优化 - 从用户体验聊起 性能优化不仅是速度快,用户其他的体验也极其重要。
- Event Collector —— Web 环境的标记埋点方案 一个标记埋点的不错的方案。
- monorepo.tools monorepo 工具的对比。
- Facebook 工程师文化独特之处 很多时候技术应该和产品的目标是一致的。
- Why Efficient Hydration in JavaScript Frameworks is so Challenging 作者谈论 SSR 中有哪些方法可以提升性能。
- 为什么大厂前端监控都在用 GIF 做埋点? 解释了埋点系统用 GIF 的原因
- 弄懂 SourceMap,前端开发提效 100% 对 SourceMap 讲的非常细致的一篇了。
- 如何为 Node.js 的 require 函数添加钩子? 本文讲述了如何劫持 require 函数。包括 yarn pnp 也都对 require 进行了相关劫持。
- 我的前端性能优化知识体系 一篇比较好的对性能指标的介绍。
- A Proposal For Type Syntax in JavaScript 最新的提议,js 中支持类型,很是期待。
- proposal-types-as-comments 相关提议。
- 技术人的产品观 通用知识和领域知识同等重要,领域知识可以让你走的更远。
- 产品:换了个人设,多卖 8 倍货!3 个行动点有效促进私域成交! 如何去做私域。
- 腾讯企鹅辅导 H5 性能极致优化 优化部分写的很赞,目前页面还不是 SSR 直出,然而效果已经很棒了。
- 做了两年前端 leader 后我想说几句 作为一个前端 leader 的总结。
- React 体系下关于 MobX 与 Redux 的一些思考 很好的讲解了关于不可变和可变引起的优劣势。
- Node 案发现场揭秘 —— 未定义 “window” 对象引发的 SSR 内存泄露 作者讲述了排查的过程。
- 电商前端技术团队的年度总结 总结的比较不错的一篇文章,从性能,体验,业务多个方向出发来解决实际场景遇到的问题。
- 又过年了,盘一盘近一年阅读量最高的十篇文章 每一篇文章都值得去看。
- React: Event Bubbling and Capturing 在 React 中的事件冒泡和事件捕获。
- Vitekit 作者计划 14 天手写 Vitekit,其 kit 命名来自 SvelteKit。对于这个话题还挺感兴趣,但是到第二天貌似就断更了。
- TypeScript 4.6 Beta
- Parcel CSS Parcel 组织的新产品,可以用于 Parcel,也可以和其他工具集成使用。基于 Rust,速度比 cssnano 快 100 倍,比 esbuild 快 4 倍,同时产物尺寸也更小。
- 不优雅的 React Hooks 本文阐述了使用 Hooks 引起的一些问题,但是任何事情都是有两面性的,客观的去看待,不同的场景使用不同的技术。
- SEE Conf: Umi 4 设计思路文字稿 对 umi4 有个详细的介绍。
- 从实现原理看低代码 对低代码一个很好的阐述
- D2 分享 - ESM Bundleless 在低代码场景的实践 低代码下的 bundleless
- 无组件架构:你不需要知道的“新一代”前端架构模式
- A Complete Guide to React Router: Everything You Need to Know 一个比较完美的对路由的解释
- Linux 硬链接和软连接的区别与总结 一张图足以说明一切
- Linux I/O 基本原理 文章详细的讲解了 Linux I/O 的原理,值得一看。
- 聊聊 JS 的二进制家族:Blob、ArrayBuffer 和 Buffer 详细讲解了 Blob、ArrayBuffer 和 Buffer 以及他们之前的区别和联系。
- Vite build 对 vite 进行了大概的讲解,尤大推荐。
- 傻傻的,3 行代码一个订阅发布中 一个非常有意思的实现发布订阅的文章
- A Deep Dive into Airbnb’s Server-Driven UI System 服务驱动 UI,本质上就是把 schema 映射为对应平台的 UI
- Vue.js 作者尤雨溪: 框架设计就是不断地舍取 框架设计就是不断地取舍
- 面向未来与浏览器规范的前端 DDD 架构设计 字节的微前端框架
- 深入理解 Vue3 Reactivity API 对响应式 API 的一个非常完整的解释。
- export-default-thing-vs-thing-as-default export default 以及 import 的一些区别
- GMTC 2021 演讲 《字节跳动基于 Serverless 的前端研发模式升级》 字节前端研发模式的改变,干货满满
- progressive-rendering-frameworks-samples 谷歌的渐进式 ssr 的例子,看起来很有意思,通过内部实现了一个
Hydrated
组件,通过IntersectionObserver
来监控,出现的时候再进行注水,重点可以参考这段代码
- 三种前端实现 VR 全景看房的方案!说不定哪天就用得上! 教你如何做出一个全景 VR。
- 一次千万级流量的 618 电商 H5 活动页干货分享 活动页的分享,干货满满。
- iMove 基于 X6 + form-render 背后的思考 讲了 imove 的原理, 对流程以及低代码感兴趣的可以看看
- 京东出品微前端框架 MicroApp 介绍与落地实践 京东的微前端框架,看起来解决了更多的问题相比 qiankun, single-spa
- B 端产品可用性度量评估体系 针对提升用户体验的目标拆解出相应的指标,从而完成相应的度量。
- useMutableSource 对
useMutableSource
讲的很赞的一篇文章
- CLEVER VS INSIGHTFUL CODE people can build expertise with more expressive specs, and when they need advanced verification they know enough to write insightful specs.
- 渐进式 Unbundled 开发工具探索之路 与 vite 类似。
- 工作五年反思 非常值得看的一篇文章,专注于几件事,做好那么几件事就够了,没有人记得第二,只有第一。
- 浏览器文件系统 可以通过非 input 的方式操作文件,目前这个 api 各个浏览器还未支持,但是可以使用 browser-fs-access 代替。
- 搭建编辑器的可扩展架构探索和实践 对编辑器的新的探索
- 技术一号位 认识自己是否是在技术一号位,以及如果处于一号位应该做什么样的事情。
- 遇春:语雀编辑器自研之路 关于语雀编辑器的一些历史。
-
The Nakazawa Management Starter Pack 一篇非常好的文章,讲述了做了团队管理需要做的事情,如何建立信任等。
-
Principles of Developer Experience 讲述了开发的一些原则,无论是内部工具还是外部产品。
- 写给昊昊的前端编译原理科普 对编译原理方向的科普,蛮有意思的一篇文章
- SSR 话题 讲述了 ssr 相关的问题,以及分析现有的 ssr 框架获得的心得。
- Deco 智能代码 · 开启产研效率革命 京东对设计稿转代码的又一探索。
- 前端优秀实践不完全指南 对前端好的实践的探索和尝试,非常值得学习。
- 理解 nodejs 的原理,一步步的深入 Nodejs
- 技术精进与业务发展两不误 技术始终从业务中到业务中去。
- 也许 B 端 C 化是未来 toB 产品的新方向 目前 B 端的产品越来越像 C 端产品,很多功能也慢慢对齐,比如 C 端经常会做一下游戏活动,现在 B 端也会做这些游戏活动。
-
凹凸技术揭秘 · 夸克设计资产 · 打造全矩阵优质物料 京东夸克设计平台整合了设计资产,实现资源共享。
-
凹凸技术揭秘 · Tide 研发平台 · 布局研发新基建 京东 IDE 通过扩展 theia 实现了自己的一套 IDE 架构。
-
5 年 5 亿个应用 低代码平台会干掉 IT 部吗? 阿里推出的低代码平台,后续将会有更多的应用采用低代码的形式来开发。
-
今日头条品质优化 - 图文详情页秒开实践 讲述了头条详情页的优化过程,值得学习的另外一处就是如何定指标。
-
淘宝小程序还可以这么玩! 电商游戏已经成为常态,淘宝抹平了平台的差异。
-
前端团队研发效能提升的探索与实践 丁香园对研发效能提升的探索。
-
Rax 小程序运行时方案解密与思考 和 Taro 以及 Remax 是一样的原理
- Inside the React Core team React 团队的成功和失败
- react server component react 采用了新的方式与 server 进行结合,与 ssr 不同的是,ssr 返回的是页面的字符串,server component 返回的是流以及可序列化的 json 格式的 virtual dom。
- Figma + GitLab CI 一键交付 SVG 多色图标库 业务中经常有很多图标需要处理,目前设计师在使用 kitchen 这样的插件,但是对于开发者来说也要进行二次更新代码,才能够实现。
- 如何搭建一套 “无痕埋点” 体系 讲述了三种埋点形式,分别是 dom 元素,代码中埋点和可视化 埋点。
- Figma to React Figma 自己也在思考如何实现代码和设计之前的互联,具有一定的 参考意义。
- 美团 UI 一致化 美团通过积木,代码组件库,文档化说明以及定制化设计云协作平台实现 UI 一致化的闭环。提升开发效率。
- announcing-typescript-4-1 ts 4.1 支持了模板字符串以及其他额外的新功能
-
CodeSandbox 是如何让 npm 上的模块直接在浏览器端运行的 codesandbox 的作者简述了在网页端加载 npm 模块的技术演进。
-
Creating a parallel, offline, extensible, browser based bundler for CodeSandbox 为 CodeSandbox 创建一个并行的、离线的、可扩展的、基于浏览器的打包器
- 美团积木 sketch 插件 进阶,在积木 Sketch Plugin:设计同学的贴心搭档 基础上进一步探索 sketch 插件的开发
-
搭建一个前端性能检测系统 实时监控前端页面,进行优化页面。
-
一文教会你如何写复杂业务代码 如何对复杂的业务代码进行拆解,提高代码的可读性和可维护性。
- 搭建一个属于自己的在线 IDE 基于 codesandbox 实现自己的私有化部署以及相关服务的搭建。
- schema-flow 一个高扩展的 schema 框架,适配 Vue、React 等前端框架
- 精确化测试 可以分析出本次代码变动可能会引起其他代码逻辑,通过精准判断来执行可能被影响代码的测试,实现 精准测试,避免每次都要执行全部测试。
- 阿里月飞分享的后台搭建系统 简述了搭建中遇到的问题,以及架构。
- 如何实现 pc 站点的搭建 讲述了政采云低代码搭建的一些知识点。
- 表单生成器 快速生成表单,支持 JsonSchema 以及代码的直接复用。
- 三大框架逻辑复用横评 从各个方面对三个框架的逻辑复用进行评价,值得一看。
- 从 13K 的前端开源项目我学到了啥? 讲述了 BetterScroll 的插件化结构以及工程化,插件的注册机制,通信机制。
- 作为前端,我对业务的一点理解 作为前端不仅要关注技术,也要关注业务,技术的目的是服务于业务,不能一味的沉浸在其中一个方面。对每一个需求都应该负责。
- amis 是百度出品的一个低代码框架,通过使用 json 配置快速搭建页面,丰富的功能以及兼备相当的灵活性,amis 在百度内部已经取得了很大的成功,并且服务了 3W 多个页面。
-
低代码,要怎么低?和低代码有关的 10 个问题, 如何基于团队以及架团队构选择相应的低代码的架构设计。同时对目前已有的低代码平台进行分析,搭建出自己的低代码平台,分析各种低代码平台的优劣势,主要就是「易用性」和「灵活性」的选择,想两者都要做的很好还是很难的。
-
web_designer 采用特殊的交互方式来处理各个组件之间的交互关系,因为可用组件的事件是可枚举的,因此在点击某个组件的时候可以选择另外的一个组件进行交互。缺点是目前只能用提供的组件,自定义暂时不支持以及布局方式采用的是绝对定位,对于不经常维护的页面是蛮适合的,复杂的页面不太适合使用。
- CRUD 代码生成的四个核心问题 讲述了 CRUD 常见的一些交互形式,可以从中吸取到一些 CRUD 的形式。