@wcj/github-rank 22.7.8 → 22.7.9

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 (37) hide show
  1. package/dist/repos.json +20271 -20271
  2. package/dist/sifou-daily.json +12 -30
  3. package/dist/sifou-monthly.json +62 -62
  4. package/dist/sifou-weekly.json +105 -105
  5. package/dist/toutiao-30.json +34 -34
  6. package/dist/toutiao-7.json +53 -53
  7. package/dist/toutiao-90.json +20 -20
  8. package/dist/trending-daily.json +166 -166
  9. package/dist/trending-monthly.json +153 -153
  10. package/dist/trending-weekly.json +169 -169
  11. package/dist/users.china.json +1377 -1377
  12. package/dist/users.json +2282 -2282
  13. package/package.json +1 -1
  14. package/web/data/repos.json +20271 -20271
  15. package/web/data/sifou-daily.json +12 -30
  16. package/web/data/sifou-monthly.json +62 -62
  17. package/web/data/sifou-weekly.json +105 -105
  18. package/web/data/toutiao-30.json +34 -34
  19. package/web/data/toutiao-7.json +53 -53
  20. package/web/data/toutiao-90.json +20 -20
  21. package/web/data/trending-daily.json +166 -166
  22. package/web/data/trending-monthly.json +153 -153
  23. package/web/data/trending-weekly.json +169 -169
  24. package/web/data/users.china.json +1377 -1377
  25. package/web/data/users.json +2282 -2282
  26. package/web/index.html +1185 -1185
  27. package/web/repos.html +2837 -2837
  28. package/web/sifou-daily.html +12 -68
  29. package/web/sifou-monthly.html +104 -104
  30. package/web/sifou-weekly.html +112 -112
  31. package/web/toutiao-30.html +69 -69
  32. package/web/toutiao-7.html +48 -48
  33. package/web/toutiao-90.html +17 -17
  34. package/web/trending-monthly.html +137 -133
  35. package/web/trending-weekly.html +150 -146
  36. package/web/trending.html +136 -152
  37. package/web/users.china.html +750 -750
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/7/8 by
119
+ <div class="time">Last cache created on 2022/7/9 by
120
120
 
121
121
 
122
122
 
@@ -145,34 +145,6 @@
145
145
  <div class="info">
146
146
  <div class="rank">
147
147
  <span title="Ranking 1">1</span>
148
- <a href="https://segmentfault.com/a/1190000041947673" target="_blank" title="文字轮播与图片轮播？CSS 不在话下">文字轮播与图片轮播？CSS 不在话下</a>
149
- </div>
150
- <div class="sub-title followers">
151
-
152
- <span title="Stargazers Count">
153
- <svg width="12" height="12" viewBox="0 0 16 16">
154
- <g fill="none" fill-rule="evenodd">
155
- <path d="M0 0h16v16H0z"/>
156
- <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"/>
157
- </g>
158
- </svg>
159
- <span>44</span>
160
- </span>
161
- &nbsp;
162
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
163
- <span>chokcoco</span>
164
- </a>
165
- </div>
166
- <div class="details">
167
- 今天，分享一个实际业务中能够用得上的动画技巧。巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？我们来简单分析分析，从...
168
- </div>
169
- </div>
170
- </li>
171
-
172
- <li>
173
- <div class="info">
174
- <div class="rank">
175
- <span title="Ranking 2">2</span>
176
148
  <a href="https://segmentfault.com/a/1190000041974425" target="_blank" title="巧妙使用Vue.extend继承组件实现el-table双击可编辑（不使用v-if和v-else）">巧妙使用Vue.extend继承组件实现el-table双击可编辑（不使用v-if和v-else）</a>
177
149
  </div>
178
150
  <div class="sub-title followers">
@@ -200,7 +172,7 @@
200
172
  <li>
201
173
  <div class="info">
202
174
  <div class="rank">
