@wcj/github-rank 22.8.30 → 22.8.31

package/dist/sifou-daily.json

@@ -1,65 +1,110 @@
 [
   {
-    "title": "实体关系图 (ERD)",
-    "description": "ERD, 即 entity Relationship diagram, 实体关系图。使用一组定义的符号，如矩形、菱形、椭圆和连接线来描述实体、关系及其属性的相互联系。",
-    "url": "https://segmentfault.com/a/1190000042396742",
-    "author": "weiewiyi",
-    "home_url": "https://segmentfault.com/u/chenchu_6110ed583800c",
-    "votes": "2",
+    "title": "巧用 transition 实现短视频 APP 点赞动画",
+    "description": "那么，这么有趣的点赞动画，有没有可能使用纯 CSS 实现呢？那当然是必须的，本文，就将巧妙的借助 transition，仅仅使用 CSS 完成这么一个点赞动画。",
+    "url": "https://segmentfault.com/a/1190000042398943",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "5",
     "rank": 1
   },
   {
-    "title": "Docker网络模型以及容器通信",
-    "description": "本篇接着上篇：【Docker0网络及原理探究】，继续深入探究容器网络通信原理，通过学习Docker网路驱动模型，更好地解决容器间的通信问题🎉🎉",
-    "url": "https://segmentfault.com/a/1190000042396908",
-    "author": "甜点cc",
-    "home_url": "https://segmentfault.com/u/xiaojt",
-    "votes": "1",
+    "title": "如何让CSS计数器支持小数的动态变化？",
+    "description": "最近在几篇文章中都用到了 CSS 计数器，可以将 CSS 变量通过伪元素content动态展示出来，还可以做出很多有趣的动画。有兴趣的可以先回顾一下之前的这几篇文章：",
+    "url": "https://segmentfault.com/a/1190000042397184",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "3",
     "rank": 2
   },
   {
-    "title": "精读《SolidJS》",
-    "description": "SolidJS 是一个语法像 React Function Component，内核像 Vue 的前端框架，本周我们通过阅读 Introduction to SolidJS 这篇文章来理解理解其核心概念。",
-    "url": "https://segmentfault.com/a/1190000042392152",
-    "author": "黄子毅",
-    "home_url": "https://segmentfault.com/u/aoyangyudakong",
-    "votes": "2",
+    "title": "前后端数据接口协作提效实践",
+    "description": "导读：在大部分场景中，前后端可以在开发前约定好数据接口，双方能够围绕约定并行地完成开发和自测 。然而在大型系统中一些后端模块有时并非直连前端，在它们之间可能包含一些其它模块的处理过程，为了保证数据真...",
+    "url": "https://segmentfault.com/a/1190000042398799",
+    "author": "百度Geek说",
+    "home_url": "https://segmentfault.com/u/baidujiagoushi",
+    "votes": "1",
     "rank": 3
   },
   {
-    "title": "总结一下er图的设计",
-    "description": "er图中的er是entity relationship的简写即实体关系，一个好的er图会使整个项目编写起来都会比较轻松。er图的首要任务就是理清实体间的关系，而不是去关心实体中的属性，即各个实体是1：1，1：n，还是n：m。并且各...",
-    "url": "https://segmentfault.com/a/1190000042396414",
-    "author": "李明",
-    "home_url": "https://segmentfault.com/u/crister_612f55567eb8c",
-    "votes": "1",
+    "title": "【译】20个实用的JavaScript技巧",
+    "description": "JavaScript不断发展壮大，因为它是最容易上手的语言之一，因此为市场上的新“成为技术怪才”打开了大门。（真假的啊？）的确，JavaScript可以做很多出色的事情！还有很多东西要学习。而且，无论您是JavaScript的新...",
+    "url": "https://segmentfault.com/a/1190000042399644",
+    "author": "九旬",
+    "home_url": "https://segmentfault.com/u/ansonznl",
+    "votes": "2",
     "rank": 4
   },
   {
-    "title": "记录一次用docker-compose配置 mysql的过程",
-    "description": "本周主要事件都在设计原型或者是设计er图，没有出现什么技术上的问题。但是本周在学第的提问中却出现了问题，我本来想直接在学第给的远程代码拉到本地执行来解决问题，但是在运行时出现了问题，mysql又出问题了。",
-    "url": "https://segmentfault.com/a/1190000042396412",
-    "author": "李明",
-    "home_url": "https://segmentfault.com/u/crister_612f55567eb8c",
+    "title": "SegmentFaul 2022 年社区周报 Vol.7 | 好久不见~",
+    "description": "这期间，社区发生了很多很多事情，调整了许多功能模块，当然也包含本喵的诞生，今天社区运营周报制度正式恢复啦，本喵带你了解一下这周社区都发生了什么吧~",
+    "url": "https://segmentfault.com/a/1190000042402701",
+    "author": "SegmentFault思否",
+    "home_url": "https://segmentfault.com/u/segmentfault",
     "votes": "1",
     "rank": 5
   },
   {
-    "title": "elementui源码学习之仿写一个el-collapse",
-    "description": "本篇文章记录仿写一个el-collapse组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节。本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件。源码在github上，大家可...",
-    "url": "https://segmentfault.com/a/1190000042397748",
-    "author": "水冗水孚",
-    "home_url": "https://segmentfault.com/u/shuirongshui",
-    "votes": "1",
+    "title": "给小鹤音形安个\"家\"",
+    "description": "最近换工作了，同事看到我在打字的时候蛮神奇的（我当时用的飞扬，关闭了候选栏），问我用的什么输入法，我说是小鹤音形，他立马去了解了。如果我能传播一下小鹤音形，那我也蛮开心的，但是在工作的时候，还没见...",
+    "url": "https://segmentfault.com/a/1190000042406132",
+    "author": "小黄本黄",
+    "home_url": "https://segmentfault.com/u/xiaohuangbenhuang",
+    "votes": "2",
     "rank": 6
   },
   {
-    "title": "【Java面试】这也太卷了~面试竟然问，HTTP协议和RPC协议的区别",
-    "description": "“Http协议和RPC协议有什么区别？”最近很多人问我这个问题，他们都不知道怎么回答。今天我们就来了解一下这个问题的高手回答。另外，我把文字版本的内容整理到了一个15W字的面试文档里了。大家可以看文章尾端领取...",
-    "url": "https://segmentfault.com/a/1190000042396155",
-    "author": "跟着Mic学架构",
-    "home_url": "https://segmentfault.com/u/fukua_5be8034f8191f",
+    "title": "SpringBoot配置文件application",
+    "description": "原文链接Map配置YML配置文件: {代码...} 方法内： {代码...} cron表达式YML配置文件: {代码...} 代码示例： {代码...}   学习更多编程知识，请关注我的公众号：代码的路",
+    "url": "https://segmentfault.com/a/1190000042405945",
+    "author": "代码的路",
+    "home_url": "https://segmentfault.com/u/zbzcdzf",
     "votes": "1",
     "rank": 7
+  },
+  {
+    "title": "深入理解JavaScript-Object.create",
+    "description": "2006年，Douglas Grockford 写了一篇文章：《JavaScript 中的原型式继承》（”Prototypal Inheritance in JavaScript“）。这篇文章介绍了一种不涉及严格意义上构造函数的继承方法。他的出发点是即使不自定义类型也...",
+    "url": "https://segmentfault.com/a/1190000042404696",
+    "author": "山头人汉波",
+    "home_url": "https://segmentfault.com/u/johanazhu",
+    "votes": "1",
+    "rank": 8
+  },
+  {
+    "title": "大家都能看得懂的源码 - 那些关于DOM的常见Hook封装（二）",
+    "description": "本文是深入浅出 ahooks 源码系列文章的第十五篇，该系列已整理成文档-地址。觉得还不错，给个 star 支持一下哈，Thanks。本篇接着针对关于 DOM 的各个 Hook 封装进行解读。useFullscreen管理 DOM 全屏的 Hook。该...",
+    "url": "https://segmentfault.com/a/1190000042400136",
+    "author": "Gopal",
+    "home_url": "https://segmentfault.com/u/fengguangping",
+    "votes": "1",
+    "rank": 9
+  },
+  {
+    "title": "【高并发】通过源码深度解析ThreadPoolExecutor类是如何保证线程池正确运行的",
+    "description": "AtomicInteger类型的常量ctl是贯穿线程池整个生命周期的重要属性，它是一个原子类对象，主要用来保存线程的数量和线程池的状态，我们看下与这个属性相关的代码如下所示。",
+    "url": "https://segmentfault.com/a/1190000042398915",
+    "author": "冰河",
+    "home_url": "https://segmentfault.com/u/binghe001",
+    "votes": "1",
+    "rank": 10
+  },
+  {
+    "title": "聊聊如何利用管道模式来进行业务编排（上篇）",
+    "description": "管道模式不属于我们常说的23种设计模式中的一种，它可以看成是责任链模式的一种变体。所谓的管道模式用技术话来说，就是把数据传递给一个任务队列，由任务队列按次序依次对数据进行加工处理。",
+    "url": "https://segmentfault.com/a/1190000042398701",
+    "author": "linyb极客之路",
+    "home_url": "https://segmentfault.com/u/linybjikezhilu",
+    "votes": "1",
+    "rank": 11
+  },
+  {
+    "title": "BI如何配置“花生壳”，看这一篇就够了",
+    "description": "花生壳作为一款免费的内网穿透软件，在软件行业备受青睐。在做好产品的同时，如何让客户轻松看到，也是非常有必要的。本篇将带领大家使用“花生壳”软件完成BI数据分析的配置。第一步：下载安装，注册。第二步：设...",
+    "url": "https://segmentfault.com/a/1190000042400002",
+    "author": "葡萄城技术团队",
+    "home_url": "https://segmentfault.com/u/grapecity",
+    "votes": "1",
+    "rank": 12
   }
 ]

