Posts

JS对DOM的影响 验证方式: 思路1：在html 标签内容前后写上script，然后打上断点，观察浏览器什么时候出现内容 结果:当断点出现在中途的时候，DOM的解析也停止了 思路2：script采用外部引入的方式，并且卡死请求时间，观察DOM状态 结果：将script请求卡死后，浏览器只渲染出来了HelloWorld,而the world没有出来 结论:浏览器是线性加载文档的，当碰到JS脚本时，就会执行JS的内容，而后续内容得等JS脚本执行完成后再加载。 CSS对DOM的影响 验证方式:配置服务器提供接口返回css文件，并且在请求过程设置响应时间，在进行响应css文件的时候，同时使用js监听事件’DOMContentLoaded’，观察DOM和css之间的关系参考链接 结论:CSS文件不会阻塞DOM文件解析 CSS对JS的影响 验证方式:配置服务器提供接口返回css文件，并且在请求过程设置响应时间，在进行响应css文件的时候，设置两组进行对照，一组是在css前面执行js，一组是在css后面执行js。观察是否有影响。 结果：当css在script前面时，script被css阻塞了，无法执行 结果：当script在css前面时，script正常运行 结论:CSS文件会阻塞JS文件加载，而又因为js会阻塞DOM的加载，所以CSS会间接阻塞DOM的加载. 总结：可以通过电影来解释，电影在拍一镜到底，但是可以暂停不能重开，css相当于服化道，DOM相当于演员。js相当于编剧。服化道和演员可以同时进行准备。但如果编剧中途修改了剧本，那么电影就得停下来等剧本修改完成后再拍,

什么是多巴胺? 多巴胺是一种在身体中被使用的化学物质，在一般情况下是有一定数量的多巴胺在身体中稳定循环的,这个一定数量通常被称为"dopamine baseline" 也就是多巴胺基准线，i在身体内的多巴胺含量影响了人的心情，动力,专注力 典型事物对于多巴胺的释放影响(后面的指标即高于基准值) Tips: How much dopamine you experience from something depends on your baseline level of dopamine when you arrive there and your previous dopamine peeks - huberman Lab 个人理解就是得到多巴胺量取决于当前接触到的事情与之前的新鲜度。 巧克力 1.5倍 SEX 2倍 尼古丁 2.5倍 安非他命 10倍 跑步 2倍 多巴胺的影响表现， 运动:有研究表明帕金森针状患者的多巴胺神经元受阻 动力&专注力:也就是将人的注意力大量集中在一个地方 除此之外，多巴胺产生这些作用的方式也有些不同,它可以在局部神经元之间进行传递，也可以大量释放到系统内 多巴胺在局部神经元之间传递是缓慢的，但是一旦开始传递，就是多米诺骨牌效应，意味影响产生的时间是缓慢的，但是非常持续。 多巴胺带来的痛苦和快乐 当多巴胺在身体内达到一定峰值的时候，身体就会产生满足/兴奋的感觉，但不仅仅与峰值有关，还与先前多巴胺基线相对于峰值的高度差有关。 多巴胺池：就像仓库一样，存储了现有能用的多巴胺，当完成上述典型事物完成时，就会从多巴胺池拿现有的多巴胺。 上瘾原理 在从事一些大量释放多巴胺的行为后，多巴胺池供给不足，无法维持正常的基准线，所以会下降，而在下降很多的时候，人们又会去渴求去做重复或者能得到大量多巴胺的事情，而这时候刚产生的多巴胺池又空了，无法维持到那个基准线,因此会反复进行这个行为，但有趣的点在于即使我们重复做这些事情，新鲜感早已消失，也就是无法获取大量的多巴胺了。最终由于长时间处于低多巴胺状态，抑郁甚至自杀 接下来就案例分析： 第一种情况 打电子游戏的时候会获取快感，一直玩一直玩，达到多巴胺峰值后，多巴胺池供应不足，基准线下降，此时心情糟糕，这时能够快速获得多巴胺的方式就是打电动，而这个时候打电动就会导致多巴胺池刚生成的多巴胺就被拿来用了，用完后又变低，最后就是一种刚制造出来的多巴胺就被马上拿来用，而打完游戏后又下降，最后我们的基准线一直在下降。 work hard play hard 在工作日正常工作锻炼，而在周末的时候大吃大喝，疯狂玩，最后过了几年后，可能就会心想：“我有点累了”,而这原因就是多巴胺在这些活动中逐渐到达高峰，然后又相应的低于基准线，而每周往复，多巴胺基准线就会逐渐变低。最终郁郁寡欢。

