@wcj/github-rank 22.6.21 → 22.6.24

package/web/data/sifou-daily.json

@@ -1,74 +1,110 @@
 [
   {
-    "title": "CSS实现可拉伸调整尺寸的分栏布局",
-    "description": "很多页面布局，特别是那种工具类的、比如编辑器、可视化平台等，为了充分的利用屏幕空间，都会提供拖拽调节各个分栏尺寸的功能，比如像 vscode",
-    "url": "https://segmentfault.com/a/1190000042006775",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "12",
+    "title": "蜻蜓低代码安全工具平台开发之路",
+    "description": "蜻蜓内测版在五一前夕上线了，很快就积累的很多工具，用户数也逐渐增多，但我也逐渐发现这种堆积式的平台没太多技术含量；我在想是否可以做一些有挑战的事情，正好这几年低代码平台比较火热，我在想是否能在安全...",
+    "url": "https://segmentfault.com/a/1190000042025141",
+    "author": "汤青松",
+    "home_url": "https://segmentfault.com/u/songboy",
+    "votes": "1",
     "rank": 1
   },
   {
-    "title": "Go 内联优化能让程序快多少？",
-    "description": "最近周末在家学习时看到 @Dave Cheney 的《Inlining optimisations in Go》还是有不少养分的，翻译分享给大家，有所修整、删减。",
-    "url": "https://segmentfault.com/a/1190000042007938",
-    "author": "煎鱼",
-    "home_url": "https://segmentfault.com/u/eddycjy",
-    "votes": "1",
+    "title": "基于Vite+React构建在线Excel",
+    "description": "Vite是随着Vue3一起发布的一款新型前端构建工具，能够显著的提升前端开发体验，它主要由两部分组成：（1）一个开发服务器，它基于*原生ES模块提供了丰富的内建功能，如速度快到惊人的 模块热更新（*HMR）。（2）...",
+    "url": "https://segmentfault.com/a/1190000042024859",
+    "author": "葡萄城技术团队",
+    "home_url": "https://segmentfault.com/u/grapecity",
+    "votes": "3",
     "rank": 2
   },
   {
-    "title": "开源工具 SAP UI5 Tools 介绍",
-    "description": "大多数 UI5 工具模块提供了 JavaScript api，供其他 Node.js项目直接使用。这允许开发人员通过编程的方式，依赖于UI5工具来实现特定于UI5的构建功能和项目处理，同时创建属于自己的工具来完美匹配项目的需求。",
-    "url": "https://segmentfault.com/a/1190000042008391",
-    "author": "JerryWang_汪子熙",
-    "home_url": "https://segmentfault.com/u/jerrywangsap",
+    "title": "Github AI 编程工具 Copilot 正式上线，“白嫖”时代结束，67 元/月！",
+    "description": "据官方介绍，GitHub 副产品 AI 编码辅助工具 Copilot 最早于 2021 年 6 月在技术预览中发布，旨在帮助软件开发者在 Visual Studio、Visual Studio code、Neovim 和 JetBrains IDE 等开发环境中编写代码时通过自动...",
+    "url": "https://segmentfault.com/a/1190000042024352",
+    "author": "MissD",
+    "home_url": "https://segmentfault.com/u/d2ms1shh",
     "votes": "1",
     "rank": 3
   },
   {
-    "title": "react入门练习2",
-    "description": "主要内容：游戏难度分成三个等级，改变变量level的具体数值，传给gameA和gameB两个页面。重点：1.在src文件夹中创建一个新的文件夹models，使用useModel，创建一个全局变量level，所有页面均可以使用。2.按钮点击...",
-    "url": "https://segmentfault.com/a/1190000042007692",
-    "author": "Guanine",
-    "home_url": "https://segmentfault.com/u/guanine_625792bcb3373",
+    "title": "面试官问我一条update语句加了多少锁？我总结了全套八股文",
+    "description": "迎面走来了你的面试官，身穿格子衫，挺着啤酒肚，发际线严重后移的中年男子。手拿泡着枸杞的保温杯，胳膊夹着MacBook，MacBook上还贴着公司标语：“我爱加班”。",
+    "url": "https://segmentfault.com/a/1190000042027893",
+    "author": "一灯架构",
+    "home_url": "https://segmentfault.com/u/huazhen_6295e0b518e5c",
     "votes": "1",
     "rank": 4
   },
   {
-    "title": "Vue3 Teleport，这个是真的好用！",
-    "description": "点赞再看，微信搜索【大迁世界】,B站关注【前端小智】这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub [链接] 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。",
-    "url": "https://segmentfault.com/a/1190000042006317",
-    "author": "前端小智",
-    "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "2",
+    "title": "脚本之美│VBS 入门交互实战",
+    "description": "VBS 是一种 Windows 脚本语言，全称是 Microsoft Visual Basic Script Editon，微软公司可视化 BASIC 脚本版",
+    "url": "https://segmentfault.com/a/1190000042027403",
+    "author": "极客飞兔",
+    "home_url": "https://segmentfault.com/u/autofelix",
+    "votes": "1",
     "rank": 5
   },
   {
-    "title": "Vue3如何通过ref获取真实DOM元素",
-    "description": "在Vue2中我们可以在<template>中的元素标签使用ref属性（类似于原生HTML标签的id属性）在<script>标签通过this.$refs拿到真实DOM标签的元素。",
-    "url": "https://segmentfault.com/a/1190000042007970",
-    "author": "韩xiao方MY",
-    "home_url": "https://segmentfault.com/u/jiaolvdekaixinguo",
-    "votes": "1",
+    "title": "元宇宙 3D 开荒场 - 探味奇遇记",
+    "description": "这次尝鲜的业务伙伴是食品部门，最终落地项目是“探味奇遇记”：用户使用左边“joystick”操作 IP 人物，前往自己感兴趣的美食馆、调整当前视角，以 3D 的形式虚拟线下场馆购物体验。食品的数字人形象的第一视角在“元...",
+    "url": "https://segmentfault.com/a/1190000042027240",
+    "author": "凹凸实验室",
+    "home_url": "https://segmentfault.com/u/o2team",
+    "votes": "2",
     "rank": 6
   },
   {
-    "title": "走过路过不要错过薅羊毛的好机会！想冲HarmonyOS周边的看过来！规则简单机会大！",
-    "description": "想冲HarmonyOS周边的看过来！规则简单机会大！ 刚发现了一个新活动，重点是礼品多门槛低机会大！先看看奖品有没有你想要的： 足足有50份奖品！冲个四等奖还能白piao一个实用的T恤啊！！！而且这个是按点赞进行排...",
-    "url": "https://segmentfault.com/a/1190000042009625",
-    "author": "不会写代码的小白",
-    "home_url": "https://segmentfault.com/u/z_61ea63e052dfb",
-    "votes": "3",
+    "title": "如果后端API一次返回10万条数据，前端应该如何优化",
+    "description": "创建服务器为了方便后续测试，我们可以使用node创建一个简单的服务器。服务器端代码： {代码...} 我们可以使用 node 或 nodemon 启动服务器： {代码...} 创建前端模板页面然后我们的前端由一个 HTML 文件和一个 J...",
+    "url": "https://segmentfault.com/a/1190000042025507",
+    "author": "墨城",
+    "home_url": "https://segmentfault.com/u/xiaomogu_5f2124ad3ad42",
+    "votes": "1",
     "rank": 7
   },
   {
-    "title": "微软更新 Microsoft Store 策略：重点“打击”欺诈付费版的非官方开源程序",
-    "description": "近日，微软更新了其针对 Microsoft Store（微软应用商店）的策略 7.16 版。该版本策略的一个关键亮点就是 —— 打击了那些重新包装免费开源软件并为其贴上价格标签的非官方开发人员。",
-    "url": "https://segmentfault.com/a/1190000042007751",
-    "author": "MissD",
-    "home_url": "https://segmentfault.com/u/d2ms1shh",
+    "title": "js实现动态数值的colorscale",
+    "description": "第一步：首先模拟等长单位的刻度。设刻度尺总长度为100px，那么单位长度为20px，总共5个格子。通过使用伪类的方式给刻度尺添加刻度线，最后给单位刻度添加数值就完成了第一步刻度尺。（片段代码如下）",
+    "url": "https://segmentfault.com/a/1190000042025374",
+    "author": "可可乐滋滋",
+    "home_url": "https://segmentfault.com/u/kekelezizi",
     "votes": "1",
     "rank": 8
+  },
+  {
+    "title": "Vue基础点梳理",
+    "description": "1、vue指令-v-model修饰符语法:v-model.修饰符=\"vue数据变量\" {代码...} 2、计算属性计算属性有缓存，提高渲染性能。如果在页面上需要用到 对现有的数据进行加工得到新数据，则时要使用计算属性。写法： {代码......",
+    "url": "https://segmentfault.com/a/1190000042025080",
+    "author": "墨城",
+    "home_url": "https://segmentfault.com/u/xiaomogu_5f2124ad3ad42",
+    "votes": "1",
+    "rank": 9
+  },
+  {
+    "title": "js判断两个对象是否相等",
+    "description": "1.首先要先有两个对象，如下举例： {代码...} 2.判断两个对象是否相等： {代码...} 3.做出相应的操作： {代码...}",
+    "url": "https://segmentfault.com/a/1190000042024769",
+    "author": "墨城",
+    "home_url": "https://segmentfault.com/u/xiaomogu_5f2124ad3ad42",
+    "votes": "1",
+    "rank": 10
+  },
+  {
+    "title": "折叠面板组件的设计与实现",
+    "description": "NutUI，大家应该不陌生吧 [鬼脸]，前端开发的同学肯定是有些了解的。NutUI 是一个京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用。",
+    "url": "https://segmentfault.com/a/1190000042023745",
+    "author": "京东设计中心JDC",
+    "home_url": "https://segmentfault.com/u/jingdongshejizhongxin",
+    "votes": "2",
+    "rank": 11
+  },
+  {
+    "title": "ECMAScript 提案:.findLast()和.findLastIndex()从尾到头搜索数组",
+    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
+    "url": "https://segmentfault.com/a/1190000042023094",
+    "author": "前端小智",
+    "home_url": "https://segmentfault.com/u/minnanitkong",
+    "votes": "1",
+    "rank": 12
   }
 ]

package/web/data/sifou-monthly.json

@@ -14,27 +14,9 @@
     "url": "https://segmentfault.com/a/1190000041947673",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "38",
+    "votes": "40",
     "rank": 2
   },
-  {
-    "title": "妙啊！动画还可以这样控制？",
-    "description": "今天，有在群里看到这样一个问题：有一个动画，一开始静止处于第一帧，只在用户 hover 的时候运行动画，在运行一次后停止，并且停留在最后一帧，使用 CSS 可以完成么？",
-    "url": "https://segmentfault.com/a/1190000041887820",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "31",
-    "rank": 3
-  },
-  {
-    "title": "如何实现一个能精确同步滚动的Markdown编辑器",
-    "description": "随着Markdown越来越流行，Markdown编辑器也越来越多，除去所见即所得的实时预览编辑器外，通常其他Markdown编辑器都会采用源代码和预览双栏显示的方式，就像这样：",
-    "url": "https://segmentfault.com/a/1190000041881142",
-    "author": "街角小林",
-    "home_url": "https://segmentfault.com/u/jiejiaoxiaolin",
-    "votes": "28",
-    "rank": 4
-  },
   {
     "title": "归零进一 | SegmentFault 思否社区 10 周年社区福利来了！",
     "description": "作为社区的创始人，在这个 10 年里，我们也经历了很多温暖的时刻。众多的开发者与社区一同成长，他们从初出茅庐的菜鸟成长为独当一面的大牛，然后又将自己的知识回馈给社区，帮助更多的人。这是一个属于大家的社...",
@@ -42,7 +24,7 @@
     "author": "SegmentFault思否",
     "home_url": "https://segmentfault.com/u/segmentfault",
     "votes": "30",
-    "rank": 5
+    "rank": 3
   },
   {
     "title": "巧妙使用Vue.extend继承组件实现el-table双击可编辑（不使用v-if和v-else）",
@@ -50,26 +32,17 @@
     "url": "https://segmentfault.com/a/1190000041974425",
     "author": "水冗水孚",
     "home_url": "https://segmentfault.com/u/shuirongshui",
-    "votes": "23",
-    "rank": 6
-  },
-  {
-    "title": "前端监控的搭建步骤，别再一头雾水了！",
-    "description": "在动手实现之前，首先脑子里要有一个整体脉络，明白搭建前端监控具体的流程步骤有哪些。因为前端监控系统实际上是一个完整的全栈项目，而并不仅仅是前端，甚至主要的实现都是围绕在 数据方面 的。",
-    "url": "https://segmentfault.com/a/1190000041879217",
-    "author": "杨成功",
-    "home_url": "https://segmentfault.com/u/ruidoc",
     "votes": "25",
-    "rank": 7
+    "rank": 4
   },
   {
-    "title": "关于代码评审(CodeReview)那些不得不说的事儿",
-    "description": "在一个成熟的团队中，CodeReview是整个研发流程中不可或缺的一步，而那些即将走向成熟的团队可能对CodeReview有很多的误解和问题，也不清楚CodeReview该如何去做，本文笔者将结合自己的经验和知识，...",
-    "url": "https://segmentfault.com/a/1190000041885333",
-    "author": "xindoo",
-    "home_url": "https://segmentfault.com/u/xindoo",
-    "votes": "22",
-    "rank": 8
+    "title": "CSS 实现头像名称首字符自动占位",
+    "description": "在 web 中经常会见到这样的设计，很多 UI 组件库也称之为 Avator 组件，也就是头像的意思，当头像未设置时，会显示名称的首字符充当默认头像，如下所示：",
+    "url": "https://segmentfault.com/a/1190000041940807",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "24",
+    "rank": 5
   },
   {
     "title": "搭建前端监控，如何采集异常数据？",
@@ -78,25 +51,7 @@
     "author": "杨成功",
     "home_url": "https://segmentfault.com/u/ruidoc",
     "votes": "19",
-    "rank": 9
-  },
-  {
-    "title": "CSS 实现头像名称首字符自动占位",
-    "description": "在 web 中经常会见到这样的设计，很多 UI 组件库也称之为 Avator 组件，也就是头像的意思，当头像未设置时，会显示名称的首字符充当默认头像，如下所示：",
-    "url": "https://segmentfault.com/a/1190000041940807",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "23",
-    "rank": 10
-  },
-  {
-    "title": "CSS 穿墙术！太强了",
-    "description": "大家好，我是零一，今天给大家分享 CSS 中一个神奇的属性：filter，为什么说它神奇？正如我标题所说的，我突然发现它能帮我们轻松实现 穿墙特效，类似这种的👇",
-    "url": "https://segmentfault.com/a/1190000041887095",
-    "author": "零一",
-    "home_url": "https://segmentfault.com/u/zero2one",
-    "votes": "23",
-    "rank": 11
+    "rank": 6
   },
   {
     "title": "SegmentFault 思否技术周刊 -- JavaScript 的那些事",
@@ -105,7 +60,25 @@
     "author": "Beverly",
     "home_url": "https://segmentfault.com/u/beverly0",
     "votes": "19",
-    "rank": 12
+    "rank": 7
+  },
+  {
+    "title": "CSS实现可拉伸调整尺寸的分栏布局",
+    "description": "很多页面布局，特别是那种工具类的、比如编辑器、可视化平台等，为了充分的利用屏幕空间，都会提供拖拽调节各个分栏尺寸的功能，比如像 vscode",
+    "url": "https://segmentfault.com/a/1190000042006775",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "23",
+    "rank": 8
+  },
+  {
+    "title": "掘地三尺搞定 Redis 与 MySQL 数据一致性问题",
+    "description": "Redis 拥有高性能的数据读写功能，被我们广泛用在缓存场景，一是能提高业务系统的性能，二是为数据库抵挡了高并发的流量请求，点我 -> 解密 Redis 为什么这么快的秘密。把 Redis 作为缓存组件，需要防止出现以...",
+    "url": "https://segmentfault.com/a/1190000041998615",
+    "author": "码哥字节",
+    "home_url": "https://segmentfault.com/u/magebyte",
+    "votes": "19",
+    "rank": 9
   },
   {
     "title": "十年老友记 | @张京：我编程了三十年，编程就是我的符号",
@@ -114,7 +87,7 @@
     "author": "思否编辑部",
     "home_url": "https://segmentfault.com/u/writers",
     "votes": "16",
-    "rank": 13
+    "rank": 10
   },
   {
     "title": "让拖拽更加人性化？如何自定义dragover样式",
@@ -123,7 +96,7 @@
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "12",
-    "rank": 14
+    "rank": 11
   },
   {
     "title": "锁定项目 Node 版本和包管理器",
@@ -132,7 +105,16 @@
     "author": "亖混子",
     "home_url": "https://segmentfault.com/u/1023",
     "votes": "17",
-    "rank": 15
+    "rank": 12
+  },
+  {
+    "title": "这个队列的思路是真的好，现在它是我简历上的亮点了。",
+    "description": "你好呀，我是歪歪。前几天在一个开源项目的 github 里面看到这样的一个 pr：光是看这个名字，里面有个 MemorySafe，我就有点陷进去了。我先给你看看这个东西：这个肯定很眼熟吧？我是从阿里巴巴开发规范中截的图...",
+    "url": "https://segmentfault.com/a/1190000041943100",
+    "author": "why技术",
+    "home_url": "https://segmentfault.com/u/whyjishu",
+    "votes": "12",
+    "rank": 13
   },
   {
     "title": "React Suspense 尝鲜,处理前后端IO异步操作",
@@ -141,7 +123,16 @@
     "author": "葡萄城技术团队",
     "home_url": "https://segmentfault.com/u/grapecity",
     "votes": "7",
-    "rank": 16
+    "rank": 14
+  },
+  {
+    "title": "干货合集│最好用的 python 库都在这",
+    "description": "一、分词 - jieba优秀的中文分词库，依靠中文词库，利用词库确定汉子之间关联的概率，形成分词结果 {代码...} 二、词云库 - wordcloud对数据中出现频率较高的 关键词 生成的一幅图像，予以视觉上的突出 {代码...}...",
+    "url": "https://segmentfault.com/a/1190000041962217",
+    "author": "极客飞兔",
+    "home_url": "https://segmentfault.com/u/autofelix",
+    "votes": "10",
+    "rank": 15
   },
   {
     "title": "JS实现将文本或JSON内容下载到文件中",
@@ -150,7 +141,7 @@
     "author": "十方",
     "home_url": "https://segmentfault.com/u/shifang_5b2b70d160932",
     "votes": "10",
-    "rank": 17
+    "rank": 16
   },
   {
     "title": "SegmentFault 思否技术周刊 -- 进击的 React",
@@ -159,14 +150,23 @@
     "author": "Beverly",
     "home_url": "https://segmentfault.com/u/beverly0",
     "votes": "11",
+    "rank": 17
+  },
+  {
+    "title": "亚马逊云科技：“云+数+AI”助力企业数智化转型",
+    "description": "一季度营业收入同比增长37%到达184.4亿美元；营业利润同比增长57%为65.2亿美元；利润率35.3%，比上季度的29.8和去年同期30.8%都高出一截。",
+    "url": "https://segmentfault.com/a/1190000042010573",
+    "author": "思否编辑部",
+    "home_url": "https://segmentfault.com/u/writers",
+    "votes": "11",
     "rank": 18
   },
   {
-    "title": "干货合集│最好用的 python 库都在这",
-    "description": "一、分词 - jieba优秀的中文分词库，依靠中文词库，利用词库确定汉子之间关联的概率，形成分词结果 {代码...} 二、词云库 - wordcloud对数据中出现频率较高的 关键词 生成的一幅图像，予以视觉上的突出 {代码...}...",
-    "url": "https://segmentfault.com/a/1190000041962217",
-    "author": "极客飞兔",
-    "home_url": "https://segmentfault.com/u/autofelix",
+    "title": "Redis都有哪些使用场景",
+    "description": "Redis作为一种内存型的非关系型的数据库，不管在互联网大厂，小厂，大项目和小项目中，几乎都会被使用。为什么Redis会受到如此青睐呢？关于这个问题，可能很多的程序员只是看着别人用而用，缺乏对Redis一个全面的...",
+    "url": "https://segmentfault.com/a/1190000041985101",
+    "author": "7small7",
+    "home_url": "https://segmentfault.com/u/7small7",
     "votes": "8",
     "rank": 19
   },
