@wcj/github-rank 21.10.31 → 21.11.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/repos.json +34302 -34297
  2. package/dist/sifou-daily.json +33 -42
  3. package/dist/sifou-monthly.json +93 -93
  4. package/dist/sifou-weekly.json +158 -167
  5. package/dist/toutiao-30.json +93 -93
  6. package/dist/toutiao-7.json +147 -147
  7. package/dist/toutiao-90.json +68 -68
  8. package/dist/trending-daily.json +193 -193
  9. package/dist/trending-monthly.json +182 -182
  10. package/dist/trending-weekly.json +192 -192
  11. package/dist/users.china.json +3183 -3183
  12. package/dist/users.json +3841 -3841
  13. package/package.json +1 -1
  14. package/web/36kr.html +714 -696
  15. package/web/data/repos.json +34302 -34297
  16. package/web/data/sifou-daily.json +33 -42
  17. package/web/data/sifou-monthly.json +93 -93
  18. package/web/data/sifou-weekly.json +158 -167
  19. package/web/data/toutiao-30.json +93 -93
  20. package/web/data/toutiao-7.json +147 -147
  21. package/web/data/toutiao-90.json +68 -68
  22. package/web/data/trending-daily.json +193 -193
  23. package/web/data/trending-monthly.json +182 -182
  24. package/web/data/trending-weekly.json +192 -192
  25. package/web/data/users.china.json +3183 -3183
  26. package/web/data/users.json +3841 -3841
  27. package/web/index.html +15551 -15533
  28. package/web/repos.html +29575 -29557
  29. package/web/sifou-daily.html +212 -220
  30. package/web/sifou-monthly.html +891 -871
  31. package/web/sifou-weekly.html +835 -843
  32. package/web/toutiao-30.html +702 -682
  33. package/web/toutiao-7.html +571 -551
  34. package/web/toutiao-90.html +702 -682
  35. package/web/trending-monthly.html +1002 -974
  36. package/web/trending-weekly.html +998 -978
  37. package/web/trending.html +986 -962
  38. package/web/users.china.html +15551 -15533
package/web/sifou-weekly.html CHANGED
@@ -12,31 +12,36 @@
12
12
  html, body, ul, li, h1 { margin: 0; padding: 0 }
13
13
  html, body { font-size: 16px; font-family: -apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif; }
14
14
  ul { list-style: none; }
