叶子常常随风而落，分享博主日常学习和使用的一些技术

React作为前端框架的核心特性包括JSX语法、组件化开发、单向数据流、声明式编程和虚拟DOM等技术。对于React的定位，作者认为它是一种前端但不仅限于前端的编程语言，是全球众多编程语言之一，但不认同"最好"的评价。文中还讨论了React作为特定编程语言和前端语言的属性，展现出对React技术特性的基本认知，同时对技术优劣持客观态度。

react.js -> next.js

as we all know, 我们可以在后端注册路由，那么前端是否可以通过注册路由的方式实现呢？技术上应该可以实现的，但是设计上常用的框架并没有这么设计。基本上前端路由还是声明式的。Mermaid 是一个工具，它能让你用简单的文字代码，自动画出各种图表。比如path=“/abc” and compontents 对应。简单： 写文字比用鼠标画图更快，尤其对于developer。比如react里面，主要是路由的地址和组件之前的关系问题。可以迁移，可以理解。

页面路由，注意页面路由不是路由器，因为我之前总是把路由和路由器搞混。而且我总是把前端页面的路由和路由器的路由搞混。那么这里一定要明白，这里我所说的页面路由就是指在浏览器里面的导航路由。

js中的button onclick 这个是绑定事件函数react中 button onClick我以为onClick实在绑定事件监听函数，不是的。它确实是绑定了函数，但是没有绑定事件，或者说没有在button上绑定事件函数，而是通过事件委托的方式处理的。

而且我之前把事件监听和事件捕获阶段给弄混淆了。毕竟事件捕获这个词语更像是一个动词，实际上它是一个阶段。按照我之前的理解，我其实一直在使用事件冒泡阶段的事件。事件捕获阶段 (The Capture Phase)事件冒泡阶段 (The Bubble Phase)目标阶段 (The Target Phase)我不知道事件还有捕获阶段的事件。

对于初学者来说，通常的建议是：不要直接从原生 WebGL 开始，而是先使用一个基于 WebGL 的高级框架或库，最著名的就是 Three.js。

第一次看到。

ToDo

官方网站：https://www.w3.org/1996年官网的样式。

浏览器事件是指用户或浏览器在网页上执行某些操作时触发的“信号”。JavaScript 可以监听这些事件，并在事件发生时执行相应的代码（事件处理程序）。点击按钮鼠标移动键盘输入页面加载完成表单提交分类主要事件举例鼠标事件clickmousemovemousedown键盘事件keydownkeyup表单事件inputchangesubmit窗口事件loadresizescroll拖放事件dragstartdrop剪贴板事件copypaste媒体事件playended自定义事件。

易用性对于网站来说非常重要。就拿上传文件这个场景来说。如果只是点击上传那么只能说是标准流程，应该增加拖拽和粘贴上传。

我总结的网页布局的方法，从1到4，我作为一个初学者，先把这四个给弄清楚。

https://flexboxfroggy.com/

大语言模型很强，但是因为它的知识不是最新的，占用了我一个小时的时间，还没有解决问题。我看到了这个哥们的文章，其实我也是个return react的人。于是我尝试查看文档，所以这个时候官方文档的效率会更高。同是天涯沦落人，相逢何必增相识。

比如我正在练习一个在线的http请求发送工具，我希望请求头这个区域，能够设置最大高度，当超过了最大高度可以滚动，这样的话，这个页面不会被撑得特别的长。我本来不知道tailwind，但是ai生成的前端代码大部分都是tailwind，可以说ai教我用tailwind。overflow 是CSS中一个非常重要的属性，用于控制元素内容溢出时的显示方式。虽然语义上和css的效果是一样的，但是tailwind需要实现的代码行数更少。1、AI喜欢用，我喜欢用AI，所以，我间接喜欢用tailwind。

假如说有一个程序员，是死记硬背型程序员A，A记住了react的使用方式就是class Component + this.setSate类型的，那么放到今天，如果A不更新知识结构，那么A已经过时了。基础不牢，地动山摇，基础的css页面布局排版你还不熟练，即使切换到react也是不熟练的啊。幸运的是，说明在变化，在进步，不幸的是你要接受这种改变，现在的我还能够接受改变，不知道十年，二十年，三十年之后的我能够跟得上变化。useEffect Hook (替代生命周期方法)

很多知识就是这样，你学了，然后忘记，然后再学习，然后再忘记。export {TestApp}import {TestApp} from ‘testapp.jsx’export default xyzimport xxx from ‘hello.jsx’constdefaultexportimportQ:export是必须的吗A:export 不是必须的，但 如果你想让其他文件使用这个组件（或变量、函数等），就必须用 export。很多初学 JavaScript / React 的人都会被 命名导

这篇文章比较了阻塞与暂停的区别，指出暂停仅影响当前函数而非整个程序。同时解释了export和非export函数的访问权限差异。关于异步处理，文章将await和.then()类比为不同写法但功能相同的工具，强调await会暂停当前函数的后续执行。

本文总结了前端开发中的几个关键知识点：1) text-align属性需用于块级元素，控制子内容对齐而非自身；2) 居中布局的两种方式：margin:auto和text-align；3) "子绝父相"定位原则，解释父元素relative定位的重要性；4) z-index控制元素层级关系；5) 空间复用概念，如头像悬停交互；6) 调试小技巧——使用border辅助查看布局。文章还提到TailwindCSS中的group类用法（未详细说明），并强调开发时需要逻辑清晰、耐心处理复杂度。配有多张示

