@wcj/github-rank 22.5.13 → 22.5.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/repos.json +19934 -19930
  2. package/dist/sifou-daily.json +69 -33
  3. package/dist/sifou-monthly.json +61 -61
  4. package/dist/sifou-weekly.json +122 -122
  5. package/dist/toutiao-30.json +66 -66
  6. package/dist/toutiao-7.json +48 -48
  7. package/dist/toutiao-90.json +18 -18
  8. package/dist/trending-daily.json +73 -73
  9. package/dist/trending-monthly.json +73 -73
  10. package/dist/trending-weekly.json +72 -72
  11. package/dist/users.china.json +1029 -1029
  12. package/dist/users.json +1561 -1561
  13. package/package.json +1 -1
  14. package/web/36kr.html +2 -2
  15. package/web/data/repos.json +19934 -19930
  16. package/web/data/sifou-daily.json +69 -33
  17. package/web/data/sifou-monthly.json +61 -61
  18. package/web/data/sifou-weekly.json +122 -122
  19. package/web/data/toutiao-30.json +66 -66
  20. package/web/data/toutiao-7.json +48 -48
  21. package/web/data/toutiao-90.json +18 -18
  22. package/web/data/trending-daily.json +73 -73
  23. package/web/data/trending-monthly.json +73 -73
  24. package/web/data/trending-weekly.json +72 -72
  25. package/web/data/users.china.json +1029 -1029
  26. package/web/data/users.json +1561 -1561
  27. package/web/index.html +881 -881
  28. package/web/repos.html +3251 -3251
  29. package/web/sifou-daily.html +141 -29
  30. package/web/sifou-monthly.html +101 -101
  31. package/web/sifou-weekly.html +129 -129
  32. package/web/toutiao-30.html +75 -75
  33. package/web/toutiao-7.html +62 -62
  34. package/web/toutiao-90.html +29 -29
  35. package/web/trending-monthly.html +75 -75
  36. package/web/trending-weekly.html +74 -74
  37. package/web/trending.html +75 -75
  38. package/web/users.china.html +573 -573
package/web/sifou-monthly.html CHANGED
@@ -116,7 +116,7 @@
116
116
 
117
117
 
118
118
  </h1>
119
- <div class="time">Last cache created on 2022/5/13 by
119
+ <div class="time">Last cache created on 2022/5/14 by
120
120
 
121
121
 
122
122
 
@@ -158,7 +158,7 @@
158
158
  <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"/>
159
159
  </g>
160
160
  </svg>
161
- <span>53</span>
161
+ <span>56</span>
162
162
  </span>
163
163
  &nbsp;
164
164
  <a target="_blank" href="https://segmentfault.com/u/joyqi" title="Programming Language">
@@ -371,7 +371,7 @@
371
371
  <div class="info">
372
372
  <div class="rank">
373
373
  <span title="Ranking 9">9</span>
374
- <a href="https://segmentfault.com/a/1190000041781215" target="_blank" title="浅谈支付系统开发基本流程">浅谈支付系统开发基本流程</a>
374
+ <a href="https://segmentfault.com/a/1190000041754709" target="_blank" title="仅用一个HTML标签，实现带动画的抖音LOGO">仅用一个HTML标签，实现带动画的抖音LOGO</a>
375
375
  </div>
376
376
  <div class="sub-title followers">
377
377
 
@@ -382,15 +382,15 @@
382
382
  <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"/>
383
383
  </g>
384
384
  </svg>
385
- <span>19</span>
385
+ <span>22</span>
386
386
  </span>
387
387
  &nbsp;
388
- <a target="_blank" href="https://segmentfault.com/u/crazycodes" title="Programming Language">
389
- <span>CrazyCodes</span>
388
+ <a target="_blank" href="https://segmentfault.com/u/zero2one" title="Programming Language">
389
+ <span>零一</span>
390
390
  </a>
391
391
  </div>
392
392
  <div class="details">
