🚀2021年9月24日 GitHub 上面向 Web 开发人员的十大热门项目
命令行界面指南
React Draft 所见即所得
跑-wasm
贝塞尔曲线缓动
CodeMirror 5
OpenSea.js
《热门项目》以每周新闻简报的形式发布,请在Stargazing.dev 注册, 以确保您不会错过任何一期。
1. Faust.js
Faust.js 是一个用于构建无头 WordPress 网站前端应用程序的框架。Faust.js 提供了一系列工具,旨在简化构建无头 WordPress 网站的流程。
Faust.js™ - 无头 WordPress 框架
介绍
Faust.js 是一个用于构建无头 WordPress 网站前端应用程序的框架。Faust.js 提供了一系列工具,旨在简化构建无头 WordPress 网站的流程(主要涉及数据获取、身份验证、预览和 SSR/SSG),同时为开发者和发布者带来良好的体验。
入门
Faust.js 的目标是与框架无关,因此它可以与任何前端框架一起使用。您可以访问以下指南之一作为入门指南:
在筹备首个版本发布的过程中,我们将引入对其他框架的支持。
系统要求
Node.js v16.0.0 或更高版本(使用 Next.js 13 时为 v16.8.0,使用 Next.js 14 时为 v18.17)。
支持MacOS、Windows(包括WSL)和Linux。
文档
请访问 https://faustjs.org/docs/getting-started 查看完整文档。
WordPress插件(FaustWP)
Faust.js 由两部分组成:NPM 包和 WordPress 插件。要充分利用无头模式,您需要……
2. 命令行界面指南
本指南旨在帮助您编写更好的命令行程序,它遵循传统的 UNIX 原则,并将其更新以适应现代需求。
本指南旨在帮助您编写更好的命令行程序,它遵循传统的 UNIX 原则,并将其更新以适应现代需求。
3. React Draft Wysiwyg
一个基于 ReactJS 和 DraftJS 构建的所见即所得编辑器。
一个基于 ReactJS 和 DraftJS 构建的所见即所得编辑器。https://jpuri.github.io/react-draft-wysiwyg
React Draft 所见即所得
使用 ReactJS 和 DraftJS 库构建的 Wysiwyg 编辑器 演示页面 。
特征
可配置工具栏,可添加/删除控件。
可更改工具栏中控件的顺序。
可选择向工具栏添加自定义控件。
可选择更改工具栏中的样式和图标。
可选择仅在编辑器获得焦点时显示工具栏。
支持行内样式:粗体、斜体、下划线、删除线、代码、下标、上标。
支持块类型:段落、H1-H6、引用块、代码。
支持设置字体大小和字体系列。
支持有序/无序列表和缩进。
支持文本对齐。
支持文本或背景着色。
支持添加/编辑链接
超过150种表情符号可供选择。
支持提及。
支持话题标签。
支持添加/上传图片。
支持图像对齐、设置高度、宽度。
支持嵌入式链接,可灵活设置高度和宽度。
提供了移除已添加内容的选项……
4. 你不需要(或可能不需要)Moment.js
可用于替代 moment.js 和 ESLint 插件的函数列表
可用于替代 moment.js 和 ESLint 插件的函数列表
Moment.js 是一个功能强大的日期和时间库,拥有许多实用功能。但是,如果您正在开发对性能要求较高的 Web 应用程序,由于其复杂的 API 和较大的包体积,它可能会造成巨大的性能开销。
Moment.js存在问题:
如果您不使用时区,而只是使用 moment.js 中的几个简单函数,这可能会使您的应用程序变得臃肿,因此被认为是过度设计。dayjs 的 核心更小,而且非常……
5. 前言
Front Matter 是一个直接在 Visual Studio Code 中运行的内容管理系统 (CMS)。它可以与 Hugo、Jekyll、Hexo、Next.js、Gatsby 等众多静态网站生成器配合使用。
Front Matter 是一个直接在 Visual Studio Code 中运行的内容管理系统 (CMS)。它可以与 Hugo、Jekyll、Hexo、Next.js、Gatsby 等众多静态网站生成器配合使用。
Front Matter 是一个直接在 Visual Studio Code 中运行的内容管理系统。
❓ 什么是前置材料?
Front Matter 是一个运行在 Visual Studio Code 中的 CMS。它既拥有完整 CMS 的强大功能和控制力,又兼具静态网站生成器的灵活性和速度。使用 Front Matter,您可以立即开始编辑和创建内容,并直接在 VS Code 中预览。
该扩展程序支持各种静态站点生成器和框架,例如 Hugo、Jekyll、Hexo、NextJs、Gatsby 等。
以下是我们扩展程序的一些亮点,希望能引起您对 Front Matter 的兴趣:
内容、数据和媒体管理
搜索、筛选、排序等,处理您的所有内容
创建新内容
用于编辑内容和媒体的辅助工具
直接在 Visual Studio Code 中预览您的网站/内容。
SEO检查标题、描述和关键词
…
6. 运行-wasm
轻松在浏览器中运行基于 WASM 的代码执行
跑-wasm
run-wasm 是一个易于使用的工具,用于在浏览器中运行基于 WASM 的代码执行。
由Slip 和我们优秀的开源软件贡献者们共同呈现 。
项目目标
该项目的目标是通过 WebAssembly 构建一种在浏览器中执行各种编程语言的简便方法。
人们应该能够使用这个项目轻松地将可执行代码片段嵌入到他们的网站上!
我们正在将其构建为 Slip 创作工具中的一个新组件。
所有贡献者✨
感谢这些好心人。
7. 光子
使用简单的 HTML 和 CSS 构建精美 Electron 应用的最快方法
使用简单的 HTML 和 CSS 构建精美 Electron 应用的最快方法
用于使用 Electron 构建桌面应用程序的 UI 工具包。
入门
使用以下命令克隆仓库 git clone https://github.com/connors/photon.git
阅读文档 以了解组件以及如何启动您的新应用程序。
请注意,我们的 master 分支是我们活跃的、不稳定的开发分支,如果您想下载仓库的稳定版本,请查看 已标记的下载 。
包含哪些内容
下载包内包含以下目录和文件,这些目录和文件按逻辑顺序对常用资源进行了分组。您会看到类似这样的内容:
photon/
├── css/
│ ├── photon.css
├── fonts/
│ ├── photon-entypo.eot
│ ├── photon-entypo.svg
│ ├── photon-entypo.ttf
│ └── photon-entypo.woff
└── template-app/
├── js/
│ └── menu.js
├── app.js
├── index.html
└── package.json
我们提供编译好的 CSS 文件( photon.*)。此外,我们还提供了 Entypo 字体和一个 Electron 应用模板,方便您快速上手。
文档
Photon 的文档是用 Jekyll 构建的,而且……
8. 贝塞尔缓动
BezierEasing 提供三次贝塞尔曲线缓动,它像 CSS Transitions 一样,概括了缓动函数(缓入、缓出、缓入缓出、……任何其他自定义曲线)。
用于 JavaScript 动画缓动的三次贝塞尔曲线实现 – MIT 许可证
贝塞尔曲线缓动
BezierEasing 提供 三次贝塞尔 曲线缓动,它像 CSS Transitions 一样,概括了缓动函数(缓入、缓出、缓入缓出、……任何其他自定义曲线)。
实现高效查找并不容易,因为它意味着将 X 坐标投影到贝塞尔曲线上。该微型库使用快速启发式方法(涉及二分搜索、牛顿-拉夫逊法、采样)来专注于 性能 和 精度 。
它很大程度上基于 Firefox 和 Chrome 中提供的实现(针对 CSS transition-timing-function 属性)。
用法
var easing = BezierEasing ( 0 , 0 , 1 , 0.5 ) ;
// easing allows to project x in [0.0,1.0] range onto the bezier-curve defined by the 4 points (see schema below).
console . log ( easing ( 0.0 ) ) ; // 0.0
console . log ( easing ( 0.5 ) ) ; // 0.3125
console . log ( easing ( 1.0 ) ) ; // 1.0
Enter fullscreen mode
Exit fullscreen mode
(此模式来自……)
9. CodeMirror
CodeMirror 是一款功能全面的文本编辑器,使用 JavaScript 编写,专为浏览器设计。它专注于代码编辑,提供超过 100 种语言模式以及各种插件,可实现更高级的编辑功能。
CodeMirror 5
注意: CodeMirror 6 已经存在,它对移动设备更加友好,更易于访问,设计更好,并且维护也更加积极。
CodeMirror 是一款功能强大的 JavaScript 浏览器文本编辑器。它专为代码编辑而设计,提供超过 100 种语言模式以及各种插件,可实现更高级的编辑功能。每种语言都具备完善的代码和语法高亮显示功能,帮助用户阅读和编辑复杂的代码。
CodeMirror 提供丰富的编程 API 和 CSS 主题系统,可用于自定义 CodeMirror 以适应您的应用程序,并扩展其新功能。
您可以在 项目页面 找到更多信息(以及使用 手册 ) 。如有任何疑问或需要讨论,请使用 论坛 。
请参阅 CONTRIBUTING.md 文件 了解贡献指南。
CodeMirror 社区致力于欢迎所有人。我们采用 贡献者公约(1.1 版) 作为行为准则。
安装
要么获取包含以下内容的 压缩文件 ……
10. OpenSea.js
适用于 OpenSea 市场的 JavaScript SDK。让您的用户在您自己的网站上买卖加密商品!
OpenSea 市场的 TypeScript SDK
OpenSea.js
这是OpenSea 的 TypeScript SDK ,OpenSea 是最大的 NFT 交易平台。
它允许开发者访问官方订单簿,对其进行筛选,创建列表和报价,并通过编程方式完成交易。
首先, 申请 API 密钥 并实例化您自己的 OpenSea SDK 实例。然后,您可以创建链下订单或在链上完成订单,并在此过程中监听事件。
祝您航海愉快!⛵️
文档
更新日志
最新版本的更新日志可在以下位置找到:
观星📈
奥瑟莉娅 +2,514 颗星
公共 API +2,446 星
命令行艺术 +2,233 星
免费代码训练营 +1,826 星
30 秒代码 +1,391 颗星
奥瑟利亚 +35%
Pico +32%
React Web 编辑器 +28%
美杜莎 +21%
搜索框 +19%
公共 API +7,007 星
免费编程书籍 +6,544 星
机器学习入门 +5,071 星
30 秒代码 +3,842 颗星
命令行艺术 +3,022 星
乳汁分泌量 增加 145%
塑形者 +123%
海洋 +56%
超级配方 +50%
奥瑟利亚 +40%
想要查看最新排名,请访问 Stargazing.dev
《热门项目》以每周新闻简报的形式发布,请在Stargazing.dev 注册, 以确保您不会错过任何一期。
如果你喜欢这篇文章,可以 关注我的 推特账号,我会定期发布关于HTML、CSS和JavaScript的内容。
文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-24th-september-2021-44p0