@wcj/github-rank 21.12.25 → 21.12.30

package/dist/sifou-daily.json

@@ -1,110 +1,119 @@
 [
   {
-    "title": "备战2022春招，这十道题必回！",
-    "description": "最近不少小伙伴跟我交流刷题肿么刷，我给的建议就是先剑指offer和力扣hot100，在这些题中还有些重要程度和出现频率是非常非常高的，今天给大家分享当今出现频率最高的10道算法题，学到就是赚到。",
-    "url": "https://segmentfault.com/a/1190000041174395",
-    "author": "bigsai",
-    "home_url": "https://segmentfault.com/u/bigsai",
-    "votes": "3",
+    "title": "电子表格实战锦囊:巧用稀疏数组是关键!",
+    "description": "前文中我们详细介绍过稀疏数组的那些事儿，以及在实际项目中，稀疏数组如何在前端电子表格中发挥出它最大的效果。而这次，我们将从实战应用出发，为大家介绍稀疏数组在前端中的具体应用。",
+    "url": "https://segmentfault.com/a/1190000041196153",
+    "author": "葡萄城技术团队",
+    "home_url": "https://segmentfault.com/u/grapecity",
+    "votes": "1",
     "rank": 1
   },
   {
-    "title": "Redis 分布式锁的正确实现原理演化历程与 Redission 实战总结",
-    "description": "Redis 分布式锁使用 SET 指令就可以实现了么？在分布式领域 CAP 理论一直存在。分布式锁的门道可没那么简单，我们在网上看到的分布式锁方案可能是有问题的。「码哥」一步步带你深入分布式锁是如何一步步完善，在...",
-    "url": "https://segmentfault.com/a/1190000041172633",
-    "author": "码哥字节",
-    "home_url": "https://segmentfault.com/u/magebyte",
+    "title": "难搞的偏向锁终于被 Java 移除了",
+    "description": "背景在 JDK1.5 之前，面对 Java 并发问题， synchronized 是一招鲜的解决方案：普通同步方法，锁上当前实例对象静态同步方法，锁上当前类 Class 对象同步块，锁上括号里面配置的对象拿同步块来举例: {代码...} 经...",
+    "url": "https://segmentfault.com/a/1190000041194920",
+    "author": "日拱一兵",
+    "home_url": "https://segmentfault.com/u/tanrigongyibing",
     "votes": "4",
     "rank": 2
   },
   {
-    "title": "面试官问我TCP三次握手和四次挥手，我真的是",
-    "description": "候选者：面试官你好，请问面试可以开始了吗面试官：嗯，开始吧面试官：今天来聊聊TCP吧，TCP的各个状态还有印象吗？候选者：还有些许印象的，要不我就来简单说下TCP的三次握手和四次挥手的流程吧候选者：说完这两...",
-    "url": "https://segmentfault.com/a/1190000041171425",
-    "author": "Java3y",
-    "home_url": "https://segmentfault.com/u/java_3y",
-    "votes": "2",
+    "title": "浏览器渲染魔法之合成层",
+    "description": "浏览器与前端开发的关系不言而喻，而了解浏览器的渲染原理，可以帮助我们提升页面性能，解决一些渲染上的问题。最近在开发一个移动端 H5 页面的时候，就遇到一个奇怪的问题，有一个榜单页面在最新版本 IOS 手机上...",
+    "url": "https://segmentfault.com/a/1190000041197292",
+    "author": "云音乐大前端团队",
+    "home_url": "https://segmentfault.com/u/musicfe",
+    "votes": "3",
     "rank": 3
   },
   {
-    "title": "效率提升：物理机管理使用场景和实践",
-    "description": "可以把物理机想象成机房的服务器，物理机都有较好的硬件配置，例如内存会达到上百G，还会使用英特尔至强系列等性能较好的CPU， 另外在磁盘方面，物理机上都有单独的RAID控制器。",
-    "url": "https://segmentfault.com/a/1190000041176271",
+    "title": "数字证书对保护云计算平台安全的重要性正在不断提高",
+    "description": "大量企业正在从传统的内部IT环境转向基于云计算的平台，从而提高业务效率和有效性，但也引入了数据泄露、未经授权的访问和复杂的身份管理等安全威胁。",
+    "url": "https://segmentfault.com/a/1190000041199684",
     "author": "云联壹云",
     "home_url": "https://segmentfault.com/u/yunion",
     "votes": "1",
     "rank": 4
   },
   {
-    "title": "input如何获取失去焦点鼠标点击的位置或者元素？",
-    "description": "为了解决这个bug, 我需要给Input添加blur事件，清空日历model值。同时，如果我blur点击的区域如果在下方日历显示的地方，禁止blur里的方法执行。",
-    "url": "https://segmentfault.com/a/1190000041175932",
-    "author": "旅图灬",
-    "home_url": "https://segmentfault.com/u/lvtu",
+    "title": "开源探索 | 优麒麟社区发布 RISC-V 体验版",
+    "description": "2021 年 12 月 29 日，在优麒麟社区和海河实验室研发团队的共同努力下，优麒麟社区发布首个支持 RISC-V 架构的系统 — 20.04 Pro （RISC-V）版本！",
+    "url": "https://segmentfault.com/a/1190000041199539",
+    "author": "优麒麟",
+    "home_url": "https://segmentfault.com/u/ubuntukylin",
     "votes": "1",
     "rank": 5
   },
   {
-    "title": "广交会激战120小时",
-    "description": "广交会是中国的一张靓丽名片，持续60多年为来自全球数百个国家和地区的企业提供贸易往来、文化交流的平台。自第127届广交会搬上云端，保障云上广交会安全稳定运行，成为了至关重要的课题。",
-    "url": "https://segmentfault.com/a/1190000041175810",
-    "author": "腾讯安全",
-    "home_url": "https://segmentfault.com/u/tengxunanquan",
+    "title": "告别KAPT，使用KSP为Android编译提速",
+    "description": "在进行Android应用开发时，不少人吐槽 Kotlin 的编译速度慢，而KAPT 便是拖慢编译的元凶之一。我们知道，Android的很多库都会使用注解简化模板代码，例如 Room、Dagger、Retrofit 等，而默认情况下Kotlin 使用的...",
+    "url": "https://segmentfault.com/a/1190000041198258",
+    "author": "xiangzhihong",
+    "home_url": "https://segmentfault.com/u/xiangzhihong",
     "votes": "1",
     "rank": 6
   },
   {
-    "title": "Eclipse阿里云镜像源配置",
-    "description": "Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括 Java 开发工具（Java Deve...",
-    "url": "https://segmentfault.com/a/1190000041173258",
-    "author": "敲键盘ing",
-    "home_url": "https://segmentfault.com/u/sheyingshichenjian",
+    "title": "Top 5 榜单：最容易学习和最难掌握的编程语言",
+    "description": "如果你想学习编程，你应该从哪种编程语言开始？向一个程序员询问最容易学习的语言，就像向某人询问他们最喜欢吃什么口味的冰激凌，没有真正正确的的答案，每个人都会有自己的偏好。正如开发者和教育家 Marek Zalu...",
+    "url": "https://segmentfault.com/a/1190000041196930",
+    "author": "snakesss",
+    "home_url": "https://segmentfault.com/u/snakesss",
     "votes": "1",
     "rank": 7
   },
   {
-    "title": "一次说清，为什么在Antd Modal中调resetFields调了个寂寞",
-    "description": "久了不摸手生，除了react依稀记得，antd基本只能看着官方demo一行一行写，感觉一天能写完的，结果两天了还没联调完。中间还遇到一些似曾相识的问题，可惜以前的经验已经不管用了。",
-    "url": "https://segmentfault.com/a/1190000041172195",
-    "author": "Denzel",
-    "home_url": "https://segmentfault.com/u/denzel",
-    "votes": "1",
+    "title": "彻底搞懂 Kubernetes 中的 Events",
+    "description": "之前我写了一篇《更优雅的 Kubernetes 集群事件度量方案》，利用 Jaeger 利用 tracing 的方式来采集 Kubernetes 集群中的 events 并进行展示。最终效果如下：",
+    "url": "https://segmentfault.com/a/1190000041196706",
+    "author": "张晋涛",
+    "home_url": "https://segmentfault.com/u/moelove",
+    "votes": "2",
     "rank": 8
   },
   {
-    "title": "技术期刊 · 路尘终见泰山平 | 微前端及插件化架构在 Wix 的实践;编辑器架构的第二路径;业务中的前端组件化体系……",
-    "description": "不想当架构师的程序员不是“合格”的程序员？这一类的言论在很多文章中应该很常见吧，我们需要架构思维，要有抽象能力，要学会分层……需要的太多太多，可很少有合适的项目能够帮助我们养成这些思考的习惯，比如业务...",
-    "url": "https://segmentfault.com/a/1190000041171863",
-    "author": "凹凸实验室",
-    "home_url": "https://segmentfault.com/u/o2team",
+    "title": "【C进阶】27、数组的本质分析",
+    "description": "a是数组首元素的地址，类型是int*；*a就是首元素，sizeof(*a)可以获得数组首元素的内存大小；a同时也代表这一段内存，sizeof(a)可以获得数组的内存大小；sizeof(a) / sizeof(*a) = 数组元素的个数",
+    "url": "https://segmentfault.com/a/1190000041200328",
+    "author": "bryson",
+    "home_url": "https://segmentfault.com/u/lala_60a20654d1aa3",
     "votes": "1",
     "rank": 9
   },
   {
-    "title": "Git 约定式提交",
-    "description": "概述每次提交代码的时候，我们都需要为我们本次修改的内容添加一段描述，例如： {代码...} 但实际上有些 commit message 千奇百怪，比如以下这种：一次 commit 应该准确的说明本次提交的目的和修改内容，比如： {...",
-    "url": "https://segmentfault.com/a/1190000041176927",
-    "author": "async wait",
-    "home_url": "https://segmentfault.com/u/async_wait",
-    "votes": "2",
+    "title": "记：实现一个mini-react",
+    "description": "可以看到，这些jsx语法，经过babel转译后，最终调用了React.createElement，其需要三个参数type, props, children。其返回值就是virtual DOM对象。也就是说，我们可以使用babel将我们的jsx代码，转换成虚拟DOM， ...",
+    "url": "https://segmentfault.com/a/1190000041197056",
+    "author": "路飞的笑",
+    "home_url": "https://segmentfault.com/u/lufeidexiao",
+    "votes": "1",
     "rank": 10
   },
   {
-    "title": "JZ-035-数组中的逆序对",
-    "description": "在数组中的两个数字，如果前面一个数字大于后面的数字，则这两个数字组成一个逆序对。输入一个数组,求出这个数组中的逆序对的总数P。并将P对1000000007取模的结果输出。 即输出P%1000000007题目链接: 数组中的逆序对",
-    "url": "https://segmentfault.com/a/1190000041176631",
-    "author": "雄狮虎豹",
-    "home_url": "https://segmentfault.com/u/xiongshihubao",
+    "title": "Web前端主题切换的几种方案",
+    "description": "这种方案利用了css多层样式精确匹配的特点，通过样式覆盖的方式实现主题的切换。首先需要在应用的根元素中设一个 class，切换主题时给 class 赋上对应的值，下面以theme1/theme2为例。",
+    "url": "https://segmentfault.com/a/1190000041195585",
+    "author": "Dickens",
+    "home_url": "https://segmentfault.com/u/dabai_5955b2921e87d",
     "votes": "1",
     "rank": 11
   },
   {
-    "title": "如何使用Tin安装SonarQube（史上最快)",
-    "description": "Sonar (SonarQube) 是一个开源的代码质量管理平台, 可以检测代码中的错误，漏洞以及代码异常。这里提供一个不用下载依赖，不用考虑系统版本，百分之百成功安装SonarQube的方法。TeamCode Tin是一个能够快速从源码...",
-    "url": "https://segmentfault.com/a/1190000041172630",
-    "author": "TeamCode",
-    "home_url": "https://segmentfault.com/u/teamcode",
-    "votes": "3",
+    "title": "Lombok 原理与实现",
+    "description": "本文主要包含以下内容：Lombok 的实现机制分析。插入式注解处理器的说明及使用。动手实现 lombok 的 @Getter 和 @Setter 注解。配置 IDEA 以调试 Java 编译过程。1. Lombok官网介绍：Project Lombok is a java li...",
+    "url": "https://segmentfault.com/a/1190000041200280",
+    "author": "Sumkor",
+    "home_url": "https://segmentfault.com/u/sumkor",
+    "votes": "1",
     "rank": 12
+  },
+  {
+    "title": "SphereEx 亮相 openGauss Summit 2021，同云和恩墨签订战略合作协议",
+    "description": "2021 年 12 月 28 日，openGauss Summit 2021 在北京望京凯悦酒店正式举行。本次大会是由 openGauss 开源社区发起并举办，以【汇聚数据库创新力量，逐梦数字时代星辰大海】为主题，汇集学术专家、行业用户、合作...",
+    "url": "https://segmentfault.com/a/1190000041196587",
+    "author": "SphereEx",
+    "home_url": "https://segmentfault.com/u/sphereex",
+    "votes": "1",
+    "rank": 13
   }
 ]

