@wcj/github-rank 22.7.16 → 22.7.19

package/web/data/sifou-weekly.json

@@ -1,75 +1,21 @@
 [
-  {
-    "title": "高阶切图技巧！基于单张图片的任意颜色转换",
-    "description": "今天，要介绍一种基于 CSS mask-composite 的高级技巧。通过掌握它，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。通过单张 PNG/SVG 得到它的反向切图事情的经过是这样的，某...",
-    "url": "https://segmentfault.com/a/1190000042093361",
-    "author": "chokcoco",
-    "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "12",
-    "rank": 1
-  },
-  {
-    "title": "动画合成小技巧！CSS 实现动感的倒计时效果",
-    "description": "欢迎关注微信公众号： 前端侦探介绍一个 CSS 动画合成小技巧。先看效果这是一个非常“动感”的倒计时效果，通常在一些活动开场中比较常见，分析一下整个动画过程，不难发现，有以下几类动画数字的变化缩小和放大透...",
-    "url": "https://segmentfault.com/a/1190000042094549",
-    "author": "XboxYan",
-    "home_url": "https://segmentfault.com/u/xboxyan",
-    "votes": "14",
-    "rank": 2
-  },
   {
     "title": "利用噪声构建美妙的 CSS 图形",
     "description": "在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子：此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：...",
     "url": "https://segmentfault.com/a/1190000042103702",
     "author": "chokcoco",
     "home_url": "https://segmentfault.com/u/chokcoco",
-    "votes": "8",
-    "rank": 3
-  },
-  {
-    "title": "Three.js系列: 在元宇宙看电影，享受 VR 视觉盛宴",
-    "description": "最近元宇宙的概念很火，并且受到疫情的影响，我们的出行总是受限，电影院也总是关门，但是在家里又没有看大片的氛围，这个时候我们就可以通过自己来造一个宇宙，并在 VR 设备（Oculus 、cardboard）中来观看。",
-    "url": "https://segmentfault.com/a/1190000042094334",
-    "author": "程序员秋风",
-    "home_url": "https://segmentfault.com/u/qiufeng_5a07f6cb96ee0",
-    "votes": "5",
-    "rank": 4
-  },
-  {
-    "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": "3",
-    "rank": 5
-  },
-  {
-    "title": "他们齐聚 2022 ECUG Con，只为「中国技术力量」",
-    "description": "后来的后来，计算机编程语言百家争鸣，从主流的 Java、C、Python、PHP、JavaScript……到新型的 Go、Go+、Taichi 等，给了技术爱好者们更多的选择。",
-    "url": "https://segmentfault.com/a/1190000042090195",
-    "author": "snakesss",
-    "home_url": "https://segmentfault.com/u/snakesss",
-    "votes": "3",
-    "rank": 6
-  },
-  {
-    "title": "Nginx部署配置",
-    "description": "常用命令启动： {代码...} 立即停止： {代码...} 优雅停止： {代码...} 重启 {代码...} 查看配置文件是否正常，无语法错误 {代码...} 查看日志 {代码...} upstream基本语法upstream 的基本语法如下，一个 upstrea...",
-    "url": "https://segmentfault.com/a/1190000042089218",
-    "author": "MangoGoing",
-    "home_url": "https://segmentfault.com/u/nulidexiaocongmang",
-    "votes": "4",
-    "rank": 7
+    "votes": "9",
+    "rank": 1
   },
   {
-    "title": "面试官：主说 Git Rebase 和 Git Merge 差异",
-    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
-    "url": "https://segmentfault.com/a/1190000042092852",
-    "author": "前端小智",
-    "home_url": "https://segmentfault.com/u/minnanitkong",
-    "votes": "6",
-    "rank": 8
+    "title": "冴羽答读者问：如何学习更有计划性、提升更稳更快？",
+    "description": "算是一个前端的时间也有五年了，今年也刚好满 30 岁了，感觉自己一直忙着完成业务，为了保持竞争力、不落伍等原因而学习新的框架、工具；回想起来年少轻狂浪费了不少时间，有了老婆孩子之后学习的时间也越来越少...",
+    "url": "https://segmentfault.com/a/1190000042178486",
+    "author": "冴羽",
+    "home_url": "https://segmentfault.com/u/yayu",
+    "votes": "8",
+    "rank": 2
   },
   {
     "title": "无需CORS，用nginx解决跨域问题，轻松实现低代码开发的前后端分离",
@@ -78,7 +24,7 @@
     "author": "葡萄城技术团队",
     "home_url": "https://segmentfault.com/u/grapecity",
     "votes": "1",
-    "rank": 9
+    "rank": 3
   },
   {
     "title": "Redis 内存优化神技，小内存保存大数据",
@@ -86,17 +32,35 @@
     "url": "https://segmentfault.com/a/1190000042103541",
     "author": "码哥字节",
     "home_url": "https://segmentfault.com/u/magebyte",
-    "votes": "3",
-    "rank": 10
+    "votes": "4",
+    "rank": 4
   },
   {
-    "title": "CSS Houdini：用浏览器引擎实现高级CSS效果",
-    "description": "Houdini被称之为Magic of styling and layout on the web，看起来十分神秘，但实际上，Houdini并非什么神秘组织或者神奇魔法，它是一系列与CSS引擎相关的浏览器API的总称。",
-    "url": "https://segmentfault.com/a/1190000042078359",
-    "author": "vivo互联网技术",
-    "home_url": "https://segmentfault.com/u/vivo_tech",
-    "votes": "1",
-    "rank": 11
+    "title": "主流移动端组件库的对比和分析",
+    "description": "随着前端的发展，组件库也是层出不穷，一个完善的组件库能极大提高开发效率，让开发者只需要专注于业务逻辑，而不需要考虑基础组件复用性、扩展性、稳定性的问题。面对众多的组件库，该如何进行选择呢？本篇将从...",
+    "url": "https://segmentfault.com/a/1190000042112945",
+    "author": "京东设计中心JDC",
+    "home_url": "https://segmentfault.com/u/jingdongshejizhongxin",
+    "votes": "2",
+    "rank": 5
+  },
+  {
+    "title": "利用vue-3d-loader同时加载多个3D模型",
+    "description": "众所周知ThreeJS是web端用于加载3D模型的JS库，广泛应用于物联网及部分游戏行业中，其强大就强大在可以加载大多数类型的3D模型，如：.dae/.fbx/.gltf(.glb)/.obj/.ply/.stl/.json的模型。",
+    "url": "https://segmentfault.com/a/1190000042112206",
+    "author": "深夜徘徊",
+    "home_url": "https://segmentfault.com/u/king2088",
+    "votes": "2",
+    "rank": 6
+  },
+  {
+    "title": "『你写的Promise, 是完美的吗?』",
+    "description": "《手写 Promise》是一个经典的问题，基本上大家上手都可以按照自己的理解，写出来一个 promise, 有一天个朋友问我，\"手写 Promise 要写到什么程度才是合格的 ?\", 这也引起了我的兴趣和思考, \"怎么样的 Promise ，...",
+    "url": "https://segmentfault.com/a/1190000042111165",
+    "author": "斑驳光影",
+    "home_url": "https://segmentfault.com/u/zqbright",
+    "votes": "5",
+    "rank": 7
   },
   {
     "title": "go-zero微服务实战系列（九、极致优化秒杀性能）",
@@ -105,16 +69,7 @@
     "author": "kevinwan",
     "home_url": "https://segmentfault.com/u/kevinwan",
     "votes": "2",
-    "rank": 12
-  },
-  {
-    "title": "Go学习笔记-Zap日志",
-    "description": "mu属性主要是为了确保原子操作，prefix设置每一行的前缀，flag设置输出的各种属性，比如时间、行号、文件路径等。out输出的方向，用于把日志存储文件。",
-    "url": "https://segmentfault.com/a/1190000042094912",
-    "author": "IT小马",
-    "home_url": "https://segmentfault.com/u/itxiaoma",
-    "votes": "2",
-    "rank": 13
+    "rank": 8
   },
   {
     "title": "SegmentFault 思否技术周刊 -- 这份 Webpack 有点料！",
@@ -122,44 +77,35 @@
     "url": "https://segmentfault.com/a/1190000042104271",
     "author": "Beverly",
     "home_url": "https://segmentfault.com/u/beverly0",
-    "votes": "2",
-    "rank": 14
-  },
-  {
-    "title": "用前端构建工具打包后端服务，我到底经历什么",
-    "description": "看到这个 标题，是的，我本是个后端，最近要写点 node.js， 之前写前端，知道 npm build 一下，那么用 javascript 写的后端程序也要 npm build 吧，好的，作为个 gopher ， 带着对 javascript 的刻板印象就开干了。",
-    "url": "https://segmentfault.com/a/1190000042092435",
-    "author": "小白要生发",
-    "home_url": "https://segmentfault.com/u/xiaobaiyaoshengfa",
-    "votes": "1",
-    "rank": 15
-  },
-  {
-    "title": "记录遇到的一个循环依赖问题",
-    "description": "但是我在使用的时候却报了notifyService的循环依赖。NG0200: Circular dependency in DI detected for ThyNotifyService如图",
-    "url": "https://segmentfault.com/a/1190000042096697",
-    "author": "weiewiyi",
-    "home_url": "https://segmentfault.com/u/chenchu_6110ed583800c",
     "votes": "3",
-    "rank": 16
+    "rank": 9
   },
   {
-    "title": "电商商品系统的演进分析",
-    "description": "好久没有给大家带来新的知识分享了，2022的第一篇（是的，你没看错！第一篇）就给大家讲讲商品模型的演进过程吧！希望对大家做的工作有所帮助~~",
-    "url": "https://segmentfault.com/a/1190000042094414",
-    "author": "大愚Talk",
-    "home_url": "https://segmentfault.com/u/helei112g",
-    "votes": "3",
-    "rank": 17
+    "title": "CSS color-scheme 和夜间模式",
+    "description": "欢迎关注微信公众号：前端侦探介绍一个和深色模式相关的CSS属性：color-scheme一、什么是 color-scheme？color-scheme顾名思义，即为“配色方案”，在系统中指的是“白天模式”和“夜间模式”。使用这个属性可以轻松的...",
+    "url": "https://segmentfault.com/a/1190000042184163",
+    "author": "XboxYan",
+    "home_url": "https://segmentfault.com/u/xboxyan",
+    "votes": "8",
+    "rank": 10
   },
   {
-    "title": "DNS 系列（二）：DNS 记录及工作方式，你了解吗？",
-    "description": "在上一篇《DNS 系列（一）：为什么更新了 DNS 记录不生效？》中，我们主要讲解了 DNS 和 DNS 传播，知道了网络通信主要通过 IP 地址来进行，而域名系统（DNS）则是保证用户在浏览器中输入域名之后，可以访问到对...",
-    "url": "https://segmentfault.com/a/1190000042094981",
-    "author": "云叔_又拍云",
-    "home_url": "https://segmentfault.com/u/yunshu_blog",
+    "title": "记录一次 Online DDL 操作",
+    "description": "操作：alter table user add deleted boolean NOT NULL default false comment '用户注销标识' , algorithm=inplace, lock=none;",
+    "url": "https://segmentfault.com/a/1190000042107671",
+    "author": "Cindy",
+    "home_url": "https://segmentfault.com/u/cindy_583d3583ae952",
     "votes": "1",
-    "rank": 18
+    "rank": 11
+  },
+  {
+    "title": "html2canvas将指定区域导出为图片（js将div导出为图片）",
+    "description": "如何使用JS截取HTML页面为图片呢，html2canvas.js这个插件可以轻松实现。这个原理很简单，就是html2canvas.js可以将当页面渲染成一个Canvas图片，然后保存下来即可。它不需要来自服务器任何渲染，整张图片都是在...",
+    "url": "https://segmentfault.com/a/1190000042106889",
+    "author": "TANKING",
+    "home_url": "https://segmentfault.com/u/tanking",
+    "votes": "2",
+    "rank": 12
   },
   {
     "title": "Vue 部署后强制客户端刷新获取最新的代码资源【纯前端】",
@@ -168,34 +114,16 @@
     "author": "songxianling1992",
     "home_url": "https://segmentfault.com/u/songxianling1992",
     "votes": "5",
-    "rank": 19
-  },
-  {
-    "title": "死锁问题排查过程-间隙锁的复现以及解决",
-    "description": "我们在开启多线程对数据库进行操作的时候，先批量对数据进行删除，然后再新增，本来想着是考虑到不走更新，性能会提升，但是执行的时候发现报错，执行的sql等待超时，阻塞了进程，dbcp连接池被打满，数据库表访问...",
-    "url": "https://segmentfault.com/a/1190000042091156",
-    "author": "skyarthur",
-    "home_url": "https://segmentfault.com/u/skyarthur",
-    "votes": "2",
-    "rank": 20
-  },
-  {
-    "title": "H5实现生成urlscheme并从H5跳转到小程序",
-    "description": "在2022年之前，想要在H5打开小程序只需要在平台上设置urlscheme即可，但是自 2022 年 4 月 11 日起，URL Scheme有效期最长 30 天，不再支持永久有效的URL Scheme、不再区分短期有效URL Scheme与长期有效URL Schem...",
-    "url": "https://segmentfault.com/a/1190000042089388",
-    "author": "huaweichenai",
-    "home_url": "https://segmentfault.com/u/huaweichenai",
-    "votes": "1",
-    "rank": 21
+    "rank": 13
   },
   {
-    "title": "html2canvas将指定区域导出为图片（js将div导出为图片）",
-    "description": "如何使用JS截取HTML页面为图片呢，html2canvas.js这个插件可以轻松实现。这个原理很简单，就是html2canvas.js可以将当页面渲染成一个Canvas图片，然后保存下来即可。它不需要来自服务器任何渲染，整张图片都是在...",
-    "url": "https://segmentfault.com/a/1190000042106889",
+    "title": "JavaScript一键复制内容（document.execCommand原生JS设置剪贴板）",
+    "description": "有时候为了方便用户快速复制页面的内容，一般的做法就是添加一个按钮给用户点击一下就复制下来了，这边使用JavaScript原生的方法进行设置剪贴板。",
+    "url": "https://segmentfault.com/a/1190000042178536",
     "author": "TANKING",
     "home_url": "https://segmentfault.com/u/tanking",
     "votes": "2",
-    "rank": 22
+    "rank": 14
   },
   {
     "title": "DNS 系列（三）：如何免受 DNS 欺骗的侵害",
@@ -204,25 +132,25 @@
     "author": "云叔_又拍云",
     "home_url": "https://segmentfault.com/u/yunshu_blog",
     "votes": "1",
-    "rank": 23
+    "rank": 15
   },
   {
-    "title": "围绕Vue 3 Composition API构建一个应用程序，包含一些最佳实践！",
-    "description": "有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。",
-    "url": "https://segmentfault.com/a/1190000042051566",
-    "author": "前端小智",
-    "home_url": "https://segmentfault.com/u/minnanitkong",
+    "title": "[Hacker News 周报] Vite 3.0 发布；Bun 性能实测；性能更强的 Prometheus 替代方案",
+    "description": "00:12 Vite 发布3.0版本00:30 VictoriaMetrics｜Prometheus 的开源替代品01:02 对 Bun 和 Node.js 对比实测01:49 Cleanupphotos｜修图工具02:14 Vim 在线交互式学习平台02:36 推荐《PostgreSQL 14 Internals》一书",
+    "url": "https://segmentfault.com/a/1190000042181979",
+    "author": "aryu",
+    "home_url": "https://segmentfault.com/u/aryu",
     "votes": "1",
-    "rank": 24
+    "rank": 16
   },
   {
-    "title": "精读《MinusOne, PickByType, StartsWith...》",
-    "description": "TS 没有 “普通” 的运算能力，但涉及数字却有一条生路，即 TS 可通过 ['length'] 访问数组长度，几乎所有数字计算都是通过它推导出来的。",
-    "url": "https://segmentfault.com/a/1190000042092948",
-    "author": "黄子毅",
-    "home_url": "https://segmentfault.com/u/aoyangyudakong",
+    "title": "图扑 Web 可视化引擎在仿真分析领域的应用",
+    "description": "在数字孪生和仿真研究过程中，会产生大量和三维空间相关的数值信息，比如设备外观的扫描数据、地形扫描数据、生产设备温度场/压力场、流体的速度场、流体扩散，以及各种仿真数据：速度，压力，应力，温度等。",
+    "url": "https://segmentfault.com/a/1190000042114034",
+    "author": "hightopo",
+    "home_url": "https://segmentfault.com/u/hightopo",
     "votes": "1",
-    "rank": 25
+    "rank": 17
   },
   {
     "title": "网页长按保存及识别二维码",
@@ -231,7 +159,16 @@
     "author": "山头人汉波",
     "home_url": "https://segmentfault.com/u/johanazhu",
     "votes": "1",
-    "rank": 26
+    "rank": 18
+  },
+  {
+    "title": "2022最新慕课网课程大全_完整无密_百度网盘分享",
+    "description": "所有课程百分百高清，完整，原画，包含所有的 视频+素材+课件+源码，官方同步体验！所有课程格式 MP4格式无密 可以通过网盘在线学习也可下载到本地，方便快捷！目前已收录二十多家IT机构累计3000+课程，且在持续...",
+    "url": "https://segmentfault.com/a/1190000042180486",
+    "author": "小道哥",
+    "home_url": "https://segmentfault.com/u/xiaodaoge",
+    "votes": "1",
+    "rank": 19
   },
   {
     "title": "React Table 表格组件使用教程 排序、分页、搜索过滤筛选功能实战开发",
@@ -240,7 +177,34 @@
     "author": "蒋川",
     "home_url": "https://segmentfault.com/u/jiangchuan_5ecf6be720834",
     "votes": "1",
-    "rank": 27
+    "rank": 20
+  },
+  {
+    "title": "vscode 解析——如何维护海量模块依赖关系(二)",
+    "description": "前言上次我们解释了 vscode 这种大型项目设计依赖注入管理海量的模块有什么好处。也提到了 DI 必须有这样一种机制：1、模块与模块之间的无源码依赖（这里的模块主要指类）2、只依赖接口/抽象，不依赖具体实现3、...",
+    "url": "https://segmentfault.com/a/1190000042178445",
+    "author": "混沌福王",
+    "home_url": "https://segmentfault.com/u/flywang",
+    "votes": "1",
+    "rank": 21
+  },
+  {
+    "title": "Go 原生插件使用问题全解析",
+    "description": "文｜丁飞（花名：路德 )蚂蚁集团高级工程师深耕于 SOFAMesh 产品的商业化落地 主要方向为基于服务网格技术的系统架构升级方案设计与落地本文 4394 字 阅读 10 分钟｜前言｜MOSN 作为蚂蚁集团在 ServiceMesh 解决...",
+    "url": "https://segmentfault.com/a/1190000042104429",
+    "author": "SOFAStack",
+    "home_url": "https://segmentfault.com/u/sofastack",
+    "votes": "1",
+    "rank": 22
+  },
+  {
+    "title": "vue3 解决 ESLint 各类型错误",
+    "description": "前期项目中忽略了 eslint 检查，导致一运行 npm run lint 出现两千多条错误(இдஇ; ) 造孽啊花了两三天搞完，做个错误汇总。",
+    "url": "https://segmentfault.com/a/1190000042177952",
+    "author": "Shyla",
+    "home_url": "https://segmentfault.com/u/xiaoniezi",
+    "votes": "1",
+    "rank": 23
   },
   {
     "title": "分库分表真的适合你的系统吗？聊聊分库分表和NewSQL如何选择",
@@ -249,16 +213,25 @@
     "author": "CoderW",
     "home_url": "https://segmentfault.com/u/coderw_5fd9998278d42",
     "votes": "2",
-    "rank": 28
+    "rank": 24
   },
   {
-    "title": "Go 原生插件使用问题全解析",
-    "description": "文｜丁飞（花名：路德 )蚂蚁集团高级工程师深耕于 SOFAMesh 产品的商业化落地 主要方向为基于服务网格技术的系统架构升级方案设计与落地本文 4394 字 阅读 10 分钟｜前言｜MOSN 作为蚂蚁集团在 ServiceMesh 解决...",
-    "url": "https://segmentfault.com/a/1190000042104429",
-    "author": "SOFAStack",
-    "home_url": "https://segmentfault.com/u/sofastack",
+    "title": "go-zero微服务实战系列（十一、大结局）",
+    "description": "本篇是整个系列的最后一篇了，本来打算在系列的最后一两篇写一下关于k8s部署相关的内容，在构思的过程中觉得自己对k8s知识的掌握还很不足，在自己没有理解掌握的前提下我觉得也很难写出自己满意的文章，大家看了...",
+    "url": "https://segmentfault.com/a/1190000042112503",
+    "author": "kevinwan",
+    "home_url": "https://segmentfault.com/u/kevinwan",
     "votes": "1",
-    "rank": 29
+    "rank": 25
+  },
+  {
+    "title": "web-compiler：mvvm 的实现思路",
+    "description": "然后想了一下Svelte 组件 大体思路定义一套dsl,然后通过Svelte编译成js css 代码，html对应的dom通过js生成。顺着这个思路写了一个最小化的 mvvm 的示例",
+    "url": "https://segmentfault.com/a/1190000042114347",
+    "author": "yangrd",
+    "home_url": "https://segmentfault.com/u/yangrd",
+    "votes": "1",
+    "rank": 26
   },
   {
     "title": "纯css实现自动显示“全文”链接",
@@ -267,6 +240,33 @@
     "author": "Isabella",
     "home_url": "https://segmentfault.com/u/isabella_5b593d1fde470",
     "votes": "1",
+    "rank": 27
+  },
+  {
+    "title": "纯CSS实现四种方式文本反差色效果",
+    "description": "如上图所示，文字随着界面的交互变化会修改文字的颜色形成反差色，让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果，这样的效果肯定见过不少，在一些比较注重设计的网站都有类似的交互效果出现...",
+    "url": "https://segmentfault.com/a/1190000042099252",
+    "author": "南城大前端",
+    "home_url": "https://segmentfault.com/u/nanchengfe",
+    "votes": "1",
+    "rank": 28
+  },
+  {
+    "title": "脉脉上的 \"前端三大浪漫\" 是个啥？",
+    "description": "背景今天在陌陌脉脉看到一个帖子，讲到前端三大浪漫.一、富文本编辑器富文本编辑器市面上已经有很多优秀的开源版本了，但是问题在于每个产品的富文本编辑器需求不一样，所以可能导致有一些时候需要手撸编辑器例如...",
+    "url": "https://segmentfault.com/a/1190000042102319",
+    "author": "PeterTan",
+    "home_url": "https://segmentfault.com/u/jerrytanjinjie",
+    "votes": "4",
+    "rank": 29
+  },
+  {
+    "title": "许式伟：Go+ 演进之路",
+    "description": "7 月 10 日，一年一度的 ECUG Con 2022 在线上圆满举行。许式伟作为七牛云 CEO、ECUG 社区发起人、Go+ 语言发明人，为大家来带了《Go+ 演进之路》的主题演讲。以下内容根据演讲实录整理。 大家好，欢迎来到 ECUG ...",
+    "url": "https://segmentfault.com/a/1190000042113338",
+    "author": "七牛云",
+    "home_url": "https://segmentfault.com/u/portal_qiniu_com",
+    "votes": "1",
     "rank": 30
   }
 ]