@wcj/github-rank 22.10.23 → 22.10.25

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 +27218 -27209
  3. package/dist/trending-daily.json +171 -171
  4. package/dist/trending-monthly.json +153 -153
  5. package/dist/trending-weekly.json +173 -173
  6. package/dist/users.china.json +2933 -3393
  7. package/dist/users.json +2681 -2579
  8. package/package.json +4 -6
  9. package/web/data/repos.json +27218 -27209
  10. package/web/data/trending-daily.json +171 -171
  11. package/web/data/trending-monthly.json +153 -153
  12. package/web/data/trending-weekly.json +173 -173
  13. package/web/data/users.china.json +2933 -3393
  14. package/web/data/users.json +2681 -2579
  15. package/web/index.html +1718 -1724
  16. package/web/repos.html +3363 -3369
  17. package/web/trending-monthly.html +138 -144
  18. package/web/trending-weekly.html +154 -152
  19. package/web/trending.html +146 -156
  20. package/web/users.china.html +2545 -2551
  21. package/dist/36kr.json +0 -6963
  22. package/dist/sifou-daily.json +0 -20
  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 -20
  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 -220
  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/23 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/1190000042529771" target="_blank" title="前端性能优化(图文并茂，通俗易懂)">前端性能优化(图文并茂，通俗易懂)</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>26</span>
160
- </span>
161
- &nbsp;
162
- <a target="_blank" href="https://segmentfault.com/u/xiaolizideyitian" title="Programming Language">
163
- <span>寒水寺一禅</span>
164
- </a>
165
- </div>
166
- <div class="details">
167
- 默认情况下，我们静态导入的所有模块都会添加到初始捆绑包中。使用默认 ES2015 导入语法 导入的模块将静态导入。import module from &#39;module&#39;
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/1190000042547772" target="_blank" title="CSS transition 小技巧！如何保留 hover 的状态？">CSS transition 小技巧！如何保留 hover 的状态？</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>28</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
- 欢迎关注我的公众号：前端侦探通常情况下，hover 是无法保存状态的。鼠标移入触发额外样式，一旦移出就还原了 {代码...} 这就意味着，如果需要保留hover的状态，可能就不得不借助JS了，比如下面是某某书院的首页...
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/1190000042643893" target="_blank" title="CSS 绘制一只思否猫">CSS 绘制一只思否猫</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>23</span>
216
- </span>
217
- &nbsp;
218
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
219
- <span>XboxYan</span>
220
- </a>
221
- </div>
222
- <div class="details">
223
- 欢迎关注我的公众号：前端侦探练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只思否猫？思否猫，SegmentFault 思否的吉祥物，是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt;...
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/1190000042584599" 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>16</span>
244
- </span>
245
- &nbsp;
246
- <a target="_blank" href="https://segmentfault.com/u/kasong" title="Programming Language">
247
- <span>卡颂</span>
248
- </a>
249
- </div>
250
- <div class="details">
251
- 大家好，我卡颂。回想下你学新技术的主要途径是什么？看书？看技术文档？看博文？看视频？归纳起来，无外乎文字、视频两种形式。从纸媒时代到互联网时代，再到移动互联网时代，虽然信息的载体发生变化，但信息的...
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/1190000042632786" target="_blank" title="思否猫拼接怪编辑器">思否猫拼接怪编辑器</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>11</span>
272
- </span>
273
- &nbsp;
274
- <a target="_blank" href="https://segmentfault.com/u/wangzc996" title="Programming Language">
275
- <span>JenK</span>
276
- </a>
277
- </div>
278
- <div class="details">
279
- 1024程序员节马上就要来了，我们借着这个机会实现一个社区的吉祥物思否猫的编辑器，暂时起名【思否猫拼接怪】,唯一的遗憾就是素材不是精确到胳膊腿的
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/1190000042581816" target="_blank" title="35+，如果面试让我手写红黑树！">35+，如果面试让我手写红黑树！</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>12</span>
300
- </span>
301
- &nbsp;
302
- <a target="_blank" href="https://segmentfault.com/u/fuzhengwei" title="Programming Language">
303
- <span>小傅哥</span>
304
- </a>
305
- </div>
306
- <div class="details">
307
- 为啥，面试官那么喜欢让你聊聊 HashMap？因为 HashMap 涉及的东西广，用到的数据结构多，问题延展性好，一个 HashMap 就能聊下来80%的数据结构了。而且面试 HashMap 能通过你对红黑树的了解定位出你哪个级别的研...
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/1190000042598682" target="_blank" title="致「独一无二」的你｜1024 程序员节系列活动启动">致「独一无二」的你｜1024 程序员节系列活动启动</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>14</span>
328
- </span>
329
- &nbsp;
330
- <a target="_blank" href="https://segmentfault.com/u/segmentfault" title="Programming Language">
331
- <span>SegmentFault思否</span>
332
- </a>
333
- </div>
334
- <div class="details">
335
- 不知道刚过完小长假的大家，有没有假期模式切换回（连上 7 天班的）工作模式呢？😶‍🌫️ 10 月可不止有国庆节，还有咱们开发者群体不可错过的「1024 程序员节」～
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/1190000042589774" target="_blank" title="超强的纯 CSS 鼠标点击拖拽效果">超强的纯 CSS 鼠标点击拖拽效果</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>14</span>
356
- </span>
357
- &nbsp;
358
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
359
- <span>chokcoco</span>
360
- </a>
361
- </div>
362
- <div class="details">
363
- 背景鼠标拖拽元素移动，算是一个稍微有点点复杂的交互。而在本文，我们就将打破常规，向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。在之前的这篇文章中 -- 不可思议的纯 CSS 实现鼠标跟随...
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/1190000042554569" target="_blank" title="漫画 | Serverless + Data，让后端告别搬砖！">漫画 | Serverless + Data，让后端告别搬砖！</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>12</span>
384
- </span>
385
- &nbsp;
386
- <a target="_blank" href="https://segmentfault.com/u/suicidal_romantic_scoundrel" title="Programming Language">
387
- <span>六一</span>
388
- </a>
389
- </div>
390
- <div class="details">
391
- 文章来源：码农翻身上古时期，软件系统都比较简单。随着时代的发展，系统越来越复杂。移动互联网时代来临，流量越来越大，尤其是搞促销活动的时候。促销活动过后，领导到机房视察。很快， 云计算时代来临了！又到...
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/1190000042550192" target="_blank" title="见微知著，从两道有意思的 CSS 面试题，考察你的基础">见微知著，从两道有意思的 CSS 面试题，考察你的基础</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>11</span>
412
- </span>
413
- &nbsp;
414
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
415
- <span>chokcoco</span>
416
- </a>
417
- </div>
418
- <div class="details">
419
- 今天在论坛，有看到这样一道非常有意思的题目，简单的代码如下： {代码...} 样式如下： {代码...} 试问，标签 &lt;p&gt; 内的文字的颜色，是 green 还是 blue 呢？有趣的是，这里的最终结果是蓝色，也就是 color:...
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/1190000042537837" target="_blank" title="当你 git push 时，极狐GitLab上发生了什么？">当你 git push 时，极狐GitLab上发生了什么？</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/jihu_gitlab" title="Programming Language">
443
- <span>极狐GitLab</span>
444
- </a>
445
- </div>
446
- <div class="details">
447
- 本文来自：李振楠 极狐(GitLab) 研发工程师勇士，你可曾好奇过 Git 和极狐GitLab 是如何工作的？现在，拿起你心爱的 IDE，和我们一起踏上探索之旅吧！基础知识在开始旅程之前，我们需要做三分钟的知识储备，计时...
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/1190000042647263" target="_blank" title="SegmentFault 思否 Top Writer 榜单｜2022年第三季度">SegmentFault 思否 Top Writer 榜单｜2022年第三季度</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/segmentfault" title="Programming Language">
471
- <span>SegmentFault思否</span>
472
- </a>
473
- </div>
474
- <div class="details">
475
- 他们是社区的基石，也是行业发展、技术发展的源动力。他们是一群活跃在 SegmentFault 思否社区的一群卓越的开发者，他们热衷于分享知识与经验，他们布道技术与未来，他们让众多开发者受益，他们叫「Top Writer」。
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/1190000042653533" target="_blank" title="超强的苹果官网滚动文字特效实现">超强的苹果官网滚动文字特效实现</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>13</span>
496
- </span>
497
- &nbsp;
498
- <a target="_blank" href="https://segmentfault.com/u/chokcoco" title="Programming Language">
499
- <span>chokcoco</span>
500
- </a>
501
- </div>
502
- <div class="details">
503
- 每年的苹果新产品发布，其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都非常有意思，今年 iPhone 14 Pro 的介绍页不例外。最近，刚好有朋友问到，其对官网的一段文字特效特别感兴趣，看适用简单却...
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/1190000042567232" target="_blank" title="Segmentfault 思否首届「猫猫杯」线上代码共创大赛正式启动，快来 DIY 你的专属表情包！">Segmentfault 思否首届「猫猫杯」线上代码共创大赛正式启动，快来 DIY 你的专属表情包！</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>7</span>
552
- </span>
553
- &nbsp;
554
- <a target="_blank" href="https://segmentfault.com/u/segmentfault" title="Programming Language">
555
- <span>SegmentFault思否</span>
556
- </a>
557
- </div>
558
- <div class="details">
559
- 关注我们的朋友们都知道，SegmentFault 思否的吉祥物是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt;)独角猫，也是社区的首席摸鱼官。
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/1190000042613900" target="_blank" title="10分钟教你写一个数据库">10分钟教你写一个数据库</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>8</span>
580
- </span>
581
- &nbsp;
582
- <a target="_blank" href="https://segmentfault.com/u/goudantiezhuerzi" title="Programming Language">
583
- <span>艾小仙</span>
584
- </a>
585
- </div>
586
- <div class="details">
587
- 今天教大家借助一款框架快速实现一个数据库，这个框架就是Calcite，下面会带大家通过两个例子快速教会大家怎么实现，一个是可以通过 SQL 语句的方式可以直接查询文件内容，第二个是模拟 Mysql 查询功能，以及最后...
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/1190000042531829" target="_blank" title="技术征文中奖名单公布 ｜ 浅谈 Java 进阶之路">技术征文中奖名单公布 ｜ 浅谈 Java 进阶之路</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>5</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
- 哈喽各位社区的小伙伴！SegmentFault 思否技术征文丨浅谈 Java 进阶之路 如约开奖啦~话不多说，我们直接来揭晓获奖名单！强势插播一条预告：技术征文活动每月都有哦，大家多多关注「SegmentFault思否」参与技术征...
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/1190000042535848" target="_blank" title="特约专访 | 思否 CEO 高阳带你了解 Code For Better _ Hackathon 冠军团队背后的故事">特约专访 | 思否 CEO 高阳带你了解 Code For Better _ Hackathon 冠军团队背后的故事</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>4</span>
692
- </span>
693
- &nbsp;
694
- <a target="_blank" href="https://segmentfault.com/u/segmentfault" title="Programming Language">
695
- <span>SegmentFault思否</span>
696
- </a>
697
- </div>
698
- <div class="details">
699
- 2022 年 9 月 16 日，2022 Code For Better_Hackathon 正式落下帷幕。大赛以 2022 Google 开发者大会 “CODE FOR BETTER_ ” 为参赛主题，在“共码未来”的号召下，本届 Hackathon 大赛涌现出一大批针对多类型现实难...
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/1190000042587022" 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>5</span>
720
- </span>
721
- &nbsp;
722
- <a target="_blank" href="https://segmentfault.com/u/deepred5" title="Programming Language">
723
- <span>深红</span>
724
- </a>
725
- </div>
726
- <div class="details">
727
- 文中我强调了移动端适配是对屏幕宽度进行缩放：对于普通的流式布局(长屏幕页面)，页面内容是可以上下滚动的。屏幕小，一屏幕看到的东西虽然变少，但是用户可以通过手势滚动页面，继续浏览下一屏的内容。因此在常...
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/1190000042582695" target="_blank" title="「数字无限人生」：技术人的精彩时代">「数字无限人生」：技术人的精彩时代</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>3</span>
748
- </span>
749
- &nbsp;
750
- <a target="_blank" href="https://segmentfault.com/u/writers" title="Programming Language">
751
- <span>思否编辑部</span>
752
- </a>
753
- </div>
754
- <div class="details">
755
- 18世纪，蒸汽机的发明，引发第一次科技革命19世纪，电力的发明， 引发第二次科技革命20世纪，电脑、能源、新材料、空间、生物等新兴技术，引发第三次科技革命21世纪，电子和信息技术，引发第四次科技革命2022，数...
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/1190000042539876" target="_blank" title="面试说：聊聊JavaScript中的数据类型">面试说：聊聊JavaScript中的数据类型</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>9</span>
776
- </span>
777
- &nbsp;
778
- <a target="_blank" href="https://segmentfault.com/u/fengguangping" title="Programming Language">
779
- <span>Gopal</span>
780
- </a>
781
- </div>
782
- <div class="details">
783
- 答：Javascript 中的数据类型包括原始类型和引用类型。其中原始类型包括 null、undefined、boolean、string、symbol、bigInt、number。引用类型指的是 Object。
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/1190000042566696" target="_blank" title="2022 SegmentFault 思否程序员大调查">2022 SegmentFault 思否程序员大调查</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/segmentfault" title="Programming Language">
807
- <span>SegmentFault思否</span>
808
- </a>
809
- </div>
810
- <div class="details">
811
- 程序员，作为用代码创造世界的工作者，在大众眼里往往是「加班狂」的典型代表；在面对激烈的职场竞争与压力时，作为程序员的你会选择 卷 or 躺平呢？
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/1190000042595978" target="_blank" title="快速了解 inert 属性">快速了解 inert 属性</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>5</span>
832
- </span>
833
- &nbsp;
834
- <a target="_blank" href="https://segmentfault.com/u/xboxyan" title="Programming Language">
835
- <span>XboxYan</span>
836
- </a>
837
- </div>
838
- <div class="details">
839
- 欢迎关注我的公众号：前端侦探介绍一个全新的、和用户行为息息相关的属性：inert。HTMLElement.inert - Web APIs | MDN (mozilla.org)有了这个属性，可以更加轻易地控制很多交互行为，花几分钟了解一下吧一、iner...
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/1190000042627779" target="_blank" title="喜获 Code for Better _ Hackathon 二等奖，简单复盘 &amp; 礼物返图">喜获 Code for Better _ Hackathon 二等奖，简单复盘 &amp; 礼物返图</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>8</span>
860
- </span>
861
- &nbsp;
862
- <a target="_blank" href="https://segmentfault.com/u/meathill" title="Programming Language">
863
- <span>Meathill</span>
864
- </a>
865
- </div>
866
- <div class="details">
867
- 2022 年 9 月 16 日，以 CODE FOR BETTER_ 为主题，以 2022 Google 开发者大会为契机举办的 Hackathon 大赛进行了线上颁奖仪式。多支优秀参赛队伍在赛程中展示了出色的开发能力，为心中所期待的美好生活，挑战开...
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/1190000042622557" target="_blank" title="5个常见的JavaScript内存错误">5个常见的JavaScript内存错误</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>6</span>
888
- </span>
889
- &nbsp;
890
- <a target="_blank" href="https://segmentfault.com/u/minnanitkong" title="Programming Language">
891
- <span>前端小智</span>
892
- </a>
893
- </div>
894
- <div class="details">
895
- 本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。更多开源作品请看 GitHub [链接] ，包含一线大厂面试完整考点、资料以及我的系列文章。
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/1190000042531062" target="_blank" title="「🌟技术探索🌟」借助 CI / CD 实现前端应用的快速回滚">「🌟技术探索🌟」借助 CI / CD 实现前端应用的快速回滚</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>3</span>
916
- </span>
917
- &nbsp;
918
- <a target="_blank" href="https://segmentfault.com/u/scaukk" title="Programming Language">
919
- <span>皮小蛋</span>
920
- </a>
921
- </div>
922
- <div class="details">
923
- 在 上一轮优化 里， 我们通过优化一些构建工具和流程， 把构建耗时优化到了 4min 左右，整体发布耗时从 15min 优化到了 8 min 左右, 有较大提升， 但是依旧存在提升空间。
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/1190000042549062" 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
- 大家好，我卡颂。近几年，前端领域出现了很多新框架，比如Svelte、 Solid.js、Astro、Qwik等。伴随他们出现的，还有很多高大上的新概念 —— 运行时/编译时框架、Islands架构、Selective Hydration......这些概念的...
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/1190000042589829" 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>2</span>
972
- </span>
973
- &nbsp;
974
- <a target="_blank" href="https://segmentfault.com/u/writers" title="Programming Language">
975
- <span>思否编辑部</span>
976
- </a>
977
- </div>
978
- <div class="details">
979
- 受访者：王泽锋（Kevin Wang），华为云云原生开源负责人，CNCF大使，CNCF技术监督委员会贡献者，Kubernetes资深维护者，KubeEdge、Volcano、Karmada等多个CNCF项目发起人，目前负责华为云在云原生开源社区的整体...
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/23 by Github API v3.</div>
1001
- Create by <a href="https://github.com/jaywcjlove" target="_blank">小弟调调™</a>.
1002
- </div>
1003
- </body>
1004
- </html>