@wcj/github-rank 22.8.9 → 22.8.10

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 +28895 -28911
  2. package/dist/sifou-daily.json +29 -65
  3. package/dist/sifou-monthly.json +77 -77
  4. package/dist/sifou-weekly.json +119 -119
  5. package/dist/toutiao-30.json +59 -59
  6. package/dist/toutiao-7.json +91 -91
  7. package/dist/toutiao-90.json +22 -22
  8. package/dist/trending-daily.json +75 -75
  9. package/dist/trending-monthly.json +73 -73
  10. package/dist/trending-weekly.json +71 -71
  11. package/dist/users.china.json +1243 -1243
  12. package/dist/users.json +2230 -2230
  13. package/package.json +1 -1
  14. package/web/data/repos.json +28895 -28911
  15. package/web/data/sifou-daily.json +29 -65
  16. package/web/data/sifou-monthly.json +77 -77
  17. package/web/data/sifou-weekly.json +119 -119
  18. package/web/data/toutiao-30.json +59 -59
  19. package/web/data/toutiao-7.json +91 -91
  20. package/web/data/toutiao-90.json +22 -22
  21. package/web/data/trending-daily.json +75 -75
  22. package/web/data/trending-monthly.json +73 -73
  23. package/web/data/trending-weekly.json +71 -71
  24. package/web/data/users.china.json +1243 -1243
  25. package/web/data/users.json +2230 -2230
  26. package/web/index.html +1189 -1189
  27. package/web/repos.html +3074 -3066
  28. package/web/sifou-daily.html +25 -137
  29. package/web/sifou-monthly.html +119 -119
  30. package/web/sifou-weekly.html +121 -121
  31. package/web/toutiao-30.html +60 -60
  32. package/web/toutiao-7.html +70 -70
  33. package/web/toutiao-90.html +30 -30
  34. package/web/trending-monthly.html +75 -75
  35. package/web/trending-weekly.html +73 -73
  36. package/web/trending.html +77 -77
  37. package/web/users.china.html +650 -650
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/8/9 by
119
+ <div class="time">Last cache created on 2022/8/10 by
120
120
 
121
121
 
122
122
 
@@ -145,6 +145,34 @@
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/1190000042251637" target="_blank" title="提升web输入体验！JS 如何自动配对标点符号？">提升web输入体验！JS 如何自动配对标点符号？</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>18</span>
160
+ </span>
161
+ &nbsp;
162
+ <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
163
+ <span>XboxYan</span>
164
+ </a>
165
+ </div>
166
+ <div class="details">
167
+ 欢迎关注微信公众号前端侦探温馨提示：在阅读本文之前，可以先回顾这篇文章：Web 中的“选区”和“光标”，有很多你可能不太知道的原生 API，以下内容是对该内容的实践运用在写作编辑中，有很多需要成对出现的标点符...
168
+ </div>
169
+ </div>
170
+ </li>
171
+
172
+ <li>
173
+ <div class="info">
174
+ <div class="rank">
175
+ <span title="Ranking 2">2</span>
148
176
  <a href="https://segmentfault.com/a/1190000042217200" target="_blank" title="圆角大杀器，使用滤镜构建圆角及波浪效果">圆角大杀器，使用滤镜构建圆角及波浪效果</a>
149
177
  </div>
150
178
  <div class="sub-title followers">
@@ -172,7 +200,7 @@
172
200
  <li>
173
201
  <div class="info">
174
202
  <div class="rank">
175
- <span title="Ranking 2">2</span>
203
+ <span title="Ranking 3">3</span>
176
204
  <a href="https://segmentfault.com/a/1190000042184211" target="_blank" title="超酷炫的转场动画？CSS 轻松拿下！">超酷炫的转场动画？CSS 轻松拿下！</a>
177
205
  </div>
178
206
  <div class="sub-title followers">
@@ -200,8 +228,8 @@
200
228
  <li>
201
229
  <div class="info">
202
230
  <div class="rank">
203
- <span title="Ranking 3">3</span>
204
- <a href="https://segmentfault.com/a/1190000042251637" target="_blank" title="提升web输入体验！JS 如何自动配对标点符号？">提升web输入体验！JS 如何自动配对标点符号？</a>
231
+ <span title="Ranking 4">4</span>
232
+ <a href="https://segmentfault.com/a/1190000042094549" target="_blank" title="动画合成小技巧！CSS 实现动感的倒计时效果">动画合成小技巧！CSS 实现动感的倒计时效果</a>
205
233
  </div>
