嘿嘿不务正业_社区达人页

2023年04月

• 04.21 22:44:40
  发表了文章 2023-04-21 22:44:40

  阿里云 AIGC 白嫖 FC 搭建 stable diffusion

  下午瞎逛在 V 站看到阿里在做推广，正好这几天在研究 stable-diffusion，就进去看了看，活动地址： https://developer.aliyun.com/topic/aigc 。 主要就是阿里云的 FC 免费提供 3 个月的试用（注意，只有 150 元额度，所以重度使用可能一会就玩没了），可以快速搭建 AiGC 服务。

2022年10月

• 10.18 16:14:35
  发表了文章 2022-10-18 16:14:35

  css steps 动画的使用 - 雪碧图动画

  之前在时间函数那篇文章里有写到 css 动画除了支持贝塞尔曲线绘制平滑动画外，还支持使用 steps 来绘制定格/逐帧动画，但是一直没想到使用场景，直到前两天在网上看到一篇说合金弹头的帖子，突然想起来可以使用逐帧动画配合雪碧图，就可以很轻松的实现游戏中常见的雪碧图动画了，说干就干，下面我们一起来试一下。

  
• 10.18 16:12:28
  发表了文章 2022-10-18 16:12:28

  babel - 现代前端开发人员躲不开的技能点

  babel 作为前端生态圈举足轻重的一员，在前端工程化等领域起着非常重要的作用。今天一起来看看那些常见的 babel 使用场景，看一看 babel 的生态圈有多庞大。

  
• 10.18 16:11:31
  发表了文章 2022-10-18 16:11:31

  一文看懂 babel - 为何诞生、做了什么、怎么做的

  babel 在前端快速发展的最近几年，为前端的工程化提供了莫大的帮助，解决了前端各种浏览器兼容问题导致的 js 崩溃，让我们可以放下的用上新的各种 es6、es7 等新语法，今天聊一聊 babel 的工作原理。

  
• 10.18 16:10:25
  发表了文章 2022-10-18 16:10:25

  用 JS 解析 excel 文件需要分几步

  今天来聊一聊如何使用 JS 来解析 excel 文件，当然不是直接使用 exceljs、sheetjs 之类的库，那就没意思了，而是主要说一下 JS 解析 excel 表格是如何实现的。注意本文主要讨论 xlsx 格式的 excel 表格，其它格式未探究并不清楚。
• 10.18 16:08:32
  发表了文章 2022-10-18 16:08:32

  如何实现上传文件到 nodejs 和文件下载

  最近拿 next.js 做个全栈项目，需要文件上传和下载，这里记录下实现方式，也写一下使用原生 node 代码如何实现。
• 10.18 16:07:18
  发表了文章 2022-10-18 16:07:18

  直接在前端做 zip 压缩/解压

  前段时间研究前端是如何解析 excel 表格的时候了解到 jszip 这个库，可以直接在前端对 zip 包进行压缩和解压缩，今天稍微水一篇。
• 10.18 16:05:49
  发表了文章 2022-10-18 16:05:49

  复刻解析一个流光溢彩炫到掉渣的 CSS 动画按钮

  最近在看 next.js 官网是被引流到 conf 页面，发现上面有一个炫酷的按钮，按钮的边框色彩不断变动给人感觉是光在随着按钮旋转一般，感觉挺酷的，复刻一下讲解下原理。

  
• 10.18 16:02:29
  发表了文章 2022-10-18 16:02:29

  next.js 源码解析 - getServerSideProps 篇

  老规矩，昨天写了关于 getServerSideProps 的内容，今天趁热写一下 getServerSideProps 相应的源码，看看 next.js getServerSideProps 是怎么实现的，还有什么从文档无法知晓的细节。

  
• 10.18 16:01:14
  发表了文章 2022-10-18 16:01:14

  一起来学 next.js - getServerSideProps 篇

  getServerSideProps 是 next.js 中的一项特色功能，可以让我们在给页面设置一些初始的 props 参数。

  
• 10.18 15:59:57
  发表了文章 2022-10-18 15:59:57

  MutationObserver - 监听你的 DOM 是否有变动

  MutationObserver 可用来监视 DOM 的变化，算是一个比较老的 API，但是却鲜为人知，他的前身是 MutationEvent：一系列监听 DOM 变更的 event 事件 - DOMAttrModified、DOMNodeInserted、DOMSubtreeModified 等。
• 10.18 15:58:48
  发表了文章 2022-10-18 15:58:48

  ResizeObserver - 监视 DOM 大小的变化

  ResizeObserver 用于监听元素的大小尺寸变化，常见用于监听自适应大小的元素变化引起的宽高变化时处理应宽高变化而需要 JS 做特定处理的场景。
