@wcj/github-rank 22.9.1 → 22.9.4

package/web/data/sifou-daily.json

@@ -1,38 +1,29 @@
 [
   {
-    "title": "Flutter 3.3 正式发布",
-    "description": "Flutter 3 是我们正式为全平台提供支持的一个重量级里程碑，距离它的发布仅过去了三个月，今天让我们有请 Flutter 3.3 正式版！近三个月我们并没有放慢更新迭代的速度——自 Flutter 3 发布以来，我们已经为 Flutte...",
-    "url": "https://segmentfault.com/a/1190000042407155",
-    "author": "Flutter",
-    "home_url": "https://segmentfault.com/u/flutter",
+    "title": "微信公众号 Markdown 编辑器",
+    "description": "微信公众号文章 Markdown 在线编辑器，使用 markdown 语法创建一篇简介美观大方的微信公众号图文。由于发版本麻烦，和一些功能无法扩展停滞开发了，未来不再开发 Chrome 的插件(暂存在 chrome 分支)，通过 web 版...",
+    "url": "https://segmentfault.com/a/1190000042428168",
+    "author": "小弟调调",
+    "home_url": "https://segmentfault.com/u/ichu",
     "votes": "2",
     "rank": 1
   },
   {
-    "title": "免费线上讲习班：使用 vue3 开发扫雷游戏",
-    "description": "好了伤疤忘了痛，我又想搞 Workshop 了。这次想做一次 Vue3 相关的，考虑了一下，觉得扫雷游戏比较合适：界面简单，操作简单覆盖全面，布局、JS、交互都有需求不需要前后端数据交互，控制学习范围和难度本身有一...",
-    "url": "https://segmentfault.com/a/1190000042414694",
-    "author": "Meathill",
-    "home_url": "https://segmentfault.com/u/meathill",
+    "title": "elementui源码学习之仿写一个el-switch",
+    "description": "本篇文章记录仿写一个el-switch组件细节，从而有助于大家更好理解饿了么ui对应组件具体工作细节。本文是elementui源码学习仿写系列的又一篇文章，后续空闲了会不断更新并仿写其他组件。源码在github上，大家可以...",
+    "url": "https://segmentfault.com/a/1190000042428063",
+    "author": "水冗水孚",
+    "home_url": "https://segmentfault.com/u/shuirongshui",
     "votes": "1",
     "rank": 2
   },
   {
-    "title": "慎用JSON.stringify",
-    "description": "项目中遇到一个 bug，一个组件为了保留一份 JSON 对象，使用 JSON.stringify 将其转换成字符串，这样做当然是为了避免对象是引用类型造成数据源的污染。",
-    "url": "https://segmentfault.com/a/1190000042414379",
-    "author": "Gopal",
-    "home_url": "https://segmentfault.com/u/fengguangping",
+    "title": "[算法数据结构] 二叉树的几种操作方法及思考",
+    "description": "递归遍历首先，回顾一下其他的数据结构，如数组，链表，栈和队列，比较少的出现递归的操作，一遍都是直接遍历循环。之所以在二叉树的体系里出现递归，和树的数据结构的特点相关：由root节点和左右节点及节点的节...",
+    "url": "https://segmentfault.com/a/1190000042427713",
+    "author": "翁乐安",
+    "home_url": "https://segmentfault.com/u/wenglean",
     "votes": "1",
     "rank": 3
-  },
-  {
-    "title": "基于 LowCodeEngine 的调试能力建设与实践",
-    "description": "低代码由于研发效能和交付的优势变得越来越普及，在降本提效的同时也带来了很多黑盒逻辑。现有的低代码平台普遍缺乏面向用户的调试能力，当用户在低代码搭建遇到问题时，排查和解决问题强依赖平台的客服答疑或浏...",
-    "url": "https://segmentfault.com/a/1190000042408426",
-    "author": "阿里巴巴终端技术",
-    "home_url": "https://segmentfault.com/u/aliterminal",
-    "votes": "1",
-    "rank": 4
   }
 ]

package/web/data/sifou-monthly.json

@@ -14,7 +14,7 @@
     "url": "https://segmentfault.com/a/1190000042325723",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "26",
+    "votes": "27",
     "rank": 2
   },
   {
@@ -26,24 +26,6 @@
     "votes": "23",
     "rank": 3
   },
