@wcj/github-rank 22.7.14 → 22.7.17

package/dist/sifou-daily.json

@@ -1,47 +1,11 @@
 [
   {
-    "title": "利用噪声构建美妙的 CSS 图形",
-    "description": "在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子：此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：...",
-    "url": "https://segmentfault.com/a/1190000042103702",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "3",
-    "rank": 1
-  },
-  {
-    "title": "Redis 内存优化神技，小内存保存大数据",
-    "description": "大家好，我是「码哥」，大家可以叫我靓仔。这次码哥跟大家分享一些优化神技，当你面试或者工作中你遇到如下问题，那就使出今天学到的绝招，一招定乾坤！如何用更少的内存保存更多的数据？我们应该从 Redis 是如何...",
-    "url": "https://segmentfault.com/a/1190000042103541",
-    "author": "码哥字节",
-    "home_url": "https://segmentfault.com/u/magebyte",
-    "votes": "2",
-    "rank": 2
-  },
-  {
-    "title": "Go 原生插件使用问题全解析",
-    "description": "文｜丁飞（花名：路德 )蚂蚁集团高级工程师深耕于 SOFAMesh 产品的商业化落地 主要方向为基于服务网格技术的系统架构升级方案设计与落地本文 4394 字 阅读 10 分钟｜前言｜MOSN 作为蚂蚁集团在 ServiceMesh 解决...",
-    "url": "https://segmentfault.com/a/1190000042104429",
-    "author": "SOFAStack",
-    "home_url": "https://segmentfault.com/u/sofastack",
+    "title": "Go 每日一库之 bitset",
+    "description": "我们都知道计算机是基于二进制的，位运算是计算机的基础运算。位运算的优势很明显，CPU 指令原生支持、速度快。基于位运算的位集合在有限的场景中替换集合数据结构可以收到意想不到的效果。bitset库实现了位集合...",
+    "url": "https://segmentfault.com/a/1190000042181183",
+    "author": "darjun",
+    "home_url": "https://segmentfault.com/u/guyu_5d2e806c57ac8",
     "votes": "1",
-    "rank": 3
-  },
-  {
-    "title": "DNS 系列（三）：如何免受 DNS 欺骗的侵害",
-    "description": "互联网上每一台设备都会有一个 IP 地址，我们在访问网站或发送信息时，其实都是通过 IP 地址达成准确请求的。但是这个 IP 地址由很长一串数字组成，记忆起来相当困难，所以我们创造了更实用的域名来代替 IP 地址...",
-    "url": "https://segmentfault.com/a/1190000042104392",
-    "author": "云叔_又拍云",
-    "home_url": "https://segmentfault.com/u/yunshu_blog",
-    "votes": "1",
-    "rank": 4
-  },
-  {
-    "title": "Vue 部署后强制客户端刷新获取最新的代码资源【纯前端】",
-    "description": "背景：自己的项目修复了bug；但是客户端没有刷新浏览器；导致还是有bug的资源代码；出现了问题思路：结合Vue 部署后怎么强制客户端刷新获取最新的代码资源？里面的方案；分3步曲实现生产环境部署后资源刷新",
-    "url": "https://segmentfault.com/a/1190000042105627",
-    "author": "songxianling1992",
-    "home_url": "https://segmentfault.com/u/songxianling1992",
-    "votes": "2",
-    "rank": 5
+    "rank": 1
   }
 ]

package/dist/sifou-monthly.json

