发布于 2026-01-06 4 阅读
0

🚀2021年1月29日 GitHub 上 10 个热门 Web 开发人员项目 JerryScript:物联网 JavaScript 引擎 react-big-calendar React-Select Terminalizer 目录 功能 蓝图 Constate DEV 的全球展示挑战赛 由 Mux 呈现:展示你的项目!

🚀2021年1月29日 GitHub 上面向 Web 开发人员的十大热门项目

JerryScript:面向物联网的 JavaScript 引擎

react-big-calendar

React-Select

终端器

目录

特征

文件池

蓝图 CircleCI

康斯塔特

由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!

《热门项目》以每周新闻简报的形式提供,请访问www.iainfreestone.com注册,以确保您不会错过任何一期。

1. JerryScript

JerryScript:面向物联网的 JavaScript 引擎。这是一款轻量级 JavaScript 引擎,适用于微控制器等资源受限的设备。它可以在内存小于 64 KB、闪存小于 200 KB 的设备上运行。

GitHub 标志 jerryscript-项目/ jerryscript

面向物联网的超轻量级 JavaScript 引擎。

JerryScript:面向物联网的 JavaScript 引擎

执照 GitHub Actions 状态 AppVeyor 构建状态 FOSSA状态 IRC频道

JerryScript 是一个轻量级的 JavaScript 引擎,适用于微控制器等资源受限的设备。它可以在 RAM 小于 64 KB、闪存小于 200 KB 的设备上运行。

JerryScript 的主要特点:

  • 完全符合 ECMAScript 5.1 标准
  • 编译为 ARM Thumb-2 时,二进制文件大小为 160K。
  • 针对低内存消耗进行了深度优化
  • 采用 C99 编写,以实现最佳可移植性
  • 支持快照功能,可将 JavaScript 源代码预编译为字节码
  • 成熟的 C API,易于嵌入应用程序

更多信息请访问我们的项目页面维基百科

此处测量内存使用量和二进制文件占用空间,并以每日实际目标为准。

树莓派 2的最新结果

远程测试运行器

IRC 频道:freenode上的 #jerryscript邮件列表:jerryscript-dev@groups.io,您可以在这里订阅,并在这里访问邮件列表存档

快速入门

获取资源

git clone https://github.com/jerryscript-project/jerryscript.git
cd
Enter fullscreen mode Exit fullscreen mode

2. react-big-calendar

这是一个用 React 构建的事件日历组件,专为现代浏览器(例如 IE10+)设计,并使用 flexbox 而不是传统的表格嵌套方法。

GitHub 标志 jquense / react-big-calendar

类似 gcal/outlook 的日历组件

react-big-calendar

这是一个用 React 构建的事件日历组件,专为现代浏览器(即非 IE)设计,并使用 flexbox 而不是传统的表格标题方法。

大型日历演示图

演示和文档

灵感来自完整日历

使用和设置

yarn add react-big-calendar或者npm install --save react-big-calendar

请为样式添加react-big-calendar/lib/css/react-big-calendar.css属性,并确保日历容器元素设置了高度,否则日历将不可见。要提供自定义样式,请参阅“自定义样式”主题。

首发阵容

本地运行示例

$ git clone git@github.com:jquense/react-big-calendar.git
$ cd react-big-calendar
$ yarn
$ yarn storybook
Enter fullscreen mode Exit fullscreen mode

本地化和日期格式化

react-big-calendar包含四种日期格式化和区域本地化选项,具体取决于您对日期时间库的偏好。您可以使用Moment.jsGlobalize.jsdate-fnsDay.js本地化器。

无论你做出何种选择,你都必须……


3. React Select

React.js 的 Select 组件。一个灵活美观的 ReactJS 选择输入控件,支持多选、自动完成、异步和可创建功能。

GitHub 标志 JedWatson / react-select

React.js 的 Select 组件

NPM CircleCI 覆盖范围状态 由 Thinkmill 提供支持

React-Select

React的 Select 控件。最初是为KeystoneJS而构建的。

请访问react-select.com查看实时演示和完整文档。

react-select由ThinkmillAtlassian资助。我们是一个开源项目,并持续得到社区的支持。

React Select 帮助您开发功能强大的选择组件,这些组件开箱即用,同时又不会阻止您自定义对您重要的部分。

想了解这个组件背后的故事,请观看 Jed 在 React Conf 2019 上的演讲——构建 React Select。

