第22期:2021年最新建站技术栈
date
Oct 8, 2021
slug
2021-weekly-40
status
Published
tags
React
weekly
Website
summary
浏览器渲染之回流重绘，玩转 Commander.js，chrome 升级 94 之后的错误，开发编辑器字体下载
type
Post
weixin
authors
topic
Description
Link
🗞️ 文章推荐
《How I built a modern website in 2021》—— 2021年建站最新技术栈
theatrejs.com —— 3.5K ⭐️ 一个带有GUI的JavaScript web动画库
Pollen —— 一个 CSS 变量库，提供一组常用的 CSS 变量（比如颜色、长度、字体大小等等）。开发者可以将这个库作为初始变量，以后通过调整变量来改变样式，比如从亮模式变成暗模式。
Mithril.js —— 12.9K ⭐️ 一个非常易用的轻量级前端框架，只做了 DOM 的包装层，没有加任何其他接口，体积小，加载快，并且支持组件和前端路由。
React CountUp —— 1.3K ⭐️ 让你的数字展示更加现代化。
React Windows UI —— 打造 Windows 风格的应用
nuka-carousel —— 纯 React 走马灯组件
@react-three/flex —— 为 react-three-fiber 打造的 CSS Flexbox — 该库基于 Facebook 的跨平台布局引擎 Yoga。它能够让你用`<Box>` 标签包裹 3D 对象，并让包裹后的标签存在于<Flex> 容器中。
react-d3-cloud —— 一款基于 d3-cloud 打造的 React 词云（word cloud）组件
MathJAX —— MathJAX是适用于所有浏览器的数学JavaScript显示引擎。它使用带有Web字体或SVG的CSS，因此方程式可以在所有缩放级别上缩放而不会出现问题。
Dummy-Robot —— 超迷你机械臂机器人项目，稚晖君开源的机械臂项目，而这么一个机械臂可以用来做一些人手无法做到的操作，比如软件去抖、运动范围的重映射、力矩强增强等等。对机械臂制作过程有兴趣的小伙伴可以查看 B 站的制作视频： 【自制】我造了一台 钢 铁 侠 的 机 械 臂 ！
React
chrome 升级 94 之后，本地开发环境突然出现了跨域错误
我这边遇到运营同学某系统生成环境出现js加载错误及样式异常，报错如下：
@解决方案提供： superwf
原因是chrome不再信任本地 hosts 配置出来的网址导致的
在浏览器地址栏里输入
chrome://flags/#block-insecure-private-network-requests
把这个
disable 然后重启浏览器，亲测好用👍🏻- In the address bar type
chrome://flags.
- In the search bar, search for the term
certificates.
- The search result should display
Allow invalid certificates for resources loaded from localhost..
- Click on the select menu to the right and choose
Enabled.
- Chrome should ask you to restart the browser. If not, restart it manually.
morflax.com —— 可以在线制作一些3D mock，用于产品及设计演示。
Dev Fonts —— 开发编辑器字体下载，基本上常用的就那几款 Fira Code、JetBrains Mono、Roboto Mono，任君喜好。
squoosh.app —— 在线处理压缩图片，可以看到2.12MB压缩到了610K，压缩率71%
animatedbackgrounds.me —— 动画背景
170 illustrations —— 170 Free isometric illustrations as PNG & SVG files 【passionhacks.com】 这里还有更多资源。
openmoji.org —— 开源的 Emoji 图标，目前已经有将近4000个图标，还在持续增加中。
