@wcj/github-rank 21.11.7 → 21.11.11

package/dist/sifou-daily.json

@@ -1,47 +1,173 @@
 [
   {
-    "title": "LeetCode-079-单词搜索",
-    "description": "题目描述：给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中，返回 true ；否则，返回 false 。单词必须按照字母顺序，通过相邻的单元格内的字母构成，其中“相邻”单元格是那些...",
-    "url": "https://segmentfault.com/a/1190000040919762",
-    "author": "雄狮虎豹",
-    "home_url": "https://segmentfault.com/u/xiongshihubao",
-    "votes": "2",
+    "title": "前端Node.js面试题",
+    "description": "Node.js 是一个开源与跨平台的 JavaScript 运行时环境。在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核），利用事件驱动、非阻塞和异步输入输出模型等技术提高性能。我们可以理解为：Node.js 就是一个...",
+    "url": "https://segmentfault.com/a/1190000040937008",
+    "author": "xiangzhihong",
+    "home_url": "https://segmentfault.com/u/xiangzhihong",
+    "votes": "9",
     "rank": 1
   },
   {
-    "title": "Angular 组件生命周期",
-    "description": "可以通过实现一个或多个 Angular core 库中定义的生命周期钩子接口来响应组件或指令生命周期中的事件。这些钩子让你有机会在适当的时候对组件或指令实例进行操作。比如，OnInit 接口的钩子方法叫做 ngOnInit()。...",
-    "url": "https://segmentfault.com/a/1190000040920590",
-    "author": "李国稳",
-    "home_url": "https://segmentfault.com/u/meng_60ba0d4174d72",
-    "votes": "1",
+    "title": "3D 穿梭效果？使用 CSS 轻松搞定",
+    "description": "背景周末在家习惯性登陆 Apex，准备玩几盘。在登陆加速器的过程中，发现加速器到期了。我一直用的腾讯网游加速器，然而点击充值按钮，提示最近客户端升级改造，暂不支持充值（这个操作把我震惊了~）。只能转头下...",
+    "url": "https://segmentfault.com/a/1190000040936266",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "8",
     "rank": 2
   },
   {
-    "title": "angular 依赖注入",
-    "description": "前言问题起因是因为在GriderService中忘记给根模块提供注入。即没有写 {代码...} 手动注入当时想着，能不能单纯在组件中使用provide GriderService使这个组件正常用service提供的服务.就像下面这样： {代码...} ...",
-    "url": "https://segmentfault.com/a/1190000040920582",
-    "author": "weiewiyi",
-    "home_url": "https://segmentfault.com/u/chenchu_6110ed583800c",
+    "title": "炸裂，用JS创建一个录屏功能",
+    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
+    "url": "https://segmentfault.com/a/1190000040913284",
+    "author": "前端小智",
+    "home_url": "https://segmentfault.com/u/minnanitkong",
     "votes": "1",
     "rank": 3
   },
   {
-    "title": "Spread Operator  和 路由踩坑",
-    "description": "此时如果nameFormControl.value为'name'，那么在控制台打印的结果就是:将一个‘name’字符串直接变成一个数组对象？",
-    "url": "https://segmentfault.com/a/1190000040920014",
-    "author": "郝泽龙_HZ",
-    "home_url": "https://segmentfault.com/u/haozelong_hz",
-    "votes": "1",
+    "title": "详解 Android 12L｜更好地适配大屏幕设备",
+    "description": "目前，超过 2.5 亿台大屏幕设备搭载了 Android 系统，其中包括平板电脑、可折叠设备和 ChromeOS 设备。仅在过去的 12 个月里，就有近 1 亿台新的 Android 平板电脑被激活，同比增长 20%；而 ChromeOS 的增长率为 ...",
+    "url": "https://segmentfault.com/a/1190000040936947",
+    "author": "Android开发者",
+    "home_url": "https://segmentfault.com/u/androiddevs",
+    "votes": "2",
     "rank": 4
   },
   {
-    "title": "数据结构之堆：初学只需一文",
-    "description": "目录：1、定义2、特性3、名词4、实操正文：一、定义： {代码...} 以上对定义以及大致逻辑解析完成，接下来我们完全根据这个逻辑解析做实操代码，请耐心往下看二、特性： {代码...} 三、名词：最大堆/大根堆/大顶...",
-    "url": "https://segmentfault.com/a/1190000040921037",
-    "author": "稳之楠",
-    "home_url": "https://segmentfault.com/u/king_wenzhinan",
+    "title": "地表最强IDE ——Visual Studio 2022正式发布",
+    "description": "堪称宇宙第一IDE工具集的Visual Studio，在经过不断更新优化之后，新版本就要与大家见面了。本次新版本发布，有许多令人期待的新功能和特性升级，快来一睹为快！",
+    "url": "https://segmentfault.com/a/1190000040936857",
+    "author": "葡萄城技术团队",
+    "home_url": "https://segmentfault.com/u/grapecity",
     "votes": "2",
     "rank": 5
+  },
+  {
+    "title": "尤雨溪推荐神器 ni ，能替代 npm/yarn/pnpm ？简单好用！源码揭秘！",
+    "description": "想学源码，极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this、create-vue等十余...",
+    "url": "https://segmentfault.com/a/1190000040937835",
+    "author": "若川",
+    "home_url": "https://segmentfault.com/u/lxchuan12",
+    "votes": "1",
+    "rank": 6
+  },
+  {
+    "title": "LeetCode-097-交错字符串",
+    "description": "题目描述：给定三个字符串 s1、s2、s3，请你帮忙验证 s3 是否是由 s1 和 s2 交错 组成的。示例说明请见LeetCode官网。来源：力扣（LeetCode）链接：[链接]著作权归领扣网络所有。商业转载请联系官方授权，非商业...",
+    "url": "https://segmentfault.com/a/1190000040937401",
+    "author": "雄狮虎豹",
+    "home_url": "https://segmentfault.com/u/xiongshihubao",
+    "votes": "2",
+    "rank": 7
+  },
+  {
+    "title": "【SVG】为了前端页面的美丽，我选择学习SVG",
+    "description": "SVG在之前自学的过程中，其实一直都是很高深的样子不敢触碰，但是想要理解终究都会走到这一步的。再怎么看起来难的技术都是由简单的知识点累计起来的。",
+    "url": "https://segmentfault.com/a/1190000040941094",
+    "author": "归子莫",
+    "home_url": "https://segmentfault.com/u/guizimo",
+    "votes": "1",
+    "rank": 8
+  },
+  {
+    "title": "不知道如何入门Kotlin？《Kotlin 入门教程指南》带你从入门，带你飞！",
+    "description": "Google 宣布将 Kotlin 作为 Android 开发的官方编程语言后，Kotlin 开发者社区一直在快速增长。对于Android 应用开发者来说，仅仅掌握 Java 语言是不够的， 还应该学习 Kotlin 语言，才能追上技术发展趋势，在工...",
+    "url": "https://segmentfault.com/a/1190000040940663",
+    "author": "Android_安子",
+    "home_url": "https://segmentfault.com/u/xiaoxiao_61667c8d22ad1",
+    "votes": "1",
+    "rank": 9
+  },
+  {
+    "title": "K8S 部署 SpringBoot 项目(一篇够用)",
+    "description": "现在比较多的互联网公司都在尝试将微服务迁到云上，这样的能够通过一些成熟的云容器管理平台更为方便地管理微服务集群，从而提高微服务的稳定性，同时也能较好地提升团队开发效率。",
+    "url": "https://segmentfault.com/a/1190000040940475",
+    "author": "Java白叔",
+    "home_url": "https://segmentfault.com/u/gupao_anan",
+    "votes": "1",
+    "rank": 10
+  },
+  {
+    "title": "前端Node.js面试题",
+    "description": "一、Node基础概念1.1 Node是什么Node.js 是一个开源与跨平台的 JavaScript 运行时环境。在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核），利用事件驱动、非阻塞和异步输入输出模型等技术提高性能。我...",
+    "url": "https://segmentfault.com/a/1190000040938251",
+    "author": "CRMEB",
+    "home_url": "https://segmentfault.com/u/crmeb",
+    "votes": "1",
+    "rank": 11
+  },
+  {
+    "title": "Databend 社区积极拥抱 Rust 生态(202111回顾）",
+    "description": "Databend 旨在成为一个 开源、弹性、可靠 的无服务器数仓，查询快如闪电，与 弹性、简单、低成本 的云服务有机结合。数据云的构建，从未如此简单！",
+    "url": "https://segmentfault.com/a/1190000040938175",
+    "author": "databend",
+    "home_url": "https://segmentfault.com/u/databend",
+    "votes": "1",
+    "rank": 12
+  },
+  {
+    "title": "typescript笔记以及常用问题",
+    "description": "创建index.ts, 然后再同级的index.html中引入index.js我们写完ts后输入tsc ./js/index.ts 自动帮你同级生产index.js对比如下",
+    "url": "https://segmentfault.com/a/1190000040937415",
+    "author": "赵不悔",
+    "home_url": "https://segmentfault.com/u/zhaobuhui",
+    "votes": "1",
+    "rank": 13
+  },
+  {
+    "title": "小程序",
+    "description": "1. 支持npm[链接]初始化:npm init安装依赖项：npm install安装完成后需要重新构建一次：小程序IDE --> 构建 npm2. promise 化[链接]app.js内调用一次 {代码...} 3. 支持 async await[链接]小程序编辑器内选中...",
+    "url": "https://segmentfault.com/a/1190000040936876",
+    "author": "当幸福来敲门",
+    "home_url": "https://segmentfault.com/u/dangxingfulaiqiaomen_58f8d82465663",
+    "votes": "1",
+    "rank": 14
+  },
+  {
+    "title": "你以为我在玩游戏？其实我在学 Java",
+    "description": "大家好，我是程序员cxuan！今天和大家一起Look一下这个有趣的国外编程网站！\"今天我们来学习 Java \" 。\"Java 是一门面向对象的编程语言\" 。\"Java 的特性有 balabalabala ......\"。\"Java 与 C 的区别是 xxxxxx\"。\"...",
+    "url": "https://segmentfault.com/a/1190000040936674",
+    "author": "程序员cxuan",
+    "home_url": "https://segmentfault.com/u/cxuan",
+    "votes": "2",
+    "rank": 15
+  },
+  {
+    "title": "淘宝 NPM 镜像站切换新域名啦",
+    "description": "简介：用CNPM/淘宝源的开发者们请注意，淘宝NPM 镜像站喊你切换新域名啦。新的Web 站点：[链接]，Registry Endpoint：[链接]。随着新的域名已经正式启用，老 [链接] 和 [链接] 域名将于 2022 年 05 月 31 日零时...",
+    "url": "https://segmentfault.com/a/1190000040936469",
+    "author": "阿里云开发者",
+    "home_url": "https://segmentfault.com/u/alijishu",
+    "votes": "2",
+    "rank": 16
+  },
+  {
+    "title": "简单、好懂的Svelte实现原理",
+    "description": "大家好，我卡颂。Svelte问世很久了，一直想写一篇好懂的原理分析文章，拖了这么久终于写了。本文会围绕一张流程图和两个Demo讲解，正确的食用方式是用电脑打开本文，跟着流程图、Demo一边看、一边敲、一边学。让...",
+    "url": "https://segmentfault.com/a/1190000040936318",
+    "author": "卡颂",
+    "home_url": "https://segmentfault.com/u/kasong",
+    "votes": "2",
+    "rank": 17
+  },
+  {
+    "title": "React Native填坑之旅--GraphQL",
+    "description": "GraphQL还是通过Http的GET和POST的方式返回数据，只是GET的长度限制导致可能的查询会出问题。所以一般都可以用POST来获取、修改数据。这就是说GraphQL在客户端App来说可以和平时请求API的方式完全一样。在基本使...",
+    "url": "https://segmentfault.com/a/1190000040936289",
+    "author": "小红星闪啊闪",
+    "home_url": "https://segmentfault.com/u/dynamic_cell",
+    "votes": "1",
+    "rank": 18
+  },
+  {
+    "title": "最受 IT 公司欢迎的 30 款开源软件",
+    "description": "所谓开源，就是把软件的源代码开放出来，大家都能看到源代码，大家可以一起研究源代码并对软件的进行优化和改进。越来越多的IT公司对开源持开放态度，一方面有了优秀的开源项目，就不用再重复造轮子，可以直接拿...",
+    "url": "https://segmentfault.com/a/1190000040935845",
+    "author": "code小生",
+    "home_url": "https://segmentfault.com/u/codexiaosheng",
+    "votes": "1",
+    "rank": 19
   }
 ]

