React中使用useEffect的基本概念和常见错误，包括effect的运行时机、依赖关系的处理、清理函数的使用等。通过示例演示了effect在组件更新和页面渲染中的运行过程，以及不同数据类型之间的差异对依赖关系的影响。同时也提到了使用useMemo和useCallback来优化effect的效果。总之，理解effect的使用对初级React开发者非常重要，可以帮助他们在项目中更加自信地使用effect。 

初级 React 开发者都会犯的 useEffect 错误

在日常的React项目开发中，这些错误会让你的项目变慢。实际上如果你熟悉Vue项目的开发话，这些道理是相同的。这边文章分析的是路由懒加载和图片懒加载。

这些错误让你的React项目变慢

此文章记录了React新手开发中无脑使用缓存的错误，并给出了相应的用法来更好的使用Hooks

React新手常犯的错误-乱用缓存

React 18常用的的 hooks，由于React里面的数据改变之后整个函数都会重新渲染，包括子组件。这样就会很浪费性能。这里整理了常用的hooks以及案例分析

React 常用Hooks

本文是React 18版本中对于组件通讯和插槽的用法案例说明

React 组件通讯与插槽

本文仅仅是作为一个快速入门React的文章，目标人群是那些Vue开发人员，接触过函数式开发，了解了下React的人。

React 快速入门-核心语法

Next.js 14的一个快速开发环境搭建

Next.js-14搭建开发环境

该篇主要是针对之前的NestJS搭建框架做一个不同版本的ORM补充

Nestjs TypeORM配置+用户加密

经常做前端开发的小伙伴，尤其是Vue或者React框架的，在编写页面的时候，总要新建页面，然后写上重复性很大的代码片段。这里我使用Vscode自带的代码片段，来制作一个快捷方法生成重复且繁琐的代码片段。

VSCode快捷代码片段

在前端开发中，我们经常会遇到需要动态变化的视觉效果。今天我们将讨论如何利用 CSS 的 mix-blend-mode 属性，实现一个文本穿过特定背景时反色的效果。具体来说，我们会创建一个背景为黑色的 div 元素，并让文本从中穿过。当文本进入 div 的区域时，其颜色会从黑色变为白色，离开时则恢复为黑色。

使用 CSS 混合模式实现动态反差色效果

在日常开发中，需要处理一些高并发的请求或者处理用户邮件认证等一些场景。那么就需要Redis了。
Redis 是一个开源的内存中数据结构存储系统，它可以用作数据库、缓存和消息中间件。

NestJs 集成Redis

vite项目可以直接部署到vercel上，不用做任何修改。但是这里会遇到一个问题，就是网站访问接口跨域。如果是普通的服务器，那么通常就是用nginx做反向代理。但是对于Vercel我们无法这么做。

Vue3+vite 部署到Vercel

最近在学习NestJS，一个基于Express开发的Node框架，他更加前端适合编写后端需求。

NestJS搭建开发环境

《你不知道的JavaScript》第四章笔记

避免过度代码嵌套是保持代码可读性和可维护性的关键步骤，特别是在编程中。以下是每一种方法，并附上在未优化代码和优化后代码的例子。

如何优雅的避免代码嵌套

在前端的开发中，经常会遇到这样的需求。A项目中的某个页面或者新增一个模块，需要嵌入B项目。然后B项目有可能需要C项目这种套娃式的项目嵌套。如果你是新开始做项目，那么我推荐你使用乾坤或者其他的微前端框架。但是如果你像我一样，项目以及成型，而且有很多公司自己的配置和域名不一样的各种各样的因素，导致你不能很好的使用微乾坤框架。那么通常大家使用的就是iframe。

基于Iframe开发的微前端

《你不知道的JavaScript》第三章笔记，关于对象的知识点总结，方便回顾。

《你不知道的JavaScript》第三章笔记

在javascript的开发中，经常会遇到this这个关键字。简单的说this是个特殊变量。但是在javascript中，this的使用经常让我感到困惑，这篇文章是阅读《你不知道的JavaScript》中第二章this的全面解析笔记。

《你不知道的JavaScript》第二章笔记

《你不知道的JavaScript》第一部分的总结笔记，方便回顾

《你不知道的JavaScript》第一章笔记