206
234
  <div class="sub-title followers">
207
235
 
@@ -212,7 +240,7 @@
212
240
  <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"/>
213
241
  </g>
214
242
  </svg>
215
- <span>17</span>
243
+ <span>22</span>
216
244
  </span>
217
245
  &nbsp;
218
246
  <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
@@ -220,7 +248,7 @@
220
248
  </a>
221
249
  </div>
222
250
  <div class="details">
223
- 欢迎关注微信公众号前端侦探温馨提示：在阅读本文之前，可以先回顾这篇文章：Web 中的“选区”和“光标”，有很多你可能不太知道的原生 API，以下内容是对该内容的实践运用在写作编辑中，有很多需要成对出现的标点符...
251
+ 欢迎关注微信公众号： 前端侦探介绍一个 CSS 动画合成小技巧。先看效果这是一个非常“动感”的倒计时效果，通常在一些活动开场中比较常见，分析一下整个动画过程，不难发现，有以下几类动画数字的变化缩小和放大透...
224
252
  </div>
225
253
  </div>
226
254
  </li>
@@ -228,8 +256,8 @@
228
256
  <li>
229
257
  <div class="info">
230
258
  <div class="rank">
231
- <span title="Ranking 4">4</span>
232
- <a href="https://segmentfault.com/a/1190000042094549" target="_blank" title="动画合成小技巧！CSS 实现动感的倒计时效果">动画合成小技巧！CSS 实现动感的倒计时效果</a>
259
+ <span title="Ranking 5">5</span>
260
+ <a href="https://segmentfault.com/a/1190000042184163" target="_blank" title="CSS color-scheme 和夜间模式">CSS color-scheme 和夜间模式</a>
233
261
  </div>
234
262
  <div class="sub-title followers">
235
263
 
@@ -240,7 +268,7 @@
240
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"/>
241
269
  </g>
242
270
  </svg>
243
- <span>21</span>
271
+ <span>18</span>
244
272
  </span>
245
273
  &nbsp;
246
274
  <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
@@ -248,7 +276,7 @@
248
276
  </a>
249
277
  </div>
250
278
  <div class="details">
251
- 欢迎关注微信公众号： 前端侦探介绍一个 CSS 动画合成小技巧。先看效果这是一个非常“动感”的倒计时效果，通常在一些活动开场中比较常见，分析一下整个动画过程，不难发现，有以下几类动画数字的变化缩小和放大透...
279
+ 欢迎关注微信公众号：前端侦探介绍一个和深色模式相关的CSS属性：color-scheme一、什么是 color-scheme？color-scheme顾名思义，即为“配色方案”，在系统中指的是“白天模式”和“夜间模式”。使用这个属性可以轻松的...
252
280
  </div>
253
281
  </div>
254
282
  </li>
@@ -256,7 +284,7 @@
256
284
  <li>
257
285
  <div class="info">
258
286
  <div class="rank">
259
- <span title="Ranking 5">5</span>
287
+ <span title="Ranking 6">6</span>
260
288
  <a href="https://segmentfault.com/a/1190000042093361" target="_blank" title="高阶切图技巧！基于单张图片的任意颜色转换">高阶切图技巧！基于单张图片的任意颜色转换</a>
261
289
  </div>
262
290
  <div class="sub-title followers">
@@ -284,8 +312,8 @@
284
312
  <li>
285
313
  <div class="info">
286
314
  <div class="rank">
287
- <span title="Ranking 6">6</span>
288
- <a href="https://segmentfault.com/a/1190000042184163" target="_blank" title="CSS color-scheme 和夜间模式">CSS color-scheme 和夜间模式</a>
315
+ <span title="Ranking 7">7</span>
316
+ <a href="https://segmentfault.com/a/1190000042103702" target="_blank" title="利用噪声构建美妙的 CSS 图形">利用噪声构建美妙的 CSS 图形</a>
289
317
  </div>
290
318
  <div class="sub-title followers">
291
319
 
@@ -296,15 +324,15 @@
296
324
  <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
325
  </g>
298
326
  </svg>
299
- <span>17</span>
327
+ <span>12</span>
300
328
  </span>
