🦍猿简历：一个让简历制作变得简单高效的在线简历工具
作为一个前端开发工程师，在过去的几年里我都是在用自己的方式写简历，我使用前端技术设计并书写完我的简历页面，再通过 chrome 打印出 pdf 文件，然后进行投递。 后来我觉得这是一个很好的办法，我决定把这种方法做成一个产品开放出来，我用了一个月把产品的主流程开发完成，但是由于自己的各种拖延和缺乏信心，我又用了大概一年多的时间才在最近真正部署上线了这款产品，哪怕现在我觉得产品在很多方面还有待完善，但是我决定先分享出来，假如有人使用我再做后续优化； 简历编辑方式 我调研过很多种在线简历制作工具，主要有两种基于 markdown 编辑和基于表单 + 模版 编辑的制作方式，我都尝试过，发现都不太适合自己需求。 markdown的方式其实和自己写网页差不多，我甚至觉得基于 markdown 的编辑方式还没有直接 css + html的方案来的灵活，写出复杂点的页面效果需要非常高的 markdown 技术要求； 而 表单 + 模版的方式就简单很多，只需要选好模版然后在对应表单输入数据就行了，但是这也存在一个问题就是用户不可自定义 UI 仅仅能在有限的模版中选择合适的， 另外，表单...
Nodejs 从 CJS 迁移到 ESM
随着 Nodejs 对于 ESM 的支持逐渐完善，目前很多三方库也逐渐仅支持 ESM 模式例如 chalk，眼看 CJS 已经渐渐沦为“昨日黄花”。 最近在准备升级之前开发的脚手架 simo-cli 的时候感觉尤为明显，很多库不能升级只能使用老版本，这迫使我要么放弃升级，要么全面拥抱 ESM。 那么如何优雅的从 CJS 过渡到 ESM 呢？以下逐一介绍： 常规替换1、升级 nodejs最小版本到 18+;2、在项目的 package.json中设置 type: "module";3、替换掉 exports: "./index.js" 使用 main:"./index.js";4、替换掉代码中的require()/module.exports换成import/export;12345/ CJSconst chalk = require('chalk');// ESMimport chalk from 'chalk'; 5、动态加载模块，可以使用 import()...
通过网站连接获取 favicon 图标
最近在做一个小工具，是一个浏览器插件，初期设想满足自己自定义 new tab 的能力，例如常用的快捷键、支持多种搜索引擎，甚至页面小工具等等；其中快捷连接需要能够自动根据输入的连接获取 favicon，这个很多工具都支持，例如雨雀的标题连接、微信钉钉的聊天窗分享等；下面我简单介绍下如何通过网站连接获取 favicon 图标。 1、直接访问默认路径许多网站将它们的 favicon 放置在一个固定的 URL 路径下，通常是 https://example.com/favicon.ico。可以尝试直接访问这个 URL 来获取 favicon。但是，这种方法简单但不总是可靠，因为并非所有网站都将 favicon 放在默认路径上。 2、解析 HTML 文档中的 标签更可靠的方法是从网页的 HTML 文档中查找 标签，这些标签通常指定了 favicon 的位置。你可以使用 HTTP 请求库（如 axios 或 node-fetch）来获取页面内容，并使用 DOMParser 或正则表达式来解析...
如何使用阿里云DDNS Open API 更新动态域名解析记录
最近一段时间我的腾讯云买的域名到期了，正好我也买了一个阿里云的服务器，所以想着域名也一起在阿里云买得了，于是乎我就像之前一样买好域名后开始配置 DNS 解析，本来想着也没啥区别，但是配着配着我才发现腾讯云是提供免费的 ddns 解析服务的，而阿里云没有，只提供了 实现动态域名解析DDNS Open Api ，没办法，家里的一些服务器和 nas 需要远程访问的话没有域名很麻烦，公网ip又会动态变化，于是想还是使用 Open Api自己动手搞定吧。 1、创建 AccessKey首先使用 Open Api 需要登录阿里云控制台，在右上角头像悬浮展开会看到 AccessKey 管理的的选项，点进去创建 AccessKey 即可，创建完成后保存下AccessKeyId和 AccessKeySecret下面使用 Open Api 会用到； 2、环境安装使用阿里云Open Api需要对应的编程环境，作为前端开发人员，我这里直接选用nodejs最为编程环境，大家对应选择自己熟悉的环境即可；环境安装完毕，就是看下需要哪些参数了，更新动态域名解析记录需要调用两个Open...
Mac/Linux查看内网ip与访问公网的ip地址
内网IP查询命令行中使用ifconfig查看的是内网的ip，常见于192.168.xxx.xxx 公网 IP 查询查询公网IP可以在命令行中使用： 1curl ifconfig.me # 125.119.220.22 或者 1curl ipinfo.io/json 示例 1234567891011{ "ip": "125.119.220.220", "city": "Hangzhou", "region": "Zhejiang", "country": "CN", "loc": "30.2936,120.1614", "org": "AS4134 CHINANET-BACKBONE", "postal": "310000", "timezone":...
【译】React Virtual DOM, Reconciliation and Fiber Reconciler
原文：https://namansaxena-official.medium.com/react-virtual-dom-reconciliation-and-fiber-reconciler-cd33ceb0478e 这片文章，我们将讨论下 React Virtual DOM 和 Reconciliation 的工作原理 介绍在讨论 Virtual DOM 之前，我们需要先了解下浏览器渲染的过程和 DOM。以下是浏览器渲染的几个步骤： 解析 HTML：浏览器解析 HTML 并将其作为文档的树状结构存储在内存中，这也称为 DOM (文档对象模型)，有时也称为真正的 DOM。它是一个用于构建网站的Web API。 DOM 提供一些方法对文档树进行编辑，可以更改文档的结构、样式或内容。 解析 CSS：浏览器解析 CSS 并将其作为 CSSOM (CSS对象模型)存储在内存中。它是一个Web...
Linux 常用命令
在 Linux 系统中，命令行是与系统交互的核心方式，它提供了强大的功能来管理文件、进程、网络等。以下是一些常用的 Linux 命令及其详细说明： 1. 文件和目录操作 pwd：打印当前工作目录的绝对路径。 ls：列出目录内容。常见的选项包括 -l（长格式，显示权限、大小等）、-a（显示隐藏文件）。 cd <directory>：切换当前目录到 。 mkdir <directory>：创建一个或多个目录。 rmdir <directory>：删除空目录。 rm [-rf] <file/directory>：删除文件或目录。使用 -r 或 -R 递归删除目录，-f 强制删除，不提示确认。 touch <file>：创建文件或更新已有文件的访问和修改时间。 cp <source> <destination>：复制文件或目录。使用 -r 复制目录。 mv <source> <destination>：移动或重命名文件或目录。 2. 文件内容查看和编辑 cat...
koa 洋葱圈模型
koa 洋葱圈模型是由koa-compose实现，本文将简要介绍下洋葱圈的本质，⚠️注意代码注释； 我们通过 use 注册中间件，中间件函数有两个参数第一个是上下文，第二个是 next，在中间件函数执行过程中，若遇到 next() ，那么就会进入到下一个中间件中执行，下一个中间执行完成后，在返回上一个中间件执行 next() 后面的方法，这便是中间件的执行逻辑。 1234567app.use(async (ctx, next) => { const start = Date.now(); await next(); const ms = Date.now() - start; ctx.set('X-Response-Time', `${ms}ms`);}); 洋葱圈的本质：中间件的compose 是多层promise 的嵌套，next 是下个中间件函数的包装函数（本质是一个promise），async 的执行是next 前由外向内，每次next...
Docker 常用命令
Docker 提供了一系列丰富的命令来管理容器、镜像、网络和存储卷等。以下是一些常用的 Docker 命令及其详细说明： 1. 帮助类命令 docker version：显示 Docker 的版本信息和运行时的详细信息。 docker info：显示 Docker 系统的详细信息，包括系统范围的设置和容器、镜像的数量等。 2. 镜像命令 docker images 或 docker image ls：列出本地的镜像。 docker pull <image>：从 Docker Hub 或其他注册表下载镜像。 docker build -t <name> <path>：基于 Dockerfile，在指定路径下构建一个新的镜像。 docker rmi <image>：删除一个或多个镜像。 docker tag <source_image> <target_image>：给镜像打标签，便于推送或引用。 3. 容器命令 docker run [-d] [-p...
图片懒加载 IntersectionObserver
图片懒加载是一种性能优化手段，在很多以图文列表为主的场景使用较多，比如大部分的首页商品列表展示，由于首页渲染需要静态资源加载，数据请求，数据渲染三个过程，且首页的加载时间直接影响其用户体验，所有在首页中做好性能优化尤其重要。 原理图片懒加载可以在首页性能优化中起到减少并发请求的作用，即，不在可视区的图片可以先不请求资源，等到下拉到一定距离或者进入可视区再请求静态资源，其原理就是：监听图片是否处于可视区位置，来判断是否发起资源请求； 实现方案图片懒加载的方案有两种：1、监听滚动事件，调用 img的 getBoundingClientRect方法返回图片标签的位置数据，根据位置判断是否在可视区；具体代码如下 1234567891011121314const lazyImages = [...document.querySelectorAll(".img-box > .lazy")];const winHeight = window.innerHeight;onScroll();window.onscroll = onScroll;function...