@wcj/github-rank 22.5.20 → 22.5.23

package/dist/sifou-daily.json

@@ -1,119 +1,74 @@
 [
   {
-    "title": "JSON数据传输大法第一式——用OADate处理日期格式",
-    "description": "JSON作为一种轻量级的数据交换格式，通常采用完全独立于编程语言的文本格式来存储和表示数据。它的层次结构简洁清晰，易于人们的阅读和编写，此外机器编写和生成也会变得容易，可以有效地提升网络传输效率，这些...",
-    "url": "https://segmentfault.com/a/1190000041866543",
-    "author": "葡萄城技术团队",
-    "home_url": "https://segmentfault.com/u/grapecity",
-    "votes": "3",
+    "title": "如何实现一个能精确同步滚动的Markdown编辑器",
+    "description": "随着Markdown越来越流行，Markdown编辑器也越来越多，除去所见即所得的实时预览编辑器外，通常其他Markdown编辑器都会采用源代码和预览双栏显示的方式，就像这样：",
+    "url": "https://segmentfault.com/a/1190000041881142",
+    "author": "街角小林",
+    "home_url": "https://segmentfault.com/u/jiejiaoxiaolin",
+    "votes": "4",
     "rank": 1
   },
   {
-    "title": "面试官问：Go 中的参数传递是值传递还是引用传递？",
-    "description": "一个程序中，变量分为变量名和变量内容，变量内容的存储一般会被分配到堆和栈上。而在 Go 语言中有两种传递变量的方式值传递和引用传递。其中值传递会直接将变量内容附在变量名上传递，而引用传递会将变量内容的...",
-    "url": "https://segmentfault.com/a/1190000041865949",
-    "author": "云叔_又拍云",
-    "home_url": "https://segmentfault.com/u/yunshu_blog",
-    "votes": "3",
+    "title": "前端监控的搭建步骤，别再一头雾水了！",
+    "description": "在动手实现之前，首先脑子里要有一个整体脉络，明白搭建前端监控具体的流程步骤有哪些。因为前端监控系统实际上是一个完整的全栈项目，而并不仅仅是前端，甚至主要的实现都是围绕在 数据方面 的。",
+    "url": "https://segmentfault.com/a/1190000041879217",
+    "author": "杨成功",
+    "home_url": "https://segmentfault.com/u/ruidoc",
+    "votes": "2",
     "rank": 2
   },
   {
-    "title": "常用的服务器宕机检测通知工具——WGCLOUD",
-    "description": "在项目中，有时候因为一些故障原因，系统会无法提供服务，或者服务器出现宕机现象，这时候，我们为了保证系统能够正常稳定运行，常常需要做一些措施，比如健康检测工具等",
-    "url": "https://segmentfault.com/a/1190000041868992",
-    "author": "徐三刀",
-    "home_url": "https://segmentfault.com/u/9b3sps2b",
-    "votes": "2",
+    "title": "Golang RocketMq安装及简单应用（Mac环境）",
+    "description": "一、下载安装RocketMq {代码...} 我选择的是这个二进制版本安装：选择一个目录解压，一般情况路径是:/usr/local/bin，下面是我自己的路径是：由于RocketMq是纯java编写，确认自己是否有jdk环境，执行如下命令： {...",
+    "url": "https://segmentfault.com/a/1190000041881238",
+    "author": "Banmi",
+    "home_url": "https://segmentfault.com/u/heng_5f357c3b3d0ef",
+    "votes": "1",
     "rank": 3
   },
   {
-    "title": "被折磨了 13 年，Go 怎么解决再赋值的坑？",
-    "description": "大家好，我是煎鱼。最近在看 Go 的一些历史提案时，发现有个别很神奇的提案，已经提出来了许多年，但在如今依然没有关闭，并且不断地有人在讨论，但又解决不了。有种 “很气又干不掉我的样子”，今天就由煎鱼带大家...",
-    "url": "https://segmentfault.com/a/1190000041867051",
-    "author": "煎鱼",
-    "home_url": "https://segmentfault.com/u/eddycjy",
-    "votes": "3",
+    "title": "面向对象与设计原则",
+    "description": "三大特性抽象类和接口抽象类的三个特性(abstract)接口的三个属性(interface)抽象类和接口的区别两者再区别总结基于接口而非实现编程SOLID原则三大特性封装：封装也叫做信息隐匿或者数据访问保护，类通过暴露有限...",
+    "url": "https://segmentfault.com/a/1190000041880719",
+    "author": "eacape",
+    "home_url": "https://segmentfault.com/u/xiaoyongyong",
+    "votes": "1",
     "rank": 4
   },
   {
-    "title": "Spring Boot 2.7.0发布，2.5停止维护，节奏太快了吧",
-    "description": "这几天是Spring版本日，很多Spring工件都发布了新版本， Spring Framework 6.0.0 发布了第 4 个里程碑版本，此版本包含所有针对 5.3.20 的修复补丁，以及特定于 6.0 分支的 39 项修复和改进。而今天Spring Boot 2...",
-    "url": "https://segmentfault.com/a/1190000041870045",
-    "author": "码农小胖哥",
-    "home_url": "https://segmentfault.com/u/10000000",
+    "title": "js获取页面尺寸",
+    "description": "在开发中经常用到获取元素位置和大小的需求，我最近在vue2.x上写了一个图片查看组件，它有拖动，定点缩放功能，这就需要获取视口大小，元素位置和大小。看了阮老师的相关文章，实现了这个组件，也顺便在阮老师的...",
+    "url": "https://segmentfault.com/a/1190000041879966",
+    "author": "welsen",
+    "home_url": "https://segmentfault.com/u/huaming",
     "votes": "1",
     "rank": 5
   },
   {
-    "title": "JS判断对象是否为空对象的方法",
-    "description": "1.通过JSON自带的stringify()方法来判断 {代码...} 2.for in 循环判断 {代码...} 3.使用ES6的Object.keys()方法 {代码...} 4.Object.getOwnPropertyNames()方法 {代码...}",
-    "url": "https://segmentfault.com/a/1190000041866880",
-    "author": "jrue",
-    "home_url": "https://segmentfault.com/u/jrue",
+    "title": "各种Buffer傻傻分不清，今天终于有点悟了",
+    "description": "参考知乎问答 Java NIO中，关于DirectBuffer，HeapBuffer的疑问？DirectBuffer本身这个对象是在堆中，但是引用了一块非堆的native memory，这块内存实际上还是属于java进程的内存中，这个角度说的话，DirectBuffe...",
+    "url": "https://segmentfault.com/a/1190000041879813",
+    "author": "开翻挖掘机",
+    "home_url": "https://segmentfault.com/u/wajueji9527",
     "votes": "1",
     "rank": 6
   },
   {
-    "title": "谢孟军：中国 Go 语言领军人的创业第五年",
-    "description": "Go 语言，又称 Golang，是一门由 Google 开发的开源编程语言。Go 语言自 2009 年推出后，因为其简单易学、性能强劲的特点，深受开发者的青睐，使用人数持续增长，还在 2016 年被评为「TIOBE 最佳语言」。",
-    "url": "https://segmentfault.com/a/1190000041866615",
-    "author": "腾源会",
-    "home_url": "https://segmentfault.com/u/weopen",
+    "title": "Spring 中 @EnableXXX 注解的套路",
+    "description": "在 Spring 框架中有很多实用的功能，不需要写大量的配置代码，只需添加几个注解即可开启。 其中一个重要原因是那些 @EnableXXX 注解，它可以让你通过在配置类加上简单的注解来快速地开启诸如事务管理（@EnableTra...",
+    "url": "https://segmentfault.com/a/1190000041879583",
+    "author": "mghio",
+    "home_url": "https://segmentfault.com/u/mghio",
     "votes": "1",
     "rank": 7
   },
   {
-    "title": "Angular 开发者 2021 调查报告",
-    "description": "今年早些时候 Angular 面向用户进行了年度开发者调查，共收到了25000份回复。调查结果表明：超过 84% 的开发者对 Angular 感到满意，不到 8% 的开发者表示不满意；工龄较大（11 年以上）的开发者有 85% 满意度。",
-    "url": "https://segmentfault.com/a/1190000041866590",
-    "author": "六一",
-    "home_url": "https://segmentfault.com/u/suicidal_romantic_scoundrel",
+    "title": "golang  sync 包",
+    "description": "当多个 goroutine 都需要创建同⼀个对象的时候，如果 goroutine 数过多，导致对象的创建数⽬剧增，进⽽导致 GC 压⼒增大。形成 “并发⼤－占⽤内存⼤－GC 缓慢－处理并发能⼒降低－并发更⼤”这样的恶性循环。 在这...",
+    "url": "https://segmentfault.com/a/1190000041878635",
+    "author": "风云",
+    "home_url": "https://segmentfault.com/u/fengyun_58aa59db14dcd",
     "votes": "1",
     "rank": 8
-  },
-  {
-    "title": "1.还不会部署高可用的kubernetes集群?看我手把手教你使用二进制部署v1.23.6的K8S集群实践(下)",
-    "description": "0x02 安装部署6.Kubernetes 集群安装部署1) 二进制软件包下载安装 （手动-此处以该实践为例）2) 部署配置 kube-apiserver3) 部署配置 kubectl4) 部署配置 kube-controller-manager5) 部署配置 kube-scheduler6) ...",
-    "url": "https://segmentfault.com/a/1190000041869038",
-    "author": "WeiyiGeek",
-    "home_url": "https://segmentfault.com/u/weiyigeek",
-    "votes": "1",
-    "rank": 9
-  },
-  {
-    "title": "docker-compose jenkins 安装",
-    "description": "一、docker搭建jenkins1.新建文件夹1.1新建 dokcer-compose.yml ，将下面内容添加进去 {代码...} 1.2 执行 dokcer-compose up -d 1.3 通过浏览器访问页面，按照提示进操作，选择默认安装2.安装插件gitee(按照需求...",
-    "url": "https://segmentfault.com/a/1190000041867448",
-    "author": "月",
-    "home_url": "https://segmentfault.com/u/yue_627372905af9e",
-    "votes": "1",
-    "rank": 10
-  },
-  {
-    "title": "史上最强代码自测方法，没有之一！",
-    "description": "特别说明：这个真的不是标题党，我写代码20+年，真心认为 go fuzzing 是我见过的最牛逼的代码自测方法。我在用 AC自动机 算法改进关键字过滤效率（提升~50%），改进 mapreduce 对 panic 的处理机制的时候，都通过...",
-    "url": "https://segmentfault.com/a/1190000041866251",
-    "author": "kevinwan",
-    "home_url": "https://segmentfault.com/u/kevinwan",
-    "votes": "3",
-    "rank": 11
-  },
-  {
-    "title": "紧急呼唤 00 后“整顿”职场？尚德机构员工被要求“连夜”安装监控 5 分钟抓拍一次不敢上厕所引热议",
-    "description": "最近，有关“00 后整顿职场”的段子在社交媒体上流传的比较火，一时间引来不少老职场人“感慨”不已，更有网友大呼“职场太需要 00 后来拯救了”“00后赶紧入职吧”“00 后赶快加入反内卷...”",
-    "url": "https://segmentfault.com/a/1190000041868809",
-    "author": "MissD",
-    "home_url": "https://segmentfault.com/u/d2ms1shh",
-    "votes": "1",
-    "rank": 12
-  },
-  {
-    "title": "前端语音转文字实践总结",
-    "description": "最近准备一个技术分享，看到以前做个一个语音转文字的功能，放在slides上落灰了，索性整理到这里和大家分享下。从技术选型，到方案设计，到实际落地，可以说把全链路都覆盖到了。语音转写流程图PC端浏览器如何录...",
-    "url": "https://segmentfault.com/a/1190000041866984",
-    "author": "趁你还年轻",
-    "home_url": "https://segmentfault.com/u/chennihuannianqing",
-    "votes": "1",
-    "rank": 13
   }
 ]

