@wcj/github-rank 22.7.6 → 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 (41) hide show
  1. package/README.md +2 -3
  2. package/dist/36kr.json +5006 -1552
  3. package/dist/repos.json +34920 -34923
  4. package/dist/sifou-daily.json +12 -93
  5. package/dist/sifou-monthly.json +104 -104
  6. package/dist/sifou-weekly.json +165 -165
  7. package/dist/toutiao-30.json +97 -97
  8. package/dist/toutiao-7.json +113 -113
  9. package/dist/toutiao-90.json +35 -35
  10. package/dist/trending-daily.json +165 -165
  11. package/dist/trending-monthly.json +159 -159
  12. package/dist/trending-weekly.json +171 -171
  13. package/dist/users.china.json +2667 -2667
  14. package/dist/users.json +4076 -4078
  15. package/package.json +19 -18
  16. package/web/data/36kr.json +5006 -1552
  17. package/web/data/repos.json +34920 -34923
  18. package/web/data/sifou-daily.json +12 -93
  19. package/web/data/sifou-monthly.json +104 -104
  20. package/web/data/sifou-weekly.json +165 -165
  21. package/web/data/toutiao-30.json +97 -97
  22. package/web/data/toutiao-7.json +113 -113
  23. package/web/data/toutiao-90.json +35 -35
  24. package/web/data/trending-daily.json +165 -165
  25. package/web/data/trending-monthly.json +159 -159
  26. package/web/data/trending-weekly.json +171 -171
  27. package/web/data/users.china.json +2667 -2667
  28. package/web/data/users.json +4076 -4078
  29. package/web/index.html +1998 -2001
  30. package/web/repos.html +4274 -4277
  31. package/web/sifou-daily.html +12 -267
  32. package/web/sifou-monthly.html +127 -130
  33. package/web/sifou-weekly.html +140 -143
  34. package/web/toutiao-30.html +78 -81
  35. package/web/toutiao-7.html +79 -82
  36. package/web/toutiao-90.html +56 -59
  37. package/web/trending-monthly.html +140 -139
  38. package/web/trending-weekly.html +146 -153
  39. package/web/trending.html +136 -151
  40. package/web/users.china.html +1394 -1397
  41. package/web/36kr.html +0 -828
package/web/sifou-monthly.html CHANGED
@@ -115,16 +115,14 @@
115
115
  </a>
116
116
 
117
117
 
118
-
119
118
  </h1>
120
- <div class="time">Last cache created on 2022/7/6 by
119
+ <div class="time">Last cache created on 2022/7/9 by
121
120
 
122
121
 
123
122
 
124
123
 
125
124
  <a href="https://segmentfault.com/hottest">SegmentFault</a>
126
125
 
127
-
128
126
  .
129
127
  </div>
130
128
  <div class="tabs">
@@ -133,7 +131,6 @@
133
131
  <a class="" href="trending.html">Trending</a>
134
132
  <a class="active" href="sifou-daily.html">Sifou</a>
135
133
  <a class="" href="toutiao-7.html">开发头条</a>
136
- <a class="" href="36kr.html">36Kr</a>
137
134
  </div>
138
135
  <ul class="list">
139
136
  <li class="rank-title">
@@ -148,7 +145,7 @@
148
145
  <div class="info">
149
146
  <div class="rank">
150
147
  <span title="Ranking 1">1</span>
151
- <a href="https://segmentfault.com/a/1190000041947673" target="_blank" title="文字轮播与图片轮播？CSS 不在话下">文字轮播与图片轮播？CSS 不在话下</a>
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>
152
149
  </div>
153
150
  <div class="sub-title followers">
154
151
 
@@ -159,15 +156,15 @@
159
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"/>
160
157
  </g>
161
158
  </svg>
162
- <span>43</span>
159
+ <span>31</span>
163
160
  </span>
164
161
  &nbsp;
165
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
166
- <span>chokcoco</span>
162
+ <a target="_blank" href="https://segmentfault.com/u/shuirongshui" title="Programming Language">
163
+ <span>水冗水孚</span>
167
164
  </a>
168
165
  </div>
169
166
  <div class="details">
170
- 今天，分享一个实际业务中能够用得上的动画技巧。巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？我们来简单分析分析，从...
167
+ 看了一下网上的帖子，大多数都是搞两部分dom，一块是输入框，用于编辑状态填写；另一块是普通标签，用于在不编辑显示状态下呈现单元格文字内容。再加上一个flag标识搭配v-if和v-else去控制编辑状态、还是显示状态...
171
168
  </div>
172
169
  </div>
173
170
  </li>
@@ -176,7 +173,7 @@
176
173
  <div class="info">
177
174
  <div class="rank">
178
175
  <span title="Ranking 2">2</span>
179
- <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>
176
+ <a href="https://segmentfault.com/a/1190000042006775" target="_blank" title="CSS实现可拉伸调整尺寸的分栏布局">CSS实现可拉伸调整尺寸的分栏布局</a>
180
177
  </div>
181
178
  <div class="sub-title followers">
182
179
 
@@ -187,15 +184,15 @@
187
184
  <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"/>
188
185
  </g>
189
186
  </svg>
190
- <span>29</span>
187
+ <span>30</span>
191
188
  </span>
192
189
  &nbsp;
193
- <a target="_blank" href="https://segmentfault.com/u/shuirongshui" title="Programming Language">
194
- <span>水冗水孚</span>
190
+ <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
191
+ <span>XboxYan</span>
195
192
  </a>
196
193
  </div>
197
194
  <div class="details">
