今天闲来无事，想编写一个私人的rss订阅，用来订阅自己喜欢的博客，终端运行后可以采集列表中博客的RSS文章，只关注最近一星期的数据，然后选中文章，通过浏览器打开博文地址浏览。好吧想法有了，那么就开干！

## 程序构思

一个私人的rss订阅，用来订阅我喜欢的博客，使用JavaScript来编写，在node环境下运行，我会创建一个数组，里边存放着我喜欢的博客的rss连接地址，当我运行这个脚本的时候，程序就会通过rss采集这些博客的最新文章，然后整理保存，通过终端输出，我可以通过鼠标点击终端的文章名称，弹出一个浏览器窗口来查看博文。

目前来说，我需要两个主要的依赖，一个书rss的数据采集一个是在终端可以打开指定的连接，根据搜索以及ChatGPT的提示，我找到两个库：

    const Parser = require('rss-parser');
    const opn = require('opn');

其中一个是rss的解析库rss-parser,另一个就是用来在终端打开链接的库。

脚本的代码很简答，node环境下运行即可，代码如下：


    const Parser = require('rss-parser');
    const opn = require('opn');

    const rssFeeds = [
        'https://suiyan.cc/rss',
        'https://hutusi.com/feed.xml',
        'http://www.ruanyifeng.com/blog/atom.xml',
        // 添加更多博客的 RSS 连接地址
    ];

    async function fetchAndDisplayLatestArticles() {
        const parser = new Parser();
        const articles = [];

        try {
            for (const feed of rssFeeds) {
                const feedData = await parser.parseURL(feed);
                console.log(`正在解析${feed}的订阅数据。。。。。。`)
                const oneWeekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000); // 一周前的日期

                // 筛选出发布日期在一周内的文章
                const recentArticles = feedData.items.filter(
                    (article) => new Date(article.pubDate) > oneWeekAgo
                );
                console.log(`${feed}的数据解析完毕！`)
                articles.push(...recentArticles);
            }

            // 按照发布日期倒序排序文章
            articles.sort((a, b) => new Date(b.pubDate) - new Date(a.pubDate));

            console.log('最近一周的文章列表：');
            articles.forEach((article, index) => {
                // console.log(article)
                console.log(`${index + 1}. ${article.title}.${article.pubDate}`);
            });

            const selectedArticleIndex = await askForSelection(articles.length);

            if (selectedArticleIndex !== -1) {
                const selectedArticleLink = articles[selectedArticleIndex].link;
                opn(selectedArticleLink);
            }
        } catch (error) {
            console.error('发生错误：', error);
        }
    }

    function askForSelection(maxIndex) {
        const readline = require('readline').createInterface({
            input: process.stdin,
            output: process.stdout,
        });

        return new Promise((resolve) => {
            readline.question(
                `请输入要查看的文章序号 (1-${maxIndex})，输入 0 退出：`,
                (answer) => {
                    readline.close();
                    const selected = parseInt(answer);

                    if (!isNaN(selected) && selected >= 0 && selected <= maxIndex) {
                        resolve(selected - 1);
                    } else {
                        resolve(-1);
                    }
                }
            );
        });
    }

    fetchAndDisplayLatestArticles();


运行这个脚本：

    "D:\Program Files\nodejs\node.exe" D:\code\node_test\myrss\main.js
    正在解析https://suiyan.cc/rss的订阅数据。。。。。。
    https://suiyan.cc/rss的数据解析完毕！
    正在解析https://hutusi.com/feed.xml的订阅数据。。。。。。
    https://hutusi.com/feed.xml的数据解析完毕！
    正在解析http://www.ruanyifeng.com/blog/atom.xml的订阅数据。。。。。。
    http://www.ruanyifeng.com/blog/atom.xml的数据解析完毕！
    最近一周的文章列表：
    1. 如何使用CSS为博客标题设置彩虹颜色？.2023-07-22 15:27:22
    2. 最终还是决定使用传统的网线来解决千兆速率问题。.2023-07-21 17:08:56
    3. 科技爱好者周刊（第 263 期）：开源软件如何赚钱？.2023-07-21T00:01:19.000Z
    4. 1300M USB双频2.4+5G无线网卡的一些常识和使用技巧.2023-07-20 23:03:50
    5. Python Gui新框架:NiceGui之初体验.2023-07-19 09:37:40
    6. pycharm 正在关闭项目(closing project)无法关闭退出程序的解决方法！.2023-07-18 16:52:53
    7. 速度与优雅：博客性能优化之旅.2023-07-18 15:08:06
    8. 久了，博客主题就会一直做减法.2023-07-17 10:38:01
    请输入要查看的文章序号 (1-8)，输入 0 退出：