393
- 前言Hi，各位好久不见，我是CrazyCodes，今天我们来聊聊支付系统。支付系统是每个系统都必备的模块之一，也是众多模块中最核心的功能，如果支付出现问题，那么意味着会直接影响到产品收益，事故严重程度高。本篇...
393
+ 大家好，我是零一，今天给大家表演 仅用一个HTML标签实现带动画的抖音LOGO，涉及了很多知识点，欢迎交流讨论先上结果，最终实现效果如下：还原度应该还可以吧？抖音Logo结构想要用CSS来画抖音的Logo，前提要先了...
394
394
  </div>
395
395
  </div>
396
396
  </li>
@@ -399,7 +399,7 @@
399
399
  <div class="info">
400
400
  <div class="rank">
401
401
  <span title="Ranking 10">10</span>
402
- <a href="https://segmentfault.com/a/1190000041754709" target="_blank" title="仅用一个HTML标签，实现带动画的抖音LOGO">仅用一个HTML标签，实现带动画的抖音LOGO</a>
402
+ <a href="https://segmentfault.com/a/1190000041826742" target="_blank" title="现代 CSS 解决方案：CSS 数学函数">现代 CSS 解决方案：CSS 数学函数</a>
403
403
  </div>
404
404
  <div class="sub-title followers">
405
405
 
@@ -410,15 +410,15 @@
410
410
  <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"/>
411
411
  </g>
412
412
  </svg>
413
- <span>21</span>
413
+ <span>18</span>
414
414
  </span>
415
415
  &nbsp;
416
- <a target="_blank" href="https://segmentfault.com/u/zero2one" title="Programming Language">
417
- <span>零一</span>
416
+ <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
417
+ <span>chokcoco</span>
418
418
  </a>
419
419
  </div>
420
420
  <div class="details">
421
- 大家好，我是零一，今天给大家表演 仅用一个HTML标签实现带动画的抖音LOGO，涉及了很多知识点，欢迎交流讨论先上结果，最终实现效果如下：还原度应该还可以吧？抖音Logo结构想要用CSS来画抖音的Logo，前提要先了...
421
+ 在 CSS 中，其实存在各种各样的函数。具体分为：Transform functionsMath functionsFilter functionsColor functionsImage functionsCounter functionsFont functionsShape functionsReference functionsCSS grid...
422
422
  </div>
423
423
  </div>
424
424
  </li>
@@ -427,7 +427,7 @@
427
427
  <div class="info">
428
428
  <div class="rank">
429
429
  <span title="Ranking 11">11</span>
430
- <a href="https://segmentfault.com/a/1190000041693503" target="_blank" title="🔥前端脚手架辣么多，那我也要写一个玩玩">🔥前端脚手架辣么多，那我也要写一个玩玩</a>
430
+ <a href="https://segmentfault.com/a/1190000041791819" target="_blank" title="离谱的 CSS！从表盘刻度到艺术剪纸">离谱的 CSS！从表盘刻度到艺术剪纸</a>
431
431
  </div>
432
432
  <div class="sub-title followers">
433
433
 
@@ -441,12 +441,12 @@
441
441
  <span>19</span>
442
442
  </span>
443
443
  &nbsp;
444
- <a target="_blank" href="https://segmentfault.com/u/bo_wang_code" title="Programming Language">
445
- <span>恪晨</span>
444
+ <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
445
+ <span>chokcoco</span>
446
446
  </a>
447
447
  </div>
448
448
  <div class="details">
449
- 2022年已经过了四分之一还多了，之前说好的每个月一片文章好像也没有让自己兑现。最近公司在做一些前端工程化相关的东西，虽然准备做组件库的事情被领导给毙了，不过在这之前写了一个脚手架的工具，...
449
+ 某日，群里有这样一个问题，如何实现这样的表盘刻度：这其实是个挺有意思的问题，方法也有很多。单标签，使用 conic-gradient 实现表盘刻度最简单便捷的方式，就是利用角向渐变的方式 conic-gradient，代码也非常...
450
450
  </div>
451
451
  </div>
452
452
  </li>
@@ -455,7 +455,7 @@
455
455
  <div class="info">
456
456
  <div class="rank">
