之前创建了一个Python和JavaScript的学习交流群，有好几年了吧？这几天在QQ搜索Python是不知怎的排名突然靠前了一点，导致很多新人加了进来，一些新手的提问真是让人无语。。。。我以为都是AI元年了，怎么还会有这么多不会提问的孩子呢？

## 为什么要提问？

都是从新手过来的，每个人在编程的学习过程中都会遇到许许多多的问题，遇到问题如果不能解决，在编程过程中是很沮丧的事情，新手会觉得不爽，进而需要尽快的解决这个问题，以至于百度Google搜索，各种群里提问，然而效果并不明显，不是搜不到就是没人回答。

对于新手提问，我觉得最重要的要抓住问题的根本，一个好的问题，当你完整的把问题叙述出来的时候，你几乎就会无限的接近答案了！好的问题可能就是答案的本身。你要提问，是为了解决一个问题，而不是让别人帮你调试、完成编写代码。

## 提问的技巧

1. 先准备问题，把问题组织好，例如关键部位代码片段（切记不要把几百行代码都扔进去，没人看的。），错误代码以及提示。
2. 整理问题组织文字，要表达的专业清楚，而不是：这咋运行不了？没反应？打不开？等。
3. 适当的时间，例如错开大佬们的工作高峰时间，在一些闲暇的时间提问。
4. 记得感恩，别人帮助了你，记得感谢，而不是悄悄的隐身。
5. 得到问题后，要积极验证，有的时候答案不一定正确，如果正确，要对比自己的代码看看有哪些不同。



## 一些网络上的提问技巧

0. 提问之前，建议先试着自己去搜索解决，不要当伸手党。
1. 一定要提供代码源代码文本，不要只贴图片。
2. 一定要贴出完整报错信息。
3. 操作系统，是mac，还是Linux，还是windows。
4. Python 2还是Python 3。
5. 一定要描述清楚，提出问题前，看看自己写的是不是清楚明白。


## 求助于AI

现在的AI何等的强大，对于一些编码问题的解决我可以说要比你遇到的大佬强很多的，所以，有的时候可以尝试求主与AI，贴出代码，阐述你的问题，大部分AI都会很好的解决你的问题的。



之前创建了一个Python和JavaScript的学习交流群，有好几年了吧？这几天在QQ搜索Python是不知怎的排名突然靠前了一点，导致很多新人加了进来，一些新手的提问真是让人无语。。。。我以为都是AI元年了，怎么还会有这么多不会提问的孩子呢？

编程新手学习过程中如何更好的提问？

博客页面不仅需要简介大方漂亮美观，还需要一些动态的效果，如果引入动态的GIF图片其大小会影响页面的加载速度，这里推荐一个JavaScript的打字机效果库Typed.js，其漂亮的打字机效果和简单的使用方法，值得博主拥有。

## 安装

CDN

    <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>

NPM

    npm install typed.js

Yarn

    yarn add typed.js

## 使用方法

引入cdn之后，创建一个DOM用来展示文字，在JavaScript中可以设置打字机的效果参数。

    
    <span id="element"></span>
    
    <script>
        var typed = new Typed('#element', {
        strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
        typeSpeed: 50,
        });
    </script>

在这个页面的最底部，可以看到我添加的打字机效果，我的配置参数如下：

      <script>
            const typed = new Typed('#typed', {
            strings: ['这里是你要输出的文字','hello world'
            ],
            typeSpeed: 250,
            backSpeed: 100,
            backDelay: 100,
            startDelay: 1000,
            loop:true
        });
      </script>

具体的参数，这里就不在介绍了，大家可以查看官方的文档是实例，自己手动改改就能了解这些参数的含义了。

## 相关网址