198
- 看了一下网上的帖子，大多数都是搞两部分dom，一块是输入框，用于编辑状态填写；另一块是普通标签，用于在不编辑显示状态下呈现单元格文字内容。再加上一个flag标识搭配v-if和v-else去控制编辑状态、还是显示状态...
195
+ 很多页面布局，特别是那种工具类的、比如编辑器、可视化平台等，为了充分的利用屏幕空间，都会提供拖拽调节各个分栏尺寸的功能，比如像 vscode
199
196
  </div>
200
197
  </div>
201
198
  </li>
@@ -204,7 +201,7 @@
204
201
  <div class="info">
205
202
  <div class="rank">
206
203
  <span title="Ranking 3">3</span>
207
- <a href="https://segmentfault.com/a/1190000041940807" target="_blank" title="CSS 实现头像名称首字符自动占位">CSS 实现头像名称首字符自动占位</a>
204
+ <a href="https://segmentfault.com/a/1190000041962607" target="_blank" title="搭建前端监控，如何采集异常数据？">搭建前端监控，如何采集异常数据？</a>
208
205
  </div>
209
206
  <div class="sub-title followers">
210
207
 
@@ -215,15 +212,15 @@
215
212
  <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"/>
216
213
  </g>
217
214
  </svg>
218
- <span>26</span>
215
+ <span>20</span>
219
216
  </span>
220
217
  &nbsp;
221
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
222
- <span>XboxYan</span>
218
+ <a target="_blank" href="https://segmentfault.com/u/ruidoc" title="Programming Language">
219
+ <span>杨成功</span>
223
220
  </a>
224
221
  </div>
225
222
  <div class="details">
226
- 在 web 中经常会见到这样的设计，很多 UI 组件库也称之为 Avator 组件，也就是头像的意思，当头像未设置时，会显示名称的首字符充当默认头像，如下所示：
223
+ 前两篇，我们介绍了为什么前端应该有监控系统，以及搭建前端监控的总体步骤，前端监控的 Why 和 What 想必你已经明白了。接下来我们解决 How 如何实现的问题。
227
224
  </div>
228
225
  </div>
229
226
  </li>
@@ -232,7 +229,7 @@
232
229
  <div class="info">
233
230
  <div class="rank">
234
231
  <span title="Ranking 4">4</span>
235
- <a href="https://segmentfault.com/a/1190000041962607" target="_blank" title="搭建前端监控，如何采集异常数据？">搭建前端监控，如何采集异常数据？</a>
232
+ <a href="https://segmentfault.com/a/1190000041998615" target="_blank" title="掘地三尺搞定 Redis 与 MySQL 数据一致性问题">掘地三尺搞定 Redis 与 MySQL 数据一致性问题</a>
236
233
  </div>
237
234
  <div class="sub-title followers">
238
235
 
@@ -243,15 +240,15 @@
243
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"/>
244
241
  </g>
245
242
  </svg>
246
- <span>20</span>
243
+ <span>22</span>
247
244
  </span>
248
245
  &nbsp;
249
- <a target="_blank" href="https://segmentfault.com/u/ruidoc" title="Programming Language">
250
- <span>杨成功</span>
246
+ <a target="_blank" href="https://segmentfault.com/u/magebyte" title="Programming Language">
247
+ <span>码哥字节</span>
251
248
  </a>
252
249
  </div>
253
250
  <div class="details">
254
- 前两篇，我们介绍了为什么前端应该有监控系统，以及搭建前端监控的总体步骤，前端监控的 Why 和 What 想必你已经明白了。接下来我们解决 How 如何实现的问题。
251
+ Redis 拥有高性能的数据读写功能，被我们广泛用在缓存场景，一是能提高业务系统的性能，二是为数据库抵挡了高并发的流量请求，点我 -&gt; 解密 Redis 为什么这么快的秘密。把 Redis 作为缓存组件，需要防止出现以...
255
252
  </div>
256
253
  </div>
257
254
  </li>
@@ -260,7 +257,7 @@
260
257
  <div class="info">
261
258
  <div class="rank">
262
259
  <span title="Ranking 5">5</span>
263
- <a href="https://segmentfault.com/a/1190000042006775" target="_blank" title="CSS实现可拉伸调整尺寸的分栏布局">CSS实现可拉伸调整尺寸的分栏布局</a>
260
+ <a href="https://segmentfault.com/a/1190000042065365" target="_blank" title="CSS层级小技巧！如何在滚动时自动添加头部阴影？">CSS层级小技巧！如何在滚动时自动添加头部阴影？</a>
264
261
  </div>
265
262
  <div class="sub-title followers">
266
263
 
@@ -271,7 +268,7 @@
271
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"/>
272
269
  </g>
273
270
  </svg>
274
- <span>27</span>
271
+ <span>19</span>
275
272
  </span>
276
273
  &nbsp;
277
274
  <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
@@ -279,7 +276,7 @@
279
276
  </a>
280
277
  </div>
281
278
  <div class="details">
282
- 很多页面布局，特别是那种工具类的、比如编辑器、可视化平台等，为了充分的利用屏幕空间，都会提供拖拽调节各个分栏尺寸的功能，比如像 vscode
279
+ 在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。比如下面这个例子，注意观察头部阴影
283
280
  </div>
284
281
  </div>
285
282
  </li>
@@ -288,7 +285,7 @@
288
285
  <div class="info">
289
286
  <div class="rank">
290
287
  <span title="Ranking 6">6</span>
291
- <a href="https://segmentfault.com/a/1190000041998615" target="_blank" title="掘地三尺搞定 Redis 与 MySQL 数据一致性问题">掘地三尺搞定 Redis 与 MySQL 数据一致性问题</a>
288
+ <a href="https://segmentfault.com/a/1190000042070334" target="_blank" title="使用纯 CSS 实现超酷炫的粘性气泡效果">使用纯 CSS 实现超酷炫的粘性气泡效果</a>
292
289
  </div>
293
290
  <div class="sub-title followers">
294
291
 
