@wcj/github-rank 22.10.24 → 22.10.26

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 (40) hide show
  1. package/README.md +2 -2
  2. package/dist/repos.json +32597 -32589
  3. package/dist/trending-daily.json +168 -168
  4. package/dist/trending-monthly.json +159 -159
  5. package/dist/trending-weekly.json +171 -171
  6. package/dist/users.china.json +13571 -14135
  7. package/dist/users.json +1215 -1113
  8. package/package.json +4 -6
  9. package/web/data/repos.json +32597 -32589
  10. package/web/data/trending-daily.json +168 -168
  11. package/web/data/trending-monthly.json +159 -159
  12. package/web/data/trending-weekly.json +171 -171
  13. package/web/data/users.china.json +13571 -14135
  14. package/web/data/users.json +1215 -1113
  15. package/web/index.html +843 -849
  16. package/web/repos.html +3951 -3961
  17. package/web/trending-monthly.html +138 -144
  18. package/web/trending-weekly.html +150 -152
  19. package/web/trending.html +149 -147
  20. package/web/users.china.html +3890 -3896
  21. package/dist/36kr.json +0 -6963
  22. package/dist/sifou-daily.json +0 -47
  23. package/dist/sifou-monthly.json +0 -272
  24. package/dist/sifou-weekly.json +0 -272
  25. package/dist/toutiao-30.json +0 -1
  26. package/dist/toutiao-7.json +0 -1
  27. package/dist/toutiao-90.json +0 -1
  28. package/web/data/36kr.json +0 -6963
  29. package/web/data/sifou-daily.json +0 -47
  30. package/web/data/sifou-monthly.json +0 -272
  31. package/web/data/sifou-weekly.json +0 -272
  32. package/web/data/toutiao-30.json +0 -1
  33. package/web/data/toutiao-7.json +0 -1
  34. package/web/data/toutiao-90.json +0 -1
  35. package/web/sifou-daily.html +0 -304
  36. package/web/sifou-monthly.html +0 -1004
  37. package/web/sifou-weekly.html +0 -1004
  38. package/web/toutiao-30.html +0 -171
  39. package/web/toutiao-7.html +0 -171
  40. package/web/toutiao-90.html +0 -171