由于最近使用到esbuild这个打包工具编写插件，而我的插件需要编写样式。在实际的运用过程中，我发现插件的样式类名可能和被使用项目中的一些类名发生冲突。这个时候我就想借鉴一下vue中出现的样式类scoped 的概念。

esbuild项目css样式隔离

在如今这个前端项目框架较为成熟的年代，一个前端项目涉及到多个依赖，而这个项目的依赖又是居于项目的版本来的。所以一个大型的项目，多人进行联合开发的时侯，A说项目启动不起来了，B说安装包依赖出现一长串错误。C水打包出现报错了。一开始遇到这种问题，没有经验的话很难发现问题的所在。所以在项目中限制安全运行环境版本，是一个很好的规避方式。本文以pnpm,yarn和npm这3种常见的包管理器做例子说明。

前端项目限制环境版本

看到这篇文章，相信你的手里和我一样有个可用的Google Voice。白嫖来的GV来之不易。官方的政策是账号3个月不活跃就会被收回。原先有一个网站IFTTT，可以免费发送信息到你的GV号上，让你保持活跃。但是现在收费了。对于白嫖党来说这是不能容忍的，白嫖了你的GV号还要月付维护费，不能够啊。所以我针对性的研究了下，如何自动回复短信和发送短信，来保持活跃。

Google Voice 自动保号

有时候我们经常会提交敏感信息到仓库里面，但是修改之后提交也能在提交记录里面找到文件的信息。有几种方法可以清除记录，这里记录一下对我最有用的操作。

Git 清空提交记录

针对国内的Linux服务器翻墙需求，这里的国内服务器指的是自己在家搭建的服务器。通过xray-core的代理工具来实现。

Linux服务器使用代理

在使用Git时，有时我们可能需要同时管理多个GitHub账户。下面是一些步骤和建议来实现这一目标：

Git多账户使用

之前给linux做过代理配置。好久没用，代理失效了。其中设置了端口也不知道在哪里设置的

wget 正在连接 127.0.0.1:8889... 失败：拒绝连接

centos8 安装软件提示错误

在日常的前端开发中，经常需要开发一些组件。通常我们是基于某个特定的框架来开发，例如vue,react等等。对于页面的样式组件来说，没有什么太多的计较。但是如果开发一个画布工具或者一个音乐播放器的组件，那么这个组件必然会有很多功能，而且对于vue2/vue3，react版本，你可能每个都要开发一遍。那么web-component的开发理念就非常适合目前的需求了。但是通常的web-cmponent的开发中，对于JS我们可以很好的管理，拆分功能。但是对于dom样式的编写就极其不方便了。

基于esbuild搭建组件开发框架

前端开发中经常遇到import,export这种导出和导入，同时也能遇到module.exports这种，那么他们到底是什么呢？

JS模块的导出和引入

esbuild v19版本构建本地服务

Prettier是一个代码格式化工具，它支持JavaScript等编程语言的代码格式化。它是一个“有态度”的代码格式化工具，它支持“Opinionated”的代码格式化，即你必须认同它的观点，按照它说的做。Prettier的特点是：自动化、一致性、可配置性、支持多种语言、易于集成。

Prettier格式化工具

在 JavaScript 中，arguments 是一个特殊的对象，它包含了传递给函数的所有参数。虽然它看起来像一个数组，但实际上并不是一个真正的数组，因为它没有继承 Array 类的方法。

理解 JavaScript 函数中的 arguments 对象

这个月偶然从网上看到了Cloudflare Zero Trust这个东西。它大致相当于一个内网穿透工具，我之前将家里的服务器通过nps 这个工具内网穿透出来，也很方便。但是购买的腾讯服务器是有时限的，为了防止服务器到期，我又嫌续费太贵无法继续续费，导致连不上家里的服务器了。所以想用Cloudflare Zero Trust 来做个内网穿透就当是备用方案了。

ProxmoxVE通过Cloudflare Zero Trust实现内网穿透

这是模仿Swiper的功能，网上非常好用的一个组件。并不是想重复造车轮。主要是开发中遇到这个这样一个需求，但是又要非常高的一些定制化功能。主要还是全部引入Swiper会使得我编写组件很臃肿，不利于别人的使用。这里就当学习一下，自己实现一个简单的Swiper

手写一个简单的Swiper

