为什么大家偏爱怪异盒模型border-box？
我们都知道有两种盒模型，w3c盒模型和IE盒模型，IE是业界毒瘤所以IE盒模型又叫怪异盒模型(好吧我瞎说的)。content-box，顾名思义，即width就是内容宽度，和边框边距相互独立，反过来 border-box 就是宽度包含了padding和border，相互影响。
现代浏览器默认的都是w3c标准，但IE盒模型并非一无是处，甚至很多情况下它会更好用，看看下面这个实际开发中的例子：
如上，一个很常见的设计图，我们先看到输入框的大小，写上对应的css：
12width: 340px;height: 40px;
然后我们继续得知内容文字在其中的内边距，此时我们再设置这个内边距：
1padding: 10px 44px;
以上的操作我们严格按照设计图要求复原元素，但是在w3c盒模型中，整个div都被撑开了：
此时只需要把它设置为IE盒模型，看，它就正常了：
通过这个简单的例子我们就很容易理解IE盒模型：它的宽高一旦设定，除非边框边距已经超出宽高，否则宽高就是固定的。
这其实是比较符合直觉的，想象一个杯子盛满了水，此时加大了杯子的高度，水自然就不是满的了，于是我们又要往里头加 ...
用贪吃蛇小游戏的思路手写一个无限循环滚动轮播图
在某些业务场景下，接入第三方库实现轮播图效果可能并没有那么好用，笔者在接入Swiper插件失败后，还是决定手写一个。那么关于手写轮播图有很多文章已经讲过了，其核心原理是将图片排成一排，设置外层的Div超出隐藏，然后改变定位来实现轮播效果，这样通常不能首尾循环滚动，本文记录了一种对无限循环滚动效果的实现方式。
实现的思路很简单，就是和“贪吃蛇”游戏中蛇身体的移动逻辑一样，每次前进的时候先删除尾部元素，然后再添加到头部，这样无论身体多庞大，始终只有两个元素在改变位置：
基础效果有了思路，就不难写出轮播了，这里为了方便使用Vue2创建演示，后面会放上完整Demo及源码，文章只讲思路，就不贴大段代码了，有需要的小伙伴可以先点个收藏~
其中前进还是一样通过改变left来滚动，只是在滚动结束后便立刻修改数据：
12345// 核心代码const ulDom = document.getElementsByClassName('ul')[0] // 拿到页面Dom实例ulDom.style.left = xxx // 控制滚动，注意需要设置transition才有动画this. ...
Vue+Electron快速开发多端在线笔记本
万事开头难，在文章创作前往往需要先有一个想法，当你有了模糊的想法，便可以开始研究。比方说，你想要写关于”微前端”的文章，那么，可以去调研实践微前端框架。做这些事情的同时，你可能会得到灵感，然后知道接下来怎么去写完它。（例如我的一篇文章《微前端很好，为什么我却不使用?》就是这么写的，虽然写的一般）
仅有想法肯定是不够的，一旦你知道了文章的走向以及讲述方式，应当记录下来，这将会是你的脉络图，同时也是流畅写下整个文章的关键。例如记录好每个节点提纲、讲述目的、技术要点、个人想法和感受等等这些基本点。这样做能防止创作时出现文思枯竭，即使你可能不觉得这样写是完美的，但你至少仍然能知道全篇基本脉络。
不管是不是计划好的，你的文章一定会有一个主题，而根据这个主题，最终你会作一番关于你对这个题目的想法和声明。工欲善其事，必先利其器。这就是为什么我要做这个项目的原因——总有一些想法需要记录，围绕着某个主题，还需要把文章脉络理清。”草稿箱”或许可以做到记录功能，但是作为一个优秀的码农，有什么理由拒绝自己开发一套笔记程序呢？
本文将带大家鼓捣一个跨端笔记本程序，让你能够时刻记录碎片的文字或灵感，并且同时拥有 ...
给掘金写了个一键三连插件（仿B站效果）
先来看看b站的一键三连是什么效果：
不难观察出以下几个特点：
长按点赞出现抖动动画
长按点赞时关联按钮会有圆环进度条效果
长按超过一段时间后放开则一次实现三个动作并且有个绽放特效
接下来我们要做的就是逐步实现这些步骤，如何开始呢？这就需要介绍今天的主角：谷歌扩展插件。
创建一个Chrome插件Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。可以通过 chrome-plugin-demo 这个项目了解更多，这里我们直接讲如何使用：
首先在谷歌浏览器直接打开地址 chrome://extensions/ 进入扩展程序，并打开右上角开发者模式，这时就可以加载我们的插件了：
展程序会以 manifest.json 这个文件来识别并加载插件：
12345678910111213141516171819202122232425262728{ "manifest_version": 2, "name": "掘金一键三连小助手&qu ...
Puppeteer + Nodejs 通用全屏网页截图方案
此次实现的功能是输入网址后生成全屏截图，可用于生成图片版文章，也可以用做图片二维码海报的生成器，可以支持各种尺寸定义，下面讲解实现的一些技术细节。
实现截图主要使用的是 puppeteer 这个库，最简单地实现一个网页截图，只需要几行代码即可：
12345678910111213141516171819const puppeteer = require('puppeteer') // 引入 // 启动浏览器 const browser = await puppeteer.launch({ headless: false, // 本地测试先关掉无头模式 }) // 创建一个页面 const page = await browser.newPage() // 设置浏览器视窗 page.setViewport({ width: 300, height: 600, }) // 输入网页地址 await page.goto(url, { ...
前端都应该了解的 NodeJs 知识及原理浅析
node.js 初探Node.js 是一个 JS 的服务端运行环境，简单的来说，它是在 JS 语言规范的基础上，封装了一些服务端的运行时对象，让我们能够简单实现非常多的业务功能。
如果我们只使用 JS 的话，实际上只是能进行一些简单的逻辑运算。node.js 就是基于 JS 语法增加与操作系统之间的交互。
node.js 的安装我们可以使用多种方式来安装 node.js，node.js 本质上也是一种软件，我们可以使用直接下载二进制安装文件安装，通过系统包管理进行安装或者通过源码自行编译均可。
一般来讲，对于个人开发的电脑，我们推荐直接通过 node.js 官网的二进制安装文件来安装。对于打包上线的一些 node.js 环境，也可以通过二进制编译的形式来安装。
安装成功之后，我们的 node 命令就会自动加入我们的系统环境变量 path 中，我们就能直接在全局使用 node 命令访问到我们刚才安装的 node 可执行命令行工具。
node.js 版本切换在个人电脑上，我们可以安装一些工具，对 node.js 版本进行切换，例如 nvm 和 n。
nvm 的全称就是 node vers ...
浅谈前端工程化的发展以及相关工具介绍
什么是工程化?什么是前端工程化?随着发展的逐步发展，作为工程师除了需要关注需要写的⻚面，样式和逻辑之外，还需要面对日益复杂 的系统性问题，比如模块化文件的组织、ES6 JS 文件的编译、打包压缩所有的 JS 代码、优化和合并图片静态资源等等事情。
我们的项目需要以一种合理的方式进行组合，以应对在团队协作、需求迭代中保持项目 的稳定发展。这种方式就是工程化系统去运行我们的项目。
例如如下图所示就是前端工程化中一次打包的过程，左侧就是我们项目中出现的源文件，例如我们会通 过 sass 这种预处理样式来更好的组织我们的样式代码，使用各类其他语言比如 typescript、coffescript 等来书写我们的逻辑脚本。在最终上线时，我们需要把我们的这类文件，转化为能够在线上直接被浏览 器识别的 css 和 js 。
这种使用工程化思维，以工具的形式来进行上述过程的，就是前端方面的工程化。
一句话总结就是，前端工程化，就是在使用工具处理那些与实际业务无关的内容，比如处理 JS 编译、打包、压缩、图片合并优化等等各个方面的工程性代码。
前端工程化具体类目包管理工具对于一⻔成熟的语言来说，在有语言 ...
2022年了，前端的变化是否和尤大说的一样？vite生产使用体验
在以前，我们已经习惯了基于纯打包的开发方式，但是这种方式在实现过程中会有很多问题。首先，打包就意味着整个应用需要先打包好，浏览器和服务器才能启动，然后才能看到效果；其次，当应用中有很多的依赖时，初始化打包过程就会变得异常缓慢。
Vite基于此现状了一些改变，首先，它把整个应用拆分成了源代码层和依赖层，只要版本锁定，依赖里的代码就不会变，也就没有必要做热更新、保留细粒度的模块，Vite完全舍弃了对依赖的频繁处理过程。如果依赖很大，使用第三方打包器耗时会很久，而采用原生代码写的JS打包器，比如 esbuild，就可以快几十倍；其次，对于源代码，则是通过原生 ES modules 来做热更新，确保热更新的速度跟项目大小解耦（当然初次启动的速度还是会跟项目大小挂钩）。
回头看去年的时候，Vite势头正足，尤大曾多次在各个社区论坛表示过这个新的打包神器将会成为趋势，从谷歌搜索指数上来看在去年也确实非常活跃：
使用体验我从 Vite2.0 开始使用在实际项目当中，由于当时负责的项目是saas系统中的一个新板块，可以允许我使用新技术来开发，于是就上了vite，不得不说开发体验是真的好，但由于项目本身 ...
微前端很好，为什么我却不使用?
本文记录我对微前端原理的探索与思考，以及微前端框架qiankun项目实践。
当下前端所存在的一些问题
在技术浪潮的推动下，由vue、react所主导的单页面应用已成为主流，但在开发中，随着业务的深入和项目的复杂，带来了逻辑定位问题、打包速度问题、部署上线等等问题，往往我们可能只是更改了一行JS代码，到最后发布的时候，整个项目却要整个重新打包编译发布。
公司可能存在旧系统框架开发维护的项目，我们需要对以前的项目进行迭代或维护的时候，就不得不适应之前项目的开发环境，如果想要使用新技术，将会遇到阻碍。
单页面应用在应对大型项目的场景下，不可避免的会造成用户在首次进入的时候加载时间较长，因为几乎所有JS都在打包在一起，即使采用路由懒加载的技术进行优化，也依然无法避免这其中产生的DNS解析、三次握手、网络传输、代码解析等耗费的时间代价。
我们所希望的
能够使各个子模块或者子系统进行隔离。我们在开发或更新一个子模块的时候，只需要对这个子模块单独进行打包，发布上线，而不会影响到其他模块。各个子系统由于相互隔离，不会受限于技术栈的影响，更加轻量化，打包速度，前端性能等也会上去。
能够使各个子系 ...
快速部署Grafana日志监控+Nginx封禁IP
事情的起因还要从某天突然发现服务有明显异常的访问记录说起，虽然我这1核2鸡的小机器没什么攻击的价值，但也有了部署一套监控系统的想法。
↓ 这仅是免费CDN静态加速的记录。
一番简单的调研之后，我发现主流的日志监控系统为ELK组合(Elasticsearch, Logstash, Kibana)，还有Prometheus体系等，但这些相对而言有着较高学习成本与资源占用，适合复杂场景与企业级别使用，不太适合个人使用，于是最终我选择了曾经的老朋友Grafana作为基础快速搭建起轻量可扩展的日志监控系统。
Grafana本身支持多种数据对接，扩展性极高，本文不深入展开，所有监控指标围绕着Nginx，因为我的服务都是通过Nginx来代理端口的，所以日志的数据源由Nginx提供，但Nginx提供的log只是一个文本文件，我们要解析文本内的数据来进行分析，也可以解析转换为其他日志堆栈来获得更好的数据处理能力，这里我使用了Grafana团队自研的Loki来作为数据堆栈，Loki同时提供了一个代理服务，负责将日志进行解析和推送。
部署之后的默认界面展示，什么都没做的情况下这个界面也算有点味了：
D ...