@wcj/github-rank 22.6.17 → 22.6.18

package/web/data/sifou-daily.json

@@ -1,128 +1,56 @@
 [
   {
-    "title": "React Suspense 尝鲜,处理前后端IO异步操作",
-    "description": "Suspense主要用来解决网络IO问题，它早在2018年的React 16.6.0版本中就已发布。它的相关用法有些已经比较成熟，有的相对不太稳定，甚至经历了重命名、删除：",
-    "url": "https://segmentfault.com/a/1190000041992773",
-    "author": "葡萄城技术团队",
-    "home_url": "https://segmentfault.com/u/grapecity",
-    "votes": "7",
+    "title": "掘地三尺搞定 Redis 与 MySQL 数据一致性问题",
+    "description": "Redis 拥有高性能的数据读写功能，被我们广泛用在缓存场景，一是能提高业务系统的性能，二是为数据库抵挡了高并发的流量请求，点我 -> 解密 Redis 为什么这么快的秘密。把 Redis 作为缓存组件，需要防止出现以...",
+    "url": "https://segmentfault.com/a/1190000041998615",
+    "author": "码哥字节",
+    "home_url": "https://segmentfault.com/u/magebyte",
+    "votes": "4",
     "rank": 1
   },
   {
-    "title": "前端性能监测，Runtime Performance Debug 技巧",
-    "description": "提到 Web 前端的效能优化，有许多的技巧是聚焦在如何减少页面的“载入时间 Loading Time”，例如 Code Splitting 透过减少需要载入的 Bundle Size 来加快载入效能。也有些技巧是针对执行时期 (Runtime) 的优化与调...",
-    "url": "https://segmentfault.com/a/1190000041990709",
-    "author": "前端小智",
-    "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "7",
+    "title": "美团综合业务推荐系统的质量模型及实践",
+    "description": "推荐系统是效果导向的数据应用服务，在功能的“有”和“无”之间，有很长的效果“好”和“坏”的光谱。本文以用户请求的粒度建立质量模型，通过数据血缘关联了数据表、算法模型、系统服务和用户请求，并结合美团综合业务...",
+    "url": "https://segmentfault.com/a/1190000041996173",
+    "author": "美团技术团队",
+    "home_url": "https://segmentfault.com/u/meituanjishutuandui",
+    "votes": "2",
     "rank": 2
   },
   {
-    "title": "正式发布丨Visual Studio Code 1.68",
-    "description": "欢迎使用5 月发布的 Visual Studio Code，本次发布的亮点如下：▌Configure Display LanguageConfigure Display Language命令已更新为包括：该语言的语言名称。Available languages显示您的计算机上未安装哪些语言...",
-    "url": "https://segmentfault.com/a/1190000041989813",
-    "author": "微软技术栈",
-    "home_url": "https://segmentfault.com/u/mstech",
+    "title": "系统困境与软件复杂度，为什么我们的系统会如此复杂",
+    "description": "有一天，一个医生和一个土木工程师在一起争论“谁是世界上最古老的职业”。医生说：“上帝用亚当的肋骨造出了夏娃，这是历史上第一次外科手术，所以最古老的职业应该是医生”，土木工程师说：“在创世纪之前，上帝从混...",
+    "url": "https://segmentfault.com/a/1190000041998329",
+    "author": "阿里巴巴移动技术",
+    "home_url": "https://segmentfault.com/u/alimobile",
     "votes": "1",
     "rank": 3
   },
   {
-    "title": "怎样写个sdk嵌套到别的项目？",
-    "description": "需求：客户的项目需要用我们的功能，且需要提供个modal嵌入到他们的项目里，在他们的table中点击对应的item，弹出我提供的modal。解决方案项目使用cra构建，使用webpack的library导出为一个库给第三方使用, 官方...",
-    "url": "https://segmentfault.com/a/1190000041994702",
-    "author": "assassin_cike",
-    "home_url": "https://segmentfault.com/u/assassin",
+    "title": "编程技巧│浏览器 Notification 桌面推送通知",
+    "description": "一、什么是 NotificationNotification 是浏览器最小化后在桌面显示消息的一种方法类似于 360 等流氓软件在桌面右下角的弹窗广告它与浏览器是脱离的，消息是置顶的二、弹窗授权授权当前页面允许通知可以通过检查只...",
+    "url": "https://segmentfault.com/a/1190000041998200",
+    "author": "极客飞兔",
+    "home_url": "https://segmentfault.com/u/autofelix",
     "votes": "1",
     "rank": 4
   },
   {
-    "title": "基于xgplayer编写一个artc插件，实现阿里云低延迟直播",
-    "description": "最近一直在配合业务和集团的小伙伴处理一些直播上的需求。他们起先看上了磐厚年会的那个直播项目，里面的弹幕功能和一些播放功能都是他们觉得符合他们诉求的内容。",
-    "url": "https://segmentfault.com/a/1190000041992498",
-    "author": "JFJSWEB",
-    "home_url": "https://segmentfault.com/u/jfjsweb",
+    "title": "前端命名规范",
+    "description": "命名类型总共有三种命名方式:PasaCase：大写驼峰式，如: MClascamelCase：小写驼峰式，比如: MyClasskebab-case：小写短横线，比如:my-class文件或文件夹的命名遵循以下原则:定义对象，统一使用PascalCase(大写驼...",
+    "url": "https://segmentfault.com/a/1190000041996652",
+    "author": "前端小可爱",
+    "home_url": "https://segmentfault.com/u/survivor_61d65fb5edf0d",
     "votes": "1",
     "rank": 5
   },
   {
-    "title": "Proxy学习",
-    "description": "Map，Set，Date，Promise 等内置类型，都使用了所谓的\"内部插槽\"，类似于对象的私有属性，不允许外部访问，所以当代理没做处理时，直接代理他们会发生错误。",
-    "url": "https://segmentfault.com/a/1190000041992118",
-    "author": "小绵羊",
-    "home_url": "https://segmentfault.com/u/xiaomianyang_5a5c183e17d47",
-    "votes": "1",
-    "rank": 6
-  },
-  {
-    "title": "十年老友记 | @王子亭：编程让我享受创造和解决问题的过程",
-    "description": "十年前的今天，SegmentFault 思否正式创立，如一颗嫩绿的幼芽开始成长，期间承载过和煦的日光、沐浴过柔和的春风，也挑战过滂沱的暴雨、体会过凛冽的冬雪。所幸，今日呈现在我们面前的 SegmentFault 思否，已经长...",
-    "url": "https://segmentfault.com/a/1190000041993356",
-    "author": "思否编辑部",
-    "home_url": "https://segmentfault.com/u/writers",
-    "votes": "1",
-    "rank": 7
-  },
-  {
-    "title": "十年老友记 | @依云：曾经看到一句话：Coding changes the world!",
-    "description": "十年前的今天，SegmentFault 思否正式创立，如一颗嫩绿的幼芽开始成长，期间承载过和煦的日光、沐浴过柔和的春风，也挑战过滂沱的暴雨、体会过凛冽的冬雪。所幸，今日呈现在我们面前的 SegmentFault 思否，已经长...",
-    "url": "https://segmentfault.com/a/1190000041992859",
-    "author": "思否编辑部",
-    "home_url": "https://segmentfault.com/u/writers",
-    "votes": "1",
-    "rank": 8
-  },
-  {
-    "title": "「WGCLOUD」server启动错误信息：Table 'wgcloud.SYSTEM_INFO' doesn't exist",
-    "description": "1、这个错误是wgcloud数据库中没有创建表，也就是我们没有导入sql脚本来初始化数据库，sql脚本在安装包里，如下图所示，我们导入对应的sql就可以了，一个是mysql的初始化脚本，一个是postgresql的初始化脚本",
-    "url": "https://segmentfault.com/a/1190000041991526",
-    "author": "徐三刀",
-    "home_url": "https://segmentfault.com/u/9b3sps2b",
-    "votes": "1",
-    "rank": 9
-  },
-  {
-    "title": "React新文档：不要滥用Ref哦～",
-    "description": "React新文档有个很有意思的细节：useRef、useEffect这两个API的介绍，在文档中所在的章节叫Escape Hatches（逃生舱）。",
-    "url": "https://segmentfault.com/a/1190000041991074",
-    "author": "卡颂",
-    "home_url": "https://segmentfault.com/u/kasong",
+    "title": "iframe跨域的几种常用方法",
+    "description": "在开发日常中，会遇到使用iframe嵌套其他页面，想要与嵌套页面进行交互，常常会涉及打跨域问题，何为跨域？这涉及到同源策略，即协议、端口、域名相同则为同源",
+    "url": "https://segmentfault.com/a/1190000041996165",
+    "author": "mosquito",
+    "home_url": "https://segmentfault.com/u/mosquito_612af76da10ff",
     "votes": "2",
-    "rank": 10
-  },
-  {
-    "title": "微服务之服务注册和服务发现篇",
-    "description": "有了服务注册和发现机制，消费者不需要知道具体服务提供者的真实物理地址就可以进行调用，也无须知道具体有多少个服务者可用；而服务提供者只需要注册到注册中心，就可以对外提供服务，在对外服务时不需要知道具...",
-    "url": "https://segmentfault.com/a/1190000041992344",
-    "author": "seth-shi",
-    "home_url": "https://segmentfault.com/u/seth9shi",
-    "votes": "1",
-    "rank": 11
-  },
-  {
-    "title": "0基础如何快速学习Java？",
-    "description": "进入IT行业有四五年，见了不少新人，面试了不少新人，也带了一些新人，作为老司机可以给大家一些建议。1.关于书籍新人们常常会说看了多少多少的书，看过谁写的书，仿佛书看得多懂得也就多了。其实不然，很多新人...",
-    "url": "https://segmentfault.com/a/1190000041991741",
-    "author": "捷码",
-    "home_url": "https://segmentfault.com/u/jiema",
-    "votes": "1",
-    "rank": 12
-  },
-  {
-    "title": "简述 JS 中的小数化整",
-    "description": "JS 的数字都是双浮点类型，在我们平时使用中经常会有数字化整或保留几位小数的需求。前些日子拼多多就以显示空间有限，在 99.99 后还有未显示的 6 位小数为由打赢了官司",
-    "url": "https://segmentfault.com/a/1190000041993090",
-    "author": "清隆",
-    "home_url": "https://segmentfault.com/u/qinglong_62898aa51988d",
-    "votes": "1",
-    "rank": 13
-  },
-  {
-    "title": "【Java面试】TCP协议为什么要设计三次握手？",
-    "description": "一个工作5年的粉丝，最近去面试了很多公司，每次都被各种技术原理题问得语无伦次。由于找了快1个月时间的工作，有点焦虑，来向我求助。我能做的只是保证每天更新一个面试题，然后问他印象最深刻的一个面试题是什...",
-    "url": "https://segmentfault.com/a/1190000041991850",
-    "author": "跟着Mic学架构",
-    "home_url": "https://segmentfault.com/u/fukua_5be8034f8191f",
-    "votes": "2",
-    "rank": 14
+    "rank": 6
   }
 ]