457
457
  <span title="Ranking 12">12</span>
458
- <a href="https://segmentfault.com/a/1190000041725043" target="_blank" title="以B端平台设计，理解尼尔森10大可用性原则">以B端平台设计，理解尼尔森10大可用性原则</a>
458
+ <a href="https://segmentfault.com/a/1190000041781215" target="_blank" title="浅谈支付系统开发基本流程">浅谈支付系统开发基本流程</a>
459
459
  </div>
460
460
  <div class="sub-title followers">
461
461
 
@@ -466,15 +466,15 @@
466
466
  <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"/>
467
467
  </g>
468
468
  </svg>
469
- <span>22</span>
469
+ <span>20</span>
470
470
  </span>
471
471
  &nbsp;
472
- <a target="_blank" href="https://segmentfault.com/u/wangzc996" title="Programming Language">
473
- <span>JenK</span>
472
+ <a target="_blank" href="https://segmentfault.com/u/crazycodes" title="Programming Language">
473
+ <span>CrazyCodes</span>
474
474
  </a>
475
475
  </div>
476
476
  <div class="details">
477
- 尼尔森是一名人机交互学博士，通过总结分析200多个可用性问题，1995年提出了尼尔森十大可用性原则，不论在Web设计还是移动端设计，掌握了这十项原则，都能有效提升产品用户体验度。今天就以实例跟大家聊聊尼尔森...
477
+ 前言Hi，各位好久不见，我是CrazyCodes，今天我们来聊聊支付系统。支付系统是每个系统都必备的模块之一，也是众多模块中最核心的功能，如果支付出现问题，那么意味着会直接影响到产品收益，事故严重程度高。本篇...
478
478
  </div>
479
479
  </div>
480
480
  </li>
@@ -483,7 +483,7 @@
483
483
  <div class="info">
484
484
  <div class="rank">
485
485
  <span title="Ranking 13">13</span>
486
- <a href="https://segmentfault.com/a/1190000041706515" target="_blank" title="40行代码实现React核心Diff算法">40行代码实现React核心Diff算法</a>
486
+ <a href="https://segmentfault.com/a/1190000041819579" target="_blank" title="4.9W 播放量的 TS 动画版进阶教程合集来了！">4.9W 播放量的 TS 动画版进阶教程合集来了！</a>
487
487
  </div>
488
488
  <div class="sub-title followers">
489
489
 
@@ -494,15 +494,15 @@
494
494
  <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"/>
495
495
  </g>
496
496
  </svg>
497
- <span>15</span>
497
+ <span>17</span>
498
498
  </span>
499
499
  &nbsp;
500
- <a target="_blank" href="https://segmentfault.com/u/kasong" title="Programming Language">
501
- <span>卡颂</span>
500
+ <a target="_blank" href="https://segmentfault.com/u/angular4" title="Programming Language">
501
+ <span>阿宝哥</span>
502
502
  </a>
503
503
  </div>
504
504
  <div class="details">
505
- 大家好，我卡颂。凡是依赖虚拟DOM的框架，都需要比较前后节点变化的Diff算法。网上有大量讲解Diff算法逻辑的文章。然而，即使作者语言再精练，再图文并茂，相信大部分同学看完用不了多久就忘了。今天，我们换一种...
505
+ 阿宝哥精心准备的 《轻松学 TypeScript》 视频教程来咯，强烈推荐！通过形象生动的动画，让你轻松搞懂 TypeScript 的难点和核心知识点！目前已更新到第 11 期，其中 2 期的观看量均已破 1.3W，该合集的播放量目前...
506
506
  </div>
507
507
  </div>
508
508
  </li>
@@ -511,7 +511,7 @@
511
511
  <div class="info">
512
512
  <div class="rank">
513
513
  <span title="Ranking 14">14</span>
514
- <a href="https://segmentfault.com/a/1190000041806654" target="_blank" title="年年出妖事，一例由JSON解析导致的&#34;薛定谔BUG&#34;排查过程记录">年年出妖事，一例由JSON解析导致的&#34;薛定谔BUG&#34;排查过程记录</a>
514
+ <a href="https://segmentfault.com/a/1190000041725043" target="_blank" title="以B端平台设计，理解尼尔森10大可用性原则">以B端平台设计，理解尼尔森10大可用性原则</a>
515
515
  </div>
