大家好，我卡颂。最近被一段酷炫的量子纠缠效果刷屏了：原作者是@_nonfigurativ_，一位艺术家、程序员。今天简单讲讲他的核心原理。基础概念首先我们需要知道两个概念：屏幕坐标系，屏幕左上角就是「屏幕坐标系」的圆点窗口坐标系，页面窗口左上角就是「窗口坐标系」的圆点如果只用一台电脑，不外接屏幕的话，我们会有：一个屏幕坐标系打开几个页面，每个页面有各自的窗口坐标系如果外接了屏幕（或外接pad），那么就存在多个屏幕坐标系，这种情况的计算需要用到「管理屏幕设备的API」

CSS工作组在其官方WIKI[1]总结了这些年CSS在设计上犯的46条失误。这些错误大体可以概括为5类：属性key、value设计失误布局、对齐上的设计失误颜色相关的失误选择器设计失误本文会选一些「我觉得有意思」的失误来讲讲。完整的失误列表见上述官方WIKI。!important语法!important语法用来增加样式的权重，毕竟，感叹号通常表达「强调」的意思。但在编程语言中，!通常是「取反」的意思，比如：const

创建DSL标签函数可以用于解析模板字符串中的特定语法，从而创建DSL（领域特定语言）。比如，可以实现一个css标签函数，解析字符串中的css语法。使用方式如下：const

更新进行到ErrorBoundary时，是不知道是否应该渲染「报错对应的UI」，只有继续遍历A、B，报错以后，才知道ErrorBoundary需要渲染成「报错对应的UI」。同理，对于下述组件结构：

大家好，我卡颂。周末不聊技术，聊聊我维护技术群3年来的经验，对以下两类同学有帮助：想维护技术群想找到氛围好的技术群稳定的群结构所有群（不只是技术群）都会慢慢死掉，「群死掉」有两种方式：失去群活跃，没人发起话题群会话

大家好，我卡颂。「前端已死」这个论调相信大家已经听过很多次，他对很多从业者的心智产生了不少影响。今天，我们不讨论他对不对，而是来溯源一下他是何时诞生，又是如何传播的。了解他的传播过程，可能对我们接下来的决策更有帮助。起源全网可查最早的「前端已死」一词来自于18年10月16日一个知乎问题[1]：彼时该问题回答寥寥。毕竟18年还是移动互联网火热的时代。少数几个回答也是质疑提问者自身原因：让人唏嘘的是，5年后的23年，该回答者在评论区感叹：时代变了。再往后，要追溯到22年10月11日的一篇小红薯[2]：不过这篇笔记主要谈的是博主自学前端顺利入职后工作一段时间的体会，主要是吐槽工作与想象中不符，并不是对「前端这个行业不存在了」的感叹。情绪酝酿当前的「前端已死」论调，是今年年初在脉脉中逐渐形成的。今年1月26日，有人通过脉脉职言[3]提问：前端是不是已死啦？在评论区有人提到「前端已死」：恰逢大量企业裁员，招聘需求放缓，悲观情绪经过一个月的酝酿，从2月13日开始，脉脉上开始出现较密集的「前端已死」相关话题：并逐渐形成热门话题「为什么很多人在说“前端已死”」：自此开始，这波从脉脉带起的话题热度逐渐扩散到其他社交媒体。媒体一：微信生态参考微信指数，从2月15日开始，相关话题的搜索量逐渐增加，并且来源逐渐从「网页搜索」向「公众号」转移，这代表有越来越多相关选题的公众号文章出现。相关话题的指数在3月8日当天达到最高：媒体二：知乎在2月16日，参考脉脉热门话题，有人在知乎提问：站在2023年，如何看待「前端已死」的观点？[4]截止当前，相关衍生问题产生了160w左右的阅读：媒体三：掘金掘金是一个以前端工程师为主的技术社区。从2月17日这篇最近很多人都在说

