在 Mac 上运行低版本 Chrome 浏览器

October 20, 2022

假设你想体验历史版本的 Chrome,或是进行兼容性测试工作,亦或是复原用户的问题现场,你都需要在本机安装一份低版本 Chrome 浏览器。

如何优雅地解决请求覆盖

May 07, 2022

在 React 框架中,我们尝尝会使用 useEffect 来重复发送请求,当遇到请求覆盖时,又该如何优雅地解决呢?

2022,国际化活动可以做哪些技术优化?

March 17, 2022

我所在的 TikTok 杭州团队,主要负责直播间的营收活动,通过上榜、做任务、1v1 PK 等玩法激励用户和主播充值送礼,活动投放地区涉及中东、欧洲、东南亚……,所以国际化是研发流程中不可或缺的一环。传统的 RTL 布局、时区转换、本地化解决方案在新特性的加持下,会发生怎样奇妙的化学反应,这篇文章就来聊一聊~

前端白屏的前世今生

February 20, 2022

白屏(Blank Screen),它无所不及,摧枯拉朽,令用户体感全失、测试提 P0 相见、研发不寒而栗,胆战心惊,只知匆忙回滚。对于离用户最近的前端,更是重灾区,浏览器上只要出现白屏,先找前端准没错。近期工作中频频遇到线上白屏事故,我借这个机遇,介绍为什么会产生白屏,以及应对之道。

巧用 CSS Grid Layout 实现百分比堆叠柱状图

December 10, 2021

CSS Grid Layout,又称网格布局、栅格布局,是我认为现代 Web 开发最高效的布局方式,它创造性的改动就是将流式布局、Flex 布局等传统一维布局方式上升到二维,这波属于降维打击。在网页排版中,我们往往只能沿 X 轴或 Y 轴单个方向排布元素,CSS Grid Layout 允许我们同时沿着 X、Y 轴排布元素。

利用 Sass 优雅解决 RTL 语言布局适配

October 07, 2021

不同于国内的活动,国际化活动投放大量地区,这些地区有着不同的语言体系、阅读风格,意味着界面布局上要进行相应的适配,以获得更好的用户体验。本文介绍如何利用 Sass(CSS 预处理器)@mixin and @include 特性去优雅解决国际化 UI 布局。

inquirer.js 竟导致公司项目构建失败

September 19, 2021

inquirer.js 是一个基于询问式的命令行工具,能简化用户在终端的交互输入,那么它必然依赖于 Node 环境,而不是我们熟知的浏览器环境(基于 ES11 发布已经近一年的事实,市面上的现代浏览器早已支持 ?? 操作符)。

入职字节一年之际

July 22, 2021

从 2020 年 7 月 22 号以校招身份入职字节跳动至今,一年期已满。时至今日,我用文字记录下我的心路历程,希望带给初为职场人的同学们一点浅薄的经验,同时勉励自己,Always Day 1.

分享几个 CSS 技巧 - 第二波

July 09, 2021

正所谓「需求」是程序员的第一生产力,正是有了 PM 和 UI 千奇百怪的要求,才会使我们的编程技能(CSS)进一步上升。

移除 Android WebView 中 <video> 默认播放按钮

June 30, 2021

查阅资料后,才明白这是 Android WebView 的默认行为,其根本原因是 video 没有设置 poster 属性,所以自作聪明的 Android WebView 给它加了默认 poster(海报、封面)。

使用 useImperativeHandle 修改子组件的 state

April 10, 2021

有了 useImperativeHandle 的存在,ref.current 可以不仅仅被赋值为一个 DOM 对象,还可以是一个普通对象,对象里的方法,可以访问子组件的任意变量。

实现深拷贝之调用栈溢出、循环引用、复杂数据类型

March 13, 2021

文档还指出 Date、NaN、Infinity...等类型都会被 JSON.stringify 简易处理,不能保证序列化前后数据的一致性。既然原生 API 靠不住,便自己手写一个深拷贝,主要遇到了三个难题:调用栈溢出、循环引用、复杂数据类型。

分享几个 CSS 技巧 - 第一波

February 10, 2021

在实际工作中,为了百分百还原设计师们精致而又严格(变态)的设计稿,我们经常需要借助一些 CSS-Tricks 来保障页面的高还原度,不然设计妹子的像素眼分分钟找出遗漏点,向你发难。

受控组件 & 非受控组件

January 28, 2021

虽然在日常工作中经常使用 React 框架,但是对受控组件和非受控组件的概念十分模糊。