package/dist/sifou-monthly.json

@@ -5,35 +5,26 @@
     "url": "https://segmentfault.com/a/1190000040797816",
     "author": "y_ck",
     "home_url": "https://segmentfault.com/u/user_ngjv5fmp",
-    "votes": "48",
+    "votes": "50",
     "rank": 1
   },
-  {
-    "title": "前端监控 SDK 的一些技术要点原理分析",
-    "description": "一个完整的前端监控平台包括三个部分：数据采集与上报、数据整理和存储、数据展示。本文要讲的就是其中的第一个环节——数据采集与上报。下图是本文要讲述内容的大纲，大家可以先大致了解一下：仅看理论知识是比较...",
-    "url": "https://segmentfault.com/a/1190000040796868",
-    "author": "谭光志",
-    "home_url": "https://segmentfault.com/u/woai3c",
-    "votes": "37",
-    "rank": 2
-  },
   {
     "title": "就因为这三个知识点，我彻底学废了”正则表达式“",
     "description": "曾经我一度对正则表达式有种恐惧和厌恶感，为啥？因为总感觉这玩意很难，很枯燥，看到别人写出贼牛逼的正则，我想啥时候我能像他们一样优秀。直到我看到了这三个知识点。。。",
     "url": "https://segmentfault.com/a/1190000040846926",
     "author": "前端胖头鱼",
     "home_url": "https://segmentfault.com/u/116263",
-    "votes": "34",
-    "rank": 3
+    "votes": "36",
+    "rank": 2
   },
   {
-    "title": "50天用react.js重写50个web项目，我学到了什么？",
-    "description": "1.Expanding Cards效果如图所示:源码在线示例学到了什么?React的函数组件中建立数据通信，我们通常使用useState方法。它的使用方式采用数组解构的方式，如下: {代码...} 解构的第一个参数是我们定义并且访问的数...",
-    "url": "https://segmentfault.com/a/1190000040813435",
-    "author": "夕水",
-    "home_url": "https://segmentfault.com/u/xishui_5ac9a340a5484",
-    "votes": "35",
-    "rank": 4
+    "title": "熬夜整理56个JavaScript高级的手写知识点！！专业扫盲！",
+    "description": "前言大家好，我是林三心，基础是进阶的前提，前面我给大家分享了本菜鸟这一年来笔记中的50个JS基础知识点和50个JS高级知识点工作中遇到的50个JavaScript的基础知识点，满分找我拿奖品！【阅读：7.8k，点赞：285】...",
+    "url": "https://segmentfault.com/a/1190000040906316",
+    "author": "Sunshine_Lin",
+    "home_url": "https://segmentfault.com/u/user_ze46ouik",
+    "votes": "43",
+    "rank": 3
   },
   {
     "title": "肝完《浏览器基本原理与实践》，我总结了这些",
@@ -41,7 +32,16 @@
     "url": "https://segmentfault.com/a/1190000040896436",
     "author": "wuwhs",
     "home_url": "https://segmentfault.com/u/wuwhs",
-    "votes": "30",
+    "votes": "33",
+    "rank": 4
+  },
+  {
+    "title": "50天用react.js重写50个web项目，我学到了什么？",
+    "description": "1.Expanding Cards效果如图所示:源码在线示例学到了什么?React的函数组件中建立数据通信，我们通常使用useState方法。它的使用方式采用数组解构的方式，如下: {代码...} 解构的第一个参数是我们定义并且访问的数...",
+    "url": "https://segmentfault.com/a/1190000040813435",
+    "author": "夕水",
+    "home_url": "https://segmentfault.com/u/xishui_5ac9a340a5484",
+    "votes": "36",
     "rank": 5
   },
   {
@@ -50,7 +50,7 @@
     "url": "https://segmentfault.com/a/1190000040875211",
     "author": "独钓寒江雪",
     "home_url": "https://segmentfault.com/u/king_hcj",
-    "votes": "29",
+    "votes": "31",
     "rank": 6
   },
   {
@@ -62,22 +62,22 @@
     "votes": "24",
     "rank": 7
   },