package/web/data/sifou-monthly.json

@@ -9,12 +9,12 @@
     "rank": 1
   },
   {
-    "title": "浅谈逻辑选择器 -- 父选择器它来了！",
-    "description": "在 CSS 选择器家族中，新增这样一类比较新的选择器 -- 逻辑选择器，目前共有 4 名成员：:is:where:not:has本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。:is 伪类选择器:is() CSS伪类函数...",
-    "url": "https://segmentfault.com/a/1190000041860587",
+    "title": "文字轮播与图片轮播？CSS 不在话下",
+    "description": "今天，分享一个实际业务中能够用得上的动画技巧。巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？我们来简单分析分析，从...",
+    "url": "https://segmentfault.com/a/1190000041947673",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "33",
+    "votes": "37",
     "rank": 2
   },
   {
@@ -45,23 +45,14 @@
     "rank": 5
   },
   {
-    "title": "文字轮播与图片轮播？CSS 不在话下",
-    "description": "今天，分享一个实际业务中能够用得上的动画技巧。巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样：看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？我们来简单分析分析，从...",
-    "url": "https://segmentfault.com/a/1190000041947673",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "34",
+    "title": "巧妙使用Vue.extend继承组件实现el-table双击可编辑（不使用v-if和v-else）",
+    "description": "看了一下网上的帖子，大多数都是搞两部分dom，一块是输入框，用于编辑状态填写；另一块是普通标签，用于在不编辑显示状态下呈现单元格文字内容。再加上一个flag标识搭配v-if和v-else去控制编辑状态、还是显示状态...",
+    "url": "https://segmentfault.com/a/1190000041974425",
+    "author": "水冗水孚",
+    "home_url": "https://segmentfault.com/u/shuirongshui",
+    "votes": "21",
     "rank": 6
   },