我是在搭建Java的开发环境中找到的这个快捷的方法，主要是gradle版本会在brew更新他之后导致原来的地址改变了。因为他的文件夹是用版本好命名的，所以为了更新的时候不影响他们的使用。我找到了一个相当于windows快捷方式的方法。

Homebrew使用小技巧-相对路径

编码问题。因为在 Windows 系统上，通常使用的是 GBK 字符编码方式，但是在 macOS 系统上使用的是 UTF-8 的编码方式。所以常常会遇到从 Windows 系统上编辑创建的 Word/Excel 等 Office 文件，在 macOS 或 iOS 上面打开显示为乱码。

macOS上修复word/excel等office文件乱码问题

TypeScript中的装饰器是一种特殊的语法，可以用来修改类、方法、属性或参数的行为。装饰器是一种函数，它接收一个目标对象或一个属性描述符作为参数，并可以返回一个新的对象或属性描述符，或者不返回任何值。装饰器可以用来实现一些常见的编程模式，例如依赖注入、日志、缓存、验证等。

TypeScript--装饰器

B站是一个以视频为主的社交媒体平台，其中一大特色就是弹幕，即用户可以在视频上方实时发送评论，与其他观众互动。弹幕可以增加观看视频的乐趣，也可以反映出视频的热度和受欢迎程度。然而，弹幕也有一个缺点，就是可能会遮挡住视频中的重要内容，影响观看体验。为了解决这个问题，B站推出了一种智能防挡弹幕技术 ，可以让弹幕自动躲避人形区域，达到弹幕不挡人的效果。

B站防遮挡弹幕实现

在Telegram使用过程中，偶尔会出现手机号码被禁用的情况，当出现这种情况时，Telegram手机端和电脑PC端都会自动掉线并退出。当再次尝试登陆时候就会提示此手机号码已被封禁。
如果您在使用Telegram过程中没有严重的违规操作，比如批量发送广告被多人举报等，大可不必紧张，只需要进行简单的操作即可解除封禁，并且在解封后原来的聊天记录以及联系人群组都会存在，并不会消失。
如果您在使用Telegram过程中没有严重的违规操作，比如批量发送广告被多人举报等，大可不必紧张，只需要进行简单的操作即可解除封禁，并且在解封后原来的聊天记录以及联系人群组都会存在，并不会消失。

Telegram此号码已被封禁，快速解封的方法，解除this phone number is banned提醒

今天服务器一直提示资源异常，一看发现空间32G快用完了，一层层查询下去发现是docker容器overlay2目录占用了大量空间。下面是清理的方法。

Docker 检查容器大小及清除docker磁盘空间

最近一直折腾机器人，折腾好了QQ机器人，又想折腾微信机器人。和QQ相比，微信一次只能登陆一个手机设备，切换账号会自动退出。所以需要设备可以双开微信。这次的教程针对IOS的，Android双开，小伙伴说很好弄。

IOS双开微信(其他应用可以通用)

最近新版的QQ发布了，但是他居然不支持双开，登陆2个账号。正好微信双开也麻烦，所以整理下，优雅的使用Mac上自带的程序实现双开功能。

如何优雅的给新版QQ和微信双开(Mac)

随着Vue更新到3.x版本，出现了一个新的代码组织方式-组合式API。以前Vue2.x到代码书写风格是选项式 API。
具体可以去vue官网查看
但是在实际代码编写过程中，组合式API一大坨代码都放在一起。不利于后期代码维护，本人小菜鸟一枚就思考是否有什么设计模式或者什么解决的方法。一开始采用的就是普通的分函数这种，但是后面觉得维护起来也很麻烦，问了大佬之后总结出一部分经验。

Vue3小技巧-业务逻辑Hooks封装

今天遇到一个问题，我写了下面一个样式，发现子的margin-top没有作用，但是父亲的却出现了子的margin-top值。

CSS3小问题-子元素设置margin-top为什么影响了父元素

今天在写flex自适应布局的时候，出现了一个问题：flex布局子元素高度设置无效。
我的页面布局是这样的

CSS3小问题-flex布局子元素高度设置无效

父元素.parent设定了高度，设置iframe height：100%,通过浏览器观察发现，外层div与iframe高度相同，为什么出现滚动条，发现没有padding/margin的影响。

