Posts

背景在我的一个项目中，我使用了Vercel托管的PostgreSQL数据库来支持一个监控服务。然而，Vercel对超过100小时的活跃数据库连接实施额外收费，这对于成本敏感的个人开发者或小团队来说可能是一个负担。考虑到经济效益，以及我已经是Supabase的会员，我决定将数据库迁移到Supab...

概念模型 (Model)概念：模型是3D对象的表示，通常包含顶点、面、UV坐标等数据。模型可以是简单的几何形状，如立方体或球体，也可以是复杂的3D物体，如人物或建筑。用处：模型是3D场景中的主要元素，它们为场景提供结构和内容。纹理 (Texture)概念：纹理是贴在3D模型上的2D图像。它们为...

基础学习目标：了解三维相关概念和练习ThreeJS APIThree.js是一个基于WebGL的3D图形库，它提供了许多高级功能和工具，使得创建3D内容变得更加简单。学习资料：http://www.webgl3d.cn/ https://github.com/mrdoob/three.js/ ...

背景一款小sass产品，记录下开发过程，功能包含官网展示，谷歌授权登录，支付和浏览器插件。前置条件supabase 注册。paddle注册和申请，测试的时候可以用沙箱环境，也同样需要注册。google oauth 申请，要发布。开发流程简单打造一个官网，包含几个重要因素，用来申请google ...

Chrome 插件由不同的部件构造而成，包括：后台脚本、内容脚本、选项页、UI 元素以及各种逻辑文件。https://fasionchan.com/chrome-extensions/quick-start/getting-started/manifest插件由 manifest 定义，因此需...

Convince and Efficiencytypeslinux | ubantu | macOS | windows | AndroidsourcesCPU、Memory、I/O devicesHow to WorkAll controllers and CPU are sharing m...

一、注册 OpenAI访问 OpenAI 官网（https://openai.com/ ），在页面右上角点击“Sign up for OpenAI”按钮，进入注册页面。点击Account Name中填写昵称，填写邮箱地址，在Password中填写密码，最后点击Create account。点击...

Ibrahim John写的《 The Art of Asking ChatGPT for High-Quality Answers 》在此转载，分享同好。本书系统性地介绍了 ChatGPT 的提问方式，个人认为值得一读。文章目录简介第 1 章 提示工程技术简介第 2 章 说明提示技术...

总结换VPN节点 + 账号开 PLUS 可以解决99%无法使用的问题问题：登录出现"429 您受到速率限制"解决方案：网络问题，多次尝试切换节点问题：登录出现"我们检测到可疑的登录行为"解决方案：清除浏览器缓存，或者更方便的，直接新建无痕浏览器窗口，切换节点。问题：登陆的时候出现 Access...

OpenAI 的 ChatGPT 是一种强大的语言模型，能够生成文本、回答问题、翻译等。它的参数数量是决定其性能的关键因素。ChatGPT 参数数量指的是 ChatGPT 模型中的超参数数量。超参数是指在训练模型前需要预先设置的参数，而不是通过训练得到的参数。那么，ChatGPT 的参数数量对...

大家好！今天我非常荣幸能与大家分享关于ChatGPT的一些知识和经验。现在，让我们一起来了解如何运用这个神奇的工具。在这次分享中，我将从以下几个方面进行介绍：ChatGPT简介我的使用经验如何使用ChatGPTChatGPT简介ChatGPT是由OpenAI开发的一款基于GPT-4架构的大型语...

安装方式macOS / Linux 环境：curl -fsSL https://fnm.vercel.app/install | bash

在开发本地npm包时，经常需要改动东西，但又不知道改动是否正确，这时候大部分人可能会打包一版到项目测试，这显得既不优雅也很繁琐。其实npm官方已经提供了npm link这种软链调试方法。1. 软链熟悉linux应该比较清楚，也很好理解，其实就是一个跳转的映射。比如访问a，a存的是b的路径，那访...

参考文章：https://bftnagoya.hateblo.jp/entry/2022/06/08/174506本文只是对使用aws使用cognito自定义身份验证实践SNS的简单记录，参考文章如上。 用户在登录页面输入电话号码。身份验证挑战定义 Lambda 被执行并确定身份验证流程。 身...

nvm use 版本报错，出现exit status 1后面跟一堆乱码此时是因为无权限，cmd以管理员身份打开，再次使用nvm use 版本报错命令，成功切换。PS：因为遇到过太多次了！！每次都忘记！！特地记录一下！！