-  {
-    "title": "SegmentFault 思否技术周刊 -- Go 语言通关攻略",
-    "description": "2022年3月15日，争议非常大但同时也备受期待的泛型终于伴随着Go1.18发布了。可是因为Go对泛型的支持时间跨度太大，有非常多的以“泛型”为关键字的文章都是在介绍Go1.18之前的旧泛型提案或者设计，而很多设计最终在...",
-    "url": "https://segmentfault.com/a/1190000041861125",
-    "author": "Beverly",
-    "home_url": "https://segmentfault.com/u/beverly0",
-    "votes": "22",
-    "rank": 7
-  },
   {
     "title": "前端监控的搭建步骤，别再一头雾水了！",
     "description": "在动手实现之前，首先脑子里要有一个整体脉络，明白搭建前端监控具体的流程步骤有哪些。因为前端监控系统实际上是一个完整的全栈项目，而并不仅仅是前端，甚至主要的实现都是围绕在 数据方面 的。",
@@ -69,7 +60,7 @@
     "author": "杨成功",
     "home_url": "https://segmentfault.com/u/ruidoc",
     "votes": "25",
-    "rank": 8
+    "rank": 7
   },
   {
     "title": "关于代码评审(CodeReview)那些不得不说的事儿",
@@ -78,7 +69,7 @@
     "author": "xindoo",
     "home_url": "https://segmentfault.com/u/xindoo",
     "votes": "21",
-    "rank": 9
+    "rank": 8
   },
   {
     "title": "CSS 实现头像名称首字符自动占位",
@@ -87,16 +78,7 @@
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "23",
-    "rank": 10
-  },
-  {
-    "title": "巧妙使用Vue.extend继承组件实现el-table双击可编辑（不使用v-if和v-else）",
-    "description": "看了一下网上的帖子，大多数都是搞两部分dom，一块是输入框，用于编辑状态填写；另一块是普通标签，用于在不编辑显示状态下呈现单元格文字内容。再加上一个flag标识搭配v-if和v-else去控制编辑状态、还是显示状态...",
-    "url": "https://segmentfault.com/a/1190000041974425",
-    "author": "水冗水孚",
-    "home_url": "https://segmentfault.com/u/shuirongshui",
-    "votes": "16",
-    "rank": 11
+    "rank": 9
   },
   {
     "title": "CSS 穿墙术！太强了",
@@ -105,16 +87,7 @@
     "author": "零一",
     "home_url": "https://segmentfault.com/u/zero2one",
     "votes": "23",
-    "rank": 12
-  },
-  {
-    "title": "SegmentFault 思否技术周刊 -- JavaScript 的那些事",
-    "description": "JavaScript 是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程式設計，指令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持 I/O，比如网络、存储和图形...",
-    "url": "https://segmentfault.com/a/1190000041921498",
-    "author": "Beverly",
-    "home_url": "https://segmentfault.com/u/beverly0",
-    "votes": "17",
-    "rank": 13
+    "rank": 10
   },
   {
     "title": "搭建前端监控，如何采集异常数据？",
@@ -122,8 +95,17 @@
     "url": "https://segmentfault.com/a/1190000041962607",
     "author": "杨成功",
     "home_url": "https://segmentfault.com/u/ruidoc",
+    "votes": "18",
+    "rank": 11
+  },
+  {
+    "title": "SegmentFault 思否技术周刊 -- JavaScript 的那些事",
+    "description": "JavaScript 是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程式設計，指令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持 I/O，比如网络、存储和图形...",
+    "url": "https://segmentfault.com/a/1190000041921498",
+    "author": "Beverly",
+    "home_url": "https://segmentfault.com/u/beverly0",
     "votes": "17",
-    "rank": 14
+    "rank": 12
   },
   {
     "title": "十年老友记 | @张京：我编程了三十年，编程就是我的符号",
@@ -132,16 +114,16 @@
     "author": "思否编辑部",
     "home_url": "https://segmentfault.com/u/writers",
     "votes": "16",
-    "rank": 15
+    "rank": 13
   },
   {
-    "title": "SegmentFault 思否技术周刊 -- 进击的 React",
-    "description": "React 是一个免费的开放源代码前端 JavaScript 工具库， 用于基于 UI 组件构建用户界面。 它由 Meta 和一个由个人开发者和公司组成的社群维护。 React 可用作开发具有 Next.js 等框架的单页、手机或服务器渲染应...",
-    "url": "https://segmentfault.com/a/1190000041892645",
-    "author": "Beverly",
-    "home_url": "https://segmentfault.com/u/beverly0",
-    "votes": "11",
-    "rank": 16
+    "title": "锁定项目 Node 版本和包管理器",
+    "description": "成员机器 Node.js 版本不统一： 守旧派用 12.x、保守用 14.x、激进用 17.x。项目能否正常跑起来全凭天意，在没有 CICD 流水线加持本地 npm run build 的场景下线上风险可想而知。",
+    "url": "https://segmentfault.com/a/1190000041918155",
+    "author": "亖混子",
+    "home_url": "https://segmentfault.com/u/1023",
+    "votes": "17",
+    "rank": 14
   },
   {
     "title": "React Suspense 尝鲜,处理前后端IO异步操作",
@@ -150,16 +132,16 @@
     "author": "葡萄城技术团队",
     "home_url": "https://segmentfault.com/u/grapecity",
     "votes": "7",
-    "rank": 17
+    "rank": 15
   },
   {
-    "title": "锁定项目 Node 版本和包管理器",
-    "description": "成员机器 Node.js 版本不统一： 守旧派用 12.x、保守用 14.x、激进用 17.x。项目能否正常跑起来全凭天意，在没有 CICD 流水线加持本地 npm run build 的场景下线上风险可想而知。",
-    "url": "https://segmentfault.com/a/1190000041918155",
-    "author": "亖混子",
-    "home_url": "https://segmentfault.com/u/1023",
-    "votes": "16",
-    "rank": 18
+    "title": "SegmentFault 思否技术周刊 -- 进击的 React",
+    "description": "React 是一个免费的开放源代码前端 JavaScript 工具库， 用于基于 UI 组件构建用户界面。 它由 Meta 和一个由个人开发者和公司组成的社群维护。 React 可用作开发具有 Next.js 等框架的单页、手机或服务器渲染应...",
+    "url": "https://segmentfault.com/a/1190000041892645",
+    "author": "Beverly",
+    "home_url": "https://segmentfault.com/u/beverly0",
+    "votes": "11",
+    "rank": 16
   },
   {
     "title": "让拖拽更加人性化？如何自定义dragover样式",
@@ -168,7 +150,7 @@
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "10",
-    "rank": 19
+    "rank": 17
   },
   {
     "title": "干货合集│最好用的 python 库都在这",
@@ -177,7 +159,7 @@
     "author": "极客飞兔",
     "home_url": "https://segmentfault.com/u/autofelix",
     "votes": "8",
-    "rank": 20
+    "rank": 18
   },
   {
     "title": "云原生时代 PHP/Golang 项目如何实现微服务",
@@ -186,7 +168,7 @@
     "author": "韩天峰",
     "home_url": "https://segmentfault.com/u/hantianfeng",
     "votes": "9",
-    "rank": 21
+    "rank": 19
   },
   {
     "title": "这个队列的思路是真的好，现在它是我简历上的亮点了。",
@@ -195,6 +177,24 @@
     "author": "why技术",
     "home_url": "https://segmentfault.com/u/whyjishu",
     "votes": "10",
+    "rank": 20
+  },
+  {
+    "title": "Base64 编码知识，一文打尽！",
+    "description": "现在网站为了提升用户的浏览体验越来越多的使用了图片，而这些图片通常以 Base64 的形式存储和加载。因此各位开发工程师肯定对 Base64 毫不陌生了，那么你知道 Base64 究竟是什么，为什么要使用 Base64，以及 Bas...",
+    "url": "https://segmentfault.com/a/1190000041894263",
+    "author": "云叔_又拍云",
+    "home_url": "https://segmentfault.com/u/yunshu_blog",
+    "votes": "12",
+    "rank": 21
+  },
+  {
+    "title": "JS实现将文本或JSON内容下载到文件中",
+    "description": "有时候在前端开发过程中，可能遇到这样的需求场景：需要将页面上的文本内容下载到文件中，内容可能是某个大的文本字段，比如博客文章，也可能是后端接口返回的 JSON 数据。",
+    "url": "https://segmentfault.com/a/1190000041965165",
+    "author": "十方",
+    "home_url": "https://segmentfault.com/u/shifang_5b2b70d160932",
+    "votes": "9",
     "rank": 22
   },
   {
@@ -206,15 +206,6 @@
     "votes": "12",
     "rank": 23
   },