-  {
-    "title": "妙用 CSS 构建花式透视背景效果",
-    "description": "本文将介绍一种巧用 background 配合 backdrop- filter 来构建有趣的透视背景效果的方式。本技巧源自于一名群友的提问，如何构建如 ElementUI 文档的一种顶栏背景特效，看看效果：仔细看，在页面的的滚动过程中，...",
-    "url": "https://segmentfault.com/a/1190000042267425",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "23",
-    "rank": 4
-  },
-  {
-    "title": "防御式CSS是什么？这几点属性重点防御！",
-    "description": "微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
-    "url": "https://segmentfault.com/a/1190000042272755",
-    "author": "前端小智",
-    "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "20",
-    "rank": 5
-  },
   {
     "title": "可视化拖拽组件库一些技术要点原理分析（四）",
     "description": "本文是可视化拖拽系列的第四篇，比起之前的三篇文章，这篇功能点要稍微少一点，总共有五点：SVG 组件动态属性面板数据来源（接口请求）组件联动组件按需加载如果你对我之前的系列文章不是很了解，建议先把这三篇...",
@@ -51,15 +33,33 @@
     "author": "谭光志",
     "home_url": "https://segmentfault.com/u/woai3c",
     "votes": "15",
+    "rank": 4
+  },
+  {
+    "title": "自定义计数器小技巧！CSS 实现长按点赞累加动画",
+    "description": "欢迎关注我的公众号：前端侦探在某条 APP 中，如果长按点赞，会出现这样花里胡哨的动画，如下这个动画有两部分组成，其中这个随机表情的实现可以参考 coco 的这篇文章 巧用 transition 实现短视频 APP 点赞动画比...",
+    "url": "https://segmentfault.com/a/1190000042360785",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "17",
+    "rank": 5
+  },
+  {
+    "title": "组员老是忘记打卡，我开发了一款小工具，让全组三个月全勤！",
+    "description": "开始的时候我们都设置了一个打卡闹铃，下班后准时提醒，但有的时候加班，加完班回家又忘记打卡了。还有的时候迷之自信的以为自己打卡了，第二天看考勤记录发现没打卡。",
+    "url": "https://segmentfault.com/a/1190000042386997",
+    "author": "杨成功",
+    "home_url": "https://segmentfault.com/u/ruidoc",
+    "votes": "12",
     "rank": 6
   },
   {
-    "title": "前端构建效率优化之路",
-    "description": "我们的系统（一个 ToB 的 Web 单页应用）前端单页应用经过多年的迭代，目前已经累积有大几十万行的业务代码，30+ 路由模块，整体的代码量和复杂度还是比较高的。",
-    "url": "https://segmentfault.com/a/1190000042256837",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "19",
+    "title": "🎁 「极客观点」上线：全新打卡挑战开启，完成即得限量周边！",
+    "description": "中奖名单「极客观点」打卡活动获奖名单公布，快来领奖！思否社区 “新地标” — 极客观点 上线啦～一键传送：[链接]细心观察的小伙伴们可能已经发现，在 SegmentFault 首页悄悄上线了一个全新的版块☕极客观点。在「...",
+    "url": "https://segmentfault.com/a/1190000042331835",
+    "author": "SegmentFault思否",
+    "home_url": "https://segmentfault.com/u/segmentfault",
+    "votes": "9",
     "rank": 7
   },
   {
@@ -72,12 +72,12 @@
     "rank": 8
   },
   {
-    "title": "🎁 「极客观点」上线：全新打卡挑战开启，完成即得限量周边！",
-    "description": "思否社区 “新地标” — 极客观点 上线啦～一键传送：[链接]细心观察的小伙伴们可能已经发现，在 SegmentFault 首页悄悄上线了一个全新的版块☕极客观点。在「极客观点」板块大家会看到这类问题：“为什么技术类书籍很...",
-    "url": "https://segmentfault.com/a/1190000042331835",
-    "author": "SegmentFault思否",
-    "home_url": "https://segmentfault.com/u/segmentfault",
-    "votes": "9",
+    "title": "妙啊！纯 CSS 实现拼图游戏",
+    "description": "本文，将向大家介绍一种将多个 CSS 技巧运用到极致的技巧，利用纯 CSS 实现拼图游戏。本技巧源自于 Temani Afif 的 CodePen CSS Only Puzzle game。一款完全由 CSS 实现的拼图游戏。我们要做的，就是将散落的图片...",
+    "url": "https://segmentfault.com/a/1190000042361223",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "17",
     "rank": 9
   },
   {
@@ -99,23 +99,14 @@
     "rank": 11
   },
   {
-    "title": "使用前端技术实现静态图片局部流动效果 🌊",
-    "description": "如果你有玩过 🎮 《王者荣耀》、《阴阳师》 等手游，一定注意到过它的启动动画、皮肤立绘卡片等场景，经常采用静态底图加局部液态流动效果的简单动画，这些流动动画可能出现在缓缓流动的水流 🌊、迎风飘动的旗帜 🎏...",
-    "url": "https://segmentfault.com/a/1190000042261453",
-    "author": "dragonir",
-    "home_url": "https://segmentfault.com/u/dragonir",
-    "votes": "10",
+    "title": "面向推荐的汽车知识图谱构建",
+    "description": "知识图谱的概念，最早由 Google 在2012 年提出， 旨在实现更智能的搜索引擎，并在2013年之后开始在学术界和工业级普及。目前，随着人工智能技术的高速发展，知识图谱已广泛应用于搜索、推荐、广告、风控、智能调...",
+    "url": "https://segmentfault.com/a/1190000042287137",
+    "author": "之家技术",
+    "home_url": "https://segmentfault.com/u/zhijiajishu",
+    "votes": "13",
     "rank": 12
   },
