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.
Install
yarn add ui-box
# or
npm install --save ui-box
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>
}
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.
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.
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">
…3. React Sticky Box
Sticky Boxes with sensible behaviour if the content is bigger than the viewport.
codecks-io
/
react-sticky-box
Sticky boxes for contents of all sizes
React Sticky Box
Sticky Boxes with sensible behaviour if the content is bigger than the viewport.
Check out the docs to see it in action
>> react-sticky-box.codecks.io <<
Installation
npm install react-sticky-box
4. Monio
The most powerful IO monad implementation in JS, possibly in any language!
Monio
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, 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!
Wait, What's A "Monad"?
If you're already comfortable with Functional Programming (FP), and you're at least…
5. Color Legend Element
A custom element (web component) suitable for use as a legend in data visualizations
clhenrick
/
color-legend-element
A custom element (web component) suitable for use as a legend in data visualizations
Color Legend Element
<color-legend></color-legend>
A Custom Element suitable for use as a legend in data visualizations. Built with Lit/Lit-Element and D3JS.
Features
- Render legends for continuous, discrete, and categorical data.
- Uses
d3-scale
's concept of adomain
and arange
for mapping values to visual marks. - Compatable 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 (52kb minified and 18kb gzipped)
Installation
NOTE: the <color-legend>
assumes D3JS is available as a dependency. At the very least this should include the following modules from the D3JS library: d3-scale
, d3-array
, d3-format
, d3-interpolate
, and d3-scale-chromatic
(if using one of d3's color scheme interpolators).
Install via npm:
npm install color-legend-element
You may then import
the <color-legend>
in the desired ES Module:
6. Computer Science courses with video lectures
List of Computer Science courses with video lectures.
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.
Table of Contents
- Introduction to Computer Science
- Data Structures and Algorithms
- Systems Programming
- Database Systems
- Software Engineering
- Artificial Intelligence
- Machine Learning
- Web Programming and Internet Technologies
- Computer Networks
- Math for Computer Scientist
- Theoretical CS and Programming Languages
- Embedded Systems
- Real time system evaluation
- Computer Organization and Architecture
- Security
- Computer Graphics
- Image Processing and Computer Vision
- Computational Biology
- Quantum Computing
- Robotics
- Computational Finance
- Blockchain Development
- Misc
Courses
Introduction to Computer Science
- CS 10 - The Beauty and Joy of Computing - Spring 2015 - Dan Garcia - UC Berkeley InfoCoBuild
- 6.0001 - Introduction to Computer Science and Programming in Python - MIT OCW
- 6.001 - Structure and Interpretation of Computer Programs, MIT
- CS 50 - Introduction to Computer Science, Harvard University (cs50.tv)
- CS 61A - Structure and…
7. npm-run-all
A CLI tool to run multiple npm-scripts in parallel or sequential.
mysticatea
/
npm-run-all
A CLI tool to run multiple npm-scripts in parallel or sequential.
index | npm-run-all | run-s | run-p | Node API |
---|
npm-run-all
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, butcmd.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
- 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
DouyinFE
/
semi-design
A modern, comprehensive, flexible design system and React UI library
Semi-UI
A modern, comprehensive, flexible design system and UI library. Quickly build beautiful React apps
English | 简体中文
🎉 Features
-
💪 Up to 58 high-quality Components. -
💅 2000+ Design Tokens. Flexible custom render structure. Build your own design system. -
🌍 Internationalization Support for Dozens of Languages. -
👏 Written in Typescript, Friendly Static Type Support. -
🥳 SSR (Server Side Rendering) Compatible.
🔥 Install
# with npm
npm install @douyinfe/semi-ui
# with yarn
yarn add @douyinfe/semi-ui
👍 Usage
Here is a quick example to get you started, it's all you need:
import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Switch } from '@douyinfe/semi-ui';
const App = () => (
<>
<Button type='primary'>primary button</Button>
<Switch size='large' />
</>
);
ReactDOM.render(<App />,
…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.
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.
parcel-bundler
/
parcel
The zero configuration build tool for the web. 📦🚀
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! -
⚡️ Lighting 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🔗
- Public APIs +1,995 stars
- Coding Interview University +1,512 stars
- Awesome +1,220 stars
- Tech Interview Handbook +1,128 stars
- Mantine +972 stars
Top growth(%) over last 7 days🔗
- NextUI +32%
- Mantine +25%
- Remix Auth +11%
- Preview.js +10%
- p +9%
Top risers over last 30 days🔗
- Public APIs +5,366
- Awesome +4,887 stars
- Tauri +3,937 stars stars
- 30 Days of JavaScript +3,502 stars
- Awesome Selfhosted +3,213 stars
Top growth(%) over last 30 days🔗
- Iconoir +123%
- Basic Computer Games +98%
- Fuite +71%
- NextUI +48%
- 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)