@wcj/github-rank 22.7.6 → 22.7.9

package/web/data/sifou-daily.json

@@ -1,101 +1,20 @@
 [
   {
-    "title": "使用纯 CSS 实现超酷炫的粘性气泡效果",
-    "description": "最近，在 CodePen 上看到这样一个非常有意思的效果：这个效果的核心难点在于气泡的一种特殊融合效果。其源代码在：CodePen Demo -- Goey footer，作者主要使用的是 SVG 滤镜完成的该效果，感兴趣的可以戳源码看看...",
-    "url": "https://segmentfault.com/a/1190000042070334",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "11",
+    "title": "Vue3，用组合编写更好的代码：动态返回(3/4)",
+    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
+    "url": "https://segmentfault.com/a/1190000042036969",
+    "author": "前端小智",
+    "home_url": "https://segmentfault.com/u/minnanitkong",
+    "votes": "1",
     "rank": 1
   },
   {
-    "title": "使用CSS background实现炫酷悬停效果",
-    "description": "日常开发过程中，会遇到不少按钮鼠标悬停的效果，实现这类悬停效果的方式有很多，借助伪元素，CSS3变换及过渡等都可以实现。今天的文章将使用背景色实现类似的效果，当我们遇到一个问题时，你的脑海中的方案不止...",
-    "url": "https://segmentfault.com/a/1190000042069856",
-    "author": "南城大前端",
-    "home_url": "https://segmentfault.com/u/nanchengfe",
-    "votes": "5",
+    "title": "🗂 看了 web.dev 的 631 篇博客，我总结了这些内容",
+    "description": "最近在做 web 性能优化的工作，所以想集中学习了解一下相关的专题内容。这部分内容肯定要学习一手信息，所以找先找了 [链接]，一个 Google 官方推出的一个面向 Web 开发者的网站，里面有非常多的教程和最佳实践，...",
+    "url": "https://segmentfault.com/a/1190000042083758",
+    "author": "卤代烃",
+    "home_url": "https://segmentfault.com/u/skychx",
+    "votes": "3",
     "rank": 2
-  },
-  {
-    "title": "Nginx 实战核心知识点整理（上）",
-    "description": "Nginx 作为一款高性能的代理软件，在工作中常被用做负载均衡器、正向反向代理。最近在看了一个关于 Nginx 的视频，老师讲得很不错。笔者也记录了一下整套课程的一些重点和自己的理解。",
-    "url": "https://segmentfault.com/a/1190000042070687",
-    "author": "Rhythm_2019",
-    "home_url": "https://segmentfault.com/u/rhythm_2019",
-    "votes": "2",
-    "rank": 3
-  },
-  {
-    "title": "你还在为组件文档烦恼吗？",
-    "description": "从 0 到 1 搭建一个全新的组件库文档工具不是最优的选择，本人先在网上搜寻一些已有的解决方案。业务项目技术栈是基于 React，UI 库使用的是 Antd，下面是一些方案的汇总和分析：",
-    "url": "https://segmentfault.com/a/1190000042073725",
-    "author": "Samon",
-    "home_url": "https://segmentfault.com/u/samonxian",
-    "votes": "1",
-    "rank": 4
-  },
-  {
-    "title": "Lepton 无损压缩原理及性能分析",
-    "description": "作者：vivo 互联网数据库团队- Li Shihai本文主要介绍无损压缩图片的概要流程和原理，以及Lepton无损压缩在前期调研中发现的问题和解决方案。一、从一个游戏开始1.1 游戏找茬请拿出你的秒表计时，在15秒时间内找...",
-    "url": "https://segmentfault.com/a/1190000042069792",
-    "author": "vivo互联网技术",
-    "home_url": "https://segmentfault.com/u/vivo_tech",
-    "votes": "1",
-    "rank": 5
-  },
-  {
-    "title": "Vim直接上手（一）：三种模式",
-    "description": "比如，我们直接在mac上的terminal上输入vim 1.txt,这样系统就会查找是否存在这个txt文件，有就打开，没有就创建一个再打开。",
-    "url": "https://segmentfault.com/a/1190000042073871",
-    "author": "LiberHome",
-    "home_url": "https://segmentfault.com/u/liberhome",
-    "votes": "1",
-    "rank": 6
-  },
-  {
-    "title": "Vue 源码中的工具函数",
-    "description": "在 Vue 源码中，封装了很多工具函数，学习这些函数，一方面学习大佬们的实现方式，另一方面是温习基础知识，希望大家在日常工作中，简单的函数也可以自己封装，提高编码能力。",
-    "url": "https://segmentfault.com/a/1190000042073070",
-    "author": "诺顿",
-    "home_url": "https://segmentfault.com/u/nuodun",
-    "votes": "2",
-    "rank": 7
-  },
-  {
-    "title": "下一个行业风口：NFT 数字藏品，是机遇还是泡沫？",
-    "description": "2021年3月，艺术家Beeple花费5000多天制成的作品《每一天：前5000天》，作为史上第一件公开拍卖的纯数字艺术品，在顶级拍卖行佳士得以高达6900万美元（约合4.5亿人民币）的天价成交，刷新了网上拍卖成交最高作品...",
-    "url": "https://segmentfault.com/a/1190000042072196",
-    "author": "腾讯云加社区",
-    "home_url": "https://segmentfault.com/u/qcloudcommunity",
-    "votes": "1",
-    "rank": 8
-  },
-  {
-    "title": "PHP后端面试85问",
-    "description": "替换原则(the Liskov Substitution Principle LSP) ：子类应当可以替换父类并出现在父类能够出现的任何地方。",
-    "url": "https://segmentfault.com/a/1190000042071370",
-    "author": "IT小马",
-    "home_url": "https://segmentfault.com/u/itxiaoma",
-    "votes": "1",
-    "rank": 9
-  },
-  {
-    "title": "Redis常见指令",
-    "description": "KEYS :查询符合模板要求的所有key类似正则 （由于Redis是单线程，这样在大规模数据的查询中会导致阻塞，所以强烈不推荐在生产环境中使用）",
-    "url": "https://segmentfault.com/a/1190000042070708",
-    "author": "LiberHome",
-    "home_url": "https://segmentfault.com/u/liberhome",
-    "votes": "1",
-    "rank": 10
-  },
-  {
-    "title": "“李记餐厅”微信点餐小程序+后台管理系统",
-    "description": "系统说明本系统的设计主要是用于小型餐厅点餐，是基于微信小程序开发的。对于普通用户来说，需要系统可以进行菜单浏览、菜品详情查看、下单以及对菜品评价、搜索需要的菜品。对商家来说，则需要对用户进行审核、...",
-    "url": "https://segmentfault.com/a/1190000042074179",
-    "author": "欧阳小白",
-    "home_url": "https://segmentfault.com/u/ouyangxiaobai",
-    "votes": "1",
-    "rank": 11
   }
 ]