516
516
  <div class="sub-title followers">
517
517
 
@@ -522,15 +522,15 @@
522
522
  <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"/>
523
523
  </g>
524
524
  </svg>
525
- <span>24</span>
525
+ <span>22</span>
526
526
  </span>
527
527
  &nbsp;
528
- <a target="_blank" href="https://segmentfault.com/u/bosaidong_5c495684bcf4b" title="Programming Language">
529
- <span>铂赛东</span>
528
+ <a target="_blank" href="https://segmentfault.com/u/wangzc996" title="Programming Language">
529
+ <span>JenK</span>
530
530
  </a>
531
531
  </div>
532
532
  <div class="details">
533
- 但是最近公司内碰到的这一个bug，这个bug初看很简单，但是非常妖孽，在一段时间内我甚至是百思不得其解。在长达几天的时间内，复现的概率非常低。几乎难以抓住任何踪迹。
533
+ 尼尔森是一名人机交互学博士，通过总结分析200多个可用性问题，1995年提出了尼尔森十大可用性原则，不论在Web设计还是移动端设计，掌握了这十项原则，都能有效提升产品用户体验度。今天就以实例跟大家聊聊尼尔森...
534
534
  </div>
535
535
  </div>
536
536
  </li>
@@ -539,7 +539,7 @@
539
539
  <div class="info">
540
540
  <div class="rank">
541
541
  <span title="Ranking 15">15</span>
542
- <a href="https://segmentfault.com/a/1190000041791819" target="_blank" title="离谱的 CSS！从表盘刻度到艺术剪纸">离谱的 CSS！从表盘刻度到艺术剪纸</a>
542
+ <a href="https://segmentfault.com/a/1190000041706515" target="_blank" title="40行代码实现React核心Diff算法">40行代码实现React核心Diff算法</a>
543
543
  </div>
544
544
  <div class="sub-title followers">
545
545
 
@@ -550,15 +550,15 @@
550
550
  <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"/>
551
551
  </g>
552
552
  </svg>
553
- <span>18</span>
553
+ <span>15</span>
554
554
  </span>
555
555
  &nbsp;
556
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
557
- <span>chokcoco</span>
556
+ <a target="_blank" href="https://segmentfault.com/u/kasong" title="Programming Language">
557
+ <span>卡颂</span>
558
558
  </a>
559
559
  </div>
560
560
  <div class="details">
561
- 某日，群里有这样一个问题，如何实现这样的表盘刻度：这其实是个挺有意思的问题，方法也有很多。单标签，使用 conic-gradient 实现表盘刻度最简单便捷的方式，就是利用角向渐变的方式 conic-gradient，代码也非常...
561
+ 大家好，我卡颂。凡是依赖虚拟DOM的框架，都需要比较前后节点变化的Diff算法。网上有大量讲解Diff算法逻辑的文章。然而，即使作者语言再精练，再图文并茂，相信大部分同学看完用不了多久就忘了。今天，我们换一种...
562
562
  </div>
563
563
  </div>
564
564
  </li>
@@ -567,7 +567,7 @@
567
567
  <div class="info">
568
568
  <div class="rank">
569
569
  <span title="Ranking 16">16</span>
570
- <a href="https://segmentfault.com/a/1190000041819579" target="_blank" title="4.9W 播放量的 TS 动画版进阶教程合集来了！">4.9W 播放量的 TS 动画版进阶教程合集来了！</a>
570
+ <a href="https://segmentfault.com/a/1190000041806654" target="_blank" title="年年出妖事，一例由JSON解析导致的&#34;薛定谔BUG&#34;排查过程记录">年年出妖事，一例由JSON解析导致的&#34;薛定谔BUG&#34;排查过程记录</a>
571
571
  </div>
572
572
  <div class="sub-title followers">
573
573
 
