@wcj/github-rank 22.6.16 → 22.6.19

package/web/data/sifou-daily.json

@@ -1,74 +1 @@
-[
-  {
-    "title": "什么是走索引？",
-    "description": "索引是一种利用某种规则的数据结构与实际数据的关系加快数据查找的功能。我们的数据库中存储有大量的内容，而索引能够通过数据节点，根据特定的规则和算法快速查找到节点对应的实际文件的位置。简单来说索引就像...",
-    "url": "https://segmentfault.com/a/1190000041986392",
-    "author": "云叔_又拍云",
-    "home_url": "https://segmentfault.com/u/yunshu_blog",
-    "votes": "4",
-    "rank": 1
-  },
-  {
-    "title": "SegmentFault 思否技术周刊 — 想玩转 Python？简直 So Easy！",
-    "description": "Python，是一种面向对象、直译式电脑编程语言，也是一种功能强大的通用型语言，已经具有近二十年的发展历史，成熟且稳定。它包含了一组完善而且容易理解的标准库，能够轻松完成很多常见的任务。它的语法非常简捷...",
-    "url": "https://segmentfault.com/a/1190000041986657",
-    "author": "Beverly",
-    "home_url": "https://segmentfault.com/u/beverly0",
-    "votes": "3",
-    "rank": 2
-  },
-  {
-    "title": "得物前端唤端业务场景和技术精讲",
-    "description": "当你在刷朋友圈时突然看到一个潮鞋广告，正是你非常喜欢、一直想买的那款而且价格美丽，于是你兴奋地点击广告直接打开了购物App，并且直接进入刚刚看到的潮鞋详情页，你只需要直接点击购买就能得到这双你期待已久...",
-    "url": "https://segmentfault.com/a/1190000041986500",
-    "author": "得物技术",
-    "home_url": "https://segmentfault.com/u/dewujishu",
-    "votes": "1",
-    "rank": 3
-  },
-  {
-    "title": "记录一个 Nginx-FastCGI-\"Primary script unknown\"  错误",
-    "description": "nginx和PHP环境都装好了，然后一运行就报错File not found，看了nginx错误日志之后，各种搜索找了解决方案都不行，一说文件权限问题，一说是php-fpm的权限问题，还有可能是nginx的问题。",
-    "url": "https://segmentfault.com/a/1190000041989673",
-    "author": "kumfo",
-    "home_url": "https://segmentfault.com/u/kumfo",
-    "votes": "1",
-    "rank": 4
-  },
-  {
-    "title": "云音乐预估系统建设与实践",
-    "description": "预估系统的核心任务是完成模型计算，可以认为模型就是一个函数（举例：f(x1, x2)= ax1 + bx2 +c）。其中参数a、b、c是通过模型训练得出的权重值，自变量x1与x2就是特征，模型计算就是使...",
-    "url": "https://segmentfault.com/a/1190000041988087",
-    "author": "云音乐技术团队",
-    "home_url": "https://segmentfault.com/u/musicfe",
-    "votes": "1",
-    "rank": 5
-  },
-  {
-    "title": "这个Spring Security登录插件牛啊，验证码、小程序、OAuth2都能快速接入",
-    "description": "上次我们把验证码登录、小程序登录优雅地集成到了Spring Security，很多同学大呼过瘾，相比较一些传统玩法高级了很多。胖哥就赶紧抓住机会举一反三，把几个非标准的OAuth2也接入了进来，主要是微信、企业微信，做...",
-    "url": "https://segmentfault.com/a/1190000041986074",
-    "author": "码农小胖哥",
-    "home_url": "https://segmentfault.com/u/10000000",
-    "votes": "1",
-    "rank": 6
-  },
-  {
-    "title": "基于QUIC协议的HTTP/3，你了解多少？",
-    "description": "前言了解一下HTTP发展史：HTTP/0.9-HTTP/1.0-HTTP/1.1-HTTP/2.0多个TCP连接 {代码...} Keep-alive {代码...} 管线化 {代码...} 多路复用 {代码...} {代码...} 并行多路复用的请求和响应不会相互阻塞尽管传输多个...",
-    "url": "https://segmentfault.com/a/1190000041988550",
-    "author": "Henryk",
-    "home_url": "https://segmentfault.com/u/henryk",
-    "votes": "1",
-    "rank": 7
-  },
-  {
-    "title": "tree-shaking",
-    "description": "tree-shaking 是一个通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code) 行为的术语。它依赖于 ES2015 中的 import 和 export 语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用。在...",
-    "url": "https://segmentfault.com/a/1190000041986356",
-    "author": "袋鼠云数栈UED",
-    "home_url": "https://segmentfault.com/u/daishuyunshuzhanqianduan",
-    "votes": "1",
-    "rank": 8
-  }
-]
+[]