-  {
-    "title": "CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果",
-    "description": "本文将介绍一种利用 CSS 滤镜 filter 的 drop-shadow()，实现对 HTML 元素及 SVG 元素的部分添加阴影效果，以实现一种酷炫的光影效果，用于各种不同的场景之中。通过本文，你可以学到：",
-    "url": "https://segmentfault.com/a/1190000040777921",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "27",
-    "rank": 8
-  },
   {
     "title": "【中高级前端】必备，30+高频手写题及详细答案(万字长文)，看“你”怎么难倒我",
     "description": "写个快排吧、能手写一个Promise吗？、来一个深拷贝...相信大家已经不止一次在面试或者日常业务中遇到这样的题目了，每当现场写代码时感觉似曾相识，但就是写不出来，期望的offer也离我们远去o(╥﹏╥)o。来，兄弟们...",
     "url": "https://segmentfault.com/a/1190000040803264",
     "author": "前端胖头鱼",
     "home_url": "https://segmentfault.com/u/116263",
-    "votes": "22",
+    "votes": "25",
+    "rank": 8
+  },
+  {
+    "title": "尤雨溪几年前开发的“玩具 vite”，才100多行代码，却十分有助于理解 vite 原理",
+    "description": "想学源码，极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this、create-vue等十余...",
+    "url": "https://segmentfault.com/a/1190000040893750",
+    "author": "若川",
+    "home_url": "https://segmentfault.com/u/lxchuan12",
+    "votes": "28",
     "rank": 9
   },
   {
@@ -89,6 +89,15 @@
     "votes": "27",
     "rank": 10
   },