背景: 今天面试面到了，说不能使用apply和call来实现，当时脑袋空空，就放弃了,西八 Function.prototype.myBind=function(self,...prePendArgs){ // 在目标this对象上将当前函数添加上去，并且调用它 let fn = Symbol('fn'); self[fn] = this; return function(...args){ let finalArgs =[...prePendArgs,...args] return self[fn](finalArgs); } } let obj1 = { name: '1', sayHi(target) { console.log('hi', target, this.name) } } obj1.sayHi() let obj2 = { name: '2' } let bindFn = obj1.sayHi.myBind(obj2,'默认小马') bindFn() bindFn('非小马')

说到早起，很多人的第一印象就是"自律",“健康”,“成功人士必备”，(如果没有，当我没说)。并且由于很多富商名人经常也在访谈中谈到早起，例如库克早上四点半起床。这种例子就让我们在潜意识里建造了一种因果关系，早起->成功。虽然有关系，但不多，那么究竟是什么让这些人痴迷于早起，早起的好处到底有什么呢？ 为什么我每天早起,却仍过不好一生? 我们应该关注早起后要做的事情，而不是早起这件事本身。 人本质上是一种趋利避害的生物，早起这件事也是一样的。能多睡一会何乐而不为呢?所以说，无利不起早。我们可以把早起理解为“田忌赛马”,在大脑空空的时候去处理复杂的事情,大脑已经宕机的时候去刷刷短视频，打游戏或追剧啥的。stop! 这时候就会有人说，“你这道理我都懂，可是我即使早起也不会想着去处理那些复杂的事情”，那么这时我就说一下我的处理方式。首先早起不碰任何短视频或者视频app,不然脑子里的奖赏回路一旦开启，就可能很难停下来了。其次就是核心驱动力了，早上起来要做的事情是自己想要做的，记住，是自己想要做的！不是什么别人说的那些对人有好处的事情，比如说看书，学英语，冥想。不是说这些东西不好，只是对于我来说没那么有吸引力，并不是我真正想做的事情。比如说我想练钢琴，或者提升算法能力这些。最后就是具体性，我们最终要落实到具体的事情上面去，而不是说一个抽象的事情，练琴就练A段3遍，算法就刷力扣2道题这样的具体指标性任务。 那么如果要早起，我怎么保证睡眠时间的充足呢？答案很简单，就是早睡，对于这个方面我也很难给出明确的建议，只能给个方向，就是让自己意识到早睡对于自己切身实际的好处，对于我来说就是不会爆痘，以及科学表明，大脑在睡眠时会处理一天的记忆以及情绪，所以对于情绪低落的处理也有一定帮助。 结论:早起是一种手段，而不是什么灵丹妙药，本质是田忌赛马，将晚上的垃圾时间换到了早上,自己独处的时间，无需考虑他人的打扰，去做自己真正想要做的事情。倘若现阶段自身没什么project，那么不如睡个回笼觉舒服 参考资料：https://www.youtube.com/watch?v=4zXTyc2ZjXM

工欲善其事，必先利其器 在学习一个教学项目视频，逐行敲打的同时，同时启动另外一个项目，而这个项目的内容必须与第一个项目有所不同，可以是ui不同，或者数据库建模不同，亦或者是新的功能和逻辑判断，只是单纯的照抄教程的代码，没有任何思考和修改，这基本与复制无异 在没有完全懂，或者是赶需求的情况下，不要去复制粘贴代码 在看教程的时候，先看时间线的内容，自己先预想一下如何实现，再去敲打 当学习时感到不舒适时，就意味着大脑在真的学习一些东西，真的在思考了，如果很舒适的话，反而意味着要么是复制粘贴，或者已经学过了。 不要去背代码，就如同背英文单词一样，人不是机器，真正应该做的是去理解代码做了什么，记住那些模式，机器才是帮我们存储记忆的地方，比如居中一个元素，记住居中这个思想，然后去搜索。或者做一个表单校验，而不是记住什么form，useForm这种一系列具体的步骤 在学习完一个知识后，内化它，可以是写博客，或者上述那样另开一个项目，以及讲述给别人听。需要注意的是，当写博客或者开新项目的时候，必须有自己的输出，代码有自己的风格，如果只是复制粘贴，那将毫无意义。 看视频学习很容易陷入两种情况(就我而言)，一种是看剧心态，刷完=学完，另一种是看着看着，发现看不懂，太难啦！，就不看了！我们需要注意的就是在看视频的过程中时刻牢记最终的目标是学习新东西，而不是刷完，以及遇到问题学会去分解成小问题

Todos 问题 如何实现一个router 各个数据模型之间的关系？ 如何进行form验证？ hydration failed initial UI doesn’t match what was rendered on the server 利用use-hook-form自定义form表单 如何使用zod来限定数据类型为特定枚举类型或自定义判断 禁用input focus的光标框 如何使用prisma创建关联对象 prisma Disambiguating relations 创建一个动态路由 Next image图片比例不一致 如何条件查询在prisma里面 重置数据库 路由跳转问题 next 国际化 next router速度太慢了 删除server遇到问题 为什么使用useEffect进行事件监听初始化要使用function updater ？ 如何获取在组件中获取当前动态route的params 如何在tailwind中封装一个class，因为每次hover都要反复重复写一次动画，太低效了 每次打开editModal的时候form数据初始化为选中对象的当前数据 如何在nextjs中使用socket.io shadcn-popover溢出到视图外面去了 在输入框中按回车同时打开了附件栏 next i18n 插值翻译 prisma 分页查询 (Cursor-based Pagination) prisma 如何实现hasNextPage? tanstack-query是啥? date-fns如何国际化 nextImage 加载不出来 如何使用react-query配合socket更新已请求的缓存数据 如何使用ref，并且将在type里面定义ref属性 如何在ts里写一个throttle nextjs url query参数 部署问题 目标:实现一个discord-clone，同时学习Next.js React Tailwind 部署地址：https://maziyo-discord.duckdns.org...

起因：不知道干啥，所以想尝试通过给开源社区贡献微薄之力来提升自己的一些技术水平(做issues，感觉跟刷leetcode似的，不过更有意思一点) 目标:修复问题[issues#14738] Steps 一开始无从下手，索性就直接询问chatgpt，而gpt老师给出的解决方案是提供一个collapse-on-click-outside属性，然后使用window函数监听是否点击了menu以外的元素，然后关闭即可。 于是乎就写了这么个监听函数在绑定事件在menu上，但是后面发现出现下拉框的menu是sub-menu组件，原来一开始方向就错了🤡 后来又一看issues，发现已经有人提pr了🤡🤡，不过这也是很好的机会，可以学习一下别人的代码 看了别人写的代码中用到了一个经常听到但是从未去了解过的库，也就是vueuse，发现里面提供了一个已经写好了的工具类，叫做onClickOutside 我就想着去看看这个onClickOutside的源码长啥样,结果一看，发现看不太明白，但好在通过查看commit历史记录看到了最简单mvp，所以打算学习一下这个utils。 demo关键部分在于event.composedPath(),这个api能够返回一个数组，该数据包含了当前事件会被传播到的所有元素。只要判断这个数组是否存在我们目标元素即可。

本次笔记的原则： 创建基于成果的任务 写下要做的行动 记录执行过程中遇到的问题和思考 目标:发布一个能够展示上传图片的组件至npm上，并且能够在其他项目中使用 Steps 1.使用vue-cli初始化项目 2.实现能够上传图片并显示的组件 <template> <div class="special-upload"> <h2>File Uploader</h2> <input type="file" @change="loadFile" accept="image/*" > <img ref="output" width="200"> </div> </template> <script> export default { name:"SpecialUpload", data() { return { } }, methods: { loadFile(event){ this.$refs.output.src = URL.createObjectURL(event.target.files[0]) } }, } </script> <style> .special-upload { width: 300px; height: 400px; border: 1px solid black; text-align: center; } </style> 3.使用vue-cli来实现打包配置 遇到的问题： 在其他项目中使用打包后的js文件报错，关闭eslint解决，我一开始还以为是不支持使用umd,一开始无法使用可能是因为打包的时候出现了冗余的代码吧 //在package.json配置，使用脚手架提供的内置打包配置 "build-lib":"vue-cli-service build --target lib --name special-upload ./src/index.js", 2....

背景：因为第一次部署博客在GitHub上，想要实现自动化更新部署，但是由于不熟悉GitHub actions，所以写下本篇浅入一下。 一、什么是Github actions? 简单来说，就是由GitHub作为平台提供给开发者自动化工作流的方案，其中比较常见的工作流就是CI/CD 二、常见的工作流有哪些？ 用户提交issue -> 检测是否重要/次要 -> 是否可重现 ->分配给相应的contributer 提交pull request -> review code -> 合并分支 合并分支 -> 测试 -> 构建 ->部署 而action的出现就是为了自动化上述操作。 三、Github actions的工作原理 事件监听->执行工作流 四、为什么选择Github actions? 代码大部分时间是部署在GitHub上的，所以无需接入其他第三方CI/CD tool 不需要去手动安装环境，可以自定义指定环境版本 GitHub提供了一个官方市场，可以复用其他人的actions 五、workflow文件语法 name: Greeting from Mona #定义workflow名称，可选参数 # 定义trigger event on: push: branches:[ master ] pull_request: branches:[ master ] jobs: my-job: name: My Job runs-on: ubuntu-latest #指定运行的虚拟机环境 steps: - name: Print a greeting # 指定环境变量 env: MY_VAR: Hi there!...