@wcj/github-rank 22.7.28 → 22.7.31

package/web/data/sifou-daily.json

@@ -1,110 +1,29 @@
 [
   {
-    "title": "用好 DIV 和 API，在前端系统中轻松嵌入数据分析模块",
-    "description": "在数字化转型潮流席卷各大行业的今天，越来越多的企业开始重视 BI（商业智能）技术的部署和应用，期望从不断增长的数据资源中获得更多业务价值，从而提升利润、控制风险、降低成本。BI 能整合、组织和分析数据，...",
-    "url": "https://segmentfault.com/a/1190000042229574",
-    "author": "六一",
-    "home_url": "https://segmentfault.com/u/suicidal_romantic_scoundrel",
-    "votes": "1",
+    "title": "Wuzzle，不 eject 也能定制 create-react-app 创建的 React 应用",
+    "description": "作为 React 官方维护的命令行工具，create-react-app（简称 CRA）能够极其轻松地创建配置完备的 React 应用，帮助使用者快速进入 React 开发。它的最大缺憾是创建的应用不能随心所欲地定制配置。想要定制，只能 e...",
+    "url": "https://segmentfault.com/a/1190000042244854",
+    "author": "乌柏木",
+    "home_url": "https://segmentfault.com/u/wubomu",
+    "votes": "13",
     "rank": 1
   },
   {
-    "title": "低代码是开发的未来吗？浅谈低代码平台",
-    "description": "低代码的热潮在几年前就火过，从阿里钉钉跨平台协作方式，再到飞书上的审批流程，以及目前我们接触到的表单审批、投票的模板，这些都是关于低代码的实现方式。随着企业数字化转型和云计算的不断发展，低代码平台...",
-    "url": "https://segmentfault.com/a/1190000042229850",
-    "author": "云叔_又拍云",
-    "home_url": "https://segmentfault.com/u/yunshu_blog",
-    "votes": "4",
-    "rank": 2
-  },
-  {
-    "title": "2021，字节最值得关注的10个开源项目",
-    "description": "在软件开发行业，【开源是让技术走向普及、下沉落地的不二法门】。开源软件系统性地利用开放式开发和分布式同行评审，不仅降低了开发成本，还提高了软件质量。 以下是字节跳动技术团队2021年开源的项目，有哪些值...",
-    "url": "https://segmentfault.com/a/1190000042231726",
-    "author": "xiangzhihong",
-    "home_url": "https://segmentfault.com/u/xiangzhihong",
-    "votes": "3",
-    "rank": 3
-  },
-  {
-    "title": "Charles使用教程",
-    "description": "Charles 是一个 HTTP 和 SOCKS 代理服务器。代理请求和响应使 Charles 能够在请求从客户端传递到服务器时检查和更改请求，以及从服务器传递到客户端时的响应。",
-    "url": "https://segmentfault.com/a/1190000042229767",
-    "author": "浅夏晴空",
-    "home_url": "https://segmentfault.com/u/qianxiaqingkong",
-    "votes": "1",
-    "rank": 4
-  },
-  {
-    "title": "Go 程序太大了，能要个延迟初始化不？",
-    "description": "大家好，我是煎鱼。在公司的不断发展中，一开始大多是大单体，改造慢了，一个仓库会有使用几十年的情况，仓库的规模基本是不断增大的过程。影响之一就是会应用程序打包后的体积越来越大，不知道被用哪里去了...今...",
-    "url": "https://segmentfault.com/a/1190000042229328",
-    "author": "煎鱼",
-    "home_url": "https://segmentfault.com/u/eddycjy",
-    "votes": "2",
-    "rank": 5
-  },
-  {
-    "title": "梳理 Webpack 知识体系与学习资源推荐",
-    "description": "前言关于 Webpack 之前已经有写过几篇零散的文章:由零开始使用 Webpack 来搭建 React 项目Webpack Sourcemap 回顾升级 Webpack5 实践如何编写一个 Webpack Loader如何编写一个 Webpack Plugin而本文的内容则不会...",
-    "url": "https://segmentfault.com/a/1190000042232699",
-    "author": "JackySummer",
-    "home_url": "https://segmentfault.com/u/jackysummer",
-    "votes": "2",
-    "rank": 6
-  },
-  {
-    "title": "mysql 最大建议行数2000w,靠谱吗？",
-    "description": "作为在后端圈开车的多年老司机，是不是经常听到过，“mysql 单表最好不要超过2000w”,“单表超过2000w 就要考虑数据迁移了”，“你这个表数据都马上要到2000w 了，难怪查询速度慢”",
-    "url": "https://segmentfault.com/a/1190000042232098",
-    "author": "京东科技开发者",
-    "home_url": "https://segmentfault.com/u/jdcdevloper",
+    "title": "JVM诊断命令jcmd介绍",
+    "description": "从JDK7开始，jdk提供了一个方便扩展的诊断命令jcmd，用来取代之前比较分散的jdk基础命令，如jps、jstack、jmap、jinfo等，并且jdk添加新的诊断功能，也会通过jcmd提供，所以还是有必要将这个命令熟悉起来的。",
+    "url": "https://segmentfault.com/a/1190000042245884",
+    "author": "打码日志",
+    "home_url": "https://segmentfault.com/u/codelogs",
     "votes": "1",
-    "rank": 7
-  },
-  {
-    "title": "海明码的原理",
-    "description": "海明码基本思想是分组偶校验，由信息位(n)和校验位(k)组成，海明码的校验位计算公式：2^k >= n+k+12^k 表示：k 个校验位对应 2^k 种状态n + k + 1 表示：n + k 代表任何一位都可能出错，1 代表一种正确的状态...",
-    "url": "https://segmentfault.com/a/1190000042228062",
-    "author": "uccs",
-    "home_url": "https://segmentfault.com/u/tiantian_5ada7e81e50d7",
-    "votes": "1",
-    "rank": 8
-  },
-  {
-    "title": "GAN：生成对抗网络 Generative Adversarial Networks",
-    "description": "对于生成对抗网络GAN，一个简单的理解是可以将其看做博弈的过程，我们可以将生成模型和判别模型看作博弈的双方，比如在犯罪分子造假币和警察识别假币的过程中：",
-    "url": "https://segmentfault.com/a/1190000042227403",
-    "author": "代码的路",
-    "home_url": "https://segmentfault.com/u/zbzcdzf",
-    "votes": "1",
-    "rank": 9
-  },
-  {
-    "title": "收藏！0 基础开源数据可视化平台 FlyFish 大屏开发指南",
-    "description": "作者：Rise Hao，云智慧前端开发工程师。开源项目数据可视化平台 FlyFish Maintainer。主攻可视化大屏方向，专注工程研发的降本增质、增效，在可视化方面具有丰富的开发经验 。",
-    "url": "https://segmentfault.com/a/1190000042229920",
-    "author": "云智慧技术社区",
-    "home_url": "https://segmentfault.com/u/yunzhihuijishushequ",
-    "votes": "1",
-    "rank": 10
-  },
-  {
-    "title": "SegmentFault 思否技术周刊 -- Spring Boot 是否很难用？",
-    "description": "关于 Spring Boot + Vue3 的动态菜单，松哥之前已经写了两篇文章了，这两篇文章主要是从代码上和大家分析动态菜单最终的实现方式，但是还是有小伙伴觉得没太看明白，感觉缺乏一个提纲挈领的思路，所以，今天松哥...",
-    "url": "https://segmentfault.com/a/1190000042228467",
-    "author": "Beverly",
-    "home_url": "https://segmentfault.com/u/beverly0",
-    "votes": "1",
-    "rank": 11
+    "rank": 2
   },
   {
-    "title": "typescript隐式类型转换图，很直观详细",
-    "description": "1、unknown是所有类型的父类型，其他类型都可以赋值给 unknown {代码...} 2、never 是任何类型的子类型，可以赋给任何类型 {代码...} 3、any可以赋值给任何类型，任何类型可以赋值给any，除了any不能赋值给never(...",
-    "url": "https://segmentfault.com/a/1190000042227498",
-    "author": "寒水寺一禅",
-    "home_url": "https://segmentfault.com/u/xiaolizideyitian",
+    "title": "Linux系列之进程管理",
+    "description": "前言进程是正在运行的程序，Linux系统通常有数百个进程同时运行。本文就来介绍下Linux是如何进行进程管理的。我们可以看到：查看进程（Viewing processes）查找进程（Finding processes）管理进程（Managing proc...",
+    "url": "https://segmentfault.com/a/1190000042245797",
+    "author": "chuck",
+    "home_url": "https://segmentfault.com/u/chuckqu",
     "votes": "1",
-    "rank": 12
+    "rank": 3
   }
 ]

