🚀2021年1月29日 GitHub 上面向 Web 开发人员的十大热门项目
JerryScript:面向物联网的 JavaScript 引擎
react-big-calendar
React-Select
终端器
目录
特征
康斯塔特
由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!
《热门项目》以每周新闻简报的形式提供,请访问www.iainfreestone.com 注册, 以确保您不会错过任何一期。
1. JerryScript
JerryScript:面向物联网的 JavaScript 引擎。这是一款轻量级 JavaScript 引擎,适用于微控制器等资源受限的设备。它可以在内存小于 64 KB、闪存小于 200 KB 的设备上运行。
面向物联网的超轻量级 JavaScript 引擎。
JerryScript:面向物联网的 JavaScript 引擎
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 而不是传统的表格嵌套方法。
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.js 、 Globalize.js 、 date-fns 或 Day.js 本地化器。
无论你做出何种选择,你都 必须 ……
3. React Select
React.js 的 Select 组件。一个灵活美观的 ReactJS 选择输入控件,支持多选、自动完成、异步和可创建功能。
React-Select
React 的 Select 控件 。最初是为 KeystoneJS 而构建的。
请访问 react-select.com 查看实时演示和完整文档。
react-select由Thinkmill 和 Atlassian 资助 。我们是一个开源项目,并持续得到社区的支持。
React Select 帮助您开发功能强大的选择组件,这些组件开箱 即用 ,同时又不会阻止您自定义对您重要的部分。
想了解这个组件背后的故事,请观看 Jed 在 React Conf 2019 上的演讲—— 构建 React Select。
功能包括:
灵活的数据处理方式,以及可定制的功能
可扩展的样式 API,支持 情绪
组件注入 API,用于完全控制 UI 行为
可控状态属性和模块化架构
长期以来用户一直期待的功能,例如选项组、门户支持、动画等等。
使用的是旧版本吗?
…
4. 反应堆
将您的 React 组件融入旅游指南
旅游指南 和一系列 助手 ,带你畅游 React 组件
文档
https://docs.react.tours
包裹
主程序包使用其他程序包从一系列步骤中突出显示应用程序的各个部分。
一个可自定义的组件,用于突出显示视口中的特定元素或区域。
可自定义的组件,可附加到视口的元素或位置以显示内容。
一组供其他软件包使用的辅助函数。
这里所有东西都一目了然地运转着,就住 在这里吧 。
由……赞助
黄金赞助商🥇
Reactour 很荣幸能得到 Frigade 的赞助,Frigade 是一款开发者工具,用于构建更好的产品引导流程:引导教程、入门清单、公告等等。
仓库活动
执照
麻省理工学院 © Lionel Tzatzkin
5. 终端化器
录制您的终端并生成动画 GIF 图片或分享网页播放器
🦄 录制您的终端并生成动画 GIF 图片或分享网页播放器
终端器
录制您的终端并生成动画 GIF 图片,或分享网页播放器链接 www.terminalizer.com
就是要酷炫👌🦄!
如果你也这么认为,请给我点个赞 star和 follow😘
目录
特征
高度可定制。
跨平台(Linux、Windows、MacOS)。
风俗 window frames。
风俗 font。
风俗 colors。
styles自 定义 CSS。
水印。
渲染前编辑帧并调整延迟。
按步长值跳过帧,以减少渲染帧的数量。
为了获得更好的图像质量,请渲染带有文字的图像,而不是截屏。
具备配置能力
6. Filepond
一个 JavaScript 库,可以上传任何你提供的内容,优化图像以加快上传速度,并提供出色、易用、流畅的用户体验。
🌊 一个灵活有趣的 JavaScript 文件上传库
一个 JavaScript 库,可以上传任何你提供的内容,优化图像以加快上传速度,并提供出色、易用、流畅的用户体验。
FilePond 适配器支持 React 、 Vue 、 Angular 、 Svelte 和 jQuery。
请我喝杯咖啡 / 将 FilePond 与 Pintura 结合使用 / 在 Twitter 上查看开发者更新
核心功能
接受 目录 、 文件 、blob、本地 URL、 远程 URL 和数据 URI。
使用 API 拖放文件 、在文件系统中选择文件、 复制粘贴文件或添加文件。
支持使用 AJAX 进行异步上传 ,支持 分块上传 ,可以将文件编码为 base64 数据并通过表单提交发送。
可访问 ,已使用 VoiceOver 和 JAWS 等辅助技术软件进行测试, 可通过键盘导航 。
图像优化 、自动图像调整大小、 裁剪 、过滤和 修复 EXIF 方向 。
响应式设计 ,可自动缩放以适应可用空间,在 移动设备和桌面设备 上均可正常使用。
学习 …
7. 蓝图
Blueprint 是一个基于 React 的 Web UI 工具包。它针对构建复杂、数据密集型的桌面应用程序 Web 界面进行了优化,可在现代浏览器和 IE11 中运行。它并非移动优先的 UI 工具包。
8. ress
现代 CSS 重置
现代 CSS 重置
安装
npm install --save ress
Enter fullscreen mode
Exit fullscreen mode
或者
yarn add ress
Enter fullscreen mode
Exit fullscreen mode
特征
适用 box-sizing: border-box;于所有元素。
重置 padding并 margin应用于所有元素。
background-repeat: no-repeat在所有元素和伪元素中 都进行指定。
继承 text-decoration并 vertical-align到 ::before和 ::after。
移除 outline所有浏览器中鼠标悬停时的提示。
font-family: monospace在代码元素中 指定。
border-radius输入元素 重置。
指定表单元素的字体继承关系。
移除所有浏览器中的默认按钮样式。
指定文本区域可调整大小为垂直方向。
应用于 cursor: pointer按钮元素。
申请 tab-size: 4方式 html:
样式 select与标准输入相同。
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,从而最大限度地减少工作量。
康斯塔特
使用 React Hooks 编写本地状态,并仅在需要时 将其提升到 React Context ,从而最大限度地减少工作量。
基本示例
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. 懒人收藏
快速和惰性操作的集合
懒人收藏
快速且惰性的收集操作
使用诸如 `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