以后的开源简记都会有一个抽象标题 FingerprintJS FingerprintJS是一个用于识别不同网站访客的服务——即使是匿名访客 这有助于网站防止诈骗、取悦用户以及区分正常用户和“坏”用户 FingerprintJS识别准确率在40%-60% 官方商用版本:Fingerprint Identification,是一个闭源项目,官方承诺99.5%的准确率(因为收集了更多维度的浏览信息) PGlite Postgres的WASM构建版(最近WASM真的很火),可以很方便的实现在浏览器中临时/永久存储数据 支持标准SQL和NoSQL 后端同学:又可以把活丢给前端干啦 Svelte 前端框架又一力(xin)作(keng),带来了比Vue和React更简洁的语法 一个例子就可以看出有多简洁: <script> let count = $state(1); let doubled = $derived(count * 2); let quadrupled = $derived(doubled * 2); function handleClick() { count += 1; } </script> <button onclick={handleClick}> Count: {count} </button> <p>{count} * 2 = {doubled}</p> <p>{doubled}… Continue Reading 【开源简记】第四期——计算机寄术

Rust Course Rust语言圣经! 字里行间都能体会到作者的用心,相信看完项目作者对Rust的描述后你也会对这门语言感兴趣 作者大佬原话: 博主跟项目作者一样认为Rust会越来越受青睐,加之WebAssembly技术逐渐被应用到更多企业中,Rust作为性能可与C/C++比肩的语言…开学吧 Deno 一个JS/TS运行时环境,由于其现代设计和原生TS支持,吸引了许多新项目和开发者 与Node.js对比: 安全性 Node.js: 默认情况下,Node.js 没有任何安全限制,代码可以访问文件系统、网络等所有资源。 安全控制需要通过编写代码来实现,开发者必须自己处理权限管理和安全问题。 Deno: 默认情况下,Deno 运行在一个受限的环境中,不允许访问文件系统、网络、环境变量等资源,除非明确授予权限。 使用命令行参数来授予权限。 模块系统 Node.js: 使用 CommonJS 模块系统,模块通过 require() 进行导入。 依赖管理通过 npm(Node Package Manager),需要 package.json 文件。 Deno: 使用标准的 ES 模块(ESM),模块通过 import 进行导入。 没有中央包管理器,依赖直接通过 URL 导入,可以从任何地方加载模块。 TypeScript 支持 Node.js: 默认不支持 TypeScript,需要通过 Babel 或 TypeScript 编译器(tsc)等工具进行编译。 可以使用… Continue Reading 【开源简记】第三期