package/dist/sifou-monthly.json

@@ -5,7 +5,7 @@
     "url": "https://segmentfault.com/a/1190000041790801",
     "author": "joyqi",
     "home_url": "https://segmentfault.com/u/joyqi",
-    "votes": "64",
+    "votes": "71",
     "rank": 1
   },
   {
@@ -17,41 +17,14 @@
     "votes": "41",
     "rank": 2
   },
-  {
-    "title": "JS阻塞渲染，这么多年我理解错啦？",
-    "description": "大家好，我卡颂。在中文社区，这么多年一直流传一个说法：JS线程负责执行JS，GUI渲染线程负责渲染，这两者是互斥的，所以JS执行时会阻塞渲染。但随着Dev Tools使用的增多，逐渐开始怀疑以上说法。本文会以实际案...",
-    "url": "https://segmentfault.com/a/1190000041729574",
-    "author": "卡颂",
-    "home_url": "https://segmentfault.com/u/kasong",
-    "votes": "45",
-    "rank": 3
-  },
   {
     "title": "现代 CSS 解决方案：CSS 数学函数",
     "description": "在 CSS 中，其实存在各种各样的函数。具体分为：Transform functionsMath functionsFilter functionsColor functionsImage functionsCounter functionsFont functionsShape functionsReference functionsCSS grid...",
     "url": "https://segmentfault.com/a/1190000041826742",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "40",
-    "rank": 4
-  },
-  {
-    "title": "10个我经常逛的“小网站”，嘿嘿嘿！！！",
-    "description": "你的文件夹里有没有一些私人喜好的小网站？嘿嘿！！！必须有啊！分享10个我经常使用、能够提高工作效率、美化图片、绘制流程图的网站，你可能也用得上喔。",
-    "url": "https://segmentfault.com/a/1190000041728567",
-    "author": "前端胖头鱼",
-    "home_url": "https://segmentfault.com/u/116263",
-    "votes": "35",
-    "rank": 5
-  },
-  {
-    "title": "小程序鼻祖 —— 在国内逐渐消亡的 PWA 可以带给我们哪些启示？",
-    "description": "如果我说，我们要讨论一个 2016 年被提出、2017 年落地、至今在国内仍可算籍籍无名的概念，你是不是会觉得这没有什么意义？",
-    "url": "https://segmentfault.com/a/1190000041729491",
-    "author": "獨釣寒江雪",
-    "home_url": "https://segmentfault.com/u/king_hcj",
-    "votes": "29",
-    "rank": 6
+    "votes": "44",
+    "rank": 3
   },
   {
     "title": "浅谈支付系统开发基本流程",
@@ -59,8 +32,8 @@
     "url": "https://segmentfault.com/a/1190000041781215",
     "author": "CrazyCodes",
     "home_url": "https://segmentfault.com/u/crazycodes",
-    "votes": "26",
-    "rank": 7
+    "votes": "29",
+    "rank": 4
   },
   {
     "title": "CSS 中的简写到底有多少坑？以后不敢了...",
@@ -68,17 +41,8 @@
     "url": "https://segmentfault.com/a/1190000041804988",
     "author": "零一",
     "home_url": "https://segmentfault.com/u/zero2one",
-    "votes": "28",
-    "rank": 8
-  },
-  {
-    "title": "仅用一个HTML标签，实现带动画的抖音LOGO",
-    "description": "大家好，我是零一，今天给大家表演 仅用一个HTML标签实现带动画的抖音LOGO，涉及了很多知识点，欢迎交流讨论先上结果，最终实现效果如下：还原度应该还可以吧？抖音Logo结构想要用CSS来画抖音的Logo，前提要先了...",
-    "url": "https://segmentfault.com/a/1190000041754709",
-    "author": "零一",
-    "home_url": "https://segmentfault.com/u/zero2one",
-    "votes": "25",
-    "rank": 9
+    "votes": "29",
+    "rank": 5
   },
   {
     "title": "离谱的 CSS！从表盘刻度到艺术剪纸",
@@ -86,8 +50,8 @@
     "url": "https://segmentfault.com/a/1190000041791819",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "19",
-    "rank": 10
+    "votes": "21",
+    "rank": 6
   },
   {
     "title": "为什么前端不能没有监控系统？",
@@ -95,8 +59,26 @@
     "url": "https://segmentfault.com/a/1190000041833326",
     "author": "杨成功",
     "home_url": "https://segmentfault.com/u/ruidoc",
+    "votes": "24",
+    "rank": 7
+  },
+  {
+    "title": "仅用一个HTML标签，实现带动画的抖音LOGO",
+    "description": "大家好，我是零一，今天给大家表演 仅用一个HTML标签实现带动画的抖音LOGO，涉及了很多知识点，欢迎交流讨论先上结果，最终实现效果如下：还原度应该还可以吧？抖音Logo结构想要用CSS来画抖音的Logo，前提要先了...",
+    "url": "https://segmentfault.com/a/1190000041754709",
+    "author": "零一",
+    "home_url": "https://segmentfault.com/u/zero2one",
+    "votes": "25",
+    "rank": 8
+  },
+  {
+    "title": "4.9W 播放量的 TS 动画版进阶教程合集来了！",
+    "description": "阿宝哥精心准备的 《轻松学 TypeScript》 视频教程来咯，强烈推荐！通过形象生动的动画，让你轻松搞懂 TypeScript 的难点和核心知识点！目前已更新到第 11 期，其中 2 期的观看量均已破 1.3W，该合集的播放量目前...",
+    "url": "https://segmentfault.com/a/1190000041819579",
+    "author": "阿宝哥",
+    "home_url": "https://segmentfault.com/u/angular4",
     "votes": "22",
-    "rank": 11
+    "rank": 9
   },
   {
     "title": "SegmentFault 思否技术周刊 -- 不走寻常路的 CSS",
@@ -105,7 +87,7 @@
     "author": "Beverly",
     "home_url": "https://segmentfault.com/u/beverly0",
     "votes": "21",
-    "rank": 12
+    "rank": 10
   },
   {
     "title": "让交互更加生动！有意思的鼠标跟随 3D 旋转动效",
@@ -114,7 +96,7 @@
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
     "votes": "15",
-    "rank": 13
+    "rank": 11
   },
   {
     "title": "年年出妖事，一例由JSON解析导致的\"薛定谔BUG\"排查过程记录",
@@ -123,7 +105,7 @@
     "author": "铂赛东",
     "home_url": "https://segmentfault.com/u/bosaidong_5c495684bcf4b",
     "votes": "26",
-    "rank": 14
+    "rank": 12
   },
   {
     "title": "我做了一个在线白板！！！",
@@ -132,34 +114,7 @@
     "author": "街角小林",
     "home_url": "https://segmentfault.com/u/jiejiaoxiaolin",
     "votes": "14",
-    "rank": 15
-  },
-  {
-    "title": "4.9W 播放量的 TS 动画版进阶教程合集来了！",
-    "description": "阿宝哥精心准备的 《轻松学 TypeScript》 视频教程来咯，强烈推荐！通过形象生动的动画，让你轻松搞懂 TypeScript 的难点和核心知识点！目前已更新到第 11 期，其中 2 期的观看量均已破 1.3W，该合集的播放量目前...",
-    "url": "https://segmentfault.com/a/1190000041819579",
-    "author": "阿宝哥",
-    "home_url": "https://segmentfault.com/u/angular4",
-    "votes": "19",
-    "rank": 16
-  },
-  {
-    "title": "以B端平台设计，理解尼尔森10大可用性原则",
-    "description": "尼尔森是一名人机交互学博士，通过总结分析200多个可用性问题，1995年提出了尼尔森十大可用性原则，不论在Web设计还是移动端设计，掌握了这十项原则，都能有效提升产品用户体验度。今天就以实例跟大家聊聊尼尔森...",
-    "url": "https://segmentfault.com/a/1190000041725043",
-    "author": "JenK",
-    "home_url": "https://segmentfault.com/u/wangzc996",
-    "votes": "22",
-    "rank": 17
-  },
-  {
-    "title": "如何构建可控,可靠,可扩展的 PWA 应用",
-    "description": "PWA （Progressive Web App）指的是使用指定技术和标准模式来开发的 Web 应用，让 Web 应用具有原生应用的特性和体验。比如我们觉得本地应用使用便捷，响应速度更加快等。",
-    "url": "https://segmentfault.com/a/1190000041730906",
-    "author": "JerryC",
-    "home_url": "https://segmentfault.com/u/jerryc",
-    "votes": "14",
-    "rank": 18
+    "rank": 13
   },
   {
     "title": "React官方团队出手，补齐原生Hook短板",
@@ -167,8 +122,17 @@
     "url": "https://segmentfault.com/a/1190000041798153",
     "author": "卡颂",
     "home_url": "https://segmentfault.com/u/kasong",
-    "votes": "13",
-    "rank": 19
+    "votes": "14",
+    "rank": 14
+  },
+  {
+    "title": "SegmentFault 思否技术周刊 -- Go 语言通关攻略",
+    "description": "2022年3月15日，争议非常大但同时也备受期待的泛型终于伴随着Go1.18发布了。可是因为Go对泛型的支持时间跨度太大，有非常多的以“泛型”为关键字的文章都是在介绍Go1.18之前的旧泛型提案或者设计，而很多设计最终在...",
+    "url": "https://segmentfault.com/a/1190000041861125",
+    "author": "Beverly",
+    "home_url": "https://segmentfault.com/u/beverly0",
+    "votes": "15",
+    "rank": 15
   },
   {
     "title": "🔥 2022 前端性能优化最佳实践",
@@ -177,16 +141,16 @@
     "author": "佩奇烹饪家",
     "home_url": "https://segmentfault.com/u/cloudyttt",
     "votes": "14",
-    "rank": 20
+    "rank": 16
   },
   {
-    "title": "2022 PHP程序员修炼秘籍",
-    "description": "前言Hi , 各位大佬、小佬们，我是CrazyCodes，本来打算在年初奉上本篇，但因诸多原因延迟了以下是我往年的文章2021 PHP程序员修炼秘籍 [链接]2020 PHP程序员修炼秘籍 [链接]2019 PHP程序员修炼秘籍 [链接]计算机...",
-    "url": "https://segmentfault.com/a/1190000041734354",
-    "author": "CrazyCodes",
-    "home_url": "https://segmentfault.com/u/crazycodes",
-    "votes": "18",
-    "rank": 21
+    "title": "浅谈逻辑选择器 -- 父选择器它来了！",
+    "description": "在 CSS 选择器家族中，新增这样一类比较新的选择器 -- 逻辑选择器，目前共有 4 名成员：:is:where:not:has本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。:is 伪类选择器:is() CSS伪类函数...",
+    "url": "https://segmentfault.com/a/1190000041860587",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "14",
+    "rank": 17
   },
   {
     "title": "招聘季征文活动获奖名单公布，快来领奖~",
@@ -195,7 +159,16 @@
     "author": "SegmentFault思否",
     "home_url": "https://segmentfault.com/u/segmentfault",
     "votes": "10",
-    "rank": 22
+    "rank": 18
+  },
+  {
+    "title": "CSS 实现树状结构目录",
+    "description": "如果用到了 Ant Design 这样的框架，那可以直接用现成的组件。如果没有用到这样的框架呢？其实纯 CSS 也是可以搞定的，下面看看如何实现的，还有很多你可能不知道 CSS 小技巧哦~",
+    "url": "https://segmentfault.com/a/1190000041815758",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "11",
+    "rank": 19
   },
   {
     "title": "跨域问题很难吗？来！教你使用 Nginx 反向代理轻松解决",
@@ -204,7 +177,7 @@
     "author": "民工哥",
     "home_url": "https://segmentfault.com/u/jishuroad",
     "votes": "10",
-    "rank": 23
+    "rank": 20
   },
   {
     "title": "CSS 阴影进阶，实现更加的立体的阴影效果！",
@@ -213,7 +186,7 @@
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
     "votes": "12",
-    "rank": 24
+    "rank": 21
   },
   {
     "title": "这些CSS提效技巧，你需要知道！",
@@ -222,7 +195,16 @@
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
     "votes": "12",
-    "rank": 25
+    "rank": 22
+  },
+  {
+    "title": "如何做新人引导功能？",
+    "description": "节前碰到一个需求：「新人引导效果」针对第一次使用平台的用户进行主要功能引导。具体引导路径为：点击“新增按钮”，对弹出的内容进行解释，并引导用户填充表单，最后提交表单。",
+    "url": "https://segmentfault.com/a/1190000041789636",
+    "author": "linong",
+    "home_url": "https://segmentfault.com/u/linong",
+    "votes": "9",
+    "rank": 23
   },
   {
     "title": "提高前端人效率的工具、网站和书籍",
@@ -231,16 +213,7 @@
     "author": "playboy5566",
     "home_url": "https://segmentfault.com/u/playboy5566",
     "votes": "11",
-    "rank": 26
-  },
-  {
-    "title": "CSS 实现树状结构目录",
-    "description": "如果用到了 Ant Design 这样的框架，那可以直接用现成的组件。如果没有用到这样的框架呢？其实纯 CSS 也是可以搞定的，下面看看如何实现的，还有很多你可能不知道 CSS 小技巧哦~",
-    "url": "https://segmentfault.com/a/1190000041815758",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "10",
-    "rank": 27
+    "rank": 24
   },
   {
     "title": "实现聚焦效果",
@@ -249,7 +222,7 @@
     "author": "linong",
     "home_url": "https://segmentfault.com/u/linong",
     "votes": "13",
-    "rank": 28
+    "rank": 25
   },
   {
     "title": "使用 CSS 绘制带有动画效果的 React Logo",
@@ -258,7 +231,7 @@
     "author": "林小志",
     "home_url": "https://segmentfault.com/u/linxz",
     "votes": "7",
-    "rank": 29
+    "rank": 26
   },
   {
     "title": "5 分钟教你快速掌握 GitHub Actions 自动发布 Npm 包和网站",
@@ -267,6 +240,33 @@
     "author": "wscats",
     "home_url": "https://segmentfault.com/u/wscats",
     "votes": "4",
+    "rank": 27
+  },
+  {
+    "title": "没有框架怎么办？原生 CSS + JS 实现一个标签输入框",
+    "description": "欢迎关注我的公众号：前端侦探最近在项目中需要做一个标签输入框，还挺实用的，演示效果如下主要交互要求是这样的点击输入框可以输入内容按回车可以生成标签按退格键可以删除标签点击标签上的关闭按钮可以删除标...",
+    "url": "https://segmentfault.com/a/1190000041775900",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "9",
+    "rank": 28
+  },
+  {
+    "title": "初级程序员的SQL拾遗（增删改查）",
+    "description": "虽然平时开发中经常接触MySQL，但大多数的数据库操作都是通过ORM实现的（SpringDataJPA），自己并没有从底层接触SQL。再加上笔者非专业的身份，对于原生的SQL语句几乎完全不了解。本文是写给自己的，关于原生SQL...",
+    "url": "https://segmentfault.com/a/1190000041753021",
+    "author": "LYX6666",
+    "home_url": "https://segmentfault.com/u/liuyuxuan6666",
+    "votes": "10",
+    "rank": 29
+  },
+  {
+    "title": "Redis 内存满了怎么办？这样设置才正确！",
+    "description": "上回在《Redis 数据过期了会被立马删除么？》说到如果过期的数据太多，定时删除无法删除完全（每次删除完过期的 key 还是超过 25%），同时这些 key 再也不会被客户端请求，就无法走惰性删除，内存被打满会怎样？",
+    "url": "https://segmentfault.com/a/1190000041749980",
+    "author": "码哥字节",
+    "home_url": "https://segmentfault.com/u/magebyte",
+    "votes": "9",
     "rank": 30
   }
 ]