@wcj/github-rank 21.10.25 → 21.10.29

package/web/data/sifou-daily.json

@@ -1,47 +1,137 @@
 [
   {
-    "title": "前端代码库里的 git hooks",
-    "description": "本篇文章收获什么：git hooks 的基本知识yorkie 的原理浅析如何使用 本地 vscode 打开 github 项目故事是这样的：我：在npm run lint脚本里面加了vue-tsc --noEmit --skipLibCheck && ....这个命令后，--...",
-    "url": "https://segmentfault.com/a/1190000040855590",
-    "author": "混子的日常",
-    "home_url": "https://segmentfault.com/u/1023",
-    "votes": "2",
+    "title": "涉嫌抄袭？抖音前端技术团队发文致歉，承认借鉴Ant Design",
+    "description": "据描述，Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代企业级应用 UI 解决方案，是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案...",
+    "url": "https://segmentfault.com/a/1190000040877069",
+    "author": "snakesss",
+    "home_url": "https://segmentfault.com/u/snakesss",
+    "votes": "3",
     "rank": 1
   },
   {
-    "title": "JZ-004-重建二叉树",
-    "description": "输入某二叉树的前序遍历和中序遍历的结果，请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2,1,5,3,8,6}，则重建二叉树并...",
-    "url": "https://segmentfault.com/a/1190000040855037",
+    "title": "大道至简，繁在人心：在浏览器控制台安装npm包是什么操作？",
+    "description": "我们都知道，npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。虽然作为命令行工具的 npm 近年来逐渐式微，但是作为广泛使用的存...",
+    "url": "https://segmentfault.com/a/1190000040875211",
+    "author": "独钓寒江雪",
+    "home_url": "https://segmentfault.com/u/king_hcj",
+    "votes": "11",
+    "rank": 2
+  },
+  {
+    "title": "CSS，我可以写 if/else 语法了？",
+    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
+    "url": "https://segmentfault.com/a/1190000040847047",
+    "author": "前端小智",
+    "home_url": "https://segmentfault.com/u/minnanitkong",
+    "votes": "1",
+    "rank": 3
+  },
+  {
+    "title": "大厂面试题分享：如何让(a===1&&a===2&&a===3)的值为true?",
+    "description": "当我第一次看到这一题目的时候，我是比较震惊的，分析了下很不合我们编程的常理，并认为不大可能，变量a要在同一情况下要同时等于1，2和3这三个值，这是天方夜谭吧，不亚于哥德巴赫1+1=1的猜想吧，不过一切皆有可...",
+    "url": "https://segmentfault.com/a/1190000040880874",
+    "author": "wscats",
+    "home_url": "https://segmentfault.com/u/wscats",
+    "votes": "2",
+    "rank": 4
+  },
+  {
+    "title": "JZ-008-跳台阶",
+    "description": "跳台阶题目描述一只青蛙一次可以跳上1级台阶，也可以跳上2级。求该青蛙跳上一个n级的台阶总共有多少种跳法（先后次序不同算不同的结果）题目链接: 跳台阶代码 {代码...} 【每日寄语】 你的微笑是最有治愈力的力量...",
+    "url": "https://segmentfault.com/a/1190000040875685",
     "author": "雄狮虎豹",
     "home_url": "https://segmentfault.com/u/xiongshihubao",
     "votes": "2",
-    "rank": 2
+    "rank": 5
   },
   {
-    "title": "收藏这36个正则表达式，开发效率提高80%",
-    "description": "我们在日常的Java开发中，经常需要处理一些字符串，这个时候正则表达式是非常有用的。几乎在所有的编程语言中都支持正则表达式。以下我将压箱底多年的干货搬出来给大家参考，都是我们日常使用频次比较高的正则表...",
-    "url": "https://segmentfault.com/a/1190000040856306",
-    "author": "Tom弹架构",
-    "home_url": "https://segmentfault.com/u/gupaoedu_tom",
+    "title": "在OneOS-Lite上学习搭建CI/CD流程(GitLab篇)",
+    "description": "嵌入式软件开发领域高频使用的开发语言是C语言，在大型项目开发中，我们往往会有格式审查、编译审查的需求。如果能借助GitLab平台实现代码的格式和编译问题审查，将会极大提高合入代码的规范性，把控新代码对原有...",
+    "url": "https://segmentfault.com/a/1190000040877695",
+    "author": "蓁蓁",
+    "home_url": "https://segmentfault.com/u/oneos",
+    "votes": "1",
+    "rank": 6
+  },
+  {
+    "title": "Netpoll导读",
+    "description": "要了解一个像Netty这样项目的源码是一件非常困难的事情。项目本身源码量大，涉及的底层知识多，加上利用了各种设计模式，都会对源码阅读增加难度。对于这样的工程最好是根据作者提供的导图先了解个大概，然后充分...",
+    "url": "https://segmentfault.com/a/1190000040879522",
+    "author": "byeane",
+    "home_url": "https://segmentfault.com/u/byeane",
     "votes": "2",
-    "rank": 3
+    "rank": 7
   },
   {
-    "title": "webpack 流程解析 (5) module reslove",
-    "description": "上文说道我们拿到了构建modlule的factory，和依赖等关键数据，通过addModuleTree经过factorizeQueue的控制走到了factory.create。这个时候就开始了reslove过程。本文主要分析，NormalModuleFactory 内部 beforeRe...",
-    "url": "https://segmentfault.com/a/1190000040856062",
-    "author": "csywweb",
-    "home_url": "https://segmentfault.com/u/csywweb",
+    "title": "为什么要分库分表？",
+    "description": "前言在高并发系统当中，分库分表是必不可少的技术手段之一，同时也是 BAT 等大厂面试时，经常考的热门考题。你知道我们为什么要做分库分表吗？这个问题要从两条线说起：垂直方向 和 水平方向。1 垂直方向垂直方向...",
+    "url": "https://segmentfault.com/a/1190000040878163",
+    "author": "妍妍",
+    "home_url": "https://segmentfault.com/u/_6175053e57aec",
     "votes": "1",
-    "rank": 4
+    "rank": 8
   },
   {
-    "title": "【一文秒懂】电商系统商品模块初建分析与设计",
-    "description": "创建《一文秒懂》这个专栏与以往《Grace development》和我博客的个人分享文章不同，我对《一文秒懂》这个专栏的定位是一个有态度，高标准的技术专栏，而《Grace development》我依旧会讲一些我们日常中会碰到的...",
-    "url": "https://segmentfault.com/a/1190000040855949",
-    "author": "CrazyCodes",
-    "home_url": "https://segmentfault.com/u/crazycodes",
+    "title": "JavaScript栈思想的应用：实现智能重复函数",
+    "description": "需求：实现一个“智能重复”函数，实现下面字符串的转换 {代码...} 思路及原理原理：使用“栈”思想来实现，在JavaScript中实现“栈”的最好数据结构是数组思路：1、定义两个栈（数组），栈1（stack1）、栈2（stack2）...",
+    "url": "https://segmentfault.com/a/1190000040877623",
+    "author": "heath_learning",
+    "home_url": "https://segmentfault.com/u/heath_learning",
     "votes": "1",
-    "rank": 5
+    "rank": 9
+  },
+  {
+    "title": "CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框",
+    "description": "本文将通过一个实际的业务需求，讲解如何实现极端场景下文字加粗加边框效果文字多重边框的效果需求背景 - 文字的二次加粗今天遇到这样一个有意思的问题：在文字展示的时候，利用了 font-weight: bold 给文字进行...",
+    "url": "https://segmentfault.com/a/1190000040876086",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "1",
+    "rank": 10
+  },
+  {
+    "title": "纯净搭建简历工具",
+    "description": "通常来说，我们更希望自己的简历显示出自己的个性，除了使用文档编辑，网上有很多现成的模板，同时也提供了相对自由的编辑环境，但是往往到了最后一步导出的时候，会提示扫码、会员、付费等绑定操作，看着自己的...",
+    "url": "https://segmentfault.com/a/1190000040876018",
+    "author": "stonehank",
+    "home_url": "https://segmentfault.com/u/stonehank",
+    "votes": "2",
+    "rank": 11
+  },
+  {
+    "title": "TransX 一个小巧玲珑的 vue 组件切换动画库",
+    "description": "TNTWeb - 全称腾讯新闻前端团队，组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。目前团队主要支持腾讯新闻各业务的前端开发，业务开发之余也积累沉淀了一些前端基础设施，赋能...",
+    "url": "https://segmentfault.com/a/1190000040879529",
+    "author": "TNTWEB",
+    "home_url": "https://segmentfault.com/u/tnfe",
+    "votes": "1",
+    "rank": 12
+  },
+  {
+    "title": "前端必会的nginx（配置可视化）",
+    "description": "1.介绍Nginx（发音同“engine X”）是异步框架的web服务器，也可以用作反向代理、负载平衡器和HTTP缓存。特点：和node类似，Nginx使用异步事件驱动的方法来处理请求，适合处理io密集型场景前端为什么要学：测试环境...",
+    "url": "https://segmentfault.com/a/1190000040879096",
+    "author": "Runningfyy",
+    "home_url": "https://segmentfault.com/u/yangkaiqiang",
+    "votes": "2",
+    "rank": 13
+  },
+  {
+    "title": "北京|上市教育职业集团年薪40-60万诚聘前端讲师",
+    "description": "依靠 \"口碑\" 招生 （70% 的学员来自老学员推荐）；发展前景有兴趣做成就他人而快乐自己的老师吗？我们是国内第一家上市的成人职业教育集团，平台大，发展广，职业教育老师没有35岁焦虑。讲师是起步，后续可以做课...",
+    "url": "https://segmentfault.com/a/1190000040875342",
+    "author": "张鹏",
+    "home_url": "https://segmentfault.com/u/zhangpeng_6179f90d51ae3",
+    "votes": "1",
+    "rank": 14
+  },
+  {
+    "title": "听说你的对象有个”环“？怎么发现的呢？",
+    "description": "1. 手写62+方法学习JavaScript底层原理判断一个对象是否存在循环引用已收录至 手写各种源码实现，也可以直接点击isCyclic快速查看，目前已有62+手写实现，欢迎一起来学习喔。2. 不得不说的循环引用如下图: 相信曾...",
+    "url": "https://segmentfault.com/a/1190000040875138",
+    "author": "前端胖头鱼",
+    "home_url": "https://segmentfault.com/u/116263",
+    "votes": "1",
+    "rank": 15
   }
 ]