package/web/data/sifou-monthly.json

@@ -14,7 +14,7 @@
     "url": "https://segmentfault.com/a/1190000042065365",
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "20",
+    "votes": "21",
     "rank": 2
   },
   {
@@ -23,7 +23,7 @@
     "url": "https://segmentfault.com/a/1190000042217200",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "18",
+    "votes": "19",
     "rank": 3
   },
   {
@@ -53,23 +53,14 @@
     "votes": "12",
     "rank": 6
   },
-  {
-    "title": "视觉还原小技巧！CSS 实现角标效果",
-    "description": "欢迎关注微信公众号： 前端侦探最近在项目中碰到一个这样的角标设计，如下像这种可以文字可变化，自适应大小的布局，自然首选 CSS 了~下面看看如何实现的（两分钟读完）一、圆角矩形和三角形从设计上可以拆分成两...",
-    "url": "https://segmentfault.com/a/1190000042038058",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "17",
-    "rank": 7
-  },
   {
     "title": "使用CSS background实现炫酷悬停效果",
     "description": "日常开发过程中，会遇到不少按钮鼠标悬停的效果，实现这类悬停效果的方式有很多，借助伪元素，CSS3变换及过渡等都可以实现。今天的文章将使用背景色实现类似的效果，当我们遇到一个问题时，你的脑海中的方案不止...",
     "url": "https://segmentfault.com/a/1190000042069856",
     "author": "南城大前端",
     "home_url": "https://segmentfault.com/u/nanchengfe",
-    "votes": "13",
-    "rank": 8
+    "votes": "14",
+    "rank": 7
   },
   {
     "title": "高阶切图技巧！基于单张图片的任意颜色转换",
@@ -78,16 +69,7 @@
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
     "votes": "12",
-    "rank": 9
-  },
-  {
-    "title": "SegmentFault 思否技术周刊 -- 超实用 Vue 合集，请查收",
-    "description": "Vue.js 是一个用于创建 web 交互界面的工具。其特点是简洁 HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。数据驱动 自动追踪依赖的模板表达式和计算属性。组件化 用解耦、可复用的组件来构造界面。轻...",
-    "url": "https://segmentfault.com/a/1190000042048392",
-    "author": "Beverly",
-    "home_url": "https://segmentfault.com/u/beverly0",
-    "votes": "13",
-    "rank": 10
+    "rank": 8
   },
   {
     "title": "动画合成小技巧！CSS 实现动感的倒计时效果",
@@ -95,8 +77,17 @@
     "url": "https://segmentfault.com/a/1190000042094549",
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "17",
-    "rank": 11
+    "votes": "18",
+    "rank": 9
+  },
+  {
+    "title": "CSS color-scheme 和夜间模式",
+    "description": "欢迎关注微信公众号：前端侦探介绍一个和深色模式相关的CSS属性：color-scheme一、什么是 color-scheme？color-scheme顾名思义，即为“配色方案”，在系统中指的是“白天模式”和“夜间模式”。使用这个属性可以轻松的...",
+    "url": "https://segmentfault.com/a/1190000042184163",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "15",
+    "rank": 10
   },
   {
     "title": "熬夜爆肝整理的一份elasticsearch中文文档手册",
@@ -105,17 +96,35 @@
     "author": "7small7",
     "home_url": "https://segmentfault.com/u/7small7",
     "votes": "13",
+    "rank": 11
+  },
+  {
+    "title": "超酷炫的转场动画？CSS 轻松拿下！",
+    "description": "在 WeGame 的 PC 端官网首页，有着非常多制作精良的基于滚动的动画效果。这里我简单截取其中 2 个比较有意思的转场动画，大家感受感受。转场动画 1：转场动画 2：是不是挺有意思的，整个动画的衔接是基于滚轮的滚...",
+    "url": "https://segmentfault.com/a/1190000042184211",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "15",
     "rank": 12
   },
   {
-    "title": "CSS color-scheme 和夜间模式",
-    "description": "欢迎关注微信公众号：前端侦探介绍一个和深色模式相关的CSS属性：color-scheme一、什么是 color-scheme？color-scheme顾名思义，即为“配色方案”，在系统中指的是“白天模式”和“夜间模式”。使用这个属性可以轻松的...",
-    "url": "https://segmentfault.com/a/1190000042184163",
+    "title": "今҈天҈真҈是҈热҈化҈了҈！",
+    "description": "欢迎关注我的公众号：前端侦探今天真是太热了，不信你看标题今҈天҈真҈是҈热҈化҈了҈！也可以查看下面截图相信大家最近都能看到这样“热化了”的标题。那么，这是如何实现的呢？CSS 可以实现类似的效果吗？一起看看吧...",
+    "url": "https://segmentfault.com/a/1190000042217446",
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "13",
     "rank": 13
   },