• 10.18 15:56:58
  发表了文章 2022-10-18 15:56:58

  IntersectionObserver - 监视你的 DOM 元素相交

  IntersectionObserver 用于监听元素是否进入视口（与视口是否存在相交），在图片懒加载等场景中被广泛应用，不过除了这个基础的用法，他还有更强大的能力。
• 10.18 15:54:57
  发表了文章 2022-10-18 15:54:57

  制作了一个马赛克图片转换器 - 实现篇

  上文有讲到我制作了一个马赛克图片转换器，可以将图片转换成马赛克风格，并可转换为 css box-shadow 进行输出。

  
• 10.18 15:51:56
  发表了文章 2022-10-18 15:51:56

  制作了一个马赛克图片转换器

  制作了一个马赛克图片转换器，可以将图片转换成马赛克风格，并可转换为 css box-shadow 进行输出。

  
• 10.18 15:45:34
  发表了文章 2022-10-18 15:45:34

  你好，CSS “正则”了解一下

  虽然题目讲的是 CSS 中的正则，但是这加了引号的正则其实只和正则有一半的关系，而且还是个阉割版，但是，请不要因此就小瞧了它，有时候能够有奇效。
• 10.18 15:42:17
  发表了文章 2022-10-18 15:42:17

  独家配方 - Promise 使用小技巧

  虽然现在前端开发中大部分的异步代码中的回调都在慢慢的被 Promise 所取代，然而大部分的原生 API 和一些库都还只有回调的调用方式。于是很多时候我们需要将一些库、原生 API 转换成 Promise，此时不可避免的就是写一个 Promise 将其包裹

  
• 10.18 15:40:56
  发表了文章 2022-10-18 15:40:56

  一起来学 next.js - API 路由篇（轻松做全栈？）

  next.js 作为最热门的 react 框架，不过这么久了好像国内使用率一直不太高。最近在研究做个小项目正好做下笔记，有兴趣的可以一起来学习。

  
• 10.18 15:39:34
  发表了文章 2022-10-18 15:39:34

  嘿，朋友，其实 CSS 动画超简单的 - 时间函数篇（贝塞尔曲线、steps，看完还不懂算我输）

  时间函数在 CSS 动画中至关重要，它会直接影响到动画的展现效果，然而由于相对其它属性而言较为复杂，可能了解的人较少，今天详细讲一讲时间函数。

  
• 10.18 15:36:12
  发表了文章 2022-10-18 15:36:12

  嘿，朋友，其实 CSS 动画超简单的 - 渐变动画篇

  经常遇到有同学看到动画时会疑问动画是怎么做出来的，或是为什么自己写不起作用，或是为什么和预想的不一样等问题。于是决定写一写关于 CSS 动画的系列文章，本篇为第一篇。

  
• 10.18 15:34:12
  发表了文章 2022-10-18 15:34:12

  手把手用 CSS 绘制一个忽闪忽闪的可爱小幽灵

  通过几个 div 的拼接，和 css 的样式加成，便可制作出这样一个可爱的小幽灵。下面一起看下制作过程吧。

  
• 10.18 15:32:00
  发表了文章 2022-10-18 15:32:00

  给我一个 div + 三行 css，还你一个超级马里奥

  要绘制马里奥，我们需要照着图，将图进行格子化，然后一个格子一个格子的绘制。。。。 那是不可能的！ 作为一个程序员，这么多色块都要手动绘制，开玩笑，这不是折磨人吗。

  
• 10.18 15:23:14
  发表了文章 2022-10-18 15:23:14

  十行代码即可为你的网站添加语音小助手，无需任何外部依赖

  前面一篇文章有讲到通过 Web Speech API 来朗诵诗歌，写了个诗歌朗诵的小网站。 而 Web Speech API 除了语音输出外，还支持语音识别，你可以通过 Web Speech API 收集用户的语音指令，为你的网站添加一些有趣的功能：比如在小说阅读网站上添加语音指令，让你可以语音控制翻书、下一章等，让你可以更方便的一边看小说一边吃薯片。🐶

  
• 10.18 15:21:59
  发表了文章 2022-10-18 15:21:59

  乱花迷人眼 - 一文彻底看懂 package.json 中的各种 dependencies

  package.json 中存在各种各样的依赖定义：dependencies、devDependencies、peerDependencies、optionalDependencies、bundleDependencies，很容易让初学的开发者晕头，到底有什么区别。

  
