@wcj/github-rank 22.8.10 → 22.8.13

package/dist/sifou-daily.json

@@ -1,47 +1,74 @@
 [
   {
-    "title": "markdown 编辑器实现双屏同步滚动",
-    "description": "由于一直在使用 markdown 编辑器写技术文章，所以对于编写体验很敏感。我发现各大社区的 markdown 编辑器基本都有同步滚动功能。只不过有些做得好，有些做得马马虎虎。出于好奇，我就打算自己亲自实现一下这个功能。",
-    "url": "https://segmentfault.com/a/1190000042290360",
-    "author": "谭光志",
-    "home_url": "https://segmentfault.com/u/woai3c",
+    "title": "用 http-middleware-proxy 造了个代理工具",
+    "description": "有啥用？？可以用代理工具随意的搭配开发环境。`下图中可以将服务A、服务B、Web Server任意一个替换成本地服务，然后通过访问 代理服务地址 进行调试。",
+    "url": "https://segmentfault.com/a/1190000042311837",
+    "author": "亖混子",
+    "home_url": "https://segmentfault.com/u/1023",
     "votes": "3",
     "rank": 1
   },
   {
-    "title": "快速了解navigator API setAppBadge",
-    "description": "欢迎关注我的公众号：前端侦探在很多客户端应用程序中，一般会通过应用图标的角标来显示当前消息的数量，例如其实，web 中也有类似的设定，花两分钟了解一下吧一、navigator.setAppBadge现在的navigator早已不是...",
-    "url": "https://segmentfault.com/a/1190000042288003",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "3",
+    "title": "go源码分析——类型",
+    "description": "我们都知道怎么声明一个类型。例如type T struct { Name string} 。大家有没有思考过，当我们进行反射、接口动态派发、类型断言这些语言特性或机制，go语言是怎么识别这些类型的呢？其实编译器会给每种类型生成对...",
+    "url": "https://segmentfault.com/a/1190000042309109",
+    "author": "peacexu",
+    "home_url": "https://segmentfault.com/u/peacexu",
+    "votes": "1",
     "rank": 2
   },
   {
-    "title": "解决 docker-compose 配置postgresql中登陆失败的错误",
-    "description": "理论上来说运行以上的doccker-compose文件之后就可以直接根据所设置的用户名密码来登陆postgresql，但是尝试了很多此却总是报如下错误：用户名、密码不匹配，但是在其他人的设备上却没有问题。经检查docker容器也...",
-    "url": "https://segmentfault.com/a/1190000042293707",
-    "author": "李明",
-    "home_url": "https://segmentfault.com/u/crister_612f55567eb8c",
+    "title": "🎉Vue3+Vite2.6+TypeScript+ant-design-vue+egg.js 一键构建管理前后台管理系统",
+    "description": "Bag快速开发管理系统、门户网站、博客系统框架，提供基础的框架，快速搭建企业产品，响应式开发，你可以将它应用在任何需要服务端管理的应用。如：开发管理系统的 API 接口、门户网站博客、企业内部的业务管理、E...",
+    "url": "https://segmentfault.com/a/1190000042307367",
+    "author": "vipbic",
+    "home_url": "https://segmentfault.com/u/yangxiansheng_5a1b9b93a3a44",
     "votes": "1",
     "rank": 3
   },
   {
-    "title": "【JVM知识总结-9】类加载的过程",
-    "description": "类的加载过程包括5个阶段：加载、验证、准备、解析和初始化。加载加载的过程“加载”是“类加载”过程的一个阶段，不能混淆这两个名词。在加载阶段，虚拟机需要完成3件事：通过类的全限定名获取改类的二进制字节流将...",
-    "url": "https://segmentfault.com/a/1190000042293732",
-    "author": "AllenYang",
-    "home_url": "https://segmentfault.com/u/allenyang",
-    "votes": "2",
+    "title": "如何快速理解复杂业务，系统思考问题？",
+    "description": "对于复杂问题的思考其实是有层次的，从最表面的事件，到事件背后的规律，再到这个问题的结构模式，再到价值观，层层递进。在画完自己的业务系统因果回路图之后，再结合这个心智模型，思考自己的思考在哪个层次，...",
+    "url": "https://segmentfault.com/a/1190000042311795",
+    "author": "大淘宝技术",
+    "home_url": "https://segmentfault.com/u/alibabataoxijishu",
+    "votes": "1",
     "rank": 4
   },
   {
-    "title": "富媒体在客服IM消息通信中的秒发实践",
-    "description": "客服一站式平台旨在为得物生态内的客服域服务人员提供一站式的服务办公平台。我们有多条业务线，客服在和用户聊天的过程中，有很多场景需要发送富媒体。跟普通的文本传输相比，富媒体可以直观的让用户了解到消息...",
-    "url": "https://segmentfault.com/a/1190000042289219",
-    "author": "得物技术",
-    "home_url": "https://segmentfault.com/u/dewujishu",
+    "title": "你知道吗？chrome自动更新到104版本，居然引起Java服务内存泄漏",
+    "description": "前言近期在工作中，遇到了一次很有意思的内存泄漏，把排查过程和思路记下来，供大家参考和学习，如有不正确的，欢迎指正。起因最近几天很多半托管客户，突然报连接服务失败，登上服务器后查看内存很高，为了让客...",
+    "url": "https://segmentfault.com/a/1190000042309857",
+    "author": "i",
+    "home_url": "https://segmentfault.com/u/i_62f4ad94a52ca",
     "votes": "1",
     "rank": 5
+  },
+  {
+    "title": "揭秘，Vue3 性能优化之 Non-reactive Object",
+    "description": "在 Vue2 中，有一个老生常谈的话题，如何避免 data 中一个复杂对象（自身或属性对象）被默认被创建为响应式（Non-reactive Object）的过程？ 举个例子，有一个 Vue2 的组件的 data：",
+    "url": "https://segmentfault.com/a/1190000042309305",
+    "author": "五柳",
+    "home_url": "https://segmentfault.com/u/wjchumble",
+    "votes": "1",
+    "rank": 6
+  },
+  {
+    "title": "从 Islands Architecture 看前端有多卷",
+    "description": "大家好，我卡颂。最近，Remix团队的暴躁老哥Ryan Florence一连怼了好几个友商框架，比如：喷SolidStart抄Remix的文档怼Next.js抄Remix的API设计吐槽Astro、Qwik没有什么新鲜理念当然，这些推文发出不到一天就被老...",
+    "url": "https://segmentfault.com/a/1190000042307425",
+    "author": "卡颂",
+    "home_url": "https://segmentfault.com/u/kasong",
+    "votes": "1",
+    "rank": 7
+  },
+  {
+    "title": "node 管理子文件夹js文件执行",
+    "description": "运行node服务，使用child_process控制子文件夹js文件执行文件架构: {代码...} package.json {代码...} index.js {代码...} fileHelper.js {代码...} 运行效果",
+    "url": "https://segmentfault.com/a/1190000042308416",
+    "author": "点墨",
+    "home_url": "https://segmentfault.com/u/chencaize",
+    "votes": "1",
+    "rank": 8
   }
 ]