package/web/data/sifou-monthly.json

@@ -5,25 +5,25 @@
     "url": "https://segmentfault.com/a/1190000040777100",
     "author": "前端胖头鱼",
     "home_url": "https://segmentfault.com/u/116263",
-    "votes": "51",
+    "votes": "57",
     "rank": 1
   },
-  {
-    "title": "前端监控 SDK 的一些技术要点原理分析",
-    "description": "一个完整的前端监控平台包括三个部分：数据采集与上报、数据整理和存储、数据展示。本文要讲的就是其中的第一个环节——数据采集与上报。下图是本文要讲述内容的大纲，大家可以先大致了解一下：仅看理论知识是比较...",
-    "url": "https://segmentfault.com/a/1190000040796868",
-    "author": "谭光志",
-    "home_url": "https://segmentfault.com/u/woai3c",
-    "votes": "35",
-    "rank": 2
-  },
   {
     "title": "近 20 人爆肝数周，写给初中级前端的万字高级进阶指南",
     "description": "当然笔者目前已经突破了这个瓶颈，也成为了知名公司基础架构组的成员。因此想通过自己成长的经历及积累的资料整理出一系列的学习路线及资料推荐，帮助各位读者朋友解决这个问题。",
     "url": "https://segmentfault.com/a/1190000040797816",
     "author": "y_ck",
     "home_url": "https://segmentfault.com/u/user_ngjv5fmp",
-    "votes": "41",
+    "votes": "46",
+    "rank": 2
+  },
+  {
+    "title": "前端监控 SDK 的一些技术要点原理分析",
+    "description": "一个完整的前端监控平台包括三个部分：数据采集与上报、数据整理和存储、数据展示。本文要讲的就是其中的第一个环节——数据采集与上报。下图是本文要讲述内容的大纲，大家可以先大致了解一下：仅看理论知识是比较...",
+    "url": "https://segmentfault.com/a/1190000040796868",
+    "author": "谭光志",
+    "home_url": "https://segmentfault.com/u/woai3c",
+    "votes": "36",
     "rank": 3
   },
   {
@@ -32,7 +32,7 @@
     "url": "https://segmentfault.com/a/1190000040747951",
     "author": "前端胖头鱼",
     "home_url": "https://segmentfault.com/u/116263",
-    "votes": "40",
+    "votes": "42",
     "rank": 4
   },
   {
@@ -41,26 +41,17 @@
     "url": "https://segmentfault.com/a/1190000040692431",
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "41",
+    "votes": "42",
     "rank": 5
   },
