勋章
我关注的人
技术能力
- JavaScript
- Web App开发
- 人工智能
- Linux
- MacOS
暂时未有相关云产品技术能力~
@嘿前端 不务正业的程序员
-
发表了文章 2023-04-21
阿里云 AIGC 白嫖 FC 搭建 stable diffusion
下午瞎逛在 V 站看到阿里在做推广，正好这几天在研究 stable-diffusion，就进去看了看，活动地址： https://developer.aliyun.com/topic/aigc 。 主要就是阿里云的 FC 免费提供 3 个月的试用（注意，只有 150 元额度，所以重度使用可能一会就玩没了），可以快速搭建 AiGC 服务。
-
发表了文章 2022-10-18
css steps 动画的使用 - 雪碧图动画
之前在时间函数那篇文章里有写到 css 动画除了支持贝塞尔曲线绘制平滑动画外，还支持使用 steps 来绘制定格/逐帧动画，但是一直没想到使用场景，直到前两天在网上看到一篇说合金弹头的帖子，突然想起来可以使用逐帧动画配合雪碧图，就可以很轻松的实现游戏中常见的雪碧图动画了，说干就干，下面我们一起来试一下。
-
发表了文章 2022-10-18
babel - 现代前端开发人员躲不开的技能点
babel 作为前端生态圈举足轻重的一员，在前端工程化等领域起着非常重要的作用。今天一起来看看那些常见的 babel 使用场景，看一看 babel 的生态圈有多庞大。
-
发表了文章 2022-10-18
一文看懂 babel - 为何诞生、做了什么、怎么做的
babel 在前端快速发展的最近几年，为前端的工程化提供了莫大的帮助，解决了前端各种浏览器兼容问题导致的 js 崩溃，让我们可以放下的用上新的各种 es6、es7 等新语法，今天聊一聊 babel 的工作原理。
-
发表了文章 2022-10-18
用 JS 解析 excel 文件需要分几步
今天来聊一聊如何使用 JS 来解析 excel 文件，当然不是直接使用 exceljs、sheetjs 之类的库，那就没意思了，而是主要说一下 JS 解析 excel 表格是如何实现的。注意本文主要讨论 xlsx 格式的 excel 表格，其它格式未探究并不清楚。
-
发表了文章 2022-10-18
如何实现上传文件到 nodejs 和文件下载
最近拿 next.js 做个全栈项目，需要文件上传和下载，这里记录下实现方式，也写一下使用原生 node 代码如何实现。
-
发表了文章 2022-10-18
直接在前端做 zip 压缩/解压
前段时间研究前端是如何解析 excel 表格的时候了解到 jszip 这个库，可以直接在前端对 zip 包进行压缩和解压缩，今天稍微水一篇。
-
发表了文章 2022-10-18
复刻解析一个流光溢彩炫到掉渣的 CSS 动画按钮
最近在看 next.js 官网是被引流到 conf 页面，发现上面有一个炫酷的按钮，按钮的边框色彩不断变动给人感觉是光在随着按钮旋转一般，感觉挺酷的，复刻一下讲解下原理。
-
发表了文章 2022-10-18
next.js 源码解析 - getServerSideProps 篇
老规矩，昨天写了关于 getServerSideProps 的内容，今天趁热写一下 getServerSideProps 相应的源码，看看 next.js getServerSideProps 是怎么实现的，还有什么从文档无法知晓的细节。
-
发表了文章 2022-10-18
一起来学 next.js - getServerSideProps 篇
getServerSideProps 是 next.js 中的一项特色功能，可以让我们在给页面设置一些初始的 props 参数。
-
发表了文章 2022-10-18
MutationObserver - 监听你的 DOM 是否有变动
MutationObserver 可用来监视 DOM 的变化，算是一个比较老的 API，但是却鲜为人知，他的前身是 MutationEvent：一系列监听 DOM 变更的 event 事件 - DOMAttrModified、DOMNodeInserted、DOMSubtreeModified 等。
-
发表了文章 2022-10-18
ResizeObserver - 监视 DOM 大小的变化
ResizeObserver 用于监听元素的大小尺寸变化，常见用于监听自适应大小的元素变化引起的宽高变化时处理应宽高变化而需要 JS 做特定处理的场景。
-
发表了文章 2022-10-18
IntersectionObserver - 监视你的 DOM 元素相交
IntersectionObserver 用于监听元素是否进入视口（与视口是否存在相交），在图片懒加载等场景中被广泛应用，不过除了这个基础的用法，他还有更强大的能力。
-
发表了文章 2022-10-18
制作了一个马赛克图片转换器 - 实现篇
上文有讲到我制作了一个马赛克图片转换器，可以将图片转换成马赛克风格，并可转换为 css box-shadow 进行输出。
-
发表了文章 2022-10-18
制作了一个马赛克图片转换器
制作了一个马赛克图片转换器，可以将图片转换成马赛克风格，并可转换为 css box-shadow 进行输出。
-
发表了文章 2022-10-18
你好，CSS “正则”了解一下
虽然题目讲的是 CSS 中的正则，但是这加了引号的正则其实只和正则有一半的关系，而且还是个阉割版，但是，请不要因此就小瞧了它，有时候能够有奇效。
-
发表了文章 2022-10-18
next.js 源码解析 - API 路由篇
首先我们得确认下源码的位置， next.js 的 packages 中包括了很多包，我们先要确认和 API 路由相关的源码位置。
-
发表了文章 2022-10-18
独家配方 - Promise 使用小技巧
虽然现在前端开发中大部分的异步代码中的回调都在慢慢的被 Promise 所取代，然而大部分的原生 API 和一些库都还只有回调的调用方式。于是很多时候我们需要将一些库、原生 API 转换成 Promise，此时不可避免的就是写一个 Promise 将其包裹
-
发表了文章 2022-10-18
一起来学 next.js - API 路由篇（轻松做全栈？）
next.js 作为最热门的 react 框架，不过这么久了好像国内使用率一直不太高。最近在研究做个小项目正好做下笔记，有兴趣的可以一起来学习。
-
发表了文章 2022-10-18
嘿，朋友，其实 CSS 动画超简单的 - 时间函数篇（贝塞尔曲线、steps，看完还不懂算我输）
时间函数在 CSS 动画中至关重要，它会直接影响到动画的展现效果，然而由于相对其它属性而言较为复杂，可能了解的人较少，今天详细讲一讲时间函数。
-
发表了文章 2022-10-18
嘿，朋友，其实 CSS 动画超简单的 - animation 动画篇（配备各属性详解）
上篇讲完了渐变动画，本篇我们讲一下 animation 动画，animation 动画相比渐变动画来讲功能更丰富，使用也更复杂，不过其中相通之处也很多，建议看完上篇再来看本篇可以更方便吸收。
-
发表了文章 2022-10-18
嘿，朋友，其实 CSS 动画超简单的 - 渐变动画篇
经常遇到有同学看到动画时会疑问动画是怎么做出来的，或是为什么自己写不起作用，或是为什么和预想的不一样等问题。于是决定写一写关于 CSS 动画的系列文章，本篇为第一篇。
-
发表了文章 2022-10-18
手把手用 CSS 绘制一个忽闪忽闪的可爱小幽灵
通过几个 div 的拼接，和 css 的样式加成，便可制作出这样一个可爱的小幽灵。下面一起看下制作过程吧。
-
发表了文章 2022-10-18
给我一个 div + 三行 css，还你一个超级马里奥
要绘制马里奥，我们需要照着图，将图进行格子化，然后一个格子一个格子的绘制。。。。 那是不可能的！ 作为一个程序员，这么多色块都要手动绘制，开玩笑，这不是折磨人吗。
-
发表了文章 2022-10-18
中秋快乐，快来摇一摇，摇出你的本命月饼吧
中秋节到了，吃月饼必不可少，为了让大家能够更愉快的过中秋，我花了一晚的功夫开发了一个摇一摇的页面，通过页面摇一摇，可以摇出各种各样的月饼，快来试试你的本命月饼是什么吧。
-
发表了文章 2022-10-18
十行代码即可为你的网站添加语音小助手，无需任何外部依赖
前面一篇文章有讲到通过 Web Speech API 来朗诵诗歌，写了个诗歌朗诵的小网站。 而 Web Speech API 除了语音输出外，还支持语音识别，你可以通过 Web Speech API 收集用户的语音指令，为你的网站添加一些有趣的功能：比如在小说阅读网站上添加语音指令，让你可以语音控制翻书、下一章等，让你可以更方便的一边看小说一边吃薯片。🐶
-
发表了文章 2022-10-18
乱花迷人眼 - 一文彻底看懂 package.json 中的各种 dependencies
package.json 中存在各种各样的依赖定义：dependencies、devDependencies、peerDependencies、optionalDependencies、bundleDependencies，很容易让初学的开发者晕头，到底有什么区别。
-
发表了文章 2022-10-18
玩转 GitHub profile - 打造自己的特色 GitHub 主页（交友利器🐶）
Github 作为全球最大程序员交友网站，大家在上面交友时一个具有个人特色的自我介绍自然是少不了的。🐶 今天介绍下 GitHub 的一项特色功能 - GitHub profile，以及一些列开源工具、项目来帮助打造自己特色的 GitHub profile。 GitHub profile 也是最近两年 GitHub 才新加的功能，开发者可以通过编写 README 打造属于自己的个人 GitHub 首页。
-
发表了文章 2022-10-18
朋友，进来刷点 try-catch 看看你能全对吗（答应我，请务必看到最后 🫣）
随着这几年前端的高速发展，前端逻辑的复杂度越来越高，质量要求越来越高，再加上 async、await 的横行，try-catch 在前端的使用率越来越高。然而 try-catch 中可能隐藏着一些不为人知的小秘密㊙️，今天一起通过几道小题目看看这些秘密㊙️。
-
发表了文章 2022-10-18
玩转 GitHub Actions
GitHub Actions 是 GitHub 中提供的自动化功能，通过它可以方便的在你提交代码、发送 PR 等各种事件触发时触发一系列自动化操作，完成 CI/CD、辅助机器人等功能，解放双手。
-
发表了文章 2022-10-18
玩转 GitHub Pages
pages 是 github 提供的静态页面服务，你可以使用他来为你的项目提供文档页面、搭建 blog 以及任何其它静态页面。
-
发表了文章 2022-10-18
我写了个诗词朗诵网站
诗词数据主要来自这个 chinese-poetry 库，其中包含了几十万首唐诗宋词，然而里面主要是静态数据，要直接用在站点要么得搞个服务端、要么得直接把数据都扒下来，然后无意间在该库的网站中找到了关于今日诗词 API 的鸣谢。然后果断使用了今日诗词 的 API。
-
发表了文章 2022-10-18
React 组件文档套件设计
在编写 React UI 组件时为了方便开发者使用组件，我们经常会使用文档系统来自动生成组件文档和定义文档。开源中比较出名的是 storybook，还有 react-styleguidist。
-
发表了文章 2022-10-18
为了降低维护成本（早点下班），我在组件开发中所做的那些优化（偷懒）
组件开发中为了稳定性、健壮性，经常需要为组件编写测试用例，然后还要为了开发者方便使用编写文档，都是非常耗时间的差事。作为一个独立维护组件库的程序员，为了能够降低组件维护的成本（早点下班），我总结了一下自己过去几年为了让组件开发更加高效所做的那些事情（偷的那些懒）。
-
发表了文章 2022-10-18
this 其实很简单
经常在群里看到一些初学前端的兄弟对 this 一知半解，其实 js 中的 this 真的不算难理解，this 本身是一个面向对象编程中的概念，指的就是调用方法的对象。
-
发表了文章 2022-10-18
孤陋寡闻了，才知道已经可以用 JS 来控制 CSS 动画了
最近翻 MDN 突然发现一套叫 Web Animations API 的东东，点进去看才知道，原来是一套控制 css animation 的 API，而且已经有段时间了 🤦♂️，而我居然一直不知道。
-
发表了文章 2022-10-18
扫盲 CSS 中的单位
在 CSS 中，对于尺寸属性的值一般可以分为以下几类：关键字、数值、百分比。关键字一般有 initial、unset 等，百分比则是相对值，常见的是相对于上级 BFC 元素的比例。当然还有包括纯数字值的如 line-height 可以为纯数字，本文主要讨论常见数值。
-
发表了文章 2022-10-18
写开源组件库需要知道些什么
本文总结下近几年维护公司开源 React 组件库的一些经验。
-
发表了文章 2022-10-18
benny 介绍 - 一个简单的 benchmark 框架
benny 是一个简单的 benchmark 框架，当你需要测试自己的库或是方法性能时，可使用它来进行对其进行基准测试。
-
发表了文章 2022-10-18
React 实时预览 - react-live 源码解读
react-live 是一个 react 的实时编辑器，可直接编辑 react 代码，并实时预览。
-
发表了文章 2022-10-18
开源个参考 chrome 密码生成写的密码生成库
几个月前因为某个需求参考了 chrome 的密码生成的源码撸了一个 js 的密码生成器，这里分享一下。
-
发表了文章 2022-10-18
PACE - 为你的网站添加页面加载进度条
pace-js 是一个为网站添加页面加载进度条的库，可以为任意网站自动添加上页面加载进度条，提供了多种主题样式。
-
发表了文章 2022-10-18
新开窗口的那些事：拦截、安全、target
前端开发经常会遇到需要新开窗口的需求，而某些时候，新窗口的地址需要通过接口返回，经常就会遇到新开窗口被拦截的情况，这里说一下新开窗口的几种方式、被拦截的原因以及如何避免被拦截、新窗口安全、target 的秘密。
-
发表了文章 2022-10-18
copy-to-clipboard 源码解析，隐藏的内容比想象的要多
copy-to-clipboard 是一个 js 的剪切板库，可用来复制内容到剪切板，看源码后发现其中隐藏的内容着实不少，今天一起来解读下其源码。
-
发表了文章 2022-10-18
规范你的 JSON 配置，试试 JSON schema
不知道大家在写一些 JSON 配置时会不会经常觉得麻烦，每次都要打开文档去核对字段名称对不对、结尾有没有 s、结构是否正确、是不是数组等问题。然而我最近发现一些开源项目生成的配置文件中都开始使用 JSON schema 来规范配置文件，IDE 也会对 JSON 配置进行提示和检查，真香。本文介绍下 JSON schema 的使用方法和使用场景。
-
发表了文章 2022-10-18
嗯？你能在 Class 组件下用 hooks？
hooks 的火热程度无需多言，然而我最近逛 GitHub 时发现几年前就有人将 hooks 搬运到 Class 组件下了，一起看看吧。
-
发表了文章 2022-10-18
关于 GitHub Action 中历史记录丢失的问题
前不久在 RVPress 中添加了自动获取文章创建和修改时间的功能，其中使用 git log 来获取文章文件的 history，而后发现该功能在 GitHub Action 中无法正常工作。这里记录一下 📝。
-
发表了文章 2022-10-18
想在网站中使用其它站点的 favicon，看这篇就够了
最近在开发一个 chrome 插件，其中需要读取到对应网站的 favicon 图标，遇到一些问题记录一下。
-
发表了文章 2022-10-18
我 - 又被 npm 背刺了 🤦♂️
事情是这样，中午一位同学在开发时突然给我发了一张截图，里面是一段报错信息，大致就是不能读取 undefined 的 node 属性。
-
发表了文章 2022-10-18
乱序洗牌怎么证明洗的够乱
几个月前因为某个需求，需要写一个乱序函数，于是乎就撸了一个，然而撸完又开始思考，怎么证明结果够不够乱呢，接下来我们看下。
-
发表了文章
2023-04-21
阿里云 AIGC 白嫖 FC 搭建 stable diffusion
-
发表了文章
2022-10-18
css steps 动画的使用 - 雪碧图动画
-
发表了文章
2022-10-18
babel - 现代前端开发人员躲不开的技能点
-
发表了文章
2022-10-18
一文看懂 babel - 为何诞生、做了什么、怎么做的
-
发表了文章
2022-10-18
用 JS 解析 excel 文件需要分几步
-
发表了文章
2022-10-18
如何实现上传文件到 nodejs 和文件下载
-
发表了文章
2022-10-18
直接在前端做 zip 压缩/解压
-
发表了文章
2022-10-18
复刻解析一个流光溢彩炫到掉渣的 CSS 动画按钮
-
发表了文章
2022-10-18
next.js 源码解析 - getServerSideProps 篇
-
发表了文章
2022-10-18
一起来学 next.js - getServerSideProps 篇
-
发表了文章
2022-10-18
MutationObserver - 监听你的 DOM 是否有变动
-
发表了文章
2022-10-18
ResizeObserver - 监视 DOM 大小的变化
-
发表了文章
2022-10-18
IntersectionObserver - 监视你的 DOM 元素相交
-
发表了文章
2022-10-18
制作了一个马赛克图片转换器 - 实现篇
-
发表了文章
2022-10-18
制作了一个马赛克图片转换器
-
发表了文章
2022-10-18
你好，CSS “正则”了解一下
-
发表了文章
2022-10-18
next.js 源码解析 - API 路由篇
-
发表了文章
2022-10-18
独家配方 - Promise 使用小技巧
-
发表了文章
2022-10-18
一起来学 next.js - API 路由篇（轻松做全栈？）
-
发表了文章
2022-10-18
嘿，朋友，其实 CSS 动画超简单的 - 时间函数篇（贝塞尔曲线、steps，看完还不懂算我输）
