视野修炼-技术周刊第92期 | 薅牛毛

· 浏览次数 : 14

小编点评

欢迎来到第 92 期的【视野修炼 - 技术周刊】!本期为您精选了以下精彩内容: 1. YakShaving - 薅牛毛CSS OneLiners YakShaving 创作者 Antfu 在 Vue Conf 上分享了他在开源之路上遇到的挑战,以及如何通过社区合作解决这些问题。 2. CSS OneLiners 提供了一系列简单的单行 CSS 解决方案,帮助您为网页添加少量改进。 3. Vue Vine - 单文件编写多 Vue 组件 使用 `.vine.ts` 后缀,使用完整的 TypeScript 支持编写 Vue 组件。 4. CDN 流量被盗刷经历 一篇关于 CDN 流量被盗刷的经历和防范措施的教程。 5. es-toolkit 介绍了一个现代、高性能的 JavaScript 实用工具库,类似于 Lodash,支持常见的 Node.js、Bun Deno 等运行时。 6. console.log 体验优化 介绍了三个工具,可以在 IDE 中显示 console.log 的值和错误,提高代码的可读性。 7. 诗境 - 根据图片匹配诗句 一个有趣的项目,可以根据图片生成诗句。 此外,本期还推荐了一些关注前端技术的频道和资源,包括: - VueConf - 周刊 - 云谦的前端周刊 - 前端食堂 - 前端RSS - 技术博客 - FRE123 技术周刊精选 希望您能喜欢本期内容,祝您阅读愉快!

正文

欢迎来到第 92 期的【视野修炼 - 技术周刊】,下面是本期的精选内容简介

🔥强烈推荐

  1. YakShaving - 薅牛毛
  2. CSS OneLiners

🔧开源工具&技术资讯

  1. Vue Vine - 单文件编写多 Vue 组件
  2. CDN 流量被盗刷经历
  3. es-toolkit
  4. console.log 体验优化

🤖AI工具&资讯

  1. 诗境 - 根据图片匹配诗句

​也推荐大家关注一下最后的推荐内容(周刊的主要内容来源渠道)

下面开始本期内容的介绍,预计阅读时间 7 分钟。

🔥强烈推荐

1. YakShaving - 薅牛毛

antfu 在 Vue Conf 上的分享,讲述了他的开源之路,以及在做的过程中容易陷入薅牛毛的过程。

下面就是一个例子,挺形象的,大部分做开发的同学或多或少经历过。

利用“薅牛毛”:在解决问题的过程中,可能会引发一系列任务,这些任务可能会偏离原始目标。然而,这也可以看作是一个机会,通过集社区之力,完善解决方案,最终实现项目的成功。

视频的观点还有很多,非常建议对开源感兴趣的同学看看。

最后再看一下大佬的 耗牛地图,🐂 已经不足以形容的超级个体。

VueConf 完整 PPT 可以去会议官网获取

2. CSS OneLiners

一组简单的单行 CSS 解决方案,可为任何网页添加少量改进

挑2个来介绍一下。

① 限制视口中的内容宽度

body {
  max-width: clamp(320px, 90%, 1000px);
  margin: auto;
}

clamp 是一个 CSS 函数,用于创建一个范围内的动态值。

clamp(MIN, VAL, MAX) 等价于 max(MIN, min(VAL, MAX))

② 表单控件颜色以匹配页面样式

body {
  accent-color: #080;
}

🔧开源工具&技术资讯

3. Vue Vine - 单文件编写多 Vue 组件

使用 .vine.ts 后缀,能够使用完整的 TS 支持。

4. CDN 流量被盗刷经历

亏了 70 RMB,本文记录了一下这个过程,以及一些防治手段。

5. es-toolkit

现代的、高性能的 JavaScript 实用工具库 - 类似于 Lodash,支持常见的 Node Bun Deno 等运行时。

一个例子

// import from '@es-toolkit/es-toolkit' in jsr.
import { chunk, debounce } from 'es-toolkit'

const debouncedLog = debounce((message) => {
  console.log(message)
}, 300)

// 这个调用将会被防抖处理
debouncedLog('Hello, world!')

const array = [1, 2, 3, 4, 5, 6]
const chunkedArray = chunk(array, 2)