大家好，我卡颂。最近，React[1]新文档终于上线了。从内容上看，新文档包括：理论知识、学习指引API介绍从形式上看，新文档除了传统的文字内容，还包括：在线Demo示意图小测验可以说是阅读体验拉满。但是，由于文档中理论部分内容太详细（比如与useEffect相关就有5节内容），阅读起来太费时间。且当前官方仅有英文版本，所以对国内开发者不太友好。恰巧最近GPT-4发布，将React新文档投喂给他后，完美解决了上述问题。并且，由于React新文档讲的实在是太清楚了，以至于学习了文档的GPT完全能够胜任编程助理的角色。本文来聊聊GPT-4与React文档结合后产生的奇妙体验。GPT如何学习文档内容由于GPT-4的训练数据截止到21年9月，所以他无法提供那之后发布的内容相关的信息。所以，首先我们要给他手动投喂React文档。实现起来很简单，只需2步：在需要投喂的文档页打开控制台，执行下述代码：//

大家好，我卡颂。虽然React官网用大量篇幅介绍最佳实践，但因JSX语法的灵活性，所以总是会出现奇奇怪怪的React写法。本文介绍2种奇怪（但在某些场景下有意义）的React写法。也欢迎大家在评论区讨论你遇到过的奇怪写法。ref的奇怪用法这是一段初看让人很困惑的代码：function

大家好，我卡颂。有3个容易混淆的前端框架概念：响应式更新单向数据流双向数据绑定在继续阅读本文前，读者可以思考下是否明确知道三者的含义。这三者之所以容易混淆，是因为他们虽然同属前端框架范畴内的概念，但又不是同一抽象层级的概念，不好直接比较。本文会从3个抽象层级入手讲解这三者的区别。响应式更新「响应式更新」也叫「细粒度更新」。同时，最近前端圈比较火的Signal这一概念描述的也是「响应式更新」。笼统的讲，「响应式更新」描述的是「状态与UI之间的关系」，即「状态变化如何映射到UI变化」。考虑如下例子（例子来自what

}}那么在createSignal返回的getState方法内部，可以获取全局变量cpnContext来感知当前处于哪个组件的渲染流程：function

大家好，我卡颂。在React文档中，对于构建新的React应用，首推的方式是CRA（create-react-app）。CRA推出于2016年，彼时还没有成体系的React脚手架工具供大家使用，再加上这是官方工具，一经推出就受到了欢迎。截止当前，CRA仓库已经收获快10wstar。但是，随着时间的推移，出现了很多优秀的替代品，比如parcel、vite提供的React模版。而CRA本身的进步速度却在放缓，其上一次提交要追溯到去年9月8日：此外，CRA对一些流行工具的支持也不是很好，比如在TailwindCSS文档中就不推荐使用CRA：近日，油管10w粉丝的前端网红「Theo」就在React文档仓库发起了一个PR[1]，号召React文档不要再默认推荐CRA，而是应该将Vite作为构建应用的首选。看这围观群众的数量就知道大家对这种敏感问题有多关心了：那么，React团队是如何看待这个问题的呢？他们会将Vite作为构建应用的首选项么？本文来聊聊「Dan」（React核心成员）对这一问题的看法。CRA的定位既然众矢之的是CRA，那么首先我们需要明白CRA在React体系下的定位，再来看看Vite能否在这个定位下取代前者。CRA诞生的时期（2016年），是SPA（单页应用）最火热的时期。在当时，他很好的解决了两个痛点：0配置初始化项目这点不用过多介绍，执行如下命令后就能生成一个CSR（客户端渲染）的React项目：npx

Component中实现，也就是异步的服务端组件。服务端组件与客户端组件都是React组件，但前者在服务端渲染（SSR），后者在客户端渲染（CSR），如果都用async

大家好，我卡颂。最近很多厂都在裁员，大家都人心惶惶。那有没有程序员在这种情况下不仅不被裁，相反发展越来越好的呢？或者说即使被裁，也能很快找到工作呢？有，可以用一个问题测试下你是不是这类程序员：「你知道你当前业务，获客成本是多少么？」本文来聊聊「懂业务」对程序员的价值。懂业务对学习方向的指引为什么这个问题这么重要，举个例子。你叫李雷，在一家叫「马车之家」的公司当前端工程师。现在你业余时间想学些东西，该学什么呢？你想起技术论坛上看到一些大佬说

目前可以通过重新编解组、手动指定绝对定位元素、区域切图等多种手段来重新调整该元素与相邻元素的关系，从而让其恢复到满足程序员“心意”的状态。在代码的可维护性上，它生成的

