@wcj/github-rank 22.2.10 → 22.2.11

package/web/data/sifou-weekly.json

@@ -1,29 +1,29 @@
 [
-  {
-    "title": "Three.js 实现2022冬奥主题3D趣味页面 🐼",
-    "description": "迎冬奥，一起向未来！2022冬奥会马上就要开始了，本文使用 Three.js + React 技术栈，实现冬日和奥运元素，制作了一个充满趣味和纪念意义的冬奥主题 3D 页面。本文涉及到的知识点主要包括：TorusGeometry 圆环面...",
-    "url": "https://segmentfault.com/a/1190000041363089",
-    "author": "dragonir",
-    "home_url": "https://segmentfault.com/u/dragonir",
-    "votes": "56",
-    "rank": 1
-  },
   {
     "title": "17 个实用 shell 脚本，建议收藏！",
     "description": "1、服务器系统配置初始化 {代码...} 2、批量创建多个用户并设置密码 {代码...} 3、一键查看服务器利用率 {代码...} 4、找出占用CPU 内存过高的进程 {代码...} 5、查看网卡的实时流量 {代码...} 6、监控多台服务器...",
     "url": "https://segmentfault.com/a/1190000041370811",
     "author": "民工哥",
     "home_url": "https://segmentfault.com/u/jishuroad",
-    "votes": "13",
+    "votes": "17",
+    "rank": 1
+  },
+  {
+    "title": "20个 Javascript 技巧，提高我们的摸鱼时间！",
+    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
+    "url": "https://segmentfault.com/a/1190000041367705",
+    "author": "前端小智",
+    "home_url": "https://segmentfault.com/u/minnanitkong",
+    "votes": "14",
     "rank": 2
   },
   {
-    "title": "跨域了？ 装个插件就够了！",
-    "description": "浏览器为了安全引入了同源策略，这直接导致默认情况下前后端域名如果不同，那么则功能会受限。 随着前后端分离的发展，前端和后端职责的分离，前端会有专门的本地开发服务器(local dev server)用于本地开发。这个...",
-    "url": "https://segmentfault.com/a/1190000041367088",
-    "author": "lucifer",
-    "home_url": "https://segmentfault.com/u/shuohaodeyixuene",
-    "votes": "7",
+    "title": "Suspense对React的意义在哪里？",
+    "description": "大家好，我卡颂。可能很多朋友在项目中还没用过Suspense，但是Suspense是React未来发展非常重要的一环。本文会讲解Suspense对于React的意义。欢迎加入人类高质量前端框架群，带飞React的迭代过程React从v16到v18...",
+    "url": "https://segmentfault.com/a/1190000041372960",
+    "author": "卡颂",
+    "home_url": "https://segmentfault.com/u/kasong",
+    "votes": "8",
     "rank": 3
   },
   {
@@ -32,53 +32,62 @@
     "url": "https://segmentfault.com/a/1190000041370583",
     "author": "公子",
     "home_url": "https://segmentfault.com/u/lizheming",
-    "votes": "9",
+    "votes": "10",
     "rank": 4
   },
   {
-    "title": "Suspense对React的意义在哪里？",
-    "description": "大家好，我卡颂。可能很多朋友在项目中还没用过Suspense，但是Suspense是React未来发展非常重要的一环。本文会讲解Suspense对于React的意义。欢迎加入人类高质量前端框架群，带飞React的迭代过程React从v16到v18...",
-    "url": "https://segmentfault.com/a/1190000041372960",
-    "author": "卡颂",
-    "home_url": "https://segmentfault.com/u/kasong",
-    "votes": "6",
+    "title": "跨域了？ 装个插件就够了！",
+    "description": "浏览器为了安全引入了同源策略，这直接导致默认情况下前后端域名如果不同，那么则功能会受限。 随着前后端分离的发展，前端和后端职责的分离，前端会有专门的本地开发服务器(local dev server)用于本地开发。这个...",
+    "url": "https://segmentfault.com/a/1190000041367088",
+    "author": "lucifer",
+    "home_url": "https://segmentfault.com/u/shuohaodeyixuene",
+    "votes": "7",
     "rank": 5
   },
   {
-    "title": "20个 Javascript 技巧，提高我们的摸鱼时间！",
-    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
-    "url": "https://segmentfault.com/a/1190000041367705",
-    "author": "前端小智",
-    "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "6",
+    "title": "2年经验面试网易灵犀！太注重工程化了！",
+    "description": "前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。今天给大家分享一个大厂的面经——网易灵犀题目一面1、聊项目2、webpack和rollup的区别，打包出来的产物有什么...",
+    "url": "https://segmentfault.com/a/1190000041366695",
+    "author": "Sunshine_Lin",
+    "home_url": "https://segmentfault.com/u/user_ze46ouik",
+    "votes": "7",
     "rank": 6
   },
   {
-    "title": "前融云 CTO 杨攀加入涛思数据，任战略合作 & 开发者生态副总裁",
-    "description": "2022 年 2 月 8 日，涛思数据创始人兼 CEO 陶建辉在朋友圈中晒出其与前融云 CTO 杨攀的合照，并发文 “涛思数据今天喜迎大将杨攀”，正式官宣了 “前融云 CTO 杨攀加入涛思数据” 的消息。据悉，杨攀将在涛思数据负责...",
-    "url": "https://segmentfault.com/a/1190000041373152",
-    "author": "鸣飞",
-    "home_url": "https://segmentfault.com/u/mf",
-    "votes": "1",
+    "title": "2021 年 JavaScript 明星项目榜：zx、Vite 、Next.js 、React 大受欢迎",
+    "description": "近日，risingstars 出炉了“2021 JavaScript Rising Stars”报告。该报告结合过去 12 个月里 GitHub 上新增的 star 数而对 2021 年 JavaScript 领域的优秀项目做了总结。",
+    "url": "https://segmentfault.com/a/1190000041373049",
+    "author": "MissD",
+    "home_url": "https://segmentfault.com/u/d2ms1shh",
+    "votes": "8",
     "rank": 7
   },
+  {
+    "title": "eslint-plugin-import 规则之 Import / Order",
+    "description": "其中，group 是对导入模块进行分组，pathGroups 是通过路径自定义分组，newlines-between 不同组之间是否进行换行，alphabetize 根据字母顺序对每个组内的顺序进行排序",
+    "url": "https://segmentfault.com/a/1190000041375528",
+    "author": "robin",
+    "home_url": "https://segmentfault.com/u/robin_ren",
+    "votes": "6",
+    "rank": 8
+  },
   {
     "title": "从服务端生成Excel电子表格（GcExcel + SpreadJS）",
     "description": "在服务端生成Excel电子表格，除了使用 Node.js + SpreadJS 外，葡萄城官方推荐使用 SpreadJS + GcExcel。该方案不仅能够解决批量绑定数据源并导出Excel、批量修改大量Excel内容及样式、服务端批量打印以及生成PDF...",
     "url": "https://segmentfault.com/a/1190000041377778",
     "author": "葡萄城技术团队",
     "home_url": "https://segmentfault.com/u/grapecity",
-    "votes": "1",
-    "rank": 8
+    "votes": "4",
+    "rank": 9
   },
   {
-    "title": "深入浅出 Angular 变更检测",
-    "description": "Angular 中的变更检测是一种用来将应用程序 UI 的状态与数据的状态同步的机制。当应用逻辑更改组件数据时，绑定到视图中 DOM 属性上的值也要随之更改。变更检测器负责更新视图以反映当前的数据模型。阅读本文之前...",
-    "url": "https://segmentfault.com/a/1190000041365492",
-    "author": "Zuckjet",
-    "home_url": "https://segmentfault.com/u/zuckjet",
-    "votes": "3",
-    "rank": 9
+    "title": "前融云 CTO 杨攀加入涛思数据，任战略合作 & 开发者生态副总裁",
+    "description": "2022 年 2 月 8 日，涛思数据创始人兼 CEO 陶建辉在朋友圈中晒出其与前融云 CTO 杨攀的合照，并发文 “涛思数据今天喜迎大将杨攀”，正式官宣了 “前融云 CTO 杨攀加入涛思数据” 的消息。据悉，杨攀将在涛思数据负责...",
+    "url": "https://segmentfault.com/a/1190000041373152",
+    "author": "鸣飞",
+    "home_url": "https://segmentfault.com/u/mf",
+    "votes": "1",
+    "rank": 10
   },
   {
     "title": "还在用HttpUtil？试试这款优雅的HTTP客户端工具吧，跟SpringBoot绝配！",
@@ -86,53 +95,35 @@
     "url": "https://segmentfault.com/a/1190000041371806",
     "author": "macrozheng",
     "home_url": "https://segmentfault.com/u/macrozheng",
-    "votes": "3",
-    "rank": 10
-  },
-  {
-    "title": "2021 年 JavaScript 明星项目榜：zx、Vite 、Next.js 、React 大受欢迎",
-    "description": "近日，risingstars 出炉了“2021 JavaScript Rising Stars”报告。该报告结合过去 12 个月里 GitHub 上新增的 star 数而对 2021 年 JavaScript 领域的优秀项目做了总结。",
-    "url": "https://segmentfault.com/a/1190000041373049",
-    "author": "MissD",
-    "home_url": "https://segmentfault.com/u/d2ms1shh",
-    "votes": "6",
+    "votes": "4",
     "rank": 11
   },
   {
-    "title": "2年经验面试网易灵犀！太注重工程化了！",
-    "description": "前言大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心。今天给大家分享一个大厂的面经——网易灵犀题目一面1、聊项目2、webpack和rollup的区别，打包出来的产物有什么...",
-    "url": "https://segmentfault.com/a/1190000041366695",
-    "author": "Sunshine_Lin",
-    "home_url": "https://segmentfault.com/u/user_ze46ouik",
-    "votes": "5",
+    "title": "深入浅出 Angular 变更检测",
+    "description": "Angular 中的变更检测是一种用来将应用程序 UI 的状态与数据的状态同步的机制。当应用逻辑更改组件数据时，绑定到视图中 DOM 属性上的值也要随之更改。变更检测器负责更新视图以反映当前的数据模型。阅读本文之前...",
+    "url": "https://segmentfault.com/a/1190000041365492",
+    "author": "Zuckjet",
+    "home_url": "https://segmentfault.com/u/zuckjet",
+    "votes": "4",
     "rank": 12
   },
   {
-    "title": "eslint-plugin-import 规则之 Import / Order",
-    "description": "其中，group 是对导入模块进行分组，pathGroups 是通过路径自定义分组，newlines-between 不同组之间是否进行换行，alphabetize 根据字母顺序对每个组内的顺序进行排序",
-    "url": "https://segmentfault.com/a/1190000041375528",
-    "author": "robin",
-    "home_url": "https://segmentfault.com/u/robin_ren",
+    "title": "Go 泛型变更：约束太丑了，先移动到 x/exp 做实验性功能",
+    "description": "大家好，我是煎鱼。Go 泛型配套了各种标准库，像是常见的 maps、slices 泛型库。早期他们是长这样的： {代码...} 又或是： {代码...} 关注到里面的标准库 constraints，他就是今天变更的主角。他咋了呢？背景标准...",
+    "url": "https://segmentfault.com/a/1190000041368835",
+    "author": "煎鱼",
+    "home_url": "https://segmentfault.com/u/eddycjy",
     "votes": "4",
     "rank": 13
   },
-  {
-    "title": "​北京冬奥会开幕式震撼刷屏；GitHub 推出赞助功能；Flutter 2.10 发布 | 思否周刊",
-    "description": "40s 新闻速递北京冬奥会开幕式震撼刷屏微软禁用 MSIX AppX 安装程序工信部：冬奥会开幕式保障任务圆满完成，封堵恶意程序发送端 IP 地址 4000 余个英特尔称其 CPU Bug 只有 AMD 的一半Google Chrome 浏览器徽标8 ...",
-    "url": "https://segmentfault.com/a/1190000041366705",
-    "author": "snakesss",
-    "home_url": "https://segmentfault.com/u/snakesss",
-    "votes": "2",
-    "rank": 14
-  },
   {
     "title": "精读《pipe operator for JavaScript》",
     "description": "Pipe Operator (|>) for JavaScript 提案给 js 增加了 Pipe 语法，这次结合 A pipe operator for JavaScript: introduction and use cases 文章一起深入了解这个提案。概述Pipe 语法可以将函数调用按顺序打平...",
     "url": "https://segmentfault.com/a/1190000041367827",
     "author": "黄子毅",
     "home_url": "https://segmentfault.com/u/aoyangyudakong",
-    "votes": "2",
-    "rank": 15
+    "votes": "3",
+    "rank": 14
   },
   {
     "title": "比 Xshell 还好用的 SSH 客户端神器！爱了",
@@ -140,8 +131,8 @@
     "url": "https://segmentfault.com/a/1190000041370721",
     "author": "民工哥",
     "home_url": "https://segmentfault.com/u/jishuroad",
-    "votes": "2",
-    "rank": 16
+    "votes": "3",
+    "rank": 15
   },
   {
     "title": "使用 CSS Grid 构建复杂布局超实用的技巧!",
@@ -149,7 +140,16 @@
     "url": "https://segmentfault.com/a/1190000041371479",
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "3",
+    "votes": "4",
+    "rank": 16
+  },
+  {
+    "title": "​北京冬奥会开幕式震撼刷屏；GitHub 推出赞助功能；Flutter 2.10 发布 | 思否周刊",
+    "description": "40s 新闻速递北京冬奥会开幕式震撼刷屏微软禁用 MSIX AppX 安装程序工信部：冬奥会开幕式保障任务圆满完成，封堵恶意程序发送端 IP 地址 4000 余个英特尔称其 CPU Bug 只有 AMD 的一半Google Chrome 浏览器徽标8 ...",
+    "url": "https://segmentfault.com/a/1190000041366705",
+    "author": "snakesss",
+    "home_url": "https://segmentfault.com/u/snakesss",
+    "votes": "2",
     "rank": 17
   },
   {
@@ -158,114 +158,114 @@
     "url": "https://segmentfault.com/a/1190000041364460",
     "author": "Sunshine_Lin",
     "home_url": "https://segmentfault.com/u/user_ze46ouik",
-    "votes": "2",
+    "votes": "3",
     "rank": 18
   },
   {
-    "title": "Flutter 2.10 更新详解",
-    "description": "Flutter 2.10 版已正式发布！虽然⾃ 上次稳定版本发布 以来还不到两个⽉，即使在这么短的时间内，我们也已处理和关闭了 1843 个 Issue，合并了来⾃全球 155 位贡献者的 1525 个 PR。感谢⼤家在 2021 年末的假期期...",
-    "url": "https://segmentfault.com/a/1190000041364916",
-    "author": "Flutter",
-    "home_url": "https://segmentfault.com/u/flutter",
-    "votes": "2",
+    "title": "10个CSS技巧，极大提升用户体验",
+    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
+    "url": "https://segmentfault.com/a/1190000041361645",
+    "author": "前端小智",
+    "home_url": "https://segmentfault.com/u/minnanitkong",
+    "votes": "6",
     "rank": 19
   },
   {
-    "title": "配置化el-form的二次封装之思路分析附上代码可直接使用",
-    "description": "问题描述个人愚见编写代码其实就是：学习规则（看官方文档）使用规则（在使用的过程中进一步理解官方文档）最终基于原有底层官方文档规则再自定义新规则（封装新的规则，便于复用）所以本文讲述一下基于原有的el-...",
-    "url": "https://segmentfault.com/a/1190000041363226",
-    "author": "水冗水孚",
-    "home_url": "https://segmentfault.com/u/shuirongshui",
-    "votes": "1",
+    "title": "15个很有趣的开源项目推荐",
+    "description": "《视搭》是一个 视频可视化 搭建项目。您可以通过简单的拖拽方式快速生产一个短视频，使用方式就像易企秀或MAKA等 h5 搭建工具一样的简单。目前行业内罕有关于视频可视化搭建的开源项目，《视搭》是一个相对比较...",
+    "url": "https://segmentfault.com/a/1190000041363711",
+    "author": "TNTWEB",
+    "home_url": "https://segmentfault.com/u/tnfe",
+    "votes": "4",
     "rank": 20
   },
   {
-    "title": "实用WGCLOUD监测Redis运行状态教程",
-    "description": "介绍通过WGCLOUD来监测Redis运行的状态，端口，日志[链接]",
-    "url": "https://segmentfault.com/a/1190000041365459",
-    "author": "徐三刀",
-    "home_url": "https://segmentfault.com/u/9b3sps2b",
-    "votes": "1",
+    "title": "探讨一下To C营销页面服务端渲染的必要性以及其背后的原理",
+    "description": "最近无论是在公司还是自己研究的项目，都一直在搞 H5 页面服务端渲染方面的探索，因此本文来探讨一下服务端渲染的必要性以及其背后的原理。先来看几个问题To C 的 H5 为什么适合做 SSRTo C的营销H5页面的典型特点...",
+    "url": "https://segmentfault.com/a/1190000041376841",
+    "author": "前端森林",
+    "home_url": "https://segmentfault.com/u/fengshuan",
+    "votes": "2",
     "rank": 21
   },
   {
-    "title": "Element Plus 正式版发布啦！🎉🎉",
-    "description": "今天，我们非常高兴地宣布 Element Plus 稳定版正式发布。自第一个 commit 起，经过 1 年零 7 个月的持续迭代开发，总计 2635 commits，经过 256 位贡献者所提交的 2494 个 PR，137 个 Alpha 与 Beta 版本，在社...",
-    "url": "https://segmentfault.com/a/1190000041369261",
-    "author": "朱昆iamkun_com",
-    "home_url": "https://segmentfault.com/u/zhukuniamkun_com",
+    "title": "Flutter 2.10 更新详解",
+    "description": "Flutter 2.10 版已正式发布！虽然⾃ 上次稳定版本发布 以来还不到两个⽉，即使在这么短的时间内，我们也已处理和关闭了 1843 个 Issue，合并了来⾃全球 155 位贡献者的 1525 个 PR。感谢⼤家在 2021 年末的假期期...",
+    "url": "https://segmentfault.com/a/1190000041364916",
+    "author": "Flutter",
+    "home_url": "https://segmentfault.com/u/flutter",
     "votes": "2",
     "rank": 22
   },
   {
-    "title": "Go 泛型变更：约束太丑了，先移动到 x/exp 做实验性功能",
-    "description": "大家好，我是煎鱼。Go 泛型配套了各种标准库，像是常见的 maps、slices 泛型库。早期他们是长这样的： {代码...} 又或是： {代码...} 关注到里面的标准库 constraints，他就是今天变更的主角。他咋了呢？背景标准...",
-    "url": "https://segmentfault.com/a/1190000041368835",
-    "author": "煎鱼",
-    "home_url": "https://segmentfault.com/u/eddycjy",
-    "votes": "1",
+    "title": "低代码搞了个客户关系管理系统 CRM",
+    "description": "无远客户关系管理精简版，面向企业客户，支持客户打标签、销售漏斗、自定义销售阶段、自定义客户分类等等，你可以结合本公司的实际情况，进一步自主实现赢单后的销售绩效提成功能模块。",
+    "url": "https://segmentfault.com/a/1190000041371754",
+    "author": "dafanzhijian",
+    "home_url": "https://segmentfault.com/u/dafanzhijian",
+    "votes": "4",
     "rank": 23
   },
   {
-    "title": "Rust入门系列之环境准备 - Mac os篇",
-    "description": "安装直接按照官网的安装步骤进行即可 -> Rust官网Mac os通过 curl 安装 rustup (_rust 的安装器和版本管理工具_) {代码...} 在上面的安装过程中，还会自带安装 rust 的构建工具和包管理器 - cargo (_前端同学...",
-    "url": "https://segmentfault.com/a/1190000041363945",
-    "author": "木木剑光",
-    "home_url": "https://segmentfault.com/u/18227192769",
-    "votes": "1",
+    "title": "vue原理相关总结",
+    "description": "一、vue2.0的双向绑定是怎么实现的 {代码...} 二、数据不更新的问题 {代码...} 三、computed和watch和methods {代码...} 四、vue-router的模式区别 {代码...} 五、vuex解决了什么问题 {代码...} 六、nextTick是怎...",
+    "url": "https://segmentfault.com/a/1190000041374585",
+    "author": "雨花石",
+    "home_url": "https://segmentfault.com/u/yuhuashi_584a46acea21f",
+    "votes": "6",
     "rank": 24
   },
   {
-    "title": "如何在自己的系统嵌入WGCLOUD",
-    "description": "我结合我们项目的经验给大家说一下：1、在自己系统加一个菜单或按钮，命名就根据自己自定义了，当点击时候，跳转到WGCLOUD页面，这个办法是最简单的了。唯一不足之处是需要登录，不过我们可以选择浏览器记住密码...",
-    "url": "https://segmentfault.com/a/1190000041363136",
-    "author": "徐三刀",
-    "home_url": "https://segmentfault.com/u/9b3sps2b",
-    "votes": "1",
+    "title": "Element Plus 正式版发布啦！🎉🎉",
+    "description": "今天，我们非常高兴地宣布 Element Plus 稳定版正式发布。自第一个 commit 起，经过 1 年零 7 个月的持续迭代开发，总计 2635 commits，经过 256 位贡献者所提交的 2494 个 PR，137 个 Alpha 与 Beta 版本，在社...",
+    "url": "https://segmentfault.com/a/1190000041369261",
+    "author": "朱昆iamkun_com",
+    "home_url": "https://segmentfault.com/u/zhukuniamkun_com",
+    "votes": "2",
     "rank": 25
   },
   {
-    "title": "迷你版react代码实现",
-    "description": "代码结构在 React 代码执行前，JSX 会被 Babel 转换为 React.createElement 方法的调用，这里模拟React.createElement实现,.babelrc中需要配置一下",
-    "url": "https://segmentfault.com/a/1190000041365816",
-    "author": "HeiYanjing",
-    "home_url": "https://segmentfault.com/u/heiyanjing",
+    "title": "实用WGCLOUD监测Redis运行状态教程",
+    "description": "介绍通过WGCLOUD来监测Redis运行的状态，端口，日志[链接]",
+    "url": "https://segmentfault.com/a/1190000041365459",
+    "author": "徐三刀",
+    "home_url": "https://segmentfault.com/u/9b3sps2b",
     "votes": "1",
     "rank": 26
   },
   {
-    "title": "Jetpack DragAndDrop 库——拖放操作如此轻松！",
-    "description": "拖放 是最基本的手势操作，用户可以点击并按住图片、文本或其他数据元素，然后将其拖动至另一个应用 (或者同一个应用的其他位置) 并松手，即可将数据放置到新的位置上。手势通常在触摸屏上表现为长按，在使用鼠标...",
-    "url": "https://segmentfault.com/a/1190000041368817",
-    "author": "Android开发者",
-    "home_url": "https://segmentfault.com/u/androiddevs",
-    "votes": "1",
+    "title": "金3银4面试前，把自己弄成卷王！",
+    "description": "作者：小傅哥博客：[链接]沉淀、分享、成长，让自己和他人都能有所收获！😄一、快了，已经在做！卷王们，新的一年开始卷了吗！<div align=\"center\"> {代码...} </div>新年放假，捅了3次核酸...",
+    "url": "https://segmentfault.com/a/1190000041376019",
+    "author": "小傅哥",
+    "home_url": "https://segmentfault.com/u/fuzhengwei",
+    "votes": "2",
     "rank": 27
   },
   {
-    "title": "SpringBoot 项目规范笔记.2021",
-    "description": "应用系统开发时，后端服务需要考虑按照模块/微服务的划分原则来划分出多个SpringBoot模块，以便未来微服务化的重构。应用划分规范/原则如下：",
-    "url": "https://segmentfault.com/a/1190000041363998",
-    "author": "KerryWu",
-    "home_url": "https://segmentfault.com/u/kerrywu",
-    "votes": "1",
+    "title": "动手打造一款 canvas 排版引擎",
+    "description": "图片来源：[链接]本文作者：飞扬背景在线示例Demo作为前端开发尤其是偏 c 端的前端开发者（如微信小程序），相信大家都碰到过分享活动图片、分享海报图类似的功能一般这种需求的解决方案大体上可以分为以下几种：...",
+    "url": "https://segmentfault.com/a/1190000041372332",
+    "author": "云音乐技术团队",
+    "home_url": "https://segmentfault.com/u/musicfe",
+    "votes": "2",
     "rank": 28
   },
   {
-    "title": "Apache Druid 在 Shopee 的工程实践",
-    "description": "Apache Druid 是一款高性能的开源时序数据库，它适用于交互式体验的低延时查询分析场景。本文将主要分享 Apache Druid 在支撑 Shopee 相关核心业务 OLAP 实时分析方面的工程实践。随着 Shopee 业务不断发展，越来...",
-    "url": "https://segmentfault.com/a/1190000041369588",
-    "author": "Shopee技术团队",
-    "home_url": "https://segmentfault.com/u/techatshopee",
+    "title": "APM-监控子线程操作 UI",
+    "description": "一款监控子线程操纵 UI 的能力，也可以添加自定义的 API 进行监控（实现在子线程监控某些 API 的时候捕获具体堆栈信息，帮助定位问题）",
+    "url": "https://segmentfault.com/a/1190000041370532",
+    "author": "fantasticbaby",
+    "home_url": "https://segmentfault.com/u/fantasticbaby",
     "votes": "1",
     "rank": 29
   },
   {
-    "title": "DeepFaceDrawing: 使用草图生成人脸图像",
-    "description": "这篇文章的想法是设计一个应用程序来使用该面部草图来绘制一张真实的面部图像，该应用程序在警察、电影拍摄和面部彩绘中具有各种应用。这个想法的主要标准之一是它简单明了，非常易于使用，即使你不是一个好的画...",
-    "url": "https://segmentfault.com/a/1190000041368100",
-    "author": "deephub",
-    "home_url": "https://segmentfault.com/u/deephub",
+    "title": "【译】How I built a wind map with WebGL",
+    "description": "引子对风场可视化的效果感兴趣，搜资料的时候发现这篇文章，读了后觉得翻译一下以便再次查阅。原文：How I built a wind map with WebGLOriginMy GitHub正文查看我的基于 WebGL 的风场模拟演示！让我们深入了解它...",
+    "url": "https://segmentfault.com/a/1190000041367755",
+    "author": "XXHolic",
+    "home_url": "https://segmentfault.com/u/xxholic",
     "votes": "2",
     "rank": 30
   }

package/web/data/toutiao-30.json

@@ -1,4 +1,14 @@
 [
+  {
+    "title": "神器 Nginx 的学习手册 ( 建议收藏 )",
+    "description": "  转载：DevOps技术栈Nginx 是一个高性能的 HTTP 和反向代理服务器，特点是占用内存少，并发能力强，事实上 Nginx 的并发能力确实在同类型的网页服务器中表现较好。...",
+    "votes": "151",
+    "url": "/k/6f1qaso",
+    "avatar": "https://img.toutiao.io/subject/8e12ef64799649acbfd936883ef16c3c/thumb",
+    "avatarAlt": "服务架构及中台 - 独家号",
+    "subjectName": "服务架构及中台",
+    "homeUrl": "/subjects/26578"
+  },
   {
     "title": "Redis 很屌，不懂使用规范就糟蹋了",
     "description": "",
@@ -9,20 +19,10 @@
     "subjectName": "进击的程序猿",
     "homeUrl": "/subjects/24912"
   },
-  {
-    "title": "神器 Nginx 的学习手册 ( 建议收藏 )",
-    "description": "  转载：DevOps技术栈Nginx 是一个高性能的 HTTP 和反向代理服务器，特点是占用内存少，并发能力强，事实上 Nginx 的并发能力确实在同类型的网页服务器中表现较好。...",
-    "votes": "106",
-    "url": "/k/6f1qaso",
-    "avatar": "https://img.toutiao.io/subject/8e12ef64799649acbfd936883ef16c3c/thumb",
-    "avatarAlt": "服务架构及中台 - 独家号",
-    "subjectName": "服务架构及中台",
-    "homeUrl": "/subjects/26578"
-  },
   {
     "title": "据说看完这篇 JVM 要一小时",
     "description": "",
-    "votes": "100",
+    "votes": "101",
     "url": "/k/1dauixx",
     "avatar": "https://img.toutiao.io/subject/d9b0b833d7e44d38b958e8a6003d36b4/thumb",
     "avatarAlt": "浪客用react,java全栈 - 独家号",
@@ -52,7 +52,7 @@
   {
     "title": "从MVC到DDD的架构演进",
     "description": "",
-    "votes": "92",
+    "votes": "93",
     "url": "/k/c7mn7hz",
     "avatar": "https://img.toutiao.io/subject/ea8976fb047b483dacc34fd01e51d47e/thumb",
     "avatarAlt": "Java研发 - 独家号",
@@ -62,7 +62,7 @@
   {
     "title": "面渣逆袭：Java并发六十问，图文详解，快来看看你会多少道！",
     "description": "",
-    "votes": "90",
+    "votes": "93",
     "url": "/k/4ndh1gd",
     "avatar": "https://img.toutiao.io/subject/d42ad8a9192a430b9df44df9a6d383df/thumb",
     "avatarAlt": "三分恶 - 独家号",
@@ -102,13 +102,23 @@
   {
     "title": "阿里专家：如何画出优秀的架构图？",
     "description": "",
-    "votes": "71",
+    "votes": "73",
     "url": "/k/92sk26n",
     "avatar": "https://img.toutiao.io/subject/c34a137f55bf46c3a2cf63e3677a30b1/thumb",
     "avatarAlt": "Bloomingroses - 独家号",
     "subjectName": "Bloomingroses",
     "homeUrl": "/subjects/98777"
   },
+  {
+    "title": "作为研发Leader，如何做总结",
+    "description": "",
+    "votes": "74",
+    "url": "/k/1g7flto",
+    "avatar": "https://img.toutiao.io/subject/6fc0fabfe93146e28ff47aa9f908dee9/thumb",
+    "avatarAlt": "天行者YANG - 独家号",
+    "subjectName": "天行者YANG",
+    "homeUrl": "/subjects/199751"
+  },
   {
     "title": "优雅整洁的 Java 代码命名技巧，风之极·净化",
     "description": "",
@@ -120,24 +130,24 @@
     "homeUrl": "/subjects/132403"
   },
   {
-    "title": "作为研发Leader，如何做总结",
+    "title": "真香啊！接私活必备的 N 个开源项目（附源码合集第一期）！收藏走起！",
     "description": "",
-    "votes": "73",
-    "url": "/k/1g7flto",
-    "avatar": "https://img.toutiao.io/subject/6fc0fabfe93146e28ff47aa9f908dee9/thumb",
-    "avatarAlt": "天行者YANG - 独家号",
-    "subjectName": "天行者YANG",
-    "homeUrl": "/subjects/199751"
+    "votes": "72",
+    "url": "/k/he7umju",
+    "avatar": "https://img.toutiao.io/subject/8e12ef64799649acbfd936883ef16c3c/thumb",
+    "avatarAlt": "服务架构及中台 - 独家号",
+    "subjectName": "服务架构及中台",
+    "homeUrl": "/subjects/26578"
   },
   {
-    "title": "3万字 | 34 图 | Netty | 内核角度看IO模型",
+    "title": "支付系统架构设计详解",
     "description": "",
-    "votes": "69",
-    "url": "/k/zavpca4",
-    "avatar": "https://img.toutiao.io/subject/0a536810212f4f7c9c1f451fc9f55540/thumb",
-    "avatarAlt": "乱点技能树 - 独家号",
-    "subjectName": "乱点技能树",
-    "homeUrl": "/subjects/194141"
+    "votes": "64",
+    "url": "/k/5tx1zgw",
+    "avatar": "https://img.toutiao.io/subject/8e12ef64799649acbfd936883ef16c3c/thumb",
+    "avatarAlt": "服务架构及中台 - 独家号",
+    "subjectName": "服务架构及中台",
+    "homeUrl": "/subjects/26578"
   },
   {
     "title": "服务探活的五种方式",
@@ -170,24 +180,14 @@
     "homeUrl": "/subjects/14371"
   },
   {
-    "title": "真香啊！接私活必备的 N 个开源项目（附源码合集第一期）！收藏走起！",
-    "description": "",
-    "votes": "66",
-    "url": "/k/he7umju",
-    "avatar": "https://img.toutiao.io/subject/8e12ef64799649acbfd936883ef16c3c/thumb",
-    "avatarAlt": "服务架构及中台 - 独家号",
-    "subjectName": "服务架构及中台",
-    "homeUrl": "/subjects/26578"
-  },
-  {
-    "title": "支付系统架构设计详解",
-    "description": "",
-    "votes": "57",
-    "url": "/k/5tx1zgw",
-    "avatar": "https://img.toutiao.io/subject/8e12ef64799649acbfd936883ef16c3c/thumb",
-    "avatarAlt": "服务架构及中台 - 独家号",
-    "subjectName": "服务架构及中台",
-    "homeUrl": "/subjects/26578"
+    "title": "百度和米哈游的Golang面试经验分享",
+    "description": "最近面了两家公司的go技术岗位，一家百度，一家米哈游，面试的情况也不太乐观，现在分享一下面试中问的问题吧。两家都是采用线上面试的，当时没有录音，现在全靠自己的回忆来复盘一下了。百度...",
+    "votes": "62",
+    "url": "/k/q0sox0k",
+    "avatar": "https://img.toutiao.io/subject/de644bbb42b34c618fad49fb47759970/thumb",
+    "avatarAlt": "4k咖啡豆 - 独家号",
+    "subjectName": "4k咖啡豆",
+    "homeUrl": "/subjects/158649"
   },
   {
     "title": "原来这才是动态代理！！！",
@@ -210,14 +210,24 @@
     "homeUrl": "/subjects/136176"
   },
   {
-    "title": "百度和米哈游的Golang面试经验分享",
-    "description": "最近面了两家公司的go技术岗位，一家百度，一家米哈游，面试的情况也不太乐观，现在分享一下面试中问的问题吧。两家都是采用线上面试的，当时没有录音，现在全靠自己的回忆来复盘一下了。百度...",
-    "votes": "59",
-    "url": "/k/q0sox0k",
-    "avatar": "https://img.toutiao.io/subject/de644bbb42b34c618fad49fb47759970/thumb",
-    "avatarAlt": "4k咖啡豆 - 独家号",
-    "subjectName": "4k咖啡豆",
-    "homeUrl": "/subjects/158649"
+    "title": "嗨，我想和你分享一下千万级支付对账系统是怎么设计的。",
+    "description": "",
+    "votes": "55",
+    "url": "/k/44s6x73",
+    "avatar": "https://img.toutiao.io/subject/8e12ef64799649acbfd936883ef16c3c/thumb",
+    "avatarAlt": "服务架构及中台 - 独家号",
+    "subjectName": "服务架构及中台",
+    "homeUrl": "/subjects/26578"
+  },
+  {
+    "title": "如何撰写好的技术方案设计-真实案例干货分享",
+    "description": "",
+    "votes": "55",
+    "url": "/k/0f5fv4t",
+    "avatar": "https://img.toutiao.io/subject/bd96da5f87da45b8a1b5f3e6715a6482/thumb",
+    "avatarAlt": "浅谈架构 - 独家号",
+    "subjectName": "浅谈架构",
+    "homeUrl": "/subjects/379488"
   },
   {
     "title": "超快速定位OOM，值得收藏",
@@ -229,16 +239,6 @@
     "subjectName": "进击的程序猿",
     "homeUrl": "/subjects/24912"
   },
-  {
-    "title": "嗨，我想和你分享一下千万级支付对账系统是怎么设计的。",
-    "description": "",
-    "votes": "54",
-    "url": "/k/44s6x73",
-    "avatar": "https://img.toutiao.io/subject/8e12ef64799649acbfd936883ef16c3c/thumb",
-    "avatarAlt": "服务架构及中台 - 独家号",
-    "subjectName": "服务架构及中台",
-    "homeUrl": "/subjects/26578"
-  },
   {
     "title": "面试官问: Redis为什么是单线程、及高并发快的原因?",
     "description": "",