@wcj/github-rank 22.5.11 → 22.5.14

package/dist/sifou-daily.json

@@ -1,128 +1,92 @@
 [
   {
-    "title": "IntersectionObserver 使用 ,列表懒加载，虚拟列表实现",
-    "description": "使用IntersectionObserver 可以让我们快速实现 懒加载 和 虚拟列表首先我们创建 observer 观察者实例 {代码...} options 是配置的参数 (选填)observer 则是一个观察器实例有一些基础的方法 {代码...} callback 回...",
-    "url": "https://segmentfault.com/a/1190000041823853",
-    "author": "樊衍",
-    "home_url": "https://segmentfault.com/u/fanyan",
+    "title": "IO模型与吃饭的那些事",
+    "description": "万香楼开张了，今天是第一天接待人，张三是第一个客人，他看了眼菜单，对recvfrom说道：“给我来碗臊子面吧，多放臊子。”，recvfrom客气道：“好，稍等哈，我立马给你做”。这一做就是20分钟过去了，后面排队的后面...",
+    "url": "https://segmentfault.com/a/1190000041841526",
+    "author": "kumfo",
+    "home_url": "https://segmentfault.com/u/kumfo",
     "votes": "2",
     "rank": 1
   },
   {
-    "title": "与  Google 谷歌出海创业加速器一起出发丨招募开启",
-    "description": "谷歌出海创业加速器，作为 Google for Startups Accelerator 全球项目的重要组成部分，聚焦中国出海创业企业，旨在帮助中国出海创业企业夯实基础，提升技能，融合资源，发展战略，制胜海外，为其提供开源技术、市...",
-    "url": "https://segmentfault.com/a/1190000041825371",
-    "author": "六一",
-    "home_url": "https://segmentfault.com/u/suicidal_romantic_scoundrel",
-    "votes": "1",
+    "title": "程序员的人生",
+    "description": "职业生涯中就是和两个数打交道：0、1。一辈子就做了两件事：学习、实践。所谓的成功无非两种结果：算出一个数、拼出了一个字符串。天天忙忙碌碌，但归纳起来就是：读取、写入。幸福感的获取方式有两种：制造bug、...",
+    "url": "https://segmentfault.com/a/1190000041838581",
+    "author": "NickWang",
+    "home_url": "https://segmentfault.com/u/nickw_cn",
+    "votes": "2",
     "rank": 2
   },
   {
-    "title": "名单公布！24支腾讯Light战队，腾讯Light·公益创新挑战赛总决赛见！",
-    "description": "去年12月23日，在中华全国妇女联合会宣传部指导下，第二届腾讯Light·公益创新挑战赛于厦门正式启动。第二届挑战赛中，腾讯联合中国儿童中心设置「生物多样性保护/教育」、「未成年人安全保护/教育」和「素养教育...",
-    "url": "https://segmentfault.com/a/1190000041824928",
-    "author": "六一",
-    "home_url": "https://segmentfault.com/u/suicidal_romantic_scoundrel",
+    "title": "webpack5自定义插件，对插入到html的js文件增加时间戳",
+    "description": "使用插件的自定义钩子的方式发生了变化： compilation.plugin['xxx'] -> HtmlWebpackPlugin.getHooks(compilation)",
+    "url": "https://segmentfault.com/a/1190000041842873",
+    "author": "回首",
+    "home_url": "https://segmentfault.com/u/huishou",
     "votes": "1",
     "rank": 3
   },
   {
-    "title": "对话MVP | 清华博士马福辰：希望成为社区和生态发展强有力的“助攻”",
-    "description": "开源社区成立以来，吸引汇聚了许多热爱分享、交流的技术爱好者。为感谢大家一路以来对FISCO BCOS的支持与贡献，社区开放FISCO BCOS MVP认定，以鼓励为开源社区贡献高质量技术内容的FISCO BCOS意见先锋与意见领袖...",
-    "url": "https://segmentfault.com/a/1190000041822842",
-    "author": "FISCO_BCOS",
-    "home_url": "https://segmentfault.com/u/fisco_bcos",
+    "title": "MySQL面试八股文背诵版",
+    "description": "文章目录：什么是MySQL?MySQL常用的存储引擎有什么?它们有什么区别?数据库的三大范式MySQL的数据类型有哪些索引什么是索引?索弓的优缺点?索|的数据结构?Hash索弓|和B+树的区别?薪的类型有哪些?索|的种类有哪些?B...",
+    "url": "https://segmentfault.com/a/1190000041839926",
+    "author": "java领域",
+    "home_url": "https://segmentfault.com/u/wudingfei",
     "votes": "1",
     "rank": 4
   },
   {
-    "title": "ApacheCon Asia 2022强势来袭！16大专题等你投稿！",
-    "description": "今年七月，ApacheCon Asia 2022 强势来袭，针对亚太地区的开发者特举行 ApacheCon Asia 在线会议。足不出户，即可参加Apache技术盛宴，7 月 29 日至 31 日持续三天的Apache项目内容涵盖数十个类别，从大数据到金...",
-    "url": "https://segmentfault.com/a/1190000041821792",
-    "author": "SegmentFault思否",
-    "home_url": "https://segmentfault.com/u/segmentfault",
+    "title": "5分钟带你通过Javascript了解人工智能的基本原理",
+    "description": "学习人工智能门槛高不高？我入门花了2个月时间，学习了python、微积分，才大概弄懂了深度学习的基本原理，确实让人头大，不过现在回过头想想，其实基本原理是没这么难的。",
+    "url": "https://segmentfault.com/a/1190000041843081",
+    "author": "6666",
+    "home_url": "https://segmentfault.com/u/6666",
     "votes": "1",
     "rank": 5
   },
   {
-    "title": "特斯拉起诉前工程师：涉嫌窃取“Dojo 项目”超级计算机机密",
-    "description": "据彭博社报道，美国电动汽车及能源公司特斯拉（Tesla）正在起诉前工程师Alexander Yatskov，指控他窃取了该公司名为“Dojo 项目”的超级计算机技术有关“机密”信息。",
-    "url": "https://segmentfault.com/a/1190000041821486",
-    "author": "MissD",
-    "home_url": "https://segmentfault.com/u/d2ms1shh",
+    "title": "React 组件库 CSS 样式方案分析",
+    "description": "随着业务的发展，一些代码逻辑可能同时在多个项目中使用，为了避免每次使用和更新都要复制粘贴代码，构造一个组件库就十分有必要了。构建组件库有很多需要考虑的方面，本文主要讨论在 React 生态下，如何选择一种...",
+    "url": "https://segmentfault.com/a/1190000041840130",
+    "author": "云音乐技术团队",
+    "home_url": "https://segmentfault.com/u/musicfe",
     "votes": "1",
     "rank": 6
   },
   {
-    "title": "了解Flow -- elixir的并行计算库",
-    "description": "日常编程的时候，我有时候会不自觉的把计算机当成一个人，以对人说话的方式来给计算机布置任务。然而，计算机和人类的一个主要区别就是，它会一字不差地执行程序，遇到特殊情况时不会做变通。",
-    "url": "https://segmentfault.com/a/1190000041820402",
-    "author": "Ljzn",
-    "home_url": "https://segmentfault.com/u/exunit",
-    "votes": "1",
+    "title": "使用CSS实现《声生不息》节目Logo",
+    "description": "《声生不息》 是芒果TV、香港电视广播有限公司和湖南卫视联合推出的港乐竞唱献礼节目，听着音乐仿佛回到了那个令人怀念的港风席卷整个亚洲的年代。",
+    "url": "https://segmentfault.com/a/1190000041839660",
+    "author": "dragonir",
+    "home_url": "https://segmentfault.com/u/dragonir",
+    "votes": "3",
     "rank": 7
   },
   {
-    "title": "并发编程之临界区\\阻塞\\非阻塞\\死锁\\饥饿\\活锁",
-    "description": "本文介绍并发编程中的若干概念，实际上在笔者之前的文章中，已经介绍过很多概念。比如：并发与并行、同步与异步、锁与信号量等等。参考《并发编程专栏》，本文计息介绍一些相对深入一些的概念",
-    "url": "https://segmentfault.com/a/1190000041826037",
-    "author": "字母哥博客",
-    "home_url": "https://segmentfault.com/u/zimug",
+    "title": "MySQL核心技术_常见函数",
+    "description": "常见函数字符函数数学函数日期函数其他函数【补充】流程控制函数【补充】字符函数大小写控制函数这类函数改变字符的大小写。字符控制函数这类函数控制字符:数字函数ROUND: 四舍五入TRUNCATE: 截断MOD: 求余日期函...",
+    "url": "https://segmentfault.com/a/1190000041840033",
+    "author": "小谷哥",
+    "home_url": "https://segmentfault.com/u/atguigu",
     "votes": "1",
     "rank": 8
   },
   {
-    "title": "Native Flink on Kubernetes 在小红书的实践",
-    "description": "摘要：本文整理自小红书数据流团队资深研发工程师何军在 Flink Forward Asia 2021 平台建设专场的演讲，介绍了小红书基于 K8s 管理 Flink 任务的建设过程，以及往 Native Flink on K8s 方案迁移过程的一些实践经...",
-    "url": "https://segmentfault.com/a/1190000041824263",
-    "author": "ApacheFlink",
-    "home_url": "https://segmentfault.com/u/ververica",
+    "title": "冴羽答读者问：人生的意义是什么？",
+    "description": "文章主体写于一年多前，当时我苦于思考人生意义这个问题，于是写下了这篇随笔，正好有同学提到人生意义的问题，就让这篇随笔从我的草稿箱中重见天日，和大家分享我当时的一些思索，现在看来有些地方很是浅薄，但...",
+    "url": "https://segmentfault.com/a/1190000041842063",
+    "author": "冴羽",
+    "home_url": "https://segmentfault.com/u/yayu",
     "votes": "1",
     "rank": 9
   },
   {
-    "title": "功夫在平时",
-    "description": "事情源于一次跟CTO的交流，当时由于紧张而且距离处理这些 bug 的时间过得较长，所以当时答的一塌糊涂，所以就想着重新梳理下当时回答的问题，讲清楚问题的原由，做到功夫在平时，同时加深记忆。",
-    "url": "https://segmentfault.com/a/1190000041820664",
-    "author": "code_shuai",
-    "home_url": "https://segmentfault.com/u/code_shuai",
-    "votes": "2",
-    "rank": 10
-  },
-  {
-    "title": "哥德巴赫猜想的验证",
-    "description": "首先得声明一句，本人文学专业出身，数学确实不好，可以说完全零基础，因此这篇博客的代码花了接近一下午的时间（并不是代码有多难，而是自己数学太差，所以得查半天资料研究）",
-    "url": "https://segmentfault.com/a/1190000041824445",
-    "author": "Keen",
-    "home_url": "https://segmentfault.com/u/keen_626105e1ef632",
-    "votes": "1",
-    "rank": 11
-  },
-  {
-    "title": "Cephfs的MDS侧元数据池和mdcache存储数据结构分析",
-    "description": "查看名为vdb.1_1.dir（目录下有100万个文件）的目录的inode号为1099511627788，转换为16进制为1000000000C",
-    "url": "https://segmentfault.com/a/1190000041824048",
-    "author": "barrychen",
-    "home_url": "https://segmentfault.com/u/barrychen_599e6fdbdcd99",
-    "votes": "3",
-    "rank": 12
-  },
-  {
-    "title": "Cephfs数据池数据对象命名规则解析",
-    "description": "众所周知，cephfs的数据和元数据是分离的，处于不同的pool池里头，而无论是rgw、cephfs、rbd底层的数据池的存储都是基于RADOS(Reliable Autonomic Distributed Object Store),Ceph存储集群的基础，RADOS层的一切...",
-    "url": "https://segmentfault.com/a/1190000041823850",
-    "author": "barrychen",
-    "home_url": "https://segmentfault.com/u/barrychen_599e6fdbdcd99",
+    "title": "canvas 2 image的使用小心得",
+    "description": "在开发中遇到一个设置透明色的需求，大概描述就是一张图，然后再给一个颜色，把这个图片上所有这个颜色的像素点设置为透明色，如下图实现思路就是将图片画到canvas上，然后遍历图片像素信息，将指定的rgb的alpha...",
+    "url": "https://segmentfault.com/a/1190000041842028",
+    "author": "只盼云巅",
+    "home_url": "https://segmentfault.com/u/zhipanyun",
     "votes": "3",
-    "rank": 13
-  },
-  {
-    "title": "麒麟操作系统 (kylinos) 从入门到精通 - 系统设置 - 第一篇 系统准备",
-    "description": "使用电源键开机后，会有一个中国长城的欢迎 LOGO 页面，此页面会有提示 按 Fn+F2 进行 BIOS 设置，按 Fn+F7 进行启动引导选择。 图（补） 我们按 Fn+F7 进入选从 USB 启动，进入启动盘这里我们选择 Install Kylin...",
-    "url": "https://segmentfault.com/a/1190000041821724",
-    "author": "码上世界",
-    "home_url": "https://segmentfault.com/u/code4world",
-    "votes": "2",
-    "rank": 14
+    "rank": 10
   }
 ]

