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

🚀10 Trending projects on GitHub for web developers - 3rd December 2021 Awesome Advent of Code markdown-it Two.js awesome-zsh-plugins Every Programmer Should Know 🤔 The Art of Command Line

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

代码的奇妙降临

markdown-it

Two.js

awesome-zsh-plugins

每个程序员都应该知道🤔

命令行艺术

《热门项目》以每周新闻简报的形式发布,请在Stargazing.dev注册,以确保您不会错过任何一期。

1. 开放道具

CSS 自定义属性有助于加速自适应和一致的设计。适用于任何框架。

GitHub 标志 argyleink / open-props

CSS 自定义属性有助于加速自适应和一致的设计。

打开道具标志

开源CSS变量

colors gradients shadows aspect ratios typography
easings animations sizes borders z-indexes media-queries

测试 npm 版本 Discord


需要帮助?👉   Discord


CDN(浏览

书签小程序

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 交互。

GitHub 标志 Netflix / pollyjs

记录、重放和存根 HTTP 交互。

Polly.JS

记录、重放和存根 HTTP 交互

构建状态 执照

Polly.JS 是一个独立的、与框架无关的 JavaScript 库,支持 HTTP 交互的录制、回放和模拟。通过调用 Node 和浏览器中的多个请求 API,Polly.JS 能够以极少的配置甚至无需配置即可模拟请求和响应,同时还提供了一个简单、强大且直观的 API,让您可以完全控制每个请求。

有兴趣参与贡献或只是想看看 Polly 的实际应用吗?请前往CONTRIBUTING.md了解如何启动项目!

为什么是波莉?

保持 fixtures 和 factory 与 API 保持一致可能是一个耗时的过程。Polly 通过记录和维护实际的服务器响应来缓解这一过程,同时还保持灵活性。

  • 记录测试套件的 HTTP 交互,并在未来的测试运行中重放这些交互,以实现快速、确定性、准确的测试。
  • 使用 Polly 的客户端服务器来修改或拦截请求和响应,以模拟……

3. 代码的奇妙诞生

一系列与一年一度的“代码降临节”挑战赛相关的精彩资源。


4. PostHog

PostHog 是一款专为开发者打造的开源产品分析套件。它可以自动收集您网站或应用上的每一个事件,无需将数据发送给第三方。

GitHub 标志 PostHog / posthog

🦔 PostHog 提供开源产品分析、会话录制、功能标记和 A/B 测试,您可以自行托管。

邮局标志

欢迎公关稿 Docker拉取 GitHub提交活动 GitHub 已关闭的问题

文档-社区-路线图-更新日志-问题报告

PostHog 演示
观看 PostHog 的运行演示

PostHog 是一个一体化的开源平台,用于构建更好的产品

  • 手动指定事件,或使用自动捕获快速入门。
  • 使用现成的可视化工具分析数据,或者使用 SQL 自己创建可视化图表。
  • 使用我们的 GA4 替代方案单独跟踪网站访问者
  • 只收集你想追踪的人员的属性信息,这样可以节省不必要的费用。
  • 通过捕获会话回放、控制台日志和网络监控来收集信息
  • 利用可自动分析性能的实验来改进您的产品
  • 使用功能开关安全地向选定的用户或用户群推出功能
  • 向特定用户群体发送完全可定制的调查问卷。
  • 使用 PostHog CDP 连接外部服务并管理数据流

PostHog 提供欧盟或美国的托管服务,并完全符合 SOC 2 标准。它免费入门,并提供丰厚的每月免费额度……





5. markdown-it

Markdown 解析器,完美之选。100% 支持 CommonMark,支持扩展、语法插件,速度极快。

GitHub 标志 markdown-it / markdown-it

Markdown 解析器,完美之选。100% 支持 CommonMark,支持扩展、语法插件,速度极快。

markdown-it

置信区间 NPM 版本 覆盖范围状态 吉特

一款优秀的 Markdown 解析器。速度快,易于扩展。

在线演示

  • 遵循CommonMark 规范,并添加了语法扩展和语法糖(URL 自动链接、排版器)。
  • 语法可配置!您可以添加新规则,甚至可以替换现有规则。
  • 高速。
  • 默认安全。
  • npm 上的社区编写的插件其他软件包。

目录

安装

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。

GitHub 标志 jonobr1 / two.js

一个与渲染器无关的二维绘图 API,适用于 Web。

Two.js

NPM 包 构建尺寸 NPM 下载

一个专为现代浏览器设计的二维绘图 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框架、插件、主题和教程的集合。


8. 旗帜

使用单个 React Hook 为您的 Next.js 应用程序添加功能标志。此软件包将您的 Next.js 应用程序与 HappyKit 功能标志集成。

GitHub 标志 happykit /旗帜

⛳️ Next.js 的功能标志

文档  •  示例  •  完整教程  •  happykit.dev  •  @happykitdev

 

使用单个 React Hook 即可为您的 Next.js 应用添加功能标志。此软件包将您的 Next.js 应用与 HappyKit 功能标志集成。创建免费的happykit.dev帐户即可开始使用。

主要特点

  • 为 Next.js 编写
  • 使用简单的useFlags()钩子或getFlags()函数进行集成
  • 支持应用路由(服务器组件和客户端组件)
  • 压缩后仅 2 kB
  • 极快的标志位响应速度(约50毫秒)
  • 支持服务器端渲染和静态网站生成
  • 支持中间件和边缘功能
  • 支持用户定向、自定义规则和推广

想看演示吗? HappyKit 旗帜演示


文档

请参阅完整文档以获取设置说明和使用指南。

示例

这就是启动并运行后,功能标志的使用大致情况。

// 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. 每个程序员都应该知道

这是一份(主要)技术性知识的集合,每个软件开发人员都应该了解这些知识。

GitHub 标志 mtdvio /每个程序员都应该知道

这是一份(主要)技术性知识的集合,每个软件开发人员都应该了解这些知识。

加入我们的专业软件开发人员社区,更好地掌控您的生活和职业生涯!


每个程序员都应该知道🤔

这是一份汇集了每位软件开发人员都应该了解的(大部分是)技术知识的清单。

☝️这些资源我推荐给所有程序员,无论他们的技能水平或技术栈如何。

观点非常主观💣。缺乏科学依据。排名不分先后♻️

喜欢吗?点个赞⭐并分享给友好的开发者吧!不喜欢吗?那就看看狗狗🐶吧!

PS:你不需要把所有内容都背下来才能成为程序员。但了解这些知识肯定能帮助你进步!💪

欢迎PPS投稿!


介绍

谎言


10.命令行艺术

掌握命令行,只需一页

GitHub 标志 jlevy /命令行艺术

掌握命令行,只需一页

🌍捷克语德语Ελληνικά英语西班牙语法语印度尼西亚语意大利语日本语한국어波兰语葡萄牙语罗马语Русский斯洛文尼亚语Українська简体中文繁体中文

命令行艺术

注:我计划修订此指南,并正在寻找一位新的合著者,共同将其扩展成一份更全面的指南。虽然它很受欢迎,但还可以更广泛、更深入一些。如果您喜欢写作,并且对这方面的内容比较熟悉,也愿意提供帮助,请发送邮件至 josh (0x40) holloway.com 联系我。—— jlevyHolloway。谢谢!

curl -s 'https://raw.githubusercontent.com/jlevy/the-art-of-command-line/master/README.md' | egrep -o '\w+' | tr -d '`' | cowsay -W50

熟练掌握命令行是一项经常被忽视或被认为晦涩难懂的技能,但它可以提高你的灵活性……


观星📈

过去7天涨幅最大的股票🔗

  1. 免费编程书籍+1,673 星
  2. 超赞+1,672 星
  3. 每个程序员都应该知道的+1,644 星
  4. Remix +1,586 颗星
  5. Lazy Git +1,460 星

过去 7 天增长最快的百分比🔗

  1. Nice Modal React +42%
  2. 混音版+27%
  3. 美杜莎+25%
  4. 实用装饰师+17%
  5. 学习 Web3 dapp +16%

过去30天涨幅最大的股票🔗

  1. 超赞+3,911 星
  2. 机器学习入门+3,683 星
  3. 免费编程书籍+3,413 星
  4. 美杜莎+3,202 颗星
  5. 编程面试大学+2,996 星

过去 30 天增长最快的百分比🔗

  1. 香水店+268%
  2. unocss +93%
  3. vsCode Frontmatter +61%
  4. Nice Modal React +27%
  5. 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