@@ -299,15 +296,15 @@
299
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"/>
300
297
  </g>
301
298
  </svg>
302
- <span>22</span>
299
+ <span>18</span>
303
300
  </span>
304
301
  &nbsp;
305
- <a target="_blank" href="https://segmentfault.com/u/magebyte" title="Programming Language">
306
- <span>码哥字节</span>
302
+ <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
303
+ <span>chokcoco</span>
307
304
  </a>
308
305
  </div>
309
306
  <div class="details">
310
- Redis 拥有高性能的数据读写功能，被我们广泛用在缓存场景，一是能提高业务系统的性能，二是为数据库抵挡了高并发的流量请求，点我 -&gt; 解密 Redis 为什么这么快的秘密。把 Redis 作为缓存组件，需要防止出现以...
307
+ 最近，在 CodePen 上看到这样一个非常有意思的效果：这个效果的核心难点在于气泡的一种特殊融合效果。其源代码在：CodePen Demo -- Goey footer，作者主要使用的是 SVG 滤镜完成的该效果，感兴趣的可以戳源码看看...
311
308
  </div>
312
309
  </div>
313
310
  </li>
@@ -344,7 +341,7 @@
344
341
  <div class="info">
345
342
  <div class="rank">
346
343
  <span title="Ranking 8">8</span>
347
- <a href="https://segmentfault.com/a/1190000041965165" target="_blank" title="JS实现将文本或JSON内容下载到文件中">JS实现将文本或JSON内容下载到文件中</a>
344
+ <a href="https://segmentfault.com/a/1190000041974546" target="_blank" title="让拖拽更加人性化？如何自定义dragover样式">让拖拽更加人性化？如何自定义dragover样式</a>
348
345
  </div>
349
346
  <div class="sub-title followers">
350
347
 
@@ -355,15 +352,15 @@
355
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"/>
356
353
  </g>
357
354
  </svg>
358
- <span>11</span>
355
+ <span>13</span>
359
356
  </span>
360
357
  &nbsp;
361
- <a target="_blank" href="https://segmentfault.com/u/shifang_5b2b70d160932" title="Programming Language">
362
- <span>十方</span>
358
+ <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
359
+ <span>XboxYan</span>
363
360
  </a>
364
361
  </div>
365
362
  <div class="details">
366
- 有时候在前端开发过程中，可能遇到这样的需求场景：需要将页面上的文本内容下载到文件中，内容可能是某个大的文本字段，比如博客文章，也可能是后端接口返回的 JSON 数据。
363
+ 欢迎关注微信公众号： 前端侦探在 web 开发中，经常会碰到需要拖拽的场景。为了更好的体验，拖拽区域需要有一定的变化提示，告诉用户：&#34;现在可以放在这里了~&#34;，例如这样的之前在这篇文章讲述了如何自定义 drag 样...
367
364
  </div>
368
365
  </div>
369
366
  </li>
@@ -372,7 +369,7 @@
372
369
  <div class="info">
373
370
  <div class="rank">
374
371
  <span title="Ranking 9">9</span>
375
- <a href="https://segmentfault.com/a/1190000041974546" target="_blank" title="让拖拽更加人性化？如何自定义dragover样式">让拖拽更加人性化？如何自定义dragover样式</a>
372
+ <a href="https://segmentfault.com/a/1190000042055258" target="_blank" title="switch 有四样写法你知道么">switch 有四样写法你知道么</a>
376
373
  </div>
377
374
  <div class="sub-title followers">
378
375
 
@@ -383,15 +380,15 @@
383
380
  <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"/>
384
381
  </g>
385
382
  </svg>
386
- <span>12</span>
383
+ <span>14</span>
387
384
  </span>
388
385
  &nbsp;
389
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
390
- <span>XboxYan</span>
386
+ <a target="_blank" href="https://segmentfault.com/u/jamesfancy" title="Programming Language">
387
+ <span>边城</span>
391
388
  </a>
392
389
  </div>
393
390
  <div class="details">
394
- 欢迎关注微信公众号： 前端侦探在 web 开发中，经常会碰到需要拖拽的场景。为了更好的体验，拖拽区域需要有一定的变化提示，告诉用户：&#34;现在可以放在这里了~&#34;，例如这样的之前在这篇文章讲述了如何自定义 drag 样...
391
+ 我所知道的 JavaScript 的 switch 语句只有一种写法。但要说到对分支的处理，写法可就多了去了。if 分支写法可以算一种，switch 分支写法可以算第二种，第三种是使用策略模式，如果要把条件运算符也算上的话，嗯...
395
392
  </div>
396
393
  </div>
397
394
  </li>
@@ -400,7 +397,7 @@
400
397
  <div class="info">
401
398
  <div class="rank">
402
399
  <span title="Ranking 10">10</span>
403
- <a href="https://segmentfault.com/a/1190000042055258" target="_blank" title="switch 有四样写法你知道么">switch 有四样写法你知道么</a>
400
+ <a href="https://segmentfault.com/a/1190000041965165" target="_blank" title="JS实现将文本或JSON内容下载到文件中">JS实现将文本或JSON内容下载到文件中</a>
404
401
  </div>
405
402
  <div class="sub-title followers">
406
403
 
@@ -411,15 +408,15 @@
411
408
  <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"/>
412
409
  </g>
413
410
  </svg>
414
- <span>12</span>
411
+ <span>11</span>
415
412
  </span>
416
413
  &nbsp;
417
- <a target="_blank" href="https://segmentfault.com/u/jamesfancy" title="Programming Language">
418
- <span>边城</span>
414
+ <a target="_blank" href="https://segmentfault.com/u/shifang_5b2b70d160932" title="Programming Language">
415
+ <span>十方</span>
419
416
  </a>
420
417
  </div>
421
418
  <div class="details">