301
329
  &nbsp;
302
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
303
- <span>XboxYan</span>
330
+ <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
331
+ <span>chokcoco</span>
304
332
  </a>
305
333
  </div>
306
334
  <div class="details">
307
- 欢迎关注微信公众号：前端侦探介绍一个和深色模式相关的CSS属性：color-scheme一、什么是 color-scheme？color-scheme顾名思义，即为“配色方案”，在系统中指的是“白天模式”和“夜间模式”。使用这个属性可以轻松的...
335
+ 在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子：此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：...
308
336
  </div>
309
337
  </div>
310
338
  </li>
@@ -312,8 +340,8 @@
312
340
  <li>
313
341
  <div class="info">
314
342
  <div class="rank">
315
- <span title="Ranking 7">7</span>
316
- <a href="https://segmentfault.com/a/1190000042103702" target="_blank" title="利用噪声构建美妙的 CSS 图形">利用噪声构建美妙的 CSS 图形</a>
343
+ <span title="Ranking 8">8</span>
344
+ <a href="https://segmentfault.com/a/1190000042267425" target="_blank" title="妙用 CSS 构建花式透视背景效果">妙用 CSS 构建花式透视背景效果</a>
317
345
  </div>
318
346
  <div class="sub-title followers">
319
347
 
@@ -324,7 +352,7 @@
324
352
  <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
353
  </g>
326
354
  </svg>
327
- <span>12</span>
355
+ <span>18</span>
328
356
  </span>
329
357
  &nbsp;
330
358
  <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
@@ -332,7 +360,7 @@
332
360
  </a>
333
361
  </div>
334
362
  <div class="details">
335
- 在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子：此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：...
363
+ 本文将介绍一种巧用 background 配合 backdrop- filter 来构建有趣的透视背景效果的方式。本技巧源自于一名群友的提问，如何构建如 ElementUI 文档的一种顶栏背景特效，看看效果：仔细看，在页面的的滚动过程中，...
336
364
  </div>
337
365
  </div>
338
366
  </li>
@@ -340,7 +368,7 @@
340
368
  <li>
341
369
  <div class="info">
342
370
  <div class="rank">
343
- <span title="Ranking 8">8</span>
371
+ <span title="Ranking 9">9</span>
344
372
  <a href="https://segmentfault.com/a/1190000042203704" target="_blank" title="社区维基：将你的问答捐赠给社区">社区维基：将你的问答捐赠给社区</a>
345
373
  </div>
346
374
  <div class="sub-title followers">
@@ -368,8 +396,8 @@
368
396
  <li>
369
397
  <div class="info">
370
398
  <div class="rank">
371
- <span title="Ranking 9">9</span>
372
- <a href="https://segmentfault.com/a/1190000042267425" target="_blank" title="妙用 CSS 构建花式透视背景效果">妙用 CSS 构建花式透视背景效果</a>
399
+ <span title="Ranking 10">10</span>
400
+ <a href="https://segmentfault.com/a/1190000042272755" target="_blank" title="防御式CSS是什么？这几点属性重点防御！">防御式CSS是什么？这几点属性重点防御！</a>
373
401
  </div>
374
402
  <div class="sub-title followers">
375
403
 
@@ -383,12 +411,12 @@
383
411
  <span>15</span>
384
412
  </span>
385
413
  &nbsp;
386
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
387
- <span>chokcoco</span>
414
+ <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
415
+ <span>前端小智</span>
388
416
  </a>
389
417
  </div>
390
418
  <div class="details">
391
- 本文将介绍一种巧用 background 配合 backdrop- filter 来构建有趣的透视背景效果的方式。本技巧源自于一名群友的提问，如何构建如 ElementUI 文档的一种顶栏背景特效，看看效果：仔细看，在页面的的滚动过程中，...
419
+ 微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
392
420
  </div>
393
421
  </div>
394
422
  </li>
@@ -396,8 +424,8 @@
396
424
  <li>
397
425
  <div class="info">
398
426
  <div class="rank">
399
- <span title="Ranking 10">10</span>
400
- <a href="https://segmentfault.com/a/1190000042217446" target="_blank" title="今҈天҈真҈是҈热҈化҈了҈！">今҈天҈真҈是҈热҈化҈了҈！</a>
427
+ <span title="Ranking 11">11</span>
428
+ <a href="https://segmentfault.com/a/1190000042283578" target="_blank" title="使用 CSS 构建强大且酷炫的粒子动画">使用 CSS 构建强大且酷炫的粒子动画</a>
401
429
  </div>
