#2 现代CSS的一切

😈 专题
- Articles
- CSS toys
📖 推荐文章
- 设计
- 技术之外
🔧 工具推荐
💬 Twitter & Discussions
👋 写在最后

大家好，今天这是我们 Bytes by Alfred 的第2期。RSS订阅请看 RssHub/zhubai/alfxjx
最近想了一下，周刊除了推荐文章之外，最好每周有一个关注点，这样给人一种充满主题的感觉。所以本期除了介绍一些推荐阅读的文章和工具之外，一个主题就是关于现代CSS的一些文章教程和工具库。

😈 专题

Articles

State of CSS 2022 2022 CSS 风向。其实网上的 state of 系列都还挺有意思的。
State of the Web: Atomic CSS，介绍了原子化CSS的发展历程，从ACSS到现在 Tailwind CSS，UnoCSS …
Let’s Define Exactly What Atomic CSS is 介绍了一些原子化CSS 关于重构原有代码，接入设计系统的教程。
Learn about CSS Architecture: Atomic CSS 另一篇原子化CSS的介绍文章。
New features in UnoCSS: A Tailwind CSS alternative 一篇UnoCSS的入门教程。
重新构想原子化 CSS， antfu 的一篇文章，从中可以窥见他对于开发UnoCSS 的一些理由。介绍了如何压缩原子化 CSS 的优点、性能等等大家关心的因素。
What actually is CSS-in-JS? 除了原子化CSS之外，使用 CSS-in-JS 也是一种很流行的样式范式，这篇文章介绍了原生CSS代码存在的一些问题，以及使用 CSS-in-JS 是如何解决这些的问题的——借助于JS的能力。
CSS in JS for Web Components 介绍了web components + CSS-in-JS 的一些业界方案。
18 GitHub Repositories to Become a CSS Master 🎨🧙‍♂️ CSS学习教程 GitHub repo 推荐。
React 组件库 CSS 样式方案分析，云音乐技术团队讨论在 React 生态下，如何选择一种适合组件库的 CSS 样式方案。
CSS toys
纯CSS 实现的宝可梦头像
 Creating a firework effect with CSS 写一个烟花特效吧！
希望你喜欢。

📖 推荐文章

Test-Driven-Development with React & Redux: Thunk, Slices & Requests Mocking，给Redux写测试或许听起来有些反直觉，但是在开发之前写好测试，有助于写出更健壮的代码。值得一读。
Jest 实践指南，Jest 看似很简单，然而在真实业务中，写出一个好测试的难度并没有大家想的那么低。本教程是作者结合了自身实践、Kent C. Dodds 文章、StackOverflow、Github Issue 以及别的博客最终总结出来的一套实践指南。
The paired hook pattern，一种react状态和组件的设计模式文章。
State of frontend 2022，前端开发 2022 趋势，和上面的 State of CSS 一个风格。
30 天精通 RxJS，为数不多的RxJS中文教程，繁体中文版。如果想学习 RxJS (并且 RxJS 很值得学习)，可以结合这个教程和官方文档学习。
JavaScript 开发者的Rust 教程：从 0 到 80%[译文]，如果你是一名 JavaScript 开发者，这里是一个话题列表，可以帮助你快速理解 Rust。有非常多关于 Rust 从零开始的教程。但是如果你已经知道一些 JS 的知识，为什么不比较下它们和 rust 的差异呢？
使用quickjs替换v8的chromium，终于出demo。新鲜出炉山寨版v8，如果 V8 不好，不要去抱怨他，来改造它吧！这篇文章写了作者是如何使用 quick JS去替换 V8 的过程，目前改造进行中…
Why you should switch from Lerna to Nx，最近在做项目重构为Mono repo，发现这篇介绍 Nx 的文章，推荐阅读，感觉国内 Nx 用的人不是很多，虽然感觉还是挺好用的。
How to create a Mock Server using Faker.js and JSON server，虽然之前 Faker.js 造成了一些风波，但是这仍旧是一个很好用的生成mock数据的工具库。这篇文章是一个mock server的教程。

设计
It’s time we fix the unethical design of cookie consent windows，如果经常上外网，可以发现不同的网站有很多种申请读写cookie的弹框。本文介绍了如何设计一个合适，并且合乎道德的cookie权限控制弹框。
Mechanical Watch 一个机械表的可视化设计页面。

技术之外
写作 12 年，我的经验和技巧
干互联网 16 年了，总结一下

🔧 工具推荐

CachedView.com 一个展示历史网页版本的网站
https://blobanimation.com/ 生成一个自定义的blob图案。
https://drauu.netlify.app/一个自定义画板，用在了 Slidev 中
https://coverview.vercel.app/ 快速生成文章的题图
https://popgraph.design/同样也是一个生成题图的app
https://planby.netlify.app/ Timeline 软件
https://npkill.js.org/ 一个很好用的 node_modules 清理 cli 工具。
https://itch.io/ 独立游戏素材网站