422
- 我所知道的 JavaScript 的 switch 语句只有一种写法。但要说到对分支的处理，写法可就多了去了。if 分支写法可以算一种，switch 分支写法可以算第二种，第三种是使用策略模式，如果要把条件运算符也算上的话，嗯...
419
+ 有时候在前端开发过程中，可能遇到这样的需求场景：需要将页面上的文本内容下载到文件中，内容可能是某个大的文本字段，比如博客文章，也可能是后端接口返回的 JSON 数据。
423
420
  </div>
424
421
  </div>
425
422
  </li>
@@ -428,7 +425,7 @@
428
425
  <div class="info">
429
426
  <div class="rank">
430
427
  <span title="Ranking 11">11</span>
431
- <a href="https://segmentfault.com/a/1190000041962217" target="_blank" title="干货合集│最好用的 python 库都在这">干货合集│最好用的 python 库都在这</a>
428
+ <a href="https://segmentfault.com/a/1190000042038058" target="_blank" title="视觉还原小技巧！CSS 实现角标效果">视觉还原小技巧！CSS 实现角标效果</a>
432
429
  </div>
433
430
  <div class="sub-title followers">
434
431
 
@@ -439,15 +436,15 @@
439
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"/>
440
437
  </g>
441
438
  </svg>
442
- <span>11</span>
439
+ <span>16</span>
443
440
  </span>
444
441
  &nbsp;
445
- <a target="_blank" href="https://segmentfault.com/u/autofelix" title="Programming Language">
446
- <span>极客飞兔</span>
442
+ <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
443
+ <span>XboxYan</span>
447
444
  </a>
448
445
  </div>
449
446
  <div class="details">
450
- 🎈 分词 - jieba优秀的中文分词库，依靠中文词库，利用词库确定汉子之间关联的概率，形成分词结果 {代码...} 🎈 词云库 - wordcloud对数据中出现频率较高的 关键词 生成的一幅图像，予以视觉上的突出 {代码...} 🎈 ...
447
+ 欢迎关注微信公众号： 前端侦探最近在项目中碰到一个这样的角标设计，如下像这种可以文字可变化，自适应大小的布局，自然首选 CSS 了~下面看看如何实现的（两分钟读完）一、圆角矩形和三角形从设计上可以拆分成两...
451
448
  </div>
452
449
  </div>
453
450
  </li>
@@ -456,7 +453,7 @@
456
453
  <div class="info">
457
454
  <div class="rank">
458
455
  <span title="Ranking 12">12</span>
459
- <a href="https://segmentfault.com/a/1190000041943100" target="_blank" title="这个队列的思路是真的好，现在它是我简历上的亮点了。">这个队列的思路是真的好，现在它是我简历上的亮点了。</a>
456
+ <a href="https://segmentfault.com/a/1190000041962217" target="_blank" title="干货合集│最好用的 python 库都在这">干货合集│最好用的 python 库都在这</a>
460
457
  </div>
461
458
  <div class="sub-title followers">
462
459
 
@@ -467,15 +464,15 @@
467
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"/>
468
465
  </g>
469
466
  </svg>
470
- <span>12</span>
467
+ <span>11</span>
471
468
  </span>
472
469
  &nbsp;
473
- <a target="_blank" href="https://segmentfault.com/u/whyjishu" title="Programming Language">
474
- <span>why技术</span>
470
+ <a target="_blank" href="https://segmentfault.com/u/autofelix" title="Programming Language">
471
+ <span>极客飞兔</span>
475
472
  </a>
476
473
  </div>
477
474
  <div class="details">
478
- 你好呀，我是歪歪。前几天在一个开源项目的 github 里面看到这样的一个 pr：光是看这个名字，里面有个 MemorySafe，我就有点陷进去了。我先给你看看这个东西：这个肯定很眼熟吧？我是从阿里巴巴开发规范中截的图...
475
+ 🎈 分词 - jieba优秀的中文分词库，依靠中文词库，利用词库确定汉子之间关联的概率，形成分词结果 {代码...} 🎈 词云库 - wordcloud对数据中出现频率较高的 关键词 生成的一幅图像，予以视觉上的突出 {代码...} 🎈 ...
479
476
  </div>
480
477
  </div>
481
478
  </li>
@@ -484,7 +481,7 @@
484
481
  <div class="info">
485
482
  <div class="rank">
486
483
  <span title="Ranking 13">13</span>
487
- <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>
488
485
  </div>
489
486
  <div class="sub-title followers">
490
487
 
@@ -495,15 +492,15 @@
495
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"/>
496
493
  </g>
497
494
  </svg>
498
- <span>15</span>
495
+ <span>13</span>
499
496
  </span>
500
497
  &nbsp;
501
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
502
- <span>XboxYan</span>
498
+ <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
499
+ <span>chokcoco</span>
503
500
  </a>
504
501
  </div>
505
502
  <div class="details">
506
- 欢迎关注微信公众号： 前端侦探最近在项目中碰到一个这样的角标设计，如下像这种可以文字可变化，自适应大小的布局，自然首选 CSS 了~下面看看如何实现的（两分钟读完）一、圆角矩形和三角形从设计上可以拆分成两...
503
+ 今天，来实现这样一个有意思的交互效果：将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。修改鼠标样式首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点...
507
504
  </div>
508
505
  </div>
509
506
  </li>
@@ -596,7 +593,7 @@
596
593
  <div class="info">
597
594
  <div class="rank">
598
595
  <span title="Ranking 17">17</span>
599
- <a href="https://segmentfault.com/a/1190000042012558" target="_blank" title="有意思的鼠标指针交互探究">有意思的鼠标指针交互探究</a>
596
+ <a href="https://segmentfault.com/a/1190000042064246" target="_blank" title="叮~您有一封Vue.js挑战邀请函,请查收">叮~您有一封Vue.js挑战邀请函,请查收</a>
600
597
  </div>