CSS3小技巧-在div中iframe出现滚动条问题

更麻烦的是有些图标悬浮上去是要改变颜色的。这里我找到了一种让svg方便引入的方法，而且能像字体文件一样，简单的改变颜色和大小。

前端项目优雅使用svg

本文采用的工具是qv2ray,使用的代理节点类型是v2ray。文章涉及的工具qv2ray分为2部分，一个是外壳工具`qv2ray`，另一个是内核`xray`。这里提到的是电脑端使用的工具。对于移动端，IOS需要下载`小火箭(Shadowrocket)`，Android需要下载`V2RayNG`。移动端是不需要安装

代理工具使用说明

本文记录一下Vue3的一个基本的开发框架的搭建。主要在公司开发业务，主体框架不用每次都搭建。时间长了就容易忘记了，当初的框架如何搭建的。文章记录的框架搭建的主要实现功能如题，然后研究一些快捷的操作。例如，ts定义的空间自动导入等等。

Vue3 + Vite + Ts + Axios + Pinia + VueRouter 配置

在日常工作和学习中，会遇到多人开发项目。那么项目之间的合并就是一个大问题。多人开发采用git管理代码，如果没有一个好的git工作流程就会导致项目维护巨难受。凑巧之前看到一个大佬的视频，介绍了一套git上多人开发的工作流程。总结(copy)了一下。

Git工作流程

git的服务器在国外，导致正常拉github项目会很慢，还有可能会超时。所以需要一个科学上网软件，设置代理端口。

Git设置代理

一直以来家里的旧电脑闲置着，偶尔也会搞一下Linux系统。但是由于知识匮乏每次重新安装Linux系统很麻烦，就思考为啥不能像服务器运营商一样，每次重新安装系统就重置一下就好了。找了很久发现了Proxmox这个基于debian制作的虚拟机系统。如何安装查看我以往的文章，或许可以给你提供一些帮助。
笔记本安装proxmox
长久以来玩这个系统，看见很多人弄All in one和单臂路由。但是由于人在外面工作，服务器在老家，所以先折腾如何安装openwrt系统，至于网络的问题等回家再做研究。

PVE安装OpenWrt

随着移动端设备的普及，作为前端开发，难免会遇到图片双指放大的需求。触控设备可以直接使用手指进行交互，而且基本上都支持多点触控。所以，查阅了网上大佬的案例，编写一个vue指令，来完成双指放大图片的需求。

JS实现双指缩放

本篇记录vue3和vue2在实现相同的逻辑上的一些语法差异，持续更新。

Vue3和Vue2的一些写法区别

现在听个歌曲可费劲了，QQ音乐，虾米音乐，网易云音乐 都得安装上！之前很简单的一个事情，现在弄的这么复杂而网易云音乐相信不需要我过多的介绍大家也都知道，很多人在听歌的时候也注意到了，由于各种限制很多的音乐呈现灰色的样式，是无法播放的。如下图所示，今天就 **带大家把灰色不能听的音乐全部变成可以正常播放的音乐**

三种方法解锁网易云音乐】开VIP都无法播放的灰色音乐，教你如何解锁！

记录一个今天遇到的问题:使用axio上传文件过程中，传入formData数据，然后提示 the request was rejected because no multipart boundary was found。首先，确定这个接口是可以使用的。

Axios 上传文件

在实际开发中，经常用到h方法来实现页面，常见的组件中也有render，h这种写法。例如iview的table中

vue3源码学习11-h方法和createVnode方法实现

前面主要是vue的源码仿写，最主要的是vue的响应式，以及依赖收集。是一个简易版本，和官方源码还是有很多细微差别的，例如数组代理之后改变数组长度，会触发更新之类的。数组还会被收集长度这种依赖关系，以及数组的一些splice，push，shift，unshift，pop这些方法重写，来完成修复一些数组在vue依赖更新中的BUG。

vue3源码学习10-runtime-dom实现

在页面编写中，之前都是使用reactive来包裹对象，这样对象属性的值改变，其对应的effect包裹渲染动作就会被触发。并且通常有函数解构的操作，例如let people = reactive({name:"张三",age:24}); let {name,age} = people;。如果这么结构操作的话，name和age就会变成普通的变量，那么如果在effect中使用的话，就算改变了值也不会触发回调函数。那么为了解决例如此类的需求，vue3提供了ref、toRef、toRefs。