402
430
  <div class="sub-title followers">
403
431
 
@@ -408,15 +436,15 @@
408
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"/>
409
437
  </g>
410
438
  </svg>
411
- <span>16</span>
439
+ <span>15</span>
412
440
  </span>
413
441
  &nbsp;
414
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
415
- <span>XboxYan</span>
442
+ <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
443
+ <span>chokcoco</span>
416
444
  </a>
417
445
  </div>
418
446
  <div class="details">
419
- 欢迎关注我的公众号：前端侦探今天真是太热了，不信你看标题今҈天҈真҈是҈热҈化҈了҈！也可以查看下面截图相信大家最近都能看到这样“热化了”的标题。那么，这是如何实现的呢？CSS 可以实现类似的效果吗？一起看看吧...
447
+ 当然，不使用 HTML + CSS 的主要原因在于，粒子动画通常需要较多的粒子，而如果使用 HTML + CSS 的话势必需要过多的 DOM 元素，这也就导致了使用 HTML + CSS 构建的粒子动画在性能上毫无优势。
420
448
  </div>
421
449
  </div>
422
450
  </li>
@@ -424,8 +452,8 @@
424
452
  <li>
425
453
  <div class="info">
426
454
  <div class="rank">
427
- <span title="Ranking 11">11</span>
428
- <a href="https://segmentfault.com/a/1190000042272755" target="_blank" title="防御式CSS是什么？这几点属性重点防御！">防御式CSS是什么？这几点属性重点防御！</a>
455
+ <span title="Ranking 12">12</span>
456
+ <a href="https://segmentfault.com/a/1190000042217446" target="_blank" title="今҈天҈真҈是҈热҈化҈了҈！">今҈天҈真҈是҈热҈化҈了҈！</a>
429
457
  </div>
430
458
  <div class="sub-title followers">
431
459
 
@@ -436,15 +464,15 @@
436
464
  <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
465
  </g>
438
466
  </svg>
439
- <span>14</span>
467
+ <span>16</span>
440
468
  </span>
441
469
  &nbsp;
442
- <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
443
- <span>前端小智</span>
470
+ <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
471
+ <span>XboxYan</span>
444
472
  </a>
445
473
  </div>
446
474
  <div class="details">
447
- 微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势，学习途径等等。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
475
+ 欢迎关注我的公众号：前端侦探今天真是太热了，不信你看标题今҈天҈真҈是҈热҈化҈了҈！也可以查看下面截图相信大家最近都能看到这样“热化了”的标题。那么，这是如何实现的呢？CSS 可以实现类似的效果吗？一起看看吧...
448
476
  </div>
449
477
  </div>
450
478
  </li>
@@ -452,7 +480,7 @@
452
480
  <li>
453
481
  <div class="info">
454
482
  <div class="rank">
455
- <span title="Ranking 12">12</span>
483
+ <span title="Ranking 13">13</span>
456
484
  <a href="https://segmentfault.com/a/1190000042194285" target="_blank" title="试着换个角度理解低代码平台设计的本质">试着换个角度理解低代码平台设计的本质</a>
457
485
  </div>
458
486
  <div class="sub-title followers">
@@ -480,8 +508,8 @@
480
508
  <li>
481
509
  <div class="info">
482
510
  <div class="rank">
483
- <span title="Ranking 13">13</span>
484
- <a href="https://segmentfault.com/a/1190000042195199" target="_blank" title="一步步带你搞懂虚拟 DOM 的工作原理">一步步带你搞懂虚拟 DOM 的工作原理</a>
511
+ <span title="Ranking 14">14</span>
512
+ <a href="https://segmentfault.com/a/1190000042256837" target="_blank" title="前端构建效率优化之路">前端构建效率优化之路</a>
485
513
  </div>
486
514
  <div class="sub-title followers">
487
515
 
@@ -492,15 +520,15 @@
492
520
  <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
521
  </g>
494
522
  </svg>
495
- <span>15</span>
523
+ <span>13</span>
496
524
  </span>
497
525
  &nbsp;