-  {
-    "title": "CSS 奇技淫巧 | 妙用混合模式实现文字镂空波浪效果",
-    "description": "本文将介绍一个小技巧，通过混合模式 mix-blend-mode 巧妙的实现文字的镂空波浪效果。起因一日，一群友私聊问我。如何使用 CSS 实现下述效果，一个文字的波浪效果：我当时想都没想，就回答道，这个很简单啊。熟练...",
-    "url": "https://segmentfault.com/a/1190000040741939",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "27",
-    "rank": 6
-  },
   {
     "title": "📝 没 2 年 React Native 开发经验，你都遇不到这些坑",
     "description": "React Native 开发时，如果只是写些简单的页面，基本上按着官方文档 reactnative.dev就能写出来，但是 React Native 的 API 有几百个，没有一定的开发踩坑经验，面对一些新的需求时确实会抓不到重点。",
     "url": "https://segmentfault.com/a/1190000040748929",
     "author": "卤代烃",
     "home_url": "https://segmentfault.com/u/skychx",
-    "votes": "27",
-    "rank": 7
+    "votes": "28",
+    "rank": 6
   },
   {
     "title": "50天用react.js重写50个web项目，我学到了什么？",
@@ -68,17 +59,35 @@
     "url": "https://segmentfault.com/a/1190000040813435",
     "author": "夕水",
     "home_url": "https://segmentfault.com/u/xishui_5ac9a340a5484",
-    "votes": "28",
+    "votes": "29",
+    "rank": 7
+  },
+  {
+    "title": "就因为这三个知识点，我彻底学废了”正则表达式“",
+    "description": "曾经我一度对正则表达式有种恐惧和厌恶感，为啥？因为总感觉这玩意很难，很枯燥，看到别人写出贼牛逼的正则，我想啥时候我能像他们一样优秀。直到我看到了这三个知识点。。。",
+    "url": "https://segmentfault.com/a/1190000040846926",
+    "author": "前端胖头鱼",
+    "home_url": "https://segmentfault.com/u/116263",
+    "votes": "26",
     "rank": 8
   },