203
- <span title="Ranking 3">3</span>
175
+ <span title="Ranking 2">2</span>
204
176
  <a href="https://segmentfault.com/a/1190000042006775" target="_blank" title="CSS实现可拉伸调整尺寸的分栏布局">CSS实现可拉伸调整尺寸的分栏布局</a>
205
177
  </div>
206
178
  <div class="sub-title followers">
@@ -228,7 +200,7 @@
228
200
  <li>
229
201
  <div class="info">
230
202
  <div class="rank">
231
- <span title="Ranking 4">4</span>
203
+ <span title="Ranking 3">3</span>
232
204
  <a href="https://segmentfault.com/a/1190000041962607" target="_blank" title="搭建前端监控，如何采集异常数据？">搭建前端监控，如何采集异常数据？</a>
233
205
  </div>
234
206
  <div class="sub-title followers">
@@ -256,7 +228,7 @@
256
228
  <li>
257
229
  <div class="info">
258
230
  <div class="rank">
259
- <span title="Ranking 5">5</span>
231
+ <span title="Ranking 4">4</span>
260
232
  <a href="https://segmentfault.com/a/1190000041998615" target="_blank" title="掘地三尺搞定 Redis 与 MySQL 数据一致性问题">掘地三尺搞定 Redis 与 MySQL 数据一致性问题</a>
261
233
  </div>
262
234
  <div class="sub-title followers">
@@ -284,7 +256,7 @@
284
256
  <li>
285
257
  <div class="info">
286
258
  <div class="rank">
287
- <span title="Ranking 6">6</span>
259
+ <span title="Ranking 5">5</span>
288
260
  <a href="https://segmentfault.com/a/1190000042065365" target="_blank" title="CSS层级小技巧！如何在滚动时自动添加头部阴影？">CSS层级小技巧！如何在滚动时自动添加头部阴影？</a>
289
261
  </div>
290
262
  <div class="sub-title followers">
@@ -296,7 +268,7 @@
296
268
  <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"/>
297
269
  </g>
298
270
  </svg>
299
- <span>18</span>
271
+ <span>19</span>
300
272
  </span>
301
273
  &nbsp;
302
274
  <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
@@ -312,8 +284,8 @@
312
284
  <li>
313
285
  <div class="info">
314
286
  <div class="rank">
315
- <span title="Ranking 7">7</span>
316
- <a href="https://segmentfault.com/a/1190000042011578" target="_blank" title="如何移除你项目中99%的JS代码">如何移除你项目中99%的JS代码</a>
287
+ <span title="Ranking 6">6</span>
288
+ <a href="https://segmentfault.com/a/1190000042070334" target="_blank" title="使用纯 CSS 实现超酷炫的粘性气泡效果">使用纯 CSS 实现超酷炫的粘性气泡效果</a>
317
289
  </div>
318
290
  <div class="sub-title followers">
319
291
 
@@ -324,15 +296,15 @@
324
296
  <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"/>
325
297
  </g>
326
298
  </svg>
327
- <span>17</span>
299
+ <span>18</span>
328
300
  </span>
329
301
  &nbsp;
330
- <a target="_blank" href="https://segmentfault.com/u/kasong" title="Programming Language">
331
- <span>卡颂</span>
302
+ <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
303
+ <span>chokcoco</span>
332
304
  </a>
333
305
  </div>
334
306
  <div class="details">
335
- 在前不久的WWC22中，builder.io的CTO miško hevery（同时也是Angular/AngularJS的发明者）发表了一段充满想象力的演讲。
307
+ 最近，在 CodePen 上看到这样一个非常有意思的效果：这个效果的核心难点在于气泡的一种特殊融合效果。其源代码在：CodePen Demo -- Goey footer，作者主要使用的是 SVG 滤镜完成的该效果，感兴趣的可以戳源码看看...
336
308
  </div>
337
309
  </div>
338
310
  </li>
@@ -340,8 +312,8 @@
340
312
  <li>
341
313
  <div class="info">