601
598
  <div class="sub-title followers">
602
599
 
@@ -607,15 +604,15 @@
607
604
  <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"/>
608
605
  </g>
609
606
  </svg>
610
- <span>12</span>
607
+ <span>10</span>
611
608
  </span>
612
609
  &nbsp;
613
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
614
- <span>chokcoco</span>
610
+ <a target="_blank" href="https://segmentfault.com/u/xiaoqianduan_58b28cfebff36" title="Programming Language">
611
+ <span>null仔</span>
615
612
  </a>
616
613
  </div>
617
614
  <div class="details">
618
- 今天，来实现这样一个有意思的交互效果：将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。修改鼠标样式首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点...
615
+ 大家好,我是webfansplz.今天要跟大家分享的是vuejs-challenges,一个Vue.js在线挑战平台,它提供了一些题库,开发者可以在线进行挑战.通过这些挑战,我们可以进一步了解和熟悉Vue.js,希望它能对想学习Vue.js的同学有...
619
616
  </div>
620
617
  </div>
621
618
  </li>
@@ -624,7 +621,7 @@
624
621
  <div class="info">
625
622
  <div class="rank">
626
623
  <span title="Ranking 18">18</span>
627
- <a href="https://segmentfault.com/a/1190000042065365" target="_blank" title="CSS层级小技巧！如何在滚动时自动添加头部阴影？">CSS层级小技巧！如何在滚动时自动添加头部阴影？</a>
624
+ <a href="https://segmentfault.com/a/1190000042048392" target="_blank" title="SegmentFault 思否技术周刊 -- 超实用 Vue 合集，请查收">SegmentFault 思否技术周刊 -- 超实用 Vue 合集，请查收</a>
628
625
  </div>
629
626
  <div class="sub-title followers">
630
627
 
@@ -635,15 +632,15 @@
635
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"/>
636
633
  </g>
637
634
  </svg>
638
- <span>14</span>
635
+ <span>8</span>
639
636
  </span>
640
637
  &nbsp;
641
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
642
- <span>XboxYan</span>
638
+ <a target="_blank" href="https://segmentfault.com/u/beverly0" title="Programming Language">
639
+ <span>Beverly</span>
643
640
  </a>
644
641
  </div>
645
642
  <div class="details">
646
- 在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。比如下面这个例子，注意观察头部阴影
643
+ Vue.js 是一个用于创建 web 交互界面的工具。其特点是简洁 HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。数据驱动 自动追踪依赖的模板表达式和计算属性。组件化 用解耦、可复用的组件来构造界面。轻...
647
644
  </div>
648
645
  </div>
649
646
  </li>
@@ -652,7 +649,7 @@
652
649
  <div class="info">
653
650
  <div class="rank">
654
651
  <span title="Ranking 19">19</span>
655
- <a href="https://segmentfault.com/a/1190000042064246" target="_blank" title="叮~您有一封Vue.js挑战邀请函,请查收">叮~您有一封Vue.js挑战邀请函,请查收</a>
652
+ <a href="https://segmentfault.com/a/1190000041990709" target="_blank" title="前端性能监测，Runtime Performance Debug 技巧">前端性能监测，Runtime Performance Debug 技巧</a>
656
653
  </div>
657
654
  <div class="sub-title followers">
658
655
 
@@ -663,15 +660,15 @@
663
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"/>
664
661
  </g>
665
662
  </svg>
666
- <span>10</span>
663
+ <span>11</span>
667
664
  </span>
668
665
  &nbsp;
669
- <a target="_blank" href="https://segmentfault.com/u/xiaoqianduan_58b28cfebff36" title="Programming Language">
670
- <span>null仔</span>
666
+ <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
667
+ <span>前端小智</span>
671
668
  </a>
672
669
  </div>
673
670
  <div class="details">
674
- 大家好,我是webfansplz.今天要跟大家分享的是vuejs-challenges,一个Vue.js在线挑战平台,它提供了一些题库,开发者可以在线进行挑战.通过这些挑战,我们可以进一步了解和熟悉Vue.js,希望它能对想学习Vue.js的同学有...
671
+ 提到 Web 前端的效能优化，有许多的技巧是聚焦在如何减少页面的“载入时间 Loading Time”，例如 Code Splitting 透过减少需要载入的 Bundle Size 来加快载入效能。也有些技巧是针对执行时期 (Runtime) 的优化与调...
675
672
  </div>
676
673
  </div>
677
674
  </li>
@@ -680,7 +677,7 @@
680
677
  <div class="info">
681
678
  <div class="rank">
682
679
  <span title="Ranking 20">20</span>
683
- <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>
684
681
  </div>
685
682
  <div class="sub-title followers">
686
683
 
@@ -691,15 +688,15 @@
691
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"/>
692
689
  </g>
693
690
  </svg>
694
- <span>11</span>
691
+ <span>7</span>
695
692
  </span>
696
693
  &nbsp;
697
- <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
698
- <span>前端小智</span>
694
+ <a target="_blank" href="https://segmentfault.com/u/segmentfault" title="Programming Language">
695
+ <span>SegmentFault思否</span>
699
696
  </a>
700
697
  </div>
701
698
  <div class="details">
702
- 提到 Web 前端的效能优化，有许多的技巧是聚焦在如何减少页面的“载入时间 Loading Time”，例如 Code Splitting 透过减少需要载入的 Bundle Size 来加快载入效能。也有些技巧是针对执行时期 (Runtime) 的优化与调...
699
+ 【寄语有奖】的中奖小伙伴们，我们会在7月1日以后奖礼品陆续发出PS：疫情地区若无法接收快递，发货时间会适当延后~哈喽各位社区的小伙伴！SegmentFault 思否社区 10 周年社区活动开奖啦，快来领奖~以下揭晓的是参...
703
700
  </div>