+  {
+    "title": "前端如何防止用户修改水印？",
+    "description": "这篇文章聊到的「前端水印防篡改」方法，本来是想作为一份专利提交给公司的，但我下笔之前去国内的专利检索网站上搜了下，发现一模一样的方案已经被申请了，是一位字节跳动的哥们在今年年初递交的。",
+    "url": "https://segmentfault.com/a/1190000040840891",
+    "author": "劉凯里",
+    "home_url": "https://segmentfault.com/u/kyrieliu",
+    "votes": "21",
+    "rank": 9
+  },
   {
     "title": "写个vscode插件, 帮助阅读i18n项目的代码",
     "description": "作者当前参与的项目是面向全球用户的, 项目免不了要做国际化处理, 哪怕只是一个简单的ok按钮的ok文案都要翻译成不同国家的语言展示, 所以在代码里面往往我们不可以直接命名为ok, 而是可能命名为user_base_pl...",
     "url": "https://segmentfault.com/a/1190000040773678",
     "author": "lulu_up",
     "home_url": "https://segmentfault.com/u/lulu_up",
-    "votes": "25",
-    "rank": 9
+    "votes": "27",
+    "rank": 10
   },
   {
     "title": "CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果",
@@ -87,15 +96,6 @@
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
     "votes": "26",
-    "rank": 10
-  },
-  {
-    "title": "2021 VSCode前端插件推荐",
-    "description": "2021 VSCode前端插件推荐前言推荐一波前端开发必备插件，绝对可以提高你的生产力，剩下来的时间来 mo鱼，岂不美哉开发综合推荐别名路径跳转插件名： 别名路径跳转使用说明: 别名路径跳转插件，支持任何项目，使用...",
-    "url": "https://segmentfault.com/a/1190000040766151",
-    "author": "风不识途",
-    "home_url": "https://segmentfault.com/u/tudou_5e2d76940fbaa",
-    "votes": "24",
     "rank": 11
   },
   {
@@ -104,25 +104,25 @@
     "url": "https://segmentfault.com/a/1190000040824694",
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "23",
+    "votes": "24",
     "rank": 12
   },