immich 厌倦了xx云每月支付?需要避免个人信息流露的风险? immich提供了强大的本地媒体文件管理功能,以及充满现代感的简洁UI与交互方式 Firecrawl Firecrawl提供了一系列工具用于高效进行网页爬取和数据读取,适用于各种需要从网站获取详细和有组织信息的任务 官方示例: playground Hyprland Hyprland基于Wayland协议,为Linux/类Unix系统用户提供高度可定制的动态窗口管理功能 NocoDB 一个将各种数据库转换为智能电子表格的开源软件,官方称自己是Airtable 的开源替代品 题外话:作为前端很喜欢这种现代简约风格的UI(分页器再扁平一点就好了 screenpipe 想回忆起自己在某个时间段做了哪些工作吗?亦或是想快速总结自己今天在计算机上做了什么? screenpipe可以全天候收集电脑中的媒体流信息,并借助AI分析用户想要了解的相关信息 官方示例:examples 打工人摸鱼难度++

LocalSend 基于flutter实现,一个非常实用的开源软件,用于局域网内设备的设备互相传输文件(博主本人也经常使用 NB, 这就去学Dart SuperVision 需要在媒体文件中对各种目标检测和分割模型生成的预测数据进行注释? SuperVision提供了一系列可复用工具来完成这件事情 Kamal Kamal提供了使用Docker在生产环境中部署和管理Web应用所需的一切,旨在简化Docker的部署 官方命令列表: Commands: kamal accessory # Manage accessories (db/redis/search) kamal app # Manage application kamal audit # Show audit log from servers kamal build # Build application image kamal config # Show combined config (including secrets!) kamal deploy # Deploy app to… Continue Reading 【开源简记】第一期

Tailwind介绍 前言 众所周知,CSS是一个相对简单且语法宽松的语言,虽然对开发者友好,但因为它过于“随意”且耦合性强(如height和line-height都会对元素的高度造成影响),如果开发时不做限制,对后续维护的人员来说将会造成“毁灭性打击”。 故为了样式代码的可读性,也为了减少维护人员受到的心理创伤,我们需要对CSS的编写做出限制 BEM命名规范 😀 一般来说,我们编写CSS时类名会遵循BEM命名规范,这种规范的特点是语义化、结构化、遵循开闭原则。参考知乎——CSS之BEM命名规范 “开闭原则”指对修改封闭、对扩展开放,是面向对象思想的重要基本原则 BEM规范存在的问题 😐 语义化的CSS类看似与HTML无关,但在嵌套的CSS选择器(如使用less时)中却反映出了具体的HTML结构。除此以外,CSS里还有很多会被父元素或子元素影响的属性,故将CSS与HTML解耦实际上是很困难甚至无法达成的 在处理两个外表相似的内容时(如下图的作者简介和文章预览),即使样式决策有99%是一致的,我们也很可能需要编写两个语义不同的类来赋予它们样式(如.author-bio和.article-preview),并且这两个类是几乎不可复用的 实际上,可以通过一些CSS预处理器的如 @extend 等功能实现复用,但会对后续维护造成很大的困扰 即便将类拆分到每个组件,使其不基于内容(如.card .button)虽然可以在一定程度上复用这些类,但当组件功能越具体,复用就会越困难(如.dialog-header__button) 给CSS类命名是令人费神的 原子类 原子类,指具有“原子性”的CSS类 在化学反应中“原子”是最小的单位,故“原子性”指具有不可拆解、不可更改的性质 示例: .flex { display: flex; } 上面的.flex就是一个原子类,它的特点就是一个类名对应一个CSS规则,并且类名应该是和规则有关系的 原子类的思想可以说与我们常用的BEM规范“背道而驰”,BEM强调的是语义化与将CSS从HTML的关注点分离(实际上很可能没有分离),而原子类几乎摒弃了语义化,通过使用提供的大量工具类使页面符合最终的设计决策 Tailwind基本概念 Tailwind就是一个采用了CSS原子类和“All in JS”思想的框架 “All in JS”指“HTML in JS”和“CSS in JS”,其中“HTML in JS”就是Vue、React等框架在做的事 框架特点 Tailwind 提供了一组可重用的 CSS 类,可用于几乎任何类型的 UI 组件和布局。 Tailwind… Continue Reading Tailwind 入门

原题:给定一个大小为 n 的数组 nums ,返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 进阶:尝试设计时间复杂度为 O(n)、空间复杂度为 O(1) 的算法解决此问题。 示例 : 输入:nums = [2,2,1,1,1,2,2] 输出:2 思路一 首先想到用哈希表记录每个元素出现的次数,然后遍历哈希表,次数最多的值即为答案,比较简单,在此就不放代码了 复杂度:需要遍历一次数组,一次哈希表,且需要哈希表存储最多 n/2 + 1 个元素,故时间复杂度O(n),空间复杂度O(n) 思路二 上面的思路不满足题目进阶要求中的空间复杂度O(1),仔细想想自己忽略了一个条件——多数元素出现次数大于 n/2。 要利用这个条件需要一个数学公式,令数组总长度为a,多数元素个数为b,在题目所给条件下有(证明在下方): \frac{b}{a} > \frac{1}{2},\frac{b – 1}{a – 2} > \frac{1}{2} 考虑每次从数组中取出两个不同的元素,由于多数元素出现次数大于 n/2,由上面的公式可知,在最坏情况,即每次都取出多数元素的情况下,取出两个不同元素后,数组的多数元素仍然不变 故可将上述思路转换为:将第一个元素设为候选多数元素,遍历数组并计数,若遇到不同元素,则将当前元素的计数减一(相当于取出两个不同元素),反之加一,元素的计数为0时将候选元素替换为下一个元素,最终剩下的候选元素即为我们需要的结果 代码: var majorityElement = function(nums) { let… Continue Reading 算法题记录——多数元素

原题:给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。返回容器可以储存的最大水量。 示例: 输入:[1,8,6,2,5,4,8,3,7] 输出:49 解释:图中垂直线代表输入数组 [1,8,6,2,5,4,8,3,7]。在此情况下,容器能够容纳水(表示为蓝色部分)的最大值为 49。 思路 看到示例第一时间想到用双指针解决,关键在于何时移动左指针或右指针,并更新结果的最大值 记左指针为lp,右指针rp,记[lp, rp]区间能盛水的值为 y,由短板效应易知 *y = min(height[lp], height[rp]) (rp – lp)** 初始时令lp = 0,rp = n – 1,假设某状态下height[lp] < height[rp],考虑此时如何移动指针 若将lp右移,则当 height[lp + 1] > height[lp]… Continue Reading 算法题记录——盛最多水的容器

一、JDK版本问题 由于之前开MC服务器时安装过Java1.20.x版本,后面在装Android SDK时就没注意安装相应的JDK版本,导致用yarn android启动时报错 错误信息: BUG! exception in phase ‘semantic analysis’ in source unit ‘BuildScript’ Unsupported class file major version 64 查了一会发现是JAVA版本过高导致的,降级成1.17.8后重新配置环境变量即可 二、Andriod SDK环境变量配置问题 一个低级错误= =,官方文档中已经写了要配置这些变量: %ANDROID_HOME%\platform-tools %ANDROID_HOME%\emulator %ANDROID_HOME%\tools %ANDROID_HOME%\tools\bin 自己配置时漏了一个%ANDROID_HOME%\emulator,导致启动时无法找到安卓模拟器,又报错,加上后解决 三、Andriod Studio下载速度过慢 虽然一开始就知道Android开发需要合理上网,下SDK速度挺快的,但下依赖的速度还是很慢,导致等了两个小时快下载完依赖的时候网络超时,又得重新下,因为不愿意再等两个小时,遂查找解决方法,发现gradle仓库源可以在项目里配置 将/android/build.gradle中的 repositories { google() mavenCentral() } 加上两行替换为阿里云源 repositories { maven{url 'https://maven.aliyun.com/repository/google'} maven{url 'https://maven.aliyun.com/repository/public'} google() mavenCentral() }… Continue Reading 记录搭建React Native环境时遇到的几个坑

原题:实现 copyRandomList 函数,复制一个复杂链表。在复杂链表中,每个节点除了有一个 next 指针指向下一个节点,还有一个 random 指针指向链表中的任意节点或者 null。 初步解决 思路:由于题目中的链表节点有一个随机指针,所以从头节点按顺序复制的话,可能出现指向的随机节点还没有被复制的问题,故考虑先按顺序复制,并将指针都设为null,用哈希表保存每个节点对应的副本,再将节点的指针连起来 代码(js): const copyRandomList = function(head) { if(!head) { return null } let curr = head const nodeMap = new Map() while(curr) { nodeMap.set(curr, {val:curr.val, next:null, random:null}) curr = curr.next } curr = head while(curr) { nodeMap.get(curr).next = nodeMap.get(curr.next) || null… Continue Reading 算法题记录——复杂链表的复制

问题来源 在实现某具有多级表头格的需求时,发现默认的单元格合并跟UI设计的不同,遂在网上寻找解决方法,于是发现了一个坑 网上的代码: <template> <el-table … :header-cell-style="setStyle" … > … </el-table> </template> <script> export default { … method: { setStyle({row, column, rowIndex, columnIndex}) { if (rowIndex === 0 && columnIndex === 0) { column.rowSpan = 2 } } } … } </script> 此时设置的rowSpan是不生效的 解决思路 因为网上搜到的代码基本都是这么写,故去看了下el-table的源码 table-header.js的render函数中相关源码如下 <th /* 此处设置了colSpan, rowSpan… Continue Reading 解决方案——el-table用header-cell-style回调设置rowSpan不生效