package/dist/sifou-monthly.json

@@ -1,12 +1,30 @@
 [
+  {
+    "title": "用一个 flv.js 播放监控的例子，带你深撅直播流技术",
+    "description": "本文记录一下在使用 flv.js 播放监控视频时踩过的各种各样的坑。虽然官网给的 Getting Started 只有短短几行代码，跑一个能播视频的 demo 很容易，但是播放时各种各样的异常会搞到你怀疑人生。",
+    "url": "https://segmentfault.com/a/1190000041163719",
+    "author": "杨成功",
+    "home_url": "https://segmentfault.com/u/ruidoc",
+    "votes": "36",
+    "rank": 1
+  },
   {
     "title": "20 个防御性的 CSS 处理方式，很细节很常见，也很容易被忽略的处理方式",
     "description": "看到一篇来自 @shadeed9 关于 CSS 的文章内容，整体来说主要在编写 CSS 时可能需要注意到的一些带有保护性的处理方式，以避免页面布局上出现错位等情况。CSS 属性有些还是很常见的，只不过深感在细节上的把控真的...",
     "url": "https://segmentfault.com/a/1190000041099699",
     "author": "林小志",
     "home_url": "https://segmentfault.com/u/linxz",
-    "votes": "38",
-    "rank": 1
+    "votes": "39",
+    "rank": 2
+  },
+  {
+    "title": "思否年度有奖征文丨用文字记录下属于你的2021",
+    "description": "亲爱的开发者们：大家好，我是 SegmentFault 思否的社区管理员 思否小姐姐~2021，也注定是个不平凡的一年！ 鲜花与荆棘，凛寒和热盼；仔细想来，大家在这一年一定经历和成长了很多，人生的进度条又向前了一格。20...",
+    "url": "https://segmentfault.com/a/1190000041089764",
+    "author": "SegmentFault思否",
+    "home_url": "https://segmentfault.com/u/segmentfault",
+    "votes": "24",
+    "rank": 3
   },
   {
     "title": "React、Vue我全都要！React Hook 实现 Vue 的11个基本功能",
@@ -15,16 +33,16 @@
     "author": "Sunshine_Lin",
     "home_url": "https://segmentfault.com/u/user_ze46ouik",
     "votes": "31",
-    "rank": 2
+    "rank": 4
   },
   {
-    "title": "思否年度有奖征文丨用文字记录下属于你的2021",
-    "description": "亲爱的开发者们：大家好，我是 SegmentFault 思否的社区管理员 思否小姐姐~2021，也注定是个不平凡的一年！ 鲜花与荆棘，凛寒和热盼；仔细想来，大家在这一年一定经历和成长了很多，人生的进度条又向前了一格。20...",
-    "url": "https://segmentfault.com/a/1190000041089764",
-    "author": "SegmentFault思否",
-    "home_url": "https://segmentfault.com/u/segmentfault",
-    "votes": "23",
-    "rank": 3
+    "title": "良苦用心啊！我把7大跨域解决方法原理画成10张图，做成图解！",
+    "description": "咱们做前端的，平时跟后端对接接口那是必须的事情，但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域，那跨域到底是啥呢？为什么会跨域呢？又怎么才能解决呢？",
+    "url": "https://segmentfault.com/a/1190000041032091",
+    "author": "Sunshine_Lin",
+    "home_url": "https://segmentfault.com/u/user_ze46ouik",
+    "votes": "30",
+    "rank": 5
   },
   {
     "title": "现代配置指南——YAML 比 JSON 高级在哪？",
@@ -33,25 +51,16 @@
     "author": "杨成功",
     "home_url": "https://segmentfault.com/u/ruidoc",
     "votes": "30",
-    "rank": 4
+    "rank": 6
   },
   {
-    "title": "超硬核 Web 前端学霸笔记，学完就去找工作！",
-    "description": "文章和教程Vue 学习笔记Node 学习笔记React 学习笔记Angular 学习笔记RequireJS 学习笔记Webpack 学习笔记Gulp 学习笔记Python 学习笔记Egret 引擎学习笔记流处理，TCP 和 UDP，WebRTC 和 Blob 学习笔记博客前端...",
-    "url": "https://segmentfault.com/a/1190000041031214",
-    "author": "wscats",
-    "home_url": "https://segmentfault.com/u/wscats",
+    "title": "【建议收藏】11+实战技巧，让你轻松从Vue过渡到React",
+    "description": "这篇文章尝试将Vue中一些常见的功能在React中实现一遍，如果你恰巧是Vue转React，或者React转Vue，期待对你有些帮助。如果你是一名熟悉React和Vue的同学跪求轻喷（手动求生）",
+    "url": "https://segmentfault.com/a/1190000041157904",
+    "author": "前端胖头鱼",
+    "home_url": "https://segmentfault.com/u/116263",
     "votes": "25",
-    "rank": 5
-  },
-  {
-    "title": "良苦用心啊！我把7大跨域解决方法原理画成10张图，做成图解！",
-    "description": "咱们做前端的，平时跟后端对接接口那是必须的事情，但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域，那跨域到底是啥呢？为什么会跨域呢？又怎么才能解决呢？",
-    "url": "https://segmentfault.com/a/1190000041032091",
-    "author": "Sunshine_Lin",
-    "home_url": "https://segmentfault.com/u/user_ze46ouik",
-    "votes": "28",
-    "rank": 6
+    "rank": 7
   },
   {
     "title": "使用 CSS 轻松实现高频出现的各类奇形怪状按钮",
@@ -60,7 +69,25 @@
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
     "votes": "25",
-    "rank": 7
+    "rank": 8
+  },
+  {
+    "title": "2022前端必用⭐正则大全, 请🚀提前收好.",
+    "description": "你好, 我是any-rule(一个vscode插件)的作者, 感谢大家长期以来对any-rule的喜爱. 经过大家1年多的使用, any-rule后台已经有了10w+的日志记录, 年底了分享下这1年中大家最喜欢的正则有哪些.",
+    "url": "https://segmentfault.com/a/1190000041153005",
+    "author": "铁皮饭盒",
+    "home_url": "https://segmentfault.com/u/russell221",
+    "votes": "26",
+    "rank": 9
+  },
+  {
+    "title": "基于 Vite 搭建开发体验超级丝滑的 Vue3 组件库开发框架",
+    "description": "说到 Vue 的组件库，大家肯定早已耳熟能详，随随便便就能列举出一大堆。那为什么还需要自己去搭建呢？结合自身的经验，在业务中往往需要高度定制化的组件，无论是 UI 和交互，可能都会跟市面上现有的组件库有着较...",
+    "url": "https://segmentfault.com/a/1190000041103446",
+    "author": "jrainlau",
+    "home_url": "https://segmentfault.com/u/jrainlau",
+    "votes": "20",
+    "rank": 10
   },
   {
     "title": "详解虚拟DOM与Diff算法",
@@ -69,7 +96,7 @@
     "author": "kerin",
     "home_url": "https://segmentfault.com/u/kerin",
     "votes": "19",
-    "rank": 8
+    "rank": 11
   },
   {
     "title": "100行代码实现React核心调度功能",
@@ -78,16 +105,7 @@
     "author": "卡颂",
     "home_url": "https://segmentfault.com/u/kasong",
     "votes": "19",
-    "rank": 9
-  },
-  {
-    "title": "基于 Vite 搭建开发体验超级丝滑的 Vue3 组件库开发框架",
-    "description": "说到 Vue 的组件库，大家肯定早已耳熟能详，随随便便就能列举出一大堆。那为什么还需要自己去搭建呢？结合自身的经验，在业务中往往需要高度定制化的组件，无论是 UI 和交互，可能都会跟市面上现有的组件库有着较...",
-    "url": "https://segmentfault.com/a/1190000041103446",
-    "author": "jrainlau",
-    "home_url": "https://segmentfault.com/u/jrainlau",
-    "votes": "19",
-    "rank": 10
+    "rank": 12
   },
   {
     "title": "公司用的 MySQL 团队开发规范，太详细了，建议收藏！",
@@ -95,25 +113,7 @@
     "url": "https://segmentfault.com/a/1190000041105650",
     "author": "民工哥",
     "home_url": "https://segmentfault.com/u/jishuroad",
-    "votes": "20",
-    "rank": 11
-  },
-  {
-    "title": "2022前端必用⭐正则大全, 请🚀提前收好.",
-    "description": "你好, 我是any-rule(一个vscode插件)的作者, 感谢大家长期以来对any-rule的喜爱. 经过大家1年多的使用, any-rule后台已经有了10w+的日志记录, 年底了分享下这1年中大家最喜欢的正则有哪些.",
-    "url": "https://segmentfault.com/a/1190000041153005",
-    "author": "铁皮饭盒",
-    "home_url": "https://segmentfault.com/u/russell221",
-    "votes": "19",
-    "rank": 12
-  },
-  {
-    "title": "用一个 flv.js 播放监控的例子，带你深撅直播流技术",
-    "description": "本文记录一下在使用 flv.js 播放监控视频时踩过的各种各样的坑。虽然官网给的 Getting Started 只有短短几行代码，跑一个能播视频的 demo 很容易，但是播放时各种各样的异常会搞到你怀疑人生。",
-    "url": "https://segmentfault.com/a/1190000041163719",
-    "author": "杨成功",
-    "home_url": "https://segmentfault.com/u/ruidoc",
-    "votes": "16",
+    "votes": "21",
     "rank": 13
   },
   {
@@ -122,16 +122,16 @@
     "url": "https://segmentfault.com/a/1190000041037062",
     "author": "Sunshine_Lin",
     "home_url": "https://segmentfault.com/u/user_ze46ouik",
-    "votes": "22",
+    "votes": "23",
     "rank": 14
   },
   {
-    "title": "用CSS来撸一只神经猫",
-    "description": "之前围住神经猫的H5小游戏火爆了朋友圈，其中神经猫贱贱的表情，露着屁股的各种姿势，也给用户带来了不少趣味。现在我们就用CSS来撸出一只小贱猫。从网上下载一张我们要仿照的神经猫图片，如下：",
-    "url": "https://segmentfault.com/a/1190000041016364",
-    "author": "linshuai",
-    "home_url": "https://segmentfault.com/u/linshuai",
-    "votes": "15",
+    "title": "利用 clip-path 实现动态区域裁剪",
+    "description": "背景今天逛 CodePen，看到了这样一个非常有意思的效果：CodePen Demo -- Material Design Menu By Bennett Feely这个效果还是有一些值得探讨学习的点，下面我们一起来看看。如何实现这样一个类似的效果？首先，想...",
+    "url": "https://segmentfault.com/a/1190000041126373",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "14",
     "rank": 15
   },
   {
@@ -140,7 +140,7 @@
     "url": "https://segmentfault.com/a/1190000041156066",
     "author": "思否编辑部",
     "home_url": "https://segmentfault.com/u/writers",
-    "votes": "11",
+    "votes": "12",
     "rank": 16
   },
   {
@@ -153,21 +153,21 @@
     "rank": 17
   },
   {
-    "title": "PHP 基金会，是个好事 (PHP Foundation)",
-    "description": "2021 年 11 月 23 日，PHP 主力开发 Nikita Popov 发文宣布 将不再参与 PHP 的主要维护，从月底开始逐渐淡出。据说 Nikita Popov 从他还在上高中时就开始参与 PHP 的开发，彼时为 2011 年，截至目前已有 10 年之...",
-    "url": "https://segmentfault.com/a/1190000041008293",
-    "author": "summerblue",
-    "home_url": "https://segmentfault.com/u/summerblue",
-    "votes": "15",
+    "title": "1.2w字 | 从 0 到 1 上手 Web Components 业务组件库开发",
+    "description": "组件化是前端发展的一个重要方向，它一方面提高开发效率，另一方面降低维护成本。主流的 Vue.js、React 及其延伸的 Ant Design、uniapp、Taro 等都是组件框架。​Web Components 是一组 Web 原生 API 的总称，允许...",
+    "url": "https://segmentfault.com/a/1190000041170989",
+    "author": "pingan8787",
+    "home_url": "https://segmentfault.com/u/pingan8787",
+    "votes": "17",
     "rank": 18
   },
   {
-    "title": "利用 clip-path 实现动态区域裁剪",
-    "description": "背景今天逛 CodePen，看到了这样一个非常有意思的效果：CodePen Demo -- Material Design Menu By Bennett Feely这个效果还是有一些值得探讨学习的点，下面我们一起来看看。如何实现这样一个类似的效果？首先，想...",
-    "url": "https://segmentfault.com/a/1190000041126373",
+    "title": "Amazing！！CSS 也能实现极光？",
+    "description": "emmm，这有点难为人了。不过，最近我也尝试着去试了下，虽然不可能模拟出那么真实的效果，但是使用 CSS 还是可以作出类似的一些特效的，今天我们就一起来尝试下。",
+    "url": "https://segmentfault.com/a/1190000041166007",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "13",
+    "votes": "11",
     "rank": 19
   },
   {
@@ -215,6 +215,15 @@
     "votes": "15",
     "rank": 24
   },
+  {
+    "title": "使用 Nginx 构建前端日志统计服务",
+    "description": "这个大的项目以 low code 为核心，囊括了编辑器前端、编辑器后端、C 端 H5、组件库、组件平台、后台管理系统前端、后台管理系统后台、统计服务、自研 CLI 九大系统。",
+    "url": "https://segmentfault.com/a/1190000041184489",
+    "author": "前端森林",
+    "home_url": "https://segmentfault.com/u/fengshuan",
+    "votes": "10",
+    "rank": 25
+  },
   {
     "title": "你真的认为Google翻译不影响\"前端\"页面功能吗?",
     "description": "又是一个时光飞逝的工作日, QA同学突然提出bug, 文本输入框的\"计数\"功能失效, 经过大家多方查找最后发现竟然是因为测试同学开启了\"谷歌翻译\"造成的无法\"计数\", 这就引起了我的浓厚兴趣, 到底这个看起来\"人畜...",
@@ -222,15 +231,6 @@
     "author": "lulu_up",
     "home_url": "https://segmentfault.com/u/lulu_up",
     "votes": "11",
-    "rank": 25
-  },
-  {
-    "title": "10个HTML文件上传技巧",
-    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
-    "url": "https://segmentfault.com/a/1190000041088153",
-    "author": "前端小智",
-    "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "16",
     "rank": 26
   },
   {
@@ -243,30 +243,30 @@
     "rank": 27
   },
   {
-    "title": "Vue 3 响应式源码中为什么使用 WeakMap 作为「缓存区」？",
-    "description": "在读 Vue 3 响应式原理部分代码的过程中看到其在进行响应式处理的时候，为每个对象使用 WeakMap 创建了一个「缓存区」，代码如下： {代码...} 从上面的代码可以看出，WeakMap 缓存区的作用就是用来防止对象被重复...",
-    "url": "https://segmentfault.com/a/1190000041110940",
-    "author": "百瓶技术",
-    "home_url": "https://segmentfault.com/u/billionbottle",
-    "votes": "8",
+    "title": "10个HTML文件上传技巧",
+    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
+    "url": "https://segmentfault.com/a/1190000041088153",
+    "author": "前端小智",
+    "home_url": "https://segmentfault.com/u/minnanitkong",
+    "votes": "16",
     "rank": 28
   },
   {
-    "title": "你说你会Promise？那你解决一下项目中的这五个难题？",
-    "description": "大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心，众所周知哈， Promise 在咱们的开发中是相当的重要，我觉得对于 Promise 的使用等级，可以分为三个等级",
-    "url": "https://segmentfault.com/a/1190000041025373",
-    "author": "Sunshine_Lin",
-    "home_url": "https://segmentfault.com/u/user_ze46ouik",
-    "votes": "16",
+    "title": "Java集合高频面试题",
+    "description": "本文目录：常见的集合有哪些？List 、Set和Map 的区别ArrayList 了解吗？ArrayList 的扩容机制？怎么在遍历 ArrayList 时移除一个元素？Arraylist 和 Vector 的区别Arraylist 与 LinkedList 区别HashMap解决hash...",
+    "url": "https://segmentfault.com/a/1190000041101930",
+    "author": "程序员大彬",
+    "home_url": "https://segmentfault.com/u/5n7qfpo1",
+    "votes": "11",
     "rank": 29
   },
   {
-    "title": "火线安全：Log4j2 史诗级漏洞波及全球6万+开源软件",
-    "description": "近日，Log4j2 被爆出现史诗级利用成本极低危害极大的漏洞，黑客可通过发送一条指令即可控制目标设备。Log4j2 作为基础日志组件被大量基础服务在底层使用，据统计，该漏洞影响6万+流行开源软件，影响70%以上的企业...",
-    "url": "https://segmentfault.com/a/1190000041105568",
-    "author": "火线安全",
-    "home_url": "https://segmentfault.com/u/huoxian",
-    "votes": "9",
+    "title": "Vue 3 响应式源码中为什么使用 WeakMap 作为「缓存区」？",
+    "description": "在读 Vue 3 响应式原理部分代码的过程中看到其在进行响应式处理的时候，为每个对象使用 WeakMap 创建了一个「缓存区」，代码如下： {代码...} 从上面的代码可以看出，WeakMap 缓存区的作用就是用来防止对象被重复...",
+    "url": "https://segmentfault.com/a/1190000041110940",
+    "author": "百瓶技术",
+    "home_url": "https://segmentfault.com/u/billionbottle",
+    "votes": "8",
     "rank": 30
   }
 ]