+  {
+    "title": "社区维基：将你的问答捐赠给社区",
+    "description": "小王初学编程的时候，在 SegmentFault 提出了许多相关的问题。在社区热心人的帮助下，小王的问题一个个得到了解决，编程技术进步神速。",
+    "url": "https://segmentfault.com/a/1190000042203704",
+    "author": "fenbox",
+    "home_url": "https://segmentfault.com/u/fenbox",
+    "votes": "10",
+    "rank": 14
+  },
   {
     "title": "PHP后端面试85问",
     "description": "替换原则(the Liskov Substitution Principle LSP) ：子类应当可以替换父类并出现在父类能够出现的任何地方。",
@@ -123,34 +132,16 @@
     "author": "IT小马",
     "home_url": "https://segmentfault.com/u/itxiaoma",
     "votes": "9",
-    "rank": 14
-  },
-  {
-    "title": "今҈天҈真҈是҈热҈化҈了҈！",
-    "description": "欢迎关注我的公众号：前端侦探今天真是太热了，不信你看标题今҈天҈真҈是҈热҈化҈了҈！也可以查看下面截图相信大家最近都能看到这样“热化了”的标题。那么，这是如何实现的呢？CSS 可以实现类似的效果吗？一起看看吧...",
-    "url": "https://segmentfault.com/a/1190000042217446",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "12",
     "rank": 15
   },