342
314
  <div class="rank">
343
- <span title="Ranking 8">8</span>
344
- <a href="https://segmentfault.com/a/1190000042070334" target="_blank" title="使用纯 CSS 实现超酷炫的粘性气泡效果">使用纯 CSS 实现超酷炫的粘性气泡效果</a>
315
+ <span title="Ranking 7">7</span>
316
+ <a href="https://segmentfault.com/a/1190000042011578" target="_blank" title="如何移除你项目中99%的JS代码">如何移除你项目中99%的JS代码</a>
345
317
  </div>
346
318
  <div class="sub-title followers">
347
319
 
@@ -355,12 +327,12 @@
355
327
  <span>17</span>
356
328
  </span>
357
329
  &nbsp;
358
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
359
- <span>chokcoco</span>
330
+ <a target="_blank" href="https://segmentfault.com/u/kasong" title="Programming Language">
331
+ <span>卡颂</span>
360
332
  </a>
361
333
  </div>
362
334
  <div class="details">
363
- 最近，在 CodePen 上看到这样一个非常有意思的效果：这个效果的核心难点在于气泡的一种特殊融合效果。其源代码在：CodePen Demo -- Goey footer，作者主要使用的是 SVG 滤镜完成的该效果，感兴趣的可以戳源码看看...
335
+ 在前不久的WWC22中，builder.io的CTO miško hevery（同时也是Angular/AngularJS的发明者）发表了一段充满想象力的演讲。
364
336
  </div>
365
337
  </div>
366
338
  </li>
@@ -368,7 +340,7 @@
368
340
  <li>
369
341
  <div class="info">
370
342
  <div class="rank">
371
- <span title="Ranking 9">9</span>
343
+ <span title="Ranking 8">8</span>
372
344
  <a href="https://segmentfault.com/a/1190000041974546" target="_blank" title="让拖拽更加人性化？如何自定义dragover样式">让拖拽更加人性化？如何自定义dragover样式</a>
373
345
  </div>
374
346
  <div class="sub-title followers">
@@ -396,7 +368,7 @@
396
368
  <li>
397
369
  <div class="info">
398
370
  <div class="rank">
399
- <span title="Ranking 10">10</span>
371
+ <span title="Ranking 9">9</span>
400
372
  <a href="https://segmentfault.com/a/1190000042055258" target="_blank" title="switch 有四样写法你知道么">switch 有四样写法你知道么</a>
401
373
  </div>
402
374
  <div class="sub-title followers">
@@ -424,7 +396,7 @@
424
396
  <li>
425
397
  <div class="info">
426
398
  <div class="rank">
427
- <span title="Ranking 11">11</span>
399
+ <span title="Ranking 10">10</span>
428
400
  <a href="https://segmentfault.com/a/1190000041965165" target="_blank" title="JS实现将文本或JSON内容下载到文件中">JS实现将文本或JSON内容下载到文件中</a>
429
401
  </div>
430
402
  <div class="sub-title followers">
@@ -449,6 +421,34 @@
449
421
  </div>
450
422
  </li>
451
423
 
424
+ <li>
425
+ <div class="info">
426
+ <div class="rank">
427
+ <span title="Ranking 11">11</span>
428
+ <a href="https://segmentfault.com/a/1190000042038058" target="_blank" title="视觉还原小技巧！CSS 实现角标效果">视觉还原小技巧！CSS 实现角标效果</a>
429
+ </div>
430
+ <div class="sub-title followers">
431
+
432
+ <span title="Stargazers Count">
433
+ <svg width="12" height="12" viewBox="0 0 16 16">
434
+ <g fill="none" fill-rule="evenodd">
435
+ <path d="M0 0h16v16H0z"/>
436
+ <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"/>
437
+ </g>
438
+ </svg>
439
+ <span>16</span>
440
+ </span>
441
+ &nbsp;
442
+ <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
443
+ <span>XboxYan</span>
444
+ </a>
445
+ </div>
446
+ <div class="details">
447
+ 欢迎关注微信公众号： 前端侦探最近在项目中碰到一个这样的角标设计，如下像这种可以文字可变化，自适应大小的布局，自然首选 CSS 了~下面看看如何实现的（两分钟读完）一、圆角矩形和三角形从设计上可以拆分成两...
448
+ </div>
449
+ </div>
450
+ </li>
451
+
452
452
  <li>
