🚀2021年12月3日 GitHub 上面向 Web 开发人员的十大热门项目
代码的奇妙降临
markdown-it
Two.js
awesome-zsh-plugins
每个程序员都应该知道🤔
命令行艺术
《热门项目》以每周新闻简报的形式发布,请在Stargazing.dev 注册, 以确保您不会错过任何一期。
1. 开放道具
CSS 自定义属性有助于加速自适应和一致的设计。适用于任何框架。
开源CSS变量
colors gradients shadows aspect ratios typographyeasings animations sizes borders z-indexes media-queries
书签小程序
javascript: ( ( ) => {
const href = "https://unpkg.com/open-props" ;
document . head . append ( Object . assign ( document . createElement ( "link" ) , { rel :"stylesheet" , href} ) ) ;
} ) ( ) ;
Enter fullscreen mode
Exit fullscreen mode
命令行界面
npm run gen:op- 遍历 src/js 文件并创建 PostCSS 文件 src/
npm run gen:nowhere- 创建不使用 Open Props 的版本 :where()
npm run gen:shadowdom:host- 创建一个以选择器范围 为特征的 OpenProps 版本
npm run gen:prefixed- 为每个 Open Props 创建一个版本……
2. Polly.JS
记录、重放和存根 HTTP 交互。这是一个独立的、与框架无关的 JavaScript 库,可以记录、重放和存根 HTTP 交互。
记录、重放和存根 HTTP 交互
Polly.JS 是一个独立的、与框架无关的 JavaScript 库,支持 HTTP 交互的录制、回放和模拟。通过调用 Node 和浏览器中的多个请求 API,Polly.JS 能够以极少的配置甚至无需配置即可模拟请求和响应,同时还提供了一个简单、强大且直观的 API,让您可以完全控制每个请求。
有兴趣参与贡献或只是想看看 Polly 的实际应用吗?请前往 CONTRIBUTING.md 了解如何启动项目!
为什么是波莉?
保持 fixtures 和 factory 与 API 保持一致可能是一个耗时的过程。Polly 通过记录和维护实际的服务器响应来缓解这一过程,同时还保持灵活性。
记录测试套件的 HTTP 交互,并在未来的测试运行中重放这些交互,以实现快速、确定性、准确的测试。
使用 Polly 的客户端服务器来修改或拦截请求和响应,以模拟……
3. 代码的奇妙诞生
一系列与一年一度的“代码降临节”挑战赛相关的精彩资源。
一系列与一年一度的“代码降临节”挑战赛相关的精彩资源。
代码的奇妙降临
这是一系列与一年一度的 “代码降临节 ”挑战赛相关的精彩资源。
项目模板
模板、模板和框架,可帮助您快速创建您喜欢的语言的项目。
4. PostHog
PostHog 是一款专为开发者打造的开源产品分析套件。它可以自动收集您网站或应用上的每一个事件,无需将数据发送给第三方。
🦔 PostHog 提供开源产品分析、会话录制、功能标记和 A/B 测试,您可以自行托管。
文档 - 社区 - 路线图 - 更新日志 - 问题报告
观看 PostHog 的运行演示
PostHog 是一个一体化的开源平台,用于构建更好的产品
手动指定事件,或使用自动捕获快速入门。
使用现成的可视化工具分析数据,或者使用 SQL 自己创建可视化图表。
使用我们的 GA4 替代方案单独跟踪网站访问者
只收集你想追踪的人员的属性信息,这样可以节省不必要的费用。
通过捕获会话回放、控制台日志和网络监控来收集信息
利用可自动分析性能的实验来改进您的产品
使用功能开关安全地向选定的用户或用户群推出功能
向特定用户群体发送完全可定制的调查问卷。
使用 PostHog CDP 连接外部服务并管理数据流
PostHog 提供欧盟或美国的托管服务,并完全符合 SOC 2 标准。它免费入门,并提供丰厚的每月免费额度……
5. markdown-it
Markdown 解析器,完美之选。100% 支持 CommonMark,支持扩展、语法插件,速度极快。
Markdown 解析器,完美之选。100% 支持 CommonMark,支持扩展、语法插件,速度极快。
markdown-it
一款优秀的 Markdown 解析器。速度快,易于扩展。
在线演示
目录
安装
node.js :
npm install markdown-it
Enter fullscreen mode
Exit fullscreen mode
浏览器(CDN):
使用示例
参见:
简单的
// node.js
// can use `require('markdown-it')` for CJS
import markdownit from 'markdown-it'
const md = markdownit ( )
const result = md . render ( '# markdown-it rulezz!' ) ;
// browser with UMD build, added to "window" on script …
Enter fullscreen mode
Exit fullscreen mode
6. Two.js
一个专为现代浏览器设计的二维绘图 API。它与渲染器无关,使得同一个 API 能够在多种上下文中进行渲染:webgl、canvas2d 和 svg。
一个与渲染器无关的二维绘图 API,适用于 Web。
Two.js
一个专为现代浏览器设计的二维绘图 API。它与渲染器无关,使得同一个 API 能够在多种上下文中进行渲染:webgl、canvas2d 和 svg。
首页 • 版本发布 • 示例 • 文档 • 变更日志 • 帮助
用法
下载最新 精简版库 并将其包含在您的 html 文件中。
< script src ="js/two.min.js "> </ script >
Enter fullscreen mode
Exit fullscreen mode
它也可以通过npm (Node 包管理器) 安装:
npm install -- save two . js
Enter fullscreen mode
Exit fullscreen mode
或者,您可以了解 如何自己构建库 。
以下是用于在 two.js 中绘制旋转矩形的 HTML 样板代码:
<!doctype html>
< html >
< head >
< meta charset ="utf-8 ">
< script src ="js/two.min.js "> </ script >
</ head >
< body >
< script >
var two = new Two ( {
fullscreen : true ,
autostart : true
} …
Enter fullscreen mode
Exit fullscreen mode
7. 超棒的 ZSH 插件
ZSH框架、插件、主题和教程的集合。
awesome-zsh-plugins
地位
受各种优秀列表合集的启发,收集了一系列 ZSH 框架、插件、教程和主题。
目录
请在贡献代码前阅读 贡献指南 。
免责声明
虽然我已尽力避免添加包含恶意代码的条目,但我……
8. 旗帜
使用单个 React Hook 为您的 Next.js 应用程序添加功能标志。此软件包将您的 Next.js 应用程序与 HappyKit 功能标志集成。
使用单个 React Hook 即可为您的 Next.js 应用添加功能标志。此软件包将您的 Next.js 应用与 HappyKit 功能标志集成。创建免费的 happykit.dev 帐户即可开始使用。
主要特点
为 Next.js 编写
使用简单的 useFlags()钩子或 getFlags()函数进行集成
支持应用路由(服务器组件和客户端组件)
压缩后仅 2 kB
极快的标志位响应速度(约50毫秒)
支持服务器端渲染和静态网站生成
支持中间件和边缘功能
支持用户定向、自定义规则和推广
想看演示吗?
文档
请参阅 完整文档 以获取设置说明和使用指南。
示例
这就是启动并运行后,功能标志的使用大致情况。
// pages/index.js
import { useFlags } from "flags/client" ;
export default function IndexPage ( props ) {
const flagBag = useFlags ( ) ;
return flagBag . …
Enter fullscreen mode
Exit fullscreen mode
9. 每个程序员都应该知道
这是一份(主要)技术性知识的集合,每个软件开发人员都应该了解这些知识。
这是一份(主要)技术性知识的集合,每个软件开发人员都应该了解这些知识。
加入我们的专业软件开发人员社区 ,更好地掌控您的生活和职业生涯!
每个程序员都应该知道🤔
这是一份汇集了每位软件开发人员都应该了解的(大部分是)技术知识的清单。
☝️ 这些资源我推荐给所有程序员,无论他们的技能水平或技术栈如何。
观点非常主观💣。缺乏科学依据。排名不分先后♻️
喜欢吗?点个赞⭐并 分享 给友好的开发者吧!不喜欢吗? 那就看看狗狗 🐶吧!
PS:你 不需要把 所有内容都背下来才能成为程序员。但了解这些知识肯定能帮助你进步!💪
欢迎 PPS 投稿!
介绍
谎言
10.命令行艺术
掌握命令行,只需一页
观星📈
免费编程书籍 +1,673 星
超赞 +1,672 星
每个程序员都应该知道的 +1,644 星
Remix +1,586 颗星
Lazy Git +1,460 星
Nice Modal React +42%
混音版 +27%
美杜莎 +25%
实用装饰师 +17%
学习 Web3 dapp +16%
超赞 +3,911 星
机器学习入门 +3,683 星
免费编程书籍 +3,413 星
美杜莎 +3,202 颗星
编程面试大学 +2,996 星
香水店 +268%
unocss +93%
vsCode Frontmatter +61%
Nice Modal React +27%
NextJS 样板代码 +48%
想要查看最新排名,请访问 Stargazing.dev
《热门项目》以每周新闻简报的形式发布,请在Stargazing.dev 注册, 以确保您不会错过任何一期。
如果你喜欢这篇文章,可以 关注我的 推特账号,我会定期发布关于HTML、CSS和JavaScript的内容。
文章来源:https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-3rd-december-2021-12f5