vue3源码学习-9-ref的实现

本文学习编写watch功能函数。首先，先去使用下官方的watch做一些简单的小功能测试。

vue3源码学习-8-watch

回顾上期的内容，编写了effect中的调度器，主要修改了effect.ts文件。在预览之前的代码的时候会发现一些优化的地方。
在vue代码的需求编辑中，会遇到这样一个例子。例如一个人的姓名分为姓和名，那么我希望在页面上打印出这个人的姓+名，而且在姓或者名改变的时候，页面渲染也会改变。那么就用到了vue的computed来进行操作。旧版的vue2中computed是基于watcher实现的。vue3则是基于effect来实现。另外vue3中的computed写法叫组合式API，而vue2是拿data中的属性来编写computed中的属性，这种叫选项式API(option)。具体的vue3写法如下

vue3源码学习-7-computed的实现

Homebrew 是一款自由及开放源代码的软件包管理系统，用以简化 macOS 和 linux 系统上的软件安装过程。它拥有安装、卸载、更新、查看、搜索等很多实用的功能，通过简单的一条指令，就可以实现包管理，十分方便快捷。Homebrew 主要有四个部分组成: brew、homebrew-core 、homebrew-bottles、homebrew-cask

Homebrew配置国内源

在开发项目的过程中，偶尔会遇到很大的数据，然后设计图上又是列表还不分页的情况。为此研究了下虚拟滚动的方案。虚拟滚动大致的思路是当你往下滚动，但最后一个计算的元素出现的时候，替换上面不见了的DOM元素，将它们从渲染的HTML中剔除，同理往上滚动，一个计算的元素出现在最上面的时候，表明需要加载上面的元素信息，并隐藏下面的DOM元素。演示地址

原生JS编写虚拟滚动

经过第5章对于分支切换的操作之后，vue的effect源码就具有了收集需要的依赖，对于改变不必要的数据，不会触发依赖的更新。那么今天就要实现vue3的调度器代码，之前effect只能同步运行代码，无法对于异步操作进行数据更新。
官方的写法是什么样子呢?

vue3源码学习-6-调度器

上篇回顾，核心代码逻辑是通过reactive中的Proxy()来代理一个对象，然后通过get收集依赖，主要操作放在来effect中。那么当我们回顾上一篇的问题。当用户有一个这样当操作

vue3源码学习-5-分支切换

经过上文的响应式编写之后，实现了数据包裹之后变成了响应式数据，用户修改数据的时候能监听到操作。
但是实际编写的响应式reactive.ts中最核心的是Proxy中的get和set方法。为此我们本次需要将核心代码抽离，并且编写effect副作用函数和依赖收集功能，这样函数依赖发生改变，他就重新执行。

vue3源码学习-4-effect编写以及依赖收集

在实际开发中，部署的项目在服务器上，通过域名来访问，是否会发现有的域名是http协议有的是https协议。那么同一个网站，他既可以http访问，又可以https访问，他们是什么呢，他们之间有什么区别呢？

Http和Https学习(一)

前端开发过程中，总会遇到点击链接下载。这个时候可以借助2种方法解决。一种是用a标签的download，第二种是按钮点击之后调用接口来下载。2种方法最好确定文件没有跨域现象。

前端实现文件下载

经过前面的环境搭建以及项目构建，完成了基础的项目框架，下面学习实现vue3的reactivity。

vue3源码学习-3-实现reactivity

原本旧项目框架的问题，导致打包的内容比较大，vendor这种文件达到了4M，个人感觉是存在一些问题的，想着优化下，正巧同事做了新模版，打包之后整体文件也就在2M左右，太强了，看来vue-cli脚手架还是要研究研究。

Vue项目中配置vuex版本问题错误

服务器本身很垃圾，是一个小鸡服务器，Java后端程序经常崩溃，所以用sh脚本简单的做一个自动重启命令

Linux 简单弄一个自动启动脚本

docker技术虽然发展了很多年，而且k8s表示不再支持它，但是这个容器技术目前拿来玩一玩还是不错的，装docker-compose则能一次控制多台容器。

Linux 宝塔面板安装docker-compose

