-
Notifications
You must be signed in to change notification settings - Fork 2
/
feed.json
444 lines (444 loc) · 42.3 KB
/
feed.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
{
"version": "https://jsonfeed.org/version/1",
"title": "风痕 · 術&思",
"home_page_url": "https://hughfenghen.github.io",
"feed_url": "https://hughfenghen.github.io/feed.json",
"description": "个人思考、Web技术",
"items": [
{
"id": "https://hughfenghen.github.io/posts/2020/07/13/cljs-node-hotreload/",
"url": "https://hughfenghen.github.io/posts/2020/07/13/cljs-node-hotreload/",
"title": "ClojureScript + node + hotreload",
"summary": "假设你已经创建了项目，并安装了shadow-cljs相关依赖，若未完成请参考文档创建项目：https://shadow-cljs.github.io/docs/UsersGuide.html\n\n*本文示例采用shadow-cljs打包构建，详细资料参考[官方文档](https://shadow-cljs.github.io/docs/UsersGuide.html#target-node- ...",
"date_modified": "2020-07-13T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/07/13/cljs-transient-performance/",
"url": "https://hughfenghen.github.io/posts/2020/07/13/cljs-transient-performance/",
"title": "cljs中普通与瞬态数据结构性能对比",
"summary": "chrome 67；\nCPU：2.2 GHz Intel Core i7\n内存：16 GB 1600 MHz DDR3\n\n官方的例子:\n\n(defn vrange [n]\n (loop [i 0 v []]\n (if (< i n)\n (recur (inc i) (conj v i))\n v)))\n\n(defn vrange2 [n]\n (loo ...",
"date_modified": "2020-07-13T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2022/08/21/shadow-cljs-proto-repl/",
"url": "https://hughfenghen.github.io/posts/2022/08/21/shadow-cljs-proto-repl/",
"title": "shadow-cljs项目 在 proto repl 切换namespace",
"summary": "按官方文档中的说明已经能正常连接proto-repl，但是repl中不能切换到源码所在的namespace，不能在开发期间执行业务代码\n\n查看官方文档操作，下面列出简单步骤，加粗为注意事项\nhttps://shadow-cljs.github.io/docs/UsersGuide.html#protorepl_atom\n\n添加 proto-repl 依赖\n\nwatch启动，**并在 ...",
"date_modified": "2022-08-21T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/07/29/js-data-process/",
"url": "https://hughfenghen.github.io/posts/2020/07/29/js-data-process/",
"title": "JS数据处理",
"summary": "[[toc]]\n\n分享目标\nJS数据处理技巧速成\n让你感叹：JS还可以这样写\n\n基础\n\n实践原则\n数据处理时，尽量避免创建临时变量（特别是let）、修改参数、改变外部引用、for、if 等\n分离 数据处理 与 副作用（DOM操作、存储、网络请求等）代码\n\n数据处理指：数值计算和数据结构变换。\n\n第一点：如何避免？\n**1 ...",
"image": "https://hughfenghen.github.io/./pipe.png",
"date_modified": "2020-07-29T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/07/13/https-brief/",
"url": "https://hughfenghen.github.io/posts/2020/07/13/https-brief/",
"title": "HTTPS加密原理简介",
"summary": "https相关的资料已经非常多，本文尽量以最简洁的图文介绍大致原理，不涉及细节。\n\n本文开始前，读者需要先了解对称加密、非对称加密、hash算法相关知识。\n\nHTTPS如何保证传输数据安全？\n服务器将公钥（非对称加密）发送给客户端\n客户端生成随机密钥（对称加密），通过公钥加密后发送给服务端，这样双方都拥有了对称加密的密钥 ...",
"image": "https://hughfenghen.github.io/./http-1.jpg",
"date_modified": "2020-07-13T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/03/27/js-concurrent/",
"url": "https://hughfenghen.github.io/posts/2023/03/27/js-concurrent/",
"title": "JS 多线程并发",
"summary": "[[toc]]\n\n为什么需要并发\n我们常听说 JS 是单线程模型，即所有代码都在主线程中执行的。\n如果某些任务计算量较大，将阻塞主线程，UI 界面轻则掉帧、重则卡死。\n\n// 提示：本文所有代理均可复制到浏览器控制台中执行，验证效果\n\n// ...",
"date_modified": "2023-03-27T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2022/12/19/js-regex-basic/",
"url": "https://hughfenghen.github.io/posts/2022/12/19/js-regex-basic/",
"title": "JS 正则表达式基础",
"summary": "前言\n个人经验，正则是一个前期少量投入，回报超高的技能点。\n\n其适用范围非常广泛，如批量文本处理、源码替换、程序中逻辑判断等等。\n本文只介绍常用的基础知识、技巧，让初学者快速掌握大部分日常所需的正则知识。目标是5分钟内可逐字读完，10分钟内可把例子都动手实践一遍。 ...",
"image": "https://hughfenghen.github.io/./repalce-log.png",
"date_modified": "2022-12-19T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/07/29/js-lang-history-and-basic/",
"url": "https://hughfenghen.github.io/posts/2020/07/29/js-lang-history-and-basic/",
"title": "JS语言历史及基本特性介绍",
"summary": "JS历史\n\n1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。\n 网景公司急需一种网页脚本语言，使得浏览器可以与网页互动。\n 评：初始设计目标。\n1995年5月，网景公司做出决策，未来的网页脚本语言必须\"看上去与Java足够相似\"，但是比Java简单，使得非专业的网页作者也能很快上手。\n 评：划重点 “非专业也能很快上 ...",
"date_modified": "2020-07-29T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/09/20/js-pros-and-cons/",
"url": "https://hughfenghen.github.io/posts/2020/09/20/js-pros-and-cons/",
"title": "JS优缺点",
"summary": "回顾上两期\n\n优点（简单）\n\n对象\n链（原型链 & 作用域链）\n\n一切都是对象（包括函数），构建世界的原料，越少越简单、灵活。\njimu\n\n观察者模式，例：\nclass Observer {\n constructor() {\n this.subscribe ...",
"image": "https://hughfenghen.github.io/./jimu.jpg",
"date_modified": "2020-09-20T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/03/22/options-request/",
"url": "https://hughfenghen.github.io/posts/2023/03/22/options-request/",
"title": "跨域（Options）请求介绍及解决方法",
"summary": "介绍\nOPTIONS请求指method为OPTIONS的http请求。\n通俗来说：它的作用是用于WEB服务器是否支持某些 header，也可以叫做预检请求(顾名思义：预先检测)。\n程序员：跨域发送 http get { headers { xxx: abc } }\n浏览器：等等，你这个请求有点奇怪，我去跟服务器确认下\n浏览器：发送 http options ...",
"date_modified": "2023-03-22T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/01/03/ts-compiler/",
"url": "https://hughfenghen.github.io/posts/2023/01/03/ts-compiler/",
"title": "compilerOptions字段详解",
"summary": "{\n \"compilerOptions\": {\n\n /* 基本选项 */\n \"target\": \"es5\", // 指定 ECMAScript 目标版本: 'ES3' (default), 'ES5', 'ES6'/'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'\n \"module\": ...",
"date_modified": "2023-01-03T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2024/02/17/ts-choose-interface-type/",
"url": "https://hughfenghen.github.io/posts/2024/02/17/ts-choose-interface-type/",
"title": "一句话总结：TS 何时选择 interface 或 type",
"summary": "用 interface 描述类型的结构，用 type 描述类型关系。\n\n有点编程基础中数据结构与算法的味道。\n\n结构即是类型的属性集合\n// 如 Point3D 的属性集合： x, y, z。\ninterface Po ...",
"date_modified": "2024-02-17T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/03/27/ts-types-system/",
"url": "https://hughfenghen.github.io/posts/2023/03/27/ts-types-system/",
"title": "系统化学习 TS 类型系统",
"summary": "目的：快速、系统性的入门 TS 类型系统\n\n[[toc]]\n\n前言\nTS 是什么？\nTS 是 JS 的超集，\nTS = JS + 类型系统\n\n为了描述如此复杂（由于 JS 语言的灵活性/复杂性）的类型信息，类型系统表现出非常明显的编程语言特性。\n以学习编程语言的方式，来学习 TS 类型系统\n\n关键字/符号\n类型: boolean, number, stri ...",
"date_modified": "2023-03-27T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/01/10/unit-test/",
"url": "https://hughfenghen.github.io/posts/2023/01/10/unit-test/",
"title": "单测（Unit Test）技巧",
"summary": "前言\n本文目的是提高编写单测的效率，适合于有一定单测编写经验，但被单测困扰的同学。\n后文的示例都在 unit-test-examples 仓库中。\n\n单测的意义与价值\n单测本质：将测试行为及结果固化下来，自动检查被测试代码的运行结果是否符合期望。\n\n单测是一 ...",
"image": "https://hughfenghen.github.io/./snapshot-error.png",
"date_modified": "2023-01-10T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/06/15/timer-delay/",
"url": "https://hughfenghen.github.io/posts/2023/06/15/timer-delay/",
"title": "JS 定时器时长控制细节",
"summary": "背景\n\nJS 最常使用 setTimeout、setInterval 来延迟或定时循环执行函数，通常会传递第二个参数来控制延迟或间隔执行的时间。\n\n但开发者必须意识到函数执行时间并非精确地符合预期，在以下场景中它会超出你的预期\nCPU 繁忙（主线程被长时间占用），JS 无法按开发者设定的预期时间延迟函数\n定时器过于频繁地执行（第二个参数 < 4），达到一定 ...",
"date_modified": "2023-06-15T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/06/21/body-mask-danmaku/",
"url": "https://hughfenghen.github.io/posts/2023/06/21/body-mask-danmaku/",
"title": "Web 端实时防挡脸弹幕（基于机器学习）",
"summary": "W3C 分享视频版\n\n防档弹幕，即大量弹幕飘过，但不会遮挡视频画面中的人物，看起来像是从人物背后飘过去的。\n\n前言\n\n![mediapipe 示例](./mediapipe.gif ...",
"image": "https://hughfenghen.github.io/./mediapipe.gif",
"date_modified": "2023-06-21T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/07/13/bug1-safari10/",
"url": "https://hughfenghen.github.io/posts/2020/07/13/bug1-safari10/",
"title": "BUG: Safari10 Cannot declare a let variable twice: 'e'.",
"summary": "上线后，吃饭、午休、会议，查看线上错误日志，吓一跳，300+个错误\nSyntaxError: Cannot declare a let variable twice: 'e'.\n于是拉上小伙伴（我刚接手C端业务）退出会议，着手定位问题。\n\n解决方法\nbug详情\n// 修 ...",
"date_modified": "2020-07-13T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2024/05/08/ff-proxy/",
"url": "https://hughfenghen.github.io/posts/2024/05/08/ff-proxy/",
"title": "自集成式 HTTP 代理方案",
"summary": "前言\n\n大部分程序员，想必都有会一个常用的抓包代理工具；\n但在座的各位，可曾见过这样一款集成在 Web 应用中的代理工具？\n\n它是明显区别于传统代理工具的，有以下特性：\n\n零安装，零配置，Web 点击即用、APP 扫码即用；_（不 ...",
"image": "https://hughfenghen.github.io/./overview-0.png",
"date_modified": "2024-05-08T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/04/03/js-perf-detect/",
"url": "https://hughfenghen.github.io/posts/2023/04/03/js-perf-detect/",
"title": "JS 检测设备性能",
"summary": "性能检测包括\n检测当前运行时的性能（繁忙度）\n检测设备硬件所反映的性能水平\n\n[[toc]]\n\n运行时性能\n首先，在 JS 中并不能直接获取 CPU 占用率、内存使用信息。\n但可以统计一些性能相关的数值来间接评估主线程当前的繁忙度。\n注意是[主线程](https://developer.mozilla.org/zh-CN/docs/Glossa ...",
"date_modified": "2023-04-03T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2021/05/14/debug-hover-element/",
"url": "https://hughfenghen.github.io/posts/2021/05/14/debug-hover-element/",
"title": "调试鼠标悬浮（hover）元素的css技巧",
"summary": "有两种方式实现元素的鼠标悬浮交互：\ncss；使用伪类.foo:hover{ /* 悬浮时样式 */ }\njs；通过监听元素的mouseenter、mouseleave事件，控制元素的样式\n\n方法一\n使用 chrome devtools 提供的样式调试工具\n\n比如修改悬浮时文字的背景色， [Demo](https://www.w3school.com ...",
"image": "https://hughfenghen.github.io/./debug-hover-1.png",
"date_modified": "2021-05-14T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/10/07/modularization/",
"url": "https://hughfenghen.github.io/posts/2020/10/07/modularization/",
"title": "前端模块化设计",
"summary": "本方案是一个预研项目的产出，只做出了DEMO，后因非技术原因，方案没有落地实践。\n\n背景\n某些页面展示逻辑复杂，比如点评APP首页，用户看到的页面结构是动态的，与所选城市、地理位置、APP版本相关。\n即使web端发版迅速，没有Native类似的兼容问题，如果所有逻辑代码维护成本也会越来越大。\n\n目标\n设计一套方案，使web页面支持根据配置动态化，配置变化 ...",
"image": "https://hughfenghen.github.io/./image1.png",
"date_modified": "2020-10-07T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/10/07/react-hooks/",
"url": "https://hughfenghen.github.io/posts/2020/10/07/react-hooks/",
"title": "React Hooks 的思考",
"summary": "前言\n听说 Hooks 有一段时间了，一直没去看文档。最近终于想起这事儿，浏览一遍文档后，立即燃起了一种“兴奋感”。\n这种“兴奋感”犹如当初看见“箭头函数”、“async/await”一样。\n所以，即使在有很多分析文章的情况下，仍想再写一些个人的思考和感受。\n[react hooks官方文档](https://reactjs.org/docs/hooks-intro.html ...",
"image": "https://hughfenghen.github.io/./comp.png",
"date_modified": "2020-10-07T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/03/29/vscode-shortcut/",
"url": "https://hughfenghen.github.io/posts/2023/03/29/vscode-shortcut/",
"title": "个人 VSCode 高频快捷键总结",
"summary": "vscode 默认快捷键\n\n|按键|描述|提示|\n|---|---|---|\n|cmd+shift+p|命令搜索|一切命令、指令的入口，不常用或没有快捷键的指令，可以搜索名称然后触发，尝试搜索 open |\n|tab控制|\n|cmd+n|新建tab页|常用于记录临时信息|\n|cmd+w|关闭tab页|关闭临时tab会有是否保存确认，Mac下cmd+d不保存（d ...",
"date_modified": "2023-03-29T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/10/07/sw-ssr/",
"url": "https://hughfenghen.github.io/posts/2020/10/07/sw-ssr/",
"title": "同构项目 Service Worker 离线化实践",
"summary": "阅读本文需要相关知识储备： Service Worker 生命周期、Workbox、前端同构渲染\n\n背景 ...",
"image": "https://hughfenghen.github.io/./ssr-design.png",
"date_modified": "2020-10-07T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2019/01/01/thinking-miniprogram/",
"url": "https://hughfenghen.github.io/posts/2019/01/01/thinking-miniprogram/",
"title": "小程序的思考",
"summary": "出现的原因\n\n因国内移动互联网的特殊环境：用户时间被巨头APP分割，移动浏览器流量反而较少。\n\n用户需要的服务非常多样化，而APP太重，且很多服务提供商底线太低。\n\n厂商出于私利，推出的类web环境和私有API，期望圈住开发者和服务提供商。\n\n用户视角\n\n便捷，对用户来说，服务更容易获取。\n\n清爽，平台厂商制定规范限制服务提供商，使得吃相不至于太难看（APP无脑推 ...",
"date_modified": "2019-01-01T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2018/05/06/vuepress-gitment/",
"url": "https://hughfenghen.github.io/posts/2018/05/06/vuepress-gitment/",
"title": "VuePress 集成第三方评论模块",
"summary": "VuePress 是一个 Vue 驱动的静态网站生成器，用来写文档的体验很好，本站就是基于VuePress的。\n\nVuePress官方正在开发针对博客的优化功能Blog Support roadmap，已经有人在喊建议集成disqus（ps ...",
"date_modified": "2018-05-06T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2018/05/01/vue-directive-track/",
"url": "https://hughfenghen.github.io/posts/2018/05/01/vue-directive-track/",
"title": "基于vue directive实现声明式埋点方案",
"summary": "注：本方案依赖vue、lazysizes(曝光事件：lazybeforeunveil)\n\n传统埋点 vs 声明式埋点\n\n正文开始前，对比展示一下效果，方便读者判断是否有兴趣 :）\n\n传统埋点\n",
"image": "https://hughfenghen.github.io/./assets/mge1.png",
"date_modified": "2018-05-01T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/07/13/run-web-project-in-termux/",
"url": "https://hughfenghen.github.io/posts/2020/07/13/run-web-project-in-termux/",
"title": "在Termux中运行web项目",
"summary": "Termux是什么\n官网\n> Termux is an Android terminal emulator and Linux environment app that works directly with no rooting or setup required. A minimal base system is installed au ...",
"date_modified": "2020-07-13T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2024/03/14/web-storage-and-opfs/",
"url": "https://hughfenghen.github.io/posts/2024/03/14/web-storage-and-opfs/",
"title": "Web 文件系统（OPFS 及工具）介绍",
"summary": "文件系统是往往是构建大型软件的基石之一，很长一段时间 Web 平台因缺失成熟的文件系统成为构建大型软件的阻碍，如今 OPFS 可弥补这一缺憾。\n\n本文介绍 OPFS 背景和基本使用方法、使用过程中的注意事项，及如何配合笔者开源的 opfs-tools、opfs-tools-explorer 两个项目，充分发挥 OPFS 的性能与开发效率。\n\nWeb 存储 A ...",
"image": "https://hughfenghen.github.io/./vs.png",
"date_modified": "2024-03-14T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2024/03/06/opfs-tools-tweet/",
"url": "https://hughfenghen.github.io/posts/2024/03/06/opfs-tools-tweet/",
"title": "opfs-tools (文件系统 API) 项目介绍",
"summary": "文件系统是许多领域程序的基石，所有通用编程语言都会内置完备的文件系统 API。\n\nWeb 很长一段时间没有提供完善的访问文件系统的规范，使得需要高频读写文件、大文件处理软件在 Web 端都会受到一些限制，比如音视频剪辑、游戏、数据库等等。\n\n之前在浏览器中实现视频裁剪、截帧等相关功能时，发现缺少基本的操作文件的 API，比如读写、移动、复制文件。\n\n而 [OPFS] ...",
"image": "https://hughfenghen.github.io/./opfs-tools-explorer.png",
"date_modified": "2024-03-06T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/03/29/webcontainer/",
"url": "https://hughfenghen.github.io/posts/2023/03/29/webcontainer/",
"title": "WebContainer 原理分析",
"summary": "WebContainer 是一种基于浏览器的运行时，可完全在浏览器标签页内执行 Node.js 应用程序和操作系统命令。\n\n惊艳的地方有两点：\n\n能在浏览器中运行 Node 服务，居然还能启动 DevServer “监听端口”\n离线后 IDE 开发中的页面也能正常开发\n\n大致原理\n\n以 ",
"image": "https://hughfenghen.github.io/./webcontainer.png",
"date_modified": "2023-03-29T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/12/23/web-spy/",
"url": "https://hughfenghen.github.io/posts/2023/12/23/web-spy/",
"title": "Web 终极拦截技巧（全是骚操作）",
"summary": "拦截的价值\n\n> 计算机科学领域的任何问题都可以通过增加一个中间层来解决。 —— Butler Lampson\n\n如果系统的控制权、代码完全被掌控，很容易添加中间层；\n现实情况我们往往无法控制系统的所有环节，所以需要使用一些 “非常规”（拦截） 手段来增加中间层。\n\n拦截的方法\n\n拦截/覆写 浏览器 API\n\n最常见的场景有通过拦截 console ...",
"image": "https://hughfenghen.github.io/./server.png",
"date_modified": "2023-12-23T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2022/05/02/canvas-lib/",
"url": "https://hughfenghen.github.io/posts/2022/05/02/canvas-lib/",
"title": "Mini Canvas Lib 核心交互实现原理",
"summary": "背景\n需要使用 Canvas 实现添加图片、文字、摄像头画面，并且支持拖拽、缩放、旋转等功能。\n但成熟 Canvas 库（比如 Sprite.js Fabric.js ）一般都比较庞大（300kb+），所以自己实现精简版本，减少体积。\n\nDEMO\n[核 ...",
"image": "https://hughfenghen.github.io/./canvas-sprite.png",
"date_modified": "2022-05-02T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/07/10/srt-parser/",
"url": "https://hughfenghen.github.io/posts/2023/07/10/srt-parser/",
"title": "JS 解析 SRT 字幕",
"summary": "SRT字幕格式介绍\n\ncopy 以下代码可在控制台测试效果\nfunction srtTimeToSeconds (time) {\n const match = time.match(/(\\d{2}):(\\d{2}):(\\d{2}),(\\d{3})/)\n ...",
"date_modified": "2023-07-10T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/07/29/%E4%BE%A0%E5%AE%A2/",
"url": "https://hughfenghen.github.io/posts/2023/07/29/%E4%BE%A0%E5%AE%A2/",
"title": "侠客行 / 三叠",
"summary": "侠客行\n> 作者：李白\n\n赵客缦胡缨 吴钩霜雪明\n\n银鞍照白马 飒沓如流星\n\n十步杀一人 千里不留行\n\n事了拂衣去 深藏身与名\n\n闲过信陵饮 脱剑膝前横\n\n将炙啖朱亥 持觞劝侯嬴\n\n三杯吐然诺 五岳倒为轻\n\n眼花耳热后 意气素霓生\n\n救赵挥金槌 邯郸先震惊\n\n千秋二壮士 烜赫大梁城\n\n纵死侠骨香 不惭世上英\n\n谁能书阁下 白首太玄经\n\n三叠\n> 作者：天下有雪 / 沧月改\n ...",
"date_modified": "2023-07-29T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/09/19/edge117-amd-hevc-bugfix/",
"url": "https://hughfenghen.github.io/posts/2023/09/19/edge117-amd-hevc-bugfix/",
"title": "解决 Edge 117 浏览器视频变色",
"summary": "仔细观察颜色，“变色”其实是“反色”效果\n\nBug 触发条件：Win10 系统 + Edge 117 浏览器 + AMD 集成显卡 + HEVC 视频流\n\nEdge 117 如果使用 AMD 集成显卡，观看视频时可能出现视频反色现象，在 bilibili（哔哩哔哩） 直播中发现。\n\n通过以下设置，配置 Edge 使用英伟达独立显卡，可解决反色问题。\n\n如 ...",
"image": "https://hughfenghen.github.io/./setting.png",
"date_modified": "2023-09-19T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/07/07/webgl-chromakey/",
"url": "https://hughfenghen.github.io/posts/2023/07/07/webgl-chromakey/",
"title": "WebGL Chromakey 实时绿幕抠图",
"summary": "20 行核心（shader）代码实现实时绿幕抠图\n\n先体验 DEMO，基于 WebAV 实现\n\n移除图片背景\n移除视频背景\n\n背景\n\n因为视频相关标准及浏览器的实现问题，很难在主流浏览器中顺利播放背景透明的视频。\n\n有两种方法可以为最通用的视频格式（MP4,H264）移除背景，实现透明效果：\n\n原视频配上绿幕，使用本文介绍方法移 ...",
"image": "https://hughfenghen.github.io/./green-dog.jpeg",
"date_modified": "2023-07-07T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2022/08/12/book-review/",
"url": "https://hughfenghen.github.io/posts/2022/08/12/book-review/",
"title": "书评笔记",
"summary": "社会学\n\n当代中国的中央地方关系\n分税制改革断了地方政府的财路。\n\n我记得96年左右我们那里的政府似乎特别困难，“人头税”涨得很快，农民都交不起了，甚至听说zf组织地痞流氓上门抢钱粮。我印象深刻是因为我家也被强行开仓放粮了，当时很小五六岁左右，比较害怕。不知道跟分税制改革有没有关系。\n\n没想到呀，土地财政救了地方政府，也算是人口红利的一部分。这也理解了为啥中央一直喊要控制 ...",
"date_modified": "2022-08-12T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/10/07/biosphere/",
"url": "https://hughfenghen.github.io/posts/2020/10/07/biosphere/",
"title": "生存空间",
"summary": "存在即合理。 —— 黑格尔\n\n一\n我很久前曾多次纳闷：苍蝇，存在的意义是什么？\n不像蚊子，咬人痛痒，它飞来飞去让人厌烦，飞得还快打不着，打着了又让人恶心。\n总之，它不那么坏，整天飞来飞去惹人厌烦外，不能理解其存在的意义。\n\n现在看来，当时的思考内容略显幼稚。\n但人总是受限于自己的主观经验，难以理解很多事物存在的“理”。\n\n二\n然，大道至简。\n足够“简 ...",
"image": "https://hughfenghen.github.io/./tree.jpeg",
"date_modified": "2020-10-07T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/06/21/diy-handheld-game/",
"url": "https://hughfenghen.github.io/posts/2023/06/21/diy-handheld-game/",
"title": "DIY 游戏掌机",
"summary": "前言\n对比分析了市场上的掌机，发现有些缺陷在当前是无解的。\n所以想通过 mini主机 串流 手机 来扬长避短。\n\n方案总结分析\n\n优点\n性能更强\n自由度、可玩性更高\n 不受掌机平台限制\n win主机游戏更多，也不限于只玩游戏\n屏幕观感更舒服；分辨率、帧率、色彩吊打掌机\n续航6小时以上（四年旧手机\n无散热压力：零噪音，不烫手\n...",
"date_modified": "2023-06-21T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/07/29/%E8%8F%A9%E8%90%A8%E8%9B%AE/",
"url": "https://hughfenghen.github.io/posts/2023/07/29/%E8%8F%A9%E8%90%A8%E8%9B%AE/",
"title": "菩萨蛮",
"summary": "人人尽说江南好\n>作者：韦庄\n\n人人尽说江南好 游人只合江南老\n\n春水碧于天 画船听雨眠\n\n垆边人似月 皓腕凝霜雪\n\n未老莫还乡 还乡须断肠 ...",
"date_modified": "2023-07-29T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/07/13/dao/",
"url": "https://hughfenghen.github.io/posts/2020/07/13/dao/",
"title": "天道",
"summary": "一个细菌与一个人之间有什么区别？（这问题很傻，听了都不想回答）\n脑海中第一个词——意识。\n\n一个细菌与一个人体细胞有什么区别？\n从生物学细节上来说，区别太多了，但本质上来说好像区别不大。\n二者都是无意识的，需要或适应环境，然后复制自身。\n最大区别可能是细菌只要环境允许则无限复制而；人体正常细胞则在环境控制下复制一定次数后就停止复制，自然死亡。从这方面看，人体最像细菌的细胞 ...",
"date_modified": "2020-07-13T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/07/29/interview/",
"url": "https://hughfenghen.github.io/posts/2020/07/29/interview/",
"title": "技术面试中的“运气”指什么",
"summary": "常说面试过程中出了真实实力，运气也很重要。我并不满意与“运气”这个含义过于模糊的词，决定深究一下，并不是面试技巧或指导。\n当局者迷，以下是我对一年前面试经历的回顾。\n\n隐含的，可控的非“运气”成分\n\n除了相貌、性格、口音等影响结果的客观因素外，还有形象（我曾穿着拖鞋去应聘...）、精神状态等可控的，但可能被忽略的因素。\n此类因素容易被面试官/应聘者忽略，但却能直接影响结果，也 ...",
"date_modified": "2020-07-29T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2020/10/07/qin/",
"url": "https://hughfenghen.github.io/posts/2020/10/07/qin/",
"title": "为何是秦灭六国，统一天下",
"summary": "*刚刚与网友谈到这个话题。\n史书总是把王朝兴衰全归因于“人”，我更愿意相信其主因是“天”。\n所以，我更“青睐”把王朝更替与气候变化关联起来的相关学说。*\n\n以下为爱好者臆测“为何是秦灭六国，一统天下”的原因（由于是爱好者，并不打算详细论证^_^）\n\n天\n春秋战国时期大降温（看图）。\n\n[来源链接](http://w ...",
"image": "https://hughfenghen.github.io/./chronology.jpeg",
"date_modified": "2020-10-07T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2022/08/22/shan-e/",
"url": "https://hughfenghen.github.io/posts/2022/08/22/shan-e/",
"title": "善-恶",
"summary": "春节在家走亲戚，听说有人从事的行业实为“间接诈骗”，并且也看不出周围的人对此行为有什么鄙视之情，大家更关注的似乎是能赚多少。\n\n我没想到“恶”，离我如此之近，不由得更深入地去理解思考————“善恶”。\n\n为什么会存在“善恶”这样的抽象概念？\n其本质是什么？\n“恶”是否可以消除？\n消除“恶”会有什么影响呢？\n\n-- 虽然没人直接告诉我们“善-恶”这个概念的定义，但我们很小 ...",
"date_modified": "2022-08-22T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2024/01/01/wechat-subscribe/",
"url": "https://hughfenghen.github.io/posts/2024/01/01/wechat-subscribe/",
"title": "2024，做个“前端网红”吧",
"summary": "写博客好多年了，以前是随缘更新，无所谓有没有人看。\n\n23 年有些意外、有些机缘，写了不少代码和文章。\n\ngithub contributions\n\n收到了一些正向反馈，github 新增 500+ star，博客站点日 PV 300 左右。\n\n所以想博客也许可以作为一个业余项目，正经运营起来。\n\n作为 Web 开发者，自然不喜欢 ...",
"image": "https://hughfenghen.github.io/./github-contributions.png",
"date_modified": "2024-01-01T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/07/19/webav-1-basic/",
"url": "https://hughfenghen.github.io/posts/2023/07/19/webav-1-basic/",
"title": "Web 音视频（一）基础知识",
"summary": "Web 音视频目录\n\n阅读后续文章或开始使用 WebAV 处理音视频数据之前，需要一点点背景知识。\n\n本篇主要简单介绍音视频最基础的知识，以及 WebCodecs 的核心 API。\n\n视频结构\n\n视频文件可以理解为容器包含了元数据和编码数据（压缩的音频或视频）；\n不同的容器格式有各种区别，比如用不同方式组织管理元数据和编码数据。\n![视频结 ...",
"image": "https://hughfenghen.github.io/./video-struct.png",
"date_modified": "2023-07-19T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/07/16/webav-0-overview/",
"url": "https://hughfenghen.github.io/posts/2023/07/16/webav-0-overview/",
"title": "Web 音视频（零）概览",
"summary": "Web 音视频目录\n\nWebCodecs API 已经发布一段时间（chrome 94），在浏览器中处理音视频文件或实时视频流已经可行。\n计划开一个系列介绍 Web 音视频基础知识，及如何在浏览器中处理视频文件（或视频流）。\n\n作者也是音视频领域的新手，本系列文章也算是个人的学习总结，若发现错误内容可在评论区留言\n_本系列适合有一定经验的前端 ...",
"image": "https://hughfenghen.github.io/./media-workflow.png",
"date_modified": "2023-07-16T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/07/23/webav-2-parse-video/",
"url": "https://hughfenghen.github.io/posts/2023/07/23/webav-2-parse-video/",
"title": "Web 音视频（二）在浏览器中解析视频",
"summary": "Web 音视频目录\n\n浏览器中已经能直接播放视频，为什么还需要手动写代码解析？\n因为，某些场景需要对视频进行更细致的处理，比如截取关键帧、提取视频中的文字、人物打码、极低延时播放视频等等。\n\n总之，除了最单纯的视频播放外，对视频数据的一切处理都需要从解析开始。\n\n_你可以跳过原理介绍，直接查看 [WebAV 解析 MP4 示例](#webav-视频解 ...",
"image": "https://hughfenghen.github.io/./mp4-overview.png",
"date_modified": "2023-07-23T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/07/31/webav-3-create-video/",
"url": "https://hughfenghen.github.io/posts/2023/07/31/webav-3-create-video/",
"title": "Web 音视频（三）在浏览器中创建视频",
"summary": "Web 音视频目录\n\n音视频工作流程\n\n在 WebCodecs 之前，由于编解码能力的缺失，几乎无法在纯浏览器中编辑、创建视频。\nWebCodecs 补齐了编解码能力，相当于在浏览器中提供了视频创作能力。\n\n预计 WebCodecs 将会像 HTML5 技术（Video、Audio、MSE...）一样 ...",
"image": "https://hughfenghen.github.io/./media-workflow.png",
"date_modified": "2023-07-31T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/08/05/webav-4-process-audio/",
"url": "https://hughfenghen.github.io/posts/2023/08/05/webav-4-process-audio/",
"title": "Web 音视频（四）在浏览器中处理音频",
"summary": "Web 音视频目录\n\n为什么单独介绍?\n\n网络上缺乏音频处理的资料，绝大多数示例都是针对视频而略过音频，很多人在网上寻找音频处理的示例\n对前端开发者来说，音频处理相对视频略微复杂一些\n\n所以，本文专门针对音频数据，汇总讲解采集-处理-编码-封装全过程，帮助初学者入门。\n\n![audio-data-flow](./audio-dat ...",
"image": "https://hughfenghen.github.io/./audio-data-flow.png",
"date_modified": "2023-08-05T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/08/18/twenty-things-software-engineer/",
"url": "https://hughfenghen.github.io/posts/2023/08/18/twenty-things-software-engineer/",
"title": "【转】我在 20 年的软件工程师生涯中学到的事情",
"summary": "原文\n阮一峰翻译\n\n*我一般不太喜欢看这种经验之谈，在阮一峰周刊中看到， ...",
"date_modified": "2023-08-18T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/08/19/webav-6-process-image/",
"url": "https://hughfenghen.github.io/posts/2023/08/19/webav-6-process-image/",
"title": "Web 音视频（六）图像素材处理",
"summary": "Web 音视频目录\n\n前序章节介绍了如何在浏览器中解析、创建视频，以及给视频添加一些自定义素材（图片、音频、文字...）；\n本章介绍如何给图像素材加特效、加动画，实现转场、移动水印、图像滤镜美化等功能。\n\n你可以跳过原理介绍，直接查看 WebAV 示例\n\n素材动画\n\n在视频制作中实现动画跟其他场景略有不同，因为视频 ...",
"date_modified": "2023-08-19T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/08/12/webav-5-combine/",
"url": "https://hughfenghen.github.io/posts/2023/08/12/webav-5-combine/",
"title": "Web 音视频（五）在浏览器中合成视频",
"summary": "Web 音视频目录\n\n经过前序章节的介绍，读者能大致了解如何在播放器中解析、创建视频；\n本章介绍何在浏览器中合成视频，这是视频编辑中最基础的功能。\n\n你可以跳过原理介绍，直接查看 WebAV 合成视频示例\n\n在视频上叠加素材\n\n常见的素材有：视频、音频、图片、文字\n\n[在浏览器中创建视频](/posts/2 ...",
"date_modified": "2023-08-12T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/08/19/webav-7-mid-review/",
"url": "https://hughfenghen.github.io/posts/2023/08/19/webav-7-mid-review/",
"title": "Web 音视频（七）中期回顾",
"summary": "Web 音视频目录\n\n个人回顾\n\n本系列更新至今，持续了一个月时间，内容可以总结为音频、视频数据的 解析 - 处理 - 合成，在浏览器中比较粗粒度地实现音视频编辑的主要环节，差不多是把 WebAV 项目的原理讲完了。\n\n讲解的知识非常浅，目标读者是准备在 Web 平台进行音视频开发的新手；\n这是我第一次进行高频率技术写作，将一 ...",
"date_modified": "2023-08-19T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/10/06/webcodecs-new-era-for-media-on-the-web/",
"url": "https://hughfenghen.github.io/posts/2023/10/06/webcodecs-new-era-for-media-on-the-web/",
"title": "WebCodecs 开启 Web 音视频新篇章",
"summary": "你可以先略过下面的无聊文字，体验一番 WebCodecs 的实力\n\nWebCodecs 是什么\n\nWebCodecs 是一个 Web 规范，21 年 9 月份在 Chrome 94 中实现\nWebCodecs 提供访问编解码能力的接口，可精细控制音视频数据\n\nWeb 音视频 API 存在什么问题\n\n音视频技术在 Web 平台上的应用非常广泛，已有许多 Web ...",
"image": "https://hughfenghen.github.io/./media-workflow.png",
"date_modified": "2023-10-06T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2024/05/11/webcodecs-codec-string-explain/",
"url": "https://hughfenghen.github.io/posts/2024/05/11/webcodecs-codec-string-explain/",
"title": "WebCodecs 编码字符串（codec）介绍",
"summary": "笔者的 Web 音视频系列文章\n\n视频播放经常会看到这样的字符串 video/mp4; codecs=\"avc1.4d002a\"，WebCodecs 编解码器初始化也需要配置 codec 参数，本文尝试简单介绍编码字符串含义。\n\n视频编码分许多种类，每个种类还分多个版本，不同种类、版本对应的编解码算法、支持的能力（分辨率上限、色深等等）不同 ...",
"image": "https://hughfenghen.github.io/./4d00.png",
"date_modified": "2024-05-11T00:00:00.000Z"
},
{
"id": "https://hughfenghen.github.io/posts/2023/10/02/webcodecs-explainer/",
"url": "https://hughfenghen.github.io/posts/2023/10/02/webcodecs-explainer/",
"title": "【译】WebCodecs 说明",
"summary": "本文翻译至 WebCodecs Explainer\n\n问题与动机\n\n已有许多 Web API 在内部使用媒体编解码器来支持特定用途，比如:\n\nHTMLMediaElement and Media Source Extensions\nWebAudio (decodeAudioData)\nMediaRecorder\nWebRTC\n\n但是还没有一种通用的方式来灵活 ...",
"date_modified": "2023-10-02T00:00:00.000Z"
}
]
}