DEV Community

Iain Freestone
Iain Freestone

Posted on

🚀10 Trending projects on GitHub for web developers - 28th January 2022

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

1. ui-box

ui-box is a low level CSS-in-JS solution that focuses on being simple, fast and extensible. All CSS properties are set using simple React props, which allows you to easily create reusable components that can be enhanced with additional CSS properties.

GitHub logo segmentio / ui-box

Blazing Fast React UI Primitive

📦 ui-box is a low level CSS-in-JS solution that focuses on being simple, fast and extensible. All CSS properties are set using simple React props, which allows you to easily create reusable components that can be enhanced with additional CSS properties. This is very useful for adding things like margins to components, which would normally require adding non-reusable wrapper elements/classes.

Install

yarn add ui-box
# or
npm install --save ui-box
Enter fullscreen mode Exit fullscreen mode

Usage

import Box from 'ui-box'

function Button(props) {
  return <Box is="button" padding="10px" background="red" {...props} />
}

function Example() {
  return (
    <Button disabled margin="10px">
      Hi
    </Button>
  )
}
Enter fullscreen mode Exit fullscreen mode

The above example component renders a red, disabled <button> with margins.

API

Box (default export)

is

Type: string or React component type
Default: 'div'

Lets you change the underlying…


2. clay.css

Easily add claymorphic styles to any HTML element with this micro class and SASS mixin.

GitHub logo codeAdrian / clay.css

Easily add claymorphic styles to any HTML element with this micro class and SASS mixin.

clay.css

Extensible and configurable micro CSS util class and SASS mixin for adding claymorphism styles to your components.

clay.css - Helps you create inflated fluffy 3D claymorphic HTML shapes | Product Hunt

About

Claymorphism is a fresh new concept. The name was coined by Michał Malewicz and the designers are excited to explore the possibilities of this approach to UI design.

It features inflated fluffy 3D elements which look charming and introduce a much more vibrant look compared to the usual flat designs.

What sets claymorphism apart from neumorphism is that it floats above the background instead of being connected to it, eliminating accessibility issues and design restrictions of the latter.

Installation

CDN

<link
  rel="stylesheet"
  href="https://unpkg.com/claymorphism-css/dist/clay.css"
/>

NPM

npm i claymorphism-css
yarn add claymorphism-css

Manual

Download and add the dist/clay.css or dist/clay.scss manually.

Usage

This is a minimal, single class CSS util that applies only basic claymorphism styles:

  • Background
  • Border radius
  • One outset shadow
  • Two inset shadows
<div class="clay">
Enter fullscreen mode Exit fullscreen mode

3. React Sticky Box

Sticky Boxes with sensible behaviour if the content is bigger than the viewport.

GitHub logo codecks-io / react-sticky-box

Sticky boxes for contents of all sizes

Version Downloads/Week Minified Bundlesize Minified Gzipped Bundlesize

React Sticky Box

Sticky Boxes with sensible behaviour if the content is bigger than the viewport.

Documentation & Demo

react-sticky-box.codecks.io

Quick Start

Use as a Component

import StickyBox from "react-sticky-box";

const Page = () => (
  <div className="row">
    <StickyBox offsetTop={20} offsetBottom={20}>
      <div>Sidebar</div>
    </StickyBox>
    <div>Content</div>
  </div>
);
Enter fullscreen mode Exit fullscreen mode

Or via the useStickyBox hook