-  {
-    "title": "Base64 编码知识，一文打尽！",
-    "description": "现在网站为了提升用户的浏览体验越来越多的使用了图片，而这些图片通常以 Base64 的形式存储和加载。因此各位开发工程师肯定对 Base64 毫不陌生了，那么你知道 Base64 究竟是什么，为什么要使用 Base64，以及 Bas...",
-    "url": "https://segmentfault.com/a/1190000041894263",
-    "author": "云叔_又拍云",
-    "home_url": "https://segmentfault.com/u/yunshu_blog",
-    "votes": "12",
-    "rank": 24
-  },
   {
     "title": "Three.js 打造缤纷夏日3D梦中情岛 🌊",
     "description": "深居内陆的人们，大概每个人都有过大海之梦吧。夏日傍晚在沙滩漫步奔跑；或是在海上冲浪游泳；或是在海岛游玩探险；亦或静待日出日落……本文使用 React + Three.js 技术栈，实现 3D 海洋和岛屿，主要包含知识点包...",
@@ -222,7 +213,7 @@
     "author": "dragonir",
     "home_url": "https://segmentfault.com/u/dragonir",
     "votes": "10",
-    "rank": 25
+    "rank": 24
   },
   {
     "title": "云计算的未来在哪？破解亚马逊云科技增长神话",
@@ -231,7 +222,7 @@
     "author": "六一",
     "home_url": "https://segmentfault.com/u/suicidal_romantic_scoundrel",
     "votes": "8",
-    "rank": 26
+    "rank": 25
   },
   {
     "title": "如何自定义 drag 样式",
@@ -240,6 +231,15 @@
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "11",
+    "rank": 26
+  },
+  {
+    "title": "前端语音转文字实践总结",
+    "description": "最近准备一个技术分享，看到以前做的一个语音转文字的功能，放在slides上落灰了，索性整理到这里和大家分享下。从技术选型，到方案设计，到实际落地，可以说把全链路都覆盖到了。语音转写流程图PC端浏览器如何录...",
+    "url": "https://segmentfault.com/a/1190000041866984",
+    "author": "趁你还年轻",
+    "home_url": "https://segmentfault.com/u/chennihuannianqing",
+    "votes": "11",
     "rank": 27
   },
   {