package/dist/sifou-monthly.json

@@ -1,20 +1,20 @@
 [
-  {
-    "title": "SegmentFault 思否加入 ONES",
-    "description": "ONES 成立于 2015 年，是国内领先的企业级研发管理解决方案提供商。2021 年，ONES 连续完成 3 轮总计近 1 亿美元融资，是国内研发管理领域累计融资金额最多、历史融资速度最快的公司。",
-    "url": "https://segmentfault.com/a/1190000041790775",
-    "author": "SegmentFault思否",
-    "home_url": "https://segmentfault.com/u/segmentfault",
-    "votes": "39",
-    "rank": 1
-  },
   {
     "title": "10",
     "description": "各位 SegmentFault 思否社区的小伙伴们，相信大家已经从多个渠道了解到 SegmentFault 将加入 ONES 的消息。而今年正好也是 SegmentFault 社区创立的 10 周年，有趣的是 “10” 这个数字不论在十进制还是计算机世界...",
     "url": "https://segmentfault.com/a/1190000041790801",
     "author": "joyqi",
     "home_url": "https://segmentfault.com/u/joyqi",
-    "votes": "51",
+    "votes": "56",
+    "rank": 1
+  },
+  {
+    "title": "SegmentFault 思否加入 ONES",
+    "description": "ONES 成立于 2015 年，是国内领先的企业级研发管理解决方案提供商。2021 年，ONES 连续完成 3 轮总计近 1 亿美元融资，是国内研发管理领域累计融资金额最多、历史融资速度最快的公司。",
+    "url": "https://segmentfault.com/a/1190000041790775",
+    "author": "SegmentFault思否",
+    "home_url": "https://segmentfault.com/u/segmentfault",
+    "votes": "40",
     "rank": 2
   },
   {
@@ -23,25 +23,25 @@
     "url": "https://segmentfault.com/a/1190000041729574",
     "author": "卡颂",
     "home_url": "https://segmentfault.com/u/kasong",
-    "votes": "40",
+    "votes": "42",
     "rank": 3
   },
-  {
-    "title": "11+ chrome高级调试技巧，学会效率直接提升666%",
-    "description": "也许你我素未谋面，但很可能相见恨晚，我是前端胖头鱼前言chrome浏览器作为前端童鞋的老婆，相信你一定不陌生。调页面、写BUG、画样式、看php片少了它整个世界都不香了。不信？一起来看看我们的老婆有多厉害....1...",
-    "url": "https://segmentfault.com/a/1190000041683548",
-    "author": "前端胖头鱼",
-    "home_url": "https://segmentfault.com/u/116263",
-    "votes": "43",
-    "rank": 4
-  },
   {
     "title": "10个我经常逛的“小网站”，嘿嘿嘿！！！",
     "description": "你的文件夹里有没有一些私人喜好的小网站？嘿嘿！！！必须有啊！分享10个我经常使用、能够提高工作效率、美化图片、绘制流程图的网站，你可能也用得上喔。",
     "url": "https://segmentfault.com/a/1190000041728567",
     "author": "前端胖头鱼",
     "home_url": "https://segmentfault.com/u/116263",
-    "votes": "31",
+    "votes": "33",
+    "rank": 4
+  },
+  {
+    "title": "Amazing！巧用 CSS 视差实现酷炫交互动效",
+    "description": "本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。关于使用 CSS 实现滚动视差效果，在之前有一篇文章详细描述过具体方案 - CSS 实现视差效果，感兴趣的同学可以...",
+    "url": "https://segmentfault.com/a/1190000041718060",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "25",
     "rank": 5
   },
   {
@@ -53,15 +53,6 @@
     "votes": "27",
     "rank": 6
   },
-  {
-    "title": "Amazing！巧用 CSS 视差实现酷炫交互动效",
-    "description": "本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。关于使用 CSS 实现滚动视差效果，在之前有一篇文章详细描述过具体方案 - CSS 实现视差效果，感兴趣的同学可以...",
-    "url": "https://segmentfault.com/a/1190000041718060",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "24",
-    "rank": 7
-  },
   {
     "title": "现代 CSS 解决方案：Modern CSS Reset",
     "description": "在早年间（其实也不是很早），写过几篇关于 CSS Reset 的文章 - reset.css 知多少。详细描述了当时业界比较常用的，两个 CSS reset 方案：reset.css 与 Normalize.css。以更为推荐的 Normalize.css 为例，它的核...",
@@ -69,7 +60,7 @@
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
     "votes": "25",
-    "rank": 8
+    "rank": 7
   },
   {
     "title": "CSS 中的简写到底有多少坑？以后不敢了...",
@@ -77,18 +68,54 @@
     "url": "https://segmentfault.com/a/1190000041804988",
     "author": "零一",
     "home_url": "https://segmentfault.com/u/zero2one",
-    "votes": "19",
+    "votes": "23",
+    "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": "22",
     "rank": 9
   },
   {
-    "title": "🔥前端脚手架辣么多，那我也要写一个玩玩",
-    "description": "2022年已经过了四分之一还多了，之前说好的每个月一片文章好像也没有让自己兑现。最近公司在做一些前端工程化相关的东西，虽然准备做组件库的事情被领导给毙了，不过在这之前写了一个脚手架的工具，...",
-    "url": "https://segmentfault.com/a/1190000041693503",
-    "author": "恪晨",
-    "home_url": "https://segmentfault.com/u/bo_wang_code",
-    "votes": "19",
+    "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": "18",
     "rank": 10
   },
+  {
+    "title": "离谱的 CSS！从表盘刻度到艺术剪纸",
+    "description": "某日，群里有这样一个问题，如何实现这样的表盘刻度：这其实是个挺有意思的问题，方法也有很多。单标签，使用 conic-gradient 实现表盘刻度最简单便捷的方式，就是利用角向渐变的方式 conic-gradient，代码也非常...",
+    "url": "https://segmentfault.com/a/1190000041791819",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "19",
+    "rank": 11
+  },
+  {
+    "title": "浅谈支付系统开发基本流程",
+    "description": "前言Hi，各位好久不见，我是CrazyCodes，今天我们来聊聊支付系统。支付系统是每个系统都必备的模块之一，也是众多模块中最核心的功能，如果支付出现问题，那么意味着会直接影响到产品收益，事故严重程度高。本篇...",
+    "url": "https://segmentfault.com/a/1190000041781215",
+    "author": "CrazyCodes",
+    "home_url": "https://segmentfault.com/u/crazycodes",
+    "votes": "20",
+    "rank": 12
+  },
+  {
+    "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": "17",
+    "rank": 13
+  },
   {
     "title": "以B端平台设计，理解尼尔森10大可用性原则",
     "description": "尼尔森是一名人机交互学博士，通过总结分析200多个可用性问题，1995年提出了尼尔森十大可用性原则，不论在Web设计还是移动端设计，掌握了这十项原则，都能有效提升产品用户体验度。今天就以实例跟大家聊聊尼尔森...",
@@ -96,16 +123,7 @@
     "author": "JenK",
     "home_url": "https://segmentfault.com/u/wangzc996",
     "votes": "22",
-    "rank": 11
-  },
-  {
-    "title": "仅用一个HTML标签，实现带动画的抖音LOGO",
-    "description": "大家好，我是零一，今天给大家表演 仅用一个HTML标签实现带动画的抖音LOGO，涉及了很多知识点，欢迎交流讨论先上结果，最终实现效果如下：还原度应该还可以吧？抖音Logo结构想要用CSS来画抖音的Logo，前提要先了...",
-    "url": "https://segmentfault.com/a/1190000041754709",
-    "author": "零一",
-    "home_url": "https://segmentfault.com/u/zero2one",
-    "votes": "19",
-    "rank": 12
+    "rank": 14
   },
   {
     "title": "40行代码实现React核心Diff算法",
@@ -113,17 +131,26 @@
     "url": "https://segmentfault.com/a/1190000041706515",
     "author": "卡颂",
     "home_url": "https://segmentfault.com/u/kasong",
-    "votes": "14",
-    "rank": 13
+    "votes": "15",
+    "rank": 15
   },
   {
-    "title": "CSS 实现切角效果",
-    "description": "欢迎关注我的公众号：前端侦探最近项目中看到这样的一个切角效果，如下所示就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？一、自适应方式这种布局一般有两种自适应方...",
-    "url": "https://segmentfault.com/a/1190000041715976",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "14",
-    "rank": 14
+    "title": "年年出妖事，一例由JSON解析导致的\"薛定谔BUG\"排查过程记录",
+    "description": "但是最近公司内碰到的这一个bug，这个bug初看很简单，但是非常妖孽，在一段时间内我甚至是百思不得其解。在长达几天的时间内，复现的概率非常低。几乎难以抓住任何踪迹。",
+    "url": "https://segmentfault.com/a/1190000041806654",
+    "author": "铂赛东",
+    "home_url": "https://segmentfault.com/u/bosaidong_5c495684bcf4b",
+    "votes": "24",
+    "rank": 16
+  },
+  {
+    "title": "让交互更加生动！有意思的鼠标跟随 3D 旋转动效",
+    "description": "今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现：简单分析一下，这个交互效果主要有两个核心：借助了 CSS 3D 的能力元素的旋转需要和鼠标的移动相结合本文，就将讲述如何使用纯 CSS 实现类似...",
+    "url": "https://segmentfault.com/a/1190000041761117",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "13",
+    "rank": 17
   },
   {
     "title": "我做了一个在线白板！！！",
@@ -131,26 +158,26 @@
     "url": "https://segmentfault.com/a/1190000041769612",
     "author": "街角小林",
     "home_url": "https://segmentfault.com/u/jiejiaoxiaolin",
-    "votes": "11",
-    "rank": 15
+    "votes": "12",
+    "rank": 18
   },
   {
-    "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": "16",
-    "rank": 16
+    "title": "CSS 实现切角效果",
+    "description": "欢迎关注我的公众号：前端侦探最近项目中看到这样的一个切角效果，如下所示就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？一、自适应方式这种布局一般有两种自适应方...",
+    "url": "https://segmentfault.com/a/1190000041715976",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "14",
+    "rank": 19
   },
   {
-    "title": "浅谈支付系统开发基本流程",
-    "description": "前言Hi，各位好久不见，我是CrazyCodes，今天我们来聊聊支付系统。支付系统是每个系统都必备的模块之一，也是众多模块中最核心的功能，如果支付出现问题，那么意味着会直接影响到产品收益，事故严重程度高。本篇...",
-    "url": "https://segmentfault.com/a/1190000041781215",
-    "author": "CrazyCodes",
-    "home_url": "https://segmentfault.com/u/crazycodes",
-    "votes": "16",
-    "rank": 17
+    "title": "🔥 2022 前端性能优化最佳实践",
+    "description": "随着业务的不断迭代，项目日渐壮大，为了给用户提供更优的体验，性能优化是前端开发避不开的话题。一个优秀的网站必然是拥有丰富功能的同时具有比较块的响应速度，想必我们浏览网页时都更喜欢丝般顺滑的感受。",
+    "url": "https://segmentfault.com/a/1190000041753539",
+    "author": "佩奇烹饪家",
+    "home_url": "https://segmentfault.com/u/cloudyttt",
+    "votes": "14",
+    "rank": 20
   },
   {
     "title": "如何构建可控,可靠,可扩展的 PWA 应用",
@@ -158,26 +185,17 @@
     "url": "https://segmentfault.com/a/1190000041730906",
     "author": "JerryC",
     "home_url": "https://segmentfault.com/u/jerryc",
-    "votes": "12",
-    "rank": 18
-  },
-  {
-    "title": "🔥 2022 前端性能优化最佳实践",
-    "description": "随着业务的不断迭代，项目日渐壮大，为了给用户提供更优的体验，性能优化是前端开发避不开的话题。一个优秀的网站必然是拥有丰富功能的同时具有比较块的响应速度，想必我们浏览网页时都更喜欢丝般顺滑的感受。",
-    "url": "https://segmentfault.com/a/1190000041753539",
-    "author": "佩奇烹饪家",
-    "home_url": "https://segmentfault.com/u/cloudyttt",
-    "votes": "12",
-    "rank": 19
+    "votes": "13",
+    "rank": 21
   },
   {
-    "title": "让交互更加生动！有意思的鼠标跟随 3D 旋转动效",
-    "description": "今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现：简单分析一下，这个交互效果主要有两个核心：借助了 CSS 3D 的能力元素的旋转需要和鼠标的移动相结合本文，就将讲述如何使用纯 CSS 实现类似...",
-    "url": "https://segmentfault.com/a/1190000041761117",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "3",
-    "rank": 20
+    "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": "17",
+    "rank": 22
   },
   {
     "title": "招聘季征文活动获奖名单公布，快来领奖~",
@@ -186,7 +204,7 @@
     "author": "SegmentFault思否",
     "home_url": "https://segmentfault.com/u/segmentfault",
     "votes": "10",
-    "rank": 21
+    "rank": 23
   },
   {
     "title": "图说前端-送给您百张前端技术图谱",
@@ -195,16 +213,16 @@
     "author": "TNTWEB",
     "home_url": "https://segmentfault.com/u/tnfe",
     "votes": "13",
-    "rank": 22
+    "rank": 24
   },
   {
-    "title": "这些CSS提效技巧，你需要知道！",
-    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
-    "url": "https://segmentfault.com/a/1190000041711730",
-    "author": "前端小智",
-    "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "12",
-    "rank": 23
+    "title": "从源码里的一个注释，我追溯到了12年前，有点意思。",
+    "description": "你好呀，我是歪歪。那天我正在用键盘疯狂的输出：突然微信弹出一个消息，是一个读者发给我的。我点开一看：啊，这熟悉的味道，一看就是 HashMap，八股文梦开始的地方啊。但是他问出的问题，似乎又不是一个属于 Ha...",
+    "url": "https://segmentfault.com/a/1190000041718955",
+    "author": "why技术",
+    "home_url": "https://segmentfault.com/u/whyjishu",
+    "votes": "17",
+    "rank": 25
   },
   {
     "title": "跨域问题很难吗？来！教你使用 Nginx 反向代理轻松解决",
@@ -213,42 +231,24 @@
     "author": "民工哥",
     "home_url": "https://segmentfault.com/u/jishuroad",
     "votes": "10",
-    "rank": 24
-  },
-  {
-    "title": "年年出妖事，一例由JSON解析导致的\"薛定谔BUG\"排查过程记录",
-    "description": "但是最近公司内碰到的这一个bug，这个bug初看很简单，但是非常妖孽，在一段时间内我甚至是百思不得其解。在长达几天的时间内，复现的概率非常低。几乎难以抓住任何踪迹。",
-    "url": "https://segmentfault.com/a/1190000041806654",
-    "author": "铂赛东",
-    "home_url": "https://segmentfault.com/u/bosaidong_5c495684bcf4b",
-    "votes": "18",
-    "rank": 25
-  },
-  {
-    "title": "离谱的 CSS！从表盘刻度到艺术剪纸",
-    "description": "某日，群里有这样一个问题，如何实现这样的表盘刻度：这其实是个挺有意思的问题，方法也有很多。单标签，使用 conic-gradient 实现表盘刻度最简单便捷的方式，就是利用角向渐变的方式 conic-gradient，代码也非常...",
-    "url": "https://segmentfault.com/a/1190000041791819",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "14",
     "rank": 26
   },
   {
-    "title": "一些关于react的keep-alive功能相关知识在这里(上)",
-    "description": "这是在2022年开发中PM提的一个需求, 某个table被用户输入了一些搜搜条件并且浏览到了第3页, 那如果我跳转到其他路由后返回当前页面, 希望搜索条件还在, 并且仍处于第三页, 这不就是vue...",
-    "url": "https://segmentfault.com/a/1190000041683300",
-    "author": "lulu_up",
-    "home_url": "https://segmentfault.com/u/lulu_up",
-    "votes": "15",
+    "title": "这些CSS提效技巧，你需要知道！",
+    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
+    "url": "https://segmentfault.com/a/1190000041711730",
+    "author": "前端小智",
+    "home_url": "https://segmentfault.com/u/minnanitkong",
+    "votes": "12",
     "rank": 27
   },
   {
-    "title": "一些关于react的keep-alive功能相关知识在这里(下)",
-    "description": "比如页面上的table里有100条数据, 我们想看第100条数据, 那就要滚动不少距离, 不少场景这种滚动距离也是有必要保留的。",
-    "url": "https://segmentfault.com/a/1190000041683421",
-    "author": "lulu_up",
-    "home_url": "https://segmentfault.com/u/lulu_up",
-    "votes": "13",
+    "title": "React官方团队出手，补齐原生Hook短板",
+    "description": "大家好，我卡颂。我们知道，Hooks使用时存在所谓的闭包陷阱，考虑如下代码： {代码...} 我们期望点击后sendMessage能传递text的最新值。然而实际上，由于回调函数被useCallback缓存，形成闭包，所以点击的效果始...",
+    "url": "https://segmentfault.com/a/1190000041798153",
+    "author": "卡颂",
+    "home_url": "https://segmentfault.com/u/kasong",
+    "votes": "10",
     "rank": 28
   },
   {
@@ -257,7 +257,7 @@
     "url": "https://segmentfault.com/a/1190000041763788",
     "author": "playboy5566",
     "home_url": "https://segmentfault.com/u/playboy5566",
-    "votes": "9",
+    "votes": "11",
     "rank": 29
   },
   {