🚀10 Trending projects on GitHub for web developers - 12th November 2021

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. Hydrogen

React-based framework for building dynamic, Shopify-powered custom storefronts.

Shopify / hydrogen

React-based framework for building dynamic, Shopify-powered custom storefronts.

📚 Docs | 🗣 Discord | 💬 Discussions | 📝 Changelog

Hydrogen is a React-based framework for building dynamic, Shopify-powered custom storefronts.

Spin up a Hydrogen app in your browser with our playground or set up your local environment with the instructions below ⬇️

This is a developer preview of Hydrogen. The documentation will be updated as Shopify introduces new features and refines existing functionality. Production launches of Hydrogen custom storefronts aren't yet supported as Shopify is evolving the Hydrogen framework.

Getting Started

Requirements:

yarn or npm
Node.js version 14.0 or higher

Installation:

# Using `yarn`
yarn create hydrogen-app
# Using `npm`
npm init hydrogen-app@latest

# Using `npx`
npx create-hydrogen-app

Running locally:

Start a development server

# Using `yarn`
yarn install
yarn dev

# Using `npm`
npm i --legacy-peer-deps
npm run dev

Visit the development environment running at http://localhost:3000.

Learn more about getting started with Hydrogen.

…

View on GitHub

2. quicktype

quicktype generates strongly-typed models and serializers from JSON, JSON Schema, TypeScript, and GraphQL queries, making it a breeze to work with JSON type-safely in many programming languages.

quicktype / quicktype

Generate types and converters from JSON, Schema, and GraphQL

quicktype generates strongly-typed models and serializers from JSON, JSON Schema, TypeScript, and GraphQL queries, making it a breeze to work with JSON type-safely in many programming languages.

Try quicktype in your browser.
Read 'A first look at quicktype' for more introduction.
If you have any questions, check out the FAQ first.

Supported Inputs

JSON	JSON API URLs	JSON Schema

TypeScript	GraphQL queries

Target Languages

Ruby	JavaScript	Flow	Rust	Kotlin

Dart	Python	C#	Go	C++

Java	TypeScript	Swift	Objective-C	Elm

JSON Schema	Pike	Prop-Types	Haskell

Missing your favorite language? Please implement it!

Installation

There are many ways to use quicktype. app.quicktype.io is the most powerful and complete UI. The web app also works offline and doesn't send your sample data over the Internet, so paste away!

For the best CLI, we recommend installing quicktype globally via npm:

npm install -g quicktype

Other options:

Homebrew (infrequently updated)
Xcode…

View on GitHub

3. it

A collection of utilities for making working with iterables more bearable

achingbrain / it

A collection of utilities for making working with iterables more bearable

it

Utility modules to make dealing with async iterators easier, some trivial, some not.

blob-to-it Turn a Blob into an iterable
browser-readablestream-to-it Turn a browser ReadableStream into an iterable
it-all Collect the contents of an iterable into an array
it-batch Batch up the contents of an iterable into arrays
it-buffer-stream Creates an iterable of buffers
it-drain Consume an iterable and ignore any output
it-filter Skip some items in an iterable based on a filter function
it-first Return the first item in an iterable
it-flat-batch Take an iterable of variable length arrays and make them all the same length
it-glob Glob matcher for file systems
it-last Return the last item in an iterable
it-length Consume an iterable and return its length
it-map Map the output of an iterable
it-merge Treat multiple iterables as one
it-multipart Parse multipart message bodies as an iterable
it-parallel Take an iterable of functions that return promises…

View on GitHub

4. Dripsy

Responsive, unstyled UI primitives for React Native + Web.

nandorojo / dripsy

🍷 Responsive, unstyled UI primitives for React Native + Web.

Unstyled, responsive UI primitives for React Native + Web.

<View sx={{ bg: '$primary', height: [100, 200] }} />

Documentation & Installation

Highlights

Code.-.App.tsx.dripsy.mp4

Custom fonts, edited globally
Full TypeScript support
Responsive styles
Universal (Android, iOS, Web, & more)
Works with Expo
Works with Vanilla React Native
Works with Next.js
Full theme support
Custom theme variants
Insanely simple API (themed, responsive designs in one line!)
Works with Animated/Reanimated/Moti
Dark mode / custom color modes
Memoized styles, even when written inline
Atomic CSS classes, with StyleSheet.create under the hood
Use with @expo/vector-icons (example)
Linear Gradient
Performant: sx prop is memoized under the hood (even if you write it in render)

Next.js Conf

I spoke at at Next.js Conf 2021 on October 26 about React Native + Next.js. Watch the video to see how we do it.

…

View on GitHub

5. Spark Joy

Design tools and tips for developers in a hurry. Easy ways to add design flair, user delight, and whimsy to your product.

sw-yx / spark-joy

✨😂easy ways to add design flair, user delight, and whimsy to your product.

Easy ways to add design flair, user delight, and whimsy to your product!

The Spark Joy philosophy is explained in further detail in my book, check it out if you'd like to explore how this approach applies to a lot more than design utilities.

Table of Contents

Web Design in 4 minutes

Keep it simple: https://jgthms.com/web-design-in-4-minutes/

CSS/UI Templates

HTML/CSS nice templates

https://www.free-css.com/
https://www.creative-tim.com/
https://wickedtemplates.com using Tailwind v2 (and wickedblocks) and https://wickedbackgrounds.com/
https://www.tailwind-kit.com/ free tailwind component…