+  {
+    "title": "前端架构师的 git 功力，你有几成火候？",
+    "description": "本文从前端工程，团队协作，生产部署的角度，介绍架构人员需要掌握的 git 实践能力。大纲预览本文介绍的内容包括以下方面：分支管理策略commit 规范与提交验证误操作的撤回方案Tag 与生产环境永久杜绝 443 Timeou...",
+    "url": "https://segmentfault.com/a/1190000040879546",
+    "author": "杨成功",
+    "home_url": "https://segmentfault.com/u/ruidoc",
+    "votes": "24",
+    "rank": 11
+  },
   {
     "title": "前端如何实现token的无感刷新",
     "description": "通常，对于一些需要记录用户行为的系统，在进行网络请求的时候都会要求传递一下登录的token。不过，为了接口数据的安全，服务器的token一般不会设置太长，根据需要一般是1-7天的样子，token过期后就需要重新登录...",
@@ -96,7 +105,7 @@
     "author": "xiangzhihong",
     "home_url": "https://segmentfault.com/u/xiangzhihong",
     "votes": "26",
-    "rank": 11
+    "rank": 12
   },
   {
     "title": "20 个值得学习的 Vue 开源项目",
@@ -105,7 +114,16 @@
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
     "votes": "19",
-    "rank": 12
+    "rank": 13
+  },
+  {
+    "title": "MySQL灵魂拷问：36题带你面试通关",
+    "description": "大家好，我是大彬~今天给大家分享MySQL常考的面试题，看看你们能答对多少。本期MySQL面试题的目录如下：事务的四大特性？事务隔离级别有哪些？索引什么是索引？索引的优缺点？索引的作用？什么情况下需要建索引？...",
+    "url": "https://segmentfault.com/a/1190000040823877",
+    "author": "程序员大彬",
+    "home_url": "https://segmentfault.com/u/5n7qfpo1",
+    "votes": "21",
+    "rank": 14
   },
   {
     "title": "7分钟学会写一个浏览器插件——突破某SDN未登录禁止复制的限制",
@@ -114,16 +132,7 @@
     "author": "独钓寒江雪",
     "home_url": "https://segmentfault.com/u/king_hcj",
     "votes": "22",
-    "rank": 13
-  },
-  {
-    "title": "前端架构师的 git 功力，你有几成火候？",
-    "description": "本文从前端工程，团队协作，生产部署的角度，介绍架构人员需要掌握的 git 实践能力。大纲预览本文介绍的内容包括以下方面：分支管理策略commit 规范与提交验证误操作的撤回方案Tag 与生产环境永久杜绝 443 Timeou...",
-    "url": "https://segmentfault.com/a/1190000040879546",
-    "author": "杨成功",
-    "home_url": "https://segmentfault.com/u/ruidoc",
-    "votes": "22",
-    "rank": 14
+    "rank": 15
   },
   {
     "title": "CSS 实现文本\"不定行数\"截断",
@@ -132,141 +141,132 @@
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "22",
-    "rank": 15
-  },
-  {
-    "title": "熬夜整理56个JavaScript高级的手写知识点！！专业扫盲！",
-    "description": "前言大家好，我是林三心，基础是进阶的前提，前面我给大家分享了本菜鸟这一年来笔记中的50个JS基础知识点和50个JS高级知识点工作中遇到的50个JavaScript的基础知识点，满分找我拿奖品！【阅读：7.8k，点赞：285】...",
-    "url": "https://segmentfault.com/a/1190000040906316",
-    "author": "Sunshine_Lin",
-    "home_url": "https://segmentfault.com/u/user_ze46ouik",
-    "votes": "28",
     "rank": 16
   },
   {
-    "title": "MySQL灵魂拷问：36题带你面试通关",
-    "description": "大家好，我是大彬~今天给大家分享MySQL常考的面试题，看看你们能答对多少。本期MySQL面试题的目录如下：事务的四大特性？事务隔离级别有哪些？索引什么是索引？索引的优缺点？索引的作用？什么情况下需要建索引？...",
-    "url": "https://segmentfault.com/a/1190000040823877",
-    "author": "程序员大彬",
-    "home_url": "https://segmentfault.com/u/5n7qfpo1",
-    "votes": "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": "23",
     "rank": 17
   },
   {
-    "title": "尤雨溪几年前开发的“玩具 vite”，才100多行代码，却十分有助于理解 vite 原理",
-    "description": "想学源码，极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this、create-vue等十余...",
-    "url": "https://segmentfault.com/a/1190000040893750",
-    "author": "若川",
-    "home_url": "https://segmentfault.com/u/lxchuan12",
-    "votes": "26",
+    "title": "一些常用的 Git 进阶知识与技巧",
+    "description": "假设我们在同一电脑上拥有多个 Git 账号，例如公司内部使用的是 Gitlab，个人使用的是 Github 或者 Gitee。那就会遇到一种情况，上班时想给个人开源项目提交代码，但是 Git 绑定的是公司的账号。",
+    "url": "https://segmentfault.com/a/1190000040930212",
+    "author": "谭光志",
+    "home_url": "https://segmentfault.com/u/woai3c",
+    "votes": "17",
     "rank": 18
   },
   {
-    "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": "22",
+    "title": "N 种仅仅使用 HTML/CSS 实现各类进度条的方式",
+    "description": "本文将介绍如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式，通过本文，你可能可以学会：通过 HTML 标签 <meter> 创建进度条通过 HTML 标签 <progress> 创建进度条HTML 实现进度条...",
+    "url": "https://segmentfault.com/a/1190000040908304",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "17",
     "rank": 19
   },
