一行js可以做的事-第二期Hi! 👋JavaScript 单行简代码使用这些基本的一行代码将您的JavaScript技能提升到一个新的水平，它们还可以节省您的编码时间
1) 如何将文字大写：大写字符串不是 JavaScript 的内置功能。为了解决这个问题，我们可以创建一个capitalize函数，它接受一些文本并将第一个字母设为大写，然后附加字符串的其余部分。
1const capitalize = (str) => `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
2) 如何计算百分比：calculatePercent接受一定金额，除以总金额，然后乘以 100。最后，我们将Math.round()结果四舍五入到最接近的整数。
1const calculatePercent = (value, total) => Math.round((value / total) * 100)
3）如何获取随机元素：某些情景，可能希望根据某些操作向用户显示祝贺消息。但您可能不想每次都向他们展示相同的内容，因为那样会变得 ...
给表弟搭建一个chatGPT环境安装v2rayN1.下载v2rayN下载地址https://github.com/2dust/v2rayN/releases/tag/6.17如图-选择v2rayN-With-Core进行下载2.解压并且安装v2rayN-With-Core
打开v2rayN.exe,界面如图则为正常状态(节点在后面添加即可)
添加节点1.打开搭建好的主力节点列表 https://shuai.songhang.repl.co/shuai.html备用节点列表https://awesomepen.oss-cn-beijing.aliyuncs.com/shuai.txt
点击复制，然后进入v2rayN客户端内进行粘贴即可在v2rayN客户端里选中一个节点，点击回车，打开 https://youtube.com 验证是否可以正常显示页面
使用chatGPT1.打开 https://chat.openai.com/2.点击login进行登录操作3.输入账号密码进入4.输入关键词开始使用
🚀 关于我戳👩💻 🧠👯♀️🤔 💬 📫😄 ⚡️
收藏css工具类实用css资源类 🌈
精选的 70 个基于 Web 的实用工具的集合每个都将生成纯 CSS，而不需要 JS 或任何外部库。
完全归功于这些应用程序背后的作者
引用
Property Generators
Animations
Backgrounds
Color Tools
Typography
Loaders
Layouts
Informative
属性生成器1. Neumorphism
使用嵌入阴影生成 Soft-UI CSS 样式，作者 @adamgiebl
2. Shaddows Brumm
制作和预览精美平滑的阴影 @brumm
3. Fancy Border Radius
生成具有边界半径的形状对象 @9Elements. 类似于 BlobMaker
4. Glow Generator
生成纯CSS，跨浏览器发光效果
5. Clothoid Corners
通过 CSS 剪辑路径生成回旋圆角 Takehiko Ono
6. Glassmorphism
构建半透明、模糊的玻璃状背景。类似于 ui.glass/generator
7. Cl ...
Vite+Tailwind CSS创建一个react应用为什么使用Vite大多数开发人员默认将Create React App (CRA)作为构建工具，用于在 React 中创建新项目并设置开发服务器。它提供了无需任何配置的构建设置。
Create React App 在运行在 webpack 上，它在提供服务之前捆绑了整个应用程序。因此，在大型代码库中，应用程序运行需要更多时间，并且文件更改反映在热更新HMR上需要很长时间。
不同与 CRA ,Vite 不会在提供服务之前构建整个应用程序。它将应用程序模块分为两部分：依赖项和源代码。
依赖项使用esbuild （用 Go 语言编写）预先捆绑，比基于 JavaScript 的捆绑器快 10 到 100 倍；由于依赖关系不会改变，它们也可以被缓存，这样就可以完全跳过预捆绑。
源代码通过原生 ESM提供：源代码通常包含需要转换的非纯 JavaScript（例如 JSX、CSS），但并非所有都需要同时加载。所需的代码根据浏览器路由（基于路由的代码拆分）得到服务。
这些差异导致使用 Vite 初始化、更新和构建 React 应用程序时体验更快。
第 1 步 – 创建您的项目文件夹打开您的终端，然后导 ...
next.js 13的服务端组件雏形Hi! 👋有趣的next.js服务端组件Next.js 13 添加了许多值得注意且颠覆性的东西；但是，很大一部分仍然是 Beta阶段。尽管如此，Beta 功能为我们提供了关于 Next.js 未来将会被如何塑造的重要信号，即使你现在并不打算在你的项目里使用它。
默认创建服务端组件，如需更改客户端组件需要显式声明：Next.js 13 引入了app文件目录，这是一种在考虑 React Server Components的情况下构建 Next.js 应用程序的全新方式。app目录下构建的组件默认是React Server Components，如果要构建客户端组件必须显式添加 'use client'
什么是 React 服务器组件？React Server Components是在服务器上呈现的组件。React Server Components利用服务器的优势功能给客户端提供更优质的体验。
服务器组件最常见的用例是获取数据并根据服务器上的数据呈现在你的组件内。
你要考虑放入服务器组件的内容是：获取数据（利用服务器的超高速连接）访问后端资源或文件系统不需要客户端交互的具 ...
一行js可以做的事-第一期Hi! 👋JavaScript 单行简代码使用这些基本的一行代码将您的JavaScript技能提升到一个新的水平，它们还可以节省您的编码时间
1) 查找数组中的最大值：1Math.max(...array)
2) 从数组中删除重复项：1[...new Set(array)]
3）生成一个1到100之间的随机数：1Math.floor(Math.random() * 100) + 1
4) 检查字符串是否为有效数字：1!isNaN(parseFloat(string))
5）获取当前日期和时间：1new Date().toString()
6) 检查变量是否为数组：1Array.isArray(variable)
7) 检查一个变量是否是一个对象：1typeof variable === "object"
8) 将数组转换为字符串：1array.join(",")
9) 检查一个变量是否是一个函数：1typeof variable === "function"
10) 将对象转换为数组：1Object.values(objec ...
初探remix + xata + tailwind本项目是基于remix构建前端页面 + xata作为后端接口以及数据库支持的待办事项小应用demo(支持CRUD以及Authentication登录登出)
demo地址
Remix Docs
Xata.io
Tailwind Docs
使用1npm run install
1npm run dev
创建数据库
点击 Add database
创建两张表 user和resolution ,定义字段以及把user表和resolution关联上
数据结构如下
123456{ "id": "rec_abcdefg", "year": 2023, "resolution": "hi", "isCompleted": false,}
初始化 Xata
安装xata.io/cli npm install -g @xata.io/cli
启动 xata auth login
选择 Create a new API ...
再探Event Loop之前的认识Javascript 将所有代码作为单个线程执行（意味着一次只发生一件事，只有一个调用的堆栈）；但是，利用某些数据结构，你可以伪装一些多线程的表象（同时发生多项事件）。这种劣根性反而成为它的一种优势。因为它增加了JavaScript编程的简单性。
再一次的认识1.但是Web上的异步行为如何操作呢?JavaScript不是同步的吗?此时Event Loop开始登场发挥作用。在大多数浏览器中，每个选项卡都有一个单独的Event Loop，以避免阻塞整个浏览器的繁重处理。
2.microtask微任务是ES6等js语法规定的异步任务包含:process.nextTick()Promise callbackasync/await functionsqueueMicrotask
3.macrotask/Web APIs 宏任务是由浏览器规定的 包含: setTimeout(), setInterval(), setImmediate(), Ajax,fetch, DOM事件， 键盘/鼠标事件
4.微任务执行时机比宏任务要早
5.同步任务早于异步任 ...
浅谈react的Framer Motion实战
快速总结如果操作得当，css的动画也是非常强大的。然而，用CSS创建耳目一新的动画是很棘手的。接下来是 Framer Motion的到来。有了Framer Motion，你不需要成为一个CSS专家来制作花里胡哨的动画。Framer Motion为我们提供了开箱即用的动画和低成本API，我们可以恰当使用，将这些动画集成到我们的应用程序中。
在这篇文章中，我们将仔细看看Framer Motion如何帮助我们创建令人生畏的动画。我们将学习Framer Motion如何提高生产力。我们将研究如何使用Framer运动制作手势触发、定时和滚动动画。在此过程中，我们将使用我们所学到的东西来构建五个演示应用程序。
本教程将有提升那些对在React.js应用程序中集成动画的读者兴趣。
注意:本文要求对React和CSS有基本的了解。
什么是Framer Motion?Framer Motion github
Framer Motion 文档
Framer Motion是一个动画库，使创建动画变得容易。它简化的API帮助我们抽象动画背后的复杂性，并允许我们轻松地创建动画。
Framer Motion ...
Vless for Glitch搭建和部署Vless for Glitch
目录
项目特点
部署
鸣谢下列作者的文章和项目
免责声明
项目特点:
本项目用于在 Glitch 免费服务上部署 VLESS
集成哪吒探针，可以自由选择是否安装
部署完成如发现不能上网，请检查域名是否被墙，可使用 Cloudflare CDN 或者 worker 解决。
部署:
注册 Glitch
config.json 的 17 行修改 UUID
server.js 的 106 行修改自己的 URL， 44 行修改哪吒参数
部署成功后 velss ws 的路径为: /api，如要修改，可以寻找并替换 server.js 的 90、96、97 行里的 api
需要应用的 js
命令
是否必须
说明
/start
是
运行 vless
/nezha
否
运行哪吒
/api
否
查看 vless 运行结果 Bad Request 即是 OK
/status
否
查看后台进程
鸣谢下列作者的文章和项目:大佬 Nike Jeff 的 ...