@@ -578,15 +578,15 @@
578
578
  <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"/>
579
579
  </g>
580
580
  </svg>
581
- <span>15</span>
581
+ <span>24</span>
582
582
  </span>
583
583
  &nbsp;
584
- <a target="_blank" href="https://segmentfault.com/u/angular4" title="Programming Language">
585
- <span>阿宝哥</span>
584
+ <a target="_blank" href="https://segmentfault.com/u/bosaidong_5c495684bcf4b" title="Programming Language">
585
+ <span>铂赛东</span>
586
586
  </a>
587
587
  </div>
588
588
  <div class="details">
589
- 阿宝哥精心准备的 《轻松学 TypeScript》 视频教程来咯，强烈推荐！通过形象生动的动画，让你轻松搞懂 TypeScript 的难点和核心知识点！目前已更新到第 11 期，其中 2 期的观看量均已破 1.3W，该合集的播放量目前...
589
+ 但是最近公司内碰到的这一个bug，这个bug初看很简单，但是非常妖孽，在一段时间内我甚至是百思不得其解。在长达几天的时间内，复现的概率非常低。几乎难以抓住任何踪迹。
590
590
  </div>
591
591
  </div>
592
592
  </li>
@@ -595,7 +595,7 @@
595
595
  <div class="info">
596
596
  <div class="rank">
597
597
  <span title="Ranking 17">17</span>
598
- <a href="https://segmentfault.com/a/1190000041769612" target="_blank" title="我做了一个在线白板！！！">我做了一个在线白板！！！</a>
598
+ <a href="https://segmentfault.com/a/1190000041761117" target="_blank" title="让交互更加生动！有意思的鼠标跟随 3D 旋转动效">让交互更加生动！有意思的鼠标跟随 3D 旋转动效</a>
599
599
  </div>
600
600
  <div class="sub-title followers">
601
601
 
@@ -606,15 +606,15 @@
606
606
  <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"/>
607
607
  </g>
608
608
  </svg>
609
- <span>12</span>
609
+ <span>13</span>
610
610
  </span>
611
611
  &nbsp;
612
- <a target="_blank" href="https://segmentfault.com/u/jiejiaoxiaolin" title="Programming Language">
613
- <span>街角小林</span>
612
+ <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
613
+ <span>chokcoco</span>
614
614
  </a>
615
615
  </div>
616
616
  <div class="details">
617
- 相信各位写文章的朋友平时肯定都有画图的需求，笔者平时用的是一个在线的手绘风格白板--excalidraw，使用体验上没的说，但是有一个问题，不能云端保存，不过好消息它是开源的，所以笔者就在想要不要基于它做一个...
617
+ 今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现：简单分析一下，这个交互效果主要有两个核心：借助了 CSS 3D 的能力元素的旋转需要和鼠标的移动相结合本文，就将讲述如何使用纯 CSS 实现类似...
618
618
  </div>
619
619
  </div>
620
620
  </li>
@@ -623,7 +623,7 @@
623
623
  <div class="info">
624
624
  <div class="rank">
625
625
  <span title="Ranking 18">18</span>
626
- <a href="https://segmentfault.com/a/1190000041715976" target="_blank" title="CSS 实现切角效果">CSS 实现切角效果</a>
626
+ <a href="https://segmentfault.com/a/1190000041769612" target="_blank" title="我做了一个在线白板！！！">我做了一个在线白板！！！</a>
627
627
  </div>
628
628
  <div class="sub-title followers">
629
629
 
@@ -634,15 +634,15 @@
634
634
  <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"/>
635
635
  </g>
636
636
  </svg>
637
- <span>14</span>
637
+ <span>12</span>
638
638
  </span>
639
639
  &nbsp;
640
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
641
- <span>XboxYan</span>
640
+ <a target="_blank" href="https://segmentfault.com/u/jiejiaoxiaolin" title="Programming Language">
641
+ <span>街角小林</span>
642
642
  </a>
643
643
  </div>
644
644
  <div class="details">