package/web/data/sifou-monthly.json

@@ -8,6 +8,15 @@
     "votes": "48",
     "rank": 1
   },
+  {
+    "title": "文字轮播与图片轮播？CSS 不在话下",
+    "description": "今天，分享一个实际业务中能够用得上的动画技巧。巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？我们来简单分析分析，从...",
+    "url": "https://segmentfault.com/a/1190000041947673",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "37",
+    "rank": 2
+  },
   {
     "title": "妙啊！动画还可以这样控制？",
     "description": "今天，有在群里看到这样一个问题：有一个动画，一开始静止处于第一帧，只在用户 hover 的时候运行动画，在运行一次后停止，并且停留在最后一帧，使用 CSS 可以完成么？",
@@ -15,7 +24,7 @@
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
     "votes": "31",
-    "rank": 2
+    "rank": 3
   },
   {
     "title": "如何实现一个能精确同步滚动的Markdown编辑器",
@@ -23,16 +32,7 @@
     "url": "https://segmentfault.com/a/1190000041881142",
     "author": "街角小林",
     "home_url": "https://segmentfault.com/u/jiejiaoxiaolin",
-    "votes": "27",
-    "rank": 3
-  },
-  {
-    "title": "浅谈逻辑选择器 -- 父选择器它来了！",
-    "description": "在 CSS 选择器家族中，新增这样一类比较新的选择器 -- 逻辑选择器，目前共有 4 名成员：:is:where:not:has本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。:is 伪类选择器:is() CSS伪类函数...",
-    "url": "https://segmentfault.com/a/1190000041860587",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "31",
+    "votes": "28",
     "rank": 4
   },
   {
@@ -45,23 +45,14 @@
     "rank": 5
   },
   {
-    "title": "文字轮播与图片轮播？CSS 不在话下",
-    "description": "今天，分享一个实际业务中能够用得上的动画技巧。巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？我们来简单分析分析，从...",
-    "url": "https://segmentfault.com/a/1190000041947673",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "33",
+    "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": "23",
     "rank": 6
   },
-  {
-    "title": "SegmentFault 思否技术周刊 -- Go 语言通关攻略",
-    "description": "2022年3月15日，争议非常大但同时也备受期待的泛型终于伴随着Go1.18发布了。可是因为Go对泛型的支持时间跨度太大，有非常多的以“泛型”为关键字的文章都是在介绍Go1.18之前的旧泛型提案或者设计，而很多设计最终在...",
-    "url": "https://segmentfault.com/a/1190000041861125",
-    "author": "Beverly",
-    "home_url": "https://segmentfault.com/u/beverly0",
-    "votes": "22",
-    "rank": 7
-  },
   {
     "title": "前端监控的搭建步骤，别再一头雾水了！",
     "description": "在动手实现之前，首先脑子里要有一个整体脉络，明白搭建前端监控具体的流程步骤有哪些。因为前端监控系统实际上是一个完整的全栈项目，而并不仅仅是前端，甚至主要的实现都是围绕在 数据方面 的。",
@@ -69,8 +60,26 @@
     "author": "杨成功",
     "home_url": "https://segmentfault.com/u/ruidoc",
     "votes": "25",
+    "rank": 7
+  },
+  {
+    "title": "关于代码评审(CodeReview)那些不得不说的事儿",
+    "description": "在一个成熟的团队中，CodeReview是整个研发流程中不可或缺的一步，而那些即将走向成熟的团队可能对CodeReview有很多的误解和问题，也不清楚CodeReview该如何去做，本文笔者将结合自己的经验和知识，...",
+    "url": "https://segmentfault.com/a/1190000041885333",
+    "author": "xindoo",
+    "home_url": "https://segmentfault.com/u/xindoo",
+    "votes": "21",
     "rank": 8
   },