-  {
-    "title": "超酷炫的转场动画？CSS 轻松拿下！",
-    "description": "在 WeGame 的 PC 端官网首页，有着非常多制作精良的基于滚动的动画效果。这里我简单截取其中 2 个比较有意思的转场动画，大家感受感受。转场动画 1：转场动画 2：是不是挺有意思的，整个动画的衔接是基于滚轮的滚...",
-    "url": "https://segmentfault.com/a/1190000042184211",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "12",
-    "rank": 16
-  },
   {
     "title": "如何提出一个高质量的问题？",
     "description": "看到标题的一瞬间，你或许在想 “什么样的问题算是好问题？”，在思否，每天或多或少都有十几个（休息日除外）新的问题被提出来，而这里面充斥着不少的 “质量” 问题。",
     "url": "https://segmentfault.com/a/1190000042182354",
     "author": "唯一丶",
     "home_url": "https://segmentfault.com/u/weiyi_5b04fb4aa815a",
-    "votes": "10",
-    "rank": 17
+    "votes": "11",
+    "rank": 16
   },
   {
     "title": "试着换个角度理解低代码平台设计的本质",
@@ -159,7 +150,7 @@
     "author": "pingan8787",
     "home_url": "https://segmentfault.com/u/pingan8787",
     "votes": "9",
-    "rank": 18
+    "rank": 17
   },
   {
     "title": "一个简洁、强大、可扩展的前端项目架构是什么样的？",
@@ -168,7 +159,7 @@
     "author": "卡颂",
     "home_url": "https://segmentfault.com/u/kasong",
     "votes": "10",
-    "rank": 19
+    "rank": 18
   },
   {
     "title": "webpack 拆包：关于 splitChunks 的几个重点属性解析",
@@ -177,15 +168,24 @@
     "author": "deepfunc",
     "home_url": "https://segmentfault.com/u/deepfunc",
     "votes": "6",
+    "rank": 19
+  },
+  {
+    "title": "【分享】从Mybatis源码中，学习到的10种设计模式",
+    "description": "你说的没错，但你天天写CRUD，你觉得 烦不？ 慌不？ 是不是既担心自己没有得到技术成长，也害怕将来没法用这些都是CRUD的项目去参加；述职、晋升、答辩，甚至可能要被迫面试时，自己手里一点干货也没有的情况。",
+    "url": "https://segmentfault.com/a/1190000042183733",
+    "author": "小傅哥",
+    "home_url": "https://segmentfault.com/u/fuzhengwei",
+    "votes": "9",
     "rank": 20
   },
   {
-    "title": "Vue项目之使用EditorConfig, Eslint和Prettier实现代码规范",
-    "description": "每个人的代码风格不同，比如有的人代码缩进喜欢用Tab，有的人喜欢用Space；有的人代码语句后会加上分号，有的人则不加。并且不同的人使用的开发工具也不同，有的人喜欢使用WebStorm，有的人喜欢用VSCode。。。如...",
-    "url": "https://segmentfault.com/a/1190000042044168",
-    "author": "玛尔斯通",
-    "home_url": "https://segmentfault.com/u/zhouqichao",
-    "votes": "12",
+    "title": "一步步带你搞懂虚拟 DOM 的工作原理",
+    "description": "React 和 Vue 中都有虚拟 DOM 的概念，我们应该如何理解和掌握虚拟 DOM 的精髓呢？我推荐大家学习 Snabbdom 这个项目。Snabbdom 是一个虚拟 DOM 实现库，推荐的原因一是代码比较少，核心代码只有几百行；二是 Vue...",
+    "url": "https://segmentfault.com/a/1190000042195199",
+    "author": "deepfunc",
+    "home_url": "https://segmentfault.com/u/deepfunc",
+    "votes": "11",
     "rank": 21
   },
   {
@@ -198,21 +198,21 @@
     "rank": 22
   },
   {
-    "title": "又拍云 Redis 的改进之路",
-    "description": "作为推出国内首创可编程 CDN 服务的专业云服务提供商，又拍云利用 CDN 边缘网络规模和性能，允许客户自定义编写规则来满足常用业务场景。而为了保证这些源数据，如边缘重定向、请求限速、自定义错误页面、访问防...",
-    "url": "https://segmentfault.com/a/1190000042048198",
-    "author": "云叔_又拍云",
-    "home_url": "https://segmentfault.com/u/yunshu_blog",
-    "votes": "7",
+    "title": "Nginx 实战核心知识点整理（上）",
+    "description": "Nginx 作为一款高性能的代理软件，在工作中常被用做负载均衡器、正向反向代理。最近在看了一个关于 Nginx 的视频，老师讲得很不错。笔者也记录了一下整套课程的一些重点和自己的理解。",
+    "url": "https://segmentfault.com/a/1190000042070687",
+    "author": "Rhythm_2019",
+    "home_url": "https://segmentfault.com/u/rhythm_2019",
+    "votes": "8",
     "rank": 23
   },
   {
-    "title": "搞懂虚拟 DOM 看这一篇就够了",
-    "description": "React 和 Vue 中都有虚拟 DOM，我们应该如何理解和掌握虚拟 DOM 的精髓呢？我推荐大家学习 Snabbdom 这个项目。Snabbdom 是一个虚拟 DOM 实现库，推荐的原因一是代码比较少，核心代码只有几百行；二是 Vue 就是借...",
-    "url": "https://segmentfault.com/a/1190000042195199",
-    "author": "deepfunc",
-    "home_url": "https://segmentfault.com/u/deepfunc",
-    "votes": "10",
+    "title": "梳理 Webpack 知识体系与学习资源推荐",
+    "description": "前言关于 Webpack 之前已经有写过几篇零散的文章:由零开始使用 Webpack 来搭建 React 项目Webpack Sourcemap 回顾升级 Webpack5 实践如何编写一个 Webpack Loader如何编写一个 Webpack Plugin而本文的内容则不会...",
+    "url": "https://segmentfault.com/a/1190000042232699",
+    "author": "JackySummer",
+    "home_url": "https://segmentfault.com/u/jackysummer",
+    "votes": "11",
     "rank": 24
   },
   {
@@ -225,23 +225,14 @@
     "rank": 25
   },
   {
-    "title": "几百行代码实现一个 JSON 解析器",
-    "description": "以前我也有思考过它是如何实现的，过程中一旦和编译原理扯上关系就不由自主的劝退了；但经过这段时间的实践我发现实现一个 JSON 解析器似乎也不困难，只是运用到了编译原理前端的部分知识就完全足够了。",
-    "url": "https://segmentfault.com/a/1190000042042002",
-    "author": "crossoverJie",
-    "home_url": "https://segmentfault.com/u/crossoverjie",
-    "votes": "5",
+    "title": "通向架子工的前端开发利器推荐",
+    "description": "01：thunderclient: VSCode 中的 postmanVSCode 的一个插件，在 VSCode 中管理请求资源，如同 postman 一样。它支持与 postman 兼容的格式，可导出为 postman Collection。02：Apifox, 团队 API 管理利器Apifox，...",
+    "url": "https://segmentfault.com/a/1190000042204295",
+    "author": "shanyue",
+    "home_url": "https://segmentfault.com/u/xiange",
+    "votes": "8",
     "rank": 26
   },
