@wcj/github-rank 22.10.20 → 22.10.21

package/web/sifou-monthly.html

@@ -116,7 +116,7 @@
     
     
   </h1>
-  <div class="time">Last cache created on 2022/10/20 by 
+  <div class="time">Last cache created on 2022/10/21 by 
     
     
     
@@ -201,7 +201,7 @@
     <div class="info">
       <div class="rank">
         <span title="Ranking 3">3</span>
-        <a href="https://segmentfault.com/a/1190000042517595" target="_blank" title="那些你不知道的炫酷按钮交互效果">那些你不知道的炫酷按钮交互效果</a>
+        <a href="https://segmentfault.com/a/1190000042643893" target="_blank" title="CSS 绘制一只思否猫">CSS 绘制一只思否猫</a>
       </div>
       <div class="sub-title followers">
         
@@ -215,12 +215,12 @@
           <span>22</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/nanchengfe"  title="Programming Language">
-          <span>南城大前端</span>
+        <a target="_blank" href="https://segmentfault.com/u/xboxyan"  title="Programming Language">
+          <span>XboxYan</span>
         </a>
       </div>
       <div class="details">
-        在日常开发中肯定都遇到过不少有按钮交互的地方，但你有用到什么炫酷的交互效果吗？日常开发中想必最多的就是点击按钮背景文字变色，阴影，按钮按下，加载中之类的效果，相对都比较平平无奇，都是一些按部就班的...
+        欢迎关注我的公众号：前端侦探练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只思否猫？思否猫，SegmentFault 思否的吉祥物，是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt;...
       </div>
     </div>
   </li>
@@ -229,7 +229,7 @@
     <div class="info">
       <div class="rank">
         <span title="Ranking 4">4</span>
-        <a href="https://segmentfault.com/a/1190000042513947" target="_blank" title="单标签实现复杂的棋盘布局">单标签实现复杂的棋盘布局</a>
+        <a href="https://segmentfault.com/a/1190000042517595" target="_blank" title="那些你不知道的炫酷按钮交互效果">那些你不知道的炫酷按钮交互效果</a>
       </div>
       <div class="sub-title followers">
         
@@ -240,15 +240,15 @@
               <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
             </g>
           </svg>
-          <span>15</span>
+          <span>23</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/chokcoco"  title="Programming Language">
-          <span>chokcoco</span>
+        <a target="_blank" href="https://segmentfault.com/u/nanchengfe"  title="Programming Language">
+          <span>南城大前端</span>
         </a>
       </div>
       <div class="details">
-        其实，对于一个页面的布局而言，标签越少不一定是好事，我们在考虑 DOM 的消耗的同时，也需要关注代码的可读性，以及后续基于这个布局的制作的交互的难易性等等。
+        在日常开发中肯定都遇到过不少有按钮交互的地方，但你有用到什么炫酷的交互效果吗？日常开发中想必最多的就是点击按钮背景文字变色，阴影，按钮按下，加载中之类的效果，相对都比较平平无奇，都是一些按部就班的...
       </div>
     </div>
   </li>
@@ -257,7 +257,7 @@
     <div class="info">
       <div class="rank">
         <span title="Ranking 5">5</span>
-        <a href="https://segmentfault.com/a/1190000042584599" target="_blank" title="一个被忽略的前端细分领域">一个被忽略的前端细分领域</a>
+        <a href="https://segmentfault.com/a/1190000042513947" target="_blank" title="单标签实现复杂的棋盘布局">单标签实现复杂的棋盘布局</a>
       </div>
       <div class="sub-title followers">
         
@@ -268,15 +268,15 @@
               <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
             </g>
           </svg>
-          <span>16</span>
+          <span>15</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/kasong"  title="Programming Language">
-          <span>卡颂</span>
+        <a target="_blank" href="https://segmentfault.com/u/chokcoco"  title="Programming Language">
+          <span>chokcoco</span>
         </a>
       </div>
       <div class="details">
-        大家好，我卡颂。回想下你学新技术的主要途径是什么？看书？看技术文档？看博文？看视频？归纳起来，无外乎文字、视频两种形式。从纸媒时代到互联网时代，再到移动互联网时代，虽然信息的载体发生变化，但信息的...
+        其实，对于一个页面的布局而言，标签越少不一定是好事，我们在考虑 DOM 的消耗的同时，也需要关注代码的可读性，以及后续基于这个布局的制作的交互的难易性等等。
       </div>
     </div>
   </li>
@@ -285,7 +285,7 @@
     <div class="info">
       <div class="rank">
         <span title="Ranking 6">6</span>