453
453
  <div class="info">
454
454
  <div class="rank">
@@ -481,7 +481,7 @@
481
481
  <div class="info">
482
482
  <div class="rank">
483
483
  <span title="Ranking 13">13</span>
484
- <a href="https://segmentfault.com/a/1190000042038058" target="_blank" title="视觉还原小技巧！CSS 实现角标效果">视觉还原小技巧！CSS 实现角标效果</a>
484
+ <a href="https://segmentfault.com/a/1190000042012558" target="_blank" title="有意思的鼠标指针交互探究">有意思的鼠标指针交互探究</a>
485
485
  </div>
486
486
  <div class="sub-title followers">
487
487
 
@@ -492,15 +492,15 @@
492
492
  <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"/>
493
493
  </g>
494
494
  </svg>
495
- <span>15</span>
495
+ <span>13</span>
496
496
  </span>
497
497
  &nbsp;
498
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
499
- <span>XboxYan</span>
498
+ <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
499
+ <span>chokcoco</span>
500
500
  </a>
501
501
  </div>
502
502
  <div class="details">
503
- 欢迎关注微信公众号： 前端侦探最近在项目中碰到一个这样的角标设计，如下像这种可以文字可变化，自适应大小的布局，自然首选 CSS 了~下面看看如何实现的（两分钟读完）一、圆角矩形和三角形从设计上可以拆分成两...
503
+ 今天，来实现这样一个有意思的交互效果：将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。修改鼠标样式首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点...
504
504
  </div>
505
505
  </div>
506
506
  </li>
@@ -621,7 +621,7 @@
621
621
  <div class="info">
622
622
  <div class="rank">
623
623
  <span title="Ranking 18">18</span>
624
- <a href="https://segmentfault.com/a/1190000042012558" target="_blank" title="有意思的鼠标指针交互探究">有意思的鼠标指针交互探究</a>
624
+ <a href="https://segmentfault.com/a/1190000042048392" target="_blank" title="SegmentFault 思否技术周刊 -- 超实用 Vue 合集，请查收">SegmentFault 思否技术周刊 -- 超实用 Vue 合集，请查收</a>
625
625
  </div>
626
626
  <div class="sub-title followers">
627
627
 
@@ -632,15 +632,15 @@
632
632
  <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"/>
633
633
  </g>
634
634
  </svg>
635
- <span>12</span>
635
+ <span>8</span>
636
636
  </span>
637
637
  &nbsp;
638
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
639
- <span>chokcoco</span>
638
+ <a target="_blank" href="https://segmentfault.com/u/beverly0" title="Programming Language">
639
+ <span>Beverly</span>
640
640
  </a>
641
641
  </div>
642
642
  <div class="details">
643
- 今天，来实现这样一个有意思的交互效果：将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。修改鼠标样式首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点...
643
+ Vue.js 是一个用于创建 web 交互界面的工具。其特点是简洁 HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。数据驱动 自动追踪依赖的模板表达式和计算属性。组件化 用解耦、可复用的组件来构造界面。轻...
644
644
  </div>
645
645
  </div>
646
646
  </li>
@@ -649,7 +649,7 @@
649
649
  <div class="info">
650
650
  <div class="rank">
651
651
  <span title="Ranking 19">19</span>
652
- <a href="https://segmentfault.com/a/1190000042048392" target="_blank" title="SegmentFault 思否技术周刊 -- 超实用 Vue 合集，请查收">SegmentFault 思否技术周刊 -- 超实用 Vue 合集，请查收</a>
652
+ <a href="https://segmentfault.com/a/1190000041990709" target="_blank" title="前端性能监测，Runtime Performance Debug 技巧">前端性能监测，Runtime Performance Debug 技巧</a>
653
653
  </div>