+  {
+    "title": "搭建前端监控，如何采集异常数据？",
+    "description": "前两篇，我们介绍了为什么前端应该有监控系统，以及搭建前端监控的总体步骤，前端监控的 Why 和 What 想必你已经明白了。接下来我们解决 How 如何实现的问题。",
+    "url": "https://segmentfault.com/a/1190000041962607",
+    "author": "杨成功",
+    "home_url": "https://segmentfault.com/u/ruidoc",
+    "votes": "19",
+    "rank": 9
+  },
   {
     "title": "CSS 实现头像名称首字符自动占位",
     "description": "在 web 中经常会见到这样的设计，很多 UI 组件库也称之为 Avator 组件，也就是头像的意思，当头像未设置时，会显示名称的首字符充当默认头像，如下所示：",
@@ -78,34 +87,16 @@
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "23",
-    "rank": 9
-  },
-  {
-    "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": "16",
     "rank": 10
   },
-  {
-    "title": "关于代码评审(CodeReview)那些不得不说的事儿",
-    "description": "在一个成熟的团队中，CodeReview是整个研发流程中不可或缺的一步，而那些即将走向成熟的团队可能对CodeReview有很多的误解和问题，也不清楚CodeReview该如何去做，本文笔者将结合自己的经验和知识，...",
-    "url": "https://segmentfault.com/a/1190000041885333",
-    "author": "xindoo",
-    "home_url": "https://segmentfault.com/u/xindoo",
-    "votes": "20",
-    "rank": 11
-  },
   {
     "title": "CSS 穿墙术！太强了",
     "description": "大家好，我是零一，今天给大家分享 CSS 中一个神奇的属性：filter，为什么说它神奇？正如我标题所说的，我突然发现它能帮我们轻松实现 穿墙特效，类似这种的👇",
     "url": "https://segmentfault.com/a/1190000041887095",
     "author": "零一",
     "home_url": "https://segmentfault.com/u/zero2one",
-    "votes": "22",
-    "rank": 12
+    "votes": "23",
+    "rank": 11
   },
   {
     "title": "SegmentFault 思否技术周刊 -- JavaScript 的那些事",
@@ -113,8 +104,8 @@
     "url": "https://segmentfault.com/a/1190000041921498",
     "author": "Beverly",
     "home_url": "https://segmentfault.com/u/beverly0",
-    "votes": "17",
-    "rank": 13
+    "votes": "19",
+    "rank": 12
   },
   {
     "title": "十年老友记 | @张京：我编程了三十年，编程就是我的符号",
@@ -123,17 +114,35 @@
     "author": "思否编辑部",
     "home_url": "https://segmentfault.com/u/writers",
     "votes": "16",
+    "rank": 13
+  },
+  {
+    "title": "让拖拽更加人性化？如何自定义dragover样式",
+    "description": "欢迎关注微信公众号： 前端侦探在 web 开发中，经常会碰到需要拖拽的场景。为了更好的体验，拖拽区域需要有一定的变化提示，告诉用户：\"现在可以放在这里了~\"，例如这样的之前在这篇文章讲述了如何自定义 drag 样...",
+    "url": "https://segmentfault.com/a/1190000041974546",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "12",
     "rank": 14
   },
   {
-    "title": "搭建前端监控，如何采集异常数据？",
-    "description": "前两篇，我们介绍了为什么前端应该有监控系统，以及搭建前端监控的总体步骤，前端监控的 Why 和 What 想必你已经明白了。接下来我们解决 How 如何实现的问题。",
-    "url": "https://segmentfault.com/a/1190000041962607",
-    "author": "杨成功",
-    "home_url": "https://segmentfault.com/u/ruidoc",
-    "votes": "14",
+    "title": "锁定项目 Node 版本和包管理器",
+    "description": "成员机器 Node.js 版本不统一： 守旧派用 12.x、保守用 14.x、激进用 17.x。项目能否正常跑起来全凭天意，在没有 CICD 流水线加持本地 npm run build 的场景下线上风险可想而知。",
+    "url": "https://segmentfault.com/a/1190000041918155",
+    "author": "亖混子",
+    "home_url": "https://segmentfault.com/u/1023",
+    "votes": "17",
     "rank": 15
   },