• 10.18 15:20:38
  发表了文章 2022-10-18 15:20:38

  玩转 GitHub profile - 打造自己的特色 GitHub 主页（交友利器🐶）

  Github 作为全球最大程序员交友网站，大家在上面交友时一个具有个人特色的自我介绍自然是少不了的。🐶 今天介绍下 GitHub 的一项特色功能 - GitHub profile，以及一些列开源工具、项目来帮助打造自己特色的 GitHub profile。 GitHub profile 也是最近两年 GitHub 才新加的功能，开发者可以通过编写 README 打造属于自己的个人 GitHub 首页。

  
• 10.18 15:18:20
  发表了文章 2022-10-18 15:18:20

  朋友，进来刷点 try-catch 看看你能全对吗（答应我，请务必看到最后 🫣）

  随着这几年前端的高速发展，前端逻辑的复杂度越来越高，质量要求越来越高，再加上 async、await 的横行，try-catch 在前端的使用率越来越高。然而 try-catch 中可能隐藏着一些不为人知的小秘密㊙️，今天一起通过几道小题目看看这些秘密㊙️。

  
• 10.18 15:13:09
  发表了文章 2022-10-18 15:13:09

  玩转 GitHub Actions

  GitHub Actions 是 GitHub 中提供的自动化功能，通过它可以方便的在你提交代码、发送 PR 等各种事件触发时触发一系列自动化操作，完成 CI/CD、辅助机器人等功能，解放双手。

  
• 10.18 15:11:52
  发表了文章 2022-10-18 15:11:52

  玩转 GitHub Pages

  pages 是 github 提供的静态页面服务，你可以使用他来为你的项目提供文档页面、搭建 blog 以及任何其它静态页面。
• 10.18 15:10:07
  发表了文章 2022-10-18 15:10:07

  我写了个诗词朗诵网站

  诗词数据主要来自这个 chinese-poetry 库，其中包含了几十万首唐诗宋词，然而里面主要是静态数据，要直接用在站点要么得搞个服务端、要么得直接把数据都扒下来，然后无意间在该库的网站中找到了关于今日诗词 API 的鸣谢。然后果断使用了今日诗词 的 API。

  
• 10.18 15:06:27
  发表了文章 2022-10-18 15:06:27

  React 组件文档套件设计

  在编写 React UI 组件时为了方便开发者使用组件，我们经常会使用文档系统来自动生成组件文档和定义文档。开源中比较出名的是 storybook，还有 react-styleguidist。
• 10.18 15:05:17
  发表了文章 2022-10-18 15:05:17

  为了降低维护成本（早点下班），我在组件开发中所做的那些优化（偷懒）

  组件开发中为了稳定性、健壮性，经常需要为组件编写测试用例，然后还要为了开发者方便使用编写文档，都是非常耗时间的差事。作为一个独立维护组件库的程序员，为了能够降低组件维护的成本（早点下班），我总结了一下自己过去几年为了让组件开发更加高效所做的那些事情（偷的那些懒）。

  
• 10.18 15:03:46
  发表了文章 2022-10-18 15:03:46

  this 其实很简单

  经常在群里看到一些初学前端的兄弟对 this 一知半解，其实 js 中的 this 真的不算难理解，this 本身是一个面向对象编程中的概念，指的就是调用方法的对象。
• 10.18 15:02:23
  发表了文章 2022-10-18 15:02:23

  孤陋寡闻了，才知道已经可以用 JS 来控制 CSS 动画了

  最近翻 MDN 突然发现一套叫 Web Animations API 的东东，点进去看才知道，原来是一套控制 css animation 的 API，而且已经有段时间了 🤦‍♂️，而我居然一直不知道。

  
• 10.18 15:01:07
  发表了文章 2022-10-18 15:01:07

  扫盲 CSS 中的单位

  在 CSS 中，对于尺寸属性的值一般可以分为以下几类：关键字、数值、百分比。关键字一般有 initial、unset 等，百分比则是相对值，常见的是相对于上级 BFC 元素的比例。当然还有包括纯数字值的如 line-height 可以为纯数字，本文主要讨论常见数值。
• 10.18 14:57:51
  发表了文章 2022-10-18 14:57:51

  写开源组件库需要知道些什么

  本文总结下近几年维护公司开源 React 组件库的一些经验。

  
• 10.18 14:56:08
  发表了文章 2022-10-18 14:56:08

  benny 介绍 - 一个简单的 benchmark 框架

  benny 是一个简单的 benchmark 框架，当你需要测试自己的库或是方法性能时，可使用它来进行对其进行基准测试。

  