import {useStickyBox} from "react-sticky-box";
const Page = () => {
  const stickyRef = useStickyBox({offsetTop: 20, offsetBottom: 20})
  <div className="row">
    <aside ref={stickyRef}>
      <div>Sidebar</div>
    </aside>
    <div>Content</div>
Enter fullscreen mode Exit fullscreen mode

4. Monio

The most powerful IO monad implementation in JS, possibly in any language!

GitHub logo getify / monio

The most powerful IO monad implementation in JS, possibly in any language!

Monio

Build Status npm Module Coverage Status Modules License

Monio (mō'ne-yo) provides an async-capable IO Monad (including "do" style) for JS, with several helpful companion monads (like Maybe and Either) thrown in.

Monio's IO/IOx is the most powerful IO monad implementation in JS, possibly in any language!

Note: This is obviously a marketing claim, not a provable mathematical/scientific assertion. Nevertheless, I believe it's true!

Just("Welcome, Monads")
.concat(Just(" And Friends"))
.map(v => v.toUpperCase())
.fold(Maybe.from)
.map(v => v + "!")
.fold(
    () => IO.of("--empty--"),
    greetings => IO(() => console.log(greetings))
)
.run();
// WELCOME, MONADS AND FRIENDS!
Enter fullscreen mode Exit fullscreen mode

Wait, What's A "Monad"?

If you're already comfortable with Functional Programming (FP), and you're…


5. Color Legend Element

A custom element (web component) suitable for use as a legend in data visualizations

GitHub logo clhenrick / color-legend-element

A custom element (web component) suitable for use as a legend in data visualizations

Color Legend Element

Screenshot of color-legend-element

<color-legend
  titletext="Snowfall (cm)"
  scaletype="continuous"
  tickformat=".0f"
  domain="[0, 100]"
  range='["#eff3ff", "#bdd7e7", "#6baed6", "#3182bd", "#08519c"]'
>
</color-legend>
Enter fullscreen mode Exit fullscreen mode

A Custom Element suitable for use as a legend in data visualizations. Built with Lit and D3JS.

Features

  • Render legends for continuous, discrete, threshold, and categorical scales.
  • Uses d3-scale's concept of a domain and a range for mapping values to visual marks.
  • Compatible with color interpolators from d3-scale-chromatic
  • Customizable via its properties / attributes and CSS variables.
  • Framework and bundler not required, just add a <script> tag and use it!
  • Small bundle size: 27kb minified and 9kb gzipped.

Installation

NOTE: the <color-legend> assumes D3JS is available as a peer dependency. At the very least this should include the following modules from the D3JS library: d3-scale, d3-array, d3-format, d3-interpolate


6. Computer Science courses with video lectures

List of Computer Science courses with video lectures.

GitHub logo Developer-Y / cs-video-courses

List of Computer Science courses with video lectures.

Computer Science courses with video lectures

Introduction

  • Please check NOTES for general information about this list.
  • Please refer CONTRIBUTING.md for contribution guidelines.
  • Please feel free to raise any genuine issue you may have, however, it has been noticed that few people open empty issues to raise their GitHub contribution on their account. Such spammers will be blocked.
  • You are welcome to contribute, please create PR for actual college/University level courses. Please do not add links for small MOOCs, basic tutorials, or advertisements for some sites/channels.

Table of Contents



7. npm-run-all

A CLI tool to run multiple npm-scripts in parallel or sequential.

GitHub logo mysticatea / npm-run-all

A CLI tool to run multiple npm-scripts in parallel or sequential.

npm-run-all

npm version Downloads/month Build Status Build status Coverage Status Dependency Status

A CLI tool to run multiple npm-scripts in parallel or sequential.

⤴️ Motivation

  • Simplify. The official npm run-script command cannot run multiple scripts, so if we want to run multiple scripts, it's redundant a bit. Let's shorten it by glob-like patterns. Before: npm run clean && npm run build:css && npm run build:js && npm run build:html After: npm-run-all clean build:*
  • Cross platform. We sometimes use & to run multiple command in parallel, but cmd.exe (npm run-script uses it by default) does not support the &. Half of Node.js users are using it on Windows, so the use of & might block contributions. npm-run-all --parallel works well on Windows as well.

💿 Installation

$ npm install npm-run-all --save-dev
# or
$ yarn add npm-run-all --dev
Enter fullscreen mode Exit fullscreen mode
  • It requires Node@>=4.

📖 Usage

CLI Commands

This npm-run-all package provides 3 CLI commands.


8. Semi-UI

A modern, comprehensive, flexible design system and React UI library

GitHub logo DouyinFE / semi-design

🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 3000+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click

Semi-UI

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps

Twitter Follow

LICENSE NPM CONTRIBUTORS Design Token FIGMA CODECOV Chromatic Cypress

English | 简体中文

🎉 Features

  • 💪 Up to 60+ high-quality Components. Stable update since 2019
  • 🚀 Official Design to Code (D2C) support, convert figma draft to real code in a few seconds
  • 💅 Code to Design (C2D), automatically generate Figma UI Kit according to different themes, keep same between design and code
  • 💕 Complete A11y support, follows W3C standards to provide keyboard interaction, focus management and ARIA for all components
  • 💅 Design system management Semi DSM, up to 2700+ Design Tokens, make Semi Design to Any Design quickly.
  • 🌍 Internationalization Support for Dozens of Languages, timezone, RTL support
  • ⚙️ Strict quality assurance, covering unit testing, E2E testing, visual testing.
  • 👏 Written in Typescript, friendly Static Type Support. Based on Foundation/Adapter architecture, easy to read and contribute
  • 🥳 SSR (Server Side Rendering)…





9. Underscore.js

Underscore.js is a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, reduce, filter...) without extending any core JavaScript objects.

GitHub logo jashkenas / underscore

JavaScript's utility _ belt

                   __
                  /\ \                                                         __
 __  __    ___    \_\ \     __   _ __   ____    ___    ___   _ __    __       /\_\    ____
/\ \/\ \ /' _ `\  /'_  \  /'__`\/\  __\/ ,__\  / ___\ / __`\/\  __\/'__`\     \/\ \  /',__\
\ \ \_\ \/\ \/\ \/\ \ \ \/\  __/\ \ \//\__, `\/\ \__//\ \ \ \ \ \//\  __/  __  \ \ \/\__, `\
 \ \____/\ \_\ \_\ \___,_\ \____\\ \_\\/\____/\ \____\ \____/\ \_\\ \____\/\_\ _\ \ \/\____/
  \/___/  \/_/\/_/\/__,_ /\/____/ \/_/ \/___/  \/____/\/___/  \/_/ \/____/\/_//\ \_\ \/___/
                                                                              \ \____/
                                                                               \/___/

Underscore.js is a utility-belt library for JavaScript that provides support for the usual functional suspects (each, map, reduce, filter...) without extending any core JavaScript objects.

For Docs, License, Tests, and pre-packed downloads, see https://underscorejs.org

For support and questions, please consult our security policy the gitter channel or stackoverflow

Underscore is an open-sourced component of DocumentCloud https://github.com/documentcloud

Many thanks…


10. Parcel

Parcel is a zero configuration build tool for the web. It combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.

GitHub logo parcel-bundler / parcel

The zero configuration build tool for the web. 📦🚀

Parcel

Backers on Open Collective Sponsors on Open Collective Build Status npm package npm package Discord Twitter Follow

Parcel is a zero configuration build tool for the web. It combines a great out-of-the-box development experience with a scalable architecture that can take your project from just getting started to massive production application.

Features

  • 😍 Zero config – Parcel supports many languages and file types out of the box, from web technologies like HTML, CSS, and JavaScript, to assets like images, fonts, videos, and more. It has a built-in dev server with hot reloading, beautiful error diagnostics, and much more. No configuration needed!
  • ⚡️ Lightning fast – Parcel's JavaScript compiler is written in Rust for native performance. Your code is built in parallel using worker threads, utilizing all of the cores on your machine. Everything is cached, so you never build the same code twice. It's like using watch mode, but even when you restart Parcel!
  • 🚀 Automatic production optimization – Parcel optimizes your whole app for production automatically…

Stargazing 📈

Top risers over last 7 days🔗

  1. Public APIs +1,995 stars
  2. Coding Interview University +1,512 stars
  3. Awesome +1,220 stars
  4. Tech Interview Handbook +1,128 stars
  5. Mantine +972 stars

Top growth(%) over last 7 days🔗

  1. NextUI +32%
  2. Mantine +25%
  3. Remix Auth +11%
  4. Preview.js +10%
  5. p +9%

Top risers over last 30 days🔗

  1. Public APIs +5,366
  2. Awesome +4,887 stars
  3. Tauri +3,937 stars stars
  4. 30 Days of JavaScript +3,502 stars
  5. Awesome Selfhosted +3,213 stars

Top growth(%) over last 30 days🔗

  1. Iconoir +123%
  2. Basic Computer Games +98%
  3. Fuite +71%
  4. NextUI +48%
  5. Remix Auth +42%

For all for the latest rankings please checkout Stargazing.dev


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

If you enjoyed this article you can follow me on Twitter where I regularly post about HTML, CSS and JavaScript.

Top comments (0)