Gatsby Starter Blog

杨健

杨健 工作于字节跳动

/node_modules_困境/

Invalid date

node_modules 困境 image.png Ryan对于node.js的十大遗憾之一就是支持了node_modules,node_modules…

cli指南

2020-03-05

本文主要讲述如何从零编写一个cli 写cli的第一步就是处理参数解析,一般有如下几种库 yargs commander minimist 综合比较下来对于处理复杂的cli应用更为方便,且typescript的支持更为友好。则对新人较为友好,而minimist…

This in Typescript

2020-02-01

可以说是里最难理解的特性之一了,里的 this 似乎更加复杂了,里的 this 有三中场景,不同的场景都有不同意思。 this 参数: 限制调用函数时的 this 类型 this 类型: 用于支持链式调用,尤其支持 class 继承的链式调用 ThisType…

Effective Typescript

2020-01-29

Typescript 入门 理解Typescript与Javascript区别 Typescript编译选项影响类型检查(建议开启strict…

工程化: macrotask和microtask

2020-01-22

本文翻译自 secrets of javascript ninja ,重点讲解 macrotask 和 microtask。 event loop 如下图所示,浏览器的 event loop 至少包含两个队列,macrotask 队列和 microtask…

工程化:Javascript中的Monad

2020-01-22

本文翻译自 https://blog.jcoglan.com/2011/03/05/translation-from-haskell-to- javascript-of-selected-portions-of-the-best-introduction-to-monads…

深入React: 组件通信

2020-01-22

项目重构中碰到了很多组件通信带来的问题,对组件通信进行总结。 react 组件通信有几种常见的场景 父子组件通信( Demo1 ):父子组件通信最为简单,父组件向子组件传递 props,子组件接受父组件的回调 跨级组件通信( Demo2 ):(使用 Context…

深入React: 国际化方案

2020-01-22

头条海外产品需要支持多个语言地区的文案,所有文案加起来大小大约是 1M…

工程化: 禁用export default object

2020-01-22

近期对项目进行升级,支持 webpack4 和开启 tree shaking 功能碰到最大的一个坑就是 esm(ES Module)和 cjs(CommonJS)的互操作性。下面对其详细解释。 直到最近浏览器才对 es module 进行了支持,之前大家虽然写的都是 es…

工程化: 深入CSS布局

2020-01-22

本文主要内容来自于 learn CSS layout 和 CSS2.1 spec 和 深入理解 CSS 系列 和《CSS 权威指南》,主要讲解一些核心的 css 概念(起这么个名字感觉会被人打) 你可能听说过 CSS 常规流(norm flow)中的 inline…

工程化: 深入浏览器渲染

2020-01-22

本文翻译自 WebCore Rendering 系列 本文是一系列博文,旨在帮助人们理解 WebCore 的渲染系统。当我完成这些文章我将发布这些文章,它们也可以通过网站的文档区获得。 DOM Tree 一个页面将被解析成一个含有多个节点的树,其被称为文档对象模型(DOM…

深入typescript: 简易dependent type实现

2020-01-22

最近经常碰到有同事需要一些实现的复杂的函数类型,即根据函数前序的函数的实参类型确定后续参数的类型。 我们以 https://zhuanlan.zhihu.com/p/95828198 的例子为例 这里的目的是,第二个参数 value…

工程化: 踩坑大全

2020-01-22

各种库和工具的坑和技巧 babel && rollup && tsc && webpack && tsdx rollup 常用插件功能 rollup-plugin-commonjs: 由于 rollup 只支持 esm 模块,如果需要导入 cjs 模块,需要将 cjs…

工程化: promise is monad

2020-01-12

本文译自 https://blog.jcoglan.com/2011/03/11/promises-are-the-monad-of- asynchronous-programming/ 。 上文中我们看到了几个 monads…

工程化: 彻底禁止使用export default

2020-01-12

一年前写了篇文章,讲了 这种写法带来的问题, 杨健:深入解析 ES Module(一) 实际上不仅仅是 这种形式会带来问题 ,export default 除了稍微简化导入方式这个功能,带来了相当多的问题,甚至应该彻底考虑禁用 ,本文继续讲述 export…

深入React: build your own react

2020-01-12

本文根据 zpao/building-react-from-scratch 和 Implementation Notes - React 逐步讲解 react 的实现。 hyperscript(configuration -> dom) 浏览器提供了 DOM API…

深入React: hooks useCallback 问题

2020-01-12

很早总结的 hooks 的问题文章,内部讨论一直没想到啥最优解,发出来看看有没有人有更好的解法 最近 rxjs 作者 ben lesh 发了条推 https:// twitter.com/benlesh/sta tus/1195504467707355136?s=2…

深入React: 状态管理

2020-01-12

如今的 react 的状态管理工具基本上分为 redux 和 mobx 两个流派,mobx 基本上大家都是使用官方的 mobx 库,但是对于 redux 却衍生数不胜数的 redux 框架。如, , , 等等,这么多 redux 的框架一方面说明 redux…

工程化:Node.js 线上调试指南

2020-01-12

常见的线上问题: 504 超时了 500 internal server error 内存泄漏 cpu 上涨但还能继续服务 cpu 上涨到 100%且拒绝服务 压测 qps…

深入typescript类型系统: fresh object literal

2020-01-11

今天公司小伙伴分享 Typescript 实践时,提到的一个小坑就是对象字面量的赋值问题。本文结合规范谈谈关于 fresh object literal type 的小坑。 上面这个 case 就是 Ts…

深入Typescript: 从类型理解rxjs和async generator

2020-01-11

经历了 react hooks 的洗礼后,我们走进了 rxjs 的怀抱。本文尝试从类型系统角度去理解 rxjs。 本文主要是本人对 Erik meijer(RX 的发明者) talk 的理解(信息量很大,看了 n 遍),错误之处,欢迎指正 https://www.youtube…

工程化:基于yarn和lerna的workspace工作流

2020-01-11

monorepo 管理代码有众多好处,但是也带来了很多的技术上的挑战,github 上的很多的项目都是使用 lerna 管理 monorepo 项目,我们探讨下在 gitlab 上也通过 lerna 和 yarn workspace 结合来管理项目。 由于 yarn…

深入typescript类型系统: 泛型

2020-01-11

typescript 泛型和类型元编程 https://zhuanlan.zhihu.com/p/82056426 前面讲了typescript关于子类型的一些问题,本文主要讨论Typescript…

深入typescript类型系统: 重载与子类型

2020-01-11

在编程语言和类型论中,polymorphism 指为不同的数据类型的实体提供统一的接口。 最常见的 polymorphism 包括 ad hoc: 为一组独立的类型定义一个公共的接口,函数重载是常见的一种 ad hoc polymorphism subtyping: 如果 S…

深入typescript类型系统: rematch实践

2020-01-11

本文主要是结合通过修复 rematch 存在 ts 类型问题,讲述 ts 的一些比较高级功能的实际用法,如 contextual typing generic inference mapped type && index type && lookup type…

深入React: Coroutine

2020-01-11

image.png按照 andrew clark 在 **https://reactpodcast.com/70  所述,react hooks 即使说不上是百分百为了 concurrent mode 设计,也绝大部分是为了 concurrent mode…

深入React: 服务端渲染踩坑

2019-01-22

需求1:写一个组件,根据不同的语言渲染不同的合同模板,合同模板的格式是markdown。 template1.js 第一个问题来了, 不支持md,需要配置对应的loader,好办google搜一下,搜到了markdown-loader,webpack配置一下,问题解决。 需求…

深入React: hydrate

2019-01-22

上一篇讲到了如何通过 webpack 插件来实现文案的按页面和语言进行按需加载,如果页面仅仅通过客户端渲染,这种处理方式没有太大问题,然而当面临服务端渲染的时候,仍然会碰到这样那样的问题。 最近把项目里的 React 的版本升级到 16,React 的 15 到 1…