大裁员背景下，没什么比辞职后找不到工作更扎心！在行情好转前，前端程序员只能“猥琐发育”，不轻易跳槽，同时要修炼内功：对八股文、底层源码、重点项目等进行查缺补漏，静待行情好转抓住机会！为帮大家在“就业寒冬”期更好的稳步提升、精进技术，以便保全自身、甚至跳槽加薪，这里分享一份《前端面试上岸手册》手册由字节3-1前端面试官路白联合数家大厂面试官编辑整理，涵盖2022年最新最全面的大厂前端面试考点，共计180道！限时免费开放下载！扫码直接领取（含答案）适合初中级前端工程师精准学习拒绝收藏吃灰这份资料和网上找的有什么区别？网上找的资料杂乱无章没答案，只能放在收藏夹吃灰而这份资料包，由多名一线大厂前端面试官联合整理，含完整版框架、流行技术栈等，可用来突击面试拿offer，也可用来精准学习就业提升！全面进阶

的展示和交互，辅助开发者排查问题、梳理流程、了解代码运行状态等，这个就是调试。这里的某个平台，可以是浏览器、Node.js、Electron、小程序等任何能执行

大家好，我卡颂。大家应该能明显感觉到最近几个月求职环境不太好，但究竟有多不好，具体的情况是什么样的？为了分析程序员职场现状，我进行了裁员情况调查，一共有1011位程序员朋友参与。本文会根据调查结果，为大家带来一些启示（如果不想看分析过程，可以直接跳到文末看结论）。裁员真的多么？按「工作职级」来看，受访者中「初级工程师」的裁员比例最少（可能是因为工资相对最低，裁员收益不大），而「专家及以上」最多，但整体差别不大。平均来看，受访者中有19%经历了裁员。按职级看裁员比例按「公司中技术团队人数」来定义「公司规模」，「技术团队只有几人」的小公司裁员最严重，其他更大些的企业差距则不大。按公司规模看裁员比例可能是因为太小的企业还没有跑通业务变现的逻辑，老板抗风险能力也更差。对我们的启示是

P10，这人是真有点东西。而且后来阿白离职，新闻上还写出了他的完整履历，真可谓是“金光闪闪”：新晋加入车好多集团的郭东白本科毕业于上海交通大学，后前往布朗大学攻读硕士和博士学位。2000

大家好，我卡颂。今晚对字节的史文强大佬做了一次直播访谈，标题叫《从外包走进字节，我还写了本书》。在访谈前有个困扰我的问题：如何从外包跳到字节？文强待过不同的外包公司，最后从外包跳到字节。我接触过很多外包同学，他们也想去大厂，但是大厂面试需要你有优秀的项目经验。而外包通常是做重复性的CRUD。他从外包跳到字节，是如何积累优秀项目经验的呢？带着这个疑问，我开始了今天的访谈。并在过程中不断从蛛丝马迹寻找答案。终于，在一个半小时的访谈后，我找到了答案。这个答案适合有志在软件领域发展的同学借鉴。历练驱动型发展模型当谈到如何成长时，文强提出了上述这个略显拗口的名词。简单来说，程序员要想获得技术上的成长，需要通过项目「历练」。他举了个让我印象很深的例子。有一段时间，他想学习Ionic（一款跨平台前端框架），就加入了一些学习群。当时，有人在群里问「Ionic的私活，谁来接？」。如果你是文强，作为一款框架的初学者，会作何反应？反正如果是我，我会想：我是来学Ionic的，水平太菜，肯定没法胜任私活。但文强的思路是：居然有人付费给我提供一个学习Ionic的机会，赶紧抓住。我问他：如果你接了后发现无法胜任怎么办？他说：那就再找会的人外包出去呗，反正怎么都不会赔。最终，通过这个项目的历练，他不仅获得了Ionic的实际项目经验，还在一个月时间赚了4w。这，就是「历练」。很多同学很勤奋，在日常工作之余还会买各种前端课程学，这是历练么？很遗憾，大概率不是。举个例子，你听说「微前端」很火，想去学。于是花钱买了个微前端课程跟着肝了两周。然后呢？然后就没有然后了。如果你本职工作没有用到微前端，那么这段「学习课程的经历」并不能让你获得「实际的微前端项目经验」。最后的结局大概率是

Vite、Snowpack、WMR，这层含义相信大家都比较熟悉了。再者是依赖产物的模块化分发。对于庞大的外部依赖，一方面打包成本比较高，另一方面文件数量可能非常多，打包几乎是一个必选项，甚至需要多个