704
701
  </div>
705
702
  </li>
@@ -708,7 +705,7 @@
708
705
  <div class="info">
709
706
  <div class="rank">
710
707
  <span title="Ranking 21">21</span>
711
- <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>
712
709
  </div>
713
710
  <div class="sub-title followers">
714
711
 
@@ -719,15 +716,15 @@
719
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"/>
720
717
  </g>
721
718
  </svg>
722
- <span>7</span>
719
+ <span>12</span>
723
720
  </span>
724
721
  &nbsp;
725
- <a target="_blank" href="https://segmentfault.com/u/segmentfault" title="Programming Language">
726
- <span>SegmentFault思否</span>
722
+ <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
723
+ <span>chokcoco</span>
727
724
  </a>
728
725
  </div>
729
726
  <div class="details">
730
- 【寄语有奖】的中奖小伙伴们，我们会在7月1日以后奖礼品陆续发出PS：疫情地区若无法接收快递，发货时间会适当延后~哈喽各位社区的小伙伴！SegmentFault 思否社区 10 周年社区活动开奖啦，快来领奖~以下揭晓的是参...
727
+ content-visibility：属性控制一个元素是否渲染其内容，它允许用户代理（浏览器）潜在地省略大量布局和渲染工作，直到需要它为止。
731
728
  </div>
732
729
  </div>
733
730
  </li>
@@ -736,7 +733,7 @@
736
733
  <div class="info">
737
734
  <div class="rank">
738
735
  <span title="Ranking 22">22</span>
739
- <a href="https://segmentfault.com/a/1190000041941297" target="_blank" title="JavaScript精度丢失原因以及解决方案">JavaScript精度丢失原因以及解决方案</a>
736
+ <a href="https://segmentfault.com/a/1190000041953821" target="_blank" title="云计算的未来在哪？破解亚马逊云科技增长神话">云计算的未来在哪？破解亚马逊云科技增长神话</a>
740
737
  </div>
741
738
  <div class="sub-title followers">
742
739
 
@@ -747,15 +744,15 @@
747
744
  <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"/>
748
745
  </g>
749
746
  </svg>
750
- <span>11</span>
747
+ <span>9</span>
751
748
  </span>
752
749
  &nbsp;
753
- <a target="_blank" href="https://segmentfault.com/u/007008" title="Programming Language">
754
- <span>沉静地闪光</span>
750
+ <a target="_blank" href="https://segmentfault.com/u/suicidal_romantic_scoundrel" title="Programming Language">
751
+ <span>六一</span>
755
752
  </a>
756
753
  </div>
757
754
  <div class="details">
758
- 由于计算机的底层是由二进制实现的，有些运算的数字无法全部显示出来。就像一些无理数不能完全显示出来一样，如圆周率 3.1415926...，0.3333... 等。JavaScript遵循IEEE754规范，采用双精度存储（double precisio...
755
+ 之前看亚马逊云科技创新大会直播，尤其是顾凡的主题演讲“重构云底座，加速向未来”，相比 re:Invent 的隆重的会场和丰盛的议题，这次更能总览亚马逊云科技全局产品和方案，我恰好在思考中美云计算的发展，本文有感...
759
756
  </div>
760
757
  </div>
761
758
  </li>
@@ -764,7 +761,7 @@
764
761
  <div class="info">
765
762
  <div class="rank">
766
763
  <span title="Ranking 23">23</span>
767
- <a href="https://segmentfault.com/a/1190000042048392" target="_blank" title="SegmentFault 思否技术周刊 -- 超实用 Vue 合集，请查收">SegmentFault 思否技术周刊 -- 超实用 Vue 合集，请查收</a>
764
+ <a href="https://segmentfault.com/a/1190000041953534" target="_blank" title="SegmentFault 思否技术周刊 -- Node.js 进阶之旅，看看哪些还需要学？">SegmentFault 思否技术周刊 -- Node.js 进阶之旅，看看哪些还需要学？</a>
768
765
  </div>
769
766
  <div class="sub-title followers">
770
767
 
@@ -775,7 +772,7 @@
775
772
  <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"/>
776
773
  </g>
777
774
  </svg>
778
- <span>7</span>
775
+ <span>6</span>
779
776
  </span>
780
777
  &nbsp;
781
778
  <a target="_blank" href="https://segmentfault.com/u/beverly0" title="Programming Language">
@@ -783,7 +780,7 @@
783
780
  </a>
784
781
  </div>
785
782
  <div class="details">
786
- Vue.js 是一个用于创建 web 交互界面的工具。其特点是简洁 HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。数据驱动 自动追踪依赖的模板表达式和计算属性。组件化 用解耦、可复用的组件来构造界面。轻...
783
+ 简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Jav...
787
784
  </div>
788
785
  </div>
789
786
  </li>
@@ -792,7 +789,7 @@
792
789
  <div class="info">
793
790
  <div class="rank">
794
791
  <span title="Ranking 24">24</span>
795
- <a href="https://segmentfault.com/a/1190000041953821" target="_blank" title="云计算的未来在哪？破解亚马逊云科技增长神话">云计算的未来在哪？破解亚马逊云科技增长神话</a>
792
+ <a href="https://segmentfault.com/a/1190000042003368" target="_blank" title="Sass应用之实现主题切换">Sass应用之实现主题切换</a>
796
793
  </div>
797
794
  <div class="sub-title followers">
798
795
 
@@ -803,15 +800,15 @@
803
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"/>
804
801
  </g>
805
802
  </svg>
806
- <span>9</span>
803
+ <span>7</span>
807
804
  </span>
808
805
  &nbsp;
