微游技术部一周分享 20240114期
本周关键字：svg画图，a标签下载，react hook，apisix gzip，node性能分析，go 聊天室，go mapstructure，确定按钮位置，技能cd效果，页面添加banner，ADB命令。
大家好，以下是微游互娱技术部本周的分享：
1. [Web开发] 用svg画一个中间透明的关闭图标
关闭图标是网页中最常见的图标之一，使用png图片作为关闭图标是一种办法，但使用png图片性能稍差一些，且为了应对浏览器的夜间模式需要准备两套不同颜色的图片，而纯CSS实现的关闭图标性能更好且在夜间模式下自动调整颜色。
本文介绍如何直接使用svg画一个中间透明的图标。
2. [Web开发] a标签下载出现预览场景
在在线文档系统中，对于页面上的附件下载，一般快速实现方式，是使用 a 标签的 download 属性，直接下载文件。但是在测试中发现，在一些特殊情况下，会变成在线预览。同时，我们也希望让 json 文件也以附件形式下载。本文针对这种情况进行说明，并列举对应的解决方法。
3. [Web开发] 如何实现获取窗口滚动距离的 React Hook
获取滚动距离是页面中常见的操作，获取滚动距离之后可以根据不同滚动位置实现不同特效，如导航栏特效、动画效果等。
在原生 DOM 操作中一般是通过添加 scroll 事件监听可以获取到滚动位置，在 React 应用中，将这一部分逻辑封装成一个 React Hook 可以更方便使用、维护和复用代码逻辑。
本文介绍 React 应用中的具体实现。
4. [ApiSix] Apisix 开启 gzip
最近使用 Apisix 网关时,需要开启 gzip 功能，通过查阅资料学习，了解了几种开启 gzip 的方式，本文记录2种 Apisix 开启 gzip的方式。
5. [Node.js] Node使用v8-profiler进行性能分析
在开发中如何分析Node.js性能呢？首当其冲想到的是Profiler，Node本身也内置了，除此之外，也可以使用 v8-profiler-node8 来进行 CPU 性能分析。
本文简要介绍如何使用 v8-profiler-node8 来分析 Node.js 应用程序的 CPU 性能。
6. [Go开发] grpc+protobuf实战--一个去中心化的聊天室
传统的聊天室主要是基于c/s架构，需要有一个服务端完成各个客户端的聊天转发。本文使用golang+grpc+protobuf，设计一个去中心化、局域网自发现的聊天客户端。
7. [Go开发] GO使用 mapstructure 解析 json
mapstructure 是一个 Go 库，用于将通用映射值解码为结构，反之亦然，同时提供有用的错误处理。
本文介绍这个库的实现原理，使用方法，以及如何使用 mapstructure 来解析 json。
8. [产品设计] 为什么“确定”按钮要放在右边
大家应该都见到过弹窗、表单里的"确定"和"取消"按钮吧，这两个按钮大家还记得会放在页面中的哪个位置吗？
本文介绍这类操作按钮的摆放原则：
将主要操作放在对话框的右侧，将次要操作放在左侧，可以减少用户的视觉注视，与用户期望的按钮功能相匹配，并提供更高效的任务流程。
9. [Cocos Creator] 实现技能CD
说到技能CD冷却，相信大家会想到王者荣耀，英雄联盟和dota等游戏。本文用Cocoscreator 3.8实现技能冷却的效果。
10. [Android] Android — 通过页面根布局添加Banner广告
有时候，我们希望把Banner广告常驻在页面中，提高变现效率。为了不遮挡主页面内容，需要把Banner广告和主页面分隔开。本文简单介绍下如何通过操作页面根布局添加Banner广告，以及如何与主页面分隔。
11. [Android] ADB命令详解
本文介绍 ADB 中的常用命令和使用方法。
以上。