654
654
  <div class="sub-title followers">
655
655
 
@@ -660,15 +660,15 @@
660
660
  <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"/>
661
661
  </g>
662
662
  </svg>
663
- <span>8</span>
663
+ <span>11</span>
664
664
  </span>
665
665
  &nbsp;
666
- <a target="_blank" href="https://segmentfault.com/u/beverly0" title="Programming Language">
667
- <span>Beverly</span>
666
+ <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
667
+ <span>前端小智</span>
668
668
  </a>
669
669
  </div>
670
670
  <div class="details">
671
- Vue.js 是一个用于创建 web 交互界面的工具。其特点是简洁 HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。数据驱动 自动追踪依赖的模板表达式和计算属性。组件化 用解耦、可复用的组件来构造界面。轻...
671
+ 提到 Web 前端的效能优化，有许多的技巧是聚焦在如何减少页面的“载入时间 Loading Time”，例如 Code Splitting 透过减少需要载入的 Bundle Size 来加快载入效能。也有些技巧是针对执行时期 (Runtime) 的优化与调...
672
672
  </div>
673
673
  </div>
674
674
  </li>
@@ -677,7 +677,7 @@
677
677
  <div class="info">
678
678
  <div class="rank">
679
679
  <span title="Ranking 20">20</span>
680
- <a href="https://segmentfault.com/a/1190000041990709" target="_blank" title="前端性能监测，Runtime Performance Debug 技巧">前端性能监测，Runtime Performance Debug 技巧</a>
680
+ <a href="https://segmentfault.com/a/1190000042012599" target="_blank" title="SegmentFault 思否社区 10 周年 | 寄语有奖获奖名单公布，快来领奖~">SegmentFault 思否社区 10 周年 | 寄语有奖获奖名单公布，快来领奖~</a>
681
681
  </div>
682
682
  <div class="sub-title followers">
683
683
 
@@ -688,15 +688,15 @@
688
688
  <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"/>
689
689
  </g>
690
690
  </svg>
691
- <span>11</span>
691
+ <span>7</span>
692
692
  </span>
693
693
  &nbsp;
694
- <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
695
- <span>前端小智</span>
694
+ <a target="_blank" href="https://segmentfault.com/u/segmentfault" title="Programming Language">
695
+ <span>SegmentFault思否</span>
696
696
  </a>
697
697
  </div>
698
698
  <div class="details">
699
- 提到 Web 前端的效能优化，有许多的技巧是聚焦在如何减少页面的“载入时间 Loading Time”，例如 Code Splitting 透过减少需要载入的 Bundle Size 来加快载入效能。也有些技巧是针对执行时期 (Runtime) 的优化与调...
699
+ 【寄语有奖】的中奖小伙伴们，我们会在7月1日以后奖礼品陆续发出PS：疫情地区若无法接收快递，发货时间会适当延后~哈喽各位社区的小伙伴！SegmentFault 思否社区 10 周年社区活动开奖啦，快来领奖~以下揭晓的是参...
700
700
  </div>
701
701
  </div>
702
702
  </li>
@@ -705,7 +705,7 @@
705
705
  <div class="info">
706
706
  <div class="rank">
707
707
  <span title="Ranking 21">21</span>
708
- <a href="https://segmentfault.com/a/1190000042012599" target="_blank" title="SegmentFault 思否社区 10 周年 | 寄语有奖获奖名单公布，快来领奖~">SegmentFault 思否社区 10 周年 | 寄语有奖获奖名单公布，快来领奖~</a>
708
+ <a href="https://segmentfault.com/a/1190000041980427" target="_blank" title="使用 content-visibility 优化渲染性能">使用 content-visibility 优化渲染性能</a>
709
709
  </div>