package/dist/sifou-monthly.json

@@ -5,7 +5,7 @@
     "url": "https://segmentfault.com/a/1190000042251637",
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "18",
+    "votes": "22",
     "rank": 1
   },
   {
@@ -14,7 +14,7 @@
     "url": "https://segmentfault.com/a/1190000042217200",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "22",
+    "votes": "23",
     "rank": 2
   },
   {
@@ -23,17 +23,8 @@
     "url": "https://segmentfault.com/a/1190000042184211",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "21",
-    "rank": 3
-  },
-  {
-    "title": "动画合成小技巧！CSS 实现动感的倒计时效果",
-    "description": "欢迎关注微信公众号： 前端侦探介绍一个 CSS 动画合成小技巧。先看效果这是一个非常“动感”的倒计时效果，通常在一些活动开场中比较常见，分析一下整个动画过程，不难发现，有以下几类动画数字的变化缩小和放大透...",
-    "url": "https://segmentfault.com/a/1190000042094549",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "22",
-    "rank": 4
+    "rank": 3
   },
   {
     "title": "CSS color-scheme 和夜间模式",
@@ -41,26 +32,17 @@
     "url": "https://segmentfault.com/a/1190000042184163",
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "18",
-    "rank": 5
-  },
-  {
-    "title": "高阶切图技巧！基于单张图片的任意颜色转换",
-    "description": "今天，要介绍一种基于 CSS mask-composite 的高级技巧。通过掌握它，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。通过单张 PNG/SVG 得到它的反向切图事情的经过是这样的，某...",
-    "url": "https://segmentfault.com/a/1190000042093361",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "14",
-    "rank": 6
+    "votes": "19",
+    "rank": 4
   },
   {
-    "title": "利用噪声构建美妙的 CSS 图形",
-    "description": "在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子：此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：...",
-    "url": "https://segmentfault.com/a/1190000042103702",
+    "title": "使用 CSS 构建强大且酷炫的粒子动画",
+    "description": "当然，不使用 HTML + CSS 的主要原因在于，粒子动画通常需要较多的粒子，而如果使用 HTML + CSS 的话势必需要过多的 DOM 元素，这也就导致了使用 HTML + CSS 构建的粒子动画在性能上毫无优势。",
+    "url": "https://segmentfault.com/a/1190000042283578",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "12",
-    "rank": 7
+    "votes": "18",
+    "rank": 5
   },
   {
     "title": "妙用 CSS 构建花式透视背景效果",
@@ -68,8 +50,8 @@
     "url": "https://segmentfault.com/a/1190000042267425",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "18",
-    "rank": 8
+    "votes": "20",
+    "rank": 6
   },
   {
     "title": "社区维基：将你的问答捐赠给社区",
@@ -77,8 +59,8 @@
     "url": "https://segmentfault.com/a/1190000042203704",
     "author": "fenbox",
     "home_url": "https://segmentfault.com/u/fenbox",
-    "votes": "12",
-    "rank": 9
+    "votes": "13",
+    "rank": 7
   },
   {
     "title": "防御式CSS是什么？这几点属性重点防御！",
@@ -86,17 +68,26 @@
     "url": "https://segmentfault.com/a/1190000042272755",
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "15",
-    "rank": 10
+    "votes": "18",
+    "rank": 8
   },
   {
-    "title": "使用 CSS 构建强大且酷炫的粒子动画",
-    "description": "当然，不使用 HTML + CSS 的主要原因在于，粒子动画通常需要较多的粒子，而如果使用 HTML + CSS 的话势必需要过多的 DOM 元素，这也就导致了使用 HTML + CSS 构建的粒子动画在性能上毫无优势。",
-    "url": "https://segmentfault.com/a/1190000042283578",
+    "title": "利用噪声构建美妙的 CSS 图形",
+    "description": "在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子：此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：...",
+    "url": "https://segmentfault.com/a/1190000042103702",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "15",
-    "rank": 11
+    "votes": "13",
+    "rank": 9
+  },
+  {
+    "title": "前端构建效率优化之路",
+    "description": "我们的系统（一个 ToB 的 Web 单页应用）前端单页应用经过多年的迭代，目前已经累积有大几十万行的业务代码，30+ 路由模块，整体的代码量和复杂度还是比较高的。",
+    "url": "https://segmentfault.com/a/1190000042256837",
+    "author": "chokcoco",
+    "home_url": "https://segmentfault.com/u/chokcoco",
+    "votes": "17",
+    "rank": 10
   },
   {
     "title": "今҈天҈真҈是҈热҈化҈了҈！",
@@ -105,7 +96,7 @@
     "author": "XboxYan",
     "home_url": "https://segmentfault.com/u/xboxyan",
     "votes": "16",
-    "rank": 12
+    "rank": 11
   },
   {
     "title": "试着换个角度理解低代码平台设计的本质",
@@ -113,17 +104,17 @@
     "url": "https://segmentfault.com/a/1190000042194285",
     "author": "pingan8787",
     "home_url": "https://segmentfault.com/u/pingan8787",
-    "votes": "11",
-    "rank": 13
+    "votes": "12",
+    "rank": 12
   },
   {
-    "title": "前端构建效率优化之路",
-    "description": "我们的系统（一个 ToB 的 Web 单页应用）前端单页应用经过多年的迭代，目前已经累积有大几十万行的业务代码，30+ 路由模块，整体的代码量和复杂度还是比较高的。",
-    "url": "https://segmentfault.com/a/1190000042256837",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "13",
-    "rank": 14
+    "title": "可视化拖拽组件库一些技术要点原理分析（四）",
+    "description": "本文是可视化拖拽系列的第四篇，比起之前的三篇文章，这篇功能点要稍微少一点，总共有五点：SVG 组件动态属性面板数据来源（接口请求）组件联动组件按需加载如果你对我之前的系列文章不是很了解，建议先把这三篇...",
+    "url": "https://segmentfault.com/a/1190000042282658",
+    "author": "谭光志",
+    "home_url": "https://segmentfault.com/u/woai3c",
+    "votes": "12",
+    "rank": 13
   },
   {
     "title": "一步步带你搞懂虚拟 DOM 的工作原理",
@@ -131,26 +122,8 @@
     "url": "https://segmentfault.com/a/1190000042195199",
     "author": "deepfunc",
     "home_url": "https://segmentfault.com/u/deepfunc",
-    "votes": "15",
-    "rank": 15
-  },
-  {
-    "title": "webpack 拆包：关于 splitChunks 的几个重点属性解析",
-    "description": "先来举个简单的栗子，wepack 设置中有 3 个入口文件：a.js、b.js 和 c.js，每个入口文件都同步 import 了 m1.js，不设置 splitChunks，配置下 webpack-bundle-analyzer 插件用来查看输出文件的内容，打包输出是这...",
-    "url": "https://segmentfault.com/a/1190000042093955",
-    "author": "deepfunc",
-    "home_url": "https://segmentfault.com/u/deepfunc",
-    "votes": "7",
-    "rank": 16
-  },
-  {
-    "title": "面试官：主说 Git Rebase 和 Git Merge 差异",
-    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
-    "url": "https://segmentfault.com/a/1190000042092852",
-    "author": "前端小智",
-    "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "11",
-    "rank": 17
+    "votes": "16",
+    "rank": 14
   },
   {
     "title": "【分享】从Mybatis源码中，学习到的10种设计模式",
@@ -158,8 +131,8 @@
     "url": "https://segmentfault.com/a/1190000042183733",
     "author": "小傅哥",
     "home_url": "https://segmentfault.com/u/fuzhengwei",
-    "votes": "11",
-    "rank": 18
+    "votes": "12",
+    "rank": 15
   },
   {
     "title": "一个简洁、强大、可扩展的前端项目架构是什么样的？",
@@ -167,8 +140,8 @@
     "url": "https://segmentfault.com/a/1190000042200631",
     "author": "卡颂",
     "home_url": "https://segmentfault.com/u/kasong",
-    "votes": "11",
-    "rank": 19
+    "votes": "12",
+    "rank": 16
   },
   {
     "title": "如何提出一个高质量的问题？",
@@ -177,7 +150,7 @@
     "author": "唯一丶",
     "home_url": "https://segmentfault.com/u/weiyi_5b04fb4aa815a",
     "votes": "11",
-    "rank": 20
+    "rank": 17
   },
   {
     "title": "Wuzzle，不 eject 也能定制 create-react-app 创建的 React 应用",
@@ -186,7 +159,7 @@
     "author": "乌柏木",
     "home_url": "https://segmentfault.com/u/wubomu",
     "votes": "14",
-    "rank": 21
+    "rank": 18
   },
   {
     "title": "使用前端技术实现静态图片局部流动效果 🌊",
@@ -195,7 +168,7 @@
     "author": "dragonir",
     "home_url": "https://segmentfault.com/u/dragonir",
     "votes": "9",
-    "rank": 22
+    "rank": 19
   },
   {
     "title": "搭建前端监控，采集用户行为的 N 种姿势",
@@ -204,7 +177,25 @@
     "author": "杨成功",
     "home_url": "https://segmentfault.com/u/ruidoc",
     "votes": "11",
-    "rank": 23
+    "rank": 20
+  },
+  {
+    "title": "Wuzzle，进行基于 webpack 的 JS 转译",
+    "description": "转译器（transpiler）是指能够进行文件到文件一对一转换的编译器（compiler）。在 JS 世界中，常见的开箱即可用的转译器有 typescript cli、babel cli 等，但他们一般只处理 .js、.ts 等脚本文件。而 webpack 尽...",
+    "url": "https://segmentfault.com/a/1190000042306044",
+    "author": "乌柏木",
+    "home_url": "https://segmentfault.com/u/wubomu",
+    "votes": "14",
+    "rank": 21
+  },
+  {
+    "title": "详聊immer.js高效复制与冻结\"对象\"的原理于局限性",
+    "description": "immer.js应该是2019年时候火起来的一个库, 他可以高效的复制一个对象(比如相对于JSON.parse(JSON.stringify(obj))), 并且冻结对这个对象上的一些值的修改权限。",
+    "url": "https://segmentfault.com/a/1190000042282263",
+    "author": "lulu_up",
+    "home_url": "https://segmentfault.com/u/lulu_up",
+    "votes": "9",
+    "rank": 22
   },
   {
     "title": "梳理 Webpack 知识体系与学习资源推荐",
@@ -213,16 +204,7 @@
     "author": "JackySummer",
     "home_url": "https://segmentfault.com/u/jackysummer",
     "votes": "14",
-    "rank": 24
-  },
-  {
-    "title": "Three.js系列: 在元宇宙看电影，享受 VR 视觉盛宴",
-    "description": "最近元宇宙的概念很火，并且受到疫情的影响，我们的出行总是受限，电影院也总是关门，但是在家里又没有看大片的氛围，这个时候我们就可以通过自己来造一个宇宙，并在 VR 设备（Oculus 、cardboard）中来观看。",
-    "url": "https://segmentfault.com/a/1190000042094334",
-    "author": "程序员秋风",
-    "home_url": "https://segmentfault.com/u/qiufeng_5a07f6cb96ee0",
-    "votes": "6",
-    "rank": 25
+    "rank": 23
   },
   {
     "title": "通向架子工的前端开发利器推荐",
@@ -231,7 +213,7 @@
     "author": "shanyue",
     "home_url": "https://segmentfault.com/u/xiange",
     "votes": "9",
-    "rank": 26
+    "rank": 24
   },
   {
     "title": "使用Three.js实现炫酷的赛博朋克风格3D数字地球大屏 🌐",
@@ -240,7 +222,7 @@
     "author": "dragonir",
     "home_url": "https://segmentfault.com/u/dragonir",
     "votes": "6",
-    "rank": 27
+    "rank": 25
   },
   {
     "title": "Redis 内存优化神技，小内存保存大数据",
@@ -249,7 +231,7 @@
     "author": "码哥字节",
     "home_url": "https://segmentfault.com/u/magebyte",
     "votes": "10",
-    "rank": 28
+    "rank": 26
   },
   {
     "title": "我有 7种 实现web实时消息推送的方案，7种！",
@@ -258,7 +240,7 @@
     "author": "程序员小富",
     "home_url": "https://segmentfault.com/u/chengxy",
     "votes": "14",
-    "rank": 29
+    "rank": 27
   },
   {
     "title": "你的 Tap bar  不够花里胡哨，试试这个！",
@@ -267,6 +249,24 @@
     "author": "前端小智",
     "home_url": "https://segmentfault.com/u/minnanitkong",
     "votes": "8",
+    "rank": 28
+  },
+  {
+    "title": "markdown 编辑器实现双屏同步滚动",
+    "description": "由于一直在使用 markdown 编辑器写技术文章，所以对于编写体验很敏感。我发现各大社区的 markdown 编辑器基本都有同步滚动功能。只不过有些做得好，有些做得马马虎虎。出于好奇，我就打算自己亲自实现一下这个功能。",
+    "url": "https://segmentfault.com/a/1190000042290360",
+    "author": "谭光志",
+    "home_url": "https://segmentfault.com/u/woai3c",
+    "votes": "6",
+    "rank": 29
+  },
+  {
+    "title": "Shopee在React Native 架构方面的探索",
+    "description": "React Native（下文简称 RN）是混合应用领域流行的跨端开发框架。RN 非常适合灵活多变的电商领域业务，由于 RN 是基于客户端渲染的技术，所以相较于 H5 页面，它在用户体验方面有一定优势。",
+    "url": "https://segmentfault.com/a/1190000042183220",
+    "author": "xiangzhihong",
+    "home_url": "https://segmentfault.com/u/xiangzhihong",
+    "votes": "6",
     "rank": 30
   }
 ]