-        <a href="https://segmentfault.com/a/1190000042509082" target="_blank" title="50天用vue3完成了50个web项目，我学到了什么?">50天用vue3完成了50个web项目，我学到了什么?</a>
+        <a href="https://segmentfault.com/a/1190000042584599" target="_blank" title="一个被忽略的前端细分领域">一个被忽略的前端细分领域</a>
       </div>
       <div class="sub-title followers">
         
@@ -296,15 +296,15 @@
               <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
             </g>
           </svg>
-          <span>20</span>
+          <span>16</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/xishui_5ac9a340a5484"  title="Programming Language">
-          <span>夕水</span>
+        <a target="_blank" href="https://segmentfault.com/u/kasong"  title="Programming Language">
+          <span>卡颂</span>
         </a>
       </div>
       <div class="details">
-        通过本文的50个web示例你将学到:Vue3核心基础语法和进阶语法less核心基础语法和进阶语法scss核心基础语法和进阶语法1.Expanding Cards效果如图所示:源码在线示例学到了什么?JavascriptVue ref方法定义基本响应式...
+        大家好，我卡颂。回想下你学新技术的主要途径是什么？看书？看技术文档？看博文？看视频？归纳起来，无外乎文字、视频两种形式。从纸媒时代到互联网时代，再到移动互联网时代，虽然信息的载体发生变化，但信息的...
       </div>
     </div>
   </li>
@@ -313,7 +313,7 @@
     <div class="info">
       <div class="rank">
         <span title="Ranking 7">7</span>
-        <a href="https://segmentfault.com/a/1190000042581816" target="_blank" title="35+，如果面试让我手写红黑树！">35+，如果面试让我手写红黑树！</a>
+        <a href="https://segmentfault.com/a/1190000042632786" target="_blank" title="思否猫拼接怪编辑器">思否猫拼接怪编辑器</a>
       </div>
       <div class="sub-title followers">
         
@@ -327,12 +327,12 @@
           <span>11</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/fuzhengwei"  title="Programming Language">
-          <span>小傅哥</span>
+        <a target="_blank" href="https://segmentfault.com/u/wangzc996"  title="Programming Language">
+          <span>JenK</span>
         </a>
       </div>
       <div class="details">
-        为啥，面试官那么喜欢让你聊聊 HashMap？因为 HashMap 涉及的东西广，用到的数据结构多，问题延展性好，一个 HashMap 就能聊下来80%的数据结构了。而且面试 HashMap 能通过你对红黑树的了解定位出你哪个级别的研...
+        1024程序员节马上就要来了，我们借着这个机会实现一个社区的吉祥物思否猫的编辑器，暂时起名【思否猫拼接怪】,唯一的遗憾就是素材不是精确到胳膊腿的
       </div>
     </div>
   </li>
@@ -341,7 +341,7 @@
     <div class="info">
       <div class="rank">
         <span title="Ranking 8">8</span>
-        <a href="https://segmentfault.com/a/1190000042632786" target="_blank" title="思否猫拼接怪编辑器">思否猫拼接怪编辑器</a>
+        <a href="https://segmentfault.com/a/1190000042581816" target="_blank" title="35+，如果面试让我手写红黑树！">35+，如果面试让我手写红黑树！</a>
       </div>
       <div class="sub-title followers">
         
@@ -352,15 +352,15 @@
               <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
             </g>
           </svg>
-          <span>10</span>
+          <span>12</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/wangzc996"  title="Programming Language">
-          <span>JenK</span>
+        <a target="_blank" href="https://segmentfault.com/u/fuzhengwei"  title="Programming Language">
+          <span>小傅哥</span>
         </a>
       </div>
       <div class="details">
-        1024程序员节马上就要来了，我们借着这个机会实现一个社区的吉祥物思否猫的编辑器，暂时起名【思否猫拼接怪】,唯一的遗憾就是素材不是精确到胳膊腿的
+        为啥，面试官那么喜欢让你聊聊 HashMap？因为 HashMap 涉及的东西广，用到的数据结构多，问题延展性好，一个 HashMap 就能聊下来80%的数据结构了。而且面试 HashMap 能通过你对红黑树的了解定位出你哪个级别的研...
       </div>
     </div>
   </li>
@@ -397,34 +397,6 @@
     <div class="info">
       <div class="rank">
         <span title="Ranking 10">10</span>