645
- 欢迎关注我的公众号：前端侦探最近项目中看到这样的一个切角效果，如下所示就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？一、自适应方式这种布局一般有两种自适应方...
645
+ 相信各位写文章的朋友平时肯定都有画图的需求，笔者平时用的是一个在线的手绘风格白板--excalidraw，使用体验上没的说，但是有一个问题，不能云端保存，不过好消息它是开源的，所以笔者就在想要不要基于它做一个...
646
646
  </div>
647
647
  </div>
648
648
  </li>
@@ -651,7 +651,7 @@
651
651
  <div class="info">
652
652
  <div class="rank">
653
653
  <span title="Ranking 19">19</span>
654
- <a href="https://segmentfault.com/a/1190000041753539" target="_blank" title="🔥 2022 前端性能优化最佳实践">🔥 2022 前端性能优化最佳实践</a>
654
+ <a href="https://segmentfault.com/a/1190000041715976" target="_blank" title="CSS 实现切角效果">CSS 实现切角效果</a>
655
655
  </div>
656
656
  <div class="sub-title followers">
657
657
 
@@ -662,15 +662,15 @@
662
662
  <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"/>
663
663
  </g>
664
664
  </svg>
665
- <span>13</span>
665
+ <span>14</span>
666
666
  </span>
667
667
  &nbsp;
668
- <a target="_blank" href="https://segmentfault.com/u/cloudyttt" title="Programming Language">
669
- <span>佩奇烹饪家</span>
668
+ <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
669
+ <span>XboxYan</span>
670
670
  </a>
671
671
  </div>
672
672
  <div class="details">
673
- 随着业务的不断迭代，项目日渐壮大，为了给用户提供更优的体验，性能优化是前端开发避不开的话题。一个优秀的网站必然是拥有丰富功能的同时具有比较块的响应速度，想必我们浏览网页时都更喜欢丝般顺滑的感受。
673
+ 欢迎关注我的公众号：前端侦探最近项目中看到这样的一个切角效果，如下所示就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？一、自适应方式这种布局一般有两种自适应方...
674
674
  </div>
675
675
  </div>
676
676
  </li>
@@ -679,7 +679,7 @@
679
679
  <div class="info">
680
680
  <div class="rank">
681
681
  <span title="Ranking 20">20</span>
682
- <a href="https://segmentfault.com/a/1190000041730906" target="_blank" title="如何构建可控,可靠,可扩展的 PWA 应用">如何构建可控,可靠,可扩展的 PWA 应用</a>
682
+ <a href="https://segmentfault.com/a/1190000041753539" target="_blank" title="🔥 2022 前端性能优化最佳实践">🔥 2022 前端性能优化最佳实践</a>
683
683
  </div>
684
684
  <div class="sub-title followers">
685
685
 
@@ -690,15 +690,15 @@
690
690
  <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"/>
691
691
  </g>
692
692
  </svg>
693
- <span>13</span>
693
+ <span>14</span>
694
694
  </span>
695
695
  &nbsp;
696
- <a target="_blank" href="https://segmentfault.com/u/jerryc" title="Programming Language">
697
- <span>JerryC</span>
696
+ <a target="_blank" href="https://segmentfault.com/u/cloudyttt" title="Programming Language">
697
+ <span>佩奇烹饪家</span>
698
698
  </a>
699
699
  </div>
700
700
  <div class="details">
701
- PWA （Progressive Web App）指的是使用指定技术和标准模式来开发的 Web 应用，让 Web 应用具有原生应用的特性和体验。比如我们觉得本地应用使用便捷，响应速度更加快等。
701
+ 随着业务的不断迭代，项目日渐壮大，为了给用户提供更优的体验，性能优化是前端开发避不开的话题。一个优秀的网站必然是拥有丰富功能的同时具有比较块的响应速度，想必我们浏览网页时都更喜欢丝般顺滑的感受。
702
702
  </div>
703
703
  </div>
704
704
  </li>
@@ -707,7 +707,7 @@
707
707
  <div class="info">
708
708
  <div class="rank">
709
709
  <span title="Ranking 21">21</span>