终端里输入序号就可以打开相关的博文了，如果把结果保存成为一个HTML文件，并做适当的美化，效果还是不错的，我在琢磨是不是要用python写一个方法，然后生成静态文件，这样就可以在博客里添加一个友联文章集了。


今天闲来无事，想编写一个私人的rss订阅，用来订阅自己喜欢的博客，终端运行后可以采集列表中博客的RSS文章，只关注最近一星期的数据，然后选中文章，通过浏览器打开博文地址浏览。好吧想法有了，那么就开干！

使用JavaScript编写自己的私人RSS订阅程序

博客的页面有些单调，但是又不想使用额外的JS代码来增加页面的加载负担，这个时候你可以考虑一下使用css来增加博客页面的效果，比如彩色博客标题。

## css代码

假设我们的标题是`<h1>博客标题内容</h1>`，这里我可以编写CSS代码如下：

    :root {
        --rainbow-gradient: linear-gradient(
        -90deg,
        #602ce5 0,
        #2ce597 30%,
        #e7bb18 50%,
        #ff7657 70%,
        #45c1ee 90%,
        #2ce597 100%
        );
    }

    h1{
        background-image: var(--rainbow-gradient, #fff);
        background-size: 100%;
        background-repeat: repeat;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-background-clip: text;
        -moz-text-fill-color: transparent;
    }

上边的代码中，我们定义了一个颜色变量，这样方便日后修改颜色值。background-image: var(--rainbow-gradient, #fff);这是一个CSS属性，它设置h1元素的背景图像。var(--rainbow-gradient)是一个自定义变量，它可以设置为任何颜色或图像。如果没有指定值，则默认值为#fff（白色）。

通过上边简单的css代码就可以实现彩色博客标题了，如果给h1添加了伪类选择器h1:hover，就会实现，鼠标指向标题的时候会变成彩色的效果。简单吧，动手来实现一下吧。

博客的页面有些单调，但是又不想使用额外的JS代码来增加页面的加载负担，这个时候你可以考虑一下使用css来增加博客页面的效果，比如彩色博客标题。

如何使用CSS为博客标题设置彩虹颜色？

纠结了一天，几不舍得花几百块换设备，又不想浪费千兆宽带的资源，最终决定采用了原始的布网线方式来解决这个问题。

## 设备概览

千兆光纤入户直接连接的小米路由4a1200M，家里的iPhone、iPad和一些游戏机对于连接速率基本没什么问题，只是一些早些年买的台式机，之前买了一个USB的无线网卡，但是路由器在可客厅，电脑房与路由器之间有两堵墙，这使得无线连接的速率大打折扣，后来买了中继勉强可以，但是当时的宽带只有100M入户，并没有考虑到之后会升级到千兆。

## 一定要换

这次升级了千兆入户的宽带，如果继续使用之前的网络链接设备，电脑房实际只能达到200M的连接速率，这个我很不满意，既然都升级千兆了，如果只当200M使用那真是太可惜了！但是如果更换全套无线设备又得几百大洋，而且旧设备没人要扔了可惜还不环保。最终经过探讨，我自己的电脑改成传统网线接入，5G的无线网卡给老婆用，她现在的是可怜的100M无线网卡，实际下载速度只有1-2M,这也太。。。。她到时不挑。


## 等待中

坑多多上买了20米的六类网线和网线免钉固定，这样等设备到了，直接布线搞定，期待中。

纠结了一天，几不舍得花几百块换设备，又不想浪费千兆宽带的资源，最终决定采用了原始的布网线方式来解决这个问题。

最终还是决定使用传统的网线来解决千兆速率问题。

入手了一个USB的双频无线网卡，但是插到电脑USB上后，速度可真是一般了，家里升级了1000M宽带，但是下载还不到3M的速度，理论上也就是20M的宽带啊？这不科学啊？赶紧找了找资料调试了一下，下载速度终于提上了来了！

## 基础资料

关于1300M 5G 双频无线网卡的速度：2.4G传输速率为400M，5.8G传输速率为867M。这个是两个加起来的速度，并不是说你的网卡有1000M的传输速率。所以某些3000M的设备，可以理解为：600M+2400M（大约数值），所以不要看总数。

关于下载速度，理论来说：100M的下载速度是12M左右，可以用此作为基数来计算。这个假设设备没有任何干扰的情况下，就是理论速度了，实际上都会有干扰，比如一堵厚厚的墙和频道的干扰。

## 使用技巧

1. 你用5G的网卡，一定要配5G的路由器，不然得话，只能用2.4G的频道了，那么下载速度会大打折扣。
2. USB网卡一定要插在USB3.0的接口上，2.0的速度会慢很多，蓝色接口的USB3.0,黑白的是2.0
3. 如果设备和路由器之间有墙，会影响传输速率的，会达不到理论上的867M，我就隔了两堵墙，变成了585M，偶尔还会变成520M。
4. 调整好路由器的信道，可以优化传输速率，2.4G频段一般常用的不重叠的信道是1、6、11，5.8G频段信道常用的有149、153、157、161、165，5.2G频段信道常用的有36、40、44、48，5G频段信道建议优先使用149与48频段。
   
## 总结

所以说，以目前的1300M的路由和1300M的无线网卡，家里就是升级了千兆光纤也是没什么用的，只有把设备都升级到3000M吧，理论上就可以享受千兆网速的快乐了，我为什么说是理论上？你想想哪些网站能财大气粗的租用千兆网络？尔等的主机宽带是多少？升级都是运营商的套路而已，大家视情况决定吧。有一种情况除外，那就是土豪，请随意，抱歉耽误土豪大哥大姐的时间了。

## 参考资料

[网速快一倍 这样设置让电脑优先连接Wifi的5G信号](https://baijiahao.baidu.com/s?id=1711855034317930542&wfr=spider&for=pc)

[小米路由器3G如何解决USB3.0 5G WiFi速度慢的问题](https://blog.csdn.net/eyyhappy/article/details/79247483/)

[干货 | 秒涨知识 —— 无线网络经常太慢？这样设置信道网速最快](https://zhuanlan.zhihu.com/p/583620624?utm_id=0)

[知乎的回答：为什么我家千兆宽带，我电脑装了无线网卡却只有200兆？](https://www.zhihu.com/question/591716871/answer/2952395690)

入手了一个USB的双频无线网卡，但是插到电脑USB上后，速度可真是一般了，家里升级了1000M宽带，但是下载还不到3M的速度，理论上也就是20M的宽带啊？这不科学啊？赶紧找了找资料调试了一下，下载速度终于提上了来了！

1300M USB双频2.4+5G无线网卡的一些常识和使用技巧

对于使用python的朋友，对于python的gui总是有一种不满意的情绪，确实，python下边没有什么太出色的GUI框架，或多或少都有些不足或是遗憾吧，不过这阵子NiceGui逐渐的火起来了，赶紧试试吧.

## 安装

NiceGui的安装很简单：

    pip3 install nicegui

然后，我们创建一个`main.py`的python文件，复制如下代码：

    from nicegui import ui
    from nicegui.events import ValueChangeEventArguments


    def show(event: ValueChangeEventArguments):
        name = type(event.sender).__name__
        ui.notify(f'{name}: {event.value}')


    ui.button('Button', on_click=lambda: ui.notify('Click'))
    with ui.row():
        ui.checkbox('Checkbox', on_change=show)
        ui.switch('Switch', on_change=show)
    ui.radio(['A', 'B', 'C'], value='A', on_change=show).props('inline')
    with ui.row():
        ui.input('Text input', on_change=show)
        ui.select(['One', 'Two'], value='One', on_change=show)
    ui.link('And many more...', '/documentation').classes('mt-8')

    ui.run()


然后运行:

    python main.py

这时候会打开一个浏览器窗口，对，NiceGui是基于web的图形界面，她的后端是fastapi，前端有tailwindcss加特，界面效果还是很不错，而且风格是google Material-UI，眼前一亮吧！

## 总结

NiceGUI的代码简洁实用，事件接口也很直观，符合python的一贯风格，对于一些有GUI需求的应用可以尝试一下，上手简单方便，快试试吧。

对于使用python的朋友，对于python的gui总是有一种不满意的情绪，确实，python下边没有什么太出色的GUI框架，或多或少都有些不足或是遗憾吧，不过这阵子NiceGui逐渐的火起来了，赶紧试试吧.

Python Gui新框架:NiceGui之初体验

今天下载了最新版的pythonIDE PyCharm的最新版2023社区版，本打算体验一下，结果退出程序的时候，有一个窗口，正在关闭项目 然后就卡在哪里不动了，真是酸爽。

## 解决方法

出现这类无法解决的问题，当然是google和百度搜索解决了，结果目前搜索引擎给出的答案都是改着改那的，但是很不幸，每一个好使的！！

终极解决办法，请看好：

打开这个页面，[pycharm 其他版本下载](https://www.jetbrains.com/zh-cn/pycharm/download/other.html)，选择2022.3.3的对应系统版本下载，重新安装即可解决！2023的版本都会出现这个无法关闭的窗口，暂时先不要用2023社区版了，等待新版本吧。

## 总结

对于软件并不是最新版的就是最好的，所以请谨慎使用新版软件，新功能与新BUG同在。

今天下载了最新版的pythonIDE PyCharm的最新版社区版，本打算体验一下，结果退出程序的时候，有一个窗口，正在关闭项目 然后就卡在哪里不动了，真是酸爽。

pycharm 正在关闭项目(closing project)无法关闭退出程序的解决方法！


由于需要改进LCP 问题：超过了 2.5 秒（桌面设备）这个问题，花了点时间把最近做的这个主题进行了一些性能的优化，嗯，优化后的页面打开速度还真是不错，优化博客的主题大概是每个博主必经之路吧。

## 自己挖坑自己填

前一阵子使用tailwindcss+daisyUI做了个博客的新主题，把构思的功能不管三七二十一都给上了，导致页面的加载速度很慢，以至于自己打开都有觉得有点不耐烦了，再加上google的邮件提示，立马觉悟了，这是不改不行了。虽说部署与Github，但是页面性能优化的好，除了网络原因连不上的话，只要连上了打开的速度还是可以的，但是前一阵子忙于琐事，对于慢的事却忽略了，最终痛下决心改之。

## 性能优化的细节

根据google页面加载工具给出的提示，做出了一下几点修改：

1. 移除了jQuery，把jq的相关的博客功能代码都使用原生的JavaScript重写了，把依赖jq的库都去掉了，所有依赖jq的功能都使用JavaScript原生代码重写。
2. 优化了giscus评论插件的加载，这样打开页面不会自动加载评论，点击按钮后在加载评论页面，这样大大提高了页面的加载速度。
3. 优化了HTML的DOM结构，精简了一些无用的代码，修复了一些代码的错误，删除了一些重复功能代码，优化了站点导航。
4. 重写了站内的搜索，本来想撤掉搜索了，但是今天自己在博客里找东西找了半天，最后还是添加上了。
5. 重新使用工具进行LCP测试，页面都达到了95分+，数值很满意，页面打开速度明显的快多了！

## 一些取舍

本来把搜索和评论都撤掉了，总觉得没啥人评论，留着也是影响页面加载速度，但是考虑了一下，万一有人看我不顺眼，找不到发泄的地方，再给憋出病了就不好了，所以还是加上吧。评论这玩意一定要看开，千万不要太在意那些恶意的评论，看到一定要及时删除，我可不想像某个博主那样，评论事件都过去了个把月了还在念念不忘。

对于首屏大图，暂时还是不添加了，没啥用，你以为好看那是你自己的审美，别人没准看了一眼就会说：这啥破玩意！然后页面直接关了。而且首屏大图太影响阅读体验了，当然你要是图片类型的博客，我建议大！图一定要更大！哈哈哈。

希望大家愉快的写博客，愉快的交流。

由于需要改进LCP 问题：超过了 2.5 秒（桌面设备）这个问题，花了点时间把最近做的这个主题进行了一些性能的优化，嗯，优化后的页面打开速度还真是不错，优化博客的主题，大概是每个博主必经之路吧。

速度与优雅：博客性能优化之旅

昨天晚上登录了google Search Console，就看到站内留言，内容大致是：展开合作 展开合作 我们正在验证您对核心网页指标问题。额？我犯了什么错误？

## 起因

google核心网页指标是什么？简单来说，你的网站被收录后，google会对你的核心页面进行一个评估，这个分数是100分，当你的页面分数不足90分的时候，就会提示你改进和欠佳。这次我的问题：需要改进LCP 问题：超过了 2.5 秒（桌面设备）。至于这个LCP：Largest Contentful Paint 最大内容绘制 (LCP)，显然，我的页面绘制时间超过了google的要求。

这玩意有什么用？LCP时间过长就是打开页面加载的时间太长了！这会影响用户的首次打开体验，很有可能用户不厌其烦了，太慢了，然后就会直接关掉这个页面，google就会搜集这个信息，因为他不希望把这种页面展示给搜索结果，所以核心网页如果出现分数值偏低，google通知你修改或是欠佳，那么你的网页展现在搜索的次数会大大降低的。

那么这个数据的搜集是通过一个月的时间的平均值，这阵子我也发现了一些弊端，比如页面打开加载时间过长，跳出率太高等问题，自己对页面的打开速度都明显的不满意，这个加载打开页面慢的问题不能简简单单的怪罪于网络或是服务器，这里有很多细节需要修改，还好google提供了一些工具方便站长查找并修改问题。

## 解决

其实对现在的主题也不是很满意，主要是觉得不流畅，我一直是以为把静态页面托管于Github pages造成的，直到这次我大刀阔斧的删减很多以来之后，这页面的打开速度终于可以接受了。首先精简JavaScript的相关库类，把jQuery和其相关的库类都删除了，jq的功能实在换不掉的就用JavaScript重构了，反正必须删掉jQuery。删掉了一些效果库，删掉了图标字体库，精简了HTML、JavaScript、css的一些代码，然后发布页面，拿工具进行测试，请看结果：

![测试结果](https://suiyan.cc/assets/images/2023/pagespeed.jpg)

再这之前，我的博客页面测试分数可是很低的，感兴趣的可以拿自己的页面去测试一下，我随机挑选了友情链接里的博客，基本上都是不合格的。当然这个大家也不要看的太重，随意就好。

## 总结

对于LCP的分值如果讨论起立会有很多内容，影响分值的因素也很多，当然流畅的网络和高水平的库和框架都是非常重要的，还有就是K值太高的图片也会影响的。

可能每个博主都折腾过博客的主题，但是大多数最终都会走向一个极简畅快的主题风格，对博客主题做减法就像人生一样，抛去包袱轻装上阵或许只有经历过的人才会懂。

## 相关链接

[移动设备适合性测试](https://search.google.com/test/mobile-friendly?hl=zh_CN)

[PageSpeed Insights](https://pagespeed.web.dev/)

昨天晚上登录了google Search Console，就看到站内留言，内容大致是：展开合作 展开合作 我们正在验证您对核心网页指标问题。额？我犯了什么错误？

久了，博客主题就会一直做减法


今年夏天热的早温度也高，东北这边很早就步入了35°+，感觉很热，热的让人焦虑。

前几天，孩子的老师安排了正文，按照以前的步骤，我会带孩子找素材，让孩子写出完整的正文然后我来修改，打出电子版修改后交给老师。但是这次我却下意识的改变了这些过程，在网上搜索了相关资料和视频喂给孩子（给孩子看），她自己写出征文，我习惯的用iPhone拍照识别文字，扔给ChatGPT润了一下，然后交给老师。

我知道，会有很多家长使用ChatGPT，也会有很多人不会用。ChatGPT节约了我很多的时间，但是也给我带来很多的焦虑，当然这已经大部分人的焦虑，而且有些人连焦虑都没来得及就。。。

我时常和孩子说AI会画画会写文章敲代码，孩子只是觉得“她”很厉害，我告诉孩子一定要努力，不仅要和身边的人比还要和AI比。确实，这一代人和他的孩子们，见识了太多的科技和人工智能，孩子的学习、我的工作、我的爱好、我的生活，AI无处不在。

早些年我学编程的时候，那些讲课的大佬们都说要用记事本，不要用IDE提示，现在的培训教你提示词、炼丹。AI改变了生活，也改变了这个世界的生存方式，有的时候确实焦虑，不过人生还得继续，要么适应要么淘汰，适者生存，没得选择。

今年夏天热的早温度也高，东北这边很早就步入了35°+，感觉很热，热的让人焦虑。

七月的焦虑

之前在html中使用clipboard.js是很简单的，引用CDN，然后new一个clipboard对象，绑定DOM就可以搞定一键复制文本了。这次要在react中使用，所以原来的方式就不行了，来看看react中如何使用clipboard.js。

## 安装clipboard.js

    npm install clipboard --save

## react中使用

首先还是dom的绑定：

    
    <textarea id="bar">Mussum ipsum cacilds...</textarea>

    
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
        Cut to clipboard
    </button>

然后再组件内初始化clipboard.js

    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

这里官方给出的案例代码，分别列出了复制成功和失败的处理方法，就是这么简单。


[clipboardjs官方地址](https://clipboardjs.com/)

之前在html中使用clipboard.js是很简单的，引用CDN，然后new一个clipboard对象，绑定DOM就可以搞定一键复制文本了。这次要在react中使用，所以原来的方式就不行了，来看看react中如何使用clipboard.js。

在react中使用复制插件clipboard.js

今天需要再react组件内渲染一段HTML代码，但是直接复制到组件内渲染会被当做HTML渲染出HTML的dom结构，我的本意是要把这段HTML代码输出为字符串，记录一下解决过程。

## 问题重现

在return中需要输出一段HTML代码的字符串：

    在body中添加canvasHTML标签:<canvas id="matrix"></canvas>

但是这段代码会把HTML代码直接渲染出dom结构了。

## 解决方法

如果你想在React中将HTML代码作为字符串处理，可以使用DOMPurify库来进行安全的HTML代码转义。DOMPurify库可以过滤和清理HTML代码，防止潜在的跨站脚本攻击（XSS）。

首先，你需要安装dompurify库。可以使用npm或者yarn执行以下命令：


    npm install dompurify

或者

    pnpm install dompurify

安装完成后，你可以按照以下步骤在React组件中使用DOMPurify：


    import React from 'react';
    import DOMPurify from 'dompurify';

    function App() {
    const htmlString = '<p><canvas id="matrix"></canvas>';
    const sanitizedHtml = DOMPurify.sanitize(htmlString);

    return (
        <div>{sanitizedHtml}</div>
    );
    }


在上面的例子中，我们导入了DOMPurify库并将HTML代码字符串传递给sanitize函数。sanitize函数会清理和过滤HTML代码，确保其中不包含恶意代码。然后，我们将经过处理的HTML代码字符串作为文本内容渲染在React组件中，而不会被解析为HTML。

使用DOMPurify库可以帮助确保安全地处理HTML代码字符串，并防止潜在的安全问题。

今天需要再react组件内渲染一段HTML代码，但是直接复制到组件内渲染会被当做HTML渲染出HTML的dom结构，我的本意是要把这段HTML代码输出为字符串，记录一下解决过程。

react中如把HTML代码转成字符串进行渲染？

今天在react useEffect()中有一个function需要防抖，于是乎就install了lodash库，但是直接在useEffect()中使用却没有效果，经过一番查找，最终解决了这个问题。

## 问题现场

安装引入：

    import { useState, useEffect } from "react";
    import _ from "lodash";
    useEffect(() => {
        _.debounce(mx, 500); //防抖
    }, [mc]);

mx是一个函数，但是防抖后不但没有效果，mx这个函数也无法正常执行了，这跟useEffect运行机制有一定关系。
后来经过修改，mx函数是可以执行了，但是mc这个state中的数值又无法同步了。

## 解决问题

修改代码如下：


    useEffect(() => {
        const debounceMX = _.debounce(() => {
        mx();
        console.log(mc);
        }, 500);
    
        debounceMX();
    
        return () => {
        debounceMX.cancel();
        };
    }, [mc]);

在这个修改后的代码中，debounceMX函数被定义在useEffect的内部，并且mc作为useEffect的依赖项。当mc发生变化时，useEffect将会重新执行，导致debounceMX函数的重新创建和调用。通过将debounceMX.cancel()作为useEffect返回的清理函数，可以确保在组件卸载时取消防抖函数的执行，以避免潜在的问题或错误。

经过多次的修改，最终上边的代码完美的解决了不能防抖以及数据不能同步的问题。



今天在react useEffect()中有一个function需要防抖，于是乎就install了lodash库，但是直接在useEffect()中使用却没有效果，经过一番查找，最终解决了这个问题。

react useEffect()中使用lodash库中的防抖debounce

额，今天在编写一段简短的测试代码，想在组件加载的时候弹出一个alert提示，但是刷新的时候会弹出两次alert提示？只能是奇怪了！研究了半天终于找到了解决的办法。

## 事故现场


    import { useState, useEffect } from "react";

    function App() {
    const testCode = `alert('11111')`;

    function test() {
        alert('1111');
    }

    useEffect(() => {
        test();
    }, []);

    return (
        <div id="app" className="container mx-auto grid justify-normal p-8">
        <canvas id="matrix"></canvas>
        {/* 在预览区域显示生成的HTML代码 */}
        <div dangerouslySetInnerHTML={{ __html: testCode }}></div>
        </div>
    );
    }

    export default App;


这段代码中，test();会在页面刷新时执行两次，百思不得其解，询问了ChatGPT给出的答案是：如果您希望在开发模式下仅执行一次 useEffect，可以使用 useEffect 的第二个参数，即依赖项数组。通过指定一个空数组 [] 作为依赖项，您可以告诉 React 仅在组件挂载和卸载时执行一次 useEffect。但是这个回答显然没有解决问题。

## 解决方法

后来在掘金搜到了两篇文章，详细介绍了useEffect背后的原理，同时也找到官方给出的解释，其实很简单，只要修改main.jsx中的代码即可：

    <React.StrictMode>
        <App />
    </React.StrictMode>,

修改如下：


    <App />

嗯，就是这么简答，究其原因是因为使用的手脚架应为采用react的严格模式StrictMode，我们删除StrictMode就好了。

## 相关链接

(useEffect重复调用两次的坑)[https://juejin.cn/post/7105652180501135367]

(Synchronizing with Effects)[https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development]


额，今天在编写一段简短的测试代码，想在组件加载的时候弹出一个alert提示，但是刷新的时候会弹出两次alert提示？只能是奇怪了！研究了半天终于找到了解决的办法。

react useEffect() 为什么在开发模式的时候会执行两次？

15年底，买了一台MacBookPro 15.6寸的笔记本，或许每个程序员都会有购买Apple设备的冲动，自从投身到Apple的阵营之后，平板、手机、老婆的平板和手机都换成了Apple，但是终有一天，我发现我也会对Apple有了厌倦之意。

## 为什么要买mbp？

怎么说呢？每个程序员可能都会被忽悠，那些年我也曾不断的从网上看到一些信息：每个程序员都应该有一台MacBook，程序员必备等言论，当时我使用者一台Acer的笔记本，好像是i3 4代的？由于是机械硬盘，慢的我每天都是抓耳挠腮。后来受不了了，直接去商场提了一台mbp15.6，当时还是很兴奋了一段时间，早些年身边使用mbp的人少到凤毛麟角，有什么问题也得去网上查，从win转到macOS也用了个把月时间吧，逐渐的适应了，而且体验感不错。

## 何时开始嫌弃？

18000买不到几千块4090的快乐，对于Mac，我只能这样评价。大约2020年的夏天，我发现我的mbp的盖子总是盖不严，也没在意，直到有一天，发现键盘都被拱起来了盖子也合不上了，才开始着急的去网上搜索这是怎么回事，同时收到了Apple发来的免费电池更换的售后邮件，但是我这边本地还没有条件更换，需要到其他城市去更换，我算了一下，来回路费都够自己买块电池自己更换了，而且不换电池会有发生爆炸的危险，索性自己在天猫买了同型号的电池和螺丝刀，心惊胆寒的自己更换了电池，还好一切顺利。

硬件不争气，系统也不咋地，Apple M1芯片的设备出来之后，系统更新了两个版本，我寻思更新一下吧，因为有些软件不更新是无法使用的，所以决定更新系统版本，但是，更新后我发现系统卡的一批，根本没法用，又是在网上搜了教程，备份数据退回版本，折腾的够呛。

## 忍无可忍

前几天，电池又鼓起来了，盖子也盖不上了，一来气就把电池给拆了，直接插电使用！但是感觉系统要比平时慢了很多，一搜，mbp没有电池的话会锁CPU的频率导致机器变卡，看来这个老家伙的寿命到头了，爱回收估价1200，连带着之前的acer（360？）一起都卖给了爱回收。

## 回归Windows

同时自己又在网上购买了一台3060 12G 32G内存的机器，这下感觉写代码太奢侈了，而且还跑了AI渲染了很多图，blender也可以继续玩了，没事还可以剪辑点视频啥的，如今的Windows变化也很大，至少和七年前不太一样了，祈祷吧，希望这台机器能经受起我的折腾。如果不是经常要带笔记本出去，真的没有不要买个笔记本，而且，有没有Apple mbp对你的编程真的影响不大，如今的设备便宜样多，大家的选择不必再千篇一律，买一台生产力才是最好的选择。




15年底，买了一台MacBookPro 15.6寸的笔记本，或许每个程序员都会有购买Apple设备的冲动，自从投身到Apple的阵营之后，平板、手机、老婆的平板和手机都换成了Apple，但是终有一天，我发现我也会对Apple有了厌倦之意。

七年之痒！别了我曾深爱的MacBookPro

打算把之前一个vue的小应用用使用react+Material UI重构一下，这里记录一下React+Material UI开发环境的快速搭建。

## create react

在webStorm,可以直接创建一个全新的vite react项目，如果使用vscode可以在终端使用如下命令：

    npm create vite@latest my-project -- --template react
    cd my-project

##  Material UI installation

`cd my-project`进入到项目之后，添加material UI 到项目中:

    npm install @mui/material @emotion/react @emotion/styled

也可以使用:

    pnpm i @mui/material @emotion/react @emotion/styled


安装字体：

    npm install @fontsource/roboto

或：

    pnpm i @fontsource/roboto

安装icons:

    npm install @mui/icons-material

或:

    pnpm i @mui/icons-material

修改`src/index.jsx`:

    import { useState } from 'react'
    import Stack from '@mui/material/Stack';
    import Button from '@mui/material/Button';

    function App() {
    const [count, setCount] = useState(0)

    return (
        <Stack spacing={2} direction="row">
        <Button variant="text">Text</Button>
        <Button variant="contained">Contained</Button>
        <Button variant="outlined">Outlined</Button>
        </Stack>
    )
    }

    export default App


终端运行：

    pnpm i

当所有以来下载完毕后运行:

    pnpm run dev


浏览器打开：http://localhost:5173/, 发现已经成功引入mui的按钮了。

打算把之前一个vue的小应用用使用react+Material UI重构一下，这里记录一下React+Material UI开发环境的快速搭建。

前端React+Material UI开发环境的快速搭建

对于将博客部署于Github的博主来说，每次写完日志或是对博客做了些改动，都会同步远程的Github仓库，重复的在终端执行git XXXX的命令，国内连接Github很不稳定，所以有时需要重复很多次，很麻烦的一说，今天我们就要解决掉这个痛点的。

## 整理命令

一般部署与Github的博客进行同步的话，需要的命令是很少的，例如`git add git commit git push`三条命令就可以搞定一个博客的更新了。
那么我们的目的就是在网络不通畅连接Github不稳定的时候，重复这几条命令，直到同步远程的仓库。

## 编写代码

这里我使用Python终的subprocess.run()来执行这些git的命令行。

subprocess.run() 是 Python 中用于运行外部命令的函数之一。它是 subprocess 模块提供的一个高级接口，用于替代较低级的函数 subprocess.call()。

subprocess.run() 函数执行指定的命令，并等待命令完成执行。它提供了很多选项来控制命令的执行方式，并且可以获取命令的输出结果、错误信息和执行状态。

首先，我们需要进入到需要更新的仓库的根目录，然后再执行这一系列的git命令。

代码很简单，就不解释了，具体可以查看代码的注释：

    import os
    import time
    import subprocess

    def sync_to_remote_repo(path):
        # 切换到指定目录
        os.chdir(path)

        while True:
            # 1. 添加所有更新进入git的本地仓库
            subprocess.run(["git", "add", "."])

            # 添加更新信息
            subprocess.run(["git", "commit", "-m", "更新博客"])

            # 2. 同步到远程仓库
            while True:
                result = subprocess.run(["git", "push", "origin", "master"])
                if result.returncode == 0:
                    # 如果成功同步到远程仓库，退出内部循环
                    break
                else:
                    # 如果同步失败，等待一段时间后继续重试
                    time.sleep(10)

            # 检查上一步操作的返回值
            if subprocess.run(["git", "rev-parse", "--quiet", "--verify", "HEAD"]).returncode == 0:
                # 如果成功同步到远程仓库，退出外部循环
                break
            else:
                # 如果同步失败，等待一段时间后继续重试
                time.sleep(10)

    # 示例用法
    directory_path = "/path/to/your/directory"
    sync_to_remote_repo(directory_path)



## 总结

这样我们以后就可以使用这个方法来自动更新博客文章和博客的改动了，即便网络不好，也不必重复的输入git push XXX，只需要运行上边的代码，等待他重复执行git命令直到更新同步Github仓库。

对于将博客部署于Github的博主来说，每次写完日志或是对博客做了些改动，都会同步远程的Github仓库，重复的在终端执行git XXXX的命令，国内连接Github很不稳定，所以有时需要重复很多次，很麻烦的一说，今天我们就要解决掉这个痛点的。