-  {
-    "title": "Nginx 实战核心知识点整理（上）",
-    "description": "Nginx 作为一款高性能的代理软件，在工作中常被用做负载均衡器、正向反向代理。最近在看了一个关于 Nginx 的视频，老师讲得很不错。笔者也记录了一下整套课程的一些重点和自己的理解。",
-    "url": "https://segmentfault.com/a/1190000042070687",
-    "author": "Rhythm_2019",
-    "home_url": "https://segmentfault.com/u/rhythm_2019",
-    "votes": "7",
-    "rank": 27
-  },
   {
     "title": "面试官：主说 Git Rebase 和 Git Merge 差异",
     "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
@@ -249,16 +240,16 @@
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
     "votes": "8",
-    "rank": 28
+    "rank": 27
   },
   {
-    "title": "热乎乎的前端\"数字\" 转换 \"货币字符串\", 如此有趣的知识来啦 (Intl.NumberFormat)",
-    "description": "这是一个由我编写的轻量级数字转货币字符串插件, 因为发现各个国家的货币相关知识很有趣, 并且当前市场上相关插件比较老, 所以也想与你分享这些有趣知识。",
-    "url": "https://segmentfault.com/a/1190000042037852",
-    "author": "lulu_up",
-    "home_url": "https://segmentfault.com/u/lulu_up",
-    "votes": "12",
-    "rank": 29
+    "title": "搭建前端监控，采集用户行为的 N 种姿势",
+    "description": "上一篇我们详细介绍了前端如何采集异常数据。采集异常数据是为了随时监测线上项目的运行情况，发现问题及时修复。在很多场景下，除了异常监控有用，收集用户的行为数据同样有意义。",
+    "url": "https://segmentfault.com/a/1190000042194426",
+    "author": "杨成功",
+    "home_url": "https://segmentfault.com/u/ruidoc",
+    "votes": "8",
+    "rank": 28
   },
   {
     "title": "Nginx部署配置",
@@ -267,6 +258,15 @@
     "author": "MangoGoing",
     "home_url": "https://segmentfault.com/u/nulidexiaocongmang",
     "votes": "5",
+    "rank": 29
+  },
+  {
+    "title": "从原生 JavaScript 到 React",
+    "description": "React 是一个用于构建用户界面的 JavaScript 框架。它可用于通过动态操作页面内容来创建 JavaScript 应用程序。浏览器已经提供了在页面中创建元素的 API，即 DOM，所以新手可能想知道 React 带来了什么以及它与 D...",
+    "url": "https://segmentfault.com/a/1190000042196411",
+    "author": "Yujiaao",
+    "home_url": "https://segmentfault.com/u/yujiaao",
+    "votes": "7",
     "rank": 30
   }
 ]