+  {
+    "title": "2021 VSCode前端插件推荐",
+    "description": "2021 VSCode前端插件推荐前言推荐一波前端开发必备插件，绝对可以提高你的生产力，剩下来的时间来 mo鱼，岂不美哉开发综合推荐别名路径跳转插件名： 别名路径跳转使用说明: 别名路径跳转插件，支持任何项目，使用...",
+    "url": "https://segmentfault.com/a/1190000040766151",
+    "author": "风不识途",
+    "home_url": "https://segmentfault.com/u/tudou_5e2d76940fbaa",
+    "votes": "24",
+    "rank": 13
+  },
   {
     "title": "【中高级前端】必备，30+高频手写题及详细答案(万字长文)，看“你”怎么难倒我",
     "description": "写个快排吧、能手写一个Promise吗？、来一个深拷贝...相信大家已经不止一次在面试或者日常业务中遇到这样的题目了，每当现场写代码时感觉似曾相识，但就是写不出来，期望的offer也离我们远去o(╥﹏╥)o。来，兄弟们...",
     "url": "https://segmentfault.com/a/1190000040803264",
     "author": "前端胖头鱼",
     "home_url": "https://segmentfault.com/u/116263",
-    "votes": "21",
-    "rank": 13
-  },
-  {
-    "title": "尝试对 jsjiami 加密结果手工解密",
-    "description": "看了下 jsjiami，简单的一个 console.log(\"James\")，加密出来的结果居然有 3K，说明这个加密转了不知道多少弯在里面。如果要把真正一段业务代码拿来手工解密，应该会挺累的，但是本文不研究工作量的问题，只是尝...",
-    "url": "https://segmentfault.com/a/1190000040735240",
-    "author": "边城",
-    "home_url": "https://segmentfault.com/u/jamesfancy",
-    "votes": "15",
+    "votes": "22",
     "rank": 14
   },
   {
@@ -131,25 +131,25 @@
     "url": "https://segmentfault.com/a/1190000040803238",
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "14",
+    "votes": "18",
     "rank": 15
   },
-  {
-    "title": "CSS 小技巧 | 一行代码实现头像与国旗的融合",
-    "description": "到国庆了，大家都急着给祖国母亲庆生。每年每到此时，微信朋友圈就会流行起给头像装饰上国旗，而今年又流行这款：emm，很不错。那么，将一张国旗图片与我们的头像，快速得到想要的头像，使用 CSS 如何简单实现呢...",
-    "url": "https://segmentfault.com/a/1190000040764476",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "19",
-    "rank": 16
-  },
   {
     "title": "7分钟学会写一个浏览器插件——突破某SDN未登录禁止复制的限制",
     "description": "严格意义上说，本篇文章要讨论的应该是 “Chrome 扩展(Extension)”而不是“Chrome 插件（Plugins）”，大家不妨先思考一个问题：“浏览器插件”和“浏览器扩展”之间有什么区别？如果您对此感到厌烦，不妨直接跳过此小节...",
     "url": "https://segmentfault.com/a/1190000040824814",
     "author": "独钓寒江雪",
     "home_url": "https://segmentfault.com/u/king_hcj",
-    "votes": "19",
+    "votes": "21",
+    "rank": 16
+  },
+  {
+    "title": "前端如何实现token的无感刷新",
+    "description": "通常，对于一些需要记录用户行为的系统，在进行网络请求的时候都会要求传递一下登录的token。不过，为了接口数据的安全，服务器的token一般不会设置太长，根据需要一般是1-7天的样子，token过期后就需要重新登录...",
+    "url": "https://segmentfault.com/a/1190000040850857",
+    "author": "xiangzhihong",
+    "home_url": "https://segmentfault.com/u/xiangzhihong",
+    "votes": "24",
     "rank": 17
   },
   {
@@ -158,27 +158,18 @@
     "url": "https://segmentfault.com/a/1190000040823877",
     "author": "程序员大彬",
     "home_url": "https://segmentfault.com/u/5n7qfpo1",
-    "votes": "17",
+    "votes": "19",
     "rank": 18
   },
   {
-    "title": "前端如何防止用户修改水印？",
-    "description": "这篇文章聊到的「前端水印防篡改」方法，本来是想作为一份专利提交给公司的，但我下笔之前去国内的专利检索网站上搜了下，发现一模一样的方案已经被申请了，是一位字节跳动的哥们在今年年初递交的。",
-    "url": "https://segmentfault.com/a/1190000040840891",
-    "author": "劉凯里",
-    "home_url": "https://segmentfault.com/u/kyrieliu",
-    "votes": "12",
+    "title": "CSS 小技巧 | 一行代码实现头像与国旗的融合",
+    "description": "到国庆了，大家都急着给祖国母亲庆生。每年每到此时，微信朋友圈就会流行起给头像装饰上国旗，而今年又流行这款：emm，很不错。那么，将一张国旗图片与我们的头像，快速得到想要的头像，使用 CSS 如何简单实现呢...",
+    "url": "https://segmentfault.com/a/1190000040764476",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "20",
     "rank": 19
   },
