BytePower 技术周刊 - 031
📘 封面
位于河北省张家口市崇礼县的万龙滑雪场。冬天来了，大家滑雪也要注意安全哦。
📖 文章
System Design ☞（英文）
图文教程描述系统设计的基础知识，推荐阅读。
鹅厂练习 13 年 Coding 后，我悟了 ☞（中文）
👉 导读
本文主要受《程序员修炼之道: 通向务实的最高境界》、《架构整洁之道》、《Unix 编程艺术》启发。我不是第一个发明这些原则的人，甚至不是第一个总结出来的人，别人都已经写成书了！务实的程序员对于方法的总结，总是殊途同归。
Google Headless New ☞（英文）
What’s new in Headless? Before we dive into the recent Headless improvements, it’s important to understand how the “old” Headless worked. The command-line snippet we showed earlier uses the --headless command-line flag, suggesting that Headless is just a mode of operation of the regular Chrome browser. Perhaps surprisingly, this wasn’t actually true. Technically, the old Headless was a separate, alternate browser implementation that happened to be shipped as part of the same Chrome binary. It doesn’t share any of the Chrome browser code in //chrome.
chrome --headless --print-to-pdf https://developer.chrome.com/实用 Web API 规范 ☞（中文）
这个问题困扰了我很长时间，始于我求学时期，每一次都需要与团队成员进行交流和讨论。 从最初的自由风格到后来的 REST，我经常向项目组引用 Github v3 和 Foursqure API（已经无法访问，暴露年龄） 文档。 然而，在实践过程中，仍然会有一些与实际工作或公司通用规范不匹配的情况， 这时候我需要做一些补充工作。最终，我会撰写一个简要的 DEVELOPMENT.md 文档，以描述设计方案。
但我对该文档一直有更多的想法，它还不够完善。因此，我想整理出一份简单（Simple）而实用（Pragmatic）的 Web API 最佳实践，也就是本文。
扩展阅读
《现代图片性能优化及体验优化指南》全集 ☞（中文）
本文，就将从各个方面阐述，在各种新特性满头飞的今天，我们可以如何尽可能的对我们的图片资源，进行性能优化及体验优化。
| 图片类型 | Alpha 通道 | 动画 | 编解码性能 | 压缩算法 | 颜色支持 | 内存占用 | 兼容性 |
|---|---|---|---|---|---|---|---|
| GIF | 支持 | 支持 | 较高 | 无损压缩 | 索引色(256) | 基本一致 | ALL |
| PNG-8/PNG-24 | 支持 | 不支持 | 较高 | 无损压缩 | 索引色(256)\直接色 | 基本一致 | ALL |
| JPEG | 不支持 | 不支持 | 较高 | 有损压缩 | 直接色 | 基本一致 | ALL |
| WebP | 支持 | 支持 | 编解码性能差（低配设备更为显著） | 有损压缩\无损压缩 | 直接色 | 基本一致 | 高版本 Chrome\Opera\Android |
| JPEG XL | 支持 | 支持 | 编解码性能优于 WebP | 有损压缩\无损压缩 | 直接色 | 基本一致 | 部分高版本 Chrome\Opera\Firefox\Edge |
| AVIF | 支持 | 支持 | 编解码性能优于 WebP，低于 JPEG XL | 有损压缩\无损压缩 | 直接色 | 基本一致 | 高版本 Chrome\Opera\Android\Edge |
Dioxus ☞
Dioxus 是一个可移植的、高性能的、符合人体工程学的框架，使用 Rust 语言构建跨平台的用户界面。
fn app(cx: Scope) -> Element {
let mut count = use_state(cx, || 0);
cx.render(rsx! {
h1 { "High-Five counter: {count}" }
button { onclick: move |_| count += 1, "Up high!" }
button { onclick: move |_| count -= 1, "Down low!" }
})
}Dioxus 可用于生成 网页前端、桌面应用、静态网站、移动端应用、TUI 程序、等多类平台应用。
如果你能够熟悉使用 React 框架，那 Dioxus 对你来说将非常简单。
flexbox ☞（英文）
介绍 flexbox 基础的文章，图片较多，适合初级开发者阅读。
ULID ☞
UUID 替代方案。
🧰 工具
OrbStack ☞
Mac 平台替代 Docker Hub 的 App，界面更加简洁，启动比 Docker Hub 快。
Awfice ☞
Awfice - the world smallest office suite
Appinn: Awfice 是一款世界上最小的办公套件工具，包括文本编辑、表格、绘图、幻灯片、代码编辑器、计算器，每款工具均不到 1KB，实际上都只是一行代码，纯 HTML 网页，即开即用，无任何附加功能，包括保存。
CronTool ☞
可以用于创建或者检查你的 crontab 表达式。
Pot (派了个萌的翻译器) ☞
和 Bob 的类似的划词翻译软件，可以配置自己需要的翻译平台。