第33期:如何学习前沿技术
date
Jan 21, 2022
slug
2022-weekly-3
status
Published
tags
shifty
Amplify UI
React
summary
React调度算法的迭代过程,Amplify UI 可以在React、Angular和Vue中使用,Twojs为现代浏览器设计的二维绘图api,tabby.sh漂亮的命令行,shiftyJavaScript动画引擎,ThreeJS 特效教程
type
Post
weixin
authors
topic
Description
Link
🗞️ 文章推荐
nanostores —— 1.2K ⭐️ 一个小巧(199字节)的状态管理器,用于React/RN/Preact/Vue/Svelte。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5d92e85d-94a1-4555-8e27-cabaf50cd440%2F30_seconds_of_code.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D95dc0005be305f6fc237415f9ffe32cf661d8284a679ffdb90531764b34c73ef%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=5bdd715b-57b5-4cdc-b68a-fe4f794c3646&cache=v2)
iconoir.com ——1.9K⭐️ Open Source Icons Library
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb5376a3c-1643-4453-a1e7-fce0ea5335c0%2FIconoir___Free_Icons.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D8933dc9dae0360a522a0772e086921635131791f8225623c1c2cced332a3403d%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=6d37a615-e98f-436d-a498-492f362ac943&cache=v2)
Amplify UI —— 亚马逊的一个开源的设计系统,使用云连接的组件和原语,可以在React、Angular和Vue(很快会有更多)中构建可访问的、高性能的、漂亮的应用程序。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa8ede5df-9642-43e5-a920-844cb8ebd7c1%2FAmplify_UI.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D0f4f12d6483b7f1a1bf4856a466fe60a7a6f491a49116e741f6da3af152dec32%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=7673928e-a2bb-4d2f-bee5-131f3711683c&cache=v2)
Eleventy —— 11.1K⭐️ 静态站点生成器,之前应该有过介绍,嗨,1.0发布了,简单好用,适合建站使用。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd1e95de8-90dc-487f-abaa-791689486dc4%2F11ty.dev.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D3f798612503f45a0817c4021f725723fb376eb0cb59087044e8ce40d9a878aaa%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=764f3d19-2fcf-441d-9e2d-42ed01252d09&cache=v2)
billboard.js—— 5.1K⭐️ D3 图表库。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F01d15620-2bf1-4467-bd8f-cbadf1b1d020%2Fbillboard.js.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3Db1d77c07272ef08a5fabc47f6d1a5e4f253c181562fa43f67f26cdf6e5754629%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=df31c32c-568b-49bc-827e-2495da9da6b1&cache=v2)
Two.js—— 7.5K⭐️ 为现代浏览器设计的二维绘图api。它与渲染器无关,使相同的api能够在多种环境中渲染:webgl、canvas2d和svg。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fbe448516-eeae-4f5d-a328-af52fcf85812%2FTwo.js_Examples.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D480e7a3dafa48654cc05256897298e70166563cef33c44ff44e6812db9b90e53%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=3f7f228a-d36a-410f-ac5d-7249a16f7722&cache=v2)
tabby.sh —— 28.7K ⭐️ A terminal for a more modern age
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe1fa2efa-0c04-446a-96f1-405a1a9424f1%2FTabby_-_a_terminal_for_a_more_modern_age.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D28c8ea3fd349ced0926edadd343fb135570ccd395ec94343d335c7629c38286c%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=e8781cd4-4714-48c1-a8e9-7f67e37f117a&cache=v2)
picocss.com—— 3.9K ⭐️ CSS框架
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd565037d-8b30-4281-ae5b-aee2b868aa74%2FPico.css__Minimal_CSS_Framework_for_semantic_HTML.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3Da1cd5d01da7e743d0773e1dce8d49cc41b5d5a88c0212d66ddb5ff0a8e2239a0%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=b9e5421c-d3ad-4add-b4cf-ac1f64052d3d&cache=v2)
rakkasjs.org —— Lightning fast Next.js alternative powered by Vite
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ffacc7a45-9145-474e-99f0-bfef137dea4b%2FRakkas.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3Daa481ba42fd1faccfd590f0fe6fd124abb63e63b6581ae7bd81666e9146432fe%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=36267597-615a-41e7-a8ee-93bd8210613f&cache=v2)
import React from 'react';
import { useInView } from 'react-intersection-observer';
const Component = () => {
const { ref, inView, entry } = useInView({
/* Optional options */
threshold: 0,
});
return (
<div ref={ref}>
<h2>{`Header inside viewport ${inView}.`}</h2>
</div>
);
};
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe78b7b04-f5b3-4e65-b6cf-901c517727c7%2FGit_Explorer.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D64fae7bc316c139f22cff9dd08963ec345b4e7134120adca4714ca5b3b486aa7%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=dbef3fc6-f132-4c75-b589-32cddea16bd1&cache=v2)
shifty —— 1.3K ⭐️ JavaScript动画引擎
parcel-css —— 1.3K ⭐️ J一个用Rust编写的CSS解析器、转换器。
比 CSSNano 快 100倍!😊
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F60493c35-b768-4245-ad2c-403fbef8cb72%2F149202953-fe174902-aba1-4f3e-babb-f02a30f92b91.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3Dc7359cbbe8fbc25a1881ac3c7a67568fdaa497c19e2ebf864444543454b985a8%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=54db30df-02e8-41b7-91be-d673d98f12c8&cache=v2)
ThreeJS 特效教程
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F730c6eb0-b844-41e3-beb5-98668ea2e8cb%2Fparticles-building.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3Da2afff5f77df9efeda783b493f9b49c97ffcb46b5151bad9896c86bd7a3ddc20%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=67b1fc8c-15e8-412a-a82a-25ac2aa29f8d&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F5314bd23-d6bb-4e21-b2e3-1175dfefce1d%2FPixel_Distortion_with_Three.js___Demo_3___Codrops.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3Db88c29e617fc4891c4329aa4a8650d988a39e6620244a3ae679357e48168ae96%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=aa63ab69-6261-4815-9542-bda61ba7cc76&cache=v2)
翻转飞入购物车效果 —— Animating with the Flip Plugin for GSAP
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7c3b5267-9a86-46a8-b501-bdccd54672e6%2FBeautiful_insights_for_your_GitHub_repositories.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3D8c35d447987f39e45d75ae51e9eb776615e223c6c846a2aaa9d8c38cfd10fd4f%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=0b05567f-b730-4a1e-bbbc-9075f54f5345&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7141bf63-eae4-447f-8d79-f9389b774aab%2FChoose_a_Notion_theme.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3Dcb34a7bc669dbebd5fd84f1d9e972ebfab563a2ad2fb4d33fbe745539c80e2a8%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=546b9701-2ba3-43c9-b187-0b4190546736&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc3fb5ff7-c29c-4c89-b528-4a2da3c5661a%2Fdesignstripe.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3Da37a320165c5970428326070c560ceab9465b150b7b6b58c2d358230749ebce9%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=b34a12fe-fdd8-4ceb-98e7-19e14d68e264&cache=v2)
designgradients.com —— 粘贴即用的渐变色。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F019a483a-ac11-4f03-8295-8d3d2ce98109%2FDesign_Gradients__designgradients.com.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45EIPT3X45%252F20220521%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20220521T085648Z%26X-Amz-Expires%3D86400%26X-Amz-Signature%3Dc525e4a41b983b8424e251d76a1063fe4f9ad78091f943024342cc737e2f24d0%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=ceb1d091-e3c9-49c5-a79a-d4d41d03a2bc&cache=v2)