710
710
  <div class="sub-title followers">
711
711
 
@@ -716,15 +716,15 @@
716
716
  <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"/>
717
717
  </g>
718
718
  </svg>
719
- <span>7</span>
719
+ <span>12</span>
720
720
  </span>
721
721
  &nbsp;
722
- <a target="_blank" href="https://segmentfault.com/u/segmentfault" title="Programming Language">
723
- <span>SegmentFault思否</span>
722
+ <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
723
+ <span>chokcoco</span>
724
724
  </a>
725
725
  </div>
726
726
  <div class="details">
727
- 【寄语有奖】的中奖小伙伴们，我们会在7月1日以后奖礼品陆续发出PS：疫情地区若无法接收快递，发货时间会适当延后~哈喽各位社区的小伙伴！SegmentFault 思否社区 10 周年社区活动开奖啦，快来领奖~以下揭晓的是参...
727
+ content-visibility：属性控制一个元素是否渲染其内容，它允许用户代理（浏览器）潜在地省略大量布局和渲染工作，直到需要它为止。
728
728
  </div>
729
729
  </div>
730
730
  </li>
@@ -789,7 +789,7 @@
789
789
  <div class="info">
790
790
  <div class="rank">
791
791
  <span title="Ranking 24">24</span>
792
- <a href="https://segmentfault.com/a/1190000042001788" target="_blank" title="玩转 AbortController 控制器">玩转 AbortController 控制器</a>
792
+ <a href="https://segmentfault.com/a/1190000042003368" target="_blank" title="Sass应用之实现主题切换">Sass应用之实现主题切换</a>
793
793
  </div>
794
794
  <div class="sub-title followers">
795
795
 
@@ -800,15 +800,15 @@
800
800
  <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"/>
801
801
  </g>
802
802
  </svg>
803
- <span>6</span>
803
+ <span>7</span>
804
804
  </span>
805
805
  &nbsp;
806
- <a target="_blank" href="https://segmentfault.com/u/jump_and_jump" title="Programming Language">
807
- <span>jump__jump</span>
806
+ <a target="_blank" href="https://segmentfault.com/u/zhouqichao" title="Programming Language">
807
+ <span>玛尔斯通</span>
808
808
  </a>
809
809
  </div>
810
810
  <div class="details">
811
- 绝大部分情况，网络请求都是先请求先响应。但是某些情况下，由于未知的一些问题，可能会导致先请求的 api 后返回。最简单的解决方案就是添加 loading 状态，在所有请求都完成后才能进行下一次请求。
811
+ 实现主题切换有几种不同的方案，比如使用CSS变量，使用JavaScript动态加载对应的主题样式文件等。本文主要讲的是如何使用Sass实现主题切换。
812
812
  </div>
813
813
  </div>
814
814
  </li>
@@ -817,7 +817,7 @@
817
817
  <div class="info">
818
818
  <div class="rank">
819
819
  <span title="Ranking 25">25</span>
820
- <a href="https://segmentfault.com/a/1190000041959594" target="_blank" title="构建基于React18的电子表格程序">构建基于React18的电子表格程序</a>
820
+ <a href="https://segmentfault.com/a/1190000042001788" target="_blank" title="玩转 AbortController 控制器">玩转 AbortController 控制器</a>
821
821
  </div>
822
822
  <div class="sub-title followers">
823
823
 
@@ -828,15 +828,15 @@
828
828
  <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"/>
829
829
  </g>
830
830
  </svg>
831
- <span>5</span>
831
+ <span>6</span>
832
832
  </span>
833
833
  &nbsp;
834
- <a target="_blank" href="https://segmentfault.com/u/grapecity" title="Programming Language">
835
- <span>葡萄城技术团队</span>
834
+ <a target="_blank" href="https://segmentfault.com/u/jump_and_jump" title="Programming Language">
835
+ <span>jump__jump</span>
836
836
  </a>
837
837
  </div>
838
838
  <div class="details">