-  {
-    "title": "用Java轻松完成一个分布式事务TCC，保姆级教程",
-    "description": "什么是TCC，TCC是Try、Confirm、Cancel三个词语的缩写，最早是由 Pat Helland 于 2007 年发表的一篇名为《Life beyond Distributed Transactions:an Apostate’s Opinion》的论文提出。",
-    "url": "https://segmentfault.com/a/1190000040735898",
-    "author": "叶东富",
-    "home_url": "https://segmentfault.com/u/yedongfu",
-    "votes": "15",
-    "rank": 20
-  },
   {
     "title": "postTask：React的杀手锏被浏览器原生实现了？",
     "description": "大家好，我卡颂。React这几年一直在完善的并发模式主要由以下两部分组成：基于fiber实现的可中断更新的架构基于调度器的优先级调度可以说，从16年开始重构fiber架构到今年底（或明年初）React18发布正式版，这期...",
@@ -186,6 +177,15 @@
     "author": "卡颂",
     "home_url": "https://segmentfault.com/u/kasong",
     "votes": "13",
+    "rank": 20
+  },
+  {
+    "title": "前端应该知道的：开放图谱协议（The Open Graph protocol）",
+    "description": "Open Graph 是一种互联网协议，最初由 Facebook 创建，用于标准化网页中元数据的使用，使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容。",
+    "url": "https://segmentfault.com/a/1190000040863000",
+    "author": "独钓寒江雪",
+    "home_url": "https://segmentfault.com/u/king_hcj",
+    "votes": "18",
     "rank": 21
   },
   {
@@ -197,23 +197,32 @@
     "votes": "13",
     "rank": 22
   },
+  {
+    "title": "计算机网络经典20问！",
+    "description": "本文目录：网络分层结构三次握手两次握手可以吗？四次挥手第四次挥手为什么要等待2MSL？为什么是四次挥手？TCP有哪些特点？TCP和UDP的区别？HTTP协议的特点？HTTP报文格式HTTP状态码有哪些？HTTP1.0和HTTP1.1的区...",
+    "url": "https://segmentfault.com/a/1190000040770169",
+    "author": "程序员大彬",
+    "home_url": "https://segmentfault.com/u/5n7qfpo1",
+    "votes": "13",
+    "rank": 23
+  },
   {
     "title": "前端实现很哇塞的浏览器端扫码功能🌟",
     "description": "本文主要介绍，通过使用基于 vue 技术栈的前端开发技术，在浏览器端调起摄像头 📷，并进行扫码识别功能，对识别到的二维码进行跳转或其他操作处理。本文内容分为背景介绍、实现效果、技术简介、代码实现、总结等部...",
     "url": "https://segmentfault.com/a/1190000040809122",
     "author": "dragonir",
     "home_url": "https://segmentfault.com/u/dragonir",
-    "votes": "19",
-    "rank": 23
+    "votes": "20",
+    "rank": 24
   },
   {
-    "title": "就因为这三个知识点，我彻底学废了”正则表达式“",
-    "description": "曾经我一度对正则表达式有种恐惧和厌恶感，为啥？因为总感觉这玩意很难，很枯燥，看到别人写出贼牛逼的正则，我想啥时候我能像他们一样优秀。直到我看到了这三个知识点。。。",
-    "url": "https://segmentfault.com/a/1190000040846926",
-    "author": "前端胖头鱼",
-    "home_url": "https://segmentfault.com/u/116263",
-    "votes": "16",
-    "rank": 24
+    "title": "正则表达式汇总",
+    "description": "整理一部分比较常用的正则表达式、后续会持续更新1、手机号码的校验 {代码...} 2、身份证的校验 {代码...} 3、邮箱的校验 {代码...} 4、URL的校验 {代码...} 5、IPv4的校验 {代码...} 6、16进制颜色的校验 {代码....",
+    "url": "https://segmentfault.com/a/1190000040828004",
+    "author": "小蘑菇",
+    "home_url": "https://segmentfault.com/u/xiaomogu_5f2124ad3ad42",
+    "votes": "17",
+    "rank": 25
   },
   {
     "title": "有个开发者总结这 15 优雅的 JavaScript 个技巧",
@@ -222,15 +231,6 @@
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
     "votes": "14",
-    "rank": 25
-  },
-  {
-    "title": "计算机网络经典20问！",
-    "description": "本文目录：网络分层结构三次握手两次握手可以吗？四次挥手第四次挥手为什么要等待2MSL？为什么是四次挥手？TCP有哪些特点？TCP和UDP的区别？HTTP协议的特点？HTTP报文格式HTTP状态码有哪些？HTTP1.0和HTTP1.1的区...",
-    "url": "https://segmentfault.com/a/1190000040770169",
-    "author": "程序员大彬",
-    "home_url": "https://segmentfault.com/u/5n7qfpo1",
-    "votes": "12",
     "rank": 26
   },
   {
@@ -239,34 +239,34 @@
     "url": "https://segmentfault.com/a/1190000040797373",
     "author": "wscats",
     "home_url": "https://segmentfault.com/u/wscats",
-    "votes": "11",
+    "votes": "13",
     "rank": 27
   },
   {
-    "title": "前端代码评审通常注意些什么",
-    "description": "代码评审又称为（Code Review，简称CR），关于CR，开发同学其实都不陌生，现在大部分公司的项目开发流程中，它都是必不可少的一个环节，CR的好处也都耳熟能详。不同的公司对于CR的方式、质量要求标准都不一样。这...",
-    "url": "https://segmentfault.com/a/1190000040780312",
-    "author": "_Vin",
-    "home_url": "https://segmentfault.com/u/_vin_5d884143cd4cb",
-    "votes": "9",
+    "title": "利用 CSS Overview 面板重构优化你的网站",
+    "description": "本文将向大家介绍 Chrome 87 开始支持的 CSS Overview Panel，并且介绍如何更好地利用这个面板。通过 CSS Overview Panel，可能可以帮助我们：",
+    "url": "https://segmentfault.com/a/1190000040837145",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "13",
     "rank": 28
   },
-  {
-    "title": "正则表达式汇总",
-    "description": "整理一部分比较常用的正则表达式、后续会持续更新1、手机号码的校验 {代码...} 2、身份证的校验 {代码...} 3、邮箱的校验 {代码...} 4、URL的校验 {代码...} 5、IPv4的校验 {代码...} 6、16进制颜色的校验 {代码....",
-    "url": "https://segmentfault.com/a/1190000040828004",
-    "author": "小蘑菇",
-    "home_url": "https://segmentfault.com/u/xiaomogu_5f2124ad3ad42",
-    "votes": "14",
-    "rank": 29
-  },
   {
     "title": "今天推荐，今年排名前 15 的 Vue 后台管理模板",
     "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
     "url": "https://segmentfault.com/a/1190000040814521",
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "11",
+    "votes": "13",
+    "rank": 29
+  },
+  {
+    "title": "前端代码评审通常注意些什么",
+    "description": "代码评审又称为（Code Review，简称CR），关于CR，开发同学其实都不陌生，现在大部分公司的项目开发流程中，它都是必不可少的一个环节，CR的好处也都耳熟能详。不同的公司对于CR的方式、质量要求标准都不一样。这...",
+    "url": "https://segmentfault.com/a/1190000040780312",
+    "author": "_Vin",
+    "home_url": "https://segmentfault.com/u/_vin_5d884143cd4cb",
+    "votes": "9",
     "rank": 30
   }
 ]