498
- <a target="_blank" href="https://segmentfault.com/u/deepfunc" title="Programming Language">
499
- <span>deepfunc</span>
526
+ <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
527
+ <span>chokcoco</span>
500
528
  </a>
501
529
  </div>
502
530
  <div class="details">
503
- React 和 Vue 中都有虚拟 DOM 的概念，我们应该如何理解和掌握虚拟 DOM 的精髓呢？我推荐大家学习 Snabbdom 这个项目。Snabbdom 是一个虚拟 DOM 实现库，推荐的原因一是代码比较少，核心代码只有几百行；二是 Vue...
531
+ 我们的系统（一个 ToB 的 Web 单页应用）前端单页应用经过多年的迭代，目前已经累积有大几十万行的业务代码，30+ 路由模块，整体的代码量和复杂度还是比较高的。
504
532
  </div>
505
533
  </div>
506
534
  </li>
@@ -508,8 +536,8 @@
508
536
  <li>
509
537
  <div class="info">
510
538
  <div class="rank">
511
- <span title="Ranking 14">14</span>
512
- <a href="https://segmentfault.com/a/1190000042093955" target="_blank" title="webpack 拆包：关于 splitChunks 的几个重点属性解析">webpack 拆包：关于 splitChunks 的几个重点属性解析</a>
539
+ <span title="Ranking 15">15</span>
540
+ <a href="https://segmentfault.com/a/1190000042195199" target="_blank" title="一步步带你搞懂虚拟 DOM 的工作原理">一步步带你搞懂虚拟 DOM 的工作原理</a>
513
541
  </div>
514
542
  <div class="sub-title followers">
515
543
 
@@ -520,7 +548,7 @@
520
548
  <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"/>
521
549
  </g>
522
550
  </svg>
523
- <span>7</span>
551
+ <span>15</span>
524
552
  </span>
525
553
  &nbsp;
526
554
  <a target="_blank" href="https://segmentfault.com/u/deepfunc" title="Programming Language">
@@ -528,7 +556,7 @@
528
556
  </a>
529
557
  </div>
530
558
  <div class="details">
531
- 先来举个简单的栗子，wepack 设置中有 3 个入口文件：a.js、b.js 和 c.js，每个入口文件都同步 import 了 m1.js，不设置 splitChunks，配置下 webpack-bundle-analyzer 插件用来查看输出文件的内容，打包输出是这...
559
+ React 和 Vue 中都有虚拟 DOM 的概念，我们应该如何理解和掌握虚拟 DOM 的精髓呢？我推荐大家学习 Snabbdom 这个项目。Snabbdom 是一个虚拟 DOM 实现库，推荐的原因一是代码比较少，核心代码只有几百行；二是 Vue...
532
560
  </div>
533
561
  </div>
534
562
  </li>
@@ -536,8 +564,8 @@
536
564
  <li>
537
565
  <div class="info">
538
566
  <div class="rank">
539
- <span title="Ranking 15">15</span>
540
- <a href="https://segmentfault.com/a/1190000042256837" target="_blank" title="前端构建效率优化之路">前端构建效率优化之路</a>
567
+ <span title="Ranking 16">16</span>
568
+ <a href="https://segmentfault.com/a/1190000042093955" target="_blank" title="webpack 拆包：关于 splitChunks 的几个重点属性解析">webpack 拆包：关于 splitChunks 的几个重点属性解析</a>
541
569
  </div>
542
570
  <div class="sub-title followers">
543
571
 
@@ -548,15 +576,15 @@
548
576
  <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"/>
549
577
  </g>
550
578
  </svg>
551
- <span>12</span>
579
+ <span>7</span>
552
580
  </span>
553
581
  &nbsp;
554
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
555
- <span>chokcoco</span>
582
+ <a target="_blank" href="https://segmentfault.com/u/deepfunc" title="Programming Language">
583
+ <span>deepfunc</span>
556
584
  </a>
557
585
  </div>
558
586
  <div class="details">
559
- 我们的系统（一个 ToB 的 Web 单页应用）前端单页应用经过多年的迭代，目前已经累积有大几十万行的业务代码，30+ 路由模块，整体的代码量和复杂度还是比较高的。
587
+ 先来举个简单的栗子，wepack 设置中有 3 个入口文件：a.js、b.js 和 c.js，每个入口文件都同步 import 了 m1.js，不设置 splitChunks，配置下 webpack-bundle-analyzer 插件用来查看输出文件的内容，打包输出是这...
560
588
  </div>
561
589
  </div>
562
590
  </li>
@@ -564,7 +592,7 @@
564
592
  <li>
565
593
  <div class="info">
566
594
  <div class="rank">
567
- <span title="Ranking 16">16</span>
595
+ <span title="Ranking 17">17</span>
568
596
  <a href="https://segmentfault.com/a/1190000042092852" target="_blank" title="面试官：主说 Git Rebase 和 Git Merge 差异">面试官：主说 Git Rebase 和 Git Merge 差异</a>
569
597
  </div>
570
598
  <div class="sub-title followers">
@@ -592,7 +620,7 @@
592
620
  <li>
593
621
  <div class="info">
594
622
  <div class="rank">
595
- <span title="Ranking 17">17</span>
623
+ <span title="Ranking 18">18</span>
596
624
  <a href="https://segmentfault.com/a/1190000042183733" target="_blank" title="【分享】从Mybatis源码中，学习到的10种设计模式">【分享】从Mybatis源码中，学习到的10种设计模式</a>
597
625
  </div>
598
626
  <div class="sub-title followers">
@@ -620,7 +648,7 @@
620
648
  <li>
621
649
  <div class="info">
622
650
  <div class="rank">
623
- <span title="Ranking 18">18</span>
651
+ <span title="Ranking 19">19</span>
624
652
  <a href="https://segmentfault.com/a/1190000042200631" target="_blank" title="一个简洁、强大、可扩展的前端项目架构是什么样的？">一个简洁、强大、可扩展的前端项目架构是什么样的？</a>
625
653
  </div>
626
654
  <div class="sub-title followers">
@@ -648,7 +676,7 @@
648
676
  <li>
649
677
  <div class="info">
650
678
  <div class="rank">
651
- <span title="Ranking 19">19</span>
679
+ <span title="Ranking 20">20</span>
652
680
  <a href="https://segmentfault.com/a/1190000042182354" target="_blank" title="如何提出一个高质量的问题？">如何提出一个高质量的问题？</a>
653
681
  </div>
654
682
  <div class="sub-title followers">
@@ -676,7 +704,7 @@
676
704
  <li>
677
705
  <div class="info">
678
706
  <div class="rank">
679
- <span title="Ranking 20">20</span>
707
+ <span title="Ranking 21">21</span>
680
708
  <a href="https://segmentfault.com/a/1190000042244854" target="_blank" title="Wuzzle，不 eject 也能定制 create-react-app 创建的 React 应用">Wuzzle，不 eject 也能定制 create-react-app 创建的 React 应用</a>
681
709
  </div>
682
710
  <div class="sub-title followers">
@@ -704,7 +732,7 @@
704
732
  <li>
705
733
  <div class="info">
706
734
  <div class="rank">
707
- <span title="Ranking 21">21</span>
735
+ <span title="Ranking 22">22</span>
708
736
  <a href="https://segmentfault.com/a/1190000042261453" target="_blank" title="使用前端技术实现静态图片局部流动效果 🌊">使用前端技术实现静态图片局部流动效果 🌊</a>
709
737
  </div>
710
738
  <div class="sub-title followers">
@@ -732,7 +760,7 @@
732
760
  <li>
733
761
  <div class="info">
734
762
  <div class="rank">
735
- <span title="Ranking 22">22</span>
763
+ <span title="Ranking 23">23</span>
736
764
  <a href="https://segmentfault.com/a/1190000042194426" target="_blank" title="搭建前端监控，采集用户行为的 N 种姿势">搭建前端监控，采集用户行为的 N 种姿势</a>
737
765
  </div>
738
766
  <div class="sub-title followers">
@@ -760,7 +788,7 @@
760
788
  <li>
761
789
  <div class="info">
762
790
  <div class="rank">
763
- <span title="Ranking 23">23</span>
791
+ <span title="Ranking 24">24</span>
764
792
  <a href="https://segmentfault.com/a/1190000042232699" target="_blank" title="梳理 Webpack 知识体系与学习资源推荐">梳理 Webpack 知识体系与学习资源推荐</a>
765
793
  </div>
766
794
  <div class="sub-title followers">
@@ -788,7 +816,7 @@
788
816
  <li>
789
817
  <div class="info">
790
818
  <div class="rank">
791
- <span title="Ranking 24">24</span>
819
+ <span title="Ranking 25">25</span>
792
820
  <a href="https://segmentfault.com/a/1190000042094334" target="_blank" title="Three.js系列: 在元宇宙看电影，享受 VR 视觉盛宴">Three.js系列: 在元宇宙看电影，享受 VR 视觉盛宴</a>
793
821
  </div>
794
822
  <div class="sub-title followers">
@@ -813,39 +841,11 @@
813
841
  </div>
814
842
  </li>
815
843
 
816
- <li>
817
- <div class="info">
818
- <div class="rank">
819
- <span title="Ranking 25">25</span>
820
- <a href="https://segmentfault.com/a/1190000042216817" target="_blank" title="使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 🌐">使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 🌐</a>
821
- </div>
822
- <div class="sub-title followers">
823
-
824
- <span title="Stargazers Count">
825
- <svg width="12" height="12" viewBox="0 0 16 16">
826
- <g fill="none" fill-rule="evenodd">
827
- <path d="M0 0h16v16H0z"/>
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
- </g>
830
- </svg>
831
- <span>6</span>
832
- </span>
833
- &nbsp;
834
- <a target="_blank" href="https://segmentfault.com/u/dragonir" title="Programming Language">
835
- <span>dragonir</span>
836
- </a>
837
- </div>
838
- <div class="details">
839
- 近期工作有涉及到数字大屏的需求，于是利用业余时间，结合 Three.js 和 CSS实现赛博朋克2077风格视觉效果 实现炫酷 3D 数字地球大屏页面。页面使用 React + Three.js + Echarts + stylus 技术栈，本文涉及到的主...
840
- </div>
841
- </div>
842
- </li>
843
-
844
844
  <li>
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/1190000042103541" target="_blank" title="Redis 内存优化神技，小内存保存大数据">Redis 内存优化神技，小内存保存大数据</a>
848
+ <a href="https://segmentfault.com/a/1190000042204295" target="_blank" title="通向架子工的前端开发利器推荐">通向架子工的前端开发利器推荐</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>10</span>
859
+ <span>9</span>
860
860
  </span>
861
861
  &nbsp;
862
- <a target="_blank" href="https://segmentfault.com/u/magebyte" title="Programming Language">
863
- <span>码哥字节</span>
862
+ <a target="_blank" href="https://segmentfault.com/u/xiange" title="Programming Language">
863
+ <span>shanyue</span>
864
864
  </a>
865
865
  </div>
866
866
  <div class="details">
867
- 大家好，我是「码哥」，大家可以叫我靓仔。这次码哥跟大家分享一些优化神技，当你面试或者工作中你遇到如下问题，那就使出今天学到的绝招，一招定乾坤！如何用更少的内存保存更多的数据？我们应该从 Redis 是如何...
867
+ 01：thunderclient: VSCode 中的 postmanVSCode 的一个插件，在 VSCode 中管理请求资源，如同 postman 一样。它支持与 postman 兼容的格式，可导出为 postman Collection。02：Apifox, 团队 API 管理利器Apifox，...
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/1190000042192378" target="_blank" title="我有 7种 实现web实时消息推送的方案，7种！">我有 7种 实现web实时消息推送的方案，7种！</a>
876
+ <a href="https://segmentfault.com/a/1190000042216817" target="_blank" title="使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 🌐">使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 🌐</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>14</span>
887
+ <span>6</span>
888
888
  </span>
889
889
  &nbsp;
890
- <a target="_blank" href="https://segmentfault.com/u/chengxy" title="Programming Language">
891
- <span>程序员小富</span>
890
+ <a target="_blank" href="https://segmentfault.com/u/dragonir" title="Programming Language">
891
+ <span>dragonir</span>
892
892
  </a>
893
893
  </div>
894
894
  <div class="details">
895
- 技术交流，公众号：程序员小富大家好，我是小富～我有一个朋友～做了一个小破站，现在要实现一个站内信web消息推送的功能，对，就是下图这个小红点，一个很常用的功能。不过他还没想好用什么方式做，这里我帮他整...
895
+ 近期工作有涉及到数字大屏的需求，于是利用业余时间，结合 Three.js 和 CSS实现赛博朋克2077风格视觉效果 实现炫酷 3D 数字地球大屏页面。页面使用 React + Three.js + Echarts + stylus 技术栈，本文涉及到的主...
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/1190000042238526" target="_blank" title="你的 Tap bar 不够花里胡哨，试试这个！">你的 Tap bar 不够花里胡哨，试试这个！</a>
904
+ <a href="https://segmentfault.com/a/1190000042103541" target="_blank" title="Redis 内存优化神技，小内存保存大数据">Redis 内存优化神技，小内存保存大数据</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>8</span>
915
+ <span>10</span>
916
916
  </span>
917
917
  &nbsp;
918
- <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
919
- <span>前端小智</span>
918
+ <a target="_blank" href="https://segmentfault.com/u/magebyte" title="Programming Language">
919
+ <span>码哥字节</span>
920
920
  </a>
921
921
  </div>
922
922
  <div class="details">
923
- 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
923
+ 大家好，我是「码哥」，大家可以叫我靓仔。这次码哥跟大家分享一些优化神技，当你面试或者工作中你遇到如下问题，那就使出今天学到的绝招，一招定乾坤！如何用更少的内存保存更多的数据？我们应该从 Redis 是如何...
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/1190000042229850" target="_blank" title="低代码是开发的未来吗？浅谈低代码平台">低代码是开发的未来吗？浅谈低代码平台</a>
932
+ <a href="https://segmentfault.com/a/1190000042192378" target="_blank" title="我有 7种 实现web实时消息推送的方案，7种！">我有 7种 实现web实时消息推送的方案，7种！</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>10</span>
943
+ <span>14</span>
944
944
  </span>
945
945
  &nbsp;
946
- <a target="_blank" href="https://segmentfault.com/u/yunshu_blog" title="Programming Language">
947
- <span>云叔_又拍云</span>
946
+ <a target="_blank" href="https://segmentfault.com/u/chengxy" title="Programming Language">
947
+ <span>程序员小富</span>
948
948
  </a>
949
949
  </div>
950
950
  <div class="details">
951
- 低代码的热潮在几年前就火过，从阿里钉钉跨平台协作方式，再到飞书上的审批流程，以及目前我们接触到的表单审批、投票的模板，这些都是关于低代码的实现方式。随着企业数字化转型和云计算的不断发展，低代码平台...
951
+ 技术交流，公众号：程序员小富大家好，我是小富～我有一个朋友～做了一个小破站，现在要实现一个站内信web消息推送的功能，对，就是下图这个小红点，一个很常用的功能。不过他还没想好用什么方式做，这里我帮他整...
952
952
  </div>
953
953
  </div>
954
954
  </li>
@@ -957,7 +957,7 @@
957
957
  <div class="info">
958
958
  <div class="rank">
959
959
  <span title="Ranking 30">30</span>
960
- <a href="https://segmentfault.com/a/1190000042268783" target="_blank" title="基于 Next.js实现在线Excel">基于 Next.js实现在线Excel</a>
960
+ <a href="https://segmentfault.com/a/1190000042238526" target="_blank" title="你的 Tap bar 不够花里胡哨，试试这个！">你的 Tap bar 不够花里胡哨，试试这个！</a>
961
961
  </div>
962
962
  <div class="sub-title followers">
963
963
 
@@ -968,15 +968,15 @@
968
968
  <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"/>
969
969
  </g>
970
970
  </svg>
971
- <span>4</span>
971
+ <span>8</span>
972
972
  </span>
973
973
  &nbsp;
974
- <a target="_blank" href="https://segmentfault.com/u/grapecity" title="Programming Language">
975
- <span>葡萄城技术团队</span>
974
+ <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
975
+ <span>前端小智</span>
976
976
  </a>
977
977
  </div>
978
978
  <div class="details">
979
- 如果要从头开始使用 React 构建一个完整的 Web 应用程序，需要哪些步骤？这当然不像把大象装进冰箱那么简单，只需要分成三步：打开冰箱，拿起大象，塞进冰箱就好。
979
+ 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
980
980
  </div>
981
981
  </div>
982
982
  </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/8/9 by Github API v3.</div>
1000
+ <div class="time">Last cache created on 2022/8/10 by Github API v3.</div>
1001
1001
  Create by <a href="https://github.com/jaywcjlove" target="_blank">小弟调调™</a>.
1002
1002
  </div>
1003
1003
  </body>