View on GitHub

6. GitHub Readme Stats

Dynamically generated stats for your GitHub readmes

anuraghazra / github-readme-stats

⚡ Dynamically generated stats for your github readmes

GitHub Readme Stats

Get dynamically generated GitHub stats on your readmes!

View Demo · Report Bug · Request Feature

Français · 简体中文 · Español · Deutsch · 日本語 · Português Brasileiro · Italiano · 한국어 Nederlands नेपाली . Türkçe

Love the project? Please consider donating to help it improve!

Are you considering to support the project by donating to me? Please DON'T!!

Instead, Help India fight 2nd deadly wave of COVID,
Thousands of people are dying in India for lack of Oxygen & COVID related necessary infrastructure.

Visit https://indiafightscorona.giveindia.org and make a small donation to help us fight covid and overcome this crisis.
Your small help goes a long way. ❤️

Features

GitHub Stats

…

View on GitHub

7. 30 Days Of JavaScript

30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace.

Asabeneh / 30-Days-Of-JavaScript

30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace.

30 Days Of JavaScript

# Day	Topics
01	Introduction
02	Data Types
03	Booleans, Operators, Date
04	Conditionals
05	Arrays
06	Loops
07	Functions
08	Objects
09	Higher Order Functions
10	Sets and Maps
11	Destructuring and Spreading
12	Regular Expressions
13	Console Object Methods
14	Error Handling
15	Classes
16	JSON
17	Web Storages
18	Promises
19	Closure
20	Writing Clean Code
21	DOM
22	Manipulating DOM Object
23	Event Listeners
24	Mini Project: Solar System
25	Mini Project: World Countries Data Visulalization 1
26	Mini Project: World Countries Data Visulalization 2
27	Mini Project: Portfolio
28	Mini Project: Leaderboard
29	Mini Project:Animating characters
30	Final Projects

🧡🧡🧡 HAPPY CODING 🧡🧡🧡

Support the author to create more educational materials

30 Days Of JavaScript: Introduction

_{Author
Asabeneh Yetayeh

January, 2020}

🇬🇧 English 🇪🇸 Spanish 🇷🇺 Russian

Day 2 >>

30 Days Of JavaScript
📔 Day 1
- …

View on GitHub

8. mercurius

Implement GraphQL servers and gateways with Fastify

mercurius-js / mercurius

Implement GraphQL servers and gateways with Fastify

mercurius

Mercurius is a GraphQL adapter for Fastify

Features:

Caching of query parsing and validation.
Automatic loader integration to avoid 1 + N queries.
Just-In-Time compiler via graphql-jit.
Subscriptions.
Federation support.
Federated subscriptions support.
Gateway implementation, including Subscriptions.
Batched query support.
Customisable persisted queries.

Docs

Install

npm i fastify mercurius graphql
# or
yarn add fastify mercurius graphql

The previous name of this module was fastify-gql (< 6.0.0).

Quick Start

'use strict'
const Fastify = require('fastify')
const mercurius = require('mercurius')

const app = Fastify()

const schema = `
  type Query {
    add(x: Int, y: Int): Int
  }
`

const resolvers = {
  Query: {
    add: async (_, { x, y }

…

View on GitHub

9. OpenUI5

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.

SAP / openui5

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.

OpenUI5. Build Once. Run on any device.

What is it?

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice. It's based on JavaScript and follows web standards It eases your development with a client-side HTML5 rendering library including a rich set of controls and supports data binding to different data models (JSON, XML and OData).

And... it's free and open source: OpenUI5 is licensed under the Apache License, Version 2.0 - see LICENSE.txt It also contains third-party open source modules. See the list and respective licenses in THIRDPARTY.txt Third-party module license information is also available in machine-readable format in the .reuse/dep5 file.

Try it!

Check out our control playground as well as a number of sample applications.

Get it!

Go to the download page and get the complete UI5 runtime and the UI5 SDK containing the documentation…

View on GitHub

10. Clarity

A behavioral analytics library that uses dom mutations and user interactions to generate aggregated insights.

microsoft / clarity

A behavioral analytics library that uses dom mutations and user interactions to generate aggregated insights.

Clarity

Clarity is an open-source behavioral analytics library written in typescript, with two key goals: privacy & performance.

It helps you understand how users view and use your website across all modern devices and browsers. Understanding how users navigate, interact and browse your website can provide new insights about your users. Empathizing with your users and seeing where features fail or succeed can help improve your product, grow revenue and improve user retention.

It's the same code that powers Microsoft's hosted behavioral analytics solution: https://clarity.microsoft.com. If you would like to see a demo of how it works, checkout live demo.

We encourage the community to join us in building the best behavioral analytics library, that puts privacy first and prioritizes performance.

Project Structure

clarity-js: Instrumentation code that goes on the website and tracks user interactions as well as layout changes.
clarity-decode: Code, which usually runs on…

View on GitHub

Stargazing 📈

Top risers over last 7 days🔗

Machine Learning for beginner +772 stars

Awesome +607 stars

The book of secret knowledge +514 stars

Coding Interview University +494 stars

Public APIs +491 stars

Top growth(%) over last 7 days🔗

Fragstore +94%

NextJS Boilerplate +30%

Ethereal React +15%