大家好，我卡颂。React18进入大家视野已经有一段时间了，不知道各位有没有尝试「并发特性」呢？当启用「并发特性」后，React会从「同步更新」变为「异步、带优先级、可中断的更新」。这也为编写单元测试带来了一些难度。本文来聊聊React团队如何测试并发特性。遇到的困境主要有两个问题需要面对。1.

https://dev.to/fredkschott/5-more-things-i-learned-building-snowpack-to-20-000-stars-5dc9大意就是

我的好朋友叶小钗，是个长期主义的受益者为什么如此自律的开始写公号了，原因是：年纪大了，心里很虚年岁会直接加大选择成本，比如找工作一块，年岁大的同学倾向于：走圈子；降维使用；盲投看运气；被迫创业；这些选择很看运气，特别对牙口好的同学，有些饭吃不下去。比较好的方式是：有一张自己的名片比如这些名片都是硬通货：P9+的职级；规模不小公司CXO职级；大公司高管；行业名片；牛逼的产品背书；用人单位需要你过往的“作品”为你定价，所以硬通货越多越好...公众号可以做为一种行业名片出现，准入门槛低，做好却不容易，人无远虑必有近忧，建议大家也找个硬通货提前部署起来。知识沉淀，思维复盘从知识沉淀、思维复盘来说写作是个很好的习惯，这种持续的写作经历带来的“收益”是超出预期的，比如之前我写了200多篇技术博客。但这种长期写作的好习惯，中间却断了几年！抛开年龄大了、结婚了、事情多了，这些莫名其妙的因素，现在回头想想，真实原因是：技术文章大小皆可记录，甚至一个BUG都可以水一篇文章；管理文章一来是不好写，二来是写不好，这里包括有些东西不适合写，有些东西说不明白；业务类文章涉及公司财产不能写；总结来说，就是前几年功力不够，不足以出管理、业务类文章。后面几年经历更加丰富，看世界的角度变得豁然开朗，突然感觉自己又行了。于是在2021年5月27日，公众号发布了第一篇文章！到如今如果一周没几篇干货，甚至会觉得自己一周没思考，十分可怕！持之以恒虽然自信满满，但是初期粉丝涨得很慢，直到2022年1月5日都不到1300粉，偶尔都有点怀疑自己是不是又不行了，这个时候得到了几位老哥的指点，春节后2月7日到3月31日，两个月涨了5000粉，后面慢慢就20000粉了：长期做难而正确的事情，收益会很大哦了解小钗关注我，可以了解以下内容，多是实操方法论，一定不会令你失望：公司文化建设技术创新产品思考、产品方法论数字化转型管理、成长类话题少数高端管理：公司治理话题如果大家想更了解小钗，可以看这四篇文章：第一个五年，建立成长正循环框架第二个五年，找到自己擅长且喜欢的事情第三个五年，独立思考、寻找解法并实操落地如果不嫌长的可以直接挑战这篇：34岁回顾人生，也怕中年危机！管理小册草稿与Scott想要出一本管理小册，这里是第一版草稿，内容会有不少的变化，大家着急的话可以尝尝鲜：管理者需要怎样的三观认知管理的职业发展机会与面临的挑战管理的工作职责-

作为前端工程师，前端工程化是经常听到的概念，但虽然经常听到，很多人对它的认识依然很模糊。比如，提到前端工程化，他并不能说出什么是前端工程化。给出一门具体的技术，他也不能确定是不是属于工程化范畴的技术。这是因为他没有对前端工程化有一个概念上的认识。那么，这篇文章我们就来给前端工程化下个定义吧。什么是前端工程化提到前端工程化，最容易想到的就是编译了。很多代码需要经过编译才能运行在目标环境：高版本的语法需要用

Tim」开发的WWW）就是用拖拽、输入等方式实现的富文本编辑器。呵，太阳底下无新鲜事。总结如果你看到这个预测后觉得挺讨厌的

https://zh-hans.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html[3]big-react:

大家好，我卡颂。不知道大家在用React开发时，有没有注意到react与react-dom这两个包中有个很奇葩的属性__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED：直译过来就是「内部神秘属性，不要乱用！否则你会被炒鱿鱼」。为什么会有个这么唬人的属性？今天我们来聊聊。React项目架构我们在项目中习惯使用如下语句引入Hook：import