710
- <a href="https://segmentfault.com/a/1190000041761117" target="_blank" title="让交互更加生动！有意思的鼠标跟随 3D 旋转动效">让交互更加生动！有意思的鼠标跟随 3D 旋转动效</a>
710
+ <a href="https://segmentfault.com/a/1190000041730906" target="_blank" title="如何构建可控,可靠,可扩展的 PWA 应用">如何构建可控,可靠,可扩展的 PWA 应用</a>
711
711
  </div>
712
712
  <div class="sub-title followers">
713
713
 
@@ -718,15 +718,15 @@
718
718
  <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"/>
719
719
  </g>
720
720
  </svg>
721
- <span>12</span>
721
+ <span>13</span>
722
722
  </span>
723
723
  &nbsp;
724
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
725
- <span>chokcoco</span>
724
+ <a target="_blank" href="https://segmentfault.com/u/jerryc" title="Programming Language">
725
+ <span>JerryC</span>
726
726
  </a>
727
727
  </div>
728
728
  <div class="details">
729
- 今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现：简单分析一下，这个交互效果主要有两个核心：借助了 CSS 3D 的能力元素的旋转需要和鼠标的移动相结合本文，就将讲述如何使用纯 CSS 实现类似...
729
+ PWA （Progressive Web App）指的是使用指定技术和标准模式来开发的 Web 应用，让 Web 应用具有原生应用的特性和体验。比如我们觉得本地应用使用便捷，响应速度更加快等。
730
730
  </div>
731
731
  </div>
732
732
  </li>
@@ -763,34 +763,6 @@
763
763
  <div class="info">
764
764
  <div class="rank">
765
765
  <span title="Ranking 23">23</span>
766
- <a href="https://segmentfault.com/a/1190000041826742" target="_blank" title="现代 CSS 解决方案：CSS 数学函数">现代 CSS 解决方案：CSS 数学函数</a>
767
- </div>
768
- <div class="sub-title followers">
769
-
770
- <span title="Stargazers Count">
771
- <svg width="12" height="12" viewBox="0 0 16 16">
772
- <g fill="none" fill-rule="evenodd">
773
- <path d="M0 0h16v16H0z"/>
774
- <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"/>
775
- </g>
776
- </svg>
777
- <span>15</span>
778
- </span>
779
- &nbsp;
780
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
781
- <span>chokcoco</span>
782
- </a>
783
- </div>
784
- <div class="details">
785
- 在 CSS 中，其实存在各种各样的函数。具体分为：Transform functionsMath functionsFilter functionsColor functionsImage functionsCounter functionsFont functionsShape functionsReference functionsCSS grid...
786
- </div>
787
- </div>
788
- </li>
789
-
790
- <li>
791
- <div class="info">
792
- <div class="rank">
793
- <span title="Ranking 24">24</span>
794
766
  <a href="https://segmentfault.com/a/1190000041757846" target="_blank" title="招聘季征文活动获奖名单公布，快来领奖~">招聘季征文活动获奖名单公布，快来领奖~</a>
795
767
  </div>
796
768
  <div class="sub-title followers">
@@ -818,7 +790,7 @@
818
790
  <li>
819
791
  <div class="info">
820
792
  <div class="rank">
821
- <span title="Ranking 25">25</span>
793
+ <span title="Ranking 24">24</span>
822
794
  <a href="https://segmentfault.com/a/1190000041707644" target="_blank" title="图说前端-送给您百张前端技术图谱">图说前端-送给您百张前端技术图谱</a>
823
795
  </div>
824
796
  <div class="sub-title followers">
@@ -846,7 +818,7 @@
846
818
  <li>
847
819
  <div class="info">
848
820
  <div class="rank">
849
- <span title="Ranking 26">26</span>
821
+ <span title="Ranking 25">25</span>
850
822
  <a href="https://segmentfault.com/a/1190000041718955" target="_blank" title="从源码里的一个注释，我追溯到了12年前，有点意思。">从源码里的一个注释，我追溯到了12年前，有点意思。</a>
851
823
  </div>
852
824
  <div class="sub-title followers">