功能包括:

  • 灵活的数据处理方式,以及可定制的功能
  • 可扩展的样式 API,支持情绪
  • 组件注入 API,用于完全控制 UI 行为
  • 可控状态属性和模块化架构
  • 长期以来用户一直期待的功能,例如选项组、门户支持、动画等等。

使用的是旧版本吗?


4. 反应堆

将您的 React 组件融入旅游指南

GitHub 标志 elrumordelaluz / reactour

将您的 React 组件融入旅游指南

反应堆

旅游指南和一系列助手,带你畅游 React 组件

文档

https://docs.react.tours

包裹

主程序包使用其他程序包从一系列步骤中突出显示应用程序的各个部分。

一个可自定义的组件,用于突出显示视口中的特定元素或区域。

可自定义的组件,可附加到视口的元素或位置以显示内容。

一组供其他软件包使用的辅助函数。

这里所有东西都一目了然地运转着,就住在这里吧

由……赞助

黄金赞助商🥇

护卫舰赞助商

Reactour 很荣幸能得到Frigade的赞助,Frigade 是一款开发者工具,用于构建更好的产品引导流程:引导教程、入门清单、公告等等。

仓库活动

另类

执照

麻省理工学院 © Lionel Tzatzkin







5. 终端化器

录制您的终端并生成动画 GIF 图片或分享网页播放器

GitHub 标志 faressoft / terminalizer

🦄 录制您的终端并生成动画 GIF 图片或分享网页播放器

终端器

npm npm 吉特 独角兽 鸣叫

录制您的终端并生成动画 GIF 图片,或分享网页播放器链接www.terminalizer.com

就是要酷炫👌🦄!

如果你也这么认为,请给我点个赞starfollow😘



目录

特征

  • 高度可定制。
  • 跨平台(Linux、Windows、MacOS)。
  • 风俗window frames
  • 风俗font
  • 风俗colors
  • styles定义CSS
  • 水印。
  • 渲染前编辑帧并调整延迟。
  • 按步长值跳过帧,以减少渲染帧的数量。
  • 为了获得更好的图像质量,请渲染带有文字的图像,而不是截屏。
  • 具备配置能力

6. Filepond

一个 JavaScript 库,可以上传任何你提供的内容,优化图像以加快上传速度,并提供出色、易用、流畅的用户体验。

GitHub 标志 pqina / filepond

🌊 一个灵活有趣的 JavaScript 文件上传库

文件池

一个 JavaScript 库,可以上传任何你提供的内容,优化图像以加快上传速度,并提供出色、易用、流畅的用户体验。

许可证:MIT npm 版本 npm 最小压缩尺寸

FilePond 适配器支持ReactVueAngularSveltejQuery。


文件池

请我喝杯咖啡/将 FilePond 与 Pintura 结合使用/在 Twitter 上查看开发者更新


核心功能

  • 接受目录文件、blob、本地 URL、远程 URL和数据 URI。
  • 使用 API拖放文件、在文件系统中选择文件、复制粘贴文件或添加文件。
  • 支持使用 AJAX 进行异步上传,支持分块上传,可以将文件编码为 base64 数据并通过表单提交发送。
  • 可访问,已使用 VoiceOver 和 JAWS 等辅助技术软件​​进行测试,可通过键盘导航
  • 图像优化、自动图像调整大小、裁剪、过滤和修复 EXIF 方向
  • 响应式设计,可自动缩放以适应可用空间,在移动设备和桌面设备上均可正常使用。

学习


7. 蓝图

Blueprint 是一个基于 React 的 Web UI 工具包。它针对构建复杂、数据密集型的桌面应用程序 Web 界面进行了优化,可在现代浏览器和 IE11 中运行。它并非移动优先的 UI 工具包。

GitHub 标志 帕兰提尔/蓝图

一个基于 React 的 Web UI 工具包

Blueprint 是一个基于 React 的 Web UI 工具包。

它针对构建运行在现代浏览器中的桌面应用程序的复杂、数据密集型 Web 界面进行了优化。这不是一个移动优先的 UI 工具包。

阅读介绍性博客文章 ▸

查看完整文档 ▸

在 CodeSandbox 上试用 ▸

请阅读维基上的常见问题解答 (FAQ) ▸

更新日志

Blueprint 的主要版本变更日志和迁移指南位于仓库的Github wiki上。

包裹

该仓库packages/目录中包含多个项目,这些项目分为 3 个类别:

图书馆