tailwind css 比好处是什么呢?搭配ai使用编程更舒服。

我们已经会了原生的js的开发，对vue和react也有一定了解，也可以使用flask的模版来渲染页面，为什么还要了解一下next.js呢？Tailwind CSS是什么。

很多人不知道的是，其实开发插件很解压，就好像是我喜欢沿着公园的小路散步一样，每开发一个插件带给我的成就感和快乐都是独特的。我依然记得自己开发出第1个插件时的快乐，也记得上架第1个插件时的兴奋。9. popup中支持使用vue(后面想 content 也支持 vue)

nodejs的版本管理和版本切换。

我想使用油猴脚本，去给网页上的一些元素添加监听事件，但是呢，这些网页元素，在页面加载完成之后，并没有出现，也就是无法选中呢。比如说页面有一部分是通过ajax动态获取的，那么这一部分的内容的变化，通过MutationObserver可以监视到。想要在这些元素出现的时候，然后添加监听，这种情况下MutationObserver可以解决了。MutationObserver通俗的说，可以监听页面元素的变化。

很好理解，top代表着最顶层，最外层，parent代表着上一层。当然了top和parent有可能指向同一层。self 就是自身window。说明没有被嵌入iframe中。top和parent的区别。

20220829。

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。页面上的位置固定，当页面进行滚动的时候，滚动到一定程度时候，元素融入文档流。这种效果类似于吸顶，但是好像不是吸顶。可以说是吸顶的相反。2、监听滚动事件，这里存在困惑。这个效果是如何实现的？...

css箭头的两种方式：border和伪元素

主元素设置成relative，伪元素设置成absolute，这样伪元素的定位是基于主元素的。1、::after的使用。

最近在F12看网页源码的时候，忽然间发现某些网站多了一个flex按钮，我一阵恍惚，竟然记不得究竟是何时出现了这个功能。在display:flex的右侧也增加了一个小菜单，点击菜单可以弹出flex-wrap在网上搜了一下，daily-dev-tips有一个简单的介绍，很基础。...

div 默认是纵向排列的，但是很多时候我们有在一个容器内横向排列的要求。如果横向排满了再进行换行，这个如何实现呢？float: left可以使其横向排列，但是这个时候父容器好像没有撑开，如何让父容器也能够撑开呢？但是我感觉设置display:inline-block的效果更好。如何实现这种类似于标签的显示？一行依赖于内容的长度进行显示。鼠标悬浮显示全部文字如何做到？从上往下排列比较容易理解，那么从左往右排列改如何实现呢？可以在父容器里面使用display:flex。可以使用float=left进行控制吗？.

vue的安全性vue如何保护你https://v3.cn.vuejs.org/guide/security.html#vue-%E5%A6%82%E4%BD%95%E4%BF%9D%E6%8A%A4%E4%BD%A0虽然很多内容都是可以跳过的，但是安全相关的内容始终应该得到应有的重视。路由陆游曾经写过一首诗，叫做示儿。当然了这里的陆游和路由器的关系，就是雷锋和雷峰塔的关系一样。但是标题上的路由还不是路由器概念中的路由，而是url中的路由。示儿陆游〔宋代〕死去元知万事空，但悲不见九州同。王师

把你的疑惑写在前面：组件本身是否能够有data()这样的函数？？？计算属性缓存 vs 方法？？众所周知，我曾经学习过一点vue，对vue也算是略懂。可惜士别三日，必然忘记，现在的我根本记不得vue是什么了,今天就是我学习vue的第一天。愿山河无恙，岁月静好，吾vue技术必有所成。魏晋时期的杜预曾经有一篇文章，我的特别喜欢。vue的安装方式，我最喜欢cdn，因为我不是在生产环境使用，使用cdn方便快捷。然后粗略的过一下vue的教程目录。基本上比较简单，只有组件化这块我不太理解。所以重点就放在

获取数据，可以是网上的数据，也可以是自己拉数据数据清洗数据分析数据可视化数据分析和可视化是非常密切的，通过可视化能够更好的了解业务的增长规律，业务发展情况。数据可视化可视化是我一直想涉足的一个领域，常用的工具用excel, numbers,echarts,python，mysql等等。...

关键词：sweetalertsweetalertwhat is sweetalert?A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes. Zero dependencies.it’s good, but i don’t understand why there so many doll become sweetalert’

https://ourcodeworld.com/articles/read/457/how-to-display-images-in-the-javascript-console-of-the-browserIn this article, i will introduce two things:1、how to show image in browser console2、How to Loop Through an Object in JavaScript第一部分：在console里面显示图片

使用noise画waves效果。

lodash是什么？https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.jsA modern JavaScript utility library delivering modularity, performance & extras.debounce刚才在写golang我刚才进入心流的状态了, 现在是上午9:36，但是我当时忽然觉得时间好像是中午了。我写了个笔记结果发现有xss注入漏洞，所以我干脆放开了，直接变成了一个html

what’s editor?Next generation block styled editor.Free. Use for pleasure.Editor.js is a block-style editor for rich media stories. It outputs clean data in JSON instead of heavy HTML markup. And more important thing is that Editor.js is designed to be A