@@ -180,12 +180,12 @@
     "rank": 20
   },
   {
-    "title": "这个队列的思路是真的好，现在它是我简历上的亮点了。",
-    "description": "你好呀，我是歪歪。前几天在一个开源项目的 github 里面看到这样的一个 pr：光是看这个名字，里面有个 MemorySafe，我就有点陷进去了。我先给你看看这个东西：这个肯定很眼熟吧？我是从阿里巴巴开发规范中截的图...",
-    "url": "https://segmentfault.com/a/1190000041943100",
-    "author": "why技术",
-    "home_url": "https://segmentfault.com/u/whyjishu",
-    "votes": "10",
+    "title": "CSS 变量自动变色技术",
+    "description": "欢迎关注微信公众号： 前端侦探在思否上看到这样一个设计，当阅读量比较少时，文字呈灰色，当阅读量比较多（>=100）时，文字就变成褐色了，示意效果如下是不是非常醒目呢？另外，还有那种可以根据进度自动变色...",
+    "url": "https://segmentfault.com/a/1190000041914954",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "12",
     "rank": 21
   },
   {
@@ -197,6 +197,15 @@
     "votes": "12",
     "rank": 22
   },
+  {
+    "title": "前端性能监测，Runtime Performance Debug 技巧",
+    "description": "提到 Web 前端的效能优化，有许多的技巧是聚焦在如何减少页面的“载入时间 Loading Time”，例如 Code Splitting 透过减少需要载入的 Bundle Size 来加快载入效能。也有些技巧是针对执行时期 (Runtime) 的优化与调...",
+    "url": "https://segmentfault.com/a/1190000041990709",
+    "author": "前端小智",
+    "home_url": "https://segmentfault.com/u/minnanitkong",
+    "votes": "10",
+    "rank": 23
+  },
   {
     "title": "无需安装、注册，一行命令搞定内网穿透！关键是完全免费",
     "description": "内网穿透，即NAT穿透，网络连接时术语。外网与内网的计算机节点需要连接通信，映射端口能让外网的电脑找到处于内网的电脑，提高下载速度。内网穿透的应用场景web 应用开发向外网发布开发的一些web demo，或者远程...",
@@ -204,26 +213,26 @@
     "author": "民工哥",
     "home_url": "https://segmentfault.com/u/jishuroad",
     "votes": "12",
-    "rank": 23
-  },
-  {
-    "title": "如何自定义 drag 样式",
-    "description": "欢迎关注我的公众号：前端侦探在 web 中，图片默认是可以拖拽的，通常是一个半透明的预览图（下面简称“预览图”），如下这个预览图是系统自动生成的，一般无法进行自定义，但有时候会觉得拖拽的预览图尺寸太大了，...",
-    "url": "https://segmentfault.com/a/1190000041881296",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "12",
     "rank": 24
   },
   {
-    "title": "掘地三尺搞定 Redis 与 MySQL 数据一致性问题",
-    "description": "Redis 拥有高性能的数据读写功能，被我们广泛用在缓存场景，一是能提高业务系统的性能，二是为数据库抵挡了高并发的流量请求，点我 -> 解密 Redis 为什么这么快的秘密。把 Redis 作为缓存组件，需要防止出现以...",
-    "url": "https://segmentfault.com/a/1190000041998615",
-    "author": "码哥字节",
-    "home_url": "https://segmentfault.com/u/magebyte",
-    "votes": "12",
+    "title": "全球顶级交易所前端二面",
+    "description": "背景今天早上在脉脉上看到一个关于BN的前端二面分享，作者出于纯粹的目的分享了一下最近的面试题。我觉得这是一套不错的面试题，于是分享给了大家。为什么会有这套面试题前端界，到底什么样子的项目，会用到这类...",
+    "url": "https://segmentfault.com/a/1190000041934586",
+    "author": "Peter谭老师",
+    "home_url": "https://segmentfault.com/u/jerrytanjinjie",
+    "votes": "8",
     "rank": 25
   },
