微游技术部一周分享 20230917期
本周关键字：进度条设计，css特殊属性，fiddler修改数据，docusaurus接入adsense，Android光线传感器，nginx ingress 413错误，backdrop-filter位置失效，postgres json数据, headless ui动画, 子弹跟踪效果，golang闭包
大家好，以下是微游互娱技术部本周的分享：
1. [产品设计] 关于进度条的设计
在产品任务流程中增加一个清晰可见的进度条来帮助用户追踪信息，利用实时反馈当前进度让用户具有掌控感，并且还能通过趣味化的视觉效果或提供有帮助的信息来消耗其等待的时间，甚至一度超出用户预期，惊喜之余，用户的接受程度自然也就更高。
本文介绍如何设计一个进度条。
2. [Web开发] CSS特殊属性值inherit、initial和revert的使用
在CSS中，inherit、initial、revert是几个相对比较冷门的属性值，很多前端开发者几乎从没用过这几个属性值。但这几个属性值在某些特定场景下非常好用，可以写出更简洁、BUG更少的CSS代码。
inherit、initial和revert这几个特殊值可用于任意属性，用于控制层叠。本文介绍了几个简单的应用示例。
3. [软件测试] Fiddler篡改数据
本文介绍使用Fiddler修改接口数据。
4. [Web开发] 如何为Docusaurus站点接入AdSense广告SDK
本文介绍如何为docusaurus站点编写一个简单的AdSense插件。
5. [Android开发] Android 传感器（四）— 使用光线传感器实现自动调节页面亮度
大部分手机都有跟随外界光照强度自动调节屏幕亮度的功能，如果用手挡住前置摄像头区域屏幕会自动变暗，移开手后会自动变亮。
本文介绍如何使用光线传感器实现类似的效果。
6. [k8s] Nginx Ingress http 请求413状态码问题及解决方法
https://overstarry.vip/posts/nginx-ingress_http请求413问题及解决方法/
最近在调用一个上传文件的接口时，发现接口调用响应状态码为413,并且控制台显示跨域错误信息。查找了相关信息，得知 413 状态码表示请求的包体过大导致的。
出现这种情况，有2种解决方案:
-
- 调整上传文件的方式
-
- 调整网关的参数。
本文介绍了第二种方式调整网关客户端请求体最大值的参数的具体实现方法。
7. [Web开发] backdrop-filter引起position:fixed失效
最近项目中,对于一些元素使用了fixed(相对于屏幕视口（viewport）的位置来指定元素位置),但是却出现一些特殊的现象：使用了position:fixed;top：0;left：0的元素，居然不是处于窗口的左上角，且会跟着滚动条一起滚动。本文针对这个现象的疑惑，做个解释以及对应的解决方案
8. [Postgres] Postgres数据类型json jsonb入门
本文主要介绍 PostgreSQL特性 JSON 和 JSONB 数据类型
JSON 数据类型让我们可以在 PostgreSQL 中存储 JSON 格式的数据，使得 PostgreSQL 不仅能处理结构化数据，还能处理半结构化或非结构化数据。
9. [Web开发] 使用 Headless UI 的 Transition 组件实现简单动画组件
页面中为一些元素加入适当的动画效果可以带来非常不错的用户体验，比如滚动到指定位置渐入动画显示、点击按钮从侧边缓慢划入显示侧边栏等动画。在 Web 开发中，已有不少成熟的动画解决方案，如原生的 transition、animation 等 CSS 属性，Vue Trasition 组件, 动画库 Framer Motion, GSAP 等。
本文介绍如何使用 Headless UI 的 Transition 组件实现简单的动画组件。该组件提供直观简单的 API 帮助快速方便的为组件添加动画效果。
10. [游戏开发] 用向量实现子弹跟踪效果
在很多游戏中，跟踪子弹是一个在许多射击游戏或策略游戏中都会出现的效果，它允许子弹跟踪并击中移动的目标。
本文介绍如何使用向量来实现子弹的跟踪效果。
11. [Go开发] golang 闭包理解学习
本文介绍golang的闭包。闭包是Go语言中的重要概念，它允许你更灵活地处理函数和变量，实现一些有趣和强大的编程模式。通过实践和深入理解这些概念，你可以更好地利用Go语言的强大功能。
以上。