模拟面试系列继续，进入第三周，这次请到的是杨秋实（化名）同学。（这周参加一场 Hackathon，基本上一周都在忙，所以忘记上周的视频还没写到博客里，下周补吧。）
他还是在校学生，但是很早就开始实践，加入校内师兄师姐成立的一个公司，做前端开发。我觉得他在学生里也算各种翘楚，对他也比较是期待。不过仔细看，他的简历槽点略多。
想知道他的具体表现么？那就看视频吧。
视频内容：
有任何问题、意见、建议，欢迎留言弹幕私信与我交流。想参加模拟面试的同学，也请跟我联系。目前下周还是空缺，欢迎投稿。
某天群里，奥利奥同学突然提问：想参加模拟面试，不知道能不能搞。我一想，可以呀。我工作 16+ 年，面试过很多新人，也带过不少新人；给自己的公司招过人，也帮朋友招过人；有面试过新人，也跟资深老鸟聊过。感觉有蛮多能分享的内容。从客观需求来说：近期有朋友委托我帮忙做前端面试；我很久以前分享过的前端面试题也该更新一波了。
于是就答应下来，准备每周做一期。开门第一单，就邀请奥利奥同学来做吧。于是就有了下面的视频：
也欢迎大家移步 B 站帮我三连分享：肉山的模拟面试系列：初中级前端，欢迎奥利奥同学
这位奥利奥同学，他毕业后就加入一家偏传统的公司，待了一年半。现在感觉有点被天花板挤压，想试试看新的挑战。于是我结合我的经验，对他的简历进行评价，然后简单过了一轮面试。以下是视频内容大纲：
希望以上内容对近期求职面试的同学有帮助。如果你对求职面试入职过试用期等有问题，欢迎在留言、弹幕里提出，与我讨论交流。如果你也想参加模拟面试，可以跟我联系，预约时间。
感谢奥利奥同学帮我想到这个方向。
拖来拖去，终于把 使用 node.js 开发命令行工具 workshop 的视频剪出来了，前几天上传到 B 站，访问量很一般，所以在自己的博客再捞一下。
这次视频主要面向新手，主要呈现从 0 到 1 实现命令行工具的做法，希望观众无论基础如何，都能在看完视频之后，掌握封装仓库、实现命令行工具的做法。内容大约是：
完成的项目放在 GitHub：meathill/unrar: a simple script to unarchive rar files (github.com) 非常简单，大家可以参考。
有任何问题、建议均欢迎留言讨论。新的一年，我会努力多做视频、多做好视频，希望大家支持我。
趁着这会儿没正经工作，盘点盘点去年挖下的坑，和一些零星的想法，做一下 2023 年的视频计划。具体执行可能会有变化，当作许愿吧。欢迎关注，欢迎点菜，欢迎提意见，敬请期待。
去年遗留了几个系列坑还没填，今年争取都填上、填满。
《设计模式》那本书诞生快 30 年了，还有人在照本宣科死搬硬套的把当年 C++ 的模式拿来简单改改当成 JS 设计模式讲。我想在这个系列里，结合 ESNext、流行框架、类库，讲解设计模式在 2023、JS/TS 领域如何使用。
这个系列就像酒店里的那些艺术品，摆在那里，没啥人看，但是如果你没有，档次就上不去……目前前两集加起来不到 1k 的播放量，实在让人动力不足……
去年年底，Nuxt.js 正式发布 v3；我也正巧需要一个简历工具。于是计划做一个简历分享网站，基于 Nuxt.js+TailwindCSS+DaisyUI+Serverless（leancloud）打造。
目前缓慢开发中，估计还有一个月能做完。
前阵子朋友介绍的活儿，钱不多，但是 Hydrogen 框架很吸引我，于是接了，打算基于它做一套系列教学视频。目前网站开发中，前期的开发很简单，就是改改样式。后面发现 Hydrogen 不支持以前（现有）的插件机制，甲方对产品详情页的一些要求无法实现，所以需要手动开发。正好可以更深入一些。
预计本月内结项，希望下月初可以周日开始直播。
我以为 2023 年了，不需要再分享 Git。结果结合最近几份工作目睹的现状，看到一些技术论坛上乱七八糟的分享文，决定还是做个系列。
本周会开始，先做 slide，周日录视频。
早就录完了，尽快把视频剪出来。预计本周三之前上线。
春节前一位同学找到我，说绩效被打了 B，心里不爽；尤其让他想不通的是，一个平日里对他仰赖甚多的同事也给他差评。我帮他分析了半天，得到一个结论：工作中要学会给自己定价，要学会说不。
进阶课程，初学者可能暂时用不到，但是初中晋级必备的知识。估计分成几个方面：
for ... of ... 还是 Array.each因为一些函数存在冲突、CSS 变量也日益普及，CSS 预处理工具价值越来越小，甚至有时候还要起反作用。所以我现在就在逐步从项目里移除预处理工具，我也计划分享一下这方面的经验。
去年留下来的坑，今年有希望填上。等我的 Demo 跑通了就讲这个。
Vercel 部署后，用自己的域名 CNAME 就可以放心使用，它又提供了 Severless function / Edge function 功能，免费额度不敌，非常适合我们薅羊毛，写点自己的小应用、放点 demo，之类的。
稍微盘一下，发现一年的量已经够了，甚至未必做得完……如果过完年找工作顺利，那几乎一定要留下不少坑明年再来填。所以先这样吧，日后有想法再调整。
如果你对上面这些内容感兴趣，或者有别的内容想看，也欢迎留言给我。新的一年，我们一起加油。
这个视频其实我很早就录了，当时都还没阳。录制的过程中出现了一个问题，折腾很久才解决。所以中间必须补录一段，剪接拼贴，所以一直拖到现在。
我在安装依赖的时候，按照习惯，使用 pnpm i vuepress@^2.0.0-beta.53，希望安装当时最新的 2.0.0-beta.53 版本，并且声明对后续版本的支持，只要大版本保持一致，可以接受小版本升级。
但是实际安装的时候，不知道是什么原因，pnpm 给我装了一堆不合适的插件。（我怀疑跟 beta 有关），导致启动开发环境后白屏，报告一堆莫名其妙的错误。最后我把环境清空，从头开始配置，仔细看各种输出才猜出来。
期间浪费了 40 分钟，我觉得直接放出来纯属浪费大家的时间，所以一直没有上传。前几天终于下定决心补录，并且处理了字幕，才最终上传。
这则视频里介绍了：
pnpm run builddist 目录推送到新的分支，避免 /docs 污染代码仓库希望这段视频对大家有用。如果你有静态网站构建需求，或者想使用免费线上资源简历自己的网站，都可以学习这个视频。如果你有其它问题、意见、或建议，也欢迎评论留言。请看到的同学帮忙一键三连、完播、转发，谢谢。
群里有同学问：
如何优化网页性能？比如做了个网页，觉得打开速度比较慢，该怎么优化？
这是个好问题，也是个很难回答的问题，因为涉及到的内容很多，一句两句说不清楚。所以我特地做了这个视频，详细讲解浏览器渲染的每一步，有哪些影响因素，以及我们可以针对性采取什么样的优化策略。
开始觉得可能要做 10+p 幻灯片，讲个 10+ 分钟；结果幻灯片做了 29p，讲了 40+ 分钟。自荐给大家，希望大家认真观看，能够在日后面对网页初始加载优化时，能够游刃有余。
从中我们也可以找到那道经典面试题：“当我们输入 URL，然后按下回车之后，都会发生什么”的答案。可谓一举两得。
视频用到的 slidev 放在这里：
当然，时间有限，能力有限，这个视频只关注 web 前端及部分 web 全栈的内容，以及我们力有所及能够优化的部分，可能有些内容没有覆盖到。所以，如果你有疑问、或者觉得有问题，请留言。我很乐意跟大家讨论这些问题，也很希望能给视频打补丁。
如果你觉得我做得不错，也请给我一键三连，转发给更多需要的人。提前感谢支持。
TailwindCSS 是一个争议很大的样式库。
他封装了大量原子化的样式，比如 w-4，表示 width: 1rem；text-gray-500，表示字体颜色为灰色500。如果我们某个节点同时需要两个样式，就是 class="w-4 text-gray-500"。极端一点的例子是这样子的：
很明显，大家的争议点在于：
基本上，发出这些疑问的都是前端。包括我，最初也是这样的想法。但是有一天，我要维护一个老项目，大部分组件都是现成的——引用自某个组件库，或者团队已经写好，只需要调整布局，我发现 TailwindCSS 简直是神器，太方便了。
于是，当我反复看到大家争论该不该用 TailwindCSS 后，决定做一期视频，表达一下自己的态度：
除了并不会降低开发效率之外，TailwindCSS 还有以下优势：
所以无论如何，我都推荐所有团队所有开发者使用 TailwindCSS。当然，用其它原子化样式框架，比如 UnoCSS 也可以。
如果你有其它意见和建议，欢迎提出讨论。如果你有 B 站账号，恳请三连+关注+转发，感谢。
有时候我们需要制作扇形，比如图形化数据生成饼图的时候。使用 HTML + CSS 做不到，必须借助 SVG 帮助。经过一些摸索，大概方式如下：
我们需要一个 SVG，然后在里面画一个园：
<svg xmlns="http://www.w3.org/2000/svg" height="600" width="600" viewBox="0 0 20 20">
<circle r="5" cx="10" cy="10" />
</svg>这里，我创建了一个 SVG，并且以 10,10 位圆心，画了一个半径为 5 的圆。SVG 的视窗只需要显示这个圆，所以是 0 0 20 20 的正方形。width 和 height 用来定义网页中 SVG 的尺寸，SVG 是矢量图形，可以实现内容的无损缩放，所以即使显示尺寸比图形尺寸大很多，也不用担心出现锯齿。
接下来，我们用给圆加边框的方式来做圆形。
<circle
r="5"
cx="10"
cy="10"
fill="transparent"
stroke="tomato"
stroke-linecap="butt"
stroke-width="10"
></circle>首先，我们用 fill="transparent" 清理掉圆形内部的颜色，然后用 stroke="tomato" 给边框加上橙色。接下来，我们通过 stroke-width="10" 设置边框宽度为 10，这也是矩形半径。
此时，屏幕上会出现一个橙色的正圆。
画扇形的方式有很多，比如画两条半径然后画弧形再填充颜色。但是利用边框画扇形最简单。
用边框画扇形说白了，其实是结合圆环和虚线，需要有扇形的地方，就填充颜色；不需要扇形的地方，就用虚线的空白。这里要用到 stroke-dasharray 属性，它的规则很简单，奇数为实偶数为虚，所以我们只要计算扇形所需的弧形长度，然后剩下的填充周长即可。
在我们这里，就是 stroke-dasharray=”calc(10 * 3.1415926 * 1/6) 31.415926"，即取绘制一个 1/6 大小的扇形。
修改位置需要使用 stroke-dashoffset 属性，它会把图形从原来的位置移动若干距离，正的就往起点移动，负的就往终点移动。
在我们这里，就是 stroke-dashoffset="calc(-10 * 3.1415926 * 1/6)"，将第二个扇形移到第一个扇形的旁边。
最终效果：https://codepen.io/meathill/pen/yLMQqBQ?editors=1000
这些属性，也可以使用 CSS 样式替换，效果一样。
Safari 问题比较多，首先半圆就不是半圆，其次偏移也不对，不知道是否只支持 CSS。
今年打算在直播和视频上做点努力，所以通过直播录了不少视频，周末想剪一剪，但是一方面我不擅长剪视频，另一方面也没有合适的工具，所以颇费了一些周折。
后来发现 jumpcutter，按照其作者的设计，它可以识别视频中的 👍 和 👎，只保留 👍 的片段，剪掉 👎 的片段；并且可以自动剪掉没有声音的部分，这样视频可以很快完成初剪。
前面的功能很炫酷，不过对于我来说不太实用，后面的功能比较有价值，于是我试用了一下，记录过程如下：
# clone 代码到本地
git clone git@github.com:carykh/jumpcutter.git
# 安装依赖，位于 requirements.txt
pip3 install Pillow audiotsm scipy numpy pytube
# 然后就可以使用了
python3.9 jumpcutter.py --input_file left.mp4 --output_file ./1.mp4 --silent_threshold 0.06 --silent_speed 99其它参数如下：
--input_file | 目标视频 |
--url | YouTube 视频，国内用户用途不大 |
--output_file | 输出视频 |
--silent_threshold | 静音阈值，即多小的声音可以认为是有声音的（浮点数，0～1，默认 0.03） |
--sounded_speed | 有声音的片段，以怎样的速率播放（浮点数，默认 1） |
--silent_speed | 静音的片段，以怎样的速度播放（浮点数，默认5，即 5 倍速度） |
--frame_margin | 在有声音的片段两边保留多少间隔（默认1） |
--sample_rate | 声音取样率 |
--frame_rate | 帧数 |
--frame_quality | 质量 |
比如前面我用的命令，就是认为小于 0.06 的声音为静音，静音播放速率 99（基本上直接跳过了）。
我处理了两段视频，感兴趣的同学可以试一试：
接下来我还想做两个功能，有了这两个功能视频处理后基本就能满足我的需求了：
父亲节，Google Photo 根据上传的照片自动生成的视频，我选了姆伊姆二，结果只有姆二，看来 AI 认狗还是不太行。