console.log(chunkedArray)
// 输出: [[1, 2], [3, 4], [5, 6]]

6. console.log 体验优化

console 很容易上手,但输出过多的上下文容易混乱不方便查看。

有 3 个工具,能够在IDE中的代码旁边显示 console.log 值和错误。

🤖AI工具&资讯

7. 诗境 - 根据图片匹配诗句

挺有趣的!

😛趣图


篇幅有限,如果你还没看够,可移步后面的推荐渠道,继续游览,历史周刊(<20)移步博客

⭐️强力推荐关注

与视野修炼-技术周刊第92期 | 薅牛毛相似的内容:

视野修炼-技术周刊第92期 | 薅牛毛

① YakShaving - 薅牛毛 ② CSS OneLiners ③ Vue Vine - 单文件编写多 Vue 组件 ④ CDN 流量被盗刷经历 ⑤ es-toolkit ⑥ console.log 体验优化 ⑦ 诗境 - 根据图片匹配诗句

视野修炼-技术周刊第57期

① Rspress - 基于 Rspack 的高性能静态站点生成器 ② We OCR - 支持离线使用的图片文字识别工具 ③ pnpm v8.9 - MacOS上带来更大的性能提升 ④ 用户体验:嵌套菜单! ⑤ Draggable objects - 详细介绍网页元素的拖拽实现

视野修炼-技术周刊第56期

① Vite 的现状与未来展望 ② Web版Photoshop ③ Console Ninja:console调试神器 ④ 为 Eslint 9.0 提前做准备 ⑤ 使用 documate 为 VitePress 文档站添加AI对话能力

铅华洗尽,粉黛不施,人工智能AI基于ProPainter技术去除图片以及视频水印(Python3.10)

视频以及图片修复技术是一项具有挑战性的AI视觉任务,它涉及在视频或者图片序列中填补缺失或损坏的区域,同时保持空间和时间的连贯性。该技术在视频补全、对象移除、视频恢复等领域有广泛应用。近年来,两种突出的方案在视频修复中崭露头角:flow-based propagation和spatiotemporal

【稳定性】稳定性建设之弹性设计

弹性设计为系统稳定性建设提供了一种新的视角和方法,它有助于提高系统的可用性、性能和安全性,同时也降低了维护和修复的成本和风险

研发三维GIS系统笔记/实现wgs84投影-002

四叉树代码修改完善 原来的代码中,没有使用投影转换,直接使用的是世界坐标(单位是米), CELLQuadTree::CELLQuadTree( CELLTerrainInterface* pInterface ,CELLQuadTree* parent ,const real2 vStart ,co

iOS视图控件的内容显示和离屏渲染流程

iOS中UI控件内容显示流程 UIKit界面组成 iOS中组成页面的各个元素基本来自UIKit,我们可以修改布局或自定义绘制来修改UIKit元素的默认展示。 UIView的页面显示内容有CALayer负责,事件的接收与响应由UIView自己负责。 为什么需要有这样的分工呢,原因是因为Mac上和iPh

.NET AsyncLocal 避坑指南

AsyncLocal 用法简介 通过 AsyncLocal 我们可以在一个逻辑上下文中维护一份私有数据,该上下文后续代码中都可以访问和修改这份数据,但另一个无关的上下文是无法访问的。 无论是在新创建的 Task 中还是 await 关键词之后,我们都能够访问前面设置的 AsyncLocal 的数据。

[转帖]SQL语言的分类总结

https://zhuanlan.zhihu.com/p/555596861 常用的SQL命令 数据定义语言DDL(Data Definition Language) create 、drop 、alter 主要为创建、修改、删除数据库的逻辑结构,其中包括表结构,视图和索引等。 create 创建数

PPT 稳妥选用字体

字体怎么选 商务报告PPT字体怎么选 广告宣传PPT字体怎么选 发布会PPT字体怎么选 教学课件PPT字体怎么选--小学以下 教学课件PPT字体怎么选--中学以上 印刷阅读PPT字体怎么选--数据公司 去哪下载 图片识别文字 美化案例 线框修饰 倒影效果 镂空效果 三维旋转字 B站 视频