木白的博客

vscode的替代马甲

Wed, 26 Jun 2024 00:00:00 +0000

vscode做开神奇级别的文本编辑器，在前端届堪称霸主！但这个霸主被微软内置了好些东西，当同事打开n多工程后，vscode就会拖累电脑，为此，特找了另外一个神器–vscodeium，vscode开源版的衍生版

vscodium默认使用的扩展源是 open-vsx.org，部分扩展没有加入此扩展源，需要使用微软官方扩展源才能直接安装和自动更新。

修改 安装根目录/resources/app/product.json文件中的 extensionsGallery键对应的值如下：

"extensionsGallery": {
    "serviceUrl": "https://marketplace.visualstudio.com/_apis/public/gallery",
    "itemUrl": "https://marketplace.visualstudio.com/items"
}

重启vscodium。扩展里就可以搜索安装微软官方扩展源里的扩展。

无题一

Sat, 15 Jun 2024 00:00:00 +0000

最近，因为工作的关系，又捡起了好久没写的博客，开始慢慢的码字。一来方便人家在互联网上找我，二来，尽量用这样的方式让自己停下来片刻，便于思考，总结。

今年四十一了，心理上，如果不看这个年龄，自己基本感觉不出来。所处的工作环境，以及生活上接触的一些人，慢慢的越来越明显了。

也就想吐槽一下，写出来后又给删了。小年轻嘛，都气盛。

其实，这个年龄在互联网行业，处于绝对的“退休期”。虽然在经验上，能力上，甚至创造力上有一点点优势，但整体而言，已经属于“不值得”的那一批了。所以，那天领导跟我说的话，我还是比较认同的，我们这个年龄的人做事，就不能跟年轻人一样了。否则，只能被淘汰。

我一样都是顺其自然的。不管遇到什么事情，苦难也好，困难也罢，拼命去拼，结果就教给老天了。

很早之前就想创业了。到了这个年龄后，这个想法就愈加明显，甚至躁动了。每天努力做事情，好的结果，受惠的不是自己，坏的结果，承担的，一定是自己。

求职说明书

Tue, 11 Jun 2024 00:00:00 +0000

基础信息

姓名：周柏文 出生年月：1983年10月 学历：本科 手机/微信：13818766955， 邮箱：moobye@126.com

求职意向：前端工程师，前端架构师，前端负责人

个人介绍

10多年的互联网从业者，所学略杂，基本上基于业务而学。

涉及技能：

基于Js、html、css的React,Vue,Svelt,Angular,以及Jquery，Chrome插件，threejs；另外还有市面上常用的Nextjs，Umijs等，对AntD, Vant, ElementUI，NavieUI，tailWindcss, windiCss, unocss等有较多开发经验，
基于百度amis做过低码平台和自定义组件二开；
基于TypeScript开发工具以及业务开发；
基于Nodejs的工程化，webpack，vite，rollup，glup，Eslint，babel等
后端：Nodejs，express，koa2，hapijs，nestjs，mySql，
客户端：RN，Weex， Flutter（dart），鸿蒙（ArkTs）
小程序：微信原生，支付宝原生，Taro，Uniapp，Morjs以及周边的UI库
5年以上团队管理经验，带过从1到20左右的团队，有项目管理经验；
其他技能：画图（PS，AI），交互设计（AXD，Sketch），多媒体/影视（Flash，Pr，Authorware等）

所涉及的行业：

电商、互联网金融（toB端，toC端、房地产销售、酒店管理、门户网、企业官网

涉及系统和应用：

内容管理+移动社区（类似京东的逛）
金融交易系统（B+C两端），可以理解为金融行业的电商
纯B端管理系统
低码系统（toB & toC）
网站：官网+门户网+移动网站
虚拟饰品电商平台，后管管理

项目总结

整理最近几年所做的一些项目

近两年

基于webpack5+react+redux toolkt 搭建基础的react工程，并以此为基础搭建了一套移动端使用的多页spa工程，一套B端后管工程；后根据业务需求，又搭建了一套TS+Vue3+vite+pina的工程。并将这些基础工程集中的一个公司内部的CLI工具里。

根据团队编码规范以及业界统一认知，实现了一套可以用React以及vue的Eslint配置；

实现了一套自己的Utils工具，包括基于xtermjs的终端，基于xxx的code编辑器等

除此之外，没有特别有意思的项目。基本上是独立完成了公司所有B端系统，包括集所有B端系统一体的工作台（React作基座+qiankun），子系统包括，devops系列 – 内部应用管理和发布系统，以及APP发布管理系统，基于百度arms引擎开发了低码系统；服务端（nodejs），基于开源代码构建的csgo机器人系统，完成初步管理以及完善服务