@@ -1,13 +1,4 @@
 [
-  {
-    "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": "33",
-    "rank": 1
-  },
   {
     "title": "CSS实现可拉伸调整尺寸的分栏布局",
     "description": "很多页面布局，特别是那种工具类的、比如编辑器、可视化平台等，为了充分的利用屏幕空间，都会提供拖拽调节各个分栏尺寸的功能，比如像 vscode",
@@ -15,7 +6,7 @@
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "33",
-    "rank": 2
+    "rank": 1
   },
   {
     "title": "使用纯 CSS 实现超酷炫的粘性气泡效果",
@@ -23,8 +14,8 @@
     "url": "https://segmentfault.com/a/1190000042070334",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "24",
-    "rank": 3
+    "votes": "25",
+    "rank": 2
   },
   {
     "title": "掘地三尺搞定 Redis 与 MySQL 数据一致性问题",
@@ -33,7 +24,7 @@
     "author": "码哥字节",
     "home_url": "https://segmentfault.com/u/magebyte",
     "votes": "22",
-    "rank": 4
+    "rank": 3
   },
   {
     "title": "CSS层级小技巧！如何在滚动时自动添加头部阴影？",
@@ -42,7 +33,7 @@
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "20",
-    "rank": 5
+    "rank": 4
   },
   {
     "title": "如何移除你项目中99%的JS代码",
@@ -51,16 +42,16 @@
     "author": "卡颂",
     "home_url": "https://segmentfault.com/u/kasong",
     "votes": "18",
-    "rank": 6
+    "rank": 5
   },
   {
-    "title": "让拖拽更加人性化？如何自定义dragover样式",
-    "description": "欢迎关注微信公众号： 前端侦探在 web 开发中，经常会碰到需要拖拽的场景。为了更好的体验，拖拽区域需要有一定的变化提示，告诉用户：\"现在可以放在这里了~\"，例如这样的之前在这篇文章讲述了如何自定义 drag 样...",
-    "url": "https://segmentfault.com/a/1190000041974546",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "14",
-    "rank": 7
+    "title": "switch 有四样写法你知道么",
+    "description": "我所知道的 JavaScript 的 switch 语句只有一种写法。但要说到对分支的处理，写法可就多了去了。if 分支写法可以算一种，switch 分支写法可以算第二种，第三种是使用策略模式，如果要把条件运算符也算上的话，嗯...",
+    "url": "https://segmentfault.com/a/1190000042055258",
+    "author": "边城",
+    "home_url": "https://segmentfault.com/u/jamesfancy",
+    "votes": "16",
+    "rank": 6
   },
   {
     "title": "有意思的鼠标指针交互探究",
@@ -68,17 +59,17 @@
     "url": "https://segmentfault.com/a/1190000042012558",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "16",
-    "rank": 8
+    "votes": "17",
+    "rank": 7
   },
   {
-    "title": "switch 有四样写法你知道么",
-    "description": "我所知道的 JavaScript 的 switch 语句只有一种写法。但要说到对分支的处理，写法可就多了去了。if 分支写法可以算一种，switch 分支写法可以算第二种，第三种是使用策略模式，如果要把条件运算符也算上的话，嗯...",
-    "url": "https://segmentfault.com/a/1190000042055258",
-    "author": "边城",
-    "home_url": "https://segmentfault.com/u/jamesfancy",
-    "votes": "15",
-    "rank": 9
+    "title": "叮~您有一封Vue.js挑战邀请函,请查收",
+    "description": "大家好,我是webfansplz.今天要跟大家分享的是vuejs-challenges,一个Vue.js在线挑战平台,它提供了一些题库,开发者可以在线进行挑战.通过这些挑战,我们可以进一步了解和熟悉Vue.js,希望它能对想学习Vue.js的同学有...",
+    "url": "https://segmentfault.com/a/1190000042064246",
+    "author": "null仔",
+    "home_url": "https://segmentfault.com/u/xiaoqianduan_58b28cfebff36",
+    "votes": "13",
+    "rank": 8
   },
   {
     "title": "视觉还原小技巧！CSS 实现角标效果",
@@ -87,24 +78,33 @@
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "17",
+    "rank": 9
+  },
+  {
+    "title": "高阶切图技巧！基于单张图片的任意颜色转换",
+    "description": "今天，要介绍一种基于 CSS mask-composite 的高级技巧。通过掌握它，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。通过单张 PNG/SVG 得到它的反向切图事情的经过是这样的，某...",
+    "url": "https://segmentfault.com/a/1190000042093361",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "12",
     "rank": 10
   },
   {
-    "title": "叮~您有一封Vue.js挑战邀请函,请查收",
-    "description": "大家好,我是webfansplz.今天要跟大家分享的是vuejs-challenges,一个Vue.js在线挑战平台,它提供了一些题库,开发者可以在线进行挑战.通过这些挑战,我们可以进一步了解和熟悉Vue.js,希望它能对想学习Vue.js的同学有...",
-    "url": "https://segmentfault.com/a/1190000042064246",
-    "author": "null仔",
-    "home_url": "https://segmentfault.com/u/xiaoqianduan_58b28cfebff36",
+    "title": "使用CSS background实现炫酷悬停效果",
+    "description": "日常开发过程中，会遇到不少按钮鼠标悬停的效果，实现这类悬停效果的方式有很多，借助伪元素，CSS3变换及过渡等都可以实现。今天的文章将使用背景色实现类似的效果，当我们遇到一个问题时，你的脑海中的方案不止...",
+    "url": "https://segmentfault.com/a/1190000042069856",
+    "author": "南城大前端",
+    "home_url": "https://segmentfault.com/u/nanchengfe",
     "votes": "12",
     "rank": 11
   },
   {
-    "title": "Redis都有哪些使用场景",
-    "description": "Redis作为一种内存型的非关系型的数据库，不管在互联网大厂，小厂，大项目和小项目中，几乎都会被使用。为什么Redis会受到如此青睐呢？关于这个问题，可能很多的程序员只是看着别人用而用，缺乏对Redis一个全面的...",
-    "url": "https://segmentfault.com/a/1190000041985101",
-    "author": "7small7",
-    "home_url": "https://segmentfault.com/u/7small7",
-    "votes": "10",
+    "title": "动画合成小技巧！CSS 实现动感的倒计时效果",
+    "description": "欢迎关注微信公众号： 前端侦探介绍一个 CSS 动画合成小技巧。先看效果这是一个非常“动感”的倒计时效果，通常在一些活动开场中比较常见，分析一下整个动画过程，不难发现，有以下几类动画数字的变化缩小和放大透...",
+    "url": "https://segmentfault.com/a/1190000042094549",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "14",
     "rank": 12
   },
   {
@@ -131,18 +131,9 @@
     "url": "https://segmentfault.com/a/1190000042048392",
     "author": "Beverly",
     "home_url": "https://segmentfault.com/u/beverly0",
-    "votes": "8",
+    "votes": "9",
     "rank": 15
   },
-  {
-    "title": "使用CSS background实现炫酷悬停效果",
-    "description": "日常开发过程中，会遇到不少按钮鼠标悬停的效果，实现这类悬停效果的方式有很多，借助伪元素，CSS3变换及过渡等都可以实现。今天的文章将使用背景色实现类似的效果，当我们遇到一个问题时，你的脑海中的方案不止...",
-    "url": "https://segmentfault.com/a/1190000042069856",
-    "author": "南城大前端",
-    "home_url": "https://segmentfault.com/u/nanchengfe",
-    "votes": "11",
-    "rank": 16
-  },
   {
     "title": "PHP后端面试85问",
     "description": "替换原则(the Liskov Substitution Principle LSP) ：子类应当可以替换父类并出现在父类能够出现的任何地方。",
@@ -150,16 +141,16 @@
     "author": "IT小马",
     "home_url": "https://segmentfault.com/u/itxiaoma",
     "votes": "9",
-    "rank": 17
+    "rank": 16
   },
   {
-    "title": "高阶切图技巧！基于单张图片的任意颜色转换",
-    "description": "今天，要介绍一种基于 CSS mask-composite 的高级技巧。通过掌握它，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。通过单张 PNG/SVG 得到它的反向切图事情的经过是这样的，某...",
-    "url": "https://segmentfault.com/a/1190000042093361",
+    "title": "利用噪声构建美妙的 CSS 图形",
+    "description": "在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子：此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：...",
+    "url": "https://segmentfault.com/a/1190000042103702",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "10",
-    "rank": 18
+    "votes": "8",
+    "rank": 17
   },
   {
     "title": "前端性能监测，Runtime Performance Debug 技巧",
@@ -168,16 +159,7 @@
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
     "votes": "11",
-    "rank": 19
-  },
-  {
-    "title": "动画合成小技巧！CSS 实现动感的倒计时效果",
-    "description": "欢迎关注微信公众号： 前端侦探介绍一个 CSS 动画合成小技巧。先看效果这是一个非常“动感”的倒计时效果，通常在一些活动开场中比较常见，分析一下整个动画过程，不难发现，有以下几类动画数字的变化缩小和放大透...",
-    "url": "https://segmentfault.com/a/1190000042094549",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "11",
-    "rank": 20
+    "rank": 18
   },
   {
     "title": "SegmentFault 思否社区 10 周年 | 寄语有奖获奖名单公布，快来领奖~",
@@ -186,16 +168,16 @@
     "author": "SegmentFault思否",
     "home_url": "https://segmentfault.com/u/segmentfault",
     "votes": "7",
-    "rank": 21
+    "rank": 19
   },
   {
-    "title": "使用 content-visibility 优化渲染性能",
-    "description": "content-visibility：属性控制一个元素是否渲染其内容，它允许用户代理（浏览器）潜在地省略大量布局和渲染工作，直到需要它为止。",
-    "url": "https://segmentfault.com/a/1190000041980427",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "12",
-    "rank": 22
+    "title": "熬夜爆肝整理的一份elasticsearch中文文档手册",
+    "description": "Elaticsearch，简称为 ES， ES 是一个开源的高扩展的分布式全文搜索引擎，Elasticsearch 是面向文档型数据库，一条数据在这里就是一个文档。",
+    "url": "https://segmentfault.com/a/1190000042059652",
+    "author": "7small7",
+    "home_url": "https://segmentfault.com/u/7small7",
+    "votes": "9",
+    "rank": 20
   },
   {
     "title": "Sass应用之实现主题切换",
@@ -204,7 +186,7 @@
     "author": "玛尔斯通",
     "home_url": "https://segmentfault.com/u/zhouqichao",
     "votes": "7",
-    "rank": 23
+    "rank": 21
   },
   {
     "title": "玩转 AbortController 控制器",
@@ -213,16 +195,7 @@
     "author": "jump__jump",
     "home_url": "https://segmentfault.com/u/jump_and_jump",
     "votes": "6",
-    "rank": 24
-  },
-  {
-    "title": "为什么Hook没有ErrorBoundary？",
-    "description": "在很多全面使用Hooks开发的团队，唯一使用ClassComponent的场景就是使用ClassComponent创建ErrorBoundary。",
-    "url": "https://segmentfault.com/a/1190000041974765",
-    "author": "卡颂",
-    "home_url": "https://segmentfault.com/u/kasong",
-    "votes": "4",
-    "rank": 25
+    "rank": 22
   },
   {
     "title": "esbuild 构建油猴脚本",
@@ -231,7 +204,7 @@
     "author": "边城",
     "home_url": "https://segmentfault.com/u/jamesfancy",
     "votes": "6",
-    "rank": 26
+    "rank": 23
   },
   {
     "title": "Vue项目之使用EditorConfig, Eslint和Prettier实现代码规范",
@@ -240,7 +213,7 @@
     "author": "玛尔斯通",
     "home_url": "https://segmentfault.com/u/zhouqichao",
     "votes": "11",
-    "rank": 27
+    "rank": 24
   },
   {
     "title": "又拍云 Redis 的改进之路",
@@ -249,16 +222,7 @@
     "author": "云叔_又拍云",
     "home_url": "https://segmentfault.com/u/yunshu_blog",
     "votes": "7",
-    "rank": 28
-  },
-  {
-    "title": "熬夜爆肝整理的一份elasticsearch中文文档手册",
-    "description": "Elaticsearch，简称为 ES， ES 是一个开源的高扩展的分布式全文搜索引擎，Elasticsearch 是面向文档型数据库，一条数据在这里就是一个文档。",
-    "url": "https://segmentfault.com/a/1190000042059652",
-    "author": "7small7",
-    "home_url": "https://segmentfault.com/u/7small7",
-    "votes": "8",
-    "rank": 29
+    "rank": 25
   },
   {
     "title": "几百行代码实现一个 JSON 解析器",
@@ -267,6 +231,42 @@
     "author": "crossoverJie",
     "home_url": "https://segmentfault.com/u/crossoverjie",
     "votes": "5",
+    "rank": 26
+  },
+  {
+    "title": "🗂 看了 web.dev 的 631 篇博客，我总结了这些内容",
+    "description": "最近在做 web 性能优化的工作，所以想集中学习了解一下相关的专题内容。这部分内容肯定要学习一手信息，所以找先找了 [链接]，一个 Google 官方推出的一个面向 Web 开发者的网站，里面有非常多的教程和最佳实践，...",
+    "url": "https://segmentfault.com/a/1190000042083758",
+    "author": "卤代烃",
+    "home_url": "https://segmentfault.com/u/skychx",
+    "votes": "7",
+    "rank": 27
+  },
+  {
+    "title": "Three.js系列: 在元宇宙看电影，享受 VR 视觉盛宴",
+    "description": "最近元宇宙的概念很火，并且受到疫情的影响，我们的出行总是受限，电影院也总是关门，但是在家里又没有看大片的氛围，这个时候我们就可以通过自己来造一个宇宙，并在 VR 设备（Oculus 、cardboard）中来观看。",
+    "url": "https://segmentfault.com/a/1190000042094334",
+    "author": "程序员秋风",
+    "home_url": "https://segmentfault.com/u/qiufeng_5a07f6cb96ee0",
+    "votes": "5",
+    "rank": 28
+  },
+  {
+    "title": "热乎乎的前端\"数字\" 转换 \"货币字符串\", 如此有趣的知识来啦 (Intl.NumberFormat)",
+    "description": "这是一个由我编写的轻量级数字转货币字符串插件, 因为发现各个国家的货币相关知识很有趣, 并且当前市场上相关插件比较老, 所以也想与你分享这些有趣知识。",
+    "url": "https://segmentfault.com/a/1190000042037852",
+    "author": "lulu_up",
+    "home_url": "https://segmentfault.com/u/lulu_up",
+    "votes": "11",
+    "rank": 29
+  },
+  {
+    "title": "webpack 拆包：关于 splitChunks 的几个重点属性解析",
+    "description": "先来举个简单的栗子，wepack 设置中有 3 个入口文件：a.js、b.js 和 c.js，每个入口文件都同步 import 了 m1.js，不设置 splitChunks，配置下 webpack-bundle-analyzer 插件用来查看输出文件的内容，打包输出是这...",
+    "url": "https://segmentfault.com/a/1190000042093955",
+    "author": "deepfunc",
+    "home_url": "https://segmentfault.com/u/deepfunc",
+    "votes": "3",
     "rank": 30
   }
 ]