前端笔记

让ts根据实参的类型推导函数返回值类型是一个常见的需求，本文通过两个常见场景介绍泛型和泛型约束的使用技巧。

React的生态非常庞大，各种lib层出不穷，本系列将介绍其中最受欢迎的一些lib，并给出快速入门的实践案例。本期介绍的是React Query。

上一节分析了createReactApp.js中的逻辑，这一节继续解析react-scripts中的逻辑

我们将跟着package.json顺藤摸瓜理清create-react-app的执行流程，并深入源码探究各种细节。

即便多年多去了，各类新脚手架层出不穷，也越来越强大，但cra仍然占据着重要的位置。想要真正做一个企业级的脚手架，研究cra的源码是一个非常好的入门手段。

Yeoman一般用来快速创建符合自身实践原则的项目脚手架，因此必定需要自定义一个generator。本文讲述如何编写一个generator，以及如何测试、发布。

what generator是一个npm包，包名以generator-开头,如generator-webapp,全局安装后，执行命令yo webapp实际上就是执行该generator。

前端脚手架是前端工程化的一个重要里程碑，而Yeoman是快速实现脚手架的一个重要工具。同时，yeoman的设计理念，对我们自己开发一个脚手架也有很好的启发。

array的`at`已经被官方采纳，并成为ES2022的一部分。以后我们访问数组元素有更友好的语法糖了。

为什么return Promise.resolve()后续的执行会慢两拍？promise规范中关于返回thenable情况的解释该如何理解？

一个经典的例子是对所有元素设置了margin，却需要对最后一个元素删除margin，这种情况下你应当使用selector，而不是抵消这些元素的样式

你可能已经了解过CSS gap property。它并不是一个全新的css属性，但是去年它获得了一个重要的特性：除在了CSS Grid中，在Flexbox中也能使用。我相信这个属性比它表面呈现的更复杂

很多人觉得原子级样式还原设计稿很难精确，然而如果掌握了正确的布局思路，是完全可以做到优雅快速且精准的。

tailwind的特点在于灵活,改造老项目也很方便。老项目主要有以下几种场景：inline style，单样式的class，复杂样式的class，css或scss函数需要使用变量

tailwind css的实践中有不少小技巧，比如插件和配置，以及和scss等预编译技术的搭配使用。

通过tailwind.config.js可以进行自定义配置，另外也可以在css中利用相关的指令进行更便捷的配置

Tailwind CSS 是一个功能类优先的原子级 CSS 框架。没人能逃出tailwind真香定理。

基于swagger和babel-plugin的轻量级mock方案，可以很好的和mock server进项互补

封装一个request库？看起来没什么技术含量的任务，实际上满满的全是细节。下面记录一下我在开发过程中遇到的必须考虑的各种问题

父组件将一个函数作为prop传给子组件，当这个函数并不是纯函数时，往往出现闭包问题，无法按照我们的预期执行