C端也主要是完成基础的业务开发，有特色的就是商品价格走势，以及基于Hybrid模式下实现的多webview通信；后续针对Hybrid整理一套性能优化方案，并实施。

再往后几年

业务向：

公司主营的微信小程序，以及相关的推广小程；主要以原生实现为主
酒店业主使用管理酒店业务的Hybrid App，基于weex；
酒店前台使用PMS管理系统，基于vue2；
酒店签约系统（B端），
酒店业主使用的chrome插件若干，如订单迁移，数据采集等；

技术向：

带领团队接手BFF改建，由java 转 nodejs服务，构建表单生成接口功能，并孵化下面项目；
基于nodejs+react完成表单生成系统基础以及

工作经历

2022.7 – 至今悠悠有品 – 前端工程师

公司简介： 公司主要运营一个基于steam的游戏CSGO里饰品的买卖平台。

工作职责： 前期负责公司所有web相关工作。包括基建，BC两端业务开发；后专注于B端所有系统和业务。

2018.7 – 2022.7 OYO – 前端技术专家

公司简介： OYO，鸥游（上海）酒店管理有限公司，全球最大单体酒店管理公司。

角色：业务线负责人，前端负责人

工作职责： 负责B端两条产品线评需求（PRD），拆任务（task），分配任务，跟进进度确定技术选型，技术方案，开发（编码），读代码，组织code review 组织技术培训，确定项目代码优化方案，涉及公司所有产品线项目，包括B端，C端以及营销。主管过基于Node的BFF系统，基于weex的app开发，以及公司所有小程序的开发管理。

2017.6 – 2018.6 上海米么 – 资深前端开发工程师

公司简介： 又成米么金服，医美界的互联网金融公司

角色：上海分部前端负责人

*工作职责：* 负责部门产品的前端开发工作，包括B端产品，C端混合开发（RN），CDK，公用组件或插件的开发等负责前端需求的评审，前端任务的分配和跟盯。

2015.10 – 2017.6：上海北斗投资管理有限公司 – 资深前端开发工程师

公司简介： 互联网财富管理公司。主营信托，基金，私募等产品，产品： 理财师APP，私募等交易网站，微信小程序

角色： 前端负责人

工作职责： 主管前端，负责所有项目前端开发，包括不限于app（自由理财师），以及wap（自由理财师和360财富），自由理财师官网，理顾金融官网，北斗投资官网等；搭建前端目录结构，js封装改造，scss项目结构，前端页面性能优化方案设置实施；兼任产品经理，主持自由理财师产品线（网站，APP，wap）以及360财富wap；兼带项目，组建并带领团队，实行敏捷开发进行项目开发；作为业务需求方，产品方和开发项目组之间的沟通桥梁；

2011.05 – 2015.10：新致软件 – 前端开发工程师

公司简介： 保险金融行业，软件行业等解决方案提供者

角色： 项目负责人

外包于大地保险，完成官网设计制作（JQ+HTML+CSS），主要，并参与网站SEO优化；

外包于陆金所B2B部门（3年有余），从事前端开发工作，兼任项目负责人。

前期在西双版纳交易所，完成所有B端系统制作；后期在B端部门，制作Lfex微信公众号（私募部分），Lfex平台（现已并入lu.com）陆金所交易市场官网平安保理官网 Lfex信托交易平台，以及理财人小程序制作等；

2011.01 – 2011.4：今题网 – 前端工程师

公司简介： 新兴门户网站，来源于美洲

工作职责：1. 设计网页，营销活动页，广告等；2.将设计稿实现为web页，移动端页面等。

2009.05 – 2010.12：上海林肯电气有限公司 – 网页设计制作

工作职责： 设计制作公司管官网、产品宣传广告，以及网络广告。维护并优化公司网站（SEO）。

2008.07 – 2009.5：上海玺腾企业咨询有限公司 – 网页设计制作

工作职责：设计制作网站，以及网络广告。维护并优化公司网站（SEO）

2007.07 – 2008.7：上海奥诺信息技术有限公司 – 网页设计制作

工作职责：公司广告设计，网站设计和制作

2006.07 – 2007.7：上海易境房地产咨询有限公司 – 网页设计制作

工作职责：界面设计制作，VI设计，以及网站制作等。

web性能之prefetch和preload

Fri, 07 Jun 2024 00:00:00 +0000

前言

Web 性能–MDN文档地址：传送门

prefetch，中文名叫链接预取，比较拗口，其实可以叫链接预加载。具体概念见：prefetch

preload, 是标签 <link> 的一个属性，一般在html的head里。具体概念见: preload

这两个都有助于优化 TTI、FCP ( First Content Paint )。

我们通过具体例子来看看它们是怎么优化web性能的。

prefetch

prefetch的使用如下：

<link rel="prefetch" as="script" href="a.js">
<link rel="prefetch" as="style" href="a.css">

href表示需要预加载的资源路径
as属性指定预加载资源的类型，有document、style、script、images
rel后面跟 prefetch

在webpack里，import资源的时候，做如下配置即可

import(/*webpackPrefetch: true */ 'a.js')

但我们在工程里使用的时候，可能不会这么直接使用，一般都是在webpack或者vite里配置，使其在打包的过程中自动添加上。

忙，后续补上

前端技术方案模版（参考）

Wed, 08 May 2024 00:00:00 +0000

前端技术方案模版（参考）

1. 概述

1.1 需求背景&价值

为什么要做这个需求，价值在哪里，背景是什么

1.2 前置概念

下文出现的一些词汇的概念解释

2. 相关文档

列举对理解此次需求和设计方案相关的文档，包括但不局限于以下内容，可进行补充。

需求文档：https://xxxx.comopen in new window @产品
交互文档：https://xxxx.comopen in new window @交互
视觉的稿：https://xxxx.comopen in new window @UED
后端方案：https://xxxx.comopen in new window @后端
接口文档: https://xxxx.comopen in new window @后端
冒烟用例：https://xxxx.comopen in new window @测试

3. 项目排期

3.1 任务拆解

项目拆解后的详细工时

3.2 项目里程碑

包括但不局限于以下内容，可进行补充。

事项	日期
需求评审	202x 年 xx 月 xx 日
技术评审	202x 年 xx 月 xx 日
版本提测	202x 年 xx 月 xx 日
交互走查	202x 年 xx 月 xx 日
版本发布	202x 年 xx 月 xx 日

4. 总体设计

4.1 参考规范

讲述开发遵循的技术规范，包括但不局限于以下内容，可进行补充。

序号	规范名称	规范地址
1	前端开发规范	xxx
2	接口规范	xxx

4.2 架构图

按需设计

5. 内部实现

各个模块的实现细节

5.1 模块一

5.1.1 功能说明

该模块的具体功能

5.1.2 流程说明

对功能流转进行说明，主要需包含正常流程和异常流程

5.1.3 模块详细设计

从技术的角度讲述功能的实现思路。流程、时序方面必须用图示

5.1.4 外部依赖

对接口、其它业务组件的依赖

6. 技术分析-检查清单

序号	技术分析自检项	技术分析自检项
1	本次改造对原有功能需求的影响范围，包括以前交互，视觉设计
2	是否可提取出公用组件
3	数据结构变更是否考虑老数据兼容
4	是否影响移动端
5	操作是否做了防重处理
6	兼容性（浏览器、分辨率、主题）
7	团队 Code Review Checklist
8	….

7. 测试数据

涉及到的测试数据。譬如提前准备的商品、账号信息。

8. 测试重点

测试需要重点关注的部分, 对现有业务和组件的影响点

木白的博客

vscode的替代马甲

无题一

求职说明书

基础信息

个人介绍

10多年的互联网从业者，所学略杂，基本上基于业务而学。

涉及技能：

所涉及的行业：

涉及系统和应用：

项目总结

近两年

再往后几年

工作经历

2022.7 – 至今 悠悠有品 – 前端工程师

2018.7 – 2022.7 OYO – 前端技术专家

2017.6 – 2018.6 上海米么 – 资深前端开发工程师

2015.10 – 2017.6：上海北斗投资管理有限公司 – 资深前端开发工程师

2011.05 – 2015.10：新致软件 – 前端开发工程师

2011.01 – 2011.4：今题网 – 前端工程师

2009.05 – 2010.12： 上海林肯电气有限公司 – 网页设计制作

2008.07 – 2009.5：上海玺腾企业咨询有限公司 – 网页设计制作

2007.07 – 2008.7：上海奥诺信息技术有限公司 – 网页设计制作

2006.07 – 2007.7： 上海易境房地产咨询有限公司 – 网页设计制作

web性能之prefetch和preload

prefetch

前端技术方案模版（参考）

前端技术方案模版（参考）

1. 概述

1.1 需求背景&价值

1.2 前置概念

2. 相关文档

3. 项目排期

3.1 任务拆解

3.2 项目里程碑

4. 总体设计

4.1 参考规范

4.2 架构图

5. 内部实现

5.1 模块一

5.1.1 功能说明

5.1.2 流程说明

5.1.3 模块详细设计

5.1.4 外部依赖

6. 技术分析-检查清单

7. 测试数据

8. 测试重点

2022.7 – 至今悠悠有品 – 前端工程师

2009.05 – 2010.12：上海林肯电气有限公司 – 网页设计制作

2006.07 – 2007.7：上海易境房地产咨询有限公司 – 网页设计制作