package/web/sifou-monthly.html DELETED
@@ -1,1004 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
- <link rel="icon" type="image/x-icon" href="https://github.githubassets.com/favicon.ico">
8
- <title> Segmentfault 思否热门 </title>
9
- <meta name="description" content="Segmentfault 思否热门">
10
- <style>
11
- [data-color-mode*='dark'] {
12
- --color-fg-default: #c9d1d9;
13
- --color-fg-muted: #8b949e;
14
- --color-fg-subtle: #484f58;
15
- --color-accent-fg: #58a6ff;
16
- --color-accent-emphasis: #1f6feb;
17
- --color-link-hover: #58a6ff;
18
- --color-tab-fg: #494949;
19
- --color-border: #e2e2e2;
20
- --color-neutral-muted: rgba(110,118,129,0.4);
21
- }
22
- [data-color-mode*='light'] {
23
- --color-fg-default: #24292f;
24
- --color-fg-muted: #57606a;
25
- --color-fg-subtle: #6e7781;
26
- --color-accent-fg: #0969da;
27
- --color-accent-emphasis: #0969da;
28
- --color-link-hover: #58a6ff;
29
- --color-tab-fg: #e2e2e2;
30
- --color-border: #000;
31
- --color-neutral-muted: rgba(175,184,193,0.2);
32
- }
33
- </style>
34
- <style>
35
- * { box-sizing: border-box; }
36
- html, body, ul, li, h1 { margin: 0; padding: 0 }
37
- 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; }
38
- ul { list-style: none; }
39
-
40
- a { color: var(--color-accent-fg); text-decoration: none; transition: all .2s ease-in; }
41
- a:hover { color: var(--color-link-hover); text-decoration: underline; }
42
- a.github-corner:hover .octo-arm { animation: octocat-wave 560ms infinite linear; }
43
- a.github-corner svg { fill: #f1f1f1; color: #000; position: absolute; top: 0; border: 0; right: 0; z-index: 99; width: 70px; height: 70px; }
44
- a.github-corner { position: fixed; z-index: 9999; top: 0; right: 0; }
45
-
46
- .title { padding: 32px 20px 10px 20px; font-size: 32px; display: flex; }
47
- .title a svg { display: block; }
48
- .title a { color: var(--color-accent-fg); display: inline-block; margin-left: 10px; }
49
- .time, .footer { padding: 5px 20px 2px 20px; font-size: 12px; color: #adadad; }
50
- .tabs { padding: 0 20px 5px 20px;}
51
- .tabs a { background: var(--color-tab-fg); display: inline-block; border-radius: 2px; margin: 2px 0; padding: 2px 5px; font-size: 12px; line-height: 16px; color: var(--color-accent-fg); }
52
- .tabs a.active { background: #333; color: #efefef; }
53
- .tabs a:hover:not(.active) { background: #efefef; }
54
- .footer { padding: 0 20px 30px 20px; font-size: 12px; color: #adadad; }
55
- .footer .time { padding: 0; }
56
- .list { text-align: left; padding-bottom: 10px; margin: 0 15px; }
57
- .list img { width: 36px; height: 36px; border-radius: 3px; display: block; margin: 0 auto; background-color: #e2e2e2; border: 0; overflow: hidden; }
58
- .list li { padding: 10px; transition: all .3s; }
59
- .list li.rank-title { margin: 0; padding: 3px 0 0 7px; margin-bottom: 10px; border-radius: 5px; font-size: 12px; line-height: 16px; }
60
- .list li.rank-title > a { margin-right: 10px; }
61
- .list li.rank-title:hover { background: transparent; }
62
- .list li:last-child, .list li.rank-title { border-bottom: 0; }
63
- .list li:hover { background: var(--color-neutral-muted); }
64
- .list li > div { display: table-cell; vertical-align: top; font-size: 14px; }
65
- .list li div.rank span { font-weight: bold; }
66
- .list li div.details { padding: 2px 0 0 0; font-size: 12px; float: left; color: var(--color-fg-muted); }
67
- .list li div.details a { color: #b9b9b9; transition: all .3s; }
68
- .list li div.details a:hover { color: #1600ff; }
69
- .list li div.details a:hover svg { fill: #1600ff; }
70
- .list li div.details * { vertical-align: middle; }
71
- .list li div.details .localtion { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 150px; display: inline-block; height: 14px; }
72
- .list li div.details svg { width: 12px; height: 12px; margin-top: 0; margin-right: 2px; fill: #b9b9b9; display: inline-block; }
73
- .list li > div.info { width: 100%; }
74
- .list li > div.info i { color: #717171; }
75
- .list li > div.info a:hover i { color: #333; }
76
- .list li div.sub-title { color: var(--color-theme-text); margin: 4px 0 0 0; }
77
- .list li div.avatar { padding-right: 10px; }
78
- @keyframes octocat-wave {
79
- 0%,100%{-webkit-transform:rotate(0); transform:rotate(0);}
80
- 20%,60%{-webkit-transform:rotate(-25deg); transform:rotate(-25deg);}
81
- 40%,80%{-webkit-transform:rotate(10deg); transform:rotate(10deg);}
82
- }
83
- @media screen and (max-width: 479px) {
84
- .title { padding-top: 16px; font-size: 21px; }
85
- }
86
- </style>
87
-
88
-
89
- <style>
90
- .list .select .active { color: var(--color-theme-text); font-weight: bold; border-bottom: 1px dotted var(--color-border);}
91
- </style>
92
-
93
-
94
-
95
-
96
- <script src="https://unpkg.com/@wcj/dark-mode"></script>
97
- </head>
98
- <body>
99
- <a href="https://github.com/jaywcjlove/github-rank" target="_blank" class="github-corner">
100
- <svg viewBox="0 0 250 250">
101
- <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
102
- <path class="octo-arm" fill="currentColor" style="transform-origin: 130px 106px;" d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"></path>
103
- <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>
104
- </svg>
105
- </a>
106
- <h1 class="title">
107
- <dark-mode permanent></dark-mode>
108
- Segmentfault 思否热门
109
-
110
-
111
-
112
-
113
- <a target="_blank" href="https://segmentfault.com/hottest">
114
- <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>
115
- </a>
116
-
117
-
118
- </h1>
119
- <div class="time">Last cache created on 2022/10/24 by
120
-
121
-
122
-
123
-
124
- <a href="https://segmentfault.com/hottest">SegmentFault</a>
125
-
126
- .
127
- </div>
128
- <div class="tabs">
129
- <a class="" href="index.html">Users</a>
130
- <a class="" href="repos.html">Repos</a>
131
- <a class="" href="trending.html">Trending</a>
132
- <a class="active" href="sifou-daily.html">Sifou</a>
133
- <a class="" href="toutiao-7.html">开发头条</a>
134
- </div>
135
- <ul class="list">
136
- <li class="rank-title">
137
- <span class="select">
138
- <a class="" href="sifou-daily.html">日热门</a>
139
- <a class="" href="sifou-weekly.html">周热门</a>
140
- <a class="active" href="sifou-monthly.html">月热门</a>
141
- </span>
142
- </li>
143
-
144
- <li>
145
- <div class="info">
146
- <div class="rank">
147
- <span title="Ranking 1">1</span>
148
- <a href="https://segmentfault.com/a/1190000042547772" target="_blank" title="CSS transition 小技巧！如何保留 hover 的状态？">CSS transition 小技巧！如何保留 hover 的状态？</a>
149
- </div>
150
- <div class="sub-title followers">
151
-
152
- <span title="Stargazers Count">
153
- <svg width="12" height="12" viewBox="0 0 16 16">
154
- <g fill="none" fill-rule="evenodd">
155
- <path d="M0 0h16v16H0z"/>
156
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
157
- </g>
158
- </svg>
159
- <span>28</span>
160
- </span>
161
- &nbsp;
162
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
163
- <span>XboxYan</span>
164
- </a>
165
- </div>
166
- <div class="details">
167
- 欢迎关注我的公众号：前端侦探通常情况下，hover 是无法保存状态的。鼠标移入触发额外样式，一旦移出就还原了 {代码...} 这就意味着，如果需要保留hover的状态，可能就不得不借助JS了，比如下面是某某书院的首页...
168
- </div>
169
- </div>
170
- </li>
171
-
172
- <li>
173
- <div class="info">
174
- <div class="rank">
175
- <span title="Ranking 2">2</span>
176
- <a href="https://segmentfault.com/a/1190000042643893" target="_blank" title="CSS 绘制一只思否猫">CSS 绘制一只思否猫</a>
177
- </div>
178
- <div class="sub-title followers">
179
-
180
- <span title="Stargazers Count">
181
- <svg width="12" height="12" viewBox="0 0 16 16">
182
- <g fill="none" fill-rule="evenodd">
183
- <path d="M0 0h16v16H0z"/>
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"/>
185
- </g>
186
- </svg>
187
- <span>24</span>
188
- </span>
189
- &nbsp;
190
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
191
- <span>XboxYan</span>
192
- </a>
193
- </div>
194
- <div class="details">
195
- 欢迎关注我的公众号：前端侦探练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只思否猫？思否猫，SegmentFault 思否的吉祥物，是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt;...
196
- </div>
197
- </div>
198
- </li>
199
-
200
- <li>
201
- <div class="info">
202
- <div class="rank">
203
- <span title="Ranking 3">3</span>
204
- <a href="https://segmentfault.com/a/1190000042584599" target="_blank" title="一个被忽略的前端细分领域">一个被忽略的前端细分领域</a>
205
- </div>
206
- <div class="sub-title followers">
207
-
208
- <span title="Stargazers Count">
209
- <svg width="12" height="12" viewBox="0 0 16 16">
210
- <g fill="none" fill-rule="evenodd">
211
- <path d="M0 0h16v16H0z"/>
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"/>
213
- </g>
214
- </svg>
215
- <span>16</span>
216
- </span>
217
- &nbsp;
218
- <a target="_blank" href="https://segmentfault.com/u/kasong" title="Programming Language">
219
- <span>卡颂</span>
220
- </a>
221
- </div>
222
- <div class="details">
223
- 大家好，我卡颂。回想下你学新技术的主要途径是什么？看书？看技术文档？看博文？看视频？归纳起来，无外乎文字、视频两种形式。从纸媒时代到互联网时代，再到移动互联网时代，虽然信息的载体发生变化，但信息的...
224
- </div>
225
- </div>
226
- </li>
227
-
228
- <li>
229
- <div class="info">
230
- <div class="rank">
231
- <span title="Ranking 4">4</span>
232
- <a href="https://segmentfault.com/a/1190000042632786" target="_blank" title="思否猫拼接怪编辑器">思否猫拼接怪编辑器</a>
233
- </div>
234
- <div class="sub-title followers">
235
-
236
- <span title="Stargazers Count">
237
- <svg width="12" height="12" viewBox="0 0 16 16">
238
- <g fill="none" fill-rule="evenodd">
239
- <path d="M0 0h16v16H0z"/>
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"/>
241
- </g>
242
- </svg>
243
- <span>11</span>
244
- </span>
245
- &nbsp;
246
- <a target="_blank" href="https://segmentfault.com/u/wangzc996" title="Programming Language">
247
- <span>JenK</span>
248
- </a>
249
- </div>
250
- <div class="details">
251
- 1024程序员节马上就要来了，我们借着这个机会实现一个社区的吉祥物思否猫的编辑器，暂时起名【思否猫拼接怪】,唯一的遗憾就是素材不是精确到胳膊腿的
252
- </div>
253
- </div>
254
- </li>
255
-
256
- <li>
257
- <div class="info">
258
- <div class="rank">
259
- <span title="Ranking 5">5</span>
260
- <a href="https://segmentfault.com/a/1190000042581816" target="_blank" title="35+，如果面试让我手写红黑树！">35+，如果面试让我手写红黑树！</a>
261
- </div>
262
- <div class="sub-title followers">
263
-
264
- <span title="Stargazers Count">
265
- <svg width="12" height="12" viewBox="0 0 16 16">
266
- <g fill="none" fill-rule="evenodd">
267
- <path d="M0 0h16v16H0z"/>
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"/>
269
- </g>
270
- </svg>
271
- <span>12</span>
272
- </span>
273
- &nbsp;
274
- <a target="_blank" href="https://segmentfault.com/u/fuzhengwei" title="Programming Language">
275
- <span>小傅哥</span>
276
- </a>
277
- </div>
278
- <div class="details">
279
- 为啥，面试官那么喜欢让你聊聊 HashMap？因为 HashMap 涉及的东西广，用到的数据结构多，问题延展性好，一个 HashMap 就能聊下来80%的数据结构了。而且面试 HashMap 能通过你对红黑树的了解定位出你哪个级别的研...
280
- </div>
281
- </div>
282
- </li>
283
-
284
- <li>
285
- <div class="info">
286
- <div class="rank">
287
- <span title="Ranking 6">6</span>
288
- <a href="https://segmentfault.com/a/1190000042647263" target="_blank" title="SegmentFault 思否 Top Writer 榜单｜2022年第三季度">SegmentFault 思否 Top Writer 榜单｜2022年第三季度</a>
289
- </div>
290
- <div class="sub-title followers">
291
-
292
- <span title="Stargazers Count">
293
- <svg width="12" height="12" viewBox="0 0 16 16">
294
- <g fill="none" fill-rule="evenodd">
295
- <path d="M0 0h16v16H0z"/>
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"/>
297
- </g>
298
- </svg>
299
- <span>13</span>
300
- </span>
301
- &nbsp;
302
- <a target="_blank" href="https://segmentfault.com/u/segmentfault" title="Programming Language">
303
- <span>SegmentFault思否</span>
304
- </a>
305
- </div>
306
- <div class="details">
307
- 他们是社区的基石，也是行业发展、技术发展的源动力。他们是一群活跃在 SegmentFault 思否社区的一群卓越的开发者，他们热衷于分享知识与经验，他们布道技术与未来，他们让众多开发者受益，他们叫「Top Writer」。
308
- </div>
309
- </div>
310
- </li>
311
-
312
- <li>
313
- <div class="info">
314
- <div class="rank">
315
- <span title="Ranking 7">7</span>
316
- <a href="https://segmentfault.com/a/1190000042653533" target="_blank" title="超强的苹果官网滚动文字特效实现">超强的苹果官网滚动文字特效实现</a>
317
- </div>
318
- <div class="sub-title followers">
319
-
320
- <span title="Stargazers Count">
321
- <svg width="12" height="12" viewBox="0 0 16 16">
322
- <g fill="none" fill-rule="evenodd">
323
- <path d="M0 0h16v16H0z"/>
324
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
325
- </g>
326
- </svg>
327
- <span>16</span>
328
- </span>
329
- &nbsp;
330
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
331
- <span>chokcoco</span>
332
- </a>
333
- </div>
334
- <div class="details">
335
- 每年的苹果新产品发布，其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都非常有意思，今年 iPhone 14 Pro 的介绍页不例外。最近，刚好有朋友问到，其对官网的一段文字特效特别感兴趣，看适用简单却...
336
- </div>
337
- </div>
338
- </li>
339
-
340
- <li>
341
- <div class="info">
342
- <div class="rank">
343
- <span title="Ranking 8">8</span>
344
- <a href="https://segmentfault.com/a/1190000042598682" target="_blank" title="致「独一无二」的你｜1024 程序员节系列活动启动">致「独一无二」的你｜1024 程序员节系列活动启动</a>
345
- </div>
346
- <div class="sub-title followers">
347
-
348
- <span title="Stargazers Count">
349
- <svg width="12" height="12" viewBox="0 0 16 16">
350
- <g fill="none" fill-rule="evenodd">
351
- <path d="M0 0h16v16H0z"/>
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"/>
353
- </g>
354
- </svg>
355
- <span>15</span>
356
- </span>
357
- &nbsp;
358
- <a target="_blank" href="https://segmentfault.com/u/segmentfault" title="Programming Language">
359
- <span>SegmentFault思否</span>
360
- </a>
361
- </div>
362
- <div class="details">
363
- 不知道刚过完小长假的大家，有没有假期模式切换回（连上 7 天班的）工作模式呢？😶‍🌫️ 10 月可不止有国庆节，还有咱们开发者群体不可错过的「1024 程序员节」～
364
- </div>
365
- </div>
366
- </li>
367
-
368
- <li>
369
- <div class="info">
370
- <div class="rank">
371
- <span title="Ranking 9">9</span>
372
- <a href="https://segmentfault.com/a/1190000042589774" target="_blank" title="超强的纯 CSS 鼠标点击拖拽效果">超强的纯 CSS 鼠标点击拖拽效果</a>
373
- </div>
374
- <div class="sub-title followers">
375
-
376
- <span title="Stargazers Count">
377
- <svg width="12" height="12" viewBox="0 0 16 16">
378
- <g fill="none" fill-rule="evenodd">
379
- <path d="M0 0h16v16H0z"/>
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"/>
381
- </g>
382
- </svg>
383
- <span>14</span>
384
- </span>
385
- &nbsp;
386
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
387
- <span>chokcoco</span>
388
- </a>
389
- </div>
390
- <div class="details">
391
- 背景鼠标拖拽元素移动，算是一个稍微有点点复杂的交互。而在本文，我们就将打破常规，向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。在之前的这篇文章中 -- 不可思议的纯 CSS 实现鼠标跟随...
392
- </div>
393
- </div>
394
- </li>
395
-
396
- <li>
397
- <div class="info">
398
- <div class="rank">
399
- <span title="Ranking 10">10</span>
400
- <a href="https://segmentfault.com/a/1190000042554569" target="_blank" title="漫画 | Serverless + Data，让后端告别搬砖！">漫画 | Serverless + Data，让后端告别搬砖！</a>
401
- </div>
402
- <div class="sub-title followers">
403
-
404
- <span title="Stargazers Count">
405
- <svg width="12" height="12" viewBox="0 0 16 16">
406
- <g fill="none" fill-rule="evenodd">
407
- <path d="M0 0h16v16H0z"/>
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"/>
409
- </g>
410
- </svg>
411
- <span>12</span>
412
- </span>
413
- &nbsp;
414
- <a target="_blank" href="https://segmentfault.com/u/suicidal_romantic_scoundrel" title="Programming Language">
415
- <span>六一</span>
416
- </a>
417
- </div>
418
- <div class="details">
419
- 文章来源：码农翻身上古时期，软件系统都比较简单。随着时代的发展，系统越来越复杂。移动互联网时代来临，流量越来越大，尤其是搞促销活动的时候。促销活动过后，领导到机房视察。很快， 云计算时代来临了！又到...
420
- </div>
421
- </div>
422
- </li>
423
-
424
- <li>
425
- <div class="info">
426
- <div class="rank">
427
- <span title="Ranking 11">11</span>
428
- <a href="https://segmentfault.com/a/1190000042550192" target="_blank" title="见微知著，从两道有意思的 CSS 面试题，考察你的基础">见微知著，从两道有意思的 CSS 面试题，考察你的基础</a>
429
- </div>
430
- <div class="sub-title followers">
431
-
432
- <span title="Stargazers Count">
433
- <svg width="12" height="12" viewBox="0 0 16 16">
434
- <g fill="none" fill-rule="evenodd">
435
- <path d="M0 0h16v16H0z"/>
436
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
437
- </g>
438
- </svg>
439
- <span>11</span>
440
- </span>
441
- &nbsp;
442
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
443
- <span>chokcoco</span>
444
- </a>
445
- </div>
446
- <div class="details">
447
- 今天在论坛，有看到这样一道非常有意思的题目，简单的代码如下： {代码...} 样式如下： {代码...} 试问，标签 &lt;p&gt; 内的文字的颜色，是 green 还是 blue 呢？有趣的是，这里的最终结果是蓝色，也就是 color:...
448
- </div>
449
- </div>
450
- </li>
451
-
452
- <li>
453
- <div class="info">
454
- <div class="rank">
455
- <span title="Ranking 12">12</span>
456
- <a href="https://segmentfault.com/a/1190000042537837" target="_blank" title="当你 git push 时，极狐GitLab上发生了什么？">当你 git push 时，极狐GitLab上发生了什么？</a>
457
- </div>
458
- <div class="sub-title followers">
459
-
460
- <span title="Stargazers Count">
461
- <svg width="12" height="12" viewBox="0 0 16 16">
462
- <g fill="none" fill-rule="evenodd">
463
- <path d="M0 0h16v16H0z"/>
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"/>
465
- </g>
466
- </svg>
467
- <span>11</span>
468
- </span>
469
- &nbsp;
470
- <a target="_blank" href="https://segmentfault.com/u/jihu_gitlab" title="Programming Language">
471
- <span>极狐GitLab</span>
472
- </a>
473
- </div>
474
- <div class="details">
475
- 本文来自：李振楠 极狐(GitLab) 研发工程师勇士，你可曾好奇过 Git 和极狐GitLab 是如何工作的？现在，拿起你心爱的 IDE，和我们一起踏上探索之旅吧！基础知识在开始旅程之前，我们需要做三分钟的知识储备，计时...
476
- </div>
477
- </div>
478
- </li>
479
-
480
- <li>
481
- <div class="info">
482
- <div class="rank">
483
- <span title="Ranking 13">13</span>
484
- <a href="https://segmentfault.com/a/1190000042567232" target="_blank" title="Segmentfault 思否首届「猫猫杯」线上代码共创大赛正式启动，快来 DIY 你的专属表情包！">Segmentfault 思否首届「猫猫杯」线上代码共创大赛正式启动，快来 DIY 你的专属表情包！</a>
485
- </div>
486
- <div class="sub-title followers">
487
-
488
- <span title="Stargazers Count">
489
- <svg width="12" height="12" viewBox="0 0 16 16">
490
- <g fill="none" fill-rule="evenodd">
491
- <path d="M0 0h16v16H0z"/>
492
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
493
- </g>
494
- </svg>
495
- <span>8</span>
496
- </span>
497
- &nbsp;
498
- <a target="_blank" href="https://segmentfault.com/u/segmentfault" title="Programming Language">
499
- <span>SegmentFault思否</span>
500
- </a>
501
- </div>
502
- <div class="details">
503
- 关注我们的朋友们都知道，SegmentFault 思否的吉祥物是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt;)独角猫，也是社区的首席摸鱼官。
504
- </div>
505
- </div>
506
- </li>
507
-
508
- <li>
509
- <div class="info">
510
- <div class="rank">
511
- <span title="Ranking 14">14</span>
512
- <a href="https://segmentfault.com/a/1190000042562451" target="_blank" title="5 种瀑布流场景的实现原理解析">5 种瀑布流场景的实现原理解析</a>
513
- </div>
514
- <div class="sub-title followers">
515
-
516
- <span title="Stargazers Count">
517
- <svg width="12" height="12" viewBox="0 0 16 16">
518
- <g fill="none" fill-rule="evenodd">
519
- <path d="M0 0h16v16H0z"/>
520
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
521
- </g>
522
- </svg>
523
- <span>9</span>
524
- </span>
525
- &nbsp;
526
- <a target="_blank" href="https://segmentfault.com/u/o2team" title="Programming Language">
527
- <span>凹凸实验室</span>
528
- </a>
529
- </div>
530
- <div class="details">
531
- 一、背景本文介绍 5 种瀑布流场景的实现，大家可以根据自身的需求场景进行选择。5 种场景分别是：瀑布流特点纵向+高度排序纯 CSS 多列实现，是最简单的瀑布流写法纵向+高度排序+根据宽度自适应列数通过 JS 根据屏...
532
- </div>
533
- </div>
534
- </li>
535
-
536
- <li>
537
- <div class="info">
538
- <div class="rank">
539
- <span title="Ranking 15">15</span>
540
- <a href="https://segmentfault.com/a/1190000042613900" target="_blank" title="10分钟教你写一个数据库">10分钟教你写一个数据库</a>
541
- </div>
542
- <div class="sub-title followers">
543
-
544
- <span title="Stargazers Count">
545
- <svg width="12" height="12" viewBox="0 0 16 16">
546
- <g fill="none" fill-rule="evenodd">
547
- <path d="M0 0h16v16H0z"/>
548
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
549
- </g>
550
- </svg>
551
- <span>8</span>
552
- </span>
553
- &nbsp;
554
- <a target="_blank" href="https://segmentfault.com/u/goudantiezhuerzi" title="Programming Language">
555
- <span>艾小仙</span>
556
- </a>
557
- </div>
558
- <div class="details">
559
- 今天教大家借助一款框架快速实现一个数据库，这个框架就是Calcite，下面会带大家通过两个例子快速教会大家怎么实现，一个是可以通过 SQL 语句的方式可以直接查询文件内容，第二个是模拟 Mysql 查询功能，以及最后...
560
- </div>
561
- </div>
562
- </li>
563
-
564
- <li>
565
- <div class="info">
566
- <div class="rank">
567
- <span title="Ranking 16">16</span>
568
- <a href="https://segmentfault.com/a/1190000042671467" target="_blank" title="面向猫猫编程，SegmentFault 思否 1024 程序员节惊喜彩蛋攻略来啦！">面向猫猫编程，SegmentFault 思否 1024 程序员节惊喜彩蛋攻略来啦！</a>
569
- </div>
570
- <div class="sub-title followers">
571
-
572
- <span title="Stargazers Count">
573
- <svg width="12" height="12" viewBox="0 0 16 16">
574
- <g fill="none" fill-rule="evenodd">
575
- <path d="M0 0h16v16H0z"/>
576
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
577
- </g>
578
- </svg>
579
- <span>36</span>
580
- </span>
581
- &nbsp;
582
- <a target="_blank" href="https://segmentfault.com/u/segmentfault" title="Programming Language">
583
- <span>SegmentFault思否</span>
584
- </a>
585
- </div>
586
- <div class="details">
587
- 在 SegmentFault 思否 1024 程序员节系列活动 中，思否小姐姐为大家预留了一个悬念，还没有公布第三站：惊喜彩蛋「喵了个喵」的具体玩法，思否小姐姐也收到了不少咨询活动玩法的私信，惊喜彩蛋哪里找？趣味游戏怎...
588
- </div>
589
- </div>
590
- </li>
591
-
592
- <li>
593
- <div class="info">
594
- <div class="rank">
595
- <span title="Ranking 17">17</span>
596
- <a href="https://segmentfault.com/a/1190000042569583" target="_blank" title="这些js原型及原型链面试题你能做对几道">这些js原型及原型链面试题你能做对几道</a>
597
- </div>
598
- <div class="sub-title followers">
599
-
600
- <span title="Stargazers Count">
601
- <svg width="12" height="12" viewBox="0 0 16 16">
602
- <g fill="none" fill-rule="evenodd">
603
- <path d="M0 0h16v16H0z"/>
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"/>
605
- </g>
606
- </svg>
607
- <span>18</span>
608
- </span>
609
- &nbsp;
610
- <a target="_blank" href="https://segmentfault.com/u/fuheidekele" title="Programming Language">
611
- <span>腹黑的可乐</span>
612
- </a>
613
- </div>
614
- <div class="details">
615
- 一、前言在面试过程中，频频被原型相关知识问住，每次回答都支支吾吾。后来有家非常心仪的公司，在二面时，果不其然，又问原型了！我痛下决心用了两天时间钻研了下原型，弄明白后发现世界都明亮了，原来这么简单 ...
616
- </div>
617
- </div>
618
- </li>
619
-
620
- <li>
621
- <div class="info">
622
- <div class="rank">
623
- <span title="Ranking 18">18</span>
624
- <a href="https://segmentfault.com/a/1190000042563735" target="_blank" title="[极致用户体验] 为什么建议2022年不用&#34;等比设计稿&#34;+rem，而用&#34;灵活设计稿&#34;+px">[极致用户体验] 为什么建议2022年不用&#34;等比设计稿&#34;+rem，而用&#34;灵活设计稿&#34;+px</a>
625
- </div>
626
- <div class="sub-title followers">
627
-
628
- <span title="Stargazers Count">
629
- <svg width="12" height="12" viewBox="0 0 16 16">
630
- <g fill="none" fill-rule="evenodd">
631
- <path d="M0 0h16v16H0z"/>
632
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
633
- </g>
634
- </svg>
635
- <span>7</span>
636
- </span>
637
- &nbsp;
638
- <a target="_blank" href="https://segmentfault.com/u/hullqin" title="Programming Language">
639
- <span>HullQin</span>
640
- </a>
641
- </div>
642
- <div class="details">
643
- 我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏...
644
- </div>
645
- </div>
646
- </li>
647
-
648
- <li>
649
- <div class="info">
650
- <div class="rank">
651
- <span title="Ranking 19">19</span>
652
- <a href="https://segmentfault.com/a/1190000042535848" target="_blank" title="特约专访 | 思否 CEO 高阳带你了解 Code For Better _ Hackathon 冠军团队背后的故事">特约专访 | 思否 CEO 高阳带你了解 Code For Better _ Hackathon 冠军团队背后的故事</a>
653
- </div>
654
- <div class="sub-title followers">
655
-
656
- <span title="Stargazers Count">
657
- <svg width="12" height="12" viewBox="0 0 16 16">
658
- <g fill="none" fill-rule="evenodd">
659
- <path d="M0 0h16v16H0z"/>
660
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
661
- </g>
662
- </svg>
663
- <span>4</span>
664
- </span>
665
- &nbsp;
666
- <a target="_blank" href="https://segmentfault.com/u/segmentfault" title="Programming Language">
667
- <span>SegmentFault思否</span>
668
- </a>
669
- </div>
670
- <div class="details">
671
- 2022 年 9 月 16 日，2022 Code For Better_Hackathon 正式落下帷幕。大赛以 2022 Google 开发者大会 “CODE FOR BETTER_ ” 为参赛主题，在“共码未来”的号召下，本届 Hackathon 大赛涌现出一大批针对多类型现实难...
672
- </div>
673
- </div>
674
- </li>
675
-
676
- <li>
677
- <div class="info">
678
- <div class="rank">
679
- <span title="Ranking 20">20</span>
680
- <a href="https://segmentfault.com/a/1190000042587022" target="_blank" title="浅谈移动端单屏解决方案">浅谈移动端单屏解决方案</a>
681
- </div>
682
- <div class="sub-title followers">
683
-
684
- <span title="Stargazers Count">
685
- <svg width="12" height="12" viewBox="0 0 16 16">
686
- <g fill="none" fill-rule="evenodd">
687
- <path d="M0 0h16v16H0z"/>
688
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
689
- </g>
690
- </svg>
691
- <span>5</span>
692
- </span>
693
- &nbsp;
694
- <a target="_blank" href="https://segmentfault.com/u/deepred5" title="Programming Language">
695
- <span>深红</span>
696
- </a>
697
- </div>
698
- <div class="details">
699
- 文中我强调了移动端适配是对屏幕宽度进行缩放：对于普通的流式布局(长屏幕页面)，页面内容是可以上下滚动的。屏幕小，一屏幕看到的东西虽然变少，但是用户可以通过手势滚动页面，继续浏览下一屏的内容。因此在常...
700
- </div>
701
- </div>
702
- </li>
703
-
704
- <li>
705
- <div class="info">
706
- <div class="rank">
707
- <span title="Ranking 21">21</span>
708
- <a href="https://segmentfault.com/a/1190000042582695" target="_blank" title="「数字无限人生」：技术人的精彩时代">「数字无限人生」：技术人的精彩时代</a>
709
- </div>
710
- <div class="sub-title followers">
711
-
712
- <span title="Stargazers Count">
713
- <svg width="12" height="12" viewBox="0 0 16 16">
714
- <g fill="none" fill-rule="evenodd">
715
- <path d="M0 0h16v16H0z"/>
716
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
717
- </g>
718
- </svg>
719
- <span>3</span>
720
- </span>
721
- &nbsp;
722
- <a target="_blank" href="https://segmentfault.com/u/writers" title="Programming Language">
723
- <span>思否编辑部</span>
724
- </a>
725
- </div>
726
- <div class="details">
727
- 18世纪，蒸汽机的发明，引发第一次科技革命19世纪，电力的发明， 引发第二次科技革命20世纪，电脑、能源、新材料、空间、生物等新兴技术，引发第三次科技革命21世纪，电子和信息技术，引发第四次科技革命2022，数...
728
- </div>
729
- </div>
730
- </li>
731
-
732
- <li>
733
- <div class="info">
734
- <div class="rank">
735
- <span title="Ranking 22">22</span>
736
- <a href="https://segmentfault.com/a/1190000042539876" target="_blank" title="面试说：聊聊JavaScript中的数据类型">面试说：聊聊JavaScript中的数据类型</a>
737
- </div>
738
- <div class="sub-title followers">
739
-
740
- <span title="Stargazers Count">
741
- <svg width="12" height="12" viewBox="0 0 16 16">
742
- <g fill="none" fill-rule="evenodd">
743
- <path d="M0 0h16v16H0z"/>
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"/>
745
- </g>
746
- </svg>
747
- <span>9</span>
748
- </span>
749
- &nbsp;
750
- <a target="_blank" href="https://segmentfault.com/u/fengguangping" title="Programming Language">
751
- <span>Gopal</span>
752
- </a>
753
- </div>
754
- <div class="details">
755
- 答：Javascript 中的数据类型包括原始类型和引用类型。其中原始类型包括 null、undefined、boolean、string、symbol、bigInt、number。引用类型指的是 Object。
756
- </div>
757
- </div>
758
- </li>
759
-
760
- <li>
761
- <div class="info">
762
- <div class="rank">
763
- <span title="Ranking 23">23</span>
764
- <a href="https://segmentfault.com/a/1190000042566696" target="_blank" title="2022 SegmentFault 思否程序员大调查">2022 SegmentFault 思否程序员大调查</a>
765
- </div>
766
- <div class="sub-title followers">
767
-
768
- <span title="Stargazers Count">
769
- <svg width="12" height="12" viewBox="0 0 16 16">
770
- <g fill="none" fill-rule="evenodd">
771
- <path d="M0 0h16v16H0z"/>
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"/>
773
- </g>
774
- </svg>
775
- <span>5</span>
776
- </span>
777
- &nbsp;
778
- <a target="_blank" href="https://segmentfault.com/u/segmentfault" title="Programming Language">
779
- <span>SegmentFault思否</span>
780
- </a>
781
- </div>
782
- <div class="details">
783
- 程序员，作为用代码创造世界的工作者，在大众眼里往往是「加班狂」的典型代表；在面对激烈的职场竞争与压力时，作为程序员的你会选择 卷 or 躺平呢？
784
- </div>
785
- </div>
786
- </li>
787
-
788
- <li>
789
- <div class="info">
790
- <div class="rank">
791
- <span title="Ranking 24">24</span>
792
- <a href="https://segmentfault.com/a/1190000042595978" target="_blank" title="快速了解 inert 属性">快速了解 inert 属性</a>
793
- </div>
794
- <div class="sub-title followers">
795
-
796
- <span title="Stargazers Count">
797
- <svg width="12" height="12" viewBox="0 0 16 16">
798
- <g fill="none" fill-rule="evenodd">
799
- <path d="M0 0h16v16H0z"/>
800
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
801
- </g>
802
- </svg>
803
- <span>5</span>
804
- </span>
805
- &nbsp;
806
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
807
- <span>XboxYan</span>
808
- </a>
809
- </div>
810
- <div class="details">
811
- 欢迎关注我的公众号：前端侦探介绍一个全新的、和用户行为息息相关的属性：inert。HTMLElement.inert - Web APIs | MDN (mozilla.org)有了这个属性，可以更加轻易地控制很多交互行为，花几分钟了解一下吧一、iner...
812
- </div>
813
- </div>
814
- </li>
815
-
816
- <li>
817
- <div class="info">
818
- <div class="rank">
819
- <span title="Ranking 25">25</span>
820
- <a href="https://segmentfault.com/a/1190000042627779" target="_blank" title="喜获 Code for Better _ Hackathon 二等奖，简单复盘 &amp; 礼物返图">喜获 Code for Better _ Hackathon 二等奖，简单复盘 &amp; 礼物返图</a>
821
- </div>
822
- <div class="sub-title followers">
823
-
824
- <span title="Stargazers Count">
825
- <svg width="12" height="12" viewBox="0 0 16 16">
826
- <g fill="none" fill-rule="evenodd">
827
- <path d="M0 0h16v16H0z"/>
828
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
829
- </g>
830
- </svg>
831
- <span>8</span>
832
- </span>
833
- &nbsp;
834
- <a target="_blank" href="https://segmentfault.com/u/meathill" title="Programming Language">
835
- <span>Meathill</span>
836
- </a>
837
- </div>
838
- <div class="details">
839
- 2022 年 9 月 16 日，以 CODE FOR BETTER_ 为主题，以 2022 Google 开发者大会为契机举办的 Hackathon 大赛进行了线上颁奖仪式。多支优秀参赛队伍在赛程中展示了出色的开发能力，为心中所期待的美好生活，挑战开...
840
- </div>
841
- </div>
842
- </li>
843
-
844
- <li>
845
- <div class="info">
846
- <div class="rank">
847
- <span title="Ranking 26">26</span>
848
- <a href="https://segmentfault.com/a/1190000042622557" target="_blank" title="5个常见的JavaScript内存错误">5个常见的JavaScript内存错误</a>
849
- </div>
850
- <div class="sub-title followers">
851
-
852
- <span title="Stargazers Count">
853
- <svg width="12" height="12" viewBox="0 0 16 16">
854
- <g fill="none" fill-rule="evenodd">
855
- <path d="M0 0h16v16H0z"/>
856
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
857
- </g>
858
- </svg>
859
- <span>7</span>
860
- </span>
861
- &nbsp;
862
- <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
863
- <span>前端小智</span>
864
- </a>
865
- </div>
866
- <div class="details">
867
- 本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。更多开源作品请看 GitHub [链接] ，包含一线大厂面试完整考点、资料以及我的系列文章。
868
- </div>
869
- </div>
870
- </li>
871
-
872
- <li>
873
- <div class="info">
874
- <div class="rank">
875
- <span title="Ranking 27">27</span>
876
- <a href="https://segmentfault.com/a/1190000042549062" target="_blank" title="一个新视角：前端框架们都卷错方向了？">一个新视角：前端框架们都卷错方向了？</a>
877
- </div>
878
- <div class="sub-title followers">
879
-
880
- <span title="Stargazers Count">
881
- <svg width="12" height="12" viewBox="0 0 16 16">
882
- <g fill="none" fill-rule="evenodd">
883
- <path d="M0 0h16v16H0z"/>
884
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
885
- </g>
886
- </svg>
887
- <span>4</span>
888
- </span>
889
- &nbsp;
890
- <a target="_blank" href="https://segmentfault.com/u/kasong" title="Programming Language">
891
- <span>卡颂</span>
892
- </a>
893
- </div>
894
- <div class="details">
895
- 大家好，我卡颂。近几年，前端领域出现了很多新框架，比如Svelte、 Solid.js、Astro、Qwik等。伴随他们出现的，还有很多高大上的新概念 —— 运行时/编译时框架、Islands架构、Selective Hydration......这些概念的...
896
- </div>
897
- </div>
898
- </li>
899
-
900
- <li>
901
- <div class="info">
902
- <div class="rank">
903
- <span title="Ranking 28">28</span>
904
- <a href="https://segmentfault.com/a/1190000042589829" target="_blank" title="华为王泽锋：协作创新、开源的魅力所在">华为王泽锋：协作创新、开源的魅力所在</a>
905
- </div>
906
- <div class="sub-title followers">
907
-
908
- <span title="Stargazers Count">
909
- <svg width="12" height="12" viewBox="0 0 16 16">
910
- <g fill="none" fill-rule="evenodd">
911
- <path d="M0 0h16v16H0z"/>
912
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
913
- </g>
914
- </svg>
915
- <span>2</span>
916
- </span>
917
- &nbsp;
918
- <a target="_blank" href="https://segmentfault.com/u/writers" title="Programming Language">
919
- <span>思否编辑部</span>
920
- </a>
921
- </div>
922
- <div class="details">
923
- 受访者：王泽锋（Kevin Wang），华为云云原生开源负责人，CNCF大使，CNCF技术监督委员会贡献者，Kubernetes资深维护者，KubeEdge、Volcano、Karmada等多个CNCF项目发起人，目前负责华为云在云原生开源社区的整体...
924
- </div>
925
- </div>
926
- </li>
927
-
928
- <li>
929
- <div class="info">
930
- <div class="rank">
931
- <span title="Ranking 29">29</span>
932
- <a href="https://segmentfault.com/a/1190000042598225" target="_blank" title="前端框架：性能与灵活性的取舍">前端框架：性能与灵活性的取舍</a>
933
- </div>
934
- <div class="sub-title followers">
935
-
936
- <span title="Stargazers Count">
937
- <svg width="12" height="12" viewBox="0 0 16 16">
938
- <g fill="none" fill-rule="evenodd">
939
- <path d="M0 0h16v16H0z"/>
940
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
941
- </g>
942
- </svg>
943
- <span>4</span>
944
- </span>
945
- &nbsp;
946
- <a target="_blank" href="https://segmentfault.com/u/kasong" title="Programming Language">
947
- <span>卡颂</span>
948
- </a>
949
- </div>
950
- <div class="details">
951
- 大家好，我卡颂。针对前端框架，长期存在着各种纷争。其中争论比较大的是下面两项：性能之争API设计之争比如，各大新兴框架都会掏出benchmark证明自己优秀的运行时性能，在这些benchmark中React通常是垫底的存在...
952
- </div>
953
- </div>
954
- </li>
955
-
956
- <li>
957
- <div class="info">
958
- <div class="rank">
959
- <span title="Ranking 30">30</span>
960
- <a href="https://segmentfault.com/a/1190000042643627" target="_blank" title="利用思否猫素材实现一个连连看小游戏">利用思否猫素材实现一个连连看小游戏</a>
961
- </div>
962
- <div class="sub-title followers">
963
-
964
- <span title="Stargazers Count">
965
- <svg width="12" height="12" viewBox="0 0 16 16">
966
- <g fill="none" fill-rule="evenodd">
967
- <path d="M0 0h16v16H0z"/>
968
- <path fill="#9E9E9E" d="M4.234 6.693v7.243H2.881c-.486 0-.881-.492-.881-1.095V7.875c0-.63.412-1.182.88-1.182h1.354zm3.688-3.7C8.01 2.404 8.49 1.99 9.018 2c.754.015 1.204.663 1.36.983.284.585.292 1.549.097 2.167-.177.56-.586 1.296-.586 1.296h3.066c.324 0 .625.164.826.449.204.29.27.668.178 1.011l-1.387 5.183c-.126.499-.544.847-1.016.847H5.53V6.693c1.385-.309 2.236-2.632 2.392-3.7z"/>
969
- </g>
970
- </svg>
971
- <span>8</span>
972
- </span>
973
- &nbsp;
974
- <a target="_blank" href="https://segmentfault.com/u/xishui_5ac9a340a5484" title="Programming Language">
975
- <span>夕水</span>
976
- </a>
977
- </div>
978
- <div class="details">
979
- vue3实现一个思否猫连连看小游戏本文参与了1024程序员节，欢迎正在阅读的你也加入。通过本文，你将学到:vue3的核心语法vue3的状态管理工具pinia的用法sass的用法基本算法canvas实现一个下雪的效果，一些canvas的...
980
- </div>
981
- </div>
982
- </li>
983
-
984
- </ul>
985
- <div class="footer">
986
- <div>
987
- <a href="https://github.com/jaywcjlove/github-rank/network" target="_blank">
988
- <img src="https://img.shields.io/github/forks/jaywcjlove/github-rank.svg">
989
- </a>
990
- <a href="https://github.com/jaywcjlove/github-rank/stargazers" target="_blank">
991
- <img src="https://img.shields.io/github/stars/jaywcjlove/github-rank.svg">
992
- </a>
993
- <a href="https://www.npmjs.com/package/@wcj/github-rank" target="_blank">
994
- <img src="https://img.shields.io/npm/v/@wcj/github-rank.svg">
995
- </a>
996
- <a href="https://unpkg.com/@wcj/github-rank/web/index.html" target="_blank">
997
- <img src="https://img.shields.io/npm/v/@wcj/github-rank.svg?label=unpkg">
998
- </a>
999
- </div>
1000
- <div class="time">Last cache created on 2022/10/24 by Github API v3.</div>
1001
- Create by <a href="https://github.com/jaywcjlove" target="_blank">小弟调调™</a>.
1002
- </div>
1003
- </body>
1004
- </html>