在开发地图组件的过程中，总是会遇到一些“奇怪”的问题导致渲染卡顿，对数据不敏感，或者特定的场景下才可能会才发现问题，需要花大量的时间去排查。因此简单搭建一个web性能监控，用于跟踪每次构建代码的渲染数据，便于及时发现问题。主要指标：首次渲染时长(FP)，首屏的渲染时长(自定义)，完整的渲染时长...

背景和目标：原demo（基于红牛地图）在拖动放大过程中，FPS在40-60之间，但目前线上的红牛地图只有10-30FPS，因此这次的测试目标是，定位webgl在大地图渲染卡顿问题，能让它达到原demo的渲染效果。改造过程：去掉react挂载因目标是做成一个库，所以需要去掉react挂载，改为v...

1. 源码简介官网简介：Easily load and persist config without having to think about where and how翻译：轻松加载和保持配置，而不必考虑在哪里以及如何加载和保持。其实就是方便加载和持久化用户配置。它会在用户配置目录下生成对...

参考链接：http://www.ruanyifeng.com/blog/2018/06/javascript-this.htmlhttps://segmentfault.com/a/1190000020013532https://juejin.cn/post/69687132838849740...

1. 源码简介官网简介：Install package programmatically. Detect package managers automatically (npm, yarn and pnpm)简单理解，就是用于检查包管理器，自动安装依赖。https://github.com/a...

数组：查找 O(1)，修改/插入 O(n)链表：插入/修改O(1)，查找O(n)，它的结构是 Node { value值, next指针}

使用的环境为Vite+Vue3+TypeScript。

来源：https://zhuanlan.zhihu.com/p/358378689背景在 JavaScript 中，除了最基础的 Object 是该格式外，ES6 新增的 Map 也同样是键值对格式。它们的用法在很多时候都十分接近。不知道有没有人和我一样纠结过该选择哪个去使用呢？在本菜最近的项...

来源：https://segmentfault.com/q/1010000022457622箭头函数不是没有 arguments ，而是没有自己的 arguments ，自己的这个限定语很重要。function foo() { setTimeout(() => { conso...

参考文章：【NewName】https://juejin.cn/post/7091455593340207134这一期源码跟着underscore学防抖。debounce防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。实现原理防抖的处理可以通过s...

学习目标模仿学习组件库的 message 组件，知道组件原理主要是学习函数式调用 message (动态挂载) ，单例调用。源码浅解vue3 message源码地址知识点定时清除功能函数实现，如果 props.duration > 0，说明需要定时清除，duration毫秒过后，且visibl...

1. 源码简介yocto-queue在上一期 p-limit 里用被引用到，粗略理解是封装的一个队列数据结构的包，队列是种数据结构，遵循先进先出原则。官方简介：Tiny queue data structure。官方提示了一句，You should use this package inste...

1. 源码简介官网简介：Run multiple promise-returning & async functions with limited concurrency简单理解，控制有限的并发数量，运行多个promise-returning和async functions。就是常见的控制并发...

1. 源码简介官方简介：A simple JavaScript utility for conditionally joining classNames together.我理解为是一个动态将class name连接起来的库。（注意：它不是react官方的那个className属性）该clas...

1. 源码简介await-to-js 可谓久仰大名了，但没有用过。官方简介其功能为：Async await wrapper for easy error handing，我大概理解为 async await 的一个错误包装器。相信不少人面试被问到过，怎么捕获async await的错误吧，我第...

一个由 apifox 的接口文档生成 typescript 声明的小工具，记录一下开发过程。背景项目想要接入 typescript 开发，但维护接口的 typings 是一个繁琐且重复的过程，在观察后端提供的接口文档(基于 apifox 平台)，发现它的数据构成有一定的规律，且后端的接口规范良...

1、进程和线程1.1 什么是进程？>进程就是CPU分配的最小单位，字面意思就是进行中的程序，我们可以理解为进程就是一个独立运行并且拥有自己的资源空间的任务程序；CPU可以有很多进程，我们的电脑每打开一个软件就会产生一个或多个进程，为什么电脑运行的软件多就会卡，是因为CPU给每个进程分配资源空间...

1. let/const/var的区别给全局添加属性：var声明的变量会挂到window上，而let和const不会重复声明：同一作用域var可以重复声明，let和const不会块级作用域：let/const声明可以形成作用域，不能跨块访问暂时性死区：使用let、const命令声明变量之前，该...

常见网站性能指标FP 白屏（First Paint Time ）： 从页面开始加载到浏览器中检测到渲染（任何渲染）时被触发（例如背景改变，样式应用等）FCP 首屏（first contentful paint ）：从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。 （关注的焦点是内容，这个...

川哥的源码解读文章：https://juejin.cn/post/70183448668117401731. 源码简介create-vue使用npm init vue@next一行命令，就能快如闪电般初始化好基于vite的Vue3项目。简单来说，create-vue就是一个脚手架。本次源码解读...

1.介绍这期读两个源码 mitt 和 tiny-emitter，【发布订阅】的设计模式，周下载量都是在百万级别的，实现原理差不多，mitt 是用 Typescript 实现的，tiny-emitter 是 javascript，且已经三年没更新了（说明比较稳定😃）。【发布订阅】的思想是，订阅...

1. 源码简介validate-npm-package-name 作用：检测 npm 包的名称是否符合标准简单例子： var validate = require("validate-npm-package-name") validate("some-package") validate("...

1. 源码简介update-notifier 作用：Update notifications for your CLI app （检测 npm 包是否有更新）。本质就是开了 child_process 运行在后台，如果检查到有可用更新版，会将结果保存在 .update 属性中。简单例子： co...

双指针，指的是在遍历对象的过程中，不是普通的使用单个指针进行访问，而是使用两个相同方向（快慢指针）或者相反方向（对撞指针）的指针进行扫描，从而达到相应的目的。

适用场景二分查找描述了在有序集合中搜索特定值的过程。成功的二分查找的 3 个部分预处理 —— 如果集合未排序，则进行排序。二分查找 —— 使用循环或递归在每次比较后将查找空间划分为两半。后处理 —— 在剩余空间中确定可行的候选者。3 个二分查找模板第一个模板var search = funct...

来源：https://blog.csdn.net/zz_jesse/article/details/101048418为什么要服务端渲染首屏等待在 SPA 模式下，所有的数据请求和 Dom 渲染都在浏览器端完成，所以当我们第一次访问页面的时候很可能会存在“白屏”等待，而服务端渲染所有数据请求和...

【Flutter】开发基础

参考链接：https://juejin.cn/post/6844904002799288334基本类型是不存在深拷贝和浅拷贝的，因为基本类型是不可变的，无论是修改、重新赋值、赋值给别的变量都是一个新的值，和原来的值再无关联。引用类型因为是地址引用，所以会存在深拷贝和浅拷贝。浅拷贝创建一个复制对...

JS 中的 this 代表的是当前行为执行的主体。JS 中的 context 代表的是当前行为执行的环境(作用域)。this 指向和函数定义和执行环境都没有任何的关系，只与执行者(调用者)有关系。如何判断 this 指向函数执行，先看函数名前是否有"."，如果有，this 的指向就是"."前面...

背景需求如下图，就一个弹窗，里面的内容随着内容溢出，需要显示滚动条，使用户更好地感知下面还有内容。解决过程刚开始一看，这不很简单吗，给content区域加个 overflow-y scroll; 就完事了。搞完之后在谷歌浏览器的模拟手机面确实成功了，以为OK，但放到真机上面一看，滚动条却没有...

概述Docker 作为轻量级虚拟化技术，拥有持续集成、版本控制、可移植性、隔离性和安全性等优势。项目使用 Docker 来部署，它的实现过程主要由以下几个步骤组成：创建项目，打包构建项目静态资源 (yarn build)基于 nginx docker 镜像构建成一个前端工程镜像基于这个前端工程...

参考文档：https://www.anspoon.com/tree-command-generate-directory-structure-1701.html语法：TREE [drive:][path] [/F] [/A]参数描述drive:指定包含要为其显示目录结构的磁盘的驱动器path指...

对应的 GitHub issue：https://github.com/vitejs/vite/issues/1361在搭建过程中运行得好好的，突然安装了vuex之后，再重新运行 yarn dev 就报错了，整得我一脸懵逼，风中凌乱。于是我去找 Vite 的官方文档：https://githu...

文章来源：https://juejin.cn/post/6978035248487464974在 vue3 的项目当中，有时候需要使用ref 获取到组件的实例对象。 当结合 typescript 使用时就需要进行类型的定义才能访问到实例的成员。就我目前知道的就有三种方式自定义类型使用 Inst...

概念Django 是一个轻量级的 Python Web 框架MTV架构Django 的 MTV 架构设计如下，它跟常见的 MVC 架构是不太一样的。M-Model 跟数据库交互T-Template 动态HTML文件里不变的部分，静态内容V-View 实际上包含了业务的逻辑，相当于是用户请...

川哥的源码解读文章：https://juejin.cn/post/6959348263547830280🌹 非常感谢川哥组织的源码阅读活动1. 解读前的准备1.1 粗略阅读一遍川哥的源码解读文章，弄清楚文章的主旨内容：探究 vue-devtools「在编辑器中打开组件」功能实现原理，它的核心...

【若川】Vue3 源码基础工具函数解读链接：https://juejin.cn/post/69949762810538885191. 解读前的准备粗略阅读了川哥的文章之后，感觉这期跟上一期不一样。上一期主要学习如何实现某个功能，而这一期主要是学习 Vue3 源码中的工具函数，以及 Vue3 源...

【若川】Vue3 Release 源码解读：https://juejin.cn/post/69979431928510546061. 学习目标和资源准备这一期阅读的是 Vue3 源码中的 script/release.js 代码，也就是 Vue.js 的发布流程。在上一期源码阅读中从 .git...

【若川】koa 洋葱模型实现：https://juejin.cn/post/7005375860509245471【函数式编程指北】：https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch5.htmlhttp...

【若川】浅析 koa 洋葱模型和 co 原理：https://juejin.cn/post/6844904088220467213【明海Zzzz】co 源码解析：https://juejin.cn/post/6844903472362422286【骁】 co 库源码：https://www.y...

目录环境要求Vite + Vue3 搭建初始化路由 Router 的安装和配置配置 tsx 支持less 的安装和使用样式统一引入ElementUI 的安装和使用vite 配置路径别名i18n 配置多语言设计系统的 Layout UI设计菜单栏+权限控制设计 API 目录配置 mock功能页面...

有空再整理整理最近有个项目想从 vue2 转换成 vue3 + TS，虽然 vue3 也兼容 vue2 的语法，想尝试一下使用 Composition API 改一下。废话不多说，这里简单记录一下学习笔记。Vue 有两种语法，一种是 Options API，就是我们熟悉的 data + 生命周...

来源：【戴嘉华】https://segmentfault.com/a/1190000002593432Polyfill 或者 Polyfiller，是英国 Web 开发者 Remy Sharp 在咖啡店蹲坑的时候拍脑袋造出来的。当时他想用一个词来形容"用 JavaScript（或者Flash之...

来源：【徐小夕】https://juejin.cn/post/6844904074433789959在使用 hooks 和函数组件编写组件时，第一个要考虑的就是渲染性能。比如，在函数组件中使用 setState 都会导致组件内部重新渲染： 当在容器组件手动更新了任何 state 时，容器内部的...

【React Hooks 入门教程系列】：http://ourjs.com/wiki/view/react-hooksReact 函数组件本身不包含状态和生命周期，因此需要使用一些 Hooks （钩子）函数来实现状态保持、状态共享和状态传递。1. useState可以通过 useState 为...

文章：https://segmentfault.com/a/1190000023943952文章仅为记录学习所用1. ! 非空断言操作符在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型。具体而言，x! 将从 ...

问题描述VSCode 使用了 ESLint 插件和 Prettier 插件，Prettier 格式化的效果与项目的 ESLint 配置效果冲突。目标用编辑器的 Prettier 插件来美化代码，ESLint 插件来检查代码质量。解决// .eslintrc { "extends"

来源：https://blog.igevin.info/posts/common-binary-search/仅为学习记录所用二分查找算法的思想很容易理解：对于一个排好序的数组，通过检查数组中间位置元素值与 target 的大小，缩小数组的长度范围，直到找到 target，或达到循环退出条件后...

来源：https://zhuanlan.zhihu.com/p/95747836仅为记录学习所用双指针是一种思想，一种技巧或一种方法，并不是什么特别具体的算法，在二分查找等算法中经常用到这个技巧。具体就是用两个变量动态存储两个或多个结点，来方便我们进行一些操作。通常用在线性的数据结构中，比如链...

1. 整体架构我们已经搭建好了 npm 私有库：https://www.yuque.com/apukj/npm/rip8wg，但光是有私库是不够的，考虑到私库需要迭代，也需要提供使用说明，因此我们还需要一个存放私库源码的 git。这个仓库用于维护私库的基础信息，使用方法，在线demo，同时它也...

大部分转载于【浪里行舟】https://juejin.cn/post/6844903744518389768问题背景在开发中导入模块经常使用 require 和 import，导出模块使用 module.exports/exports 或 export/export default，有时候引用...

2021/07/24 难度：中等 https://leetcode-cn.com/problems/rotate-array/题目原题目最好去链接看详情，这里只简单展示题目，不展示详细的例子信息，仅做记录展示。给定一个数组，将数组中的元素向右移动 k 个位置，其中 k 是非负数。尽可能想出...

文章转载于：https://segmentfault.com/a/1190000008398819前端常见 dependency，devDependency，peerDependency，在开发组件库的时候分不清他们之间的关系，所以在查阅了一些资料后，简单记录一下。dependency 与 d...

/** * 像栈一样，队列（queue）也是表 * 使用队列时插入在一端进行而删除在另一端进行，遵守先进先出的规则 * 队列的基本操作是入队（enqueue）:它是在表的末端(队尾(rear)插入一个元素。出队（dequeue）:出队他是删除在表的开头（队头(front)）的元素。 *...

/** * 栈模型 * 栈（stack）是限制插入和删除只能在一个位置上进行的表 * 该位置是表的末端叫做栈的顶（top） * 对栈的基本操作有 push 进栈和 pop 出栈，前者相当于插入，后者则是删除最后插入的元素 */ class Stack { constructor(...

2021/07/23 难度：简单 https://leetcode-cn.com/problems/remove-duplicates-from-sorted-array题目给你一个有序数组 nums ，请你 原地 删除重复出现的元素，使每个元素 只出现一次 ，返回删除后数组的新长度。不要...

JS中内存分类栈内存用来提供一个供JS代码执行的环境，也就是作用域（全局作用域/局部作用域）堆内存用来储存引用数据类型的值，对象储存的是属性名和属性值，函数储存的是代码字符串(待考究)堆内存对象数据类型/函数数据类型在定义时会开辟一个堆内存，堆内存地址值被外界所引用的话，我们就说这个内存被占用...

全局作用域当浏览器加载HTML的时候，会提供一个供全局JS代码执行的环境 -> 全局作用域(global/window)预解析(变量提升)在当前的作用域中，JS代码执行之前，浏览器会把所有带var/function的代码进行提前声明(declare)或定义(defined)理解声明和定义var...

1. 修改 .gitignore 规则后不生效的解决办法在项目过程中，我发现每个目录都会自动生成一个 .DS_Store 文件。这个不是我想要的文件，对于项目没有任何帮助。因此我们想要忽略掉这个文件，不让它提交到版本库中去。可是修改了 .gitignore 文件之后，发现并没有生效。+ .DS...

梳理一下 JS 的几种实现继承的方式1. 原型链继承我们从上一章知道，在 new 运算符操作的时候，会将实例原型（Child.prototype）指向构造函数的原型（Parent.prototype），这样 child1 就可以访问到构造函数原型中的属性，实现了继承。

1. new 运算符描述new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。它在运行的过程中，会进行如下的操作：创建一个空的简单 JS 对象（即{}）链接该对象（设置该对象的 constructor）到另一个对象 将步骤1新创建的对象作为 this 的上下文如果该函数...

1. 原型prototype每个函数都有一个 prototype 属性（PS：prototype 是函数才会有的属性噢），比如：function Car() {} Car.prototype.color = 'black'; var car1 = new Car(); var car2 = n...

背景：下载 PDF 文件，并允许用户打开问题：文件名带有中文，导致文件名称被转码，同时文件名称也包含了其他字符尝试解决方案：1. 使用 FileSystemManager.rename()，在模拟器能写入，但在Android，iOS 都无权限最终采用方案：wx.downloadFile({ ...

问：老版本的 React 中，为什么写 jsx 的文件要默认引入 React ? 如下：import React from 'react' function Index(){ return <div>hello,world</div> }答：因为 jsx 在被 babel 编译后，写的...

我们写的 JSX 终将变成什么首先了解 React.createElement 做了什么：第一个参数：如果是组件类型，会传入组件对应的类或函数；如果是 dom 元素类型，传入 div 或者 span 之类的字符串。第二个参数：一个对象，在 dom 类型中为标签属性，在组件类型中为 props ...

需求背景做私有库的工具有很多，如上一篇介绍的轻量级的npm包管理工具verdaccio。但刚好maven私服用的是nexus，所以最后选择了nexus来做npm的私服，和maven一套便于维护。-------------------------------------------------n...

需求背景平时在项目工作中可能会用到很多通用性的代码，比如，框架类、工具类以及公用的业务逻辑代码等，通过打包发布到npm中央仓库或者私有仓库，来进行维护和托管代码，方便公用代码的使用。如果涉及到不方便公开的代码组件可以发布到私有仓库。私有 npm 组件库的优势：私有 npm 包只对公司内部局域网...