839
- 2022年3月29日，React正式发布18.0.0。本次升级内容包括开箱即用的改进，如自动批处理、新的API（如startTransition）和支持Suspense 的流式服务器端渲染。关于此次发布新增的功能可以参考官方文档。
839
+ 绝大部分情况，网络请求都是先请求先响应。但是某些情况下，由于未知的一些问题，可能会导致先请求的 api 后返回。最简单的解决方案就是添加 loading 状态，在所有请求都完成后才能进行下一次请求。
840
840
  </div>
841
841
  </div>
842
842
  </li>
@@ -845,7 +845,7 @@
845
845
  <div class="info">
846
846
  <div class="rank">
847
847
  <span title="Ranking 26">26</span>
848
- <a href="https://segmentfault.com/a/1190000041974765" target="_blank" title="为什么Hook没有ErrorBoundary？">为什么Hook没有ErrorBoundary？</a>
848
+ <a href="https://segmentfault.com/a/1190000041959594" target="_blank" title="构建基于React18的电子表格程序">构建基于React18的电子表格程序</a>
849
849
  </div>
850
850
  <div class="sub-title followers">
851
851
 
@@ -856,15 +856,15 @@
856
856
  <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"/>
857
857
  </g>
858
858
  </svg>
859
- <span>4</span>
859
+ <span>5</span>
860
860
  </span>
861
861
  &nbsp;
862
- <a target="_blank" href="https://segmentfault.com/u/kasong" title="Programming Language">
863
- <span>卡颂</span>
862
+ <a target="_blank" href="https://segmentfault.com/u/grapecity" title="Programming Language">
863
+ <span>葡萄城技术团队</span>
864
864
  </a>
865
865
  </div>
866
866
  <div class="details">
867
- 在很多全面使用Hooks开发的团队，唯一使用ClassComponent的场景就是使用ClassComponent创建ErrorBoundary。
867
+ 2022年3月29日，React正式发布18.0.0。本次升级内容包括开箱即用的改进，如自动批处理、新的API（如startTransition）和支持Suspense 的流式服务器端渲染。关于此次发布新增的功能可以参考官方文档。
868
868
  </div>
869
869
  </div>
870
870
  </li>
@@ -873,7 +873,7 @@
873
873
  <div class="info">
874
874
  <div class="rank">
875
875
  <span title="Ranking 27">27</span>
876
- <a href="https://segmentfault.com/a/1190000042048198" target="_blank" title="又拍云 Redis 的改进之路">又拍云 Redis 的改进之路</a>
876
+ <a href="https://segmentfault.com/a/1190000042069856" target="_blank" title="使用CSS background实现炫酷悬停效果">使用CSS background实现炫酷悬停效果</a>
877
877
  </div>
878
878
  <div class="sub-title followers">
879
879
 
@@ -884,15 +884,15 @@
884
884
  <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"/>
885
885
  </g>
886
886
  </svg>
887
- <span>7</span>
887
+ <span>9</span>
888
888
  </span>
889
889
  &nbsp;
890
- <a target="_blank" href="https://segmentfault.com/u/yunshu_blog" title="Programming Language">
891
- <span>云叔_又拍云</span>
890
+ <a target="_blank" href="https://segmentfault.com/u/nanchengfe" title="Programming Language">
891
+ <span>南城大前端</span>
892
892
  </a>
893
893
  </div>
894
894
  <div class="details">
895
- 作为推出国内首创可编程 CDN 服务的专业云服务提供商，又拍云利用 CDN 边缘网络规模和性能，允许客户自定义编写规则来满足常用业务场景。而为了保证这些源数据，如边缘重定向、请求限速、自定义错误页面、访问防...
895
+ 日常开发过程中，会遇到不少按钮鼠标悬停的效果，实现这类悬停效果的方式有很多，借助伪元素，CSS3变换及过渡等都可以实现。今天的文章将使用背景色实现类似的效果，当我们遇到一个问题时，你的脑海中的方案不止...
896
896
  </div>