最近服务器项目部署需要不同版本的Java，在Mac上领略了jenv的简单，易管理的优点，，所以便打算在Linux上也安装这个。

Linux 安装Jenv Java管理工具

最近配了一台服务器,配置清单cpu: e2660、内存: 16*2 ecc。
使用 proxmox 安装了多台虚拟机,使用其中的 3 台 4c 8g 的搭建了一个 3 节点的 k8s 集群。因为没有公网 ip或者说进不了电信光猫改不了配置,不能直接通过公网访问到内网，所以使用 frp 内网穿透，提供公网访问。

Proxmox 搭建K8服务

去官方网站下载Proxmox VE xx ISO Installer镜像，然后通过UltraISO安装，
菜单→写入硬盘映像→raw格式→选中你的U盘，烧录完成后，和你平常做系统一样，进入快捷启动菜单，找到你的U盘并启动它。(或者去BIOS设置你的U盘为第一启动选项)

Proxmox VE 安装教程

Vim本身也有很多插件，而插件管理器有很多，比较火的这个vim-plugin是一个异步更新的管理器。

Vim 安装插件管理器 vim-plugin

通过源码学习笔记1的实验操作，得到了个基础模版。那么接下来，我们需要实现构建流程，让我们的项目能打包运行。

vue3源码学习-2-实现构建流程

本次主要学习目标是构建一个vue3源码的工程项目。需要用到…….

vue3源码学习-1-生成配置信息

最近遇到个需求，需要一个类似于钉钉头部的菜单栏，因为钉钉的头部可以通过函数来渲染需要组件的样式，以及回调函数。所以，第一眼想到了，用单粒模式来模仿这个。那么我们就需要一个全局组件

记录一次vue2函数式组件开发+单粒模式

一直在写vue项目中使用iview的table,它有个设置宽高固定的属性。于是我想在外层套一个div并且这个div动态的随着窗口大小调整，并且满足一定的宽高比，有这种需求是因为一个统计页面上有多个统计类型，其中就有表格。

CSS3小技巧-动态设定div的宽高比

通常我们编写脚本中会遇到用户输入字符的操作，对于大部分网站来说，用的都是input或者一些用contenteditable=true这种属性。来完成用户的输入。但是，网站通常都在用户输入的时候做一些JS的操作，那么，在JS脚本中如果单纯的在input里面填入文字，他不会触发网站的JS操作。为此查询了下资料，得知可以通过EventTarget.dispatchEvent来重新初始化事件。这样在脚本填入文字的时候就能触发网站原本的操作了。

Javascript 模拟输入并触发事件

因PVE7.0更换了Debian11作为内核，软件源管理方式也发生了变更，故原软件源配置方法已失效。默认是企业订阅版，如果不做修改，在使用 pveceph init 进行 ceph 初始化安装的时候会将整个环境破坏，切记！

ProxmoxVE(PVE) 7.0配置国内软件源并删除订阅弹窗

家里笔记本闲着也是闲着，全部装上了CentOS7作为服务器，但是笔记本合上盖子默认是休眠的，所以查资料设置，在此记录一下设置方法：

Linux 笔记本合上盖子依旧运行

SVG画圆

Dom节点定义数据

希望只通过css的方法来完成点击改变颜色的需求，这样就不用写冗余的JS代码

如何不通过JS代码实现点击改变颜色

家里积灰的旧电脑，开发性能不够，但是用来做个网络小主机妥妥的够用，安装了pve7.0版本后升级到小版本11，加入重要的功能后可以安装win11了。索性升级一下，但是升级不了，出现了BUG。

Proxmox VE 升级遇到的错误

由于工作环境的需要，我们通常需要一些魔法代理。过去使用xui来搭建面板，但是作者很久没更新了。如今出现了很多变种版本，这里我使用的是伊朗开发的3xui。这里记录下我的搭建过程。

3x-ui面板搭建

Mac上的漂亮终端oh-my-zsh + iterm2 + homebrew 包管理器

Iterm2+oh-my-zsh+Homebrew

线性代数学习笔记-2-矩阵消元

在我们中学时代，学习过一元二次方程组的求解。由于对数学的理解不够深刻，只能简单利用高斯消元法，来求出一组2个2个未知数方程公式的解。例如下面一个公式: