@wcj/github-rank 22.5.19 → 22.5.22

package/dist/sifou-daily.json

@@ -1,110 +1,38 @@
 [
   {
-    "title": "树莓派控制调速以及关于PWM的思考",
-    "description": "最近在寻思用树莓派控制电机速度，电机预估电压是24V，电流是10A，以这样的配置需要个无极调速控制器控制电机转速，看了下相关的控制器价格也不贵，十多块钱就能整一块。然后，相关的无极调速有提供PWM控制的。",
-    "url": "https://segmentfault.com/a/1190000041860546",
-    "author": "kumfo",
-    "home_url": "https://segmentfault.com/u/kumfo",
-    "votes": "4",
-    "rank": 1
-  },
-  {
-    "title": "跨境电商 2 大技术难题，到底该如何解决？",
-    "description": "据《2021中国跨境电商发展报告》显示，2019 至 2020 年间，欧美及亚太地区主要国家的电商整体零售额经历了 15% 以上的高速增长。这是因为 2020 年新冠疫情席卷全球后，消费者大规模转向线上消费。这是我国电商企...",
-    "url": "https://segmentfault.com/a/1190000041860634",
-    "author": "云叔_又拍云",
-    "home_url": "https://segmentfault.com/u/yunshu_blog",
-    "votes": "4",
-    "rank": 2
-  },
-  {
-    "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": "3",
-    "rank": 3
-  },
-  {
-    "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": "3",
-    "rank": 4
-  },
-  {
-    "title": "单点登录（SSO）",
-    "description": "单点登录：Single Sign On，简称SSO。用户只要登录一次，就可以访问所有相关信任应用的资源。企业里面用的会比较多，有很多内网平台，但是只要在一个系统登录就可以。",
-    "url": "https://segmentfault.com/a/1190000041859105",
-    "author": "OneStar",
-    "home_url": "https://segmentfault.com/u/funnycoderstar",
+    "title": "夏天来啦，用纯CSS实现水果解解馋吧",
+    "description": "今日是二十四节气的小满，是夏季的第二个节气。不知不觉地又是一年夏天来临了，面对烈日炎炎，夏天要吃的水果那是必不可少，今天就用CSS来给大家带来一个水果拼盘，提前给大家解解暑~",
+    "url": "https://segmentfault.com/a/1190000041878246",
+    "author": "南城大前端",
+    "home_url": "https://segmentfault.com/u/nanchengfe",
     "votes": "1",
-    "rank": 5
-  },
-  {
-    "title": "Java 15 新特性：隐藏类",
-    "description": "隐藏类，是一种不能被其他类直接使用的类。引入隐藏类的主要目的是给框架来使用，使得框架可以在运行时生成类，并通过反射间接使用它们。可能有点抽象，不要紧，下面我们通过一个例子来直观的认识它！",
-    "url": "https://segmentfault.com/a/1190000041864445",
-    "author": "程序猿DD",
-    "home_url": "https://segmentfault.com/u/coderdd",
-    "votes": "1",
-    "rank": 6
-  },
-  {
-    "title": "冴羽答读者问：如何快速找到一个聊得来的人生伴侣",
-    "description": "这背后可能有男女标准不一致的缘故，但就我接触的情况而言，我感觉更多人是，嘴上喊着找男女朋友，但身体却很诚实的待在家里，看到喜欢的类型，不敢搭讪，父母亲朋介绍的，却又总是拒绝，APP 找的对象感觉又各种...",
-    "url": "https://segmentfault.com/a/1190000041864109",
-    "author": "冴羽",
-    "home_url": "https://segmentfault.com/u/yayu",
-    "votes": "1",
-    "rank": 7
-  },
-  {
-    "title": "你会犯这些 Go 编码错误吗（二）？",
-    "description": "大家好，我是煎鱼。前一次给大家分享了《你会犯这些 Go 编码错误吗（一）？》，不知道大家吸收的怎么样，还有再踩到类似的坑吗？今天继续来第二弹，跟煎鱼上车。Go 常见错误6. 同名变量的作用域问题我们在编写程...",
-    "url": "https://segmentfault.com/a/1190000041861367",
-    "author": "煎鱼",
-    "home_url": "https://segmentfault.com/u/eddycjy",
-    "votes": "1",
-    "rank": 8
+    "rank": 1
   },
   {
-    "title": "PN532模块复制IC加密卡",
-    "description": "PN532是一个高度集成的非接触读写芯片，它包含80C51微控制器内核（这个8051用户是不能对它编程的，它是用来内置NFC的底层通信协议栈），集成了13.56MHz下的各种主动/被动式非接触通信方法和协议。",
-    "url": "https://segmentfault.com/a/1190000041863918",
-    "author": "流离幻影",
-    "home_url": "https://segmentfault.com/u/liulihuanying",
+    "title": "9张图轻松吃透Go内存管理单元",
+    "description": "想深入了解Go语言的内存管理实现，必然绕不开「Go内存管理单元mspan」，今天我们就通过几张图，层层深入并解开「Go内存管理单元mspan」的神秘面纱。",
+    "url": "https://segmentfault.com/a/1190000041877254",
+    "author": "TIGERB",
+    "home_url": "https://segmentfault.com/u/tigerb",
     "votes": "1",
-    "rank": 9
-  },
-  {
-    "title": "threejs 360全景工具开发心得",
-    "description": "最近做了一个720全景工具，有很多开发人员觉得全景图很简单，github上也有很多全景图的源码，但当实际使用的时候会发现有很多坑，还达不到真正意义上的商用级别，下面我会把我们开发这个项目遇到的一些坑和解决方...",
-    "url": "https://segmentfault.com/a/1190000041862728",
-    "author": "馒头",
-    "home_url": "https://segmentfault.com/u/mtsee",
-    "votes": "3",
-    "rank": 10
+    "rank": 2
   },
   {
-    "title": "你说写代码，最常用的3个设计模式是啥？",
-    "description": "作者：小傅哥博客：[链接]沉淀、分享、成长，让自己和他人都能有所收获！😄一、前言：望闻问切🌺 哈喽，大家好，我是技术UP主小傅哥！ 哈哈哈，到今天为止，差不多用了3个月里周末和假期的时间，小傅哥在B站的第一...",
-    "url": "https://segmentfault.com/a/1190000041860414",
-    "author": "小傅哥",
-    "home_url": "https://segmentfault.com/u/fuzhengwei",
+    "title": "Go内存架构，一个有趣的问题",
+    "description": "在学习Go语言内存管理部分过程中，发现了一个很有意思的问题，今天就借助这篇文章：1.把这个问题也抛给大家，建议大家看见这个问题后，可以先自己思考一番🤔之后再读下文。2.进一步强化大家对Go内存架构的理解开始...",
+    "url": "https://segmentfault.com/a/1190000041877230",
+    "author": "TIGERB",
+    "home_url": "https://segmentfault.com/u/tigerb",
     "votes": "1",
-    "rank": 11
+    "rank": 3
   },
   {
-    "title": "字节跳动的多平台绽放秘诀 | Flutter 开发者故事",
-    "description": "字节跳动旗下运营着一系列成功的用户产品、企业应用以及服务，覆盖信息、教育、娱乐等不同领域。随着产品阵容的不断发展，传统的原生双平台开发已经难以满足团队更高效、更灵活、更精美，以及更多样的产品研发需...",
-    "url": "https://segmentfault.com/a/1190000041859989",
-    "author": "Flutter",
-    "home_url": "https://segmentfault.com/u/flutter",
+    "title": "mac 上删除 .DS_store ，且防止再次生成",
+    "description": "本方法也是适应于 Mac M1 版本描述 {代码...} 命令删除 .DS_store 文件 {代码...} 防止 .DS_store 文件再次产生 {代码...} 删除命令（在固定的文件中删除） {代码...} Git仓库管理忽略 DS_Store 文件将 . DS_Stor...",
+    "url": "https://segmentfault.com/a/1190000041876247",
+    "author": "Regigigas",
+    "home_url": "https://segmentfault.com/u/regigigas",
     "votes": "1",
-    "rank": 12
+    "rank": 4
   }
 ]

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": "68",
     "rank": 1
   },
   {
@@ -17,50 +17,23 @@
     "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": "36",
-    "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": "Amazing！巧用 CSS 视差实现酷炫交互动效",
-    "description": "本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。关于使用 CSS 实现滚动视差效果，在之前有一篇文章详细描述过具体方案 - CSS 实现视差效果，感兴趣的同学可以...",
-    "url": "https://segmentfault.com/a/1190000041718060",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "27",
-    "rank": 6
+    "votes": "43",
+    "rank": 3
   },
   {
-    "title": "小程序鼻祖 —— 在国内逐渐消亡的 PWA 可以带给我们哪些启示？",
-    "description": "如果我说，我们要讨论一个 2016 年被提出、2017 年落地、至今在国内仍可算籍籍无名的概念，你是不是会觉得这没有什么意义？",
-    "url": "https://segmentfault.com/a/1190000041729491",
-    "author": "獨釣寒江雪",
-    "home_url": "https://segmentfault.com/u/king_hcj",
+    "title": "浅谈支付系统开发基本流程",
+    "description": "前言Hi，各位好久不见，我是CrazyCodes，今天我们来聊聊支付系统。支付系统是每个系统都必备的模块之一，也是众多模块中最核心的功能，如果支付出现问题，那么意味着会直接影响到产品收益，事故严重程度高。本篇...",
+    "url": "https://segmentfault.com/a/1190000041781215",
+    "author": "CrazyCodes",
+    "home_url": "https://segmentfault.com/u/crazycodes",
     "votes": "28",
-    "rank": 7
+    "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": "浅谈支付系统开发基本流程",
-    "description": "前言Hi，各位好久不见，我是CrazyCodes，今天我们来聊聊支付系统。支付系统是每个系统都必备的模块之一，也是众多模块中最核心的功能，如果支付出现问题，那么意味着会直接影响到产品收益，事故严重程度高。本篇...",
-    "url": "https://segmentfault.com/a/1190000041781215",
-    "author": "CrazyCodes",
-    "home_url": "https://segmentfault.com/u/crazycodes",
-    "votes": "25",
-    "rank": 9
+    "votes": "29",
+    "rank": 5
   },
   {
     "title": "仅用一个HTML标签，实现带动画的抖音LOGO",
@@ -86,8 +50,8 @@
     "url": "https://segmentfault.com/a/1190000041754709",
     "author": "零一",
     "home_url": "https://segmentfault.com/u/zero2one",
-    "votes": "24",
-    "rank": 10
+    "votes": "25",
+    "rank": 6
   },
   {
     "title": "离谱的 CSS！从表盘刻度到艺术剪纸",
@@ -96,7 +60,16 @@
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
     "votes": "19",
-    "rank": 11
+    "rank": 7
+  },
+  {
+    "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": "21",
+    "rank": 8
   },
   {
     "title": "为什么前端不能没有监控系统？",
@@ -105,7 +78,7 @@
     "author": "杨成功",
     "home_url": "https://segmentfault.com/u/ruidoc",
     "votes": "22",
-    "rank": 12
+    "rank": 9
   },
   {
     "title": "SegmentFault 思否技术周刊 -- 不走寻常路的 CSS",
@@ -114,16 +87,7 @@
     "author": "Beverly",
     "home_url": "https://segmentfault.com/u/beverly0",
     "votes": "21",
-    "rank": 13
-  },
-  {
-    "title": "CSS 实现切角效果",
-    "description": "欢迎关注我的公众号：前端侦探最近项目中看到这样的一个切角效果，如下所示就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？一、自适应方式这种布局一般有两种自适应方...",
-    "url": "https://segmentfault.com/a/1190000041715976",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "16",
-    "rank": 14
+    "rank": 10
   },
   {
     "title": "让交互更加生动！有意思的鼠标跟随 3D 旋转动效",
@@ -131,8 +95,8 @@
     "url": "https://segmentfault.com/a/1190000041761117",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "14",
-    "rank": 15
+    "votes": "15",
+    "rank": 11
   },
   {
     "title": "年年出妖事，一例由JSON解析导致的\"薛定谔BUG\"排查过程记录",
@@ -141,7 +105,7 @@
     "author": "铂赛东",
     "home_url": "https://segmentfault.com/u/bosaidong_5c495684bcf4b",
     "votes": "26",
-    "rank": 16
+    "rank": 12
   },
   {
     "title": "我做了一个在线白板！！！",
@@ -150,34 +114,16 @@
     "author": "街角小林",
     "home_url": "https://segmentfault.com/u/jiejiaoxiaolin",
     "votes": "14",
-    "rank": 17
-  },
-  {
-    "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": 18
-  },
-  {
-    "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": 19
+    "rank": 13
   },
   {
-    "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": 20
+    "title": "React官方团队出手，补齐原生Hook短板",
+    "description": "大家好，我卡颂。我们知道，Hooks使用时存在所谓的闭包陷阱，考虑如下代码： {代码...} 我们期望点击后sendMessage能传递text的最新值。然而实际上，由于回调函数被useCallback缓存，形成闭包，所以点击的效果始...",
+    "url": "https://segmentfault.com/a/1190000041798153",
+    "author": "卡颂",
+    "home_url": "https://segmentfault.com/u/kasong",
+    "votes": "13",
+    "rank": 14
   },
   {
     "title": "🔥 2022 前端性能优化最佳实践",
@@ -186,34 +132,16 @@
     "author": "佩奇烹饪家",
     "home_url": "https://segmentfault.com/u/cloudyttt",
     "votes": "14",
-    "rank": 21
-  },
-  {
-    "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": 22
-  },
-  {
-    "title": "精读《不再需要 JS 做的 5 件事》",
-    "description": "关注 JS 太久，会养成任何功能都用 JS 实现的习惯，而忘记了 HTML 与 CSS 也具备一定的功能特征。其实有些功能用 JS 实现吃力不讨好，我们要综合使用技术工具，而不是只依赖 JS。",
-    "url": "https://segmentfault.com/a/1190000041717742",
-    "author": "黄子毅",
-    "home_url": "https://segmentfault.com/u/aoyangyudakong",
-    "votes": "11",
-    "rank": 23
+    "rank": 15
   },
   {
-    "title": "React官方团队出手，补齐原生Hook短板",
-    "description": "大家好，我卡颂。我们知道，Hooks使用时存在所谓的闭包陷阱，考虑如下代码： {代码...} 我们期望点击后sendMessage能传递text的最新值。然而实际上，由于回调函数被useCallback缓存，形成闭包，所以点击的效果始...",
-    "url": "https://segmentfault.com/a/1190000041798153",
-    "author": "卡颂",
-    "home_url": "https://segmentfault.com/u/kasong",
+    "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": "12",
-    "rank": 24
+    "rank": 16
   },
   {
     "title": "招聘季征文活动获奖名单公布，快来领奖~",
@@ -222,16 +150,16 @@
     "author": "SegmentFault思否",
     "home_url": "https://segmentfault.com/u/segmentfault",
     "votes": "10",
-    "rank": 25
+    "rank": 17
   },
   {
-    "title": "从源码里的一个注释，我追溯到了12年前，有点意思。",
-    "description": "你好呀，我是歪歪。那天我正在用键盘疯狂的输出：突然微信弹出一个消息，是一个读者发给我的。我点开一看：啊，这熟悉的味道，一看就是 HashMap，八股文梦开始的地方啊。但是他问出的问题，似乎又不是一个属于 Ha...",
-    "url": "https://segmentfault.com/a/1190000041718955",
-    "author": "why技术",
-    "home_url": "https://segmentfault.com/u/whyjishu",
-    "votes": "17",
-    "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": "11",
+    "rank": 18
   },
   {
     "title": "跨域问题很难吗？来！教你使用 Nginx 反向代理轻松解决",
@@ -240,7 +168,7 @@
     "author": "民工哥",
     "home_url": "https://segmentfault.com/u/jishuroad",
     "votes": "10",
-    "rank": 27
+    "rank": 19
   },
   {
     "title": "CSS 阴影进阶，实现更加的立体的阴影效果！",
@@ -248,8 +176,8 @@
     "url": "https://segmentfault.com/a/1190000041771296",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "11",
-    "rank": 28
+    "votes": "12",
+    "rank": 20
   },
   {
     "title": "这些CSS提效技巧，你需要知道！",
@@ -258,7 +186,7 @@
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
     "votes": "12",
-    "rank": 29
+    "rank": 21
   },
   {
     "title": "提高前端人效率的工具、网站和书籍",
@@ -267,6 +195,78 @@
     "author": "playboy5566",
     "home_url": "https://segmentfault.com/u/playboy5566",
     "votes": "11",
+    "rank": 22
+  },
+  {
+    "title": "如何做新人引导功能？",
+    "description": "节前碰到一个需求：「新人引导效果」针对第一次使用平台的用户进行主要功能引导。具体引导路径为：点击“新增按钮”，对弹出的内容进行解释，并引导用户填充表单，最后提交表单。",
+    "url": "https://segmentfault.com/a/1190000041789636",
+    "author": "linong",
+    "home_url": "https://segmentfault.com/u/linong",
+    "votes": "9",
+    "rank": 23
+  },
+  {
+    "title": "实现聚焦效果",
+    "description": "这是之前朋友问我的一个功能：他觉得看网页有时候注意力会被转移，希望可以有个蒙层帮助他集中注意力反手我就用 box-shadow 把功能写了出来。 {代码...} 因为 z-index 无法超过非 static 层级导致的 bug在我测试...",
+    "url": "https://segmentfault.com/a/1190000041804137",
+    "author": "linong",
+    "home_url": "https://segmentfault.com/u/linong",
+    "votes": "13",
+    "rank": 24
+  },
+  {
+    "title": "使用 CSS 绘制带有动画效果的 React Logo",
+    "description": "原本想着是不是写“用一个 div 绘制 React Logo”，最后想想，就算用一个 div 实现了，那么对于后面可能要添加的效果就会有很大的局限性，于是就放弃了这样的标题。至于 HTML 结构中，div 的使用也不是很多，就下面...",
+    "url": "https://segmentfault.com/a/1190000041767393",
+    "author": "林小志",
+    "home_url": "https://segmentfault.com/u/linxz",
+    "votes": "7",
+    "rank": 25
+  },
+  {
+    "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": "12",
+    "rank": 26
+  },
+  {
+    "title": "5 分钟教你快速掌握 GitHub Actions 自动发布 Npm 包和网站",
+    "description": "自从 GitHub 宣布 GitHub Actions 在平台上对所有开发人员和存储库可用以来，GitHub Actions 越来越受欢迎。很多第三方平台在生态系统中有速度等限制，将进一步推动开发人员将他们的软件自动化迁移到 GitHub Acti...",
+    "url": "https://segmentfault.com/a/1190000041753907",
+    "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
   }
 ]