blog
blog copied to clipboard
CatsAndMice
📖 凌览的博客
前言 -- 笔者近期换了台MacBook笔记本💪🏽，使用中发现当鼠标hover到它的程序坞时，有一个非常丝滑的放大动画。感觉非常有意思🤩，趁周末实现下，最后分享给屏幕前爱学习的您!😉 真实MacBook笔记本放大动画：  仿写的放大动画：  勾股定理 ---- 实现的关键就是运用了勾股定理计算，所以咱们要复习下初中时期的数学。 勾股定理：平面上的直角三角形的两条直角连长的长度的平方和等于斜边长的平方  简化成一个公式: a2+b2\=c2 简单复习下勾股定理，然后将公式对应到咱们的放大动画中。  上图中，假设三角形▲是鼠标，圆○为电脑桌面程序坞中某个应用图标。C斜边的长度即为鼠标与应用图标的距离。当鼠标移动时，程序坞中每一个应用程序与鼠标的距离将会动态的变化；当距离越大时，咱们给应用图标的大小设置得越小，反之亦然。 C斜边的长度： C\=A2+B2 实践 -- 用emoji表情代替下应用图标 ```html 😆 🫠 🤣 😀 😅 😀 😅...
## 前言 这是[【Node.js实战】](https://juejin.cn/column/7125427604525416455)专栏内的第6篇文章，专栏是分享使用Node.js技术编写实用脚本技巧。 专栏现有文章： 1. [仿jsDoc写一个最简单的文档生成](https://juejin.cn/post/7119105933661175838) 2. [50+行代码搞定一行命令更新Npm包](https://juejin.cn/post/7068969844607189029) 3. [玩转nodeJs文件模块](https://juejin.cn/post/7072972877628178440) 4. [Node.js操作Dom ，轻松hold住简单爬虫 ](https://juejin.cn/post/7184260401139220536) 5. [【Node.js】写一个数据自动整理成表格的脚本](https://juejin.cn/post/7188320646412107835) 欢迎读者关注[【Node.js实战】](https://juejin.cn/column/7125427604525416455)专栏。 进入了新的一年，团队被分配了新的工作内容——每周巡检。 巡检工作简单，但需要人工重复性地登陆远程服务器、输入重复的命令，然后将命令的结果记录下来。每做一次估计花`40`分钟，但要每周做，一年52周，一年下来就要花`40*52=2080`分钟，这仅仅是团队一个人一年要花的时间。  不能这么玩呀，纯纯工具人，所以我一直在思考如何用程序帮我自动巡检掉。这篇文章的出现，说明我的想法方向是正确的，收益可观一年要花**2080分钟**，被我减到**52 分钟**。 如果再扩展程序帮助到团队，这个公式将从**`40*52*团队人数`****变成****`1*52*团队人数`****，时间等于金钱**。 未自动巡检：  手动连接登陆远程服务器，再输入相应的命令获取结果，然后人工依据结果判断是否异常，相当麻烦，而且我要执行的命令不止一条。 自动巡检：  运行macOS笔记本创建好的快捷指令，它会自动巡检服务器，并且巡检完成后直接打开巡检结果表格。当然没有macOS依然可以，但就是没有快捷指令这步，需要自己执行程序。 完整源码：[blog/ssh](https://github.com/CatsAndMice/blog/tree/main/ssh)...
依稀记得2022年趁某平台优惠买了台云服务器，周未准备安装MySQL数据库，两天时间卡在MySQL环境配置上，实在是折磨一气之下把服务器给退了。  要是我早一点学会Docker，我的博客估计已上线一年啦！前端切图仔学会Docker，我真的能让你三分钟上线自己博客平台。 不骗人，先把我的博客平台秀出来给xdm瞅瞅。 网址：[https://www.linglan01.cn](https://www.linglan01.cn) ## Docker能做什么？ 举个🌰，大家有没有体验过在服务器上安装MySQL、Node.js等经历，安装它们并是不像手机应用商店、macOS中的App Store那样点击下载即可，我们还需要为它们手动配置环境变量、路径，更甚者要设置权限。像我整理的linux安装Node.js文档，为了安装它我需要手敲好几个命令:  Node.js安装是相对简单的，为搭建一个后台可能我们需要使用到MySQL、Nginx、Redis等等。如果搭建这些服务能像我们前端开发熟悉的Npm包管理器那样一个命令下载安装别人已经配置好的该多好，我只想做个伸手党，而Docker正好圆了我这个想法。  简言之，Docker是帮助开发者快速简单搭建、部署、安装应用服务的一个工具。当然Docker功能不仅仅局限于这些，其他功能我暂时没有使用到，xdm自行研究吧。 ## Docker中的三个重要概念 镜像: 镜像概念等价于Npm包的概念，直接理解成Npm第三方包即可。例如：我们下载vue开源的包`npm i vue` ，下载Node.js镜像`docekr pull node`。 容器 容器就有点难理解，Docker 容器和文件夹很类似，一个Docker容器包含了所有的某个应用运行所需要的环境。每一个 Docker 容器都是从 Docker 镜像创建的。Docker 容器可以运行、开始、停止、移动和删除。每一个...
Node.js用于做小程序后台服务，域名要求必须是Https协议。在Node.js开启Http服务是非常简单的，如下： ```JavaScript const http = require('http'); const server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/html;charset=utf8' }); res.end('访问成功') }); server.listen(8080, () => { console.log('服务已开启'); }) ```  如果想使用Https服务需要两步：1. 需要有一份SSL证书；2....
> 文章收录： > * 个人网址：[http://linglan01.cn/](http://linglan01.cn/) > * Github仓库：[https://github.com/CatsAndMice/blog/issues](https://github.com/CatsAndMice/blog/issues) > * 公众号【凌览社】 产品经理又有新需求啦，其中有一个图片上传后用户拉伸图像宽高的功能，评估后因要卡上线时间来不及砍掉了。保不准下一个版本又会提这个功能，所以还是要去研究研究。 幸亏我有关注张鑫旭大佬的博客，印象中记得发表过一篇关于图像拉伸的文章，就是它[JS之我用单img元素实现了图像resize拉伸效果](https://www.zhangxinxu.com/wordpress/2022/11/js-image-resize/)。刚好满足产品想要的效果，demo都是现成的。  文章对js逻辑部分并没有描述，像我这种爱学习，那不得知其所以然。 因此，我读了读源码200行左右，并且去掉边界判断逻辑，只将核心逻辑写了一遍。 先把效果秀出来：  ## 先搞定图像拉伸样式 先写一个img元素，给它的src属性添加一个在线的图像链接。 ```HTML ``` 再给它整点样式重点是 `border-image`属性，大佬文章也是介绍使用`border-image`属性做到单img实现拉伸。不赘述，跟我一样爱学习的人肯定会去瞅一眼大佬文章的。 ```CSS /* 先默认宽度400px */ .image-size...
>文件收录： >个人网址：[https://linglan01.cn/](https://linglan01.cn/) >Github： [https://github.com/CatsAndMice/blog/issues](https://github.com/CatsAndMice/blog/issues) 为什么要管理Node.js版本？这是我们要先明白的点。 假设我电脑Node.js版本为`v14.x`，日常工作中可能会遇到以下场景： - 我想要尝鲜新版本的Node.js所带来的新特性，顺带提一声Node.js官方近期已发布`v20.x`版本; - 我要给华为云开源的组件库[TinyVue](https://opentiny.design/tiny-vue/zh-CN/os-theme/docs/envpreparation)贡献一波，运行它要求Node.js版本为 `v16.x`; - 团队成员 Node.js 版本不统一： 守旧派用 `v12.x`、保守派用 `v14.x`、激进派用 `v17.x`，突然某天老板让我去维护守旧派负责的项目，运行后由于Node.js版本不一致直接报错。 如何解决呢？卸载重装？又low还折腾。  如果我们使用Node.js版本管理工具就能任意切换Node.js版本，不需要卸载重装。 它能帮我们做到`v12.x`、`v14.x`、`v20.x`等等版本反复横跳。  ## 简单选型 我们看看社区有哪些Node.js版本管理工具，做一个简单的选型吧。 |Node.js版本管理工具|npm下载量/周|GitHub Star|特点| |-|-|-|-|...
> 文章收录： > * 个人网址：[http://linglan01.cn/](http://linglan01.cn/) > * Github仓库：[https://github.com/CatsAndMice/blog/issues](https://github.com/CatsAndMice/blog/issues) 推荐一篇蛮有营养的文章[速读《软技能 代码之外的生存指南》](https://juejin.cn/post/7195491899746156603)。 我比较喜欢实体书籍，所以自己干脆买一本《软技能：代码以外的生存指南》回来通读一遍，记录笔记估算有2-3k字，有点长，这里只截部分出来。  再精简总结一下： **职业** - 职业规划制定大目标，再拆分小目标 - 如果对目标没干劲，那将目标与金钱挂钩，总不会对金钱不感兴趣吧，如：大目标：五年内我做到年薪40w，再拆分小目标 - 人际交往很重要，改变只想好好写代码的想法 - 提升影响力、争取内推能帮助我们更好的通过面试 - 成为创业者、自由职业者、远程工作者之前的一些建议 **自我营销** - 打造自身品牌：坚持写博客 - 训练表达能力，从企业内部分享开始 -...
我们先了解什么是发布-订阅模式，发布-订阅模式它是一种对象间一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都将得到状态的通知。  发布-订阅模式流程如下： - **订阅者**将自己想订阅的事件**注册**到**调度中心**； - 当**发布者发布该事件**到调度中心时，调度中心执行订阅者注册的事件。 举一个生活中的例子： 张三最近看上一套房子，到售楼处才被告知，该楼盘已售罄。好在售楼MM告诉张三，不久后将有一些尾盘推出，开发商正在办理相关手续，手续办好后便可以购买，但到底什么时候好，目前还没有人知道。 于是张三记下了售楼处的电话，以后每天都会打电话过去询问是不是已经到了购买时间。除了张三，还有李四、王五、小明也会每天向售楼处咨询这个问题。一个星期过后，售楼MM决定辞职，因为厌倦了每天回答1000个相同内容的电话。 当然现实中没有这么笨的销售公司，实际是这样的：张三离开之前，将电话号码留在售楼处。售楼MM答应他，新楼盘一推出就马上发信息通知张三。李四、王五、小明也是一样的，他们的电话号码记录在售楼处的花名册上，新楼盘推出时，售楼MM翻开花名册遍历上面的电话号码，依次发送一条短信通知他们。 上述例子中，发送短信通知就是一个发布-订阅模式，张三、王五等购买者都是订阅者，他们订阅房子开售的消息。售楼处作为发布者，会在合适的时候遍历花名册上的电话号码，依次给购房者发布消息。 上述例子存在的好处有： - 张三不需要每天都打电话过去询问，开发商手续完成后，售楼处会自动发送短信通知给张三； - 张三、李四等购买者与售楼处互不干扰，即使售楼MM辞职也不影响张三、李四等购买者，只要花名册还存在，售楼处就能给购房者发布消息。 回到代码层面上来，发布-订阅能给我们带来以下好处： - 发布、订阅逻辑代码解耦，两者互不影响，订阅逻辑的改动不影响发布逻辑，发布逻辑改动同样不影响订阅逻辑，它们存在一种动态的关系，增加了灵活性； - 支持简单的广播通信，自动通知所有已经订阅过的对象。 了解发布-订阅模式后，再回到mitt身上来。 ## mitt的介绍与使用 ### mitt的介绍 [mitt](https://github.com/developit/mitt)是一个发布-订阅模式的库，并且它有9k的Star，优点有： - 轻量，压缩后体积小于200...
早期浏览器很low，它只存在鼠标事件([MouseEvent](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/MouseEvent))。随时代的发展出现了智能手机、平板电脑等触屏设备，交互方式发生了变化，单纯的鼠标事件已不够开发人员使用了。于是引入了触摸事件([TouchEvent](https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent))。不过这还不够完美，没有把触控笔事件考虑进去。当要求移动端、PC端同时具备拖拽功能时，开发人员还要维护两份事件逻辑。 为了解决上述问题，官方引入了全新的规范Pointer指针事件([Pointer](https://developer.mozilla.org/zh-CN/docs/Web/API/Pointer_events)) ，它提供了一套统一的事件，鼠标、触摸、触控笔事件一锅端了，不需要再维护两套事件逻辑。 ## Pointer指针事件属性 [Pointer](https://developer.mozilla.org/zh-CN/docs/Web/API/Pointer_events)继承[MouseEvent](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/MouseEvent)事件，因此常用属性`clientX，clientY`等指针事件都具备，同时指针事件也扩展了它自己独有的属性。 | 属性 | 介绍 | | ------------------ | ------------------------------------------ | | pointerId | 指针引起的事件的唯一标识 | | width | 指针的接触面的CSS像素宽度 | | height | 指针的接触面的CSS像素高度...
## 我的flag 2022年终总结[平淡无奇，2022年终总结](https://juejin.cn/post/7178098754254274618#heading-7)中立的flag： - 完成15篇文章 - 搞钱 完成情况： - 完成九篇原创技术类文章，一篇读书总结 - [学会Pointer指针事件 ，一套拖拽事件两端(PC端、移动端)跑](https://juejin.cn/post/7250268273639669821) - [mitt用100行实现发布-订阅模式还收获了9k的Star](https://juejin.cn/post/7241114001323982903) - [《软技能：代码以外的生存指南》阅读总结](https://juejin.cn/post/7234692426689249317) - [Node.js版本管理工具，我选择n](https://juejin.cn/post/7231834021055250490) - [从张鑫旭的demo中，我学到了图像拉伸的原理](https://juejin.cn/post/7227986137457229885) - [前端切图仔入门Docker，三分钟上线自己的博客平台](https://juejin.cn/post/7224137483297734715) - [Node.js搭建Https服务](https://juejin.cn/post/7213956241614159933) - [【Node.js】ssh2.js+Shell一套组合拳下来，一年要花2080分钟做的工作竟然节省到52分钟～](https://juejin.cn/post/7194340178939347000) - [【Node.js】写一个数据自动整理成表格的脚本](https://juejin.cn/post/7188320646412107835) -...