这些是我们发布到 NPM 的组件库。

  • npm– 设计系统颜色变量。
  • npm– 核心样式和组件。
  • npm– 用于与日期和时间交互的组件。
  • npm– 用于与日期和时间交互的下一代组件。
  • npm– 用于显示图标的 API(包含 SVG 和图标字体实现)。
  • npm– Monaco 编辑器主题(⚠️ 实验性)。
  • npm- 成分…

8. ress

现代 CSS 重置

GitHub 标志 filipelinhares / ress

🚿 现代 CSS 重置

早午餐和餐厅名称

现代 CSS 重置

构建状态 尺寸 npm

安装

npm install --save ress
Enter fullscreen mode Exit fullscreen mode

或者

yarn add ress
Enter fullscreen mode Exit fullscreen mode

特征

  1. 适用box-sizing: border-box;于所有元素。
  2. 重置paddingmargin应用于所有元素。
  3. background-repeat: no-repeat在所有元素和伪元素中都进行指定。
  4. 继承text-decorationvertical-align::before::after
  5. 移除outline所有浏览器中鼠标悬停时的提示。
  6. font-family: monospace在代码元素中指定。
  7. border-radius输入元素重置。
  8. 指定表单元素的字体继承关系。
  9. 移除所有浏览器中的默认按钮样式。
  10. 指定文本区域可调整大小为垂直方向。
  11. 应用于cursor: pointer按钮元素。
  12. 申请tab-size: 4方式html
  13. 样式select与标准输入相同。
  14. cursor通过 aria 属性设置样式。

跨浏览器

ress在底层使用了Normalize.css ,并进行了一些自定义,从而为样式表的创建奠定了坚实的基础。

浏览器支持

  • 铬合金
  • 边缘
  • Firefox ESR+
  • Internet Explorer 10+
  • 歌剧
  • Safari 8+

CDN

解包

https://unpkg.com/ress/dist/ress.min.css
Enter fullscreen mode Exit fullscreen mode

jsDevlivr

# Production
https://cdn.jsdelivr.net/npm/ress@4.0.0/dist/ress.min.css

# Development
https://cdn.jsdelivr.net/gh/filipelinhares/ress@latest/dist/ress.min.css
Enter fullscreen mode Exit fullscreen mode

执照

麻省理工学院© Filipe…


9. 国土

使用 React Hooks 编写本地状态,并仅在需要时将其提升到 React Context,从而最大限度地减少工作量。

GitHub 标志 diegohaz / constate

React Context + State

州标志

康斯塔特

NPM 版本 NPM 下载 尺寸 依赖关系 GitHub 工作流状态(分支) 覆盖范围状态

使用React Hooks编写本地状态,并仅在需要时将其提升到React Context ,从而最大限度地减少工作量。


🕹 CodeSandbox 演示 🕹
柜台 I18n 主题 TypeScript 巫师表单

基本示例

import React, { useState } from "react";
import constate from "constate";
// 1️⃣ Create a custom hook as usual
function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(prevCount => prevCount + 1);
  return { count, increment };
}

// 2️⃣ Wrap your hook with the constate factory
const [CounterProvider, useCounterContext] = constate(useCounter);

function Button() {
  // 3️⃣ Use context instead of custom hook
  const { increment } = useCounterContext();
  return <button onClick={increment}>+</button
Enter fullscreen mode Exit fullscreen mode

10. 懒人收藏

快速和惰性操作的集合

GitHub 标志 RobinMalfait / lazy-collections

快速和惰性操作的集合

懒人收藏

快速且惰性的收集操作

执照


使用诸如 `and`和 `or`之类的方法固然不错.map()但它们会创建新数组,并且在进行下一步之前所有操作都会立即完成。.filter().reduce()

这就是惰性集合的用武之地,其底层使用迭代器和异步迭代器,使数据像流一样流动,从而达到最佳速度。

所有函数都应该同时支持 `and`iterator和 `or` asyncIterator,如果其中一个函数使用了 `and` asyncIterator(例如,当你引入 `and` 时delay(100)),不要忘记将await结果赋值给 `or`!

let program = pipe(
  map((x) => x * 2),
  filter((x) => x % 4 === 0),
  filter((x) => x % 100 === 0),
  filter((x) => x % 400 === 0),
  toArray
Enter fullscreen mode Exit fullscreen mode

《热门项目》以每周新闻简报的形式提供,请访问www.iainfreestone.com注册,以确保您不会错过任何一期。

如果您喜欢这篇文章,可以关注我的推特账号,我会定期发布与HTML、CSS和JavaScript相关的实用技巧。

文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-29th-january-2021-4ml2