https://www.youtube.com/watch?v=SdV9Xy0E4CM&list=PL37ZVnwpeshGuMZrOZzEo8QLBjjpbtBGm&index=2[2]tc39:

https://beta.reactjs.org/learn/synchronizing-with-effects#fetching-data[3]你可能不需要使用effect:

大家好，我卡颂。在很多全面使用Hooks开发的团队，唯一使用ClassComponent的场景就是「使用ClassComponent创建ErrorBoundary」。可以说，如果Hooks存在如下两个生命周期函数的替代品，就能全面抛弃ClassComponent了：getDerivedStateFromErrorcomponentDidCatch那为什么还没有对标的Hook呢？今天我们从上述两个生命周期函数的实现原理，以及要移植到Hook上需要付出的成本来谈论这个问题。ErrorBoundary实现原理ErrorBoundary可以捕获子孙组件中「React工作流程」内的错误。「React工作流程」指：render阶段，即「组件render」、「Diff算法」发生的阶段commit阶段，即「渲染DOM」、「componentDidMount/Update执行」的阶段这也是为什么「事件回调中发生的错误」无法被ErrorBoundary捕获

之间的关系，能复用的就提前设计好复用关系，这样巧妙的关联设计能为以后维护减少很多麻烦。即便代码无法复用的地方，也要尽量做到逻辑复用。比如

岁不被淘汰的前端程序员来说，要多提升自己在业务深层次发展的能力，而不是日复一日的做“搬砖活”。赶紧点击“阅读原文”去体验吧下载链接：https://code.fun或者，复制上面链接，去官网体验吧-

https://beta-reactjs-org-git-effects-fbopensource.vercel.app/learn/synchronizing-with-effects[2]

天免费体验资格的，为了本文的效果，我先申请了申请网址：https://previewjs.com/checkout填一下自己的邮箱，就申请成功了然后它会把一个兑换码发到你的邮箱里拿着这个码去

通过将ES编译为CJS帮我们解决了ESM和CJS的交互性问题了，如果没有后续Node的背刺，实际上已经是趋于稳定了。然而(另一个不幸的事情，让事情雪上加霜)，当

大家好，我卡颂。昨天在开源圈发生个小插曲。起因是有个用户表示：React新文档在文档结构、美观度、性能等各方面都达到很高的标准。尤雨溪对Vue新文档与React

'click-to-react-component';ReactDOM.createRoot(document.getElementById('root')).render(

会在加载特定后缀文件的时候触发，通常用于将浏览器无法处理的文件类型转化成浏览器能运行的文件，除了可以更改文件内容外，也可以更改最终输出的文件类型。例如插件@snowpack/plugin-vue

__buttons_continueButton_djd347adcxz9;}.__buttons_continueButton_djd347adcxz9

大家好，我卡颂。想必大家都知道React有一套基于Fiber架构的调度系统。这套调度系统的基本功能包括：更新有不同优先级一次更新可能涉及多个组件的render，这些render可能分配到多个宏任务中执行（即时间切片）高优先级更新会打断进行中的低优先级更新本文会用100行代码实现这套调度系统，让你快速了解React的调度原理。我知道你不喜欢看大段的代码，所以本文会以图+代码片段的形式讲解。文末有完整的在线Demo，你可以自己上手玩玩。开整！准备工作我们用work这一数据结构代表一份工作，work.count代表这份工作要重复做某件事的次数。在Demo中要重复做的事是“执行insertItem方法，向页面插入”：const

https://dev.to/ogzhanolguncu/solidjs-vs-react-i-ve-built-the-same-app-on-both-libraries-4cfa

如果我们使用了PureComponent或Memo，那么在判断是进入render还是bailout时，不会判断oldProps与newProps是否全等，而是会对props内每个属性进行浅比较。

Vue和React，谁才是更好的选择，这个争论似乎从未停过。但在一点上，双方粉丝似乎达成了难得的一致：Vue文档比React文档好太多。React开发者对此的解释是：Vue是国人开发的嘛，写出来的文档当然更符合中国人看啦。但从#3308[1]来看，似乎全球React开发者都苦文档久矣。以至于在这个issue中，React

render时，每执行到一个hook，都会将指向currentlyRenderingFiber.memoizedState链表的指针向后移动一次，指向当前hook对应数据。