2025-01-25 21:28:36
24 年公众号创作回顾，和大家一起分享一下。
当然还有红包封面！
| 发表67篇 | 最常晚上发 |
|---|---|
 |
 |
内容还是周刊为主，明年计划多分享点工作相关的技术文了！
| 关注情况 | 互动情况 |
|---|---|
 |
 |
四舍五入算完成去年（关注破千）的目标吧，感谢大家的支持！
🐚（蚌），去年也在互动榜上❤️。
微信公众号打开这个链接 或者微信扫码领取
公众号送了 1500 个红包封面
2025-01-19 20:22:42
欢迎来到第 117 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介
下面开始本期内容的介绍ღ( ´･ᴗ･` )比心，量大🍚。
又到一年认标的时候，看看今年有哪些新面孔吧！
与 2023 年一样，shadcn-ui 仍然是今年最热门的项目，继续蝉联榜首。
将组件代码直接放入项目源代码中，这和传统的组件库大不相同。
大火的另一原因是与 v0.dev（通过自然语言描述生成项目） 结合得非常好。
第二名是 Excalidraw 创建具有独特手绘风格的数字绘图画板，有AI 加持，自动生成模板图表。
第三名 AFFiNE 也是一个知识库和项目管理工具。
Bun 的话从前三掉出来了，2/3都偏应用。
再看一下其它细分的榜单：
| 前端框架 | React 生态 |
|---|---|
 |
 |
| Vue 生态 | 后端 / 全栈 |
|---|---|
 |
 |
| 工具 | 状态管理 |
|---|---|
 |
 |
大部分还是熟悉的面孔。
But，但除了几个主流的前端框架和库，大部分其它的在公司的💩⛰里都用不上
每一个案例都有视频讲解和一个小测试，下面是其中一个基础案例。
| Q：选择div下的h1 和 h2 | A：使用 :is 伪类更加灵活 |
|---|---|
 |
 |
当然还是有不少限制，比如不支持 tsconfig.json ,不支持未来特性的编译等。
有一个长字符串，并且希望保留开头和结尾并在中间截断，你可以试试这个。
一个在线工具，便捷的编辑和生成CSS动画缓动曲线。
站点还分类的提供了许多现成的示例。
收藏！
浏览器中实现 MacOS Finder，利用到了 OPFS（ Origin Private File System） - 浏览器中的文件系统 API，高性能且无需用户授权
往期提到过 opfs ，还是很有使用前景的技术
查看目录文件的终端工具。
可以设置成 ls 的别名，适应习惯。
alias ls=facad一个 Chrome 插件，用于管理 CSS 变量中色值。
如果网站主题色基于 CSS 变量实现，结合这个插件调色非常方便。
这个面板会添加到 Chrome 的开发者工具中。
环境 Node.js>=18 ok 的话，无脑升级即可。
当然需要注意的是，出于安全考虑，pnpm 不再运行依赖项的生命周期脚本。需要手动指定
{
"pnpm": {
"onlyBuiltDependencies": ["fsevents"]
}
}现在还处于早期阶段，目前仅支持基于 ARM 的 Mac。
编写 TS 使用 Bun 来执行与 Webview 交互。
文章介绍了如何利用 CSS 能力使文本在视觉上更加平衡，对 text-wrap 及其不同值的作用进行了深入的介绍。
拿下了24年框架榜 1 的明星项目
htmx 团队正在努力将其打造为新时代的 "jQuery"，希望模拟 jQuery 的技术特性，使其成为 Web 开发的高效低成本的工具包。
速度还不错！
周刊部分内容来源如下渠道，推荐大家关注。
2025-01-05 20:13:18
欢迎来到第 116 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介
下面开始本期内容的介绍ღ( ´･ᴗ･` )比心。
基于 Rust 开发使用 ICMP 协议的 Ping 工具, 支持多地址并发 Ping, 可视化图表展示, 数据实时更新等特性
nping www.baidu.com www.google.com www.sugarat.top -c 20 -i 2收藏就对了！
一套基于 motion（A modern animation library for JavaScript and React）的组件。
将 RSS 订阅源格式化为页面UI的展示形式，方便阅读。
console.trace()是一种非常实用的调试工具，能够清晰地展示调用堆栈信息，帮助开发者快速追踪代码的执行路径和函数的调用链
下面看一下对比，有如下代码
api.get('xx', {
searchParams: {}
}).json()
.then((v) => {
console.log('getPhotos', v)
console.trace('getPhotos', v)
return v.data
})本文主要回顾了一下从计算机诞生以来跨平台跨端的发展历程，并对演进过程中出现的主流跨端解决方案进行了介绍。
实现跨端的核心就是考虑在什么地方增加抽象中间层，通过封装的方式抹平各端的差异，对外提供统一的接口。
一次性完成的图标和网站 favicon 生成
整体流程比较简单，有 AI 帮助给予提示词。
周刊部分内容来源如下渠道，推荐大家关注。
2024-12-29 20:21:10
欢迎来到第 115 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介
下面开始本期内容的介绍ღ( ´･ᴗ･` )比心。
import assert from 'node:assert'
import fs from 'node:fs/promises'
import { mock, test } from 'node:test'
import { add } from '../src/math.js'
test('should add two numbers', () => {
const result = add(1, 2)
assert.strictEqual(result, 3)
// mock 返回结果
const mockImplementation = async (path) => {
return 'PORT=3000\n'
}
const mockedReadFile = mock.method(fs, 'readFile', mockImplementation)
})node --watch app.js
node --watch 'lib/**/*.js' app.js{
"packageManager": "[email protected]"
}corepack enable# 单个文件
node --env-file=./.env index.js
# 多个文件
node --env-file=./.env.default --env-file=./.env.development index.js在这之前 ESM 里获取方式如下
import url from 'url'
import path from 'path'
const dirname = path.dirname(url.fileURLToPath(import.meta.url))现在可以直接使用
const { dirname: __dirname, filename: __filename } = import.meta在这之前，你会这样实现一个 sleep
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}现在你可以直接使用
import { setTimeout } from 'timers/promises'
function sleep(ms) {
return setTimeout(ms)
}
sleep(1000).then(() => {
console.log('1s passed')
})将各种格式的文件转换为 Markdown 格式的在线工具，支持 Word、PDF、HTML、图片等格式。
还支持直接指定网页链接。
你可能会好奇图片怎么转 Markdown？验证了一下是转换成一段文本描述图片内容。
开源免费AI React组件构建器。
编写提示词，只需几秒钟即可创建功能完整的React组件！
浅尝了一下，效果没有 Bolt 好
还有另一样功能的 remove.bg，removebg.one
生成的文本可用于 img alt 属性填充，进而优化网站的 SEO。
周刊部分内容来源如下渠道，推荐大家关注。
2024-12-22 08:00:00
欢迎来到第 114 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介
下面开始本期内容的介绍ღ( ´･ᴗ･` )比心。
?? 空值合并运算符
replaceAll
toSorted
Promise.allSettled
Webpack 是使用最多的 JavaScript 工具，但不是最受喜爱的。这一头衔属于 Vite
各个库的满意度排名如下：
Vite 系包揽了大部分头衔：
文本片段（Text Fragment）允许你直接链接到 web 文档中的特定文本部分，而不需要作者使用 URL 片段中的特定语法对其进行注释
语法如下
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]比如你直接访问下面这个链接：
https://sugarat.top/weekly/2024-12-08.html#:~:text=接入
就能直接定位到网页中第一次出现这个文本的地方，浏览器自动为你高亮！
这篇文章介绍如何使用：https://alfy.blog/2024/10/19/linking-directly-to-web-page-content.html
主流浏览器基本都支持！又学到一手！
https://2024.ch3nyang.top/display
估计下周官方应该也会出年度报告了。
该站点汇集了单页网站的最佳示例（超过 8,500 个）！
先收藏吃灰
试了一下效果蛮不错的，如果需要用到一些提示音的场景，又不好找 demo 可以试试这。
周刊部分内容来源如下渠道，推荐大家关注。
2024-12-08 08:00:00
欢迎来到第 113 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介
下面开始本期内容的介绍ღ( ´･ᴗ･` )比心。
b.cjs
const { value } = require('./a.mjs')
console.log(value)原生支持又可以减少非必要的编译工作量了。
收藏！对于文本处理场景还是很有用。
一行命令搞定！
npx todoctor自动生成仓库中 TODO/FIXME 注释随时间的变化！
可以拿去跑一下自己的仓库看看。
emmm，为什么我仓库的TODO 越来越多！
1995 年 12 月 4 日推出的 javascript 语言!
emm，糊了6年 js 了！赚米必备语言。
下面有几个效果示例：
JSON 数据转成可视化。
const container = document.getElementById('json-tree')
container.innerHTML = generateJSONTree(jsonData)2 步就能搞定接入到自己项目中。
类似的项目还有 JSON CRACK. 支持可视化面板里编辑/折叠。
同时还支持压缩和格式转换。
周刊部分内容来源如下渠道，推荐大家关注。