-        <a href="https://segmentfault.com/a/1190000042643893" target="_blank" title="CSS 绘制一只思否猫">CSS 绘制一只思否猫</a>
-      </div>
-      <div class="sub-title followers">
-        
-        <span title="Stargazers Count">
-          <svg width="12" height="12" viewBox="0 0 16 16">
-            <g fill="none" fill-rule="evenodd">
-              <path d="M0 0h16v16H0z"/>
-              <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
-            </g>
-          </svg>
-          <span>16</span>
-        </span>
-        &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/xboxyan"  title="Programming Language">
-          <span>XboxYan</span>
-        </a>
-      </div>
-      <div class="details">
-        欢迎关注我的公众号：前端侦探练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只思否猫？思否猫，SegmentFault 思否的吉祥物，是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt;...
-      </div>
-    </div>
-  </li>
-  
-  <li>
-    <div class="info">
-      <div class="rank">
-        <span title="Ranking 11">11</span>
         <a href="https://segmentfault.com/a/1190000042589774" target="_blank" title="超强的纯 CSS 鼠标点击拖拽效果">超强的纯 CSS 鼠标点击拖拽效果</a>
       </div>
       <div class="sub-title followers">
@@ -452,7 +424,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 12">12</span>
+        <span title="Ranking 11">11</span>
         <a href="https://segmentfault.com/a/1190000042512102" target="_blank" title="借助 :has 实现3d轮播图">借助 :has 实现3d轮播图</a>
       </div>
       <div class="sub-title followers">
@@ -480,7 +452,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 13">13</span>
+        <span title="Ranking 12">12</span>
         <a href="https://segmentfault.com/a/1190000042554569" target="_blank" title="漫画 | Serverless + Data，让后端告别搬砖！">漫画 | Serverless + Data，让后端告别搬砖！</a>
       </div>
       <div class="sub-title followers">
@@ -508,7 +480,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 14">14</span>
+        <span title="Ranking 13">13</span>
         <a href="https://segmentfault.com/a/1190000042550192" target="_blank" title="见微知著，从两道有意思的 CSS 面试题，考察你的基础">见微知著，从两道有意思的 CSS 面试题，考察你的基础</a>
       </div>
       <div class="sub-title followers">
@@ -536,7 +508,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 15">15</span>
+        <span title="Ranking 14">14</span>
         <a href="https://segmentfault.com/a/1190000042537837" target="_blank" title="当你 git push 时，极狐GitLab上发生了什么？">当你 git push 时，极狐GitLab上发生了什么？</a>
       </div>
       <div class="sub-title followers">
@@ -564,7 +536,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 16">16</span>
+        <span title="Ranking 15">15</span>
         <a href="https://segmentfault.com/a/1190000042562451" target="_blank" title="5 种瀑布流场景的实现原理解析">5 种瀑布流场景的实现原理解析</a>
       </div>
       <div class="sub-title followers">
@@ -592,7 +564,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 17">17</span>
+        <span title="Ranking 16">16</span>
         <a href="https://segmentfault.com/a/1190000042567232" target="_blank" title="Segmentfault 思否首届「猫猫杯」线上代码共创大赛正式启动，快来 DIY 你的专属表情包！">Segmentfault 思否首届「猫猫杯」线上代码共创大赛正式启动，快来 DIY 你的专属表情包！</a>
       </div>
       <div class="sub-title followers">
@@ -620,7 +592,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 18">18</span>
+        <span title="Ranking 17">17</span>
         <a href="https://segmentfault.com/a/1190000042569583" target="_blank" title="这些js原型及原型链面试题你能做对几道">这些js原型及原型链面试题你能做对几道</a>
       </div>
       <div class="sub-title followers">
@@ -648,8 +620,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 19">19</span>
-        <a href="https://segmentfault.com/a/1190000042509388" target="_blank" title="用Colab免费部署自己的AI绘画云平台—— Stable Diffusion">用Colab免费部署自己的AI绘画云平台—— Stable Diffusion</a>
+        <span title="Ranking 18">18</span>
+        <a href="https://segmentfault.com/a/1190000042613900" target="_blank" title="10分钟教你写一个数据库">10分钟教你写一个数据库</a>
       </div>
       <div class="sub-title followers">
         
@@ -663,12 +635,12 @@
           <span>7</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/qiufeng_5a07f6cb96ee0"  title="Programming Language">
-          <span>程序员秋风</span>
+        <a target="_blank" href="https://segmentfault.com/u/goudantiezhuerzi"  title="Programming Language">
+          <span>艾小仙</span>
         </a>
       </div>
       <div class="details">
-        AI绘画门槛又又又降低了，从最开始需要花半天时间折腾的 Disco-Diffusion ，紧接着 Stable Diffusion 在 github 上开源，各家平台都推出了云平台，让用户通过轻松的点击、选择、输入就能生成一张张AI图。
+        今天教大家借助一款框架快速实现一个数据库，这个框架就是Calcite，下面会带大家通过两个例子快速教会大家怎么实现，一个是可以通过 SQL 语句的方式可以直接查询文件内容，第二个是模拟 Mysql 查询功能，以及最后...
       </div>
     </div>
   </li>
@@ -676,7 +648,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 20">20</span>
+        <span title="Ranking 19">19</span>
         <a href="https://segmentfault.com/a/1190000042531829" target="_blank" title="技术征文中奖名单公布 ｜ 浅谈 Java 进阶之路">技术征文中奖名单公布 ｜ 浅谈 Java 进阶之路</a>
       </div>
       <div class="sub-title followers">
@@ -704,7 +676,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 21">21</span>
+        <span title="Ranking 20">20</span>
         <a href="https://segmentfault.com/a/1190000042563735" target="_blank" title="[极致用户体验] 为什么建议2022年不用&#34;等比设计稿&#34;+rem，而用&#34;灵活设计稿&#34;+px">[极致用户体验] 为什么建议2022年不用&#34;等比设计稿&#34;+rem，而用&#34;灵活设计稿&#34;+px</a>
       </div>
       <div class="sub-title followers">
@@ -732,7 +704,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 22">22</span>
+        <span title="Ranking 21">21</span>
         <a href="https://segmentfault.com/a/1190000042535848" target="_blank" title="特约专访 | 思否 CEO 高阳带你了解 Code For Better _ Hackathon 冠军团队背后的故事">特约专访 | 思否 CEO 高阳带你了解 Code For Better _ Hackathon 冠军团队背后的故事</a>
       </div>
       <div class="sub-title followers">
@@ -760,8 +732,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 23">23</span>
-        <a href="https://segmentfault.com/a/1190000042613900" target="_blank" title="10分钟教你写一个数据库">10分钟教你写一个数据库</a>
+        <span title="Ranking 22">22</span>
+        <a href="https://segmentfault.com/a/1190000042582695" target="_blank" title="「数字无限人生」：技术人的精彩时代">「数字无限人生」：技术人的精彩时代</a>
       </div>
       <div class="sub-title followers">
         
@@ -772,15 +744,15 @@
               <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
             </g>
           </svg>
-          <span>6</span>
+          <span>3</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/goudantiezhuerzi"  title="Programming Language">
-          <span>艾小仙</span>
+        <a target="_blank" href="https://segmentfault.com/u/writers"  title="Programming Language">
+          <span>思否编辑部</span>
         </a>
       </div>
       <div class="details">
-        今天教大家借助一款框架快速实现一个数据库，这个框架就是Calcite，下面会带大家通过两个例子快速教会大家怎么实现，一个是可以通过 SQL 语句的方式可以直接查询文件内容，第二个是模拟 Mysql 查询功能，以及最后...
+        18世纪，蒸汽机的发明，引发第一次科技革命19世纪，电力的发明， 引发第二次科技革命20世纪，电脑、能源、新材料、空间、生物等新兴技术，引发第三次科技革命21世纪，电子和信息技术，引发第四次科技革命2022，数...
       </div>
     </div>
   </li>
@@ -788,8 +760,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 24">24</span>
-        <a href="https://segmentfault.com/a/1190000042582695" target="_blank" title="「数字无限人生」：技术人的精彩时代">「数字无限人生」：技术人的精彩时代</a>
+        <span title="Ranking 23">23</span>
+        <a href="https://segmentfault.com/a/1190000042587022" target="_blank" title="浅谈移动端单屏解决方案">浅谈移动端单屏解决方案</a>
       </div>
       <div class="sub-title followers">
         
@@ -800,15 +772,15 @@
               <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
             </g>
           </svg>
-          <span>3</span>
+          <span>5</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/writers"  title="Programming Language">
-          <span>思否编辑部</span>
+        <a target="_blank" href="https://segmentfault.com/u/deepred5"  title="Programming Language">
+          <span>深红</span>
         </a>
       </div>
       <div class="details">
-        18世纪，蒸汽机的发明，引发第一次科技革命19世纪，电力的发明， 引发第二次科技革命20世纪，电脑、能源、新材料、空间、生物等新兴技术，引发第三次科技革命21世纪，电子和信息技术，引发第四次科技革命2022，数...
+        文中我强调了移动端适配是对屏幕宽度进行缩放：对于普通的流式布局(长屏幕页面)，页面内容是可以上下滚动的。屏幕小，一屏幕看到的东西虽然变少，但是用户可以通过手势滚动页面，继续浏览下一屏的内容。因此在常...
       </div>
     </div>
   </li>
@@ -816,7 +788,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 25">25</span>
+        <span title="Ranking 24">24</span>
         <a href="https://segmentfault.com/a/1190000042539876" target="_blank" title="面试说：聊聊JavaScript中的数据类型">面试说：聊聊JavaScript中的数据类型</a>
       </div>
       <div class="sub-title followers">
@@ -844,8 +816,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 26">26</span>
-        <a href="https://segmentfault.com/a/1190000042587022" target="_blank" title="浅谈移动端单屏解决方案">浅谈移动端单屏解决方案</a>
+        <span title="Ranking 25">25</span>
+        <a href="https://segmentfault.com/a/1190000042647263" target="_blank" title="SegmentFault 思否 Top Writer 榜单｜2022年第三季度">SegmentFault 思否 Top Writer 榜单｜2022年第三季度</a>
       </div>
       <div class="sub-title followers">
         
@@ -856,15 +828,15 @@
               <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
             </g>
           </svg>
-          <span>5</span>
+          <span>8</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/deepred5"  title="Programming Language">
-          <span>深红</span>
+        <a target="_blank" href="https://segmentfault.com/u/segmentfault"  title="Programming Language">
+          <span>SegmentFault思否</span>
         </a>
       </div>
       <div class="details">
-        文中我强调了移动端适配是对屏幕宽度进行缩放：对于普通的流式布局(长屏幕页面)，页面内容是可以上下滚动的。屏幕小，一屏幕看到的东西虽然变少，但是用户可以通过手势滚动页面，继续浏览下一屏的内容。因此在常...
+        他们是社区的基石，也是行业发展、技术发展的源动力。他们是一群活跃在 SegmentFault 思否社区的一群卓越的开发者，他们热衷于分享知识与经验，他们布道技术与未来，他们让众多开发者受益，他们叫「Top Writer」。
       </div>
     </div>
   </li>
@@ -872,7 +844,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 27">27</span>
+        <span title="Ranking 26">26</span>
         <a href="https://segmentfault.com/a/1190000042566696" target="_blank" title="2022 SegmentFault 思否程序员大调查">2022 SegmentFault 思否程序员大调查</a>
       </div>
       <div class="sub-title followers">
@@ -900,7 +872,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 28">28</span>
+        <span title="Ranking 27">27</span>
         <a href="https://segmentfault.com/a/1190000042517735" target="_blank" title="从前端到全栈 -- 最全面向对象总结">从前端到全栈 -- 最全面向对象总结</a>
       </div>
       <div class="sub-title followers">
@@ -928,7 +900,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 29">29</span>
+        <span title="Ranking 28">28</span>
         <a href="https://segmentfault.com/a/1190000042595978" target="_blank" title="快速了解 inert 属性">快速了解 inert 属性</a>
       </div>
       <div class="sub-title followers">
@@ -953,6 +925,34 @@
     </div>
   </li>
   
+  <li>
+    <div class="info">
+      <div class="rank">
+        <span title="Ranking 29">29</span>
+        <a href="https://segmentfault.com/a/1190000042627779" target="_blank" title="喜获 Code for Better _ Hackathon 二等奖，简单复盘 &amp; 礼物返图">喜获 Code for Better _ Hackathon 二等奖，简单复盘 &amp; 礼物返图</a>
+      </div>
+      <div class="sub-title followers">
+        
+        <span title="Stargazers Count">
+          <svg width="12" height="12" viewBox="0 0 16 16">
+            <g fill="none" fill-rule="evenodd">
+              <path d="M0 0h16v16H0z"/>
+              <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
+            </g>
+          </svg>
+          <span>8</span>
+        </span>
+        &nbsp;
+        <a target="_blank" href="https://segmentfault.com/u/meathill"  title="Programming Language">
+          <span>Meathill</span>
+        </a>
+      </div>
+      <div class="details">
+        2022 年 9 月 16 日，以 CODE FOR BETTER_ 为主题，以 2022 Google 开发者大会为契机举办的 Hackathon 大赛进行了线上颁奖仪式。多支优秀参赛队伍在赛程中展示了出色的开发能力，为心中所期待的美好生活，挑战开...
+      </div>
+    </div>
+  </li>
+  
   <li>
     <div class="info">
       <div class="rank">
@@ -997,7 +997,7 @@
         <img src="https://img.shields.io/npm/v/@wcj/github-rank.svg?label=unpkg">
       </a>
     </div>
-    <div class="time">Last cache created on 2022/10/20 by Github API v3.</div>
+    <div class="time">Last cache created on 2022/10/21 by Github API v3.</div>
     Create by <a href="https://github.com/jaywcjlove" target="_blank">小弟调调™</a>.
   </div>
 </body>