🚀GitHub 上面向 Web 开发人员的十大热门项目 - 2021 年 10 月 29 日 蔗糖 Svelte 中的 React Hooks 使用状态 使用效果 使用备忘录 无需白板的招聘
茶
前端集合（希望每天都能更新……） 2022 年 TypeScript 样板代码 用于 Material UI 的 React Hooks 动态表情符号 Checka11y.css 由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！ 《热门项目》以每周新闻简报的形式发布，请在Stargazing.dev 注册， 以确保您不会错过任何一期。
1. 蔗糖酶 Sucrase 是 Babel 的替代方案，可实现超快的开发构建速度。与 Babel 需要编译大量 JS 功能才能在 Internet Explorer 中运行不同，Sucrase 假定您使用的是较新的浏览器或较新的 Node.js 版本进行开发。
当您需要面向现代 JS 运行时环境时，Babel 的超快替代方案
蔗糖
快速使用
yarn add --dev sucrase # Or npm install --save-dev sucrase
Enter fullscreen mode
Exit fullscreen mode
使用 ts-node 集成：
yarn add --dev sucrase ts-node typescript
./node_modules/.bin/ts-node --transpiler sucrase/ts-node-plugin main.ts
Enter fullscreen mode
Exit fullscreen mode
项目概述 Sucrase 是 Babel 的替代方案，它能实现超快的开发构建。与 Babel 为了兼容 Internet Explorer 而编译大量 JS 特性不同，Sucrase 假定您使用的是较新的浏览器或 Node.js 版本，因此它专注于编译非标准语言扩展：JSX、TypeScript 和 Flow。由于其范围较小，Sucrase 的架构性能更高，但可扩展性和可维护性较差。Sucrase 的解析器源自 Babel 的解析器（因此 Sucrase 得益于 Babel，没有 Babel 就无法实现），并精简到 Babel 所解决问题的特定子集。如果它符合您的使用场景，那么 Sucrase 或许能帮到您……
2. Svelte 中的 React Hooks React Hook 示例移植到 Svelte
Svelte 中的 React Hooks 将React Hook 示例移植到 Svelte 。
最新📣 ： React ⇆ Svelte 速查表
使用状态 在 Svelte 中， const [varName, set] = useState(initialValue)它变成了 let varName = initialValue。setter 函数被替换为 JavaScript 的赋值运算符 =。
React 示例 Svelte 示例
使用效果 在 React 中，有 3 种方法 useEffect()。
依赖 null项： useEffect(fn)。每次渲染时都会运行。 依赖项为空数组： useEffect(fn, [])。此操作在挂载时运行，清理函数在卸载时运行。 依赖项变量列表： useEffect(fn, [a, b, c])。每当依赖项发生更改时，此操作都会重新计算。清理操作会在依赖项发生更改以及卸载期间运行。
这是第 2 点的示例，其中回调函数在组件挂载时运行，清理函数在组件卸载时运行。
React 示例 Svelte 示例
使用备忘录 React 示例 Svelte 示例
在 Svelte 中，所有响应式语句都会被缓存。而不是 const……
3. 不用白板招聘 一份不进行“白板面试”的公司（或团队）名单。“白板”在这里是一种比喻，象征着那些与糟糕的面试做法相关的计算机科学知识问答题。
无需白板的招聘 以下列出一些不进行“白板面试”的公司（或团队）。“白板面试”在这里是一种比喻，象征 着 那些与不良面试做法相关的计算机科学知识问答题。白板面试本身并没有错——错的是计算机科学知识问答题。使用 HackerRank/LeetCode 之类的网站 可能也 属于此类。
这里列出的公司和团队使用的面试技巧和问题都与日常工作非常相似。例如，结对编程解决实际问题，或者布置有偿/无偿的家庭作业。请阅读（并参与完善） 我们关于如何进行更有效面试的建议 。
tl;dr
讨论现实世界的问题（无论是否使用白板）都很棒👍 解决计算机科学冷知识、技术难题、谜语、脑筋急转弯（无论是否使用白板）都是👎
请提交 PR 以便添加。
失败 如果你最近参加过这些公司之一的面试，而你的经历却与他们的说法不符……
4. 香水店 一个体积小巧（约 800 字节）、简单易用的 React 状态管理库。store 更新后，只会渲染使用已更新属性的组件。
5. 前端集合 前端软件工程师笔记。涵盖常用数据结构和算法、基本Web概念、HTML、CSS和Javascript。
全栈软件工程师笔记。涵盖常用数据结构和算法、Web概念、Javascript/TypeScript、React等内容！
6. 毫升5 ml5.js 旨在让广大艺术家、创意程序员和学生都能轻松上手机器学习。该库基于 TensorFlow.js 构建，可在浏览器中访问机器学习算法和模型。
请点击此处阅读我们的 ml5.js 行为准则和软件许可协议 ！
该项目目前正在开发中。
适用于网络的友好型机器学习！ ml5.js 旨在让广大艺术家、创意程序员和学生都能轻松上手机器学习。该库基于 TensorFlow.js 构建，可在浏览器中访问机器学习算法和模型。
该库提供代码示例、教程和示例数据集，并着重强调伦理计算。数据偏见、刻板印象式的危害以及负责任的众包等内容均包含在数据收集和使用相关的文档中。
ml5.js 的设计深受 Processing 和 p5.js 的 影响。
请阅读我们的 行为准则 ，其中阐明了我们致力于将 ml5.js 打造成一个友好和热情好客的环境的承诺。
用法 在使用 ml5.js 之前，请先阅读我们的 行为准则 。您可以通过以下几种方式使用 ml5.js 库：
7. 2021 年 TypeScript 样板代码 适用于 Node.js 和浏览器的现代 TypeScript 项目设置（使用 esbuild）。
适用于 Node.js 和浏览器的现代 TypeScript 项目设置。
2022 年 TypeScript 样板代码
适用于 Node.js 程序、库和浏览器模块的 TypeScript 项目样板，配备现代化的工具。快速上手，轻松入门🚀
另请参阅介绍性博客文章： 2021 年启动 TypeScript 项目 。
入门
# Clone the repository (you can also click "Use this template")cd your_project_name
# Edit `package.json` and `tsconfig.json` to your liking# Install dependencies# Now you can run various yarn commands:test
yarn build-all
yarn ts-node < filename>
yarn esbuild-browser
...
Enter fullscreen mode
Exit fullscreen mode
8. 用于 Material UI 的 React Hooks 用于 Material UI 的 React Hooks。对于每个状态，每个 Hook 都接受一个可选的默认状态，并返回一个状态设置实用函数。
用于 Material UI 的 React Hooks
用于 Material UI 的 React Hooks
安装
npm install use-mui或者 yarn add use-mui
支持的组件 对于每个状态，每个钩子都接受一个可选的默认状态，并返回一个状态设置实用函数（通常不需要，但可用于应对可能出现的任何特殊情况）。例如：一个带有 ` valueis` 属性的组件会有一个对应的钩子，该钩子带有一个可选的 defaultValue`parameter` 属性和一个 setValue`state` 属性；一个带有 open`is` 属性的组件也会有一个对应的钩子，该钩子带有一个可选的 defaultOpen`parameter` 属性和一个 setOpen`state` 属性。
function MyTextField ( ) {
const { handleChange, setValue, value } = useTextField ( {
defaultValue : 'Loading...' ,
} ) ;
useEffect ( ( ) => {
getAsyncValue ( )
. then ( asyncValue => {
setValue ( asyncValue ) ;
} )
. catch ( ( ) => {
setValue ( '' ) ;
} …
Enter fullscreen mode
Exit fullscreen mode
9. 动态表情符号 包含动态表情符号的图库。
动态表情符号 包含动态表情符号的图库。
文档 https://animated-emojis.netlify.com/
安装
yarn add animated-emojis # npm i animated-emojis
Enter fullscreen mode
Exit fullscreen mode
API
size: Number | undefined
animate: Boolean | undefined
设置
yarn # npm i
Enter fullscreen mode
Exit fullscreen mode
运行文档
yarn docz:dev # npm run docz:dev
Enter fullscreen mode
Exit fullscreen mode
构建库
yarn build # npm run build
Enter fullscreen mode
Exit fullscreen mode
10. 检查a11y.css 用于快速突出显示无障碍问题的 CSS 样式表。
Checka11y.css 用于快速突出显示无障碍问题的 CSS 样式表。
轻量级 • 现代 • 易于使用 • 可定制 • 简洁
测试可访问性的第一道防线。
旨在快速突出显示一些常见的辅助功能错误和警告，以便轻松快速地纠正这些错误和警告。
建议在使用自动化工具和扫描器（例如 Chrome 上的 Lighthouse）之前先尝试此方法。
切记不要将此部署到生产环境！
一款非常棒的工具，适用于：
网站和网络应用程序开始改进其可访问性。 开发人员和测试/QA人员将学习更多关于无障碍设计以及如何创建无障碍网站和应用程序的知识。
特征 我们的功能始终按照 W3C 无障碍指南进行检查。
Checka11y.css 将检查并突出显示一些常见的无障碍访问 (a11y) 问题：
检查嵌套在 <a><div> 和 <span> 元素内的无效 HTML 元素。 <button>检查 alt图像是否缺少属性 检查是否存在设置为 autoplayCheck <li>是 ……的 唯一 直接子项。 <ol>
观星📈
JavaScript 算法 +1,625 星 编程面试大学 +860 颗星 LittleJS +823 星 免费编程书籍 +686 星 超赞 +648 星
LittleJS +39% 克伦威尔CMS +32% 花粉 +28% Yoha +25% 电光 +24%
公共 API +5,167 星 Uptime Kuma +4,986 星 JavaScript 算法 +4,793 星 超赞 +3,461 星 免费编程书籍 +2,649 星
ct +171% Kuma正常运行时间 +136% 精炼 +136% 阿格里帕 +131% 漂亮的模态框 React +99%
想要查看最新排名，请访问 Stargazing.dev
《热门项目》以每周新闻简报的形式发布，请在Stargazing.dev 注册， 以确保您不会错过任何一期。
如果你喜欢这篇文章，可以 关注我的 推特账号，我会定期发布关于HTML、CSS和JavaScript的内容。
文章来源：https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-29th-october-2021-5fao 