+  {
+    "title": "React Suspense 尝鲜,处理前后端IO异步操作",
+    "description": "Suspense主要用来解决网络IO问题，它早在2018年的React 16.6.0版本中就已发布。它的相关用法有些已经比较成熟，有的相对不太稳定，甚至经历了重命名、删除：",
+    "url": "https://segmentfault.com/a/1190000041992773",
+    "author": "葡萄城技术团队",
+    "home_url": "https://segmentfault.com/u/grapecity",
+    "votes": "7",
+    "rank": 16
+  },
   {
     "title": "SegmentFault 思否技术周刊 -- 进击的 React",
     "description": "React 是一个免费的开放源代码前端 JavaScript 工具库， 用于基于 UI 组件构建用户界面。 它由 Meta 和一个由个人开发者和公司组成的社群维护。 React 可用作开发具有 Next.js 等框架的单页、手机或服务器渲染应...",
@@ -141,24 +150,15 @@
     "author": "Beverly",
     "home_url": "https://segmentfault.com/u/beverly0",
     "votes": "11",
-    "rank": 16
-  },
-  {
-    "title": "锁定项目 Node 版本和包管理器",
-    "description": "成员机器 Node.js 版本不统一： 守旧派用 12.x、保守用 14.x、激进用 17.x。项目能否正常跑起来全凭天意，在没有 CICD 流水线加持本地 npm run build 的场景下线上风险可想而知。",
-    "url": "https://segmentfault.com/a/1190000041918155",
-    "author": "亖混子",
-    "home_url": "https://segmentfault.com/u/1023",
-    "votes": "15",
     "rank": 17
   },
   {
-    "title": "让拖拽更加人性化？如何自定义dragover样式",
-    "description": "欢迎关注微信公众号： 前端侦探在 web 开发中，经常会碰到需要拖拽的场景。为了更好的体验，拖拽区域需要有一定的变化提示，告诉用户：\"现在可以放在这里了~\"，例如这样的之前在这篇文章讲述了如何自定义 drag 样...",
-    "url": "https://segmentfault.com/a/1190000041974546",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "10",
+    "title": "干货合集│最好用的 python 库都在这",
+    "description": "一、分词 - jieba优秀的中文分词库，依靠中文词库，利用词库确定汉子之间关联的概率，形成分词结果 {代码...} 二、词云库 - wordcloud对数据中出现频率较高的 关键词 生成的一幅图像，予以视觉上的突出 {代码...}...",
+    "url": "https://segmentfault.com/a/1190000041962217",
+    "author": "极客飞兔",
+    "home_url": "https://segmentfault.com/u/autofelix",
+    "votes": "8",
     "rank": 18
   },
   {
@@ -179,33 +179,42 @@
     "votes": "10",
     "rank": 20
   },
-  {
-    "title": "无需安装、注册，一行命令搞定内网穿透！关键是完全免费",
-    "description": "内网穿透，即NAT穿透，网络连接时术语。外网与内网的计算机节点需要连接通信，映射端口能让外网的电脑找到处于内网的电脑，提高下载速度。内网穿透的应用场景web 应用开发向外网发布开发的一些web demo，或者远程...",
-    "url": "https://segmentfault.com/a/1190000041921943",
-    "author": "民工哥",
-    "home_url": "https://segmentfault.com/u/jishuroad",
-    "votes": "12",
-    "rank": 21
-  },
   {
     "title": "Base64 编码知识，一文打尽！",
     "description": "现在网站为了提升用户的浏览体验越来越多的使用了图片，而这些图片通常以 Base64 的形式存储和加载。因此各位开发工程师肯定对 Base64 毫不陌生了，那么你知道 Base64 究竟是什么，为什么要使用 Base64，以及 Bas...",
     "url": "https://segmentfault.com/a/1190000041894263",
     "author": "云叔_又拍云",
     "home_url": "https://segmentfault.com/u/yunshu_blog",
-    "votes": "11",
+    "votes": "12",
+    "rank": 21
+  },
+  {
+    "title": "JS实现将文本或JSON内容下载到文件中",
+    "description": "有时候在前端开发过程中，可能遇到这样的需求场景：需要将页面上的文本内容下载到文件中，内容可能是某个大的文本字段，比如博客文章，也可能是后端接口返回的 JSON 数据。",
+    "url": "https://segmentfault.com/a/1190000041965165",
+    "author": "十方",
+    "home_url": "https://segmentfault.com/u/shifang_5b2b70d160932",
+    "votes": "9",
     "rank": 22
   },
   {
-    "title": "js面试题(进阶)梳理",
-    "description": "1、undeclared 与 undefined的区别？ {代码...} 2、let & const与 var 的区别？ {代码...} 3、获取DOM元素有哪些方法？方法描述document.getElementById(id)通过id获取domdocument.getElementsByTagName(tagName)...",
-    "url": "https://segmentfault.com/a/1190000041855296",
-    "author": "墨城",
-    "home_url": "https://segmentfault.com/u/xiaomogu_5f2124ad3ad42",
-    "votes": "15",
+    "title": "无需安装、注册，一行命令搞定内网穿透！关键是完全免费",
+    "description": "内网穿透，即NAT穿透，网络连接时术语。外网与内网的计算机节点需要连接通信，映射端口能让外网的电脑找到处于内网的电脑，提高下载速度。内网穿透的应用场景web 应用开发向外网发布开发的一些web demo，或者远程...",
+    "url": "https://segmentfault.com/a/1190000041921943",
+    "author": "民工哥",
+    "home_url": "https://segmentfault.com/u/jishuroad",
+    "votes": "12",
     "rank": 23
   },
