@wcj/github-rank 22.6.8 → 22.6.9

package/web/sifou-monthly.html

@@ -116,7 +116,7 @@
     
     
   </h1>
-  <div class="time">Last cache created on 2022/6/8 by 
+  <div class="time">Last cache created on 2022/6/9 by 
     
     
     
@@ -158,7 +158,7 @@
               <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>48</span>
+          <span>49</span>
         </span>
         &nbsp;
         <a target="_blank" href="https://segmentfault.com/u/chokcoco"  title="Programming Language">
@@ -242,7 +242,7 @@
               <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>30</span>
+          <span>31</span>
         </span>
         &nbsp;
         <a target="_blank" href="https://segmentfault.com/u/ruidoc"  title="Programming Language">
@@ -326,7 +326,7 @@
               <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>24</span>
+          <span>25</span>
         </span>
         &nbsp;
         <a target="_blank" href="https://segmentfault.com/u/segmentfault"  title="Programming Language">
@@ -371,34 +371,6 @@
     <div class="info">
       <div class="rank">
         <span title="Ranking 9">9</span>
-        <a href="https://segmentfault.com/a/1190000041819579" target="_blank" title="8.9W 播放量的 TS 动画版进阶教程合集来了！">8.9W 播放量的 TS 动画版进阶教程合集来了！</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>25</span>
-        </span>
-        &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/angular4"  title="Programming Language">
-          <span>阿宝哥</span>
-        </a>
-      </div>
-      <div class="details">
-        阿宝哥精心准备的 《轻松学 TypeScript》 视频教程来咯，强烈推荐！通过形象生动的动画，让你轻松搞懂 TypeScript 的难点和核心知识点！目前已更新到第 15 期，其中 1 期的观看量已破 1.9W，该合集的播放量目前已...
-      </div>
-    </div>
-  </li>
-  
-  <li>
-    <div class="info">
-      <div class="rank">
-        <span title="Ranking 10">10</span>
         <a href="https://segmentfault.com/a/1190000041830559" target="_blank" title="SegmentFault 思否技术周刊 -- 不走寻常路的 CSS">SegmentFault 思否技术周刊 -- 不走寻常路的 CSS</a>
       </div>
       <div class="sub-title followers">
@@ -426,7 +398,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 11">11</span>
+        <span title="Ranking 10">10</span>
         <a href="https://segmentfault.com/a/1190000041879217" target="_blank" title="前端监控的搭建步骤，别再一头雾水了！">前端监控的搭建步骤，别再一头雾水了！</a>
       </div>
       <div class="sub-title followers">
@@ -438,7 +410,7 @@
               <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>19</span>
+          <span>21</span>
         </span>
         &nbsp;
         <a target="_blank" href="https://segmentfault.com/u/ruidoc"  title="Programming Language">
@@ -454,7 +426,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/1190000041885333" target="_blank" title="关于代码评审(CodeReview)那些不得不说的事儿">关于代码评审(CodeReview)那些不得不说的事儿</a>
       </div>
       <div class="sub-title followers">
@@ -482,7 +454,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/1190000041887095" target="_blank" title="CSS 穿墙术！太强了">CSS 穿墙术！太强了</a>
       </div>
       <div class="sub-title followers">
@@ -510,7 +482,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/1190000041789636" target="_blank" title="如何做新人引导功能？">如何做新人引导功能？</a>
       </div>
       <div class="sub-title followers">
@@ -538,8 +510,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 15">15</span>
-        <a href="https://segmentfault.com/a/1190000041815758" target="_blank" title="CSS 实现树状结构目录">CSS 实现树状结构目录</a>
+        <span title="Ranking 14">14</span>
+        <a href="https://segmentfault.com/a/1190000041926662" target="_blank" title="十年老友记 | @张京：我编程了三十年，编程就是我的符号">十年老友记 | @张京：我编程了三十年，编程就是我的符号</a>
       </div>
       <div class="sub-title followers">
         
@@ -550,15 +522,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>12</span>
+          <span>16</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/xboxyan"  title="Programming Language">
-          <span>XboxYan</span>
+        <a target="_blank" href="https://segmentfault.com/u/writers"  title="Programming Language">
+          <span>思否编辑部</span>
         </a>
       </div>
       <div class="details">