@@ -874,7 +846,7 @@
874
846
  <li>
875
847
  <div class="info">
876
848
  <div class="rank">
877
- <span title="Ranking 27">27</span>
849
+ <span title="Ranking 26">26</span>
878
850
  <a href="https://segmentfault.com/a/1190000041794241" target="_blank" title="跨域问题很难吗？来！教你使用 Nginx 反向代理轻松解决">跨域问题很难吗？来！教你使用 Nginx 反向代理轻松解决</a>
879
851
  </div>
880
852
  <div class="sub-title followers">
@@ -902,7 +874,7 @@
902
874
  <li>
903
875
  <div class="info">
904
876
  <div class="rank">
905
- <span title="Ranking 28">28</span>
877
+ <span title="Ranking 27">27</span>
906
878
  <a href="https://segmentfault.com/a/1190000041711730" target="_blank" title="这些CSS提效技巧，你需要知道！">这些CSS提效技巧，你需要知道！</a>
907
879
  </div>
908
880
  <div class="sub-title followers">
@@ -930,7 +902,7 @@
930
902
  <li>
931
903
  <div class="info">
932
904
  <div class="rank">
933
- <span title="Ranking 29">29</span>
905
+ <span title="Ranking 28">28</span>
934
906
  <a href="https://segmentfault.com/a/1190000041798153" target="_blank" title="React官方团队出手，补齐原生Hook短板">React官方团队出手，补齐原生Hook短板</a>
935
907
  </div>
936
908
  <div class="sub-title followers">
@@ -958,7 +930,7 @@
958
930
  <li>
959
931
  <div class="info">
960
932
  <div class="rank">
961
- <span title="Ranking 30">30</span>
933
+ <span title="Ranking 29">29</span>
962
934
  <a href="https://segmentfault.com/a/1190000041763788" target="_blank" title="提高前端人效率的工具、网站和书籍">提高前端人效率的工具、网站和书籍</a>
963
935
  </div>
964
936
  <div class="sub-title followers">
@@ -983,6 +955,34 @@
983
955
  </div>
984
956
  </li>
985
957
 
958
+ <li>
959
+ <div class="info">
960
+ <div class="rank">
961
+ <span title="Ranking 30">30</span>
962
+ <a href="https://segmentfault.com/a/1190000041717742" target="_blank" title="精读《不再需要 JS 做的 5 件事》">精读《不再需要 JS 做的 5 件事》</a>
963
+ </div>
964
+ <div class="sub-title followers">
965
+
966
+ <span title="Stargazers Count">
967
+ <svg width="12" height="12" viewBox="0 0 16 16">
968
+ <g fill="none" fill-rule="evenodd">
969
+ <path d="M0 0h16v16H0z"/>
970
+ <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"/>
971
+ </g>
972
+ </svg>
973
+ <span>9</span>
974
+ </span>
975
+ &nbsp;
976
+ <a target="_blank" href="https://segmentfault.com/u/aoyangyudakong" title="Programming Language">
977
+ <span>黄子毅</span>
978
+ </a>
979
+ </div>
980
+ <div class="details">
981
+ 关注 JS 太久，会养成任何功能都用 JS 实现的习惯，而忘记了 HTML 与 CSS 也具备一定的功能特征。其实有些功能用 JS 实现吃力不讨好，我们要综合使用技术工具，而不是只依赖 JS。
982
+ </div>
983
+ </div>
984
+ </li>
985
+
986
986
  </ul>
987
987
  <div class="footer">
988
988
  <div>
@@ -999,7 +999,7 @@
999
999
  <img src="https://img.shields.io/npm/v/@wcj/github-rank.svg?label=unpkg">
1000
1000
  </a>
1001
1001
  </div>
1002
- <div class="time">Last cache created on 2022/5/13 by Github API v3.</div>
1002
+ <div class="time">Last cache created on 2022/5/14 by Github API v3.</div>
1003
1003
  Create by <a href="https://github.com/jaywcjlove" target="_blank">小弟调调™</a>.
1004
1004
  </div>
1005
1005
  </body>