- 博客(33)
- 收藏
- 关注
RSS订阅原创 记录裁员后的半年前端求职经历
title: 记录裁员后的半年前端求职经历pubDatetime: 2024-05-13modDatetime: 2024-05-14description: 主要讲述自己被裁后的求职经历，包括心路历程变化，踩坑，面试准备等ogImage: https://cdn.openart.ai/workflow_generation/yBzXR6Ogu01t3U7DPGJh/abcccd35...
2024-05-14 01:09:25
1051
1
原创 分享自己写的几个 eslint 规则
title: 分享自己写的几个 eslint 规则tags: - eslintcategories: - 前端author: 余腾靖pubDatetime: 2024-03-24在被裁后准备跑路的最后一周，把一些自己做的工作成果能开源的都给开源了，其中便包括一些自己写的 eslint 规则，不然你也看不到这篇文章了。由于深知自己的怠惰，所以我一直坚信一句话：永远不要高估开...
2024-03-24 17:44:32
466
原创 如何解决项目依赖重复打包问题
title: 如何解决项目依赖重复打包问题tags: - webpack - vitecategories: - 前端author: 余腾靖pubDatetime: 2024-03-22由于最近面试经常被问到这个问题(简历上写了)，感觉答的时候不是很系统清晰，于是便有了这篇文章。为啥对这个问题这么上心？在上家公司最后一段时间是做前端工程基建相关的，不说是最有成...
2024-03-23 10:54:45
754
原创 前端如何统一开发环境
统一不同的同事之间，本地和 CI 之间的开发环境有利于保证运行效果一致和 bug 可复现，本文聚焦于前端最基本的开发环境配置：nodejs 和 包管理器。nodejs首先推荐使用 fnm 管理多版本 nodejs。对比 nvm：支持 brew 安装，更新方便跨平台，windows 也能用 winget 安装使用 fnm 一定要记得开启根据当前 .nvmrc 自动切换对应的...
2024-01-18 14:33:26
952
原创 TS类型体操技巧总结
最近刷类型体操有点上瘾，本文算是最近刷类型体操的一些思考的集合。刷的时候感觉自己长脑子了，但是过段时间又好像没脑子了，还是得通过博客总结沉淀一下判断是否是 never 类型typescripttype IsNever<T> = [T] extends [never] ? true : false;type IsNever<T> = (() => T) ex...
2024-01-15 21:56:05
1466
原创 面向 lint 编程
何为 linterLinter 泛指能够检测代码问题的工具，这些问题可能包括：代码风格，代码格式是代码风格的一部分逻辑 bug常见的 linter：eslintstylelintmarkdownlintcommitlintcode spell checker小众的如zhlintauto correctpublintattw不建议使用jshin...
2023-06-13 04:18:13
323
原创 Mac 装机记录
由于这两年公司裁了不少人，其实一直都是有不少 m1 机器可以换的，但是之前由于软件兼容性的问题一直没有换。今年工作内容换了，最近夏天快到了，温度越来越高，实在是忍不了那滚烫的 touch bar，必须得换了。本文的写作目的：分享一些在用的工具和系统优化技巧做个记录，方便下次换机的时候可以有条不紊，快速恢复开发环境机器配置旧机器：MacBook Pro 2019 13 寸...
2023-05-20 22:41:46
384
原创 moduleResolution 总结
模块化之争的在 ESM 标准出来的时候已成为定局，这两年前端界也在进行 ESM 大迁移。关于 ESM 个人感觉可以聊的并不多，最近讨论最多的可能还是到底该不该用 default import 以及它俩互相转换的各种坑。前不久 TS 发布了 5.0，引入了新的 moduleResolution：bundler。官方文档对此的描述非常简单，阅读完本文，你会对它的产生有更深刻的理解。什么是 modu...
2023-04-14 02:00:00
1735
3
原创 PS插件图层遍历性能优化
Photoshop 中的 ExtendScript 和浏览器环境下 JavaScript 一样存在 DOM API 用于访问 PS 中的各种对象。图层类似 Web 中的 Element 是最基本的操作对象，也是我们编写 CEP 插件最常访问的 DOM 对象。一个 PSD 文档由众多的图层组成一棵 n 叉树，经常性我们需要去完整遍历这棵 n 叉树，而且往往是一次调用 JSX 接口就需要遍历多遍。这个...
2022-09-11 16:58:50
592
原创 【CEP 扩展开发三】Debug
通过第二篇的教程我们已经可以初步上手开发 CEP 插件了。实际的开发工作中，随着业务的增多和复杂度的加深，单凭人肉代码来定位和修复 bug 会变得越来越困难。这时候，debug 工具就显得尤为强大和高效了。由于 CEP 架构的特殊性，本篇将会按照不同的环境分别讲述对应的 debug 方法。浏览器环境代码 debug由于 CEP 的浏览器环境代码下可以混编 nodejs 代码，因此浏览器 v...
2022-08-14 12:33:25
370
原创 【CEP 扩展开发二】Hello World
本文是 CEP 扩展开发系列教程的第二篇，通过手把手实现一个 Hello World 级别的插件来初步掌握 CEP 插件的配置和开发。CEP 扩展本身是跨系统(Windows，MacOS)平台的，但是不同宿主环境(Photoshop，AfterEffects 等)的 jsx 解释器(或者说 engine)的技术实现有些许差异。注入的 API 那更是完全不一样，毕竟不同宿主的文档模型和工具能力差...
2022-08-07 10:12:06
980
2
原创 【CEP 扩展开发一】简介
写作目的Adobe 毫无疑问是设计软件行业的垄断级巨头，旗下的 PS，AE 等都是搞设计和自媒体的必装软件。有很多小公司的产品其实本质上是依赖这些设计软件生存的，例如开发 AE 特效插件的公司，例如使用 PS 开发海报模板的我司。其实 CEP 扩展的开发生态是相当的恶劣，中文资料不能说少，简直可以说是没有，质量不错的一只手可以数得过来。国外的资料相对多一点，但还是很少，主要还是以论坛，gi...
2022-04-28 23:39:46
345
原创 VSCode 又酷又实用的多光标编辑
如果要说 VSCode 哪个特性极大的提高了编码效率，多光标编辑绝对是其中之一。多光标编辑让我们避免重复进行相同的文本操作，VSCode 内建的和第三方扩展提供的文本处理命令更是能极大的增强多光标编辑的灵活性。希望通过阅读这篇文章，能够教会读者如何在日常编辑中灵活运用多光标编辑。内容大纲：Mac 和 Windows 按键映射关系如何添加多光标移动光标选中文本删除文本VSCode...
2022-03-27 16:28:10
714
原创 TypeScript 类型体操实例解析
周会的分享内容，通过解析几个实用或者有趣的类型体操实例给大家分享一些 TypeScript 类型知识。也算是对自己刷了近 100 道 type-challenges 学到的知识做个小总结。什么是类型体操高阶函数：传入函数，返回另一个函数。高阶组件：传入一个组件，返回另一个组件。高阶类型：传入类型，返回另一个类型。在 TypeScript 中，我们可以使用 type 去定义一些复...
2022-03-25 21:13:25
431
原创 如何给 shell 自定义快捷键
最近在开发的时候有刻意的去思考有哪些影响自己开发效率的因素。比如我实际碰到的一个问题就是当 zsh-autosuggestions 插件完整提示出你要运行的命令，但是我在 Mac 上要先输入 cmd + ->，再敲回车。输入 Mac 自带键盘的右箭头是很影响输入效率的，当时我就想，我能不能通过快捷键 shift + enter 实现接受 zsh 提示并回车运行。在摸了两小时 ???? 后，总算是在...
2022-03-20 01:39:11
288
原创 VSCode Webview 完美集成 Webpack 热更新
最近在写一个 VSCode 扩展时需要通过一个 Webview 去渲染一些网页内容，作为一个前端配置工程师，自然是忍受不了没有热更新的网页开发。经过了一番折腾，最终实现了让 VSCode Webview 完美集成 webpack 的热更新。开发环境在正式进入主题之前，先介绍下用来演示的项目开发环境。文章中演示代码仓库：vscode-webview-webpack-hmr-example。...
2022-03-19 19:00:36
400
原创 那些你应该考虑卸载的 VSCode 扩展
这篇文章可能会得罪一部分 VSCode 扩展的作者，但是我实在是看不惯网上很多的文章还在推荐一些已经过时的扩展，我觉得作为 VSCode 的老粉，我有必要写一篇文章科普一下。在 VSCode 扩展市场目前其实存在着不少下载量特别高但是不应该再被使用的扩展，显然官方是不可能直接给你标出来哪些扩展已经被废弃了，哪些有严重 bug，纯靠扩展作者自觉。很多人新人由于没有深入去了解过，看了一些文章的介绍或...
2020-04-05 15:38:32
1107
原创 从零开始配置 react + typescript（三）：webpack
本篇为 从零开始配置 react + typescript 系列第三篇，将带大家完成模板项目的 webpack 配置。整个项目的配置我力求达到以下目标：灵活： 我在配置 eslint 是选择使用 js 格式而不是 json，就是为了灵活性，使用 js 文件可以让你使用环境变量动态配置，充分发挥 js 语言的能力。当然了，用 js 作配置文件也是有缺点的，不能使用 json schema 校验。...
2020-02-19 08:20:15
740
原创 从零开始配置 react + typescript（二）：linters 和 formatter
继 从零开始配置 react + typescript（一）：dotfiles 介绍了一些最先配置的 dotfiles，本篇将继续介绍 lint 工具 eslint，stylelint，代码格式化工具 prettier，用 husky + lint-staged 来实现每次 commit 时只 lint 修改过的代码，以及使用 commitlint 来规范化 commit message。es...
2020-02-04 06:58:52
2643
1
原创 从零开始配置 react + typescript（一）：dotfiles
之前我写过一篇文章搭建 react + typescript + ant design 开发环境，现在看来很多内容都已经过时了。但是我看到前不久还有读者给我这篇文章点赞，不更新的话总感觉坑了它们，有点过意不去。但是，如果现在让我再去配置那套环境，我肯定不会再像那篇文章那样配置了，毕竟过了这么长一段时间，很多工具都在发展，我的想法也在改变，那么干脆我就再整一篇新的文章，这是我创作这篇文章的动机之一。...
2020-02-02 10:45:02
341
原创 讲清楚 JavaScript 原型
记得以前知乎上看到过一个问题：面试一个 5 年的前端，却连原型链也搞不清楚，满口都是 Vue，React 之类的实现，这样的人该用吗？ 。写文章的时候又回去看了下这个问题，300 多个回答，有很多大佬都回答了这个问题，说明这个问题还是挺受关注的。最近几年，随着 ES6 ，TypeScript 及类似的中间语言的流行，我们平时做业务开发很少能接触到原型，基本上都是用 ES6 class 来去更简单的...
2020-01-28 08:59:37
226
原创 使用 webpack 构建 chrome 扩展的热更新问题
前不久我写了一个 chrome 扩展，作为一个前端弄潮儿，我当然想用上各种前端界最 fashion 的开发工具。于是乎，折腾到最后使用了 webpack + TypeScript + react 这么一套技术栈。在 github 上研究了几个模板项目之后，发现大多数都太初级了，功能太简单，而且有一个我觉应当提供的很基础的功能始终没发现有哪个项目支持，也就是当修改了 content script 之...
2020-01-16 09:05:20
1131
原创 全面总结 JavaScript 类型相关知识点
相信到了年底，不少前端都准备找工作跳槽了。而作为春招大军的一员，估计很多准备春招的应届生和我一样这个年过得很焦虑。JavaScript 类型是前端面试中考察 JavaScript 基础的常考知识点，经常性第一个问题就是 JavaScript 中有哪些类型。笔者今年从春招实习到秋招经历了挺多的面试，也总结了一些规律：一般来讲第一轮面试往往就是考察基础，就算你简历很牛逼那也得走个流程啊。而考察基础一...
2020-01-15 12:08:15
207
原创 教你用好 Javascript 数组
作为 Javascript 的标准对象之一，数组是非常底层而且实用的数据结构。虽然结构很简单，但是用好却不简单，包括我一开始学习 JS 的时候看到一堆原生方法也是很蒙蔽，怎么能有这么多方法。而且数组的各种方法各有其特点和使用场景，如果你还停留在 for 循环一把梭的阶段，也就是数组元素拼接，遍历等操作都是用 for 循环来完成的阶段，那么这篇文章非常适合你，或者你也可以推给你的坑逼同事︿(￣︶￣)...
2019-10-04 15:49:07
183
原创 对称加密与非对称加密
加密在编程中的应用的是非常广泛的，尤其是在各种网络协议之中，对称/非对称加密则是经常被提及的两种加密方式。对称加密我们平时碰到的绝大多数加密就是对称加密，比如：指纹解锁，PIN 码锁，保险箱密码锁，账号密码等都是使用了对称加密。对称加密：加密和解密用的是同一个密码或者同一套逻辑的加密方式。这个密码也叫对称秘钥，其实这个对称和不对称指的就是加密和解密用的秘钥是不是同一个。我在上大学的...
2019-09-22 16:44:32
276
原创 javascript 基础之 call, apply, bind
系统，扎实的 javascript 语言基础是一个优秀的前端工程师必须具备的。在看了一些关于 call，apply，bind 的文章后，我还是打算写下这篇总结，原因其实有好几个。首先，在如今 ES6 大行其道的今天，很多文章中讲述的它们的应用场景其实用 ES6 可以更优雅的解决。再则，讲它们的实现原理的文章不多，本文将把它们通过代码一一模拟实现，让它们不再神秘。不谦虚的说，关于 call，appl...
2019-06-29 23:17:19
148
原创 javascript 基础之 call, apply, bind
系统，扎实的 javascript 语言基础是一个优秀的前端工程师必须具备的。在看了一些关于 call，apply，bind 的文章后，我还是打算写下这篇总结，原因有几个。首先，在如今 ES6 大行其道的今天，很多文章中讲述的它们的应用场景其实用 ES6 可以更优雅的解决，但是基本上·没有文章会去提 ES6 的解法。再则，讲它们的实现原理的文章其实不少，但是或多或少实现的有些不够完美，本文将把它们...
2019-06-29 11:56:29
118
原创 通过 koa2 服务器实践探究浏览器HTTP缓存机制
浏览器 HTTP 缓存是一种常见的 web 性能优化的手段，也是在前端面试中经常被考察的一个知识点。本文通过配置 koa2 服务器，在实践中带你探究浏览器的 HTTP 缓存机制。先来直观认识一下浏览器 HTTP 缓存：上面是打开浏览器后直接访问 V2EX 首页后的截图，矩形圈起来的那块也就是 size 部分显示的都是 from disk cached，说明这些资源命中了强缓存，强缓存的状...
2019-06-23 15:11:34
930
1
原创 搭建 react + typescript + ant design 开发环境
9102 年了，前端工程化发展在 nodejs 的基础上已经发展的非常完善了，各种前端构建辅助工具层出不穷。ES6 编译器 babel，css 辅助工具 postcss / sass / less，代码风格检测工具 eslint / prettier / stylelint，git 辅助工具 husky / lint-staged / commitizen / commitlint，自动化构建工具...
2019-05-10 15:23:46
684
原创 react hooks 实践总结（一）：class component 和 function component
自从我深入了解了 react hooks，被其简洁的编写方式和强大的扩展性深深吸引，然后我就迫不及待地想把它应用到实际项目中。使用下来发现，真香！但是坑也不少。react hooks 使用起来代码确实简洁不少，甚至说有点黑魔法的味道。如果使用者不怎么了解 hooks 实现原理和函数组件的渲染过程，很容易导致使用 hooks 编写组件时出现一些很离奇的 bug，所以使用好 hooks 还是需要一定...
2019-05-04 07:00:46
497
原创 使用 nodejs 写爬虫(二): 抓取 github 热门项目
其实爬虫是一个对计算机综合能力要求比较高的技术活。首先是要对网络协议尤其是 http 协议有基本的了解, 能够分析网站的数据请求响应。学会使用一些工具，简单的情况使用 chrome devtools 的 network 面板就够了。我一般还会配合 postman 或者 charles 来分析，更复杂的情况可能举要使用专业的抓包工具比如 wireshark 了。你对一个网站了解的越深，越容易想出简...
2019-04-05 09:27:39
279
原创 总结下 JavaScript 中的一些小技巧
这篇文章主要记录一下平时自己实践得到的, 博客中学习的以及在一些项目源码中看到的 javascript 技巧。有些东西可以说是奇淫技巧，有些可能是 ES6+ 中一些比较具有实用性的新语法。&& 和 || 的妙用有时候我们需要在某个函数或变量为 true 时执行另外一个函数。例如:const task1 = () => { console.log('执行 tas...
2019-04-03 15:21:20
107
原创 使用 nodejs 写爬虫(一): 常用模块和 js 语法
常用模块常用模块有以下几个:fs-extrasuperagentcheeriolog4jssequelizechalkpuppeteerfs-extra使用 async/await 的前提是必须将接口封装成 promise, 看一个简单的例子:const sleep = (milliseconds) => { return new Promise((reso...
2019-04-03 04:39:17
284
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人