-        如果用到了 Ant Design 这样的框架，那可以直接用现成的组件。如果没有用到这样的框架呢？其实纯 CSS 也是可以搞定的，下面看看如何实现的，还有很多你可能不知道 CSS 小技巧哦~
+        十年前的今天，SegmentFault 思否正式创立，如一颗嫩绿的幼芽开始成长，期间承载过和煦的日光、沐浴过柔和的春风，也挑战过滂沱的暴雨、体会过凛冽的冬雪。所幸，今日呈现在我们面前的 SegmentFault 思否，已经长...
       </div>
     </div>
   </li>
@@ -566,8 +538,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 16">16</span>
-        <a href="https://segmentfault.com/a/1190000041926662" target="_blank" title="十年老友记 | @张京：我编程了三十年，编程就是我的符号">十年老友记 | @张京：我编程了三十年，编程就是我的符号</a>
+        <span title="Ranking 15">15</span>
+        <a href="https://segmentfault.com/a/1190000041921498" target="_blank" title="SegmentFault 思否技术周刊 -- JavaScript 的那些事">SegmentFault 思否技术周刊 -- JavaScript 的那些事</a>
       </div>
       <div class="sub-title followers">
         
@@ -581,12 +553,12 @@
           <span>16</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/beverly0"  title="Programming Language">
+          <span>Beverly</span>
         </a>
       </div>
       <div class="details">
-        十年前的今天，SegmentFault 思否正式创立，如一颗嫩绿的幼芽开始成长，期间承载过和煦的日光、沐浴过柔和的春风，也挑战过滂沱的暴雨、体会过凛冽的冬雪。所幸，今日呈现在我们面前的 SegmentFault 思否，已经长...
+        JavaScript 是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程式設計，指令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持 I/O，比如网络、存储和图形...
       </div>
     </div>
   </li>
@@ -594,7 +566,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/1190000041804137" target="_blank" title="实现聚焦效果">实现聚焦效果</a>
       </div>
       <div class="sub-title followers">
@@ -622,8 +594,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 18">18</span>
-        <a href="https://segmentfault.com/a/1190000041921498" target="_blank" title="SegmentFault 思否技术周刊 -- JavaScript 的那些事">SegmentFault 思否技术周刊 -- JavaScript 的那些事</a>
+        <span title="Ranking 17">17</span>
+        <a href="https://segmentfault.com/a/1190000041892645" target="_blank" title="SegmentFault 思否技术周刊 -- 进击的 React">SegmentFault 思否技术周刊 -- 进击的 React</a>
       </div>
       <div class="sub-title followers">
         
@@ -634,7 +606,7 @@
               <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>14</span>
+          <span>11</span>
         </span>
         &nbsp;
         <a target="_blank" href="https://segmentfault.com/u/beverly0"  title="Programming Language">
@@ -642,7 +614,7 @@
         </a>
       </div>
       <div class="details">
-        JavaScript 是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程式設計，指令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持 I/O，比如网络、存储和图形...
+        React 是一个免费的开放源代码前端 JavaScript 工具库， 用于基于 UI 组件构建用户界面。 它由 Meta 和一个由个人开发者和公司组成的社群维护。 React 可用作开发具有 Next.js 等框架的单页、手机或服务器渲染应...
       </div>
     </div>
   </li>
@@ -650,8 +622,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 19">19</span>
-        <a href="https://segmentfault.com/a/1190000041892645" target="_blank" title="SegmentFault 思否技术周刊 -- 进击的 React">SegmentFault 思否技术周刊 -- 进击的 React</a>
+        <span title="Ranking 18">18</span>
+        <a href="https://segmentfault.com/a/1190000041940807" target="_blank" title="CSS 实现头像名称首字符自动占位">CSS 实现头像名称首字符自动占位</a>
       </div>
       <div class="sub-title followers">
         
@@ -662,15 +634,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>11</span>
+          <span>15</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/beverly0"  title="Programming Language">
-          <span>Beverly</span>
+        <a target="_blank" href="https://segmentfault.com/u/xboxyan"  title="Programming Language">
+          <span>XboxYan</span>
         </a>
       </div>
       <div class="details">