package/web/data/sifou-monthly.json

@@ -1,30 +1,21 @@
 [
-  {
-    "title": "文字轮播与图片轮播？CSS 不在话下",
-    "description": "今天，分享一个实际业务中能够用得上的动画技巧。巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？我们来简单分析分析，从...",
-    "url": "https://segmentfault.com/a/1190000041947673",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "43",
-    "rank": 1
-  },
   {
     "title": "巧妙使用Vue.extend继承组件实现el-table双击可编辑（不使用v-if和v-else）",
     "description": "看了一下网上的帖子，大多数都是搞两部分dom，一块是输入框，用于编辑状态填写；另一块是普通标签，用于在不编辑显示状态下呈现单元格文字内容。再加上一个flag标识搭配v-if和v-else去控制编辑状态、还是显示状态...",
     "url": "https://segmentfault.com/a/1190000041974425",
     "author": "水冗水孚",
     "home_url": "https://segmentfault.com/u/shuirongshui",
-    "votes": "29",
-    "rank": 2
+    "votes": "31",
+    "rank": 1
   },
   {
-    "title": "CSS 实现头像名称首字符自动占位",
-    "description": "在 web 中经常会见到这样的设计，很多 UI 组件库也称之为 Avator 组件，也就是头像的意思，当头像未设置时，会显示名称的首字符充当默认头像，如下所示：",
-    "url": "https://segmentfault.com/a/1190000041940807",
+    "title": "CSS实现可拉伸调整尺寸的分栏布局",
+    "description": "很多页面布局，特别是那种工具类的、比如编辑器、可视化平台等，为了充分的利用屏幕空间，都会提供拖拽调节各个分栏尺寸的功能，比如像 vscode",
+    "url": "https://segmentfault.com/a/1190000042006775",
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "26",
-    "rank": 3
+    "votes": "30",
+    "rank": 2
   },
   {
     "title": "搭建前端监控，如何采集异常数据？",
@@ -33,16 +24,7 @@
     "author": "杨成功",
     "home_url": "https://segmentfault.com/u/ruidoc",
     "votes": "20",
-    "rank": 4
-  },
-  {
-    "title": "CSS实现可拉伸调整尺寸的分栏布局",
-    "description": "很多页面布局，特别是那种工具类的、比如编辑器、可视化平台等，为了充分的利用屏幕空间，都会提供拖拽调节各个分栏尺寸的功能，比如像 vscode",
-    "url": "https://segmentfault.com/a/1190000042006775",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "27",
-    "rank": 5
+    "rank": 3
   },
   {
     "title": "掘地三尺搞定 Redis 与 MySQL 数据一致性问题",
@@ -51,6 +33,24 @@
     "author": "码哥字节",
     "home_url": "https://segmentfault.com/u/magebyte",
     "votes": "22",
+    "rank": 4
+  },
+  {
+    "title": "CSS层级小技巧！如何在滚动时自动添加头部阴影？",
+    "description": "在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。比如下面这个例子，注意观察头部阴影",
+    "url": "https://segmentfault.com/a/1190000042065365",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "19",
+    "rank": 5
+  },
+  {
+    "title": "使用纯 CSS 实现超酷炫的粘性气泡效果",
+    "description": "最近，在 CodePen 上看到这样一个非常有意思的效果：这个效果的核心难点在于气泡的一种特殊融合效果。其源代码在：CodePen Demo -- Goey footer，作者主要使用的是 SVG 滤镜完成的该效果，感兴趣的可以戳源码看看...",
+    "url": "https://segmentfault.com/a/1190000042070334",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "18",
     "rank": 6
   },
   {
@@ -62,23 +62,14 @@
     "votes": "17",
     "rank": 7
   },
-  {
-    "title": "JS实现将文本或JSON内容下载到文件中",
-    "description": "有时候在前端开发过程中，可能遇到这样的需求场景：需要将页面上的文本内容下载到文件中，内容可能是某个大的文本字段，比如博客文章，也可能是后端接口返回的 JSON 数据。",
-    "url": "https://segmentfault.com/a/1190000041965165",
-    "author": "十方",
-    "home_url": "https://segmentfault.com/u/shifang_5b2b70d160932",
-    "votes": "11",
-    "rank": 8
-  },
   {
     "title": "让拖拽更加人性化？如何自定义dragover样式",
     "description": "欢迎关注微信公众号： 前端侦探在 web 开发中，经常会碰到需要拖拽的场景。为了更好的体验，拖拽区域需要有一定的变化提示，告诉用户：\"现在可以放在这里了~\"，例如这样的之前在这篇文章讲述了如何自定义 drag 样...",
     "url": "https://segmentfault.com/a/1190000041974546",
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "12",
-    "rank": 9
+    "votes": "13",
+    "rank": 8
   },
   {
     "title": "switch 有四样写法你知道么",
@@ -86,9 +77,27 @@
     "url": "https://segmentfault.com/a/1190000042055258",
     "author": "边城",
     "home_url": "https://segmentfault.com/u/jamesfancy",
-    "votes": "12",
+    "votes": "14",
+    "rank": 9
+  },
+  {
+    "title": "JS实现将文本或JSON内容下载到文件中",
+    "description": "有时候在前端开发过程中，可能遇到这样的需求场景：需要将页面上的文本内容下载到文件中，内容可能是某个大的文本字段，比如博客文章，也可能是后端接口返回的 JSON 数据。",
+    "url": "https://segmentfault.com/a/1190000041965165",
+    "author": "十方",
+    "home_url": "https://segmentfault.com/u/shifang_5b2b70d160932",
+    "votes": "11",
     "rank": 10
   },
+  {
+    "title": "视觉还原小技巧！CSS 实现角标效果",
+    "description": "欢迎关注微信公众号： 前端侦探最近在项目中碰到一个这样的角标设计，如下像这种可以文字可变化，自适应大小的布局，自然首选 CSS 了~下面看看如何实现的（两分钟读完）一、圆角矩形和三角形从设计上可以拆分成两...",
+    "url": "https://segmentfault.com/a/1190000042038058",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "16",
+    "rank": 11
+  },
   {
     "title": "干货合集│最好用的 python 库都在这",
     "description": "🎈 分词 - jieba优秀的中文分词库，依靠中文词库，利用词库确定汉子之间关联的概率，形成分词结果 {代码...} 🎈 词云库 - wordcloud对数据中出现频率较高的 关键词 生成的一幅图像，予以视觉上的突出 {代码...} 🎈 ...",
@@ -96,24 +105,15 @@
     "author": "极客飞兔",
     "home_url": "https://segmentfault.com/u/autofelix",
     "votes": "11",
-    "rank": 11
-  },
-  {
-    "title": "这个队列的思路是真的好，现在它是我简历上的亮点了。",
-    "description": "你好呀，我是歪歪。前几天在一个开源项目的 github 里面看到这样的一个 pr：光是看这个名字，里面有个 MemorySafe，我就有点陷进去了。我先给你看看这个东西：这个肯定很眼熟吧？我是从阿里巴巴开发规范中截的图...",
-    "url": "https://segmentfault.com/a/1190000041943100",
-    "author": "why技术",
-    "home_url": "https://segmentfault.com/u/whyjishu",
-    "votes": "12",
     "rank": 12
   },
   {
-    "title": "视觉还原小技巧！CSS 实现角标效果",
-    "description": "欢迎关注微信公众号： 前端侦探最近在项目中碰到一个这样的角标设计，如下像这种可以文字可变化，自适应大小的布局，自然首选 CSS 了~下面看看如何实现的（两分钟读完）一、圆角矩形和三角形从设计上可以拆分成两...",
-    "url": "https://segmentfault.com/a/1190000042038058",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "15",
+    "title": "有意思的鼠标指针交互探究",
+    "description": "今天，来实现这样一个有意思的交互效果：将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。修改鼠标样式首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点...",
+    "url": "https://segmentfault.com/a/1190000042012558",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "13",
     "rank": 13
   },
   {
@@ -143,24 +143,6 @@
     "votes": "11",
     "rank": 16
   },
-  {
-    "title": "有意思的鼠标指针交互探究",
-    "description": "今天，来实现这样一个有意思的交互效果：将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。修改鼠标样式首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点...",
-    "url": "https://segmentfault.com/a/1190000042012558",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "12",
-    "rank": 17
-  },
-  {
-    "title": "CSS层级小技巧！如何在滚动时自动添加头部阴影？",
-    "description": "在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。比如下面这个例子，注意观察头部阴影",
-    "url": "https://segmentfault.com/a/1190000042065365",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "14",
-    "rank": 18
-  },
   {
     "title": "叮~您有一封Vue.js挑战邀请函,请查收",
     "description": "大家好,我是webfansplz.今天要跟大家分享的是vuejs-challenges,一个Vue.js在线挑战平台,它提供了一些题库,开发者可以在线进行挑战.通过这些挑战,我们可以进一步了解和熟悉Vue.js,希望它能对想学习Vue.js的同学有...",
@@ -168,7 +150,16 @@
     "author": "null仔",
     "home_url": "https://segmentfault.com/u/xiaoqianduan_58b28cfebff36",
     "votes": "10",
-    "rank": 19
+    "rank": 17
+  },
+  {
+    "title": "SegmentFault 思否技术周刊 -- 超实用 Vue 合集，请查收",
+    "description": "Vue.js 是一个用于创建 web 交互界面的工具。其特点是简洁 HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。数据驱动 自动追踪依赖的模板表达式和计算属性。组件化 用解耦、可复用的组件来构造界面。轻...",
+    "url": "https://segmentfault.com/a/1190000042048392",
+    "author": "Beverly",
+    "home_url": "https://segmentfault.com/u/beverly0",
+    "votes": "8",
+    "rank": 18
   },
   {
     "title": "前端性能监测，Runtime Performance Debug 技巧",
@@ -177,7 +168,7 @@
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
     "votes": "11",
-    "rank": 20
+    "rank": 19
   },
   {
     "title": "SegmentFault 思否社区 10 周年 | 寄语有奖获奖名单公布，快来领奖~",
@@ -186,25 +177,16 @@
     "author": "SegmentFault思否",
     "home_url": "https://segmentfault.com/u/segmentfault",
     "votes": "7",
-    "rank": 21
-  },
-  {
-    "title": "JavaScript精度丢失原因以及解决方案",
-    "description": "由于计算机的底层是由二进制实现的，有些运算的数字无法全部显示出来。就像一些无理数不能完全显示出来一样，如圆周率 3.1415926...，0.3333... 等。JavaScript遵循IEEE754规范，采用双精度存储（double precisio...",
-    "url": "https://segmentfault.com/a/1190000041941297",
-    "author": "沉静地闪光",
-    "home_url": "https://segmentfault.com/u/007008",
-    "votes": "11",
-    "rank": 22
+    "rank": 20
   },
   {
-    "title": "SegmentFault 思否技术周刊 -- 超实用 Vue 合集，请查收",
-    "description": "Vue.js 是一个用于创建 web 交互界面的工具。其特点是简洁 HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。数据驱动 自动追踪依赖的模板表达式和计算属性。组件化 用解耦、可复用的组件来构造界面。轻...",
-    "url": "https://segmentfault.com/a/1190000042048392",
-    "author": "Beverly",
-    "home_url": "https://segmentfault.com/u/beverly0",
-    "votes": "7",
-    "rank": 23
+    "title": "使用 content-visibility 优化渲染性能",
+    "description": "content-visibility：属性控制一个元素是否渲染其内容，它允许用户代理（浏览器）潜在地省略大量布局和渲染工作，直到需要它为止。",
+    "url": "https://segmentfault.com/a/1190000041980427",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "12",
+    "rank": 21
   },
   {
     "title": "云计算的未来在哪？破解亚马逊云科技增长神话",
@@ -213,7 +195,7 @@
     "author": "六一",
     "home_url": "https://segmentfault.com/u/suicidal_romantic_scoundrel",
     "votes": "9",
-    "rank": 24
+    "rank": 22
   },
   {
     "title": "SegmentFault 思否技术周刊 -- Node.js 进阶之旅，看看哪些还需要学？",
@@ -222,7 +204,16 @@
     "author": "Beverly",
     "home_url": "https://segmentfault.com/u/beverly0",
     "votes": "6",
-    "rank": 25
+    "rank": 23
+  },
+  {
+    "title": "Sass应用之实现主题切换",
+    "description": "实现主题切换有几种不同的方案，比如使用CSS变量，使用JavaScript动态加载对应的主题样式文件等。本文主要讲的是如何使用Sass实现主题切换。",
+    "url": "https://segmentfault.com/a/1190000042003368",
+    "author": "玛尔斯通",
+    "home_url": "https://segmentfault.com/u/zhouqichao",
+    "votes": "7",
+    "rank": 24
   },
   {
     "title": "玩转 AbortController 控制器",
@@ -231,16 +222,7 @@
     "author": "jump__jump",
     "home_url": "https://segmentfault.com/u/jump_and_jump",
     "votes": "6",
-    "rank": 26
-  },
-  {
-    "title": "精读《type challenges - easy》",
-    "description": "TS 强类型非常好用，但在实际运用中，免不了遇到一些难以描述，反复看官方文档也解决不了的问题，至今为止也没有任何一篇文档，或者一套教材可以解决所有犄角旮旯的类型问题。为什么会这样呢？因为 TS 并不是简单...",
-    "url": "https://segmentfault.com/a/1190000041941889",
-    "author": "黄子毅",
-    "home_url": "https://segmentfault.com/u/aoyangyudakong",
-    "votes": "5",
-    "rank": 27
+    "rank": 25
   },
   {
     "title": "构建基于React18的电子表格程序",
@@ -249,7 +231,16 @@
     "author": "葡萄城技术团队",
     "home_url": "https://segmentfault.com/u/grapecity",
     "votes": "5",
-    "rank": 28
+    "rank": 26
+  },
+  {
+    "title": "使用CSS background实现炫酷悬停效果",
+    "description": "日常开发过程中，会遇到不少按钮鼠标悬停的效果，实现这类悬停效果的方式有很多，借助伪元素，CSS3变换及过渡等都可以实现。今天的文章将使用背景色实现类似的效果，当我们遇到一个问题时，你的脑海中的方案不止...",
+    "url": "https://segmentfault.com/a/1190000042069856",
+    "author": "南城大前端",
+    "home_url": "https://segmentfault.com/u/nanchengfe",
+    "votes": "9",
+    "rank": 27
   },
   {
     "title": "为什么Hook没有ErrorBoundary？",
@@ -258,7 +249,7 @@
     "author": "卡颂",
     "home_url": "https://segmentfault.com/u/kasong",
     "votes": "4",
-    "rank": 29
+    "rank": 28
   },
   {
     "title": "又拍云 Redis 的改进之路",
@@ -267,6 +258,15 @@
     "author": "云叔_又拍云",
     "home_url": "https://segmentfault.com/u/yunshu_blog",
     "votes": "7",
+    "rank": 29
+  },
+  {
+    "title": "esbuild 构建油猴脚本",
+    "description": "前段时间思否十周年，搞了个问答打卡活动。参与打卡活动的人需要在回答问题的结尾加一个“小尾巴”。加小尾巴本身并不难，但是由于官方没有提供快捷方式，每次都需要自己从某个地方拷贝过去，稍嫌繁琐。正好前不久...",
+    "url": "https://segmentfault.com/a/1190000042036660",
+    "author": "边城",
+    "home_url": "https://segmentfault.com/u/jamesfancy",
+    "votes": "6",
     "rank": 30
   }
 ]