绘制 DOM 到 Canvas

January 01, 2021

Canvas API 提供了一个通过 JavaScript 和 HTML 的 canvas 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。除了以上的内容,还可以直接绘制 DOM。

package.json 之 Node.js 相关字段

October 17, 2020

这阵子在工作中参与了业务的抽象,计划打造通用组件并发布成 npm 包便于后续项目的共建,自然而然,学习到了一些关于 package.json 之前没有接触到的知识点。

Hooks 之手写 useTitle

July 18, 2020

React Hooks 正凭借其 Function Component 的特性,已经在实际项目中被广泛应用,而对于逻辑是重复且可被复用的组件,借助第三方 React Hooks 库来加快开发效率无疑是正确的选择。

HTTP 之重定向

June 06, 2020

注意!这里的重定向逻辑并不发生在 JS 层面,而是指 HTTP 层面,所以需要在服务端(Node)或者 Nginx 上进行设置,即指定关键的响应首部字段 Location 和 状态码 Status Code.

Geolocation 的正确使用姿势

May 26, 2020

之前在实习过程中,接触过有关地理定位的需求,业务场景是通过 H5 页面获取用户的所处位置,很自然想到了 Web API 中的 navigator.geolocation.

Koa 源码剖析 & 实现

May 19, 2020

Koa 作为搭建 NodeJS 服务时最常用的 web 框架,其源码并不复杂,但却实现了两个核心要点:中间件(Middleware)流程控制,又称“洋葱式模型”。将 request(IncomingMessage object)和 response(ServerResponse object)挂载到上下文(ctx)中。

基于 Travis CI + PM2 实现 NodeJS 应用的持续集成和部署

May 13, 2020

何况,在标准的开发流程中,我们还需引入 单元测试、覆盖率报告、代码风格检测 ……,并将应用部署到 不同环境的服务器(开发、测试、生产)中,这无疑是一项繁琐的工作,本着 不想当运维的前端不是一个好全栈 的核心思想,我迫切需要解放我的双手。

关于 Font 的疑问解答和新特性解析

May 08, 2020

以前从没去系统了解过网页字体,但它却时时刻刻在影响用户的体验,作为前端的一部分,其重要性不言而喻,在此,记录我对字体的一些疑问和新特性解析。

一次 node_modules 安装失败的排查之旅

April 28, 2020

前段时间,我更换了博客的主题,博客是使用 Gatsby 搭建的,它基于 React ,利用 Markdown 搭配 GraphQL,可帮助开发者快速构建博客站点。但在我安装依赖包时却掉入了天坑,此文用于记录我的脱坑过程。

Object to Primitive

April 10, 2020

虽然从字面上看不出显式访问,但不要忽略了一个重要条件,即非严格相等运算符 ==,它会将等式两边的值做出相应的隐式转换(又称强制类型转换)再进行比较。而隐式转换的最终目的,是将等式两边的值都转换为原始值(Primitive value),例如:string、number、boolean...

仅需几行代码,为网站添加黑暗模式

March 08, 2020

在上一年,黑暗模式的概念席卷而来,随着系统级别的支持,其他主流应用程序的适配也陆续展开,它们大多提供了相应的入口,让用户可以切换整个主题,以此获得最舒适的体验。

你所不知道的 toString()

November 19, 2019

最近在看 Lodash 的源码,其精简的语法和巧妙的设计,值得大家去细品 。其中有一个工具函数叫 getTag,旨在获取对象的类型标记(Tag),即我们所熟知的,利用 Object.prototype.toString.call() 去做类型检测。

利用 Redis 解决 NodeJS 中 Session 存储问题

August 22, 2019

Redis 是一个基于内存的键值数据库,它由 C 语言实现的,与 Nginx / NodeJS 工作原理近似,同样以单线程异步的方式工作,先读写内存再异步同步到磁盘,读写速度上比 MongoDB 有巨大的提升。

2019 上半年前端实习面经

August 09, 2019

坐标杭州,我在上半年陆续找过一些前端实习,记录面经于此,供大家分享,现正在准备秋招。

ES6 核心特性解析

May 31, 2019

此文用来记录 ES6 的核心特性,以及一些容易被遗落的知识点。

Session 和 Cookie 深度实践

May 23, 2019

很多人都已经看过 Session 和 Cookie 相关的入门文章,却只限于纸上谈兵,不懂得实际运用,本文从最小项目入手,结合前端跨域、HTTP 等知识点,做一次深入实践。