+  {
+    "title": "前端实现很哇塞的浏览器端扫码功能🌟",
+    "description": "本文主要介绍，通过使用基于 vue 技术栈的前端开发技术，在浏览器端调起摄像头 📷，并进行扫码识别功能，对识别到的二维码进行跳转或其他操作处理。本文内容分为背景介绍、实现效果、技术简介、代码实现、总结等部...",
+    "url": "https://segmentfault.com/a/1190000040809122",
+    "author": "dragonir",
+    "home_url": "https://segmentfault.com/u/dragonir",
+    "votes": "22",
+    "rank": 20
+  },
   {
     "title": "关于 v-model 你需要知道的这一切！",
     "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
     "url": "https://segmentfault.com/a/1190000040863402",
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "19",
-    "rank": 20
-  },
-  {
-    "title": "聊聊开发日常的效率提升工具（全）",
-    "description": "前言：日常开发中，好的工具往往能让我们事半功倍，有句老话说得好：工欲善其事，必先利其器。使用高效率的工具可以极大提升我们的开发效率。接下来分享下树酱平时开发中经常使用的一些效率工具",
-    "url": "https://segmentfault.com/a/1190000040818832",
-    "author": "树酱",
-    "home_url": "https://segmentfault.com/u/shu_jshu_jiashu_jianshu_jiang",
-    "votes": "16",
+    "votes": "20",
     "rank": 21
   },
   {
-    "title": "前端实现很哇塞的浏览器端扫码功能🌟",
-    "description": "本文主要介绍，通过使用基于 vue 技术栈的前端开发技术，在浏览器端调起摄像头 📷，并进行扫码识别功能，对识别到的二维码进行跳转或其他操作处理。本文内容分为背景介绍、实现效果、技术简介、代码实现、总结等部...",
-    "url": "https://segmentfault.com/a/1190000040809122",
-    "author": "dragonir",
-    "home_url": "https://segmentfault.com/u/dragonir",
-    "votes": "21",
+    "title": "10个可视化 CSS 工具， 快速生成 CSS 片段，渣男，又想抛弃我！！",
+    "description": "作者： Jatin Sharma译者：前端小智来源：dev有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
+    "url": "https://segmentfault.com/a/1190000040875123",
+    "author": "前端小智",
+    "home_url": "https://segmentfault.com/u/minnanitkong",
+    "votes": "22",
     "rank": 22
   },
   {
-    "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",
+    "title": "【建议收藏】面试官贼喜欢问的 32+ vue 修饰符，你掌握几种啦？",
+    "description": "vue简洁好用体现在很多个地方，比如其内置了32+修饰符，可以很方便我们阻止冒泡、阻止默认事件、鼠标事件处理、系统键盘事件等等，让我们可以快速搞定业务，简直不要太方便噢！！！",
+    "url": "https://segmentfault.com/a/1190000040914312",
+    "author": "前端胖头鱼",
+    "home_url": "https://segmentfault.com/u/116263",
+    "votes": "21",
     "rank": 23
   },
   {
-    "title": "Vue 团队公开快如闪电的全新脚手架工具 create-vue，未来将替代 Vue-CLI，才300余行代码，学它！",
-    "description": "想学源码，极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this等十余篇源码文章。",
-    "url": "https://segmentfault.com/a/1190000040865299",
-    "author": "若川",
-    "home_url": "https://segmentfault.com/u/lxchuan12",
+    "title": "聊聊开发日常的效率提升工具（全）",
+    "description": "前言：日常开发中，好的工具往往能让我们事半功倍，有句老话说得好：工欲善其事，必先利其器。使用高效率的工具可以极大提升我们的开发效率。接下来分享下树酱平时开发中经常使用的一些效率工具",
+    "url": "https://segmentfault.com/a/1190000040818832",
+    "author": "树酱",
+    "home_url": "https://segmentfault.com/u/shu_jshu_jiashu_jianshu_jiang",
     "votes": "16",
     "rank": 24
   },
   {
-    "title": "今天推荐，今年排名前 15 的 Vue 后台管理模板",
-    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
-    "url": "https://segmentfault.com/a/1190000040814521",
-    "author": "前端小智",
-    "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "15",
+    "title": "把程序做成系统服务",
+    "description": "写程序，难免会遇到需要做成系统服务的需求。Windows 下写系统服务需要实现一些特定的接口，做起来有一定难度，所以不少程序采用了 近似的备选方案 —— 做成带系统任务栏图标的桌面应用。但是，服务之所以是服务，...",
+    "url": "https://segmentfault.com/a/1190000040895843",
+    "author": "边城",
+    "home_url": "https://segmentfault.com/u/jamesfancy",
+    "votes": "11",
     "rank": 25
   },
   {
-    "title": "【一文秒懂】电商系统商品模块初建分析与设计",
-    "description": "创建《一文秒懂》这个专栏与以往《Grace development》和我博客的个人分享文章不同，我对《一文秒懂》这个专栏的定位是一个有态度，高标准的技术专栏，而《Grace development》我依旧会讲一些我们日常中会碰到的...",
-    "url": "https://segmentfault.com/a/1190000040855949",
-    "author": "CrazyCodes",
-    "home_url": "https://segmentfault.com/u/crazycodes",
-    "votes": "14",
+    "title": "20个 Javascript 技巧，提高我们的摸鱼时间！",
+    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
+    "url": "https://segmentfault.com/a/1190000040891379",
+    "author": "前端小智",
+    "home_url": "https://segmentfault.com/u/minnanitkong",
+    "votes": "18",
     "rank": 26
   },
   {
-    "title": "有个开发者总结这 15 优雅的 JavaScript 个技巧",
-    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
-    "url": "https://segmentfault.com/a/1190000040704570",
+    "title": "这些 JavaScript函数让你的工作更加 So Easy!",
+    "description": "作者： YoussefZidan译者：前端小智来源：dev有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
+    "url": "https://segmentfault.com/a/1190000040902611",
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "15",
+    "votes": "22",
     "rank": 27
   },
   {
-    "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": "14",
+    "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": "18",
     "rank": 28
   },
   {
-    "title": "20个 Javascript 技巧，提高我们的摸鱼时间！",
-    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
-    "url": "https://segmentfault.com/a/1190000040891379",
-    "author": "前端小智",
-    "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "16",
+    "title": "Go 日常开发常备第三方库和工具",
+    "description": "不知不觉写 Go 已经快一年了，上线了大大小小好几个项目；心态也经历了几轮变化。因为我个人大概前五年时间写的是 Java ，中途写过一年多的 Python，所以刚接触到 Go 时的感觉如下图：既没有 Java 的生态，也没有...",
+    "url": "https://segmentfault.com/a/1190000040896809",
+    "author": "crossoverJie",
+    "home_url": "https://segmentfault.com/u/crossoverjie",
+    "votes": "12",
     "rank": 29
   },
   {
-    "title": "66道前端算法面试题附思路分析助你查漏补缺",
-    "description": "本部分主要是 CavsZhouyou 在练习《剑指 Offer》时所做的笔记，主要涉及算法相关知识和一些相关面试题时所做的笔记，分享这份总结给大家，帮助大家对算法的可以来一次全方位的检漏和排查，",
-    "url": "https://segmentfault.com/a/1190000040797373",
-    "author": "wscats",
-    "home_url": "https://segmentfault.com/u/wscats",
-    "votes": "13",
+    "title": "23 个非常有用的 NodeJs 库",
+    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
+    "url": "https://segmentfault.com/a/1190000040929396",
+    "author": "前端小智",
+    "home_url": "https://segmentfault.com/u/minnanitkong",
+    "votes": "17",
     "rank": 30
   }
 ]