第25期:Jamstack生态系统的开发维护
date
Nov 5, 2021
slug
2021-weekly-45
status
Published
tags
Book
Design
summary
重新构想原子化 CSS， BizCharts图标库，网络钓鱼工具的工作原理，固定头部炫酷效果，雨滴划过玻璃效果，树莓派做网站靠谱不？
type
Post
weixin
authors
topic
Description
Link
🗞️ 文章推荐
《重新构想原子化 CSS 》—— 文章从什么是原子化 CSS 这个问题入手，介绍了社区的原子化 CSS 方案 Tailwind CSS 和 Windi CSS 的原理，同时分析了社区原子化 CSS 方案的存在的问题，对社区方案进行了改进，推出了自己的原子化 CSS 方案 UnoCSS，非常值得学习！
BizCharts —— BizCharts是阿里通用图表组件库，基于 G2与G2Plot封装的React图表库，已经历阿里复杂业务场景长达三年。
arco.design ——1.8K ⭐️ ByteDance 出品中后台企业级产品UI组件库
openui5.org —— 2.5K ⭐️ 组件库的未来，一次构建，多处运行。
UI5 核心通过在幕后运用现代开发的诸多特点，为简化工作奠定了坚实基础。其中随带有对诸如 MVC、双向数据绑定和路由选择等设计构思的内置支持。
- 内含诸如 MVC 和各种数据绑定类型等标准
- 在不同的视图格式（XML、HTML、JavaScript、JSON）之间进行选择
- 与 OData、JSON、XML 及其他数据格式进行绑定
- 用于浏览对象树和绑定状态的内置支持工具
UI5 Web Components —— 1K ⭐️ 同样是SAP的开源库
motion.dev —— 一个新的动画库，构建在Web Animations API上，以获得最小的文件大小和最快的性能。
popmotion.io —— 18.6K ⭐️ 另一个动画库
npkill —— 找到和删除旧的和冗余的node_modules文件夹
zphisher —— 3.7K ⭐️ Zphisher 是个新手友好的学习安全的项目，它提供了 30+ 网络钓鱼页面模版，用它可以部署一个或者多个钓鱼网站…进而了解到网络钓鱼工具的工作原理
simdjson —— 14.9K ⭐️ JSON 解析器，网上 JSON 无所不在，服务器要花很多时间来解析这些 JSON 文件。simdjson 是一个 JSON 处理器，它每秒能解析 GB 的 JSON 数据，官方也给出了相关测试数据： 6 GB/s 压缩 JSON、13 GB/s 校验 UTF-8、3.5 GB/s 校验 NDJSON。
midnight.js —— 3.7K ⭐️ 固定头部炫酷效果
Rain & Water Effect —— 雨滴划过玻璃效果，Codrops 有很多web效果及案例教程展示，是个需要常逛逛的好站点👍🏻 [这里是教程]，主要利用了webGL开发，不得不说又绕到了 GPU编程 ，【shadertoy】，这里会打开新世界的大门。
openreplay.com —— 2.4K ⭐️ 一个开源的用户行为重播堆栈，可以让你看到和调试用户在你的web应用程序上做什么，帮助你更快地排除问题。
React
Jamstack生态系统的开发、建立、部署和维护
下面这个图示工作流，基本符合大多数的场合。
1、静态站点发布程序 Static Site Generators(SSG)
之前也推荐过，下面各技术栈对应的生成器：
- Reactjs: Gastby, Next.js, React static, and many others.
- Vue: Gridsome, Nuxt, VuePress, and many others.
- Vanilla JS: 11ty(eleventy).
- Angular: Scully
- Golang: Hugo
- Python: Pelican, Cactus, MkDocs
- Java: JBake
- Ruby: Jekyll, Slate, Middleman, and many more.
- Svelte: Sapper.js
更多可以【查看这里】
2、站点部署和托管可以选择下面这些
3、APIs
Authentication
Payment
Email
Customer services
Search
Comment
Image and Video management
Form processing
Headless CMS
树莓派做网站靠谱不？这里是【知乎问答】
这里有时下动手大拿 稚晖的个人站 为案例，看着也能折腾一套啊，所以是不是双十一了，入手一份树莓派？
colormixer.web.app —— 色盘工具，可以导出 svg 和 css
cinemaicons.store —— 3D 图标，收费
startup —— Create websites online using the Startup Bootstrap builder
3dicons.co —— 3D 图标
iconsax-react.pages.dev —— react 图标 ，老家是这里【iconsax.io】
vuesax.com —— 上面开发者的vue组件库，貌似之前推荐过。