[Typed.js DEMO](https://mattboldt.github.io/typed.js/)

[Typed.js DOC](https://mattboldt.github.io/typed.js/docs/class/src/typed.js~Typed.html)

博客页面不仅需要简介大方漂亮美观，还需要一些动态的效果，如果引入动态的GIF图片其大小会影响页面的加载速度，这里推荐一个JavaScript的打字机效果库Typed.js，其漂亮的打字机效果和简单的使用方法，值得博主拥有。

Typed.js 一款有意思的网页打字机效果库

由于换了Windows系统，之前的代码都一并拷贝过来了，今天运行了一个fastapi写的程序，结果报错了，这里分享一下解决的过程。

## 错误代码

运行fastapi之后就提示如下代码：

    ERROR: [WinError 10049] 在其上下文中，该请求的地址无效。

检查了一下，并没有发现任何错误，依赖也都安装了，百度搜了下说是IP或是端口不正确，忽的想起刚换的机器，IP地址分配还是随机的，当时fastapi里的启动地址是写死的，所以找到了问题的根源就好办了。

## 解决问题

解决问题应该是两种方法：

1. 修改程序配置里的IP为当前的环境的IP。
2. 修改Windows的IP未固定IP，这里选择第二种。

Win0 修改本机IP地址未固定IP:
网络和共享中心--更改适配器设置--属性--Internet 协议版本 4--输入相应的 IP 地址和 DNS 地址。

修改后，程序即可正常启动了。

由于换了Windows系统，之前的代码都一并拷贝过来了，今天运行了一个fastapi写的程序，结果报错了，这里分享一下解决的过程。

解决错误 ERROR [WinError 10049] 在其上下文中，该请求的地址无效。

这几天体验了Stable Diffusion的强大，被AI绘画给惊艳到了，Stable Diffusion，是一款开源免费的AI动画生成工具，如果机器配置还可以，推荐你试试，操作整体来说很简单。

## 安装和教程

如果你时首次体验AI绘画，推荐观看[Nenly同学的B站第一套系统的AI绘画课！](https://space.bilibili.com/1814756990),绝对是AI绘画的良心教程，这套教程包括了安装、基础使用、模型下载简装等一系列的教程，而且UP主目前还在持续更新教程，内容精彩不容错过。

## 一些模型下载站

<a href="https://huggingface.co/" target="_blank">抱脸</a> -- 模型下载，很全，几乎所有模型都能在这里下载到。

<a href="https://www.liblibai.com/" target="_blank">哩布哩布AI</a> -- 模型下载，国内的模型下载，不用翻墙。

<a href="https://tusi.art/" target="_blank">吐司</a> -- 模型下载，同上边差不多，国内的模型下载，不用翻墙。

## 提示词

<a href="https://wolfchen.top/tag/" target="_blank">NovelAI tag生成器</a> -- NovelAI tag生成器，用着还可以的。


## 总结

目前就发现这些资料，当然还有C站，只不过访问不太方便，这里就没写，有条件可以去看看，长期记录更新，也欢迎大家补充。


这几天体验了Stable Diffusion的强大，被AI绘画给惊艳到了，Stable Diffusion，是一款开源免费的AI动画生成工具，如果机器配置还可以，推荐你试试，操作整体来说很简单。

Stable Diffusion 相关教程与模型的记录

今天发现SD ControlNet openpose竟然报错无法使用，报错信息：

    urllib.error.URLError: <urlopen error [WinError 10054] 远程主机强迫关闭了一个现有的连接。>

这里分享一下解决这个错误的过程。

## 解决办法

点击按钮识别pose发现提示错误，然后查看控制台信息，查找如下信息：

    2023-07-02 10:26:42,400 - ControlNet - INFO - Preview Resolution = 512
    Downloading: "https://huggingface.co/lllyasviel/Annotators/resolve/main/hand_pose_model.pth" to D:\AIdraw\sd-webui-aki\sd-webui-aki-v4.2\extensions\sd-webui-controlnet\annotator\downloads\openpose\hand_pose_model.pth

这里的意思是要在远程网址出下载一个文件，但是后边就报错了，估计是网络的原因无法下载，这里不要慌，我们复制上边需要下载的文件地址，使用迅雷等下载软件，先下载下来，然后，手动复制到下边制定的目录中即可解决问题，记得下边的地址中，需要手动添加一些目录。

第二种错误是模型安装好了，点击按钮也可以识别pose的骨架，但是生成图片的时候和pose没有任何关系，经过我多次排查，是由于预处理器没有安装到指定的目录，
sd-webui-aki-v4.2\extensions\sd-webui-controlnet\annotator\downloads
这个目录下，如果是空的或是文件缺少，都会造成无法识别POSE，我在网上找了一份'可选controlnet1.1\预处理器'，把这下边的目录和文件都拷贝到上边的目录，问题解决。可选controlnet1.1这个文件包我在哪里下载的我还给忘了，大家自己搜搜。

大约pose的模型和另外几个模型都需要手动下载，在控制台的报错信息中即可找到下载和复制地址，按路径复制好后问题即可解决。

今天发现SD ControlNet openpose竟然报错无法使用，这里分享一下解决这个错误的过程。

Stable Diffusion ControlNet openpose 报错无法使用

对于一些超小型且数据临时并不重要的web应用，可以考虑把数据存储到浏览器中，使用浏览器API：localStorage

> localStorage 是一种 Web API，可以在 Web 浏览器中存储和检索数据。它允许网站将数据存储在用户的本地浏览器中，而不是在服务器上。这意味着即使用户关闭浏览器或离开网站，数据也将保留在本地存储中，并在用户返回时仍然可用。

## localStorage的使用

localStorage是浏览器API，所以直接调用接口即可，例如在待办事项中的数据是一个数组，我们可以把它专为JSON存储到localStorage中，方便随时调用，大致的代码如下：

## vue

    const todos = ref(JSON.parse(localStorage.getItem("mytodos") || "[]")); // 整个项目的数据数组
    // 状态持久，当数据发生变化时就会重新存储到LocalStorage
    watchEffect(() => {
    localStorage.setItem("mytodos", JSON.stringify(todos.value));
    });

## react

    const [todos, setTodos] = useState(JSON.parse(localStorage.getItem('myreacttodos')) || []);// 存储待办事项

    // 状态持久，当数据发生变化时就会重新存储到LocalStorage
    useEffect(()=>{
        localStorage.setItem('myreacttodos',JSON.stringify(todos))
    },[todos])


## 总结

二者的代码相差不多，用法相同，请对号入座，选择使用。

对于一些超小型且数据临时并不重要的web应用，可以考虑把数据存储到浏览器中，使用浏览器API：localStorage

在react或vue中使用localStorage存储数据

闲来无事，琢磨着体验一下react吧，花了一天的时间看了看react的官方文档，然后能照着以前用vue写的ToDo使用react重构了一遍，这里简单记录并总结一下学习过程。

效果如下：

![矩阵头像](https://suiyan.cc/assets/images/2023/reactToDo.png)

## 环境搭建

关于React+Vite+TailwindCSS+daisyUI的环境搭建之前写过一篇博客，这里就不在重复了，传送门：<a href="https://suiyan.cc/2023/20230626075924.html" target="_blank">前端React+TailwindCSS+daisyUI开发环境的快速搭建</a>,环境的搭建很简单的，大家看看就能明白了。

## 编写ToDo

ToDo的核心就是把一个存有待办事项的数组通过react渲染出来，增删改查就是对数组的一些最基本的操作的操作,但是这些操作由于普通的数组操作有所不同，我们来看看官方给出的解释：

> 在 JavaScript 中，数组只是另一种对象。同对象一样，你需要将 React state 中的数组视为只读的。这意味着你不应该使用类似于 arr[0] = 'bird' 这样的方式来重新分配数组中的元素，也不应该使用会直接修改原始数组的方法，例如 push() 和 pop()。

> 相反，每次要更新一个数组时，你需要把一个新的数组传入 state 的 setting 方法中。为此，你可以通过使用像 filter() 和 map() 这样不会直接修改原始值的方法，从原始数组生成一个新的数组。然后你就可以将 state 设置为这个新生成的数组。


下面是常见数组操作的参考表。当你操作 React state 中的数组时，你需要避免使用左列的方法，而首选右列的方法：

<table><thead><tr><th></th><th>避免使用 (会改变原始数组)</th><th>推荐使用 (会返回一个新数组）</th></tr></thead><tbody><tr><td>添加元素</td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">push</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">unshift</code></td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">concat</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">[...arr]</code> 展开语法（<a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="#adding-to-an-array">例子</a>）</td></tr><tr><td>删除元素</td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">pop</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">shift</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">splice</code></td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">filter</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">slice</code>（<a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="#removing-from-an-array">例子</a>）</td></tr><tr><td>替换元素</td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">splice</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">arr[i] = ...</code> 赋值</td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">map</code>（<a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="#replacing-items-in-an-array">例子</a>）</td></tr><tr><td>排序</td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">reverse</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">sort</code></td><td>先将数组复制一份（<a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="#making-other-changes-to-an-array">例子</a>）</td></tr></tbody></table>


以下为全部代码，我已标上了注释，不难应该能看懂：

    import { useState, useEffect } from "react";
    import "./App.css";

    const tds = [
    { id: 1, content: "学习HTML", done: true },
    { id: 2, content: "学习CSS", done: false },
    { id: 3, content: "学习JavaScript", done: false },
    ];

    function App() {
    const [todos, setTodos] = useState(JSON.parse(localStorage.getItem('myreacttodos')) || []);// 存储待办事项
    const [displayOption, setDisplayOption] = useState("all"); // 过滤待办事项的选项
    const [newtodo, setNewTodo] = useState("");// 添加代办事项



    useEffect(()=>{
        localStorage.setItem('myreacttodos',JSON.stringify(todos))
    },[todos])

    /**
    * 添加ToDo
    */
    function addToDo() {
        if (todos.length === 0) {
        // 数组为空的情况处理代码
        // 可以选择初始化一个默认值，例如：
        const newId = 1;
        console.log(newId);
        setTodos([{ id: newId, content: newtodo, done: false }]);
        setNewTodo("");
        } else {
        // 数组不为空的情况处理代码
        const newId = Math.max(...todos.map((t) => t.id)) + 1;
        console.log(newId);
        setTodos([...todos, { id: newId, content: newtodo, done: false }]);
        setNewTodo("");
        }
    }

    /**
    * 按回车添加待办事项
    * @param {input 键盘事件} e 
    */
    function keyReturn(e) {
        if (e.keyCode === 13) {
        addToDo();
        }
    }

    /**
    * 移除ToDo
    */
    function removeToDo(id) {
        setTodos(todos.filter((t) => t.id !== id));
    }

    /**
    * 更新ToDo
    */
    function renewToDo(id, ck) {
        let newTodos = todos.map((t) =>
        t.id === id ? { ...t, done: ck === true ? true : false } : t
        );
        setTodos(newTodos);
    }

    // 处理按钮点击事件
    const handleDisplayOption = (option) => {
        setDisplayOption(option);
    };

    // 根据选项过滤待办事项
    const filteredTodos = todos.filter((todo) => {
        if (displayOption === "completed") {
        return todo.done;
        } else if (displayOption === "incomplete") {
        return !todo.done;
        } else {
        return true; // 显示所有事项
        }
    });

    return (
        <div className="container mx-auto max-w-xl p-4">
        <h1 className="text-3xl">ToDos</h1>
        <div>
            本项目依赖:
            <a className="link" src="https://react.docschina.org/" target="_blank">
            React
            </a>
            +
            <a className="link" src="https://cn.vitejs.dev/" target="_blank">
            Vite
            </a>
            +
            <a className="link" src="https://cn.vitejs.dev/" target="_blank">
            Tailwind CSS
            </a>
            +
            <a
            className="link"
            src="https://daisyui.com/docs/install/"
            target="_blank"
            >
            daisyUI
            </a>
        </div>
        <div className="p-4">
            <input
            value={newtodo}
            onChange={(e) => setNewTodo(e.target.value)}
            onKeyDown={(e) => {
                keyReturn(e);
            }}
            type="text"
            placeholder="输入代办事项后，按回车添加。"
            className="input input-bordered w-full input-md max-w-xs"
            />
            <button className="btn mx-4" onClick={addToDo}>
            添加代办事项
            </button>
        </div>
        <ul>
            {filteredTodos.map((todo) => (
            <li key={todo.id} className="flex gap-2">
                <div>
                <input
                    onChange={(e) => renewToDo(todo.id, e.target.checked)}
                    type="checkbox"
                    checked={todo.done}
                    className="checkbox"
                    id={"todo" + todo.id}
                />
                <label
                    className={todo.done ? "line-through" : ""}
                    htmlFor={"todo" + todo.id}
                >
                    {todo.id} - {todo.content}{" "}
                </label>
                </div>

                <button onClick={() => removeToDo(todo.id)} className="btn btn-sm">
                X
                </button>
            </li>
            ))}
        </ul>

        <div className="flex gap-2 mt-2">
            <button onClick={() => handleDisplayOption("all")} className="btn">
            显示所有
            </button>
            <button
            onClick={() => handleDisplayOption("completed")}
            className="btn"
            >
            已完成
            </button>
            <button
            onClick={() => handleDisplayOption("incomplete")}
            className="btn"
            >
            未完成
            </button>
        </div>
        <footer class="footer items-center p-4 text-neutral-content">
            <div class="items-center grid-flow-col">
            <svg
                width="36"
                height="36"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                fill-rule="evenodd"
                clip-rule="evenodd"
                class="fill-current"
            >
                <path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
            </svg>
            <p>Copyright © 2023 - All right reserved</p> <a className="link link-accent" src="https://suiyan.cc">My blog</a>
            </div>
        </footer>
        </div>
    );
    }

    export default App;


## 总结

程序并没有做数据的持久保存，可以使用浏览器API：localStorage来保存待办事项的数组，这样下次打开浏览器就会显示之前保存的数据了,代码中已经更新添加了使用localStorage存储待办事项的存储代码。

另外，通过ToDo这个小项目分别使用vue和react编写，也算是对两大框架有了入门级的体验，总体来说，vue在学习过程中上手更为简单，适合从未接触过这类框架的新手来学习，如果你有不错的JavaScript和前端项目的编写经验，我还是推荐使用react，react更接近原生的写法，虽然没有太多的语法糖，但是兼容更简单，react官方文档写的太死板了，对新手不太友好，总之，这二个都是非常不错的前端框架，都值得去学习去使用。

闲来无事，琢磨着体验一下react吧，花了一天的时间看了看react的官方文档，然后能照着以前用vue写的ToDo使用react重构了一遍，这里简单记录并总结一下学习过程。

使用React+Vite+TailwindCSS+daisyUI打造一个简单的ToDos

由于更换了机器，这阵子可能开始使用Windows系统了，有8年左右没怎么系统的使用Windows了，今天刚接手就遇到了问题，终端下运行pnpm，结果PowerShell报错：因为在此系统上禁止运行脚本的解决。

## 解决方法

解决的方式很简单：

打开PowerShell 然后输入:

    get-executionpolicy

如果是Restricted,就不能运行，需要改为RemoteSigned。

以管理员身份打开PowerShell 输入:

    set-executionpolicy remotesigned

然后选择填写:Y

之后就正常了，问题解决。

由于更换了机器，这阵子可能开始使用Windows系统了，有8年左右没怎么系统的使用Windows了，今天刚接手就遇到了问题，终端下运行pnpm，结果PowerShell报错：因为在此系统上禁止运行脚本的解决。

Windows PowerShell报错：因为在此系统上禁止运行脚本的解决

TailWindCSS本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。

daisyUI最流行的TailwindCSS组件库，包含了一些常见的web组件，使用方便，结合TailwindCSS使用更是丝滑流畅。

## 安装TailwindCSS

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

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

进入目录后：安装TailwindCSS并初始化：

    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

初始化之后会发现`tailwind.config.js`，打开修改文件内容如下：

    /** @type {import('tailwindcss').Config} */
    export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
    }

并在 `./src/index.css`中添加：

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

## 配置daisyUI

安装 daisyUI:

    npm i -D daisyui@latest

然后，在你的tailwind.config.js文件里追加 daisyUI 的设置:

    module.exports = {
    //...
    plugins: [require("daisyui")],
    }


## 运行调试


    npm run dev

修改`app.jsx`添加一些daisyUI的组件进行测试:

    <>
        <button className="btn">Button</button>
        <button className="btn btn-neutral">Neutral</button>
        <button className="btn btn-primary">Button</button>
        <button className="btn btn-secondary">Button</button>
        <button className="btn btn-accent">Button</button>
        <button className="btn btn-ghost">Button</button>
        <button className="btn btn-link">Button</button>

      <p className = "bt-4">
        tailwindCSS and daisyUI
      </p>
    </>

如果可以正常预览到daisyUI按钮，还有`bt-4`也实现了TailwindCSS，那么，恭喜你，React+TailwindCSS+daisyUI开发环境已经搭建好了。

一步一步的快速搭建前端React+TailwindCSS+daisyUI开发环境

前端React+TailwindCSS+daisyUI开发环境的快速搭建

今天闲来无事，打算创建一个react的项目玩玩，但是发现使用`npx create-react-app`无法创建react项目，如果添加sudo前缀，虽能创建，但是无法修改项目中的文件，这可奇了个怪了？！

## 问题现场

之前可是没有这个问题的，创建react项目没有遇到过任何问题，回忆造成这种情况的原因唯一的可能性就是因为升级了macOS系统的版本，难道升级系统版本还是造成某些目录的权限丢失？

`npx create-react-app`之后，若是没有使用`sudo`则会因为没有写入权限创建失败，若使用了`sudo npx create-react-app`,虽能创建项目并运行，但是运行后会报错，并且无法修改任何文件，提示没有权限，IDE会只能提示让你输入管理密码后可以修改，这个可就不爽了，而且程序自动执行写入文件，一定会报错。

## 解决方法

后来，看到有个错误提示中有段让运行：

    sudo chown -R 501:20 "/Users/J.sky/.npm"

然后我就运行了一下，问题就解决了。其原因是因为`.npm`目录没有写入权限，手动修改一下就好了，如果你也有这个问题，可以试试看：

    sudo chown -R 501:20 "/Users/「你的macOS用户名」/.npm"

把「你的macOS用户名」换成：J.sky(我的用户名，这里换成你的假如是Tom):

    sudo chown -R 501:20 "/Users/Tom/.npm"

运行，输入密码后，就可以解决了，之后使用`npx create-react-app`就和以前一样了。

今天闲来无事，打算创建一个react的项目玩玩，但是发现使用`npx create-react-app`无法创建react项目，如果添加sudo前缀，虽能创建，但是无法修改项目中的文件，这可奇了个怪了？！

macOS npx create-react-app 创建react项目报错或是没有写入权限

我那台2015款的Macbook Pro A1389的电池终于又挺不住了，鼓了个大包，算了，还是拆掉吧。

## 缘起

这台老笔记本是在2015年底买的，当时花了15000￥吧，不太记得，大约用到2020年的时候我发现笔记本的合上盖子的时候总是合不严实，到后来键盘都快失灵了，然后在网上一查，原来是电池的问题：鼓包了，当时Apple有活动，可以免费更换A1389的电池，但是由于我所在的城市并没有官方的维修店，打电话询问Apple客服，还没有邮寄换电池的服务，如果坐高铁去，来回的路费都够自己买一块电池了，索性在淘宝购买了一块电池，对着视频一顿操作，竟然搞定了！

## 缘灭

2020年换了新电池，一直使用到现在，这几天发现盖子又有一点合不上了，看来上次换的新电池又到壽了，考虑到这台机器年头已久，而且也不想在带她出门，只是在家里用了，便寻思着能不能把电池拆掉了，直接插电源使用？

## 关于拆卸电池

电池的拆卸比较简单，可以在bilibili搜索A1389电池的更换视频，照着拆卸即可，拧几个螺丝，拔掉电池线插头，还有一个好像是触摸板线的插头先拆掉，方便拆掉电池，后边电池拆掉后再接上即可。

## 使用

拆完电池，只要接通电源就会开机，但是关机还是使用之前的关机方式，电源线上的小灯一直是橙色的。开机进到系统，感觉和之前的使用没有什么变化，还是老样子，网上说会使CPU降频变卡，这个我暂时还没有正式到，平时的一些使用，暂时看不出有什么变化，CPU的温度比之前有电池的时候降低了大约10°左右，感觉没什么事，不过要注意电源线的插头，不要掉了，不然就和断电一样，据说对硬盘有损伤，所以还是要注意一下。

另外，在系统-节能-关闭显示器那里改成永不，不然显示器在一定时间后关闭，可能会触发机器重启，这个刚才就发生了一次，我改了永久后，就没有再次突然重启。

如果觉得CPU被降频了，可以参考如下操作：可以使用命令行工具「sysctl」来查看macOS系统中CPU的频率。在终端中输入`sysctl -n machdep.cpu.brand_string`即可查看CPU的型号和频率。也可以使用`sysctl -n hw.cpufrequency`来查看当前CPU的频率。输入`sysctl hw.physicalcpu`即可查看当前处理器物理核心数量


## 总结

对于这台老机器已经不在抱有幻想了，如果还还能再战三年也是极好的，如果者之间再坏了，就只好换新机器了，计划换个I9 4060 32G 哈哈哈。


一些有用的相关资料：

[Reset the SMC of your Mac](https://support.apple.com/en-us/HT201295)

我那台2015款的Macbook Pro A1389的电池终于又挺不住了，鼓了个大包，算了，还是拆掉吧。

终于把Macbook Pro A1389的电池给拆掉了

在前端Vue项目开发中，数据的跨组件状态在某些场景下是很有必要的，当你在一个SPA单页面的APP中需要一个全局变量的时候，Pinia是一个简单而又高效的选择。

## 安装Pinia


    # 使用pnpm
    pnpm i pinia

    #或者使用 rarn
    yarn add pinia

    # 或者使用 npm
    npm install pinia


## main.js

在程序入口处引入pinia:

    import { createApp } from 'vue'
    import './style.css'
    import App from './App.vue'
    import { createPinia } from 'pinia'
    import router from "./router/index.js";

    const pinia = createPinia()
    const app = createApp(App)


    app.use(pinia)
    app.use(router)
    app.mount('#app')


## 定义Store

首先在项目的src目录下，创建stores目录和index.js:

    import { defineStore } from "pinia"

    export const useTestStore = defineStore("Test",{
        state:()=>({
            count:0
        }),
        getters:{
            double:(state)=>state.count * 2,
        },
        actions : {
            add(){
                this.count ++
            },
        },
    })

这里定义了一个state,你可以理解为项目中的全局变量，getters可以理解为Vue中的计算属性，actions可以理解为组件中的method。

## 使用state

这里我定义了两个页面，router/index.js：


    import { createRouter,createWebHashHistory } from 'Vue-router'
    import HomeView from "../views/HomeView.vue";
    import TestView from "../views/TestView.vue";

    const router = createRouter({
        history:createWebHashHistory(),
        routes:[
            {
                path:'/',
                name : 'home',
                component:HomeView
            },
            {
                path : '/test',
                name : 'test',
                component:TestView
            }
        ]

    })

    export default router;


通过上边的路由代码可以看出页面组件目录。

在这两个组件中，我使用了state：

    <template>
    <h1>Home Page</h1>
    <div class="card">
        <button type="button" @click="store.add">count is {{ store }}</button>
    </div>
    </template>

    <script setup>
    import {useTestStore} from "../stores/index.js";

    const store = useTestStore()
    </script>

## 运行调试

我们启动服务器`npm run dev`,通过路由导航点击到home页面，点击按钮触发count增加的事件，可以观察按钮中store的属性值变化，当我们切换到test页面，发现store值并不是初始值，而是点击后增加的值，当在test页面点击按钮是，store的值也会增加，切换会home页面时，store保持不变，综合发现store可以跨组件共享变量，达到了全局变量的效果。

## 总结

pinia的使用简单方便功能强大，在定义不同的全局state是，可以分别创建不同的文件来区分，这下子再也不用Vue中变量全局共享发愁了。

在前端Vue项目开发中，数据的跨组件状态在某些场景下是很有必要的，当你在一个SPA单页面的APP中需要一个全局变量的时候，Pinia是一个简单而又高效的选择。

体验Pinia Vue的专属状态管理库

之前新主题有个主题切换的功能，使用了下拉菜单，但是这个下拉菜单在webkit下有兼容问题，下拉菜单弹出后不能收回，但是最后这个兼容问题却奇怪的被百度统计代码给解决了！

## 问题现场

下拉菜单代码，引自菜鸟教程：

    <style>
    /* 下拉按钮样式 */
    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    /* 容器 <div> - 需要定位下拉内容 */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    /* 下拉内容 (默认隐藏) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    /* 下拉菜单的链接 */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* 鼠标移上去后修改下拉菜单链接颜色 */
    .dropdown-content a:hover {background-color: #f1f1f1}

    /* 在鼠标移上去后显示下拉菜单 */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* 当下拉内容显示后修改下拉按钮的背景颜色 */
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    </style>

    <div class="dropdown">
    <button class="dropbtn">下拉菜单</button>
    <div class="dropdown-content">
        <a href="#">菜鸟教程 1</a>
        <a href="#">菜鸟教程 2</a>
        <a href="#">菜鸟教程 3</a>
    </div>
    </div>

一段很普通的下拉菜单代码，保存HTML，本地使用一些服务器插件(Live Server 等)预览，使用iPhone Safari 打开，会发现下拉菜单展开后，无法收回，这个就是一个兼容问题，也是我想要解决掉的问题。

后来多方尝试搜索，可以使用JavaScript制作一个按钮弹出菜单来替换，但是不满意，然后我就发现菜鸟教程的页面上的下拉菜单在iPhone Safari上没有问题，我把他的页面保存本地，预览，没有问题，我自己复制他的代码的HTML就有问题，只好用排除法来发现问题的根源，直到我删来删去的，删到了菜鸟教程页面上的百度统计代码：

    <script src="https://hm.baidu.com/hm.js?3eec0b7da6548cf07db3bc477ea905ee"></script>

删除后下拉菜单就会出现无法收回问题，恢复百度统计代码，兼容性问题就解决了？！神奇啊！百度统计竟然帮我解决了一个浏览器的兼容性问题！太神奇了。

## 解决问题

后来，我就在页面上添加了自己的百度统计代码，至此，这个下拉菜单弹出无法收回的兼容问题就解决掉了！感谢百度统计，百度统计真是为民服务为民解忧！


参考：

[菜鸟教程 CSS 下拉菜单](https://www.runoob.com/css/css-dropdowns.html)

之前新主题有个主题切换的功能，使用了下拉菜单，但是这个下拉菜单在webkit下有兼容问题，下拉菜单弹出后不能收回，但是最后这个兼容问题却奇怪的被百度统计代码给解决了！

百度统计代码可以解决浏览器兼容问题？

新主题做的很满意，主要是在于技术选型、策划、编写的过程中很畅快，让这个39°炎热的初夏有了一丝丝凉意，唯一美中不足的就是iPhone的Safari浏览器有个兼容性问题让人头疼。

## 完美主义者的痛苦

基于daisyUI制作了一个博客主题，很喜欢这个框架，既让我满足了使用tailwind css的欲望，也实现了我理想中的一些功能，例如一键实现博客的多主题，daisyUI一键换装可以实现20多个主题，配置起来也挺简单的，按着官方的文档，噼里啪啦的一顿操作猛如虎，搞定了主题的适配，很完美！但是，在iPhone的Safari浏览器下边，主题选择下拉菜单弹出后，不能正常的收回，这个着实的让我郁闷了很久，Google、AI都问了，没有解决方法，而且鉴于是手机浏览器，我暂时没有调试的方式，这真是束手无措了。

## 何不换种方式放过自己

大约苦苦寻找了几个小时，都没有解决这个BUG，这心里不舒服，就感觉如果有人不巧使用iPhone的Safari浏览器浏览我的博客，切换了主题，发现了这个BUG，会不会一来气，就关了网页，从此不在点开碎言博客，并且吐槽站长不负责任，技术部成熟不够老练，连这点小小的问题都解决不了？

## 断离舍

今天早上还在想，怎么办？就是自己浏览自己的博客也会这样的不舒服的，就这么算了吗？最后我决定试试其他浏览器，下载了几个其他热门浏览器，发现都没问题，我悄悄的把Safari从主屏删除了。。。

想起前几天那个博客群里男的开玩笑(据说在开车)，进而引发女博主不满最后气愤退群的事，当事人是不是有些过于冲动了？这世界到处充满着恶心的对话和视角，如果都按那个女主那样长篇大论的写了一篇评论并且气的晚上都没睡好觉，我觉得这是在用别人的错误来惩罚自己，大可不必。就像Safari的问题，不是我代码的问题，大不了我换个浏览器。人生苦短，把精力留给自己和自己关心的人，至于那些不必要的事，就让他过眼烟云随风而去吧。

新主题做的很满意，主要是在于技术选型、策划、编写的过程中很畅快，让这个39°炎热的初夏有了一丝丝凉意，唯一美中不足的就是iPhone的Safari浏览器有个兼容性问题让人头疼。

从一次浏览器兼容问题到何不放过自己做个快乐的博主

花了几个小时基于daisyUI Tailwind CSS做了一个博客主题，很早就想把博客的样式换成基于Tailwind CSS为基础框架的，今天终于实现了。

## 一些收获

    只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。----Tailwind CSS
    
Tailwind CSS确实好用，如果你是那种对css有点一知半解，但又不是很深入研究的人，那么你使用Tailwind CSS会极大的提高你的开发效率，减少开发中对css编写的错误。之前没有使用是因为没有找到一个纯粹的CSS框架，大部分都是结余react和Vue封装的前端框架，而我只想使用一个Tailwind CSS封装的CSS组件框架，官方推荐的收费，免费的没有几个组件，而且都是模板，使用起来不太方便。

daisyUI正好满足了我的需求，daisyUI的有点就是，主题很多，一键切换，这点太方便了！还可以自定义主题。自带的组件，对于一个blog来说，足够用了。

## 缺点和不足

daisyUI的组件兼容性还是不行，有些组件还有明显的BUG，比如抽屉组件就有个很明显的BUG，不会自动展开抽屉，只能点击按钮打开，虽然官方自己用的解决了，但是文档里提供的代码却是有问题的，我怀疑官方使用的打包编译版，我复制了他们网站上的代码使用，发现没有问题的。还有就是弹出菜单在Apple手机的iOS浏览器上可以弹出，但不能收缩回去。这些bug也不知道什么时候能修复。

## 总结

虽然问题是有的，但是总体来说，使用这些组件和编写好的CSS样式，真是极大的提高了开发效率，感兴趣的朋友可以试试。

花了几个小时基于daisyUI Tailwind CSS做了一个博客主题，很早就想把博客的样式换成基于Tailwind CSS为基础框架的，今天终于实现了。

基于daisyUI Tailwind CSS做了一个博客主题

搭建、部署、专心撰写博文，是每个博主都需要花费一些心思去做的事，每个博客就像一扇窗，我们透过窗口看到的那些光就是作者内心真实的表露，有些强烈如火焰，有些温柔如月光。但是有些，我真特么的想一脚给他踹关上。

## 令人讨厌的几类博客

1. 博客主题不明显，你说他是技术博客，每篇博文都配个擦边的暴露的大美女，某些场合打开后直接社死，最主要的是在一堆暴露的美女中，还夹杂着自己女儿(目测五六岁左右)的照片，我勒个去的。。。。
2. 打开主页，页面未展开，先来一首抖音魔性的热门歌曲，你要是戴着耳机也就算了，某些场合真是想找地方钻进去。
3. 大篇幅的广告，无处不在的推广，每打开一个页面广告占据了75%的内容。
4. 正经内容没有几篇，几乎都是SEO、主机、云服务、CDN代理等内容。
5. 不注重移动端阅读体验，页面布局混乱，配色奇葩，对比度强烈到眼睛要瞎了。
6. 过度折腾主题，各种插件安装混乱，导致数据经常丢失页面打不开。
7. 过度折腾主机、CDN、天天说自己被黑被攻击，频繁更换服务器。
8. CSS、JS特效过渡，打开页面CPU直接100%风扇狂转不停，夏天的时候可能会有爆机的危险。
9. chatGPT批量生成，爬虫采集文章和图片，每天更新几十上百篇水文。
10. 不痛不痒记录生活，好好的博客变成流水账微博了，吃喝拉撒无所不说。

好吧，我只是吐槽一下，并不针对任何博主，没有讨厌就不会有喜欢，又爱又恨才是人生。博客虽然是记录自己生活学习日常的一片净土，但是暴露在互联网上就会被人看到，除非你拒绝任何搜索引擎爬取，拒绝任何友情链接，不然别人必然会看到你的博客。博客虽不能完整的代表博主本人，但是从博客的文字、主题、配色中绝对能看出一个博主的爱好和性格。

好的博客，主题突出、文图详实，好的博文让人阅读后赏心悦目有所思有所想有收获。如果是多年的老博主，其文字归档可谓是娓娓道来洋洋洒洒，无论技术还是情感，那种连贯性文字读起来一气呵成，何等畅快！

坚持写博客的人值得让人敬佩，尤其是那些真情流露的文字，无论技术或是生活情感，这些才是博客夜晚中最亮的明星。

至于那些讨厌的博客，打开一次就不会在打开第二次了，拜拜了您呢，或许，我讨厌的他人喜欢的不的了，那就是另一件事了，反正和我无关。

搭建、部署、专心撰写博文，是每个博主都需要花费一些心思去做的事，每个博客就像一扇窗，我们透过窗口看到的那些光就是作者内心真实的表露，有些强烈如火焰，有些温柔如月光。但是有些，我真特么的想一脚给他踹关上。