897
897
  </div>
898
898
  </li>
@@ -901,7 +901,7 @@
901
901
  <div class="info">
902
902
  <div class="rank">
903
903
  <span title="Ranking 28">28</span>
904
- <a href="https://segmentfault.com/a/1190000041980427" target="_blank" title="使用 content-visibility 优化渲染性能">使用 content-visibility 优化渲染性能</a>
904
+ <a href="https://segmentfault.com/a/1190000041974765" target="_blank" title="为什么Hook没有ErrorBoundary？">为什么Hook没有ErrorBoundary？</a>
905
905
  </div>
906
906
  <div class="sub-title followers">
907
907
 
@@ -912,15 +912,15 @@
912
912
  <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"/>
913
913
  </g>
914
914
  </svg>
915
- <span>11</span>
915
+ <span>4</span>
916
916
  </span>
917
917
  &nbsp;
918
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
919
- <span>chokcoco</span>
918
+ <a target="_blank" href="https://segmentfault.com/u/kasong" title="Programming Language">
919
+ <span>卡颂</span>
920
920
  </a>
921
921
  </div>
922
922
  <div class="details">
923
- content-visibility：属性控制一个元素是否渲染其内容，它允许用户代理（浏览器）潜在地省略大量布局和渲染工作，直到需要它为止。
923
+ 在很多全面使用Hooks开发的团队，唯一使用ClassComponent的场景就是使用ClassComponent创建ErrorBoundary。
924
924
  </div>
925
925
  </div>
926
926
  </li>
@@ -929,7 +929,7 @@
929
929
  <div class="info">
930
930
  <div class="rank">
931
931
  <span title="Ranking 29">29</span>
932
- <a href="https://segmentfault.com/a/1190000042042002" target="_blank" title="几百行代码实现一个 JSON 解析器">几百行代码实现一个 JSON 解析器</a>
932
+ <a href="https://segmentfault.com/a/1190000042048198" target="_blank" title="又拍云 Redis 的改进之路">又拍云 Redis 的改进之路</a>
933
933
  </div>
934
934
  <div class="sub-title followers">
935
935
 
@@ -940,15 +940,15 @@
940
940
  <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"/>
941
941
  </g>
942
942
  </svg>
943
- <span>5</span>
943
+ <span>7</span>
944
944
  </span>
945
945
  &nbsp;
946
- <a target="_blank" href="https://segmentfault.com/u/crossoverjie" title="Programming Language">
947
- <span>crossoverJie</span>
946
+ <a target="_blank" href="https://segmentfault.com/u/yunshu_blog" title="Programming Language">
947
+ <span>云叔_又拍云</span>
948
948
  </a>
949
949
  </div>
950
950
  <div class="details">
951
- 以前我也有思考过它是如何实现的，过程中一旦和编译原理扯上关系就不由自主的劝退了；但经过这段时间的实践我发现实现一个 JSON 解析器似乎也不困难，只是运用到了编译原理前端的部分知识就完全足够了。
951
+ 作为推出国内首创可编程 CDN 服务的专业云服务提供商，又拍云利用 CDN 边缘网络规模和性能，允许客户自定义编写规则来满足常用业务场景。而为了保证这些源数据，如边缘重定向、请求限速、自定义错误页面、访问防...
952
952
  </div>
953
953
  </div>
954
954
  </li>
@@ -997,7 +997,7 @@
997
997
  <img src="https://img.shields.io/npm/v/@wcj/github-rank.svg?label=unpkg">
998
998
  </a>
999
999
  </div>
1000
- <div class="time">Last cache created on 2022/7/8 by Github API v3.</div>
1000
+ <div class="time">Last cache created on 2022/7/9 by Github API v3.</div>
1001
1001
  Create by <a href="https://github.com/jaywcjlove" target="_blank">小弟调调™</a>.
1002
1002
  </div>
1003
1003
  </body>