package/dist/sifou-monthly.json

@@ -1,4 +1,13 @@
 [
+  {
+    "title": "Windows滚动条如何美化成 macOS 那样？",
+    "description": "欢迎关注我的公众号：前端侦探众所周知，Windows和macOS的滚动条在默认情况是不一致的，最显著的区别就是 macOS滚动条是不占据屏幕尺寸的，如下而Windows下是这样的很多设计师会吐槽Windows滚动条不太美观，能不...",
+    "url": "https://segmentfault.com/a/1190000042323523",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "34",
+    "rank": 1
+  },
   {
     "title": "多行文本下的文字渐隐消失术",
     "description": "本文将探讨一下，在多行文本情形下的一些有意思的文字动效。多行文本，相对于单行文本，场景会复杂一些，但是在实际业务中，多行文本也是非常之多的，但是其效果处理比起单行文本会更困难。单行与多行文本的渐隐...",
@@ -6,15 +15,6 @@
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
     "votes": "26",
-    "rank": 1
-  },
-  {
-    "title": "Windows滚动条如何美化成 macOS 那样？",
-    "description": "欢迎关注我的公众号：前端侦探众所周知，Windows和macOS的滚动条在默认情况是不一致的，最显著的区别就是 macOS滚动条是不占据屏幕尺寸的，如下而Windows下是这样的很多设计师会吐槽Windows滚动条不太美观，能不...",
-    "url": "https://segmentfault.com/a/1190000042323523",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "33",
     "rank": 2
   },
   {
@@ -53,6 +53,15 @@
     "votes": "20",
     "rank": 6
   },
+  {
+    "title": "可视化拖拽组件库一些技术要点原理分析（四）",
+    "description": "本文是可视化拖拽系列的第四篇，比起之前的三篇文章，这篇功能点要稍微少一点，总共有五点：SVG 组件动态属性面板数据来源（接口请求）组件联动组件按需加载如果你对我之前的系列文章不是很了解，建议先把这三篇...",
+    "url": "https://segmentfault.com/a/1190000042282658",
+    "author": "谭光志",
+    "home_url": "https://segmentfault.com/u/woai3c",
+    "votes": "15",
+    "rank": 7
+  },
   {
     "title": "前端构建效率优化之路",
     "description": "我们的系统（一个 ToB 的 Web 单页应用）前端单页应用经过多年的迭代，目前已经累积有大几十万行的业务代码，30+ 路由模块，整体的代码量和复杂度还是比较高的。",
@@ -60,15 +69,6 @@
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
     "votes": "19",
-    "rank": 7
-  },
-  {
-    "title": "可视化拖拽组件库一些技术要点原理分析（四）",
-    "description": "本文是可视化拖拽系列的第四篇，比起之前的三篇文章，这篇功能点要稍微少一点，总共有五点：SVG 组件动态属性面板数据来源（接口请求）组件联动组件按需加载如果你对我之前的系列文章不是很了解，建议先把这三篇...",
-    "url": "https://segmentfault.com/a/1190000042282658",
-    "author": "谭光志",
-    "home_url": "https://segmentfault.com/u/woai3c",
-    "votes": "14",
     "rank": 8
   },
   {
@@ -98,15 +98,6 @@
     "votes": "10",
     "rank": 11
   },
-  {
-    "title": "使用前端技术实现静态图片局部流动效果 🌊",
-    "description": "如果你有玩过 🎮 《王者荣耀》、《阴阳师》 等手游，一定注意到过它的启动动画、皮肤立绘卡片等场景，经常采用静态底图加局部液态流动效果的简单动画，这些流动动画可能出现在缓缓流动的水流 🌊、迎风飘动的旗帜 🎏...",
-    "url": "https://segmentfault.com/a/1190000042261453",
-    "author": "dragonir",
-    "home_url": "https://segmentfault.com/u/dragonir",
-    "votes": "10",
-    "rank": 12
-  },
   {
     "title": "Wuzzle，进行基于 webpack 的 JS 转译",
     "description": "转译器（transpiler）是指能够进行文件到文件一对一转换的编译器（compiler）。在 JS 世界中，常见的开箱即可用的转译器有 typescript cli、babel cli 等，但他们一般只处理 .js、.ts 等脚本文件。而 webpack 尽...",
@@ -114,6 +105,15 @@
     "author": "乌柏木",
     "home_url": "https://segmentfault.com/u/wubomu",
     "votes": "14",
+    "rank": 12
+  },
+  {
+    "title": "使用前端技术实现静态图片局部流动效果 🌊",
+    "description": "如果你有玩过 🎮 《王者荣耀》、《阴阳师》 等手游，一定注意到过它的启动动画、皮肤立绘卡片等场景，经常采用静态底图加局部液态流动效果的简单动画，这些流动动画可能出现在缓缓流动的水流 🌊、迎风飘动的旗帜 🎏...",
+    "url": "https://segmentfault.com/a/1190000042261453",
+    "author": "dragonir",
+    "home_url": "https://segmentfault.com/u/dragonir",
+    "votes": "10",
     "rank": 13
   },
   {
@@ -125,15 +125,6 @@
     "votes": "11",
     "rank": 14
   },
-  {
-    "title": "Wuzzle，不 eject 也能定制 create-react-app 创建的 React 应用",
-    "description": "作为 React 官方维护的命令行工具，create-react-app（简称 CRA）能够极其轻松地创建配置完备的 React 应用，帮助使用者快速进入 React 开发。它的最大缺憾是创建的应用不能随心所欲地定制配置。想要定制，只能 e...",
-    "url": "https://segmentfault.com/a/1190000042244854",
-    "author": "乌柏木",
-    "home_url": "https://segmentfault.com/u/wubomu",
-    "votes": "14",
-    "rank": 15
-  },
   {
     "title": "详聊immer.js高效复制与冻结\"对象\"的原理于局限性",
     "description": "immer.js应该是2019年时候火起来的一个库, 他可以高效的复制一个对象(比如相对于JSON.parse(JSON.stringify(obj))), 并且冻结对这个对象上的一些值的修改权限。",
@@ -141,7 +132,7 @@
     "author": "lulu_up",
     "home_url": "https://segmentfault.com/u/lulu_up",
     "votes": "12",
-    "rank": 16
+    "rank": 15
   },
   {
     "title": "面向推荐的汽车知识图谱构建",
@@ -150,7 +141,7 @@
     "author": "之家技术",
     "home_url": "https://segmentfault.com/u/zhijiajishu",
     "votes": "12",
-    "rank": 17
+    "rank": 16
   },
   {
     "title": "妙啊！纯 CSS 实现拼图游戏",
@@ -158,9 +149,27 @@
     "url": "https://segmentfault.com/a/1190000042361223",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "14",
+    "votes": "15",
+    "rank": 17
+  },
+  {
+    "title": "组员老是忘记打卡，我开发了一款小工具，让全组三个月全勤！",
+    "description": "开始的时候我们都设置了一个打卡闹铃，下班后准时提醒，但有的时候加班，加完班回家又忘记打卡了。还有的时候迷之自信的以为自己打卡了，第二天看考勤记录发现没打卡。",
+    "url": "https://segmentfault.com/a/1190000042386997",
+    "author": "杨成功",
+    "home_url": "https://segmentfault.com/u/ruidoc",
+    "votes": "9",
     "rank": 18
   },
+  {
+    "title": "自定义计数器小技巧！CSS 实现长按点赞累加动画",
+    "description": "欢迎关注我的公众号：前端侦探在某条 APP 中，如果长按点赞，会出现这样花里胡哨的动画，如下这个动画有两部分组成，其中这个随机表情的实现可以参考 coco 的这篇文章 巧用 transition 实现短视频 APP 点赞动画比...",
+    "url": "https://segmentfault.com/a/1190000042360785",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "11",
+    "rank": 19
+  },
   {
     "title": "前端晋升答辩-性能优化篇范式",
     "description": "本文力争为你参加晋升答辩时，提供一个论述性能优化相关工作的范式。简单点儿来说，就是按照这个范式文来准备、阐述，就可以博得晋升评委的认可与喜爱。",
@@ -168,7 +177,7 @@
     "author": "胡哥有话说",
     "home_url": "https://segmentfault.com/u/justbecoder",
     "votes": "8",
-    "rank": 19
+    "rank": 20
   },
   {
     "title": "HPC、AI与云计算：当智能时代三叉戟在亚马逊云科技完美融合",
@@ -177,7 +186,7 @@
     "author": "六一",
     "home_url": "https://segmentfault.com/u/suicidal_romantic_scoundrel",
     "votes": "6",
-    "rank": 20
+    "rank": 21
   },
   {
     "title": "基于 Next.js实现在线Excel",
@@ -186,15 +195,6 @@
     "author": "葡萄城技术团队",
     "home_url": "https://segmentfault.com/u/grapecity",
     "votes": "5",
-    "rank": 21
-  },
-  {
-    "title": "组员老是忘记打卡，我开发了一款小工具，让全组三个月全勤！",
-    "description": "开始的时候我们都设置了一个打卡闹铃，下班后准时提醒，但有的时候加班，加完班回家又忘记打卡了。还有的时候迷之自信的以为自己打卡了，第二天看考勤记录发现没打卡。",
-    "url": "https://segmentfault.com/a/1190000042386997",
-    "author": "杨成功",
-    "home_url": "https://segmentfault.com/u/ruidoc",
-    "votes": "8",
     "rank": 22
   },
   {
@@ -207,12 +207,12 @@
     "rank": 23
   },
   {
-    "title": "聊聊 npm 的语义化版本（Semver）",
-    "description": "现在我们要开发一个项目，我们都知道为了方便项目管理，要写一个版本号，那开发的时候初始的版本号是多少呢？是 1.0.0 还是 0.0.1 开始？",
-    "url": "https://segmentfault.com/a/1190000042342124",
-    "author": "冴羽",
-    "home_url": "https://segmentfault.com/u/yayu",
-    "votes": "6",
+    "title": "精读《pnpm》",
+    "description": "pnpm 全称是 “Performant NPM”，即高性能的 npm。它结合软硬链接与新的依赖组织方式，大大提升了包管理的效率，也同时解决了 “幻影依赖” 的问题，让包管理更加规范，减少潜在风险发生的可能性。",
+    "url": "https://segmentfault.com/a/1190000042318738",
+    "author": "黄子毅",
+    "home_url": "https://segmentfault.com/u/aoyangyudakong",
+    "votes": "10",
     "rank": 24
   },
   {
@@ -225,12 +225,12 @@
     "rank": 25
   },
   {
-    "title": "自定义计数器小技巧！CSS 实现长按点赞累加动画",
-    "description": "欢迎关注我的公众号：前端侦探在某条 APP 中，如果长按点赞，会出现这样花里胡哨的动画，如下这个动画有两部分组成，其中这个随机表情的实现可以参考 coco 的这篇文章 巧用 transition 实现短视频 APP 点赞动画比...",
-    "url": "https://segmentfault.com/a/1190000042360785",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "10",
+    "title": "聊聊 npm 的语义化版本（Semver）",
+    "description": "现在我们要开发一个项目，我们都知道为了方便项目管理，要写一个版本号，那开发的时候初始的版本号是多少呢？是 1.0.0 还是 0.0.1 开始？",
+    "url": "https://segmentfault.com/a/1190000042342124",
+    "author": "冴羽",
+    "home_url": "https://segmentfault.com/u/yayu",
+    "votes": "6",
     "rank": 26
   },
   {