15
- body { text-align: center; }
15
+
16
16
  a { color: #333; text-decoration: none; transition: all .2s ease-in; }
17
17
  a:hover { color: #1600ff; }
18
18
  a.github-corner:hover .octo-arm { animation: octocat-wave 560ms infinite linear; }
19
19
  a.github-corner svg { fill: #f1f1f1; color: #000; position: absolute; top: 0; border: 0; right: 0; z-index: 99; width: 70px; height: 70px; }
20
20
  a.github-corner { position: fixed; z-index: 9999; top: 0; right: 0; }
21
- .title { padding: 46px 0 0 0; font-size: 18px; line-height: 24px; }
22
- .time, .footer { padding: 5px 0 2px 0; font-size: 12px; color: #adadad; }
23
- .tabs { padding: 10px 0 15px 0;}
24
- .tabs a { background: #e2e2e2; display: inline-block; padding: 3px 7px; font-size: 12px; line-height: 16px; color: #0366d6; }
25
- .tabs a.active { background: #696969; color: #efefef; }
26
- .footer { padding: 10px 0 30px 0; }
27
- .list { text-align: left; max-width: 470px; margin: 0 auto; padding-bottom: 10px; background-color: #efefef; border-radius: 5px; overflow: hidden; }
21
+
22
+ .title { padding: 32px 20px 10px 20px; font-size: 32px; display: flex; }
23
+ .title a svg { display: block; }
24
+ .title a { color: #0059ff; display: inline-block; margin-left: 10px; }
25
+ .time, .footer { padding: 5px 20px 2px 20px; font-size: 12px; color: #adadad; }
26
+ .tabs { padding: 0 20px 5px 20px;}
27
+ .tabs a { background: #e2e2e2; display: inline-block; border-radius: 2px; margin: 2px 0; padding: 2px 5px; font-size: 12px; line-height: 16px; color: #0366d6; }
28
+ .tabs a.active { background: #333; color: #efefef; }
29
+ .tabs a:hover:not(.active) { background: #efefef; }
30
+ .footer { padding: 0 20px 30px 20px; font-size: 12px; color: #adadad; }
31
+ .footer .time { padding: 0; }
32
+ .list { text-align: left; padding-bottom: 10px; margin: 0 15px; }
28
33
  .list img { width: 36px; height: 36px; border-radius: 3px; display: block; margin: 0 auto; background-color: #e2e2e2; border: 0; overflow: hidden; }
29
34
  .list a { color: #0366d6; }
30
35
  .list a:hover { color: #1600ff; }
31
- .list li { padding: 5px; margin: 0 8px; transition: all .3s; border-bottom: 1px solid #d8d8d8; }
32
- .list li.rank-title { background-color: #e2e2e2; margin: 0; padding: 7px 13px; margin-bottom: 10px; border-radius: 0; font-size: 14px; line-height: 16px; }
33
- .list li.rank-title:hover { background: #e2e2e2; }
36
+ .list li { padding: 10px; transition: all .3s; }
37
+ .list li.rank-title { margin: 0; padding: 3px 0 0 7px; margin-bottom: 10px; border-radius: 5px; font-size: 12px; line-height: 16px; }
38
+ .list li.rank-title > a { margin-right: 10px; }
39
+ .list li.rank-title:hover { background: transparent; }
34
40
  .list li:last-child, .list li.rank-title { border-bottom: 0; }
35
- .list li:hover { background: rgba(255, 255, 255, 0.56); }
41
+ .list li:hover { background: #efefef8f; }
36
42
  .list li > div { display: table-cell; vertical-align: top; font-size: 14px; }
37
- .list li div.rank { padding: 0 8px; }
38
43
  .list li div.rank span { font-weight: bold; }
39
- .list li div.details { padding: 2px 0 0 9px; font-size: 12px; float: left; color: #b9b9b9; }
44
+ .list li div.details { padding: 2px 0 0 0; font-size: 12px; float: left; color: #b9b9b9; }
40
45
  .list li div.details a { color: #b9b9b9; transition: all .3s; }
41
46
  .list li div.details a:hover { color: #1600ff; }
42
47
  .list li div.details a:hover svg { fill: #1600ff; }
@@ -46,11 +51,12 @@
46
51
  .list li > div.info { width: 100%; }
47
52
  .list li > div.info i { color: #717171; }
48
53
  .list li > div.info a:hover i { color: #333; }
49
- .list li div.sub-title { color: #333; margin: 4px 0 0 3px;}
54
+ .list li div.sub-title { color: #333; margin: 4px 0 0 0; }
55
+ .list li div.avatar { padding-right: 10px; }
50
56
 
51
57
 
52
- .list .select { float: right; line-height: 14px; line-height: 16px; }
53
- .list .select .active { color: #333; font-weight: bold; }
58
+ .list .select { }
59
+ .list .select .active { color: #333; font-weight: bold; border-bottom: 1px dotted #000;}
54
60
 
55
61
 
56
62
 
@@ -60,6 +66,9 @@
60
66
  20%,60%{-webkit-transform:rotate(-25deg); transform:rotate(-25deg);}
61
67
  40%,80%{-webkit-transform:rotate(10deg); transform:rotate(10deg);}
62
68
  }
69
+ @media screen and (max-width: 479px) {
70
+ .title { padding-top: 16px; font-size: 21px; }
71
+ }
63
72
  </style>
64
73
  <style>
65
74
  </style>
@@ -72,8 +81,20 @@
72
81
  <path fill="currentColor" class="octo-body" d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"></path>
73
82
  </svg>
74
83
  </a>
75
- <h1 class="title"> Segmentfault 思否热门 </h1>
76
- <div class="time">Last cache created on 2021/10/31 by Github API v3.</div>
84
+ <h1 class="title">
85
+ Segmentfault 思否热门
86
+
87
+
88
+
89
+
90
+ <a target="_blank" href="https://segmentfault.com/hottest">
91
+ <svg xmlns="http://www.w3.org/2000/svg" width="16" viewBox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" fill="currentColor" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>
92
+ </a>
93
+
94
+
95
+
96
+ </h1>
97
+ <div class="time">Last cache created on 2021/11/4 by Github API v3.</div>
77
98
  <div class="tabs">
78
99
  <a class="" href="index.html">Users</a>
79
100
  <a class="" href="repos.html">Repos</a>
@@ -83,830 +104,801 @@
83
104
  <a class="" href="36kr.html">36Kr</a>
84
105
  </div>
85
106
  <ul class="list">
86
- <li class="rank-title">
87
- <a href="https://segmentfault.com/hottest" target="_blank">Segmentfault 思否热门</a>
88
- <span class="select">
89
- <a class="" href="sifou-daily.html">日热门</a>
90
- <a class="active" href="sifou-weekly.html">周热门</a>
91
- <a class="" href="sifou-monthly.html">月热门</a>
92
- </span>
93
- </li>
94
-
95
- <li>
96
- <div class="info">
97
- <div class="rank">
98
- <span title="Ranking 1">1</span>
99
- <a href="https://segmentfault.com/a/1190000040875211" target="_blank" title="大道至简，繁在人心：在浏览器控制台安装npm包是什么操作？">大道至简，繁在人心：在浏览器控制台安装npm包是什么操作？</a>
100
- </div>
101
- <div class="sub-title followers">
102
-
103
- <span title="Stargazers Count">
104
- <svg width="12" height="12" viewBox="0 0 16 16">
105
- <g fill="none" fill-rule="evenodd">
106
- <path d="M0 0h16v16H0z"/>
107
- <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"/>
108
- </g>
109
- </svg>
110
- <span>19</span>
111
- </span>
112
- &nbsp;
113
- <a target="_blank" href="https://segmentfault.com/u/king_hcj" title="Programming Language">
114
- <span>独钓寒江雪</span>
115
- </a>
116
- </div>
117
- <div class="details">
118
- 我们都知道，npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。虽然作为命令行工具的 npm 近年来逐渐式微，但是作为广泛使用的存...
119
- </div>
120
- </div>
121
- </li>
122
-
123
- <li>
124
- <div class="info">
125
- <div class="rank">
126
- <span title="Ranking 2">2</span>
127
- <a href="https://segmentfault.com/a/1190000040863000" target="_blank" title="前端应该知道的：开放图谱协议（The Open Graph protocol）">前端应该知道的：开放图谱协议（The Open Graph protocol）</a>
128
- </div>
129
- <div class="sub-title followers">
130
-
131
- <span title="Stargazers Count">
132
- <svg width="12" height="12" viewBox="0 0 16 16">
133
- <g fill="none" fill-rule="evenodd">
134
- <path d="M0 0h16v16H0z"/>
135
- <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"/>
136
- </g>
137
- </svg>
138
- <span>20</span>
139
- </span>
140
- &nbsp;
141
- <a target="_blank" href="https://segmentfault.com/u/king_hcj" title="Programming Language">
142
- <span>独钓寒江雪</span>
143
- </a>
144
- </div>
145
- <div class="details">
146
- Open Graph 是一种互联网协议，最初由 Facebook 创建，用于标准化网页中元数据的使用，使得社交媒体得以以丰富的“图形”对象来表示共享的页面内容。
147
- </div>
148
- </div>
149
- </li>
150
-
151
- <li>
152
- <div class="info">
153
- <div class="rank">
154
- <span title="Ranking 3">3</span>
155
- <a href="https://segmentfault.com/a/1190000040859105" target="_blank" title="CSS 实现文本&#34;不定行数&#34;截断">CSS 实现文本&#34;不定行数&#34;截断</a>
156
- </div>
157
- <div class="sub-title followers">
158
-
159
- <span title="Stargazers Count">
160
- <svg width="12" height="12" viewBox="0 0 16 16">
161
- <g fill="none" fill-rule="evenodd">
162
- <path d="M0 0h16v16H0z"/>
163
- <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"/>
164
- </g>
165
- </svg>
166
- <span>16</span>
167
- </span>
168
- &nbsp;
169
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
170
- <span>XboxYan</span>
171
- </a>
172
- </div>
173
- <div class="details">
174
- 偶然发现，在某乎热榜页有一个很有意思的布局，这里的标题会制约内容的行数，所以文本超出是&#34;不定行&#34;的。详细规则如下：整个容器高度是固定的，标题和内容总共 3 行标题最多2行，超出省略内容由剩余空间决定，如...
175
- </div>
176
- </div>
177
- </li>
178
-
179
- <li>
180
- <div class="info">
181
- <div class="rank">
182
- <span title="Ranking 4">4</span>
183
- <a href="https://segmentfault.com/a/1190000040863402" target="_blank" title="关于 v-model 你需要知道的这一切！">关于 v-model 你需要知道的这一切！</a>
184
- </div>
185
- <div class="sub-title followers">
186
-
187
- <span title="Stargazers Count">
188
- <svg width="12" height="12" viewBox="0 0 16 16">
189
- <g fill="none" fill-rule="evenodd">
190
- <path d="M0 0h16v16H0z"/>
191
- <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"/>
192
- </g>
193
- </svg>
194
- <span>14</span>
195
- </span>
196
- &nbsp;
197
- <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
198
- <span>前端小智</span>
199
- </a>
200
- </div>
201
- <div class="details">
202
- 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
203
- </div>
204
- </div>
205
- </li>
206
-
207
- <li>
208
- <div class="info">
209
- <div class="rank">
210
- <span title="Ranking 5">5</span>
211
- <a href="https://segmentfault.com/a/1190000040865299" target="_blank" title="Vue 团队公开快如闪电的全新脚手架工具 create-vue，未来将替代 Vue-CLI，才300余行代码，学它！">Vue 团队公开快如闪电的全新脚手架工具 create-vue，未来将替代 Vue-CLI，才300余行代码，学它！</a>
212
- </div>
213
- <div class="sub-title followers">
214
-
215
- <span title="Stargazers Count">
216
- <svg width="12" height="12" viewBox="0 0 16 16">
217
- <g fill="none" fill-rule="evenodd">
218
- <path d="M0 0h16v16H0z"/>
219
- <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"/>
220
- </g>
221
- </svg>
222
- <span>14</span>
223
- </span>
224
- &nbsp;
225
- <a target="_blank" href="https://segmentfault.com/u/lxchuan12" title="Programming Language">
226
- <span>若川</span>
227
- </a>
228
- </div>
229
- <div class="details">
230
- 想学源码，极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this等十余篇源码文章。
231
- </div>
232
- </div>
233
- </li>
234
-
235
- <li>
236
- <div class="info">
237
- <div class="rank">
238
- <span title="Ranking 6">6</span>
239
- <a href="https://segmentfault.com/a/1190000040881913" target="_blank" title="未来已来，HMS Core 展现元宇宙落地价值">未来已来，HMS Core 展现元宇宙落地价值</a>
240
- </div>
241
- <div class="sub-title followers">
242
-
243
- <span title="Stargazers Count">
244
- <svg width="12" height="12" viewBox="0 0 16 16">
245
- <g fill="none" fill-rule="evenodd">
246
- <path d="M0 0h16v16H0z"/>
247
- <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"/>
248
- </g>
249
- </svg>
250
- <span>9</span>
251
- </span>
252
- &nbsp;
253
- <a target="_blank" href="https://segmentfault.com/u/suicidal_romantic_scoundrel" title="Programming Language">
254
- <span>六一</span>
255
- </a>
256
- </div>
257
- <div class="details">
258
- 当你坐在家中，你是否曾经这样幻想，远处的会议有数字分身替你参与；远方的美景可以通过AR直接投影在你面前；人与人之间的距离因种种成像技术和全新交互模式而改变……
259
- </div>
260
- </div>
261
- </li>
262
-
263
- <li>
264
- <div class="info">
265
- <div class="rank">
266
- <span title="Ranking 7">7</span>
267
- <a href="https://segmentfault.com/a/1190000040855949" target="_blank" title="【一文秒懂】电商系统商品模块初建分析与设计">【一文秒懂】电商系统商品模块初建分析与设计</a>
268
- </div>
269
- <div class="sub-title followers">
270
-
271
- <span title="Stargazers Count">
272
- <svg width="12" height="12" viewBox="0 0 16 16">
273
- <g fill="none" fill-rule="evenodd">
274
- <path d="M0 0h16v16H0z"/>
275
- <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"/>
276
- </g>
277
- </svg>
278
- <span>10</span>
279
- </span>
280
- &nbsp;
281
- <a target="_blank" href="https://segmentfault.com/u/crazycodes" title="Programming Language">
282
- <span>CrazyCodes</span>
283
- </a>
284
- </div>
285
- <div class="details">
286
- 创建《一文秒懂》这个专栏与以往《Grace development》和我博客的个人分享文章不同，我对《一文秒懂》这个专栏的定位是一个有态度，高标准的技术专栏，而《Grace development》我依旧会讲一些我们日常中会碰到的...
287
- </div>
288
- </div>
289
- </li>
290
-
291
- <li>
292
- <div class="info">
293
- <div class="rank">
294
- <span title="Ranking 8">8</span>
295
- <a href="https://segmentfault.com/a/1190000040869270" target="_blank" title="7个关于&#34;this&#34;面试题，你知道几个？">7个关于&#34;this&#34;面试题，你知道几个？</a>
296
- </div>
297
- <div class="sub-title followers">
298
-
299
- <span title="Stargazers Count">
300
- <svg width="12" height="12" viewBox="0 0 16 16">
301
- <g fill="none" fill-rule="evenodd">
302
- <path d="M0 0h16v16H0z"/>
303
- <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"/>
304
- </g>
305
- </svg>
306
- <span>7</span>
307
- </span>
308
- &nbsp;
309
- <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
310
- <span>前端小智</span>
311
- </a>
312
- </div>
313
- <div class="details">
314
- 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
315
- </div>
316
- </div>
317
- </li>
318
-
319
- <li>
320
- <div class="info">
321
- <div class="rank">
322
- <span title="Ranking 9">9</span>
323
- <a href="https://segmentfault.com/a/1190000040877069" target="_blank" title="涉嫌抄袭？抖音前端技术团队发文致歉，承认借鉴Ant Design">涉嫌抄袭？抖音前端技术团队发文致歉，承认借鉴Ant Design</a>
324
- </div>
325
- <div class="sub-title followers">
326
-
327
- <span title="Stargazers Count">
328
- <svg width="12" height="12" viewBox="0 0 16 16">
329
- <g fill="none" fill-rule="evenodd">
330
- <path d="M0 0h16v16H0z"/>
331
- <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"/>
332
- </g>
333
- </svg>
334
- <span>3</span>
335
- </span>
336
- &nbsp;
337
- <a target="_blank" href="https://segmentfault.com/u/snakesss" title="Programming Language">
338
- <span>snakesss</span>
339
- </a>
340
- </div>
341
- <div class="details">
342
- 据描述，Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代企业级应用 UI 解决方案，是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案...
343
- </div>
344
- </div>
345
- </li>
346
-
347
- <li>
348
- <div class="info">
349
- <div class="rank">
350
- <span title="Ranking 10">10</span>
351
- <a href="https://segmentfault.com/a/1190000040867703" target="_blank" title="JuiceFS 如何帮助趣头条超大规模 HDFS 降负载">JuiceFS 如何帮助趣头条超大规模 HDFS 降负载</a>
352
- </div>
353
- <div class="sub-title followers">
354
-
355
- <span title="Stargazers Count">
356
- <svg width="12" height="12" viewBox="0 0 16 16">
357
- <g fill="none" fill-rule="evenodd">
358
- <path d="M0 0h16v16H0z"/>
359
- <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"/>
360
- </g>
361
- </svg>
362
- <span>6</span>
363
- </span>
364
- &nbsp;
365
- <a target="_blank" href="https://segmentfault.com/u/juicefs" title="Programming Language">
366
- <span>JuiceFS</span>
367
- </a>
368
- </div>
369
- <div class="details">
370
- 高昌健，Juicedata 解决方案架构师，十年互联网行业从业经历，曾在知乎、即刻、小红书多个团队担任架构师职位，专注于分布式系统、大数据、AI 领域的技术研究。
371
- </div>
372
- </div>
373
- </li>
374
-
375
- <li>
376
- <div class="info">
377
- <div class="rank">
378
- <span title="Ranking 11">11</span>
379
- <a href="https://segmentfault.com/a/1190000040870566" target="_blank" title="灵光一闪！帮你使用Vue，搞定无法解决的“动态挂载”">灵光一闪！帮你使用Vue，搞定无法解决的“动态挂载”</a>
380
- </div>
381
- <div class="sub-title followers">
382
-
383
- <span title="Stargazers Count">
384
- <svg width="12" height="12" viewBox="0 0 16 16">
385
- <g fill="none" fill-rule="evenodd">
386
- <path d="M0 0h16v16H0z"/>
387
- <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"/>
388
- </g>
389
- </svg>
390
- <span>3</span>
391
- </span>
392
- &nbsp;
393
- <a target="_blank" href="https://segmentfault.com/u/grapecity" title="Programming Language">
394
- <span>葡萄城技术团队</span>
395
- </a>
396
- </div>
397
- <div class="details">
398
- 在一些特殊场景下，使用组件的时机无法确定，或者无法在Vue的template中确定要我们要使用的组件，这时就需要动态的挂载组件，或者使用运行时编译动态创建组件并挂载。
399
- </div>
400
- </div>
401
- </li>
402
-
403
- <li>
404
- <div class="info">
405
- <div class="rank">
406
- <span title="Ranking 12">12</span>
407
- <a href="https://segmentfault.com/a/1190000040864758" target="_blank" title="Python Type Hints 从入门到实践">Python Type Hints 从入门到实践</a>
408
- </div>
409
- <div class="sub-title followers">
410
-
411
- <span title="Stargazers Count">
412
- <svg width="12" height="12" viewBox="0 0 16 16">
413
- <g fill="none" fill-rule="evenodd">
414
- <path d="M0 0h16v16H0z"/>
415
- <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"/>
416
- </g>
417
- </svg>
418
- <span>6</span>
419
- </span>
420
- &nbsp;
421
- <a target="_blank" href="https://segmentfault.com/u/yunshu_blog" title="Programming Language">
422
- <span>云叔_又拍云</span>
423
- </a>
424
- </div>
425
- <div class="details">
426
- Python 想必大家都已经很熟悉了，甚至关于它有用或者无用的论点大家可能也已经看腻了。但是无论如何，它作为一个将加入高考科目的语言还是有它独到之处的，今天我们就再展开聊聊 Python。
427
- </div>
428
- </div>
429
- </li>
430
-
431
- <li>
432
- <div class="info">
433
- <div class="rank">
434
- <span title="Ranking 13">13</span>
435
- <a href="https://segmentfault.com/a/1190000040874554" target="_blank" title="常见 SQL 面试题：经典 50 例">常见 SQL 面试题：经典 50 例</a>
436
- </div>
437
- <div class="sub-title followers">
438
-
439
- <span title="Stargazers Count">
440
- <svg width="12" height="12" viewBox="0 0 16 16">
441
- <g fill="none" fill-rule="evenodd">
442
- <path d="M0 0h16v16H0z"/>
443
- <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"/>
444
- </g>
445
- </svg>
446
- <span>7</span>
447
- </span>
448
- &nbsp;
449
- <a target="_blank" href="https://segmentfault.com/u/jishuroad" title="Programming Language">
450
- <span>民工哥</span>
451
- </a>
452
- </div>
453
- <div class="details">
454
- 多表连接: 内连接(省略默认inner) join ...on..左连接left join tableName as b on a.key ==b.key右连接right join 连接union(无重复(过滤去重))和union all(有重复[不过滤去重])
455
- </div>
456
- </div>
457
- </li>
458
-
459
- <li>
460
- <div class="info">
461
- <div class="rank">
462
- <span title="Ranking 14">14</span>
463
- <a href="https://segmentfault.com/a/1190000040879546" target="_blank" title="前端架构师的 git 功力，你有几成火候？">前端架构师的 git 功力，你有几成火候？</a>
464
- </div>
465
- <div class="sub-title followers">
466
-
467
- <span title="Stargazers Count">
468
- <svg width="12" height="12" viewBox="0 0 16 16">
469
- <g fill="none" fill-rule="evenodd">
470
- <path d="M0 0h16v16H0z"/>
471
- <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"/>
472
- </g>
473
- </svg>
474
- <span>4</span>
475
- </span>
476
- &nbsp;
477
- <a target="_blank" href="https://segmentfault.com/u/ruidoc" title="Programming Language">
478
- <span>杨成功</span>
479
- </a>
480
- </div>
481
- <div class="details">
482
- 本文从前端工程，团队协作，生产部署的角度，介绍架构人员需要掌握的 git 实践能力。大纲预览本文介绍的内容包括以下方面：分支管理策略commit 规范与提交验证误操作的撤回方案Tag 与生产环境永久杜绝 443 Timeou...
483
- </div>
484
- </div>
485
- </li>
486
-
487
- <li>
488
- <div class="info">
489
- <div class="rank">
490
- <span title="Ranking 15">15</span>
491
- <a href="https://segmentfault.com/a/1190000040856612" target="_blank" title="《RabbitMQ》 | 消息丢失也就这么回事">《RabbitMQ》 | 消息丢失也就这么回事</a>
492
- </div>
493
- <div class="sub-title followers">
494
-
495
- <span title="Stargazers Count">
496
- <svg width="12" height="12" viewBox="0 0 16 16">
497
- <g fill="none" fill-rule="evenodd">
498
- <path d="M0 0h16v16H0z"/>
499
- <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"/>
500
- </g>
501
- </svg>
502
- <span>3</span>
503
- </span>
504
- &nbsp;
505
- <a target="_blank" href="https://segmentfault.com/u/17689400062" title="Programming Language">
506
- <span>蔡不菜丶</span>
507
- </a>
508
- </div>
509
- <div class="details">
510
- 本文主要介绍 RabbitMQ的消息丢失问题如有需要，可以参考如有帮助，不忘 点赞 ❥微信公众号已开启，小菜良记，没关注的同学们记得关注哦！
511
- </div>
512
- </div>
513
- </li>
514
-
515
- <li>
516
- <div class="info">
517
- <div class="rank">
518
- <span title="Ranking 16">16</span>
519
- <a href="https://segmentfault.com/a/1190000040857798" target="_blank" title="第七期:前端九条启发分享">第七期:前端九条启发分享</a>
520
- </div>
521
- <div class="sub-title followers">
522
-
523
- <span title="Stargazers Count">
524
- <svg width="12" height="12" viewBox="0 0 16 16">
525
- <g fill="none" fill-rule="evenodd">
526
- <path d="M0 0h16v16H0z"/>
527
- <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"/>
528
- </g>
529
- </svg>
530
- <span>3</span>
531
- </span>
532
- &nbsp;
533
- <a target="_blank" href="https://segmentfault.com/u/lulu_up" title="Programming Language">
534
- <span>lulu_up</span>
535
- </a>
536
- </div>
537
- <div class="details">
538
- 事情是这样的, 周五的时候需要做一个小优化, 某个文件里面原本导出3个 &#34;json对象&#34;, 我需要改成导出三个function方便根据传参改变导出内容, 这时就发生了奇怪的类型报错, 假设当前有如下的代码:     下面代码...
539
- </div>
540
- </div>
541
- </li>
542
-
543
- <li>
544
- <div class="info">
545
- <div class="rank">
546
- <span title="Ranking 17">17</span>
547
- <a href="https://segmentfault.com/a/1190000040880874" target="_blank" title="大厂面试题分享：如何让(a===1&amp;&amp;a===2&amp;&amp;a===3)的值为true?">大厂面试题分享：如何让(a===1&amp;&amp;a===2&amp;&amp;a===3)的值为true?</a>
548
- </div>
549
- <div class="sub-title followers">
550
-
551
- <span title="Stargazers Count">
552
- <svg width="12" height="12" viewBox="0 0 16 16">
553
- <g fill="none" fill-rule="evenodd">
554
- <path d="M0 0h16v16H0z"/>
555
- <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"/>
556
- </g>
557
- </svg>
558
- <span>4</span>
559
- </span>
560
- &nbsp;
561
- <a target="_blank" href="https://segmentfault.com/u/wscats" title="Programming Language">
562
- <span>wscats</span>
563
- </a>
564
- </div>
565
- <div class="details">
566
- 当我第一次看到这一题目的时候，我是比较震惊的，分析了下很不合我们编程的常理，并认为不大可能，变量a要在同一情况下要同时等于1，2和3这三个值，这是天方夜谭吧，不亚于哥德巴赫1+1=1的猜想吧，不过一切皆有可...
567
- </div>
568
- </div>
569
- </li>
570
-
571
- <li>
572
- <div class="info">
573
- <div class="rank">
574
- <span title="Ranking 18">18</span>
575
- <a href="https://segmentfault.com/a/1190000040874775" target="_blank" title="如何评价抖音前端开源的 Semi Design ？">如何评价抖音前端开源的 Semi Design ？</a>
576
- </div>
577
- <div class="sub-title followers">
578
-
579
- <span title="Stargazers Count">
580
- <svg width="12" height="12" viewBox="0 0 16 16">
581
- <g fill="none" fill-rule="evenodd">
582
- <path d="M0 0h16v16H0z"/>
583
- <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"/>
584
- </g>
585
- </svg>
586
- <span>2</span>
587
- </span>
588
- &nbsp;
589
- <a target="_blank" href="https://segmentfault.com/u/jerrytanjinjie" title="Programming Language">
590
- <span>Peter谭老师</span>
591
- </a>
592
- </div>
593
- <div class="details">
594
- 开头我是Peter抖音系企业应用设计系统 Semi Design 开源了，这是我今天听到最大的消息，于是晚上回家赶紧去看了看打开知乎，果然跟我想的一样，第一件事肯定有人否定这个开源的库，是基于别人的开源库改造而来甚...
595
- </div>
596
- </div>
597
- </li>
598
-
599
- <li>
600
- <div class="info">
601
- <div class="rank">
602
- <span title="Ranking 19">19</span>
603
- <a href="https://segmentfault.com/a/1190000040857051" target="_blank" title="5 个 CSS 新功能">5 个 CSS 新功能</a>
604
- </div>
605
- <div class="sub-title followers">
606
-
607
- <span title="Stargazers Count">
608
- <svg width="12" height="12" viewBox="0 0 16 16">
609
- <g fill="none" fill-rule="evenodd">
610
- <path d="M0 0h16v16H0z"/>
611
- <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"/>
612
- </g>
613
- </svg>
614
- <span>2</span>
615
- </span>
616
- &nbsp;
617
- <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
618
- <span>前端小智</span>
619
- </a>
620
- </div>
621
- <div class="details">
622
- 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
623
- </div>
624
- </div>
625
- </li>
626
-
627
- <li>
628
- <div class="info">
629
- <div class="rank">
630
- <span title="Ranking 20">20</span>
631
- <a href="https://segmentfault.com/a/1190000040866692" target="_blank" title="程序员如何玩转力扣刷题？">程序员如何玩转力扣刷题？</a>
632
- </div>
633
- <div class="sub-title followers">
634
-
635
- <span title="Stargazers Count">
636
- <svg width="12" height="12" viewBox="0 0 16 16">
637
- <g fill="none" fill-rule="evenodd">
638
- <path d="M0 0h16v16H0z"/>
639
- <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"/>
640
- </g>
641
- </svg>
642
- <span>3</span>
643
- </span>
644
- &nbsp;
645
- <a target="_blank" href="https://segmentfault.com/u/bigsai" title="Programming Language">
646
- <span>bigsai</span>
647
- </a>
648
- </div>
649
- <div class="details">
650
- 前言大家好，我是bigsai，好久不见！今天就给各位小伙伴分享我自己刷题力扣的一些小方法，不一定很有用但是可以参考，祝你更高效的变强！最近在一些群聊、私聊中遇到很多的一个问题就是：刷题，大家也都重视到算...
651
- </div>
652
- </div>
653
- </li>
654
-
655
- <li>
656
- <div class="info">
657
- <div class="rank">
658
- <span title="Ranking 21">21</span>
659
- <a href="https://segmentfault.com/a/1190000040873944" target="_blank" title="面试不再慌，终于有人把TCP讲明白了。。。">面试不再慌，终于有人把TCP讲明白了。。。</a>
660
- </div>
661
- <div class="sub-title followers">
662
-
663
- <span title="Stargazers Count">
664
- <svg width="12" height="12" viewBox="0 0 16 16">
665
- <g fill="none" fill-rule="evenodd">
666
- <path d="M0 0h16v16H0z"/>
667
- <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"/>
668
- </g>
669
- </svg>
670
- <span>2</span>
671
- </span>
672
- &nbsp;
673
- <a target="_blank" href="https://segmentfault.com/u/23g69kz6" title="Programming Language">
674
- <span>Java大将军</span>
675
- </a>
676
- </div>
677
- <div class="details">
678
- TCP（Transmission Control Protocol，传输控制协议） 是计算机网络的的重要组成部分，也是网络编程的重要内容，还有我们平时接触最多的 HTTP 也是基于 TCP 实现的。TCP 可以说是最重要的传输层协议，既然如此，...
679
- </div>
680
- </div>
681
- </li>
682
-
683
- <li>
684
- <div class="info">
685
- <div class="rank">
686
- <span title="Ranking 22">22</span>
687
- <a href="https://segmentfault.com/a/1190000040869235" target="_blank" title="深入浅出Java内存模型">深入浅出Java内存模型</a>
688
- </div>
689
- <div class="sub-title followers">
690
-
691
- <span title="Stargazers Count">
692
- <svg width="12" height="12" viewBox="0 0 16 16">
693
- <g fill="none" fill-rule="evenodd">
694
- <path d="M0 0h16v16H0z"/>
695
- <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"/>
696
- </g>
697
- </svg>
698
- <span>4</span>
699
- </span>
700
- &nbsp;
701
- <a target="_blank" href="https://segmentfault.com/u/java_3y" title="Programming Language">
702
- <span>Java3y</span>
703
- </a>
704
- </div>
705
- <div class="details">
706
- 面试官：我记得你的最终答案是：Java为了屏蔽硬件和操作系统访问内存的各种差异，提出了「Java内存模型」的规范，保证了Java程序在各种平台下对内存的访问都能得到一致效果
707
- </div>
708
- </div>
709
- </li>
710
-
711
- <li>
712
- <div class="info">
713
- <div class="rank">
714
- <span title="Ranking 23">23</span>
715
- <a href="https://segmentfault.com/a/1190000040873601" target="_blank" title="分辨率越高清晰度越高吗？">分辨率越高清晰度越高吗？</a>
716
- </div>
717
- <div class="sub-title followers">
718
-
719
- <span title="Stargazers Count">
720
- <svg width="12" height="12" viewBox="0 0 16 16">
721
- <g fill="none" fill-rule="evenodd">
722
- <path d="M0 0h16v16H0z"/>
723
- <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"/>
724
- </g>
725
- </svg>
726
- <span>5</span>
727
- </span>
728
- &nbsp;
729
- <a target="_blank" href="https://segmentfault.com/u/onlythinking" title="Programming Language">
730
- <span>编程码农</span>
731
- </a>
732
- </div>
733
- <div class="details">
734
- 显示屏清晰度对于计算机上显示的文字和图片，正常来说显示器分辨率越高清晰度就会更高，不过有时我们切换一些超高分辨率后也识别不出差异，这是为什么？简单来说显示清晰度由物理因素和视力因素。物理因素就是设...
735
- </div>
736
- </div>
737
- </li>
738
-
739
- <li>
740
- <div class="info">
741
- <div class="rank">
742
- <span title="Ranking 24">24</span>
743
- <a href="https://segmentfault.com/a/1190000040855590" target="_blank" title="前端代码库里的 git hooks">前端代码库里的 git hooks</a>
744
- </div>
745
- <div class="sub-title followers">
746
-
747
- <span title="Stargazers Count">
748
- <svg width="12" height="12" viewBox="0 0 16 16">
749
- <g fill="none" fill-rule="evenodd">
750
- <path d="M0 0h16v16H0z"/>
751
- <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"/>
752
- </g>
753
- </svg>
754
- <span>2</span>
755
- </span>
756
- &nbsp;
757
- <a target="_blank" href="https://segmentfault.com/u/1023" title="Programming Language">
758
- <span>混子的日常</span>
759
- </a>
760
- </div>
761
- <div class="details">
762
- 本篇文章收获什么：git hooks 的基本知识yorkie 的原理浅析如何使用 本地 vscode 打开 github 项目故事是这样的：我：在npm run lint脚本里面加了vue-tsc --noEmit --skipLibCheck &amp;&amp; ....这个命令后，--...
763
- </div>
764
- </div>
765
- </li>
766
-
767
- <li>
768
- <div class="info">
769
- <div class="rank">
770
- <span title="Ranking 25">25</span>
771
- <a href="https://segmentfault.com/a/1190000040857744" target="_blank" title="超牛逼的性能监控神器！快速定位线上问题">超牛逼的性能监控神器！快速定位线上问题</a>
772
- </div>
773
- <div class="sub-title followers">
774
-
775
- <span title="Stargazers Count">
776
- <svg width="12" height="12" viewBox="0 0 16 16">
777
- <g fill="none" fill-rule="evenodd">
778
- <path d="M0 0h16v16H0z"/>
779
- <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"/>
780
- </g>
781
- </svg>
782
- <span>2</span>
783
- </span>
784
- &nbsp;
785
- <a target="_blank" href="https://segmentfault.com/u/jishuroad" title="Programming Language">
786
- <span>民工哥</span>
787
- </a>
788
- </div>
789
- <div class="details">
790
- 今天想总结的东西是最近工作中使用到的测试工具JMH以及Java运行时监控工具Arthas。他们在我的实际工作中也算是帮了大忙。所以在这里抛砖引玉一下这些工具的使用方法。同时也加深一下自己对这些工具的熟悉程度。对...
791
- </div>
792
- </div>
793
- </li>
794
-
795
- <li>
796
- <div class="info">
797
- <div class="rank">
798
- <span title="Ranking 26">26</span>
799
- <a href="https://segmentfault.com/a/1190000040883655" target="_blank" title="一条曲线的诞生">一条曲线的诞生</a>
800
- </div>
801
- <div class="sub-title followers">
802
-
803
- <span title="Stargazers Count">
804
- <svg width="12" height="12" viewBox="0 0 16 16">
805
- <g fill="none" fill-rule="evenodd">
806
- <path d="M0 0h16v16H0z"/>
807
- <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"/>
808
- </g>
809
- </svg>
810
- <span>3</span>
811
- </span>
812
- &nbsp;
813
- <a target="_blank" href="https://segmentfault.com/u/alisecued" title="Programming Language">
814
- <span>ES2049</span>
815
- </a>
816
- </div>
817
- <div class="details">
818
- 在图可视化领域有着大量和曲线相关的场景，然而想要得到一条合适的曲线却并不容易。笔者最近在使用 AntV G6 的时候，就遇到了这样的问题。形状扁平，箭头方向和连线趋势不一致，连线起点和终点被隐藏等等，好看的...
819
- </div>
820
- </div>
821
- </li>
822
-
823
- <li>
824
- <div class="info">
825
- <div class="rank">
826
- <span title="Ranking 27">27</span>
827
- <a href="https://segmentfault.com/a/1190000040875138" target="_blank" title="听说你的对象有个”环“？怎么发现的呢？">听说你的对象有个”环“？怎么发现的呢？</a>
828
- </div>
829
- <div class="sub-title followers">
830
-
831
- <span title="Stargazers Count">
832
- <svg width="12" height="12" viewBox="0 0 16 16">
833
- <g fill="none" fill-rule="evenodd">
834
- <path d="M0 0h16v16H0z"/>
835
- <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"/>
836
- </g>
837
- </svg>
838
- <span>2</span>
839
- </span>
840
- &nbsp;
841
- <a target="_blank" href="https://segmentfault.com/u/116263" title="Programming Language">
842
- <span>前端胖头鱼</span>
843
- </a>
844
- </div>
845
- <div class="details">
846
- 1. 手写62+方法学习JavaScript底层原理判断一个对象是否存在循环引用已收录至 手写各种源码实现，也可以直接点击isCyclic快速查看，目前已有62+手写实现，欢迎一起来学习喔。2. 不得不说的循环引用如下图: 相信曾...
847
- </div>
848
- </div>
849
- </li>
850
-
851
- <li>
852
- <div class="info">
853
- <div class="rank">
854
- <span title="Ranking 28">28</span>
855
- <a href="https://segmentfault.com/a/1190000040876086" target="_blank" title="CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框">CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框</a>
856
- </div>
857
- <div class="sub-title followers">
858
-
859
- <span title="Stargazers Count">
860
- <svg width="12" height="12" viewBox="0 0 16 16">
861
- <g fill="none" fill-rule="evenodd">
862
- <path d="M0 0h16v16H0z"/>
863
- <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"/>
864
- </g>
865
- </svg>
866
- <span>2</span>
867
- </span>
868
- &nbsp;
869
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
870
- <span>chokcoco</span>
871
- </a>
872
- </div>
873
- <div class="details">
874
- 本文将通过一个实际的业务需求，讲解如何实现极端场景下文字加粗加边框效果文字多重边框的效果需求背景 - 文字的二次加粗今天遇到这样一个有意思的问题：在文字展示的时候，利用了 font-weight: bold 给文字进行...
875
- </div>
876
- </div>
877
- </li>
878
-
879
- <li>
880
- <div class="info">
881
- <div class="rank">
882
- <span title="Ranking 29">29</span>
883
- <a href="https://segmentfault.com/a/1190000040867160" target="_blank" title="我的刷题经验总结">我的刷题经验总结</a>
884
- </div>
885
- <div class="sub-title followers">
886
-
887
- <span title="Stargazers Count">
888
- <svg width="12" height="12" viewBox="0 0 16 16">
889
- <g fill="none" fill-rule="evenodd">
890
- <path d="M0 0h16v16H0z"/>
891
- <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"/>
892
- </g>
893
- </svg>
894
- <span>2</span>
895
- </span>
896
- &nbsp;
897
- <a target="_blank" href="https://segmentfault.com/u/labuladong" title="Programming Language">
898
- <span>labuladong</span>
899
- </a>
900
- </div>
901
- <div class="details">
902
- 这两年在我自己不断刷题，思考和写公众号的过程中，我对算法的理解也是在逐渐加深，所以今天再写一篇，把我这两年的经验和思考浓缩成 4000 字，分享给大家。
903
- </div>
904
- </div>
905
- </li>
906
-
107
+ <li class="rank-title">
108
+ <span class="select">
109
+ <a class="" href="sifou-daily.html">日热门</a>
110
+ <a class="active" href="sifou-weekly.html">周热门</a>
111
+ <a class="" href="sifou-monthly.html">月热门</a>
112
+ </span>
113
+ </li>
114
+
115
+ <li>
116
+ <div class="info">
117
+ <div class="rank">
118
+ <span title="Ranking 1">1</span>
119
+ <a href="https://segmentfault.com/a/1190000040875211" target="_blank" title="大道至简，繁在人心：在浏览器控制台安装npm包是什么操作？">大道至简，繁在人心：在浏览器控制台安装npm包是什么操作？</a>
120
+ </div>
121
+ <div class="sub-title followers">
122
+
123
+ <span title="Stargazers Count">
124
+ <svg width="12" height="12" viewBox="0 0 16 16">
125
+ <g fill="none" fill-rule="evenodd">
126
+ <path d="M0 0h16v16H0z"/>
127
+ <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"/>
128
+ </g>
129
+ </svg>
130
+ <span>29</span>
131
+ </span>
132
+ &nbsp;
133
+ <a target="_blank" href="https://segmentfault.com/u/king_hcj" title="Programming Language">
134
+ <span>独钓寒江雪</span>
135
+ </a>
136
+ </div>
137
+ <div class="details">
138
+ 我们都知道，npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。虽然作为命令行工具的 npm 近年来逐渐式微，但是作为广泛使用的存...
139
+ </div>
140
+ </div>
141
+ </li>
142
+
143
+ <li>
144
+ <div class="info">
145
+ <div class="rank">
146
+ <span title="Ranking 2">2</span>
147
+ <a href="https://segmentfault.com/a/1190000040879546" target="_blank" title="前端架构师的 git 功力，你有几成火候？">前端架构师的 git 功力，你有几成火候？</a>
148
+ </div>
149
+ <div class="sub-title followers">
150
+
151
+ <span title="Stargazers Count">
152
+ <svg width="12" height="12" viewBox="0 0 16 16">
153
+ <g fill="none" fill-rule="evenodd">
154
+ <path d="M0 0h16v16H0z"/>
155
+ <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"/>
156
+ </g>
157
+ </svg>
158
+ <span>21</span>
159
+ </span>
160
+ &nbsp;
161
+ <a target="_blank" href="https://segmentfault.com/u/ruidoc" title="Programming Language">
162
+ <span>杨成功</span>
163
+ </a>
164
+ </div>
165
+ <div class="details">
166
+ 本文从前端工程，团队协作，生产部署的角度，介绍架构人员需要掌握的 git 实践能力。大纲预览本文介绍的内容包括以下方面：分支管理策略commit 规范与提交验证误操作的撤回方案Tag 与生产环境永久杜绝 443 Timeou...
167
+ </div>
168
+ </div>
169
+ </li>
170
+
171
+ <li>
172
+ <div class="info">
173
+ <div class="rank">
174
+ <span title="Ranking 3">3</span>
175
+ <a href="https://segmentfault.com/a/1190000040896436" target="_blank" title="肝完《浏览器基本原理与实践》，我总结了这些">肝完《浏览器基本原理与实践》，我总结了这些</a>
176
+ </div>
177
+ <div class="sub-title followers">
178
+
179
+ <span title="Stargazers Count">
180
+ <svg width="12" height="12" viewBox="0 0 16 16">
181
+ <g fill="none" fill-rule="evenodd">
182
+ <path d="M0 0h16v16H0z"/>
183
+ <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"/>
184
+ </g>
185
+ </svg>
186
+ <span>19</span>
187
+ </span>
188
+ &nbsp;
189
+ <a target="_blank" href="https://segmentfault.com/u/wuwhs" title="Programming Language">
190
+ <span>wuwhs</span>
191
+ </a>
192
+ </div>
193
+ <div class="details">
194
+ 作为一名前端er，日常工作打交道最多（之一）的莫过于熟悉而又陌生的浏览器了，熟悉是每天都会基于浏览器的应用层面之上码业务，陌生是很多人可能跟我一样不熟悉其内部运行原理，比如js是怎样运行的呢？精美样式...
195
+ </div>
196
+ </div>
197
+ </li>
198
+
199
+ <li>
200
+ <div class="info">
201
+ <div class="rank">
202
+ <span title="Ranking 4">4</span>
203
+ <a href="https://segmentfault.com/a/1190000040888747" target="_blank" title="念念不忘，必有echo )))) ——讲述一个Typecho开源博客程序坚持 15 年的故事">念念不忘，必有echo )))) ——讲述一个Typecho开源博客程序坚持 15 年的故事</a>
204
+ </div>
205
+ <div class="sub-title followers">
206
+
207
+ <span title="Stargazers Count">
208
+ <svg width="12" height="12" viewBox="0 0 16 16">
209
+ <g fill="none" fill-rule="evenodd">
210
+ <path d="M0 0h16v16H0z"/>
211
+ <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"/>
212
+ </g>
213
+ </svg>
214
+ <span>9</span>
215
+ </span>
216
+ &nbsp;
217
+ <a target="_blank" href="https://segmentfault.com/u/sluke" title="Programming Language">
218
+ <span>sluke</span>
219
+ </a>
220
+ </div>
221
+ <div class="details">
222
+ 大家好，我是Typecho开发团队的 sluke，感谢大家在线上线下听我分享我给大家分享的，是一个小故事，一个开源博客程序坚持 15 年的故事，是这个团队的一点点启发和心得
223
+ </div>
224
+ </div>
225
+ </li>
226
+
227
+ <li>
228
+ <div class="info">
229
+ <div class="rank">
230
+ <span title="Ranking 5">5</span>
231
+ <a href="https://segmentfault.com/a/1190000040891379" target="_blank" title="20个 Javascript 技巧，提高我们的摸鱼时间！">20个 Javascript 技巧，提高我们的摸鱼时间！</a>
232
+ </div>
233
+ <div class="sub-title followers">
234
+
235
+ <span title="Stargazers Count">
236
+ <svg width="12" height="12" viewBox="0 0 16 16">
237
+ <g fill="none" fill-rule="evenodd">
238
+ <path d="M0 0h16v16H0z"/>
239
+ <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"/>
240
+ </g>
241
+ </svg>
242
+ <span>14</span>
243
+ </span>
244
+ &nbsp;
245
+ <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
246
+ <span>前端小智</span>
247
+ </a>
248
+ </div>
249
+ <div class="details">
250
+ 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
251
+ </div>
252
+ </div>
253
+ </li>
254
+
255
+ <li>
256
+ <div class="info">
257
+ <div class="rank">
258
+ <span title="Ranking 6">6</span>
259
+ <a href="https://segmentfault.com/a/1190000040893750" target="_blank" title="尤雨溪几年前开发的“玩具 vite”，才100多行代码，却十分有助于理解 vite 原理">尤雨溪几年前开发的“玩具 vite”，才100多行代码，却十分有助于理解 vite 原理</a>
260
+ </div>
261
+ <div class="sub-title followers">
262
+
263
+ <span title="Stargazers Count">
264
+ <svg width="12" height="12" viewBox="0 0 16 16">
265
+ <g fill="none" fill-rule="evenodd">
266
+ <path d="M0 0h16v16H0z"/>
267
+ <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"/>
268
+ </g>
269
+ </svg>
270
+ <span>12</span>
271
+ </span>
272
+ &nbsp;
273
+ <a target="_blank" href="https://segmentfault.com/u/lxchuan12" title="Programming Language">
274
+ <span>若川</span>
275
+ </a>
276
+ </div>
277
+ <div class="details">
278
+ 想学源码，极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this、create-vue等十余...
279
+ </div>
280
+ </div>
281
+ </li>
282
+
283
+ <li>
284
+ <div class="info">
285
+ <div class="rank">
286
+ <span title="Ranking 7">7</span>
287
+ <a href="https://segmentfault.com/a/1190000040877069" target="_blank" title="涉嫌抄袭？抖音前端技术团队发文致歉，承认借鉴Ant Design">涉嫌抄袭？抖音前端技术团队发文致歉，承认借鉴Ant Design</a>
288
+ </div>
289
+ <div class="sub-title followers">
290
+
291
+ <span title="Stargazers Count">
292
+ <svg width="12" height="12" viewBox="0 0 16 16">
293
+ <g fill="none" fill-rule="evenodd">
294
+ <path d="M0 0h16v16H0z"/>
295
+ <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"/>
296
+ </g>
297
+ </svg>
298
+ <span>4</span>
299
+ </span>
300
+ &nbsp;
301
+ <a target="_blank" href="https://segmentfault.com/u/snakesss" title="Programming Language">
302
+ <span>snakesss</span>
303
+ </a>
304
+ </div>
305
+ <div class="details">
306
+ 据描述，Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代企业级应用 UI 解决方案，是一款包含设计语言、React 组件、主题等开箱即用的中后台解决方案...
307
+ </div>
308
+ </div>
309
+ </li>
310
+
311
+ <li>
312
+ <div class="info">
313
+ <div class="rank">
314
+ <span title="Ranking 8">8</span>
315
+ <a href="https://segmentfault.com/a/1190000040885865" target="_blank" title="PC端高倍屏适配方案实践">PC端高倍屏适配方案实践</a>
316
+ </div>
317
+ <div class="sub-title followers">
318
+
319
+ <span title="Stargazers Count">
320
+ <svg width="12" height="12" viewBox="0 0 16 16">
321
+ <g fill="none" fill-rule="evenodd">
322
+ <path d="M0 0h16v16H0z"/>
323
+ <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"/>
324
+ </g>
325
+ </svg>
326
+ <span>11</span>
327
+ </span>
328
+ &nbsp;
329
+ <a target="_blank" href="https://segmentfault.com/u/vleedesigntheory" title="Programming Language">
330
+ <span>野林</span>
331
+ </a>
332
+ </div>
333
+ <div class="details">
334
+ 随着PC端屏幕的发展，PC端也逐步出现了更高倍数的屏幕，相对于手机端的Retina屏，PC端也出现了多倍数适配的要求，本文主要是PC端高倍屏幕适配方案的一个实践总结，希望能给对PC端有适配高倍屏幕需求的同学有一些...
335
+ </div>
336
+ </div>
337
+ </li>
338
+
339
+ <li>
340
+ <div class="info">
341
+ <div class="rank">
342
+ <span title="Ranking 9">9</span>
343
+ <a href="https://segmentfault.com/a/1190000040894152" target="_blank" title="大奖升级！HMS Core线上Codelabs挑战赛第3期：用3D建模构建元宇宙">大奖升级！HMS Core线上Codelabs挑战赛第3期：用3D建模构建元宇宙</a>
344
+ </div>
345
+ <div class="sub-title followers">
346
+
347
+ <span title="Stargazers Count">
348
+ <svg width="12" height="12" viewBox="0 0 16 16">
349
+ <g fill="none" fill-rule="evenodd">
350
+ <path d="M0 0h16v16H0z"/>
351
+ <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"/>
352
+ </g>
353
+ </svg>
354
+ <span>2</span>
355
+ </span>
356
+ &nbsp;
357
+ <a target="_blank" href="https://segmentfault.com/u/hms_core" title="Programming Language">
358
+ <span>华为移动服务</span>
359
+ </a>
360
+ </div>
361
+ <div class="details">
362
+ “元宇宙”概念风生水起，在AR、VR等技术构建的虚拟世界里，3D模型担当重要角色，无论是为玩家提供更丰富更真实游戏体验的3D游戏领域，还是各大电商平台正在启用并不断完善的3D虚拟购物领域……3D建模无疑成为日益迫...
363
+ </div>
364
+ </div>
365
+ </li>
366
+
367
+ <li>
368
+ <div class="info">
369
+ <div class="rank">
370
+ <span title="Ranking 10">10</span>
371
+ <a href="https://segmentfault.com/a/1190000040898864" target="_blank" title="CSS 盒子的边距塌陷">CSS 盒子的边距塌陷</a>
372
+ </div>
373
+ <div class="sub-title followers">
374
+
375
+ <span title="Stargazers Count">
376
+ <svg width="12" height="12" viewBox="0 0 16 16">
377
+ <g fill="none" fill-rule="evenodd">
378
+ <path d="M0 0h16v16H0z"/>
379
+ <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"/>
380
+ </g>
381
+ </svg>
382
+ <span>7</span>
383
+ </span>
384
+ &nbsp;
385
+ <a target="_blank" href="https://segmentfault.com/u/yunshu_blog" title="Programming Language">
386
+ <span>云叔_又拍云</span>
387
+ </a>
388
+ </div>
389
+ <div class="details">
390
+ 我相信下面的情形大家在日常工作中常常碰到：在制作静态页面中，为了页面整体的协调与美观，我们想让子盒子 image-div 的上边沿距离父盒子 header-div 的上边沿有一定间距。
391
+ </div>
392
+ </div>
393
+ </li>
394
+
395
+ <li>
396
+ <div class="info">
397
+ <div class="rank">
398
+ <span title="Ranking 11">11</span>
399
+ <a href="https://segmentfault.com/a/1190000040897227" target="_blank" title="策略模式在实际业务中的应用">策略模式在实际业务中的应用</a>
400
+ </div>
401
+ <div class="sub-title followers">
402
+
403
+ <span title="Stargazers Count">
404
+ <svg width="12" height="12" viewBox="0 0 16 16">
405
+ <g fill="none" fill-rule="evenodd">
406
+ <path d="M0 0h16v16H0z"/>
407
+ <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"/>
408
+ </g>
409
+ </svg>
410
+ <span>4</span>
411
+ </span>
412
+ &nbsp;
413
+ <a target="_blank" href="https://segmentfault.com/u/xiaotao_5c2cdb80411ca" title="Programming Language">
414
+ <span>bingfeng</span>
415
+ </a>
416
+ </div>
417
+ <div class="details">
418
+ 现有一个广告点击数据埋点上报的需求，上报的埋点数据根据点击的广告位置不同做区分进行上报，每个广告位置的数据进行分表存储。（eg：这里大家也不必深究分表存储为什么要这么做，我们只聊策略模式的实际应用）
419
+ </div>
420
+ </div>
421
+ </li>
422
+
423
+ <li>
424
+ <div class="info">
425
+ <div class="rank">
426
+ <span title="Ranking 12">12</span>
427
+ <a href="https://segmentfault.com/a/1190000040876086" target="_blank" title="CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框">CSS 奇技淫巧 | 巧妙实现文字二次加粗再加边框</a>
428
+ </div>
429
+ <div class="sub-title followers">
430
+
431
+ <span title="Stargazers Count">
432
+ <svg width="12" height="12" viewBox="0 0 16 16">
433
+ <g fill="none" fill-rule="evenodd">
434
+ <path d="M0 0h16v16H0z"/>
435
+ <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"/>
436
+ </g>
437
+ </svg>
438
+ <span>5</span>
439
+ </span>
440
+ &nbsp;
441
+ <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
442
+ <span>chokcoco</span>
443
+ </a>
444
+ </div>
445
+ <div class="details">
446
+ 本文将通过一个实际的业务需求，讲解如何实现极端场景下文字加粗加边框效果文字多重边框的效果需求背景 - 文字的二次加粗今天遇到这样一个有意思的问题：在文字展示的时候，利用了 font-weight: bold 给文字进行...
447
+ </div>
448
+ </div>
449
+ </li>
450
+
451
+ <li>
452
+ <div class="info">
453
+ <div class="rank">
454
+ <span title="Ranking 13">13</span>
455
+ <a href="https://segmentfault.com/a/1190000040890911" target="_blank" title="MySQL事务的隔离级别与并发问题">MySQL事务的隔离级别与并发问题</a>
456
+ </div>
457
+ <div class="sub-title followers">
458
+
459
+ <span title="Stargazers Count">
460
+ <svg width="12" height="12" viewBox="0 0 16 16">
461
+ <g fill="none" fill-rule="evenodd">
462
+ <path d="M0 0h16v16H0z"/>
463
+ <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"/>
464
+ </g>
465
+ </svg>
466
+ <span>5</span>
467
+ </span>
468
+ &nbsp;
469
+ <a target="_blank" href="https://segmentfault.com/u/baicai1031" title="Programming Language">
470
+ <span>白菜1031</span>
471
+ </a>
472
+ </div>
473
+ <div class="details">
474
+ 事务A先根据某个范围条件查询出了一些记录，而事务B写入了一些符合该条件的新记录，当事务A再次以相同的条件查询时，查询到了新的记录，就意味着发生了幻读现象。
475
+ </div>
476
+ </div>
477
+ </li>
478
+
479
+ <li>
480
+ <div class="info">
481
+ <div class="rank">
482
+ <span title="Ranking 14">14</span>
483
+ <a href="https://segmentfault.com/a/1190000040895223" target="_blank" title="GitOps 应用实践系列 - Argo CD 上手实践">GitOps 应用实践系列 - Argo CD 上手实践</a>
484
+ </div>
485
+ <div class="sub-title followers">
486
+
487
+ <span title="Stargazers Count">
488
+ <svg width="12" height="12" viewBox="0 0 16 16">
489
+ <g fill="none" fill-rule="evenodd">
490
+ <path d="M0 0h16v16H0z"/>
491
+ <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"/>
492
+ </g>
493
+ </svg>
494
+ <span>3</span>
495
+ </span>
496
+ &nbsp;
497
+ <a target="_blank" href="https://segmentfault.com/u/moelove" title="Programming Language">
498
+ <span>张晋涛</span>
499
+ </a>
500
+ </div>
501
+ <div class="details">
502
+ 我们通过 KIND（Kubernetes in Docker）工具创建一个用于本地测试的 Kubernetes 集群。使用如下的配置文件，创建一个包含一个 control plane 和三个 work 的集群。
503
+ </div>
504
+ </div>
505
+ </li>
506
+
507
+ <li>
508
+ <div class="info">
509
+ <div class="rank">
510
+ <span title="Ranking 15">15</span>
511
+ <a href="https://segmentfault.com/a/1190000040880874" target="_blank" title="大厂面试题分享：如何让(a===1&amp;&amp;a===2&amp;&amp;a===3)的值为true?">大厂面试题分享：如何让(a===1&amp;&amp;a===2&amp;&amp;a===3)的值为true?</a>
512
+ </div>
513
+ <div class="sub-title followers">
514
+
515
+ <span title="Stargazers Count">
516
+ <svg width="12" height="12" viewBox="0 0 16 16">
517
+ <g fill="none" fill-rule="evenodd">
518
+ <path d="M0 0h16v16H0z"/>
519
+ <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"/>
520
+ </g>
521
+ </svg>
522
+ <span>5</span>
523
+ </span>
524
+ &nbsp;
525
+ <a target="_blank" href="https://segmentfault.com/u/wscats" title="Programming Language">
526
+ <span>wscats</span>
527
+ </a>
528
+ </div>
529
+ <div class="details">
530
+ 当我第一次看到这一题目的时候，我是比较震惊的，分析了下很不合我们编程的常理，并认为不大可能，变量a要在同一情况下要同时等于1，2和3这三个值，这是天方夜谭吧，不亚于哥德巴赫1+1=1的猜想吧，不过一切皆有可...
531
+ </div>
532
+ </div>
533
+ </li>
534
+
535
+ <li>
536
+ <div class="info">
537
+ <div class="rank">
538
+ <span title="Ranking 16">16</span>
539
+ <a href="https://segmentfault.com/a/1190000040883655" target="_blank" title="一条曲线的诞生">一条曲线的诞生</a>
540
+ </div>
541
+ <div class="sub-title followers">
542
+
543
+ <span title="Stargazers Count">
544
+ <svg width="12" height="12" viewBox="0 0 16 16">
545
+ <g fill="none" fill-rule="evenodd">
546
+ <path d="M0 0h16v16H0z"/>
547
+ <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"/>
548
+ </g>
549
+ </svg>
550
+ <span>4</span>
551
+ </span>
552
+ &nbsp;
553
+ <a target="_blank" href="https://segmentfault.com/u/alisecued" title="Programming Language">
554
+ <span>ES2049</span>
555
+ </a>
556
+ </div>
557
+ <div class="details">
558
+ 在图可视化领域有着大量和曲线相关的场景，然而想要得到一条合适的曲线却并不容易。笔者最近在使用 AntV G6 的时候，就遇到了这样的问题。形状扁平，箭头方向和连线趋势不一致，连线起点和终点被隐藏等等，好看的...
559
+ </div>
560
+ </div>
561
+ </li>
562
+
563
+ <li>
564
+ <div class="info">
565
+ <div class="rank">
566
+ <span title="Ranking 17">17</span>
567
+ <a href="https://segmentfault.com/a/1190000040882505" target="_blank" title="议程全览 | 中国开源年会线上会议 + 多地线下聚会即将启幕">议程全览 | 中国开源年会线上会议 + 多地线下聚会即将启幕</a>
568
+ </div>
569
+ <div class="sub-title followers">
570
+
571
+ <span title="Stargazers Count">
572
+ <svg width="12" height="12" viewBox="0 0 16 16">
573
+ <g fill="none" fill-rule="evenodd">
574
+ <path d="M0 0h16v16H0z"/>
575
+ <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"/>
576
+ </g>
577
+ </svg>
578
+ <span>4</span>
579
+ </span>
580
+ &nbsp;
581
+ <a target="_blank" href="https://segmentfault.com/u/writers" title="Programming Language">
582
+ <span>思否编辑部</span>
583
+ </a>
584
+ </div>
585
+ <div class="details">
586
+ 作为业界最具影响力的开源盛事，2021 中国开源年会（COSCon&#39;21）将于 10 月 30-31 日由开源社举办。今年的中国开源年会分为线上论坛，和线下聚会两部分。
587
+ </div>
588
+ </div>
589
+ </li>
590
+
591
+ <li>
592
+ <div class="info">
593
+ <div class="rank">
594
+ <span title="Ranking 18">18</span>
595
+ <a href="https://segmentfault.com/a/1190000040879529" target="_blank" title="TransX 一个小巧玲珑的 vue 组件切换动画库">TransX 一个小巧玲珑的 vue 组件切换动画库</a>
596
+ </div>
597
+ <div class="sub-title followers">
598
+
599
+ <span title="Stargazers Count">
600
+ <svg width="12" height="12" viewBox="0 0 16 16">
601
+ <g fill="none" fill-rule="evenodd">
602
+ <path d="M0 0h16v16H0z"/>
603
+ <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"/>
604
+ </g>
605
+ </svg>
606
+ <span>5</span>
607
+ </span>
608
+ &nbsp;
609
+ <a target="_blank" href="https://segmentfault.com/u/tnfe" title="Programming Language">
610
+ <span>TNTWEB</span>
611
+ </a>
612
+ </div>
613
+ <div class="details">
614
+ TNTWeb - 全称腾讯新闻前端团队，组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。目前团队主要支持腾讯新闻各业务的前端开发，业务开发之余也积累沉淀了一些前端基础设施，赋能...
615
+ </div>
616
+ </div>
617
+ </li>
618
+
619
+ <li>
620
+ <div class="info">
621
+ <div class="rank">
622
+ <span title="Ranking 19">19</span>
623
+ <a href="https://segmentfault.com/a/1190000040895843" target="_blank" title="把程序做成系统服务">把程序做成系统服务</a>
624
+ </div>
625
+ <div class="sub-title followers">
626
+
627
+ <span title="Stargazers Count">
628
+ <svg width="12" height="12" viewBox="0 0 16 16">
629
+ <g fill="none" fill-rule="evenodd">
630
+ <path d="M0 0h16v16H0z"/>
631
+ <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"/>
632
+ </g>
633
+ </svg>
634
+ <span>3</span>
635
+ </span>
636
+ &nbsp;
637
+ <a target="_blank" href="https://segmentfault.com/u/jamesfancy" title="Programming Language">
638
+ <span>边城</span>
639
+ </a>
640
+ </div>
641
+ <div class="details">
642
+ 写程序，难免会遇到需要做成系统服务的需求。Windows 下写系统服务需要实现一些特定的接口，做起来有一定难度，所以不少程序采用了 近似的备选方案 —— 做成带系统任务栏图标的桌面应用。但是，服务之所以是服务，...
643
+ </div>
644
+ </div>
645
+ </li>
646
+
647
+ <li>
648
+ <div class="info">
649
+ <div class="rank">
650
+ <span title="Ranking 20">20</span>
651
+ <a href="https://segmentfault.com/a/1190000040893884" target="_blank" title="三步带你玩转前端Vue装饰器">三步带你玩转前端Vue装饰器</a>
652
+ </div>
653
+ <div class="sub-title followers">
654
+
655
+ <span title="Stargazers Count">
656
+ <svg width="12" height="12" viewBox="0 0 16 16">
657
+ <g fill="none" fill-rule="evenodd">
658
+ <path d="M0 0h16v16H0z"/>
659
+ <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"/>
660
+ </g>
661
+ </svg>
662
+ <span>10</span>
663
+ </span>
664
+ &nbsp;
665
+ <a target="_blank" href="https://segmentfault.com/u/coollsk" title="Programming Language">
666
+ <span>CoolLsk</span>
667
+ </a>
668
+ </div>
669
+ <div class="details">
670
+ 什么是装饰器装饰器怎么封装装饰器能干啥1、什么是装饰器看个例子就懂了eg： {代码...} 反正就是各种嵌套，看起来代码很脓肿,接下来看看【装饰器】怎么写↓ {代码...} 现在看到的写法是不是凉快了很多，没有多层嵌...
671
+ </div>
672
+ </div>
673
+ </li>
674
+
675
+ <li>
676
+ <div class="info">
677
+ <div class="rank">
678
+ <span title="Ranking 21">21</span>
679
+ <a href="https://segmentfault.com/a/1190000040875138" target="_blank" title="听说你的对象有个”环“？怎么发现的呢？">听说你的对象有个”环“？怎么发现的呢？</a>
680
+ </div>
681
+ <div class="sub-title followers">
682
+
683
+ <span title="Stargazers Count">
684
+ <svg width="12" height="12" viewBox="0 0 16 16">
685
+ <g fill="none" fill-rule="evenodd">
686
+ <path d="M0 0h16v16H0z"/>
687
+ <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"/>
688
+ </g>
689
+ </svg>
690
+ <span>3</span>
691
+ </span>
692
+ &nbsp;
693
+ <a target="_blank" href="https://segmentfault.com/u/116263" title="Programming Language">
694
+ <span>前端胖头鱼</span>
695
+ </a>
696
+ </div>
697
+ <div class="details">
698
+ 1. 手写62+方法学习JavaScript底层原理判断一个对象是否存在循环引用已收录至 手写各种源码实现，也可以直接点击isCyclic快速查看，目前已有62+手写实现，欢迎一起来学习喔。2. 不得不说的循环引用如下图: 相信曾...
699
+ </div>
700
+ </div>
701
+ </li>
702
+
703
+ <li>
704
+ <div class="info">
705
+ <div class="rank">
706
+ <span title="Ranking 22">22</span>
707
+ <a href="https://segmentfault.com/a/1190000040897976" target="_blank" title="CSS 实现搜索相关交互">CSS 实现搜索相关交互</a>
708
+ </div>
709
+ <div class="sub-title followers">
710
+
711
+ <span title="Stargazers Count">
712
+ <svg width="12" height="12" viewBox="0 0 16 16">
713
+ <g fill="none" fill-rule="evenodd">
714
+ <path d="M0 0h16v16H0z"/>
715
+ <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"/>
716
+ </g>
717
+ </svg>
718
+ <span>6</span>
719
+ </span>
720
+ &nbsp;
721
+ <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
722
+ <span>XboxYan</span>
723
+ </a>
724
+ </div>
725
+ <div class="details">
726
+ 先来看一个很常见的搜索框的交互，大概逻辑如下当输入框有内容才显示清除按钮点击清除按钮输入框会清空当输入框有内容并且处于聚焦情况下才显示搜索结果浮层点击搜索条目后关闭整个搜索结果浮层示意如下看着逻辑...
727
+ </div>
728
+ </div>
729
+ </li>
730
+
731
+ <li>
732
+ <div class="info">
733
+ <div class="rank">
734
+ <span title="Ranking 23">23</span>
735
+ <a href="https://segmentfault.com/a/1190000040882446" target="_blank" title="谷歌总是找不到想要的内容？学会这14个技巧，立马就能找到">谷歌总是找不到想要的内容？学会这14个技巧，立马就能找到</a>
736
+ </div>
737
+ <div class="sub-title followers">
738
+
739
+ <span title="Stargazers Count">
740
+ <svg width="12" height="12" viewBox="0 0 16 16">
741
+ <g fill="none" fill-rule="evenodd">
742
+ <path d="M0 0h16v16H0z"/>
743
+ <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"/>
744
+ </g>
745
+ </svg>
746
+ <span>4</span>
747
+ </span>
748
+ &nbsp;
749
+ <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
750
+ <span>前端小智</span>
751
+ </a>
752
+ </div>
753
+ <div class="details">
754
+ 有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。
755
+ </div>
756
+ </div>
757
+ </li>
758
+
759
+ <li>
760
+ <div class="info">
761
+ <div class="rank">
762
+ <span title="Ranking 24">24</span>
763
+ <a href="https://segmentfault.com/a/1190000040896846" target="_blank" title="PHP 性能终极 Debug - 生成火焰图">PHP 性能终极 Debug - 生成火焰图</a>
764
+ </div>
765
+ <div class="sub-title followers">
766
+
767
+ <span title="Stargazers Count">
768
+ <svg width="12" height="12" viewBox="0 0 16 16">
769
+ <g fill="none" fill-rule="evenodd">
770
+ <path d="M0 0h16v16H0z"/>
771
+ <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"/>
772
+ </g>
773
+ </svg>
774
+ <span>2</span>
775
+ </span>
776
+ &nbsp;
777
+ <a target="_blank" href="https://segmentfault.com/u/portlouis" title="Programming Language">
778
+ <span>路易港</span>
779
+ </a>
780
+ </div>
781
+ <div class="details">
782
+ 2012 年刚开始学习 PHP，那个时候的 PHP 应用很简单，没有太多复杂的设计模式，像依赖注入，工厂模式这些还几乎没有，Reflection API 那时也才刚出来，一个 PHP 应用就是一些包了前端代码的脚本文件，正是因为 PH...
783
+ </div>
784
+ </div>
785
+ </li>
786
+
787
+ <li>
788
+ <div class="info">
789
+ <div class="rank">
790
+ <span title="Ranking 25">25</span>
791
+ <a href="https://segmentfault.com/a/1190000040889773" target="_blank" title="【一文秒懂】带你彻底搞懂范式与反范式数据库设计">【一文秒懂】带你彻底搞懂范式与反范式数据库设计</a>
792
+ </div>
793
+ <div class="sub-title followers">
794
+
795
+ <span title="Stargazers Count">
796
+ <svg width="12" height="12" viewBox="0 0 16 16">
797
+ <g fill="none" fill-rule="evenodd">
798
+ <path d="M0 0h16v16H0z"/>
799
+ <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"/>
800
+ </g>
801
+ </svg>
802
+ <span>5</span>
803
+ </span>
804
+ &nbsp;
805
+ <a target="_blank" href="https://segmentfault.com/u/crazycodes" title="Programming Language">
806
+ <span>CrazyCodes</span>
807
+ </a>
808
+ </div>
809
+ <div class="details">
810
+ 范式就是前辈通过不断的验证给到的为了建立冗余较小、结构合理的数据库，是设计数据库必须遵循的一定规则，在关系型数据库中这种规格叫做范式，本篇不仅说明范式设计，也会给到一些例子，带着各位一起分析给到的...
811
+ </div>
812
+ </div>
813
+ </li>
814
+
815
+ <li>
816
+ <div class="info">
817
+ <div class="rank">
818
+ <span title="Ranking 26">26</span>
819
+ <a href="https://segmentfault.com/a/1190000040889788" target="_blank" title="Hermes将成为React Native默认的JS引擎">Hermes将成为React Native默认的JS引擎</a>
820
+ </div>
821
+ <div class="sub-title followers">
822
+
823
+ <span title="Stargazers Count">
824
+ <svg width="12" height="12" viewBox="0 0 16 16">
825
+ <g fill="none" fill-rule="evenodd">
826
+ <path d="M0 0h16v16H0z"/>
827
+ <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"/>
828
+ </g>
829
+ </svg>
830
+ <span>1</span>
831
+ </span>
832
+ &nbsp;
833
+ <a target="_blank" href="https://segmentfault.com/u/xiangzhihong" title="Programming Language">
834
+ <span>xiangzhihong</span>
835
+ </a>
836
+ </div>
837
+ <div class="details">
838
+ 自 2019 年首次发布以来，小巧轻便的 JavaScript 引擎 Hermes 在社区中的名气越来越高，很多的框架也开始支持Hermes。作为 React Native 领域高人气元框架的缔造者，Expo 团队此前公布了对 Hermes 的实验性支持。...
839
+ </div>
840
+ </div>
841
+ </li>
842
+
843
+ <li>
844
+ <div class="info">
845
+ <div class="rank">
846
+ <span title="Ranking 27">27</span>
847
+ <a href="https://segmentfault.com/a/1190000040896809" target="_blank" title="Go 日常开发常备第三方库和工具">Go 日常开发常备第三方库和工具</a>
848
+ </div>
849
+ <div class="sub-title followers">
850
+
851
+ <span title="Stargazers Count">
852
+ <svg width="12" height="12" viewBox="0 0 16 16">
853
+ <g fill="none" fill-rule="evenodd">
854
+ <path d="M0 0h16v16H0z"/>
855
+ <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"/>
856
+ </g>
857
+ </svg>
858
+ <span>3</span>
859
+ </span>
860
+ &nbsp;
861
+ <a target="_blank" href="https://segmentfault.com/u/crossoverjie" title="Programming Language">
862
+ <span>crossoverJie</span>
863
+ </a>
864
+ </div>
865
+ <div class="details">
866
+ 不知不觉写 Go 已经快一年了，上线了大大小小好几个项目；心态也经历了几轮变化。因为我个人大概前五年时间写的是 Java ，中途写过一年多的 Python，所以刚接触到 Go 时的感觉如下图：既没有 Java 的生态，也没有...
867
+ </div>
868
+ </div>
869
+ </li>
870
+
871
+ <li>
872
+ <div class="info">
873
+ <div class="rank">
874
+ <span title="Ranking 28">28</span>
875
+ <a href="https://segmentfault.com/a/1190000040877833" target="_blank" title="如何给普通图片加上水波纹【shader 奇技淫巧】">如何给普通图片加上水波纹【shader 奇技淫巧】</a>
876
+ </div>
877
+ <div class="sub-title followers">
878
+
879
+ <span title="Stargazers Count">
880
+ <svg width="12" height="12" viewBox="0 0 16 16">
881
+ <g fill="none" fill-rule="evenodd">
882
+ <path d="M0 0h16v16H0z"/>
883
+ <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"/>
884
+ </g>
885
+ </svg>
886
+ <span>2</span>
887
+ </span>
888
+ &nbsp;
889
+ <a target="_blank" href="https://segmentfault.com/u/master_yoda" title="Programming Language">
890
+ <span>这是上帝的杰作</span>
891
+ </a>
892
+ </div>
893
+ <div class="details">
894
+ 3D场景实现水波纹，我们往往会使用网格去模拟真实的水流动，无论是简单的三角函数或是gerstner wave。然后通过真实物理渲染（base physcal render）来实现其中的折射与反射。这些实现可以参考《GPU GEMS》第一版。
895
+ </div>
896
+ </div>
897
+ </li>
898
+
907
899
  </ul>
908
900
  <div class="footer">
909
- <p>
901
+ <div>
910
902
  <a href="https://github.com/jaywcjlove/github-rank/network" target="_blank">
911
903
  <img src="https://img.shields.io/github/forks/jaywcjlove/github-rank.svg">
912
904
  </a>
@@ -919,8 +911,8 @@
919
911
  <a href="https://unpkg.com/@wcj/github-rank/web/index.html" target="_blank">
920
912
  <img src="https://img.shields.io/npm/v/@wcj/github-rank.svg?label=unpkg">
921
913
  </a>
922
- </p>
923
- <div class="time">Last cache created on 2021/10/31 by Github API v3.</div>
914
+ </div>
915
+ <div class="time">Last cache created on 2021/11/4 by Github API v3.</div>
924
916
  Create by <a href="https://github.com/jaywcjlove" target="_blank">小弟调调™</a>.
925
917
  </div>
926
918
  </body>