+  {
+    "title": "如何移除你项目中99%的JS代码",
+    "description": "在前不久的WWC22中，builder.io的CTO miško hevery（同时也是Angular/AngularJS的发明者）发表了一段充满想象力的演讲。",
+    "url": "https://segmentfault.com/a/1190000042011578",
+    "author": "卡颂",
+    "home_url": "https://segmentfault.com/u/kasong",
+    "votes": "11",
+    "rank": 26
+  },
   {
     "title": "Three.js 打造缤纷夏日3D梦中情岛 🌊",
     "description": "深居内陆的人们，大概每个人都有过大海之梦吧。夏日傍晚在沙滩漫步奔跑；或是在海上冲浪游泳；或是在海岛游玩探险；亦或静待日出日落……本文使用 React + Three.js 技术栈，实现 3D 海洋和岛屿，主要包含知识点包...",
@@ -231,7 +240,16 @@
     "author": "dragonir",
     "home_url": "https://segmentfault.com/u/dragonir",
     "votes": "10",
-    "rank": 26
+    "rank": 27
+  },
+  {
+    "title": "11个常用JS小小技巧",
+    "description": "在我们的日常开发过程中，我们经常会遇到数字与字符串转换，检查对象中是否存在对应值，条件性操作对象数据，过滤数组中的错误值，等等这类处理。在这里，整理出了一些常用的小技巧，这些技巧是我比较喜欢的❤️，...",
+    "url": "https://segmentfault.com/a/1190000041923141",
+    "author": "前端荣耀",
+    "home_url": "https://segmentfault.com/u/lengxing",
+    "votes": "12",
+    "rank": 28
   },
   {
     "title": "云计算的未来在哪？破解亚马逊云科技增长神话",
@@ -240,24 +258,6 @@
     "author": "六一",
     "home_url": "https://segmentfault.com/u/suicidal_romantic_scoundrel",
     "votes": "8",
-    "rank": 27
-  },
-  {
-    "title": "全球顶级交易所前端二面",
-    "description": "背景今天早上在脉脉上看到一个关于BN的前端二面分享，作者出于纯粹的目的分享了一下最近的面试题。我觉得这是一套不错的面试题，于是分享给了大家。为什么会有这套面试题前端界，到底什么样子的项目，会用到这类...",
-    "url": "https://segmentfault.com/a/1190000041934586",
-    "author": "Peter谭老师",
-    "home_url": "https://segmentfault.com/u/jerrytanjinjie",
-    "votes": "7",
-    "rank": 28
-  },
-  {
-    "title": "CSS 变量自动变色技术",
-    "description": "欢迎关注微信公众号： 前端侦探在思否上看到这样一个设计，当阅读量比较少时，文字呈灰色，当阅读量比较多（>=100）时，文字就变成褐色了，示意效果如下是不是非常醒目呢？另外，还有那种可以根据进度自动变色...",
-    "url": "https://segmentfault.com/a/1190000041914954",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "11",
     "rank": 29
   },
   {