+  {
+    "title": "如何自定义 drag 样式",
+    "description": "欢迎关注我的公众号：前端侦探在 web 中，图片默认是可以拖拽的，通常是一个半透明的预览图（下面简称“预览图”），如下这个预览图是系统自动生成的，一般无法进行自定义，但有时候会觉得拖拽的预览图尺寸太大了，...",
+    "url": "https://segmentfault.com/a/1190000041881296",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "12",
+    "rank": 24
+  },
   {
     "title": "Three.js 打造缤纷夏日3D梦中情岛 🌊",
     "description": "深居内陆的人们，大概每个人都有过大海之梦吧。夏日傍晚在沙滩漫步奔跑；或是在海上冲浪游泳；或是在海岛游玩探险；亦或静待日出日落……本文使用 React + Three.js 技术栈，实现 3D 海洋和岛屿，主要包含知识点包...",
@@ -213,15 +222,6 @@
     "author": "dragonir",
     "home_url": "https://segmentfault.com/u/dragonir",
     "votes": "10",
-    "rank": 24
-  },
-  {
-    "title": "干货合集│最好用的 python 库都在这",
-    "description": "一、分词 - jieba优秀的中文分词库，依靠中文词库，利用词库确定汉子之间关联的概率，形成分词结果 {代码...} 二、词云库 - wordcloud对数据中出现频率较高的 关键词 生成的一幅图像，予以视觉上的突出 {代码...}...",
-    "url": "https://segmentfault.com/a/1190000041962217",
-    "author": "极客飞兔",
-    "home_url": "https://segmentfault.com/u/autofelix",
-    "votes": "7",
     "rank": 25
   },
   {
@@ -233,15 +233,6 @@
     "votes": "8",
     "rank": 26
   },
-  {
-    "title": "如何自定义 drag 样式",
-    "description": "欢迎关注我的公众号：前端侦探在 web 中，图片默认是可以拖拽的，通常是一个半透明的预览图（下面简称“预览图”），如下这个预览图是系统自动生成的，一般无法进行自定义，但有时候会觉得拖拽的预览图尺寸太大了，...",
-    "url": "https://segmentfault.com/a/1190000041881296",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "11",
-    "rank": 27
-  },
   {
     "title": "全球顶级交易所前端二面",
     "description": "背景今天早上在脉脉上看到一个关于BN的前端二面分享，作者出于纯粹的目的分享了一下最近的面试题。我觉得这是一套不错的面试题，于是分享给了大家。为什么会有这套面试题前端界，到底什么样子的项目，会用到这类...",
@@ -249,7 +240,7 @@
     "author": "Peter谭老师",
     "home_url": "https://segmentfault.com/u/jerrytanjinjie",
     "votes": "7",
-    "rank": 28
+    "rank": 27
   },
   {
     "title": "CSS 变量自动变色技术",
@@ -258,7 +249,7 @@
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "11",
-    "rank": 29
+    "rank": 28
   },
   {
     "title": "JavaScript精度丢失原因以及解决方案",
@@ -267,6 +258,15 @@
     "author": "沉静地闪光",
     "home_url": "https://segmentfault.com/u/007008",
     "votes": "9",
+    "rank": 29
+  },
+  {
+    "title": "社区的力量 | SegmentFault 思否十周年，伙伴们说",
+    "description": "开发者更像是厨师，治大国如烹小鲜，写代码如做甜点。下一个十年，不是技术行业的十年，而会是全行业的技术十年。愿乘风破万里浪，看十年发展必辉煌。—— 陈加贝，vika 维格联合创始人兼 CTO ✨",
+    "url": "https://segmentfault.com/a/1190000041926694",
+    "author": "SegmentFault思否",
+    "home_url": "https://segmentfault.com/u/segmentfault",
+    "votes": "5",
     "rank": 30
   }
 ]