@wcj/github-rank 22.9.22 → 22.9.24

package/web/data/sifou-daily.json

@@ -1,47 +1,74 @@
 [
   {
-    "title": "共码未来 | 提供运营数据库工作负载的优越平台",
-    "description": "云技术可为组织提供敏捷性和差异化功能并帮助节省成本预计今年会有 75% 的数据库迁移至云平台 Google Cloud 助力客户实现现代化从旧的专有数据库迁移至标准化的开源数据库一起来了解相关技术更新吧 AlloyDB for P...",
-    "url": "https://segmentfault.com/a/1190000042528779",
-    "author": "思否编辑部",
-    "home_url": "https://segmentfault.com/u/writers",
-    "votes": "1",
+    "title": "特约专访 | 思否 CEO 高阳带你了解 Code For Better _ Hackathon 冠军团队背后的故事",
+    "description": "2022 年 9 月 16 日，2022 Code For Better_Hackathon 正式落下帷幕。大赛以 2022 Google 开发者大会 “CODE FOR BETTER_ ” 为参赛主题，在“共码未来”的号召下，本届 Hackathon 大赛涌现出一大批针对多类型现实难...",
+    "url": "https://segmentfault.com/a/1190000042535848",
+    "author": "SegmentFault思否",
+    "home_url": "https://segmentfault.com/u/segmentfault",
+    "votes": "2",
     "rank": 1
   },
   {
-    "title": "angular中 property 和 attribute， 以及记录相关的问题",
-    "description": "property 和 attribute往常用到td的时候, 像这样用：rowspan=\"3\"。 在当前angular项目中，需要用到动态绑定rowspan。本来想的是，html:<td rowspan=\"{{row}}\"> ts:row = 3;这样绑定。...",
-    "url": "https://segmentfault.com/a/1190000042528630",
-    "author": "weiewiyi",
-    "home_url": "https://segmentfault.com/u/chenchu_6110ed583800c",
+    "title": "基于canvas实现的多功能画板",
+    "description": "前言最近空闲时间比较多，就想做点小工具玩玩，方案选了好几个，最终决定做一个基于canvas的画板，目前已经完成了第一版，有以下主要功能画笔（动态宽度设置，颜色设置）橡皮擦撤回，反撤回，清除画板，保存画板...",
+    "url": "https://segmentfault.com/a/1190000042533770",
+    "author": "LH_S",
+    "home_url": "https://segmentfault.com/u/lh_s",
     "votes": "2",
     "rank": 2
   },
   {
-    "title": "总结本周遇到的问题（9/21）",
-    "description": "本中要写到一个页面需要进行级联查询当前建筑是属于服务区下的，所以我们选择了服务区才能继续根据所选择的服务区，也就是说如果我们选择完 服务区一，再选择建筑一，如果我们此时更换选择的服务区里所应当应该去...",
-    "url": "https://segmentfault.com/a/1190000042520923",
-    "author": "李明",
-    "home_url": "https://segmentfault.com/u/crister_612f55567eb8c",
+    "title": "超详细的 Angular 国际化方案",
+    "description": "第一次在 Angular 框架上落地国际化方案，将 Eoapi 的经验分享给大家～1. 项目背景需要支持 Web 和 Electron 桌面端技术栈Angular 14Electron 19NG-ZORR 13.0.62. 可能遇到的困难各语言下样式不统一，例如阿拉伯...",
+    "url": "https://segmentfault.com/a/1190000042536913",
+    "author": "eoapi",
+    "home_url": "https://segmentfault.com/u/jiangdaoyidechahu",
     "votes": "2",
     "rank": 3
   },
   {
-    "title": "OKR之剑（理念篇）02—— OKR布道之旅",
-    "description": "大概是在2013年底，一些创业者在硅谷深受OKR洗礼，并在自己的公司内小范围运用，以此OKR开始传入中国。而vivo初尝OKR则是在2019年，当时的互联网管理团队注意到OKR在Google和 MicroSoft等大型公司的成功实践，于...",
-    "url": "https://segmentfault.com/a/1190000042518339",
-    "author": "vivo互联网技术",
-    "home_url": "https://segmentfault.com/u/vivo_tech",
+    "title": "Eclipse Theia技术揭秘——构建桌面IDE",
+    "description": "在上一篇文章 Eclipse Theia技术揭秘——初识Theia 简单介绍了一下Eclipse Theia这套IDE平台，这篇文章介绍一下如何基于Eclipse Theia构建桌面IDE。",
+    "url": "https://segmentfault.com/a/1190000042536405",
+    "author": "码出世界",
+    "home_url": "https://segmentfault.com/u/codeteenager",
     "votes": "1",
     "rank": 4
   },
   {
-    "title": "爆肝撸了个“羊了个羊”通关助手",
-    "description": "最近，羊了个羊甚是火爆，以至于在上市几天后作者就在广东全款买了两套房，作为一个非游戏迷我对这一情况真是不解，不就一个开心消消乐游戏，为啥会如此火爆呢？或许这就是小游戏的魅力吧，一如之前的QQ农场、Fly...",
-    "url": "https://segmentfault.com/a/1190000042518477",
-    "author": "xiangzhihong",
-    "home_url": "https://segmentfault.com/u/xiangzhihong",
+    "title": "React Hooks之useDebugValue - 代替console.log来调试Hook",
+    "description": "而useDebugValue的优势在于，用useDebugValue输出的值，是和DevTools中的Hook状态一起动态显示的，不需要在DevTools和Console面板中切换查看Hook状态和console.log输出。",
+    "url": "https://segmentfault.com/a/1190000042535705",
+    "author": "jinling",
+    "home_url": "https://segmentfault.com/u/liushuigs",
     "votes": "1",
     "rank": 5
+  },
+  {
+    "title": "新提案，初识CSS的object-view-box属性",
+    "description": "本文首发于微信公众号：大迁世界, 我的微信：qq449245884，我会第一时间和你分享前端行业趋势，学习途径等等。更多开源作品请看 GitHub [链接] ，包含一线大厂面试完整考点、资料以及我的系列文章。",
+    "url": "https://segmentfault.com/a/1190000042534308",
+    "author": "前端小智",
+    "home_url": "https://segmentfault.com/u/minnanitkong",
+    "votes": "2",
+    "rank": 6
+  },
+  {
+    "title": "微信跳转到支付宝App自动领取赏金红包",
+    "description": "关于支付宝赏金红包这件事，其实已经好几年了，我记得2018年就已经有这个了，当初通过一个链接在微信点击，就会自动跳转到支付宝领取赏金，当初我也写过一篇：[链接] 那一年我的赏金就已经赚了2w多，后来支付宝为...",
+    "url": "https://segmentfault.com/a/1190000042535910",
+    "author": "TANKING",
+    "home_url": "https://segmentfault.com/u/tanking",
+    "votes": "1",
+    "rank": 7
+  },
+  {
+    "title": "通过vNode实现给列表字段打标签",
+    "description": "问题如何给列表数据打标签？类似下面这种样子👇思路数模转化（对接口请求回来的数据进行过滤标记，返回新的数据）渲染新的数据模型实现1、过滤数据，需要打标签的采用jsx写法业务数据的处理我封装在 mixins 里面 {...",
+    "url": "https://segmentfault.com/a/1190000042535143",
+    "author": "甜点cc",
+    "home_url": "https://segmentfault.com/u/xiaojt",
+    "votes": "1",
+    "rank": 8
   }
 ]

package/web/data/sifou-monthly.json

@@ -5,35 +5,26 @@
     "url": "https://segmentfault.com/a/1190000042447341",
     "author": "dreamapplehappy",
     "home_url": "https://segmentfault.com/u/dreamapplehappy",
-    "votes": "20",
+    "votes": "21",
     "rank": 1
   },
-  {
-    "title": "还在用定时器吗？借助 CSS 来监听事件",
-    "description": "平时工作中很多场合都要用到定时器，比如延迟加载、定时查询等等，但定时器的控制有时候会有些许麻烦，比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法，一起了解一下吧，相信...",
-    "url": "https://segmentfault.com/a/1190000042475578",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "20",
-    "rank": 2
-  },
   {
     "title": "「多图预警」完美实现一个@功能",
     "description": "一天产品大大向 boss 汇报完研发成果和产品业绩产出，若有所思的走出来，劲直向我走过来，嘴角微微上扬。产品大大：boss 对我们的研发成果挺满意的，balabala...（内心 OS：不听，讲重点）产品大大：咱们的客服 I...",
     "url": "https://segmentfault.com/a/1190000042481321",
     "author": "wuwhs",
     "home_url": "https://segmentfault.com/u/wuwhs",
-    "votes": "19",
-    "rank": 3
+    "votes": "20",
+    "rank": 2
   },
   {
-    "title": "自定义计数器小技巧！CSS 实现长按点赞累加动画",
-    "description": "欢迎关注我的公众号：前端侦探在某条 APP 中，如果长按点赞，会出现这样花里胡哨的动画，如下这个动画有两部分组成，其中这个随机表情的实现可以参考 coco 的这篇文章 巧用 transition 实现短视频 APP 点赞动画比...",
-    "url": "https://segmentfault.com/a/1190000042360785",
+    "title": "还在用定时器吗？借助 CSS 来监听事件",
+    "description": "平时工作中很多场合都要用到定时器，比如延迟加载、定时查询等等，但定时器的控制有时候会有些许麻烦，比如鼠标移入停止、移出再重新开始。这次介绍几个借助 CSS 来更好的控制定时器的方法，一起了解一下吧，相信...",
+    "url": "https://segmentfault.com/a/1190000042475578",
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "19",
-    "rank": 4
+    "votes": "20",
+    "rank": 3
   },
   {
     "title": "组员老是忘记打卡，我开发了一款小工具，让全组三个月全勤！",
@@ -41,17 +32,8 @@
     "url": "https://segmentfault.com/a/1190000042386997",
     "author": "杨成功",
     "home_url": "https://segmentfault.com/u/ruidoc",
-    "votes": "13",
-    "rank": 5
-  },
-  {
-    "title": "妙啊！纯 CSS 实现拼图游戏",
-    "description": "本文，将向大家介绍一种将多个 CSS 技巧运用到极致的技巧，利用纯 CSS 实现拼图游戏。本技巧源自于 Temani Afif 的 CodePen CSS Only Puzzle game。一款完全由 CSS 实现的拼图游戏。我们要做的，就是将散落的图片...",
-    "url": "https://segmentfault.com/a/1190000042361223",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "19",
-    "rank": 6
+    "votes": "14",
+    "rank": 4
   },
   {
     "title": "巧用 transition 实现短视频 APP 点赞动画",
@@ -60,16 +42,7 @@
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
     "votes": "16",
-    "rank": 7
-  },
-  {
-    "title": "云安全践行者：亚马逊云科技如何打好“安全”牌？",
-    "description": "云计算发展正迅疾如风，猛烈似火。为业务赋能之下，上“云”已成大势所趋！特别是在疫情持续了将近三年的背景下，云市场需求持续爆发。资本方、企业主、客户、用户等等，云正成为各方最受关注的科技领域。2022年，...",
-    "url": "https://segmentfault.com/a/1190000042418291",
-    "author": "六一",
-    "home_url": "https://segmentfault.com/u/suicidal_romantic_scoundrel",
-    "votes": "10",
-    "rank": 8
+    "rank": 5
   },
   {
     "title": "实现《羊了个羊》的小游戏",
@@ -78,7 +51,16 @@
     "author": "夕水",
     "home_url": "https://segmentfault.com/u/xishui_5ac9a340a5484",
     "votes": "12",
-    "rank": 9
+    "rank": 6
+  },
+  {
+    "title": "云安全践行者：亚马逊云科技如何打好“安全”牌？",
+    "description": "云计算发展正迅疾如风，猛烈似火。为业务赋能之下，上“云”已成大势所趋！特别是在疫情持续了将近三年的背景下，云市场需求持续爆发。资本方、企业主、客户、用户等等，云正成为各方最受关注的科技领域。2022年，...",
+    "url": "https://segmentfault.com/a/1190000042418291",
+    "author": "六一",
+    "home_url": "https://segmentfault.com/u/suicidal_romantic_scoundrel",
+    "votes": "10",
+    "rank": 7
   },
   {
     "title": "如何让CSS计数器支持小数的动态变化？",
@@ -87,7 +69,7 @@
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "11",
-    "rank": 10
+    "rank": 8
   },
   {
     "title": "中秋佳节之际, 一起来欣赏 9 个冷门的css属性",
@@ -96,7 +78,7 @@
     "author": "lulu_up",
     "home_url": "https://segmentfault.com/u/lulu_up",
     "votes": "10",
-    "rank": 11
+    "rank": 9
   },
   {
     "title": "CSS transform、transition、animation 指南",
@@ -105,7 +87,7 @@
     "author": "散一群逗逼",
     "home_url": "https://segmentfault.com/u/sanyiqundoubi",
     "votes": "11",
-    "rank": 12
+    "rank": 10
   },
   {
     "title": "AI数字绘画 stable-diffusion 保姆级教程",
@@ -114,7 +96,16 @@
     "author": "程序员秋风",
     "home_url": "https://segmentfault.com/u/qiufeng_5a07f6cb96ee0",
     "votes": "8",
-    "rank": 13
+    "rank": 11
+  },
+  {
+    "title": "【已结束】SegmentFault 思否技术征文丨浅谈 Java 进阶之路",
+    "description": "本期中奖名单：[链接]亲爱的开发者们：大家好，我是 SegmentFault 思否的社区管理员思否小姐姐 ~ 我们的社区征文活动再次起航，这一次，想邀请作者们分享原创技术内容。将于 9-12 月会相继上线技术专题征文活动，...",
+    "url": "https://segmentfault.com/a/1190000042453662",
+    "author": "SegmentFault思否",
+    "home_url": "https://segmentfault.com/u/segmentfault",
+    "votes": "9",
+    "rank": 12
   },
   {
     "title": "盘点一些好用的 JS 单行代码",
@@ -123,16 +114,7 @@
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
     "votes": "13",
-    "rank": 14
-  },
-  {
-    "title": "SegmentFault 思否技术征文丨浅谈 Java 进阶之路",
-    "description": "亲爱的开发者们：大家好，我是 SegmentFault 思否的社区管理员思否小姐姐 ~ 我们的社区征文活动再次起航，这一次，想邀请作者们分享原创技术内容。将于 9-12 月会相继上线技术专题征文活动，征文方向包含 Java、C...",
-    "url": "https://segmentfault.com/a/1190000042453662",
-    "author": "SegmentFault思否",
-    "home_url": "https://segmentfault.com/u/segmentfault",
-    "votes": "9",
-    "rank": 15
+    "rank": 13
   },
   {
     "title": "使用 SVG 生成带标识的 favicon",
@@ -141,25 +123,7 @@
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "9",
-    "rank": 16
-  },
-  {
-    "title": "怎么防止同事用 Evil.js 的代码投毒",
-    "description": "视频移步B站[链接]最近Evil.js被讨论的很多，项目介绍如下项目被发布到npm上后，引起了激烈的讨论，最终因为安全问题被npm官方移除，代码也闭源了作为一个前端老司机，我肯定是反对这种行为，泄私愤有很多种方式...",
-    "url": "https://segmentfault.com/a/1190000042360645",
-    "author": "前端小菜鸟",
-    "home_url": "https://segmentfault.com/u/qianduanxiaocainiao_5c612df9514ba",
-    "votes": "8",
-    "rank": 17
-  },
-  {
-    "title": "你不知道的 console，让 JS 调试更简单",
-    "description": "对于前端的各位工程师，肯定不会对console陌生，但是，你又能了解多少呢，今天就让小鹏来一窥大前世界。Chrome控制台-开发者工具windows按F12， MAC按Command + Option + C或Command + Option + J, 即可打开控制...",
-    "url": "https://segmentfault.com/a/1190000042367660",
-    "author": "高志鹏",
-    "home_url": "https://segmentfault.com/u/gaozhipeng",
-    "votes": "10",
-    "rank": 18
+    "rank": 14
   },
   {
     "title": "CodeForBetter_Hackathon，唤醒代码的力量",
@@ -168,7 +132,7 @@
     "author": "SegmentFault思否",
     "home_url": "https://segmentfault.com/u/segmentfault",
     "votes": "4",
-    "rank": 19
+    "rank": 15
   },
   {
     "title": "有意思的水平横向溢出滚动",
@@ -177,7 +141,34 @@
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
     "votes": "6",
-    "rank": 20
+    "rank": 16
+  },
+  {
+    "title": "50天用vue3完成了50个web项目，我学到了什么?",
+    "description": "通过本文的50个web示例你将学到:Vue3核心基础语法和进阶语法less核心基础语法和进阶语法scss核心基础语法和进阶语法1.Expanding Cards效果如图所示:源码在线示例学到了什么?JavascriptVue ref方法定义基本响应式...",
+    "url": "https://segmentfault.com/a/1190000042509082",
+    "author": "夕水",
+    "home_url": "https://segmentfault.com/u/xishui_5ac9a340a5484",
+    "votes": "11",
+    "rank": 17
+  },
+  {
+    "title": "单标签实现复杂的棋盘布局",
+    "description": "其实，对于一个页面的布局而言，标签越少不一定是好事，我们在考虑 DOM 的消耗的同时，也需要关注代码的可读性，以及后续基于这个布局的制作的交互的难易性等等。",
+    "url": "https://segmentfault.com/a/1190000042513947",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "8",
+    "rank": 18
+  },
+  {
+    "title": "用Vue.js写一个命令行贪吃蛇游戏",
+    "description": "大家好,我是webfansplz.本文要分享的是如何使用Vue.js实现一个命令行贪吃蛇游戏(temir-snake-game).对于贪吃蛇游戏想必大家都不陌生了,使用Vue.js实现一个Web版的贪吃蛇游戏似乎没什么难度,那如果是命令行版的呢?...",
+    "url": "https://segmentfault.com/a/1190000042431217",
+    "author": "null仔",
+    "home_url": "https://segmentfault.com/u/xiaoqianduan_58b28cfebff36",
+    "votes": "6",
+    "rank": 19
   },
   {
     "title": "精读《SolidJS》",
@@ -186,6 +177,15 @@
     "author": "黄子毅",
     "home_url": "https://segmentfault.com/u/aoyangyudakong",
     "votes": "5",
+    "rank": 20
+  },
+  {
+    "title": "图解JS中的事件循环",
+    "description": "1、js单线程，并非指js只有一个线程，而是同一时刻只能有一个线程在工作。2、js中，主线程之外，还有其他线程，比如事件循环线程，定时器触发线程，http异步线程， 浏览器事件线程。3、在js主线程中，分为两个子...",
+    "url": "https://segmentfault.com/a/1190000042485178",
+    "author": "寒水寺一禅",
+    "home_url": "https://segmentfault.com/u/xiaolizideyitian",
+    "votes": "5",
     "rank": 21
   },
   {
@@ -234,14 +234,23 @@
     "rank": 26
   },
   {
-    "title": "用Vue.js写一个命令行贪吃蛇游戏",
-    "description": "大家好,我是webfansplz.本文要分享的是如何使用Vue.js实现一个命令行贪吃蛇游戏(temir-snake-game).对于贪吃蛇游戏想必大家都不陌生了,使用Vue.js实现一个Web版的贪吃蛇游戏似乎没什么难度,那如果是命令行版的呢?...",
-    "url": "https://segmentfault.com/a/1190000042431217",
-    "author": "null仔",
-    "home_url": "https://segmentfault.com/u/xiaoqianduan_58b28cfebff36",
-    "votes": "5",
+    "title": "CSS 有了:has伪类可以做些什么？",
+    "description": ":has伪类是一个非常强大的伪类，强大到难以置信，可以做很多梦寐以求的事情，很多以前只能更改 dom 结构 或者只能用 JS 才能实现的功能现在也能纯 CSS 实现了，一起看看吧",
+    "url": "https://segmentfault.com/a/1190000042490237",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "8",
     "rank": 27
   },
+  {
+    "title": "那些你不知道的炫酷按钮交互效果",
+    "description": "在日常开发中肯定都遇到过不少有按钮交互的地方，但你有用到什么炫酷的交互效果吗？日常开发中想必最多的就是点击按钮背景文字变色，阴影，按钮按下，加载中之类的效果，相对都比较平平无奇，都是一些按部就班的...",
+    "url": "https://segmentfault.com/a/1190000042517595",
+    "author": "南城大前端",
+    "home_url": "https://segmentfault.com/u/nanchengfe",
+    "votes": "8",
+    "rank": 28
+  },
   {
     "title": "新时代布局新特性 -- 容器查询",
     "description": "而目前，我们也能在 Chrome Canary 版本中，或者在 Chrome 93~104 通过开启 Enable CSS Container Queries 特性抢先体验。",
@@ -249,24 +258,15 @@
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
     "votes": "7",
-    "rank": 28
-  },
-  {
-    "title": "拒绝加班:巧用前端电子表格中构建公式树",
-    "description": "还在为满屏的公式而“内牛满面”吗？还在为长串的公式解析而发愁吗？ 还在定位错误的公式而苦恼吗？上班要写代码，加班还要分析这又长又臭的公式。你的发际线还好吗？",
-    "url": "https://segmentfault.com/a/1190000042377267",
-    "author": "葡萄城技术团队",
-    "home_url": "https://segmentfault.com/u/grapecity",
-    "votes": "2",
     "rank": 29
   },
   {
-    "title": "性能优化必备——火焰图",
-    "description": "本文主要介绍火焰图及使用技巧，学习如何使用火焰图快速定位软件的性能卡点。结合最佳实践实战案例，帮助读者加深刻的理解火焰图构造及原理，理解 CPU 耗时，定位性能瓶颈。",
-    "url": "https://segmentfault.com/a/1190000042419139",
-    "author": "咕咕鸡",
-    "home_url": "https://segmentfault.com/u/guguji_fly",
-    "votes": "6",
+    "title": "微信小程序转为App并上架应用市场",
+    "description": "先说说背景吧，笔者开发了一款微信工具类小程序，刚开始，小程序的日访问量和用户数都还可以，但后面慢慢的发现，受限于微信小程序平台规则，很难对用户进行更深入的运营，用户流失问题也将逐渐凸显出来。另一方...",
+    "url": "https://segmentfault.com/a/1190000042503461",
+    "author": "xiangzhihong",
+    "home_url": "https://segmentfault.com/u/xiangzhihong",
+    "votes": "4",
     "rank": 30
   }
 ]