809
- <a target="_blank" href="https://segmentfault.com/u/suicidal_romantic_scoundrel" title="Programming Language">
810
- <span>六一</span>
806
+ <a target="_blank" href="https://segmentfault.com/u/zhouqichao" title="Programming Language">
807
+ <span>玛尔斯通</span>
811
808
  </a>
812
809
  </div>
813
810
  <div class="details">
814
- 之前看亚马逊云科技创新大会直播，尤其是顾凡的主题演讲“重构云底座，加速向未来”，相比 re:Invent 的隆重的会场和丰盛的议题，这次更能总览亚马逊云科技全局产品和方案，我恰好在思考中美云计算的发展，本文有感...
811
+ 实现主题切换有几种不同的方案，比如使用CSS变量，使用JavaScript动态加载对应的主题样式文件等。本文主要讲的是如何使用Sass实现主题切换。
815
812
  </div>
816
813
  </div>
817
814
  </li>
@@ -820,7 +817,7 @@
820
817
  <div class="info">
821
818
  <div class="rank">
822
819
  <span title="Ranking 25">25</span>
823
- <a href="https://segmentfault.com/a/1190000041953534" target="_blank" title="SegmentFault 思否技术周刊 -- Node.js 进阶之旅，看看哪些还需要学？">SegmentFault 思否技术周刊 -- Node.js 进阶之旅，看看哪些还需要学？</a>
820
+ <a href="https://segmentfault.com/a/1190000042001788" target="_blank" title="玩转 AbortController 控制器">玩转 AbortController 控制器</a>
824
821
  </div>
825
822
  <div class="sub-title followers">
826
823
 
@@ -834,12 +831,12 @@
834
831
  <span>6</span>
835
832
  </span>
836
833
  &nbsp;
837
- <a target="_blank" href="https://segmentfault.com/u/beverly0" title="Programming Language">
838
- <span>Beverly</span>
834
+ <a target="_blank" href="https://segmentfault.com/u/jump_and_jump" title="Programming Language">
835
+ <span>jump__jump</span>
839
836
  </a>
840
837
  </div>
841
838
  <div class="details">
842
- 简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Jav...
839
+ 绝大部分情况，网络请求都是先请求先响应。但是某些情况下，由于未知的一些问题，可能会导致先请求的 api 后返回。最简单的解决方案就是添加 loading 状态，在所有请求都完成后才能进行下一次请求。
843
840
  </div>
844
841
  </div>
845
842
  </li>
@@ -848,7 +845,7 @@
848
845
  <div class="info">
849
846
  <div class="rank">
850
847
  <span title="Ranking 26">26</span>
851
- <a href="https://segmentfault.com/a/1190000042001788" target="_blank" title="玩转 AbortController 控制器">玩转 AbortController 控制器</a>
848
+ <a href="https://segmentfault.com/a/1190000041959594" target="_blank" title="构建基于React18的电子表格程序">构建基于React18的电子表格程序</a>
852
849
  </div>
853
850
  <div class="sub-title followers">
854
851
 
@@ -859,15 +856,15 @@
859
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"/>
860
857
  </g>
861
858
  </svg>
862
- <span>6</span>
859
+ <span>5</span>
863
860
  </span>
864
861
  &nbsp;
865
- <a target="_blank" href="https://segmentfault.com/u/jump_and_jump" title="Programming Language">
866
- <span>jump__jump</span>
862
+ <a target="_blank" href="https://segmentfault.com/u/grapecity" title="Programming Language">
863
+ <span>葡萄城技术团队</span>
867
864
  </a>
868
865
  </div>
869
866
  <div class="details">
870
- 绝大部分情况，网络请求都是先请求先响应。但是某些情况下，由于未知的一些问题，可能会导致先请求的 api 后返回。最简单的解决方案就是添加 loading 状态，在所有请求都完成后才能进行下一次请求。
867
+ 2022年3月29日，React正式发布18.0.0。本次升级内容包括开箱即用的改进，如自动批处理、新的API（如startTransition）和支持Suspense 的流式服务器端渲染。关于此次发布新增的功能可以参考官方文档。
871
868
  </div>
872
869
  </div>
873
870
  </li>
@@ -876,7 +873,7 @@
876
873
  <div class="info">
877
874
  <div class="rank">
878
875
  <span title="Ranking 27">27</span>
879
- <a href="https://segmentfault.com/a/1190000041941889" target="_blank" title="精读《type challenges - easy》">精读《type challenges - easy》</a>
876
+ <a href="https://segmentfault.com/a/1190000042069856" target="_blank" title="使用CSS background实现炫酷悬停效果">使用CSS background实现炫酷悬停效果</a>
880
877
  </div>
881
878
  <div class="sub-title followers">
882
879
 
@@ -887,15 +884,15 @@
887
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"/>
888
885
  </g>
889
886
  </svg>
890
- <span>5</span>
887
+ <span>9</span>
891
888
  </span>
892
889
  &nbsp;
893
- <a target="_blank" href="https://segmentfault.com/u/aoyangyudakong" title="Programming Language">
894
- <span>黄子毅</span>
890
+ <a target="_blank" href="https://segmentfault.com/u/nanchengfe" title="Programming Language">
891
+ <span>南城大前端</span>
895
892
  </a>
896
893
  </div>
897
894
  <div class="details">
898
- TS 强类型非常好用，但在实际运用中，免不了遇到一些难以描述，反复看官方文档也解决不了的问题，至今为止也没有任何一篇文档，或者一套教材可以解决所有犄角旮旯的类型问题。为什么会这样呢？因为 TS 并不是简单...
895
+ 日常开发过程中，会遇到不少按钮鼠标悬停的效果，实现这类悬停效果的方式有很多，借助伪元素，CSS3变换及过渡等都可以实现。今天的文章将使用背景色实现类似的效果，当我们遇到一个问题时，你的脑海中的方案不止...
899
896
  </div>