-  {
-    "title": "React Fiber架构原理剖析",
-    "description": "在 React 16 之前，VirtualDOM 的更新采用的是Stack架构实现的，也就是循环递归方式。不过，这种对比方式有明显的缺陷，就是一旦任务开始进行就无法中断，如果遇到应用中组件数量比较庞大，那么VirtualDOM 的层级...",
-    "url": "https://segmentfault.com/a/1190000042271919",
-    "author": "xiangzhihong",
-    "home_url": "https://segmentfault.com/u/xiangzhihong",
-    "votes": "11",
-    "rank": 13
-  },
   {
     "title": "详聊immer.js高效复制与冻结\"对象\"的原理于局限性",
     "description": "immer.js应该是2019年时候火起来的一个库, 他可以高效的复制一个对象(比如相对于JSON.parse(JSON.stringify(obj))), 并且冻结对这个对象上的一些值的修改权限。",
@@ -123,52 +114,16 @@
     "author": "lulu_up",
     "home_url": "https://segmentfault.com/u/lulu_up",
     "votes": "12",
-    "rank": 14
-  },
-  {
-    "title": "组员老是忘记打卡，我开发了一款小工具，让全组三个月全勤！",
-    "description": "开始的时候我们都设置了一个打卡闹铃，下班后准时提醒，但有的时候加班，加完班回家又忘记打卡了。还有的时候迷之自信的以为自己打卡了，第二天看考勤记录发现没打卡。",
-    "url": "https://segmentfault.com/a/1190000042386997",
-    "author": "杨成功",
-    "home_url": "https://segmentfault.com/u/ruidoc",
-    "votes": "10",
-    "rank": 15
-  },
-  {
-    "title": "面向推荐的汽车知识图谱构建",
-    "description": "知识图谱的概念，最早由 Google 在2012 年提出， 旨在实现更智能的搜索引擎，并在2013年之后开始在学术界和工业级普及。目前，随着人工智能技术的高速发展，知识图谱已广泛应用于搜索、推荐、广告、风控、智能调...",
-    "url": "https://segmentfault.com/a/1190000042287137",
-    "author": "之家技术",
-    "home_url": "https://segmentfault.com/u/zhijiajishu",
-    "votes": "12",
-    "rank": 16
-  },
-  {
-    "title": "自定义计数器小技巧！CSS 实现长按点赞累加动画",
-    "description": "欢迎关注我的公众号：前端侦探在某条 APP 中，如果长按点赞，会出现这样花里胡哨的动画，如下这个动画有两部分组成，其中这个随机表情的实现可以参考 coco 的这篇文章 巧用 transition 实现短视频 APP 点赞动画比...",
-    "url": "https://segmentfault.com/a/1190000042360785",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "12",
-    "rank": 17
-  },
-  {
-    "title": "妙啊！纯 CSS 实现拼图游戏",
-    "description": "本文，将向大家介绍一种将多个 CSS 技巧运用到极致的技巧，利用纯 CSS 实现拼图游戏。本技巧源自于 Temani Afif 的 CodePen CSS Only Puzzle game。一款完全由 CSS 实现的拼图游戏。我们要做的，就是将散落的图片...",
-    "url": "https://segmentfault.com/a/1190000042361223",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "15",
-    "rank": 18
+    "rank": 13
   },
   {
-    "title": "前端晋升答辩-性能优化篇范式",
-    "description": "本文力争为你参加晋升答辩时，提供一个论述性能优化相关工作的范式。简单点儿来说，就是按照这个范式文来准备、阐述，就可以博得晋升评委的认可与喜爱。",
-    "url": "https://segmentfault.com/a/1190000042264240",
-    "author": "胡哥有话说",
-    "home_url": "https://segmentfault.com/u/justbecoder",
-    "votes": "8",
-    "rank": 19
+    "title": "云安全践行者：亚马逊云科技如何打好“安全”牌？",
+    "description": "云计算发展正迅疾如风，猛烈似火。为业务赋能之下，上“云”已成大势所趋！特别是在疫情持续了将近三年的背景下，云市场需求持续爆发。资本方、企业主、客户、用户等等，云正成为各方最受关注的科技领域。2022年，...",
+    "url": "https://segmentfault.com/a/1190000042418291",
+    "author": "六一",
+    "home_url": "https://segmentfault.com/u/suicidal_romantic_scoundrel",
+    "votes": "9",
+    "rank": 14
   },
   {
     "title": "HPC、AI与云计算：当智能时代三叉戟在亚马逊云科技完美融合",
@@ -177,16 +132,7 @@
     "author": "六一",
     "home_url": "https://segmentfault.com/u/suicidal_romantic_scoundrel",
     "votes": "6",
-    "rank": 20
-  },
-  {
-    "title": "基于 Next.js实现在线Excel",
-    "description": "如果要从头开始使用 React 构建一个完整的 Web 应用程序，需要哪些步骤？这当然不像把大象装进冰箱那么简单，只需要分成三步：打开冰箱，拿起大象，塞进冰箱就好。",
-    "url": "https://segmentfault.com/a/1190000042268783",
-    "author": "葡萄城技术团队",
-    "home_url": "https://segmentfault.com/u/grapecity",
-    "votes": "5",
-    "rank": 21
+    "rank": 15
   },
   {
     "title": "从 Islands Architecture 看前端有多卷",
@@ -195,7 +141,7 @@
     "author": "卡颂",
     "home_url": "https://segmentfault.com/u/kasong",
     "votes": "8",
-    "rank": 22
+    "rank": 16
   },
   {
     "title": "精读《pnpm》",
@@ -204,7 +150,7 @@
     "author": "黄子毅",
     "home_url": "https://segmentfault.com/u/aoyangyudakong",
     "votes": "10",
-    "rank": 23
+    "rank": 17
   },
   {
     "title": "记录第一次给开源项目提 PR",
@@ -213,7 +159,7 @@
     "author": "Gopal",
     "home_url": "https://segmentfault.com/u/fengguangping",
     "votes": "6",
-    "rank": 24
+    "rank": 18
   },
   {
     "title": "聊聊 npm 的语义化版本（Semver）",
@@ -222,7 +168,7 @@
     "author": "冴羽",
     "home_url": "https://segmentfault.com/u/yayu",
     "votes": "6",
-    "rank": 25
+    "rank": 19
   },
   {
     "title": "我做了一个在线白板（二）",
@@ -231,16 +177,7 @@
     "author": "街角小林",
     "home_url": "https://segmentfault.com/u/jiejiaoxiaolin",
     "votes": "5",
-    "rank": 26
-  },
-  {
-    "title": "整理了这23个开源项，初学者可以拿来练习！",
-    "description": "微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
-    "url": "https://segmentfault.com/a/1190000042266784",
-    "author": "前端小智",
-    "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "7",
-    "rank": 27
+    "rank": 20
   },
   {
     "title": "使用Vue.js编写命令行界面,前端开发CLI的利器",
@@ -249,7 +186,7 @@
     "author": "null仔",
     "home_url": "https://segmentfault.com/u/xiaoqianduan_58b28cfebff36",
     "votes": "4",
-    "rank": 28
+    "rank": 21
   },
   {
     "title": "electron 应用开发优秀实践",
@@ -258,7 +195,16 @@
     "author": "vivo互联网技术",
     "home_url": "https://segmentfault.com/u/vivo_tech",
     "votes": "8",
-    "rank": 29
+    "rank": 22
+  },
+  {
+    "title": "你不知道的 console，让 JS 调试更简单",
+    "description": "对于前端的各位工程师，肯定不会对console陌生，但是，你又能了解多少呢，今天就让小鹏来一窥大前世界。Chrome控制台-开发者工具windows按F12， MAC按Command + Option + C或Command + Option + J, 即可打开控制...",
+    "url": "https://segmentfault.com/a/1190000042367660",
+    "author": "高志鹏",
+    "home_url": "https://segmentfault.com/u/gaozhipeng",
+    "votes": "9",
+    "rank": 23
   },
   {
     "title": "PHP如何提高高并发能力",
@@ -267,6 +213,60 @@
     "author": "7small7",
     "home_url": "https://segmentfault.com/u/7small7",
     "votes": "5",
+    "rank": 24
+  },
+  {
+    "title": "如何让CSS计数器支持小数的动态变化？",
+    "description": "最近在几篇文章中都用到了 CSS 计数器，可以将 CSS 变量通过伪元素content动态展示出来，还可以做出很多有趣的动画。有兴趣的可以先回顾一下之前的这几篇文章：",
+    "url": "https://segmentfault.com/a/1190000042397184",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "8",
+    "rank": 25
+  },
+  {
+    "title": "用node从零做个管理shell命令的好用工具, 正好温习下commander.js相关内容",
+    "description": "你有没有经历过忘记某个shell命令怎么拼写? 或是懒得打一长串命令的经历? 比如我的mac笔记本的tachbar偶尔会'卡死', 这时我就要输入 killall ControlStrip 命令重启tachbar, 你也看到了这个命...",
+    "url": "https://segmentfault.com/a/1190000042353870",
+    "author": "lulu_up",
+    "home_url": "https://segmentfault.com/u/lulu_up",
+    "votes": "9",
+    "rank": 26
+  },
+  {
+    "title": "js 使用reduce方法合并两个对象数组，有则替换，无则新增",
+    "description": "我们分析下A和B数组，A和B中都存在name=李四的对象，所以要替换，而B中的name=刘六A中不存在，所以要新增，话不多说，我们通过js的reduce方法来做，代码如下：",
+    "url": "https://segmentfault.com/a/1190000042329366",
+    "author": "Awbeci",
+    "home_url": "https://segmentfault.com/u/awbeci",
+    "votes": "7",
+    "rank": 27
+  },
+  {
+    "title": "Vue仿钉钉审批流程",
+    "description": "workflow钉钉审批流程设置workflow钉钉审批流程设置，基于vue开发。QQ交流群：639251756线上开源地址 https://github.com/StavinLi/Workflow github点个星吧！预览地址 https://stavinli.github.io/Workflow/dist...",
+    "url": "https://segmentfault.com/a/1190000042300972",
+    "author": "xiangzhihong",
+    "home_url": "https://segmentfault.com/u/xiangzhihong",
+    "votes": "7",
+    "rank": 28
+  },
+  {
+    "title": "怎么防止同事用 Evil.js 的代码投毒",
+    "description": "视频移步B站[链接]最近Evil.js被讨论的很多，项目介绍如下项目被发布到npm上后，引起了激烈的讨论，最终因为安全问题被npm官方移除，代码也闭源了作为一个前端老司机，我肯定是反对这种行为，泄私愤有很多种方式...",
+    "url": "https://segmentfault.com/a/1190000042360645",
+    "author": "前端小菜鸟",
+    "home_url": "https://segmentfault.com/u/qianduanxiaocainiao_5c612df9514ba",
+    "votes": "7",
+    "rank": 29
+  },
+  {
+    "title": "手写一个有点意思的电梯小程序",
+    "description": "通过本示例，你将学到什么?CSS 相关CSS定位CSS弹性盒子布局CSS动画CSS变量的用法js相关类的封装DOM的操作与事件的操作样式与类的操作延迟函数的使用示例效果废话少说，先看效果如图所示:分析小程序的构成电梯井（...",
+    "url": "https://segmentfault.com/a/1190000042298118",
+    "author": "夕水",
+    "home_url": "https://segmentfault.com/u/xishui_5ac9a340a5484",
+    "votes": "10",
     "rank": 30
   }
 ]