• 10.18 14:54:34
  发表了文章 2022-10-18 14:54:34

  React 实时预览 - react-live 源码解读

  react-live 是一个 react 的实时编辑器，可直接编辑 react 代码，并实时预览。

  
• 10.18 14:50:00
  发表了文章 2022-10-18 14:50:00

  PACE - 为你的网站添加页面加载进度条

  pace-js 是一个为网站添加页面加载进度条的库，可以为任意网站自动添加上页面加载进度条，提供了多种主题样式。

  
• 10.18 14:40:36
  发表了文章 2022-10-18 14:40:36

  copy-to-clipboard 源码解析，隐藏的内容比想象的要多

  copy-to-clipboard 是一个 js 的剪切板库，可用来复制内容到剪切板，看源码后发现其中隐藏的内容着实不少，今天一起来解读下其源码。

  
• 10.18 14:37:50
  发表了文章 2022-10-18 14:37:50

  规范你的 JSON 配置，试试 JSON schema

  不知道大家在写一些 JSON 配置时会不会经常觉得麻烦，每次都要打开文档去核对字段名称对不对、结尾有没有 s、结构是否正确、是不是数组等问题。然而我最近发现一些开源项目生成的配置文件中都开始使用 JSON schema 来规范配置文件，IDE 也会对 JSON 配置进行提示和检查，真香。本文介绍下 JSON schema 的使用方法和使用场景。

  
• 10.18 14:36:11
  发表了文章 2022-10-18 14:36:11

  嗯？你能在 Class 组件下用 hooks？

  hooks 的火热程度无需多言，然而我最近逛 GitHub 时发现几年前就有人将 hooks 搬运到 Class 组件下了，一起看看吧。
• 10.18 14:33:57
  发表了文章 2022-10-18 14:33:57

  关于 GitHub Action 中历史记录丢失的问题

  前不久在 RVPress 中添加了自动获取文章创建和修改时间的功能，其中使用 git log 来获取文章文件的 history，而后发现该功能在 GitHub Action 中无法正常工作。这里记录一下 📝。
• 10.18 14:30:13
  发表了文章 2022-10-18 14:30:13

  想在网站中使用其它站点的 favicon，看这篇就够了

  最近在开发一个 chrome 插件，其中需要读取到对应网站的 favicon 图标，遇到一些问题记录一下。

  
• 10.18 14:27:13
  发表了文章 2022-10-18 14:27:13

  我 - 又被 npm 背刺了 🤦‍♂️

  事情是这样，中午一位同学在开发时突然给我发了一张截图，里面是一段报错信息，大致就是不能读取 undefined 的 node 属性。

  
• 10.18 14:24:30
  发表了文章 2022-10-18 14:24:30

  乱序洗牌怎么证明洗的够乱

  几个月前因为某个需求，需要写一个乱序函数，于是乎就撸了一个，然而撸完又开始思考，怎么证明结果够不够乱呢，接下来我们看下。

  
• 10.18 14:20:02
  发表了文章 2022-10-18 14:20:02

  换肤 - 一文看破常用的网站主题切换方式

  现在大部分主流网站都不约而同的添加了暗色主题，让我们一起看看这些常用的切换方案、实现方式以及注意点。

  
• 10.18 14:18:41
  发表了文章 2022-10-18 14:18:41

  代码中计算太多经常阻塞？试试它吧 - Web Worker

  Worker 在国内虽然一般场景下使用不多，可能没有什么存在感，但是其实是一项挺久远的技术了，只是由于一般情况下没什么必要性，属于锦上添花形 feature，很少会使用，不过在一些特殊场景下可以极大提高开发和用户体验。比如一些大型计算、数据加密等，还有诸如使用 OffscreenCanvas 来进行图片处理等。

  
• 10.18 14:16:41
  发表了文章 2022-10-18 14:16:41

  二分法，不止是算法 - 你可能不知道的二分法应用

  二分法大家都知道，记得应该是从初中学数学就学过，而在编程中也经常使用二分法来进行有序数列的查找。然而二分法并不紧紧局限于算法中的使用，他还被广泛使用于我们的工具中、数学中甚至生活中。

  
• 10.18 14:14:04
  发表了文章 2022-10-18 14:14:04

  有趣的 hook - useWorker

  前几天看到个有趣的 hook: useWorker。可以直接将函数转换为 worker，然后调用执行，这样便可以将一些耗时、阻塞的计算放到 worker 中执行，避免主线程阻塞。 由于很好奇这个 hook 如果在不支持 worker 的浏览器上有没有做兼容，就把源码看了一下，这里记录一下。📝