-        React 是一个免费的开放源代码前端 JavaScript 工具库， 用于基于 UI 组件构建用户界面。 它由 Meta 和一个由个人开发者和公司组成的社群维护。 React 可用作开发具有 Next.js 等框架的单页、手机或服务器渲染应...
+        在 web 中经常会见到这样的设计，很多 UI 组件库也称之为 Avator 组件，也就是头像的意思，当头像未设置时，会显示名称的首字符充当默认头像，如下所示：
       </div>
     </div>
   </li>
@@ -678,8 +650,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 20">20</span>
-        <a href="https://segmentfault.com/a/1190000041819433" target="_blank" title="python又搞事情 想一统天下？">python又搞事情 想一统天下？</a>
+        <span title="Ranking 19">19</span>
+        <a href="https://segmentfault.com/a/1190000041843081" target="_blank" title="5分钟带你通过Javascript了解人工智能的基本原理">5分钟带你通过Javascript了解人工智能的基本原理</a>
       </div>
       <div class="sub-title followers">
         
@@ -690,15 +662,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>11</span>
+          <span>10</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/wodexiaoxiongbujianliao"  title="Programming Language">
-          <span>我的小熊不见了</span>
+        <a target="_blank" href="https://segmentfault.com/u/6666"  title="Programming Language">
+          <span>6666</span>
         </a>
       </div>
       <div class="details">
-        python最近又在搞大事情，就在最近，github上突然多了一个神奇的项目： git地址.并且最近一直在更新。一看这个名字就让我们不禁想起JavaScript，再去官网一看pyscript官网, 这家伙不仅模仿了JavaScript的名字，甚...
+        学习人工智能门槛高不高？我入门花了2个月时间，学习了python、微积分，才大概弄懂了深度学习的基本原理，确实让人头大，不过现在回过头想想，其实基本原理是没这么难的。
       </div>
     </div>
   </li>
@@ -706,8 +678,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 21">21</span>
-        <a href="https://segmentfault.com/a/1190000041843081" target="_blank" title="5分钟带你通过Javascript了解人工智能的基本原理">5分钟带你通过Javascript了解人工智能的基本原理</a>
+        <span title="Ranking 20">20</span>
+        <a href="https://segmentfault.com/a/1190000041831493" target="_blank" title="移动端常见适配方案">移动端常见适配方案</a>
       </div>
       <div class="sub-title followers">
         
@@ -718,15 +690,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>9</span>
+          <span>11</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/6666"  title="Programming Language">
-          <span>6666</span>
+        <a target="_blank" href="https://segmentfault.com/u/deepred5"  title="Programming Language">
+          <span>深红</span>
         </a>
       </div>
       <div class="details">
-        学习人工智能门槛高不高？我入门花了2个月时间，学习了python、微积分，才大概弄懂了深度学习的基本原理，确实让人头大，不过现在回过头想想，其实基本原理是没这么难的。
+        做移动端页面有一段时间了，总结下工作中常用的几种移动端适配方案。基础网上已经有非常多的基础知识总结，不再赘诉，详情可以见《关于移动端适配，你必须要知道的》《不要再问我移动适配的问题了》其中容易搞混...
       </div>
     </div>
   </li>
@@ -734,8 +706,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 22">22</span>
-        <a href="https://segmentfault.com/a/1190000041831493" target="_blank" title="移动端常见适配方案">移动端常见适配方案</a>
+        <span title="Ranking 21">21</span>
+        <a href="https://segmentfault.com/a/1190000041905055" target="_blank" title="云原生时代 PHP/Golang 项目如何实现微服务">云原生时代 PHP/Golang 项目如何实现微服务</a>
       </div>
       <div class="sub-title followers">
         
@@ -746,15 +718,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>11</span>
+          <span>9</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/hantianfeng"  title="Programming Language">
+          <span>韩天峰</span>
         </a>
       </div>
       <div class="details">
-        做移动端页面有一段时间了，总结下工作中常用的几种移动端适配方案。基础网上已经有非常多的基础知识总结，不再赘诉，详情可以见《关于移动端适配，你必须要知道的》《不要再问我移动适配的问题了》其中容易搞混...
+        在传统架构下，我们需要使用服务发现、服务注册等技术实现微服务架构。通常我们需要将服务提供方（Service Provider）的节点（IP:PORT）保存在 ZooKeeper、ETCD、Consul、Nacos 等服务管理组件，服务调用方（Serv...
       </div>
     </div>
   </li>