900
897
  </div>
901
898
  </li>
@@ -904,7 +901,7 @@
904
901
  <div class="info">
905
902
  <div class="rank">
906
903
  <span title="Ranking 28">28</span>
907
- <a href="https://segmentfault.com/a/1190000041959594" target="_blank" title="构建基于React18的电子表格程序">构建基于React18的电子表格程序</a>
904
+ <a href="https://segmentfault.com/a/1190000041974765" target="_blank" title="为什么Hook没有ErrorBoundary？">为什么Hook没有ErrorBoundary？</a>
908
905
  </div>
909
906
  <div class="sub-title followers">
910
907
 
@@ -915,15 +912,15 @@
915
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"/>
916
913
  </g>
917
914
  </svg>
918
- <span>5</span>
915
+ <span>4</span>
919
916
  </span>
920
917
  &nbsp;
921
- <a target="_blank" href="https://segmentfault.com/u/grapecity" title="Programming Language">
922
- <span>葡萄城技术团队</span>
918
+ <a target="_blank" href="https://segmentfault.com/u/kasong" title="Programming Language">
919
+ <span>卡颂</span>
923
920
  </a>
924
921
  </div>
925
922
  <div class="details">
926
- 2022年3月29日，React正式发布18.0.0。本次升级内容包括开箱即用的改进，如自动批处理、新的API（如startTransition）和支持Suspense 的流式服务器端渲染。关于此次发布新增的功能可以参考官方文档。
923
+ 在很多全面使用Hooks开发的团队，唯一使用ClassComponent的场景就是使用ClassComponent创建ErrorBoundary。
927
924
  </div>
928
925
  </div>
929
926
  </li>
@@ -932,7 +929,7 @@
932
929
  <div class="info">
933
930
  <div class="rank">
934
931
  <span title="Ranking 29">29</span>
935
- <a href="https://segmentfault.com/a/1190000041974765" target="_blank" title="为什么Hook没有ErrorBoundary？">为什么Hook没有ErrorBoundary？</a>
932
+ <a href="https://segmentfault.com/a/1190000042048198" target="_blank" title="又拍云 Redis 的改进之路">又拍云 Redis 的改进之路</a>
936
933
  </div>
937
934
  <div class="sub-title followers">
938
935
 
@@ -943,15 +940,15 @@
943
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"/>
944
941
  </g>
945
942
  </svg>
946
- <span>4</span>
943
+ <span>7</span>
947
944
  </span>
948
945
  &nbsp;
949
- <a target="_blank" href="https://segmentfault.com/u/kasong" title="Programming Language">
950
- <span>卡颂</span>
946
+ <a target="_blank" href="https://segmentfault.com/u/yunshu_blog" title="Programming Language">
947
+ <span>云叔_又拍云</span>
951
948
  </a>
952
949
  </div>
953
950
  <div class="details">
954
- 在很多全面使用Hooks开发的团队，唯一使用ClassComponent的场景就是使用ClassComponent创建ErrorBoundary。
951
+ 作为推出国内首创可编程 CDN 服务的专业云服务提供商，又拍云利用 CDN 边缘网络规模和性能，允许客户自定义编写规则来满足常用业务场景。而为了保证这些源数据，如边缘重定向、请求限速、自定义错误页面、访问防...
955
952
  </div>
956
953
  </div>
957
954
  </li>
@@ -960,7 +957,7 @@
960
957
  <div class="info">
961
958
  <div class="rank">
962
959
  <span title="Ranking 30">30</span>
963
- <a href="https://segmentfault.com/a/1190000042048198" target="_blank" title="又拍云 Redis 的改进之路">又拍云 Redis 的改进之路</a>
960
+ <a href="https://segmentfault.com/a/1190000042036660" target="_blank" title="esbuild 构建油猴脚本">esbuild 构建油猴脚本</a>
964
961
  </div>
965
962
  <div class="sub-title followers">
966
963
 
@@ -971,15 +968,15 @@
971
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"/>
972
969
  </g>
973
970
  </svg>
974
- <span>7</span>
971
+ <span>6</span>
975
972
  </span>
976
973
  &nbsp;
977
- <a target="_blank" href="https://segmentfault.com/u/yunshu_blog" title="Programming Language">
978
- <span>云叔_又拍云</span>
974
+ <a target="_blank" href="https://segmentfault.com/u/jamesfancy" title="Programming Language">
975
+ <span>边城</span>
979
976
  </a>
980
977
  </div>
981
978
  <div class="details">
982
- 作为推出国内首创可编程 CDN 服务的专业云服务提供商，又拍云利用 CDN 边缘网络规模和性能，允许客户自定义编写规则来满足常用业务场景。而为了保证这些源数据，如边缘重定向、请求限速、自定义错误页面、访问防...
979
+ 前段时间思否十周年，搞了个问答打卡活动。参与打卡活动的人需要在回答问题的结尾加一个“小尾巴”。加小尾巴本身并不难，但是由于官方没有提供快捷方式，每次都需要自己从某个地方拷贝过去，稍嫌繁琐。正好前不久...
983
980
  </div>
984
981
  </div>
985
982
  </li>
@@ -1000,7 +997,7 @@
1000
997
  <img src="https://img.shields.io/npm/v/@wcj/github-rank.svg?label=unpkg">
1001
998
  </a>
1002
999
  </div>
1003
- <div class="time">Last cache created on 2022/7/6 by Github API v3.</div>
1000
+ <div class="time">Last cache created on 2022/7/9 by Github API v3.</div>
1004
1001
  Create by <a href="https://github.com/jaywcjlove" target="_blank">小弟调调™</a>.
1005
1002
  </div>
1006
1003
  </body>