@@ -762,8 +734,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 23">23</span>
-        <a href="https://segmentfault.com/a/1190000041905055" target="_blank" title="云原生时代 PHP/Golang 项目如何实现微服务">云原生时代 PHP/Golang 项目如何实现微服务</a>
+        <span title="Ranking 22">22</span>
+        <a href="https://segmentfault.com/a/1190000041947673" target="_blank" title="文字轮播与图片轮播？CSS 不在话下">文字轮播与图片轮播？CSS 不在话下</a>
       </div>
       <div class="sub-title followers">
         
@@ -774,15 +746,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>9</span>
+          <span>12</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/hantianfeng"  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">
-        在传统架构下，我们需要使用服务发现、服务注册等技术实现微服务架构。通常我们需要将服务提供方（Service Provider）的节点（IP:PORT）保存在 ZooKeeper、ETCD、Consul、Nacos 等服务管理组件，服务调用方（Serv...
+        今天，分享一个实际业务中能够用得上的动画技巧。巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？我们来简单分析分析，从...
       </div>
     </div>
   </li>
@@ -790,7 +762,7 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 24">24</span>
+        <span title="Ranking 23">23</span>
         <a href="https://segmentfault.com/a/1190000041832303" target="_blank" title="它来了！Flutter3.0发布全解析">它来了！Flutter3.0发布全解析</a>
       </div>
       <div class="sub-title followers">
@@ -818,7 +790,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/1190000041894263" target="_blank" title="Base64 编码知识，一文打尽！">Base64 编码知识，一文打尽！</a>
       </div>
       <div class="sub-title followers">
@@ -846,8 +818,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 26">26</span>
-        <a href="https://segmentfault.com/a/1190000041940807" target="_blank" title="CSS 实现头像名称首字符自动占位">CSS 实现头像名称首字符自动占位</a>
+        <span title="Ranking 25">25</span>
+        <a href="https://segmentfault.com/a/1190000041881296" target="_blank" title="如何自定义 drag 样式">如何自定义 drag 样式</a>
       </div>
       <div class="sub-title followers">
         
@@ -858,7 +830,7 @@
               <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>11</span>
         </span>
         &nbsp;
         <a target="_blank" href="https://segmentfault.com/u/xboxyan"  title="Programming Language">
@@ -866,7 +838,7 @@
         </a>
       </div>
       <div class="details">
-        在 web 中经常会见到这样的设计，很多 UI 组件库也称之为 Avator 组件，也就是头像的意思，当头像未设置时，会显示名称的首字符充当默认头像，如下所示：
+        欢迎关注我的公众号：前端侦探在 web 中，图片默认是可以拖拽的，通常是一个半透明的预览图（下面简称“预览图”），如下这个预览图是系统自动生成的，一般无法进行自定义，但有时候会觉得拖拽的预览图尺寸太大了，...
       </div>
     </div>
   </li>
@@ -874,8 +846,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 27">27</span>
-        <a href="https://segmentfault.com/a/1190000041881296" target="_blank" title="如何自定义 drag 样式">如何自定义 drag 样式</a>
+        <span title="Ranking 26">26</span>
+        <a href="https://segmentfault.com/a/1190000041934586" target="_blank" title="全球顶级交易所前端二面">全球顶级交易所前端二面</a>
       </div>
       <div class="sub-title followers">
         
@@ -886,15 +858,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>11</span>
+          <span>7</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/xboxyan"  title="Programming Language">
-          <span>XboxYan</span>
+        <a target="_blank" href="https://segmentfault.com/u/jerrytanjinjie"  title="Programming Language">
+          <span>Peter谭老师</span>
         </a>
       </div>
       <div class="details">
-        欢迎关注我的公众号：前端侦探在 web 中，图片默认是可以拖拽的，通常是一个半透明的预览图（下面简称“预览图”），如下这个预览图是系统自动生成的，一般无法进行自定义，但有时候会觉得拖拽的预览图尺寸太大了，...
+        背景今天早上在脉脉上看到一个关于BN的前端二面分享，作者出于纯粹的目的分享了一下最近的面试题。我觉得这是一套不错的面试题，于是分享给了大家。为什么会有这套面试题前端界，到底什么样子的项目，会用到这类...
       </div>
     </div>
   </li>
@@ -902,8 +874,8 @@
   <li>
     <div class="info">
       <div class="rank">
-        <span title="Ranking 28">28</span>
-        <a href="https://segmentfault.com/a/1190000041934586" target="_blank" title="全球顶级交易所前端二面">全球顶级交易所前端二面</a>
+        <span title="Ranking 27">27</span>
+        <a href="https://segmentfault.com/a/1190000041921943" target="_blank" title="无需安装、注册，一行命令搞定内网穿透！关键是完全免费">无需安装、注册，一行命令搞定内网穿透！关键是完全免费</a>
       </div>
       <div class="sub-title followers">
         
@@ -914,15 +886,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>7</span>
+          <span>10</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/jerrytanjinjie"  title="Programming Language">
-          <span>Peter谭老师</span>
+        <a target="_blank" href="https://segmentfault.com/u/jishuroad"  title="Programming Language">
+          <span>民工哥</span>
         </a>
       </div>
       <div class="details">
-        背景今天早上在脉脉上看到一个关于BN的前端二面分享，作者出于纯粹的目的分享了一下最近的面试题。我觉得这是一套不错的面试题，于是分享给了大家。为什么会有这套面试题前端界，到底什么样子的项目，会用到这类...
+        内网穿透，即NAT穿透，网络连接时术语。外网与内网的计算机节点需要连接通信，映射端口能让外网的电脑找到处于内网的电脑，提高下载速度。内网穿透的应用场景web 应用开发向外网发布开发的一些web demo，或者远程...
       </div>
     </div>
   </li>
@@ -930,7 +902,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/1190000041855296" target="_blank" title="js面试题(进阶)梳理">js面试题(进阶)梳理</a>
       </div>
       <div class="sub-title followers">
@@ -955,11 +927,39 @@
     </div>
   </li>
   
+  <li>
+    <div class="info">
+      <div class="rank">
+        <span title="Ranking 29">29</span>
+        <a href="https://segmentfault.com/a/1190000041824717" target="_blank" title="Redis 为何使用近似 LRU 算法淘汰数据，而不是真实 LRU？">Redis 为何使用近似 LRU 算法淘汰数据，而不是真实 LRU？</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>9</span>
+        </span>
+        &nbsp;
+        <a target="_blank" href="https://segmentfault.com/u/magebyte"  title="Programming Language">
+          <span>码哥字节</span>
+        </a>
+      </div>
+      <div class="details">
+        在《Redis 数据缓存满了怎么办？》我们知道 Redis 缓存满了之后能通过淘汰策略删除数据腾出空间给新数据。淘汰策略如下所示：设置过期时间的 keyvolatile-ttl、volatile-random、volatile-lru、volatile-lfu 这四...
+      </div>
+    </div>
+  </li>
+  
   <li>
     <div class="info">
       <div class="rank">
         <span title="Ranking 30">30</span>
-        <a href="https://segmentfault.com/a/1190000041921943" target="_blank" title="无需安装、注册，一行命令搞定内网穿透！关键是完全免费">无需安装、注册，一行命令搞定内网穿透！关键是完全免费</a>
+        <a href="https://segmentfault.com/a/1190000041926694" target="_blank" title="社区的力量 | SegmentFault 思否十周年，伙伴们说">社区的力量 | SegmentFault 思否十周年，伙伴们说</a>
       </div>
       <div class="sub-title followers">
         
@@ -970,15 +970,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>5</span>
         </span>
         &nbsp;
-        <a target="_blank" href="https://segmentfault.com/u/jishuroad"  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">
-        内网穿透，即NAT穿透，网络连接时术语。外网与内网的计算机节点需要连接通信，映射端口能让外网的电脑找到处于内网的电脑，提高下载速度。内网穿透的应用场景web 应用开发向外网发布开发的一些web demo，或者远程...
+        开发者更像是厨师，治大国如烹小鲜，写代码如做甜点。下一个十年，不是技术行业的十年，而会是全行业的技术十年。愿乘风破万里浪，看十年发展必辉煌。—— 陈加贝，vika 维格联合创始人兼 CTO ✨
       </div>
     </div>
   </li>
@@ -999,7 +999,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/6/8 by Github API v3.</div>
+    <div class="time">Last cache created on 2022/6/9 by Github API v3.</div>
     Create by <a href="https://github.com/jaywcjlove" target="_blank">小弟调调™</a>.
   </div>
 </body>