DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 7th May 2021

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

1. Keystone

The most powerful headless CMS for Node.js — built with GraphQL and React

GitHub logo keystonejs / keystone

The superpowered headless CMS for Node.js — built with GraphQL and React

Keystone: The superpowered CMS for developers




Keystone helps you build faster and scale further than any other CMS or App Framework. Describe your schema, and get a powerful GraphQL API & beautiful Management UI for your content and data.

No boilerplate or bootstrapping – just elegant APIs to help you ship the code that matters without sacrificing the flexibility or power of a bespoke back-end

Contents

Usage & Documentation

Keystone 6 is published to npm under the @keystone-6/* namespace.

You can find our extended documentation on our website, but some quick links that might be helpful:


2. Lit

Lit is a simple library for building fast, lightweight web components.

GitHub logo lit / lit

Lit is a simple library for building fast, lightweight web components.

Lit

Simple. Fast. Web Components.

Build Status Published on npm Join our Discord Mentioned in Awesome Lit

Lit is a simple library for building fast, lightweight web components.

At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.

Documentation

See the full documentation for Lit at lit.dev.

Additional documentation for developers looking to contribute or understand more about the project can be found in dev-docs.

npm

To install from npm:

npm i lit
Enter fullscreen mode Exit fullscreen mode

Lit Monorepo

This is the monorepo for Lit packages.

lit 2.x source is available on the 2.x branch. lit-html 1.x source is available on the lit-html-1.x branch.

Packages

  • Core packages
    • lit - The primary user-facing package of Lit which includes everything from lit-html and lit-element.
    • lit-element - The web component base class used in Lit.
    • lit-html - The rendering library used by LitElement.
    • @lit/reactive-element - A low level base class that provides a…





3. Slick

The last carousel you'll ever need

GitHub logo kenwheeler / slick

the last carousel you'll ever need

slick

the last carousel you'll ever need

Demo

http://kenwheeler.github.io/slick

CDN

To start working with Slick right away, there's a couple of CDN choices available to serve the files as close, and fast as possible to your users:

Example using jsDelivr

Just add a link to the css file in your <head>:

<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
Enter fullscreen mode Exit fullscreen mode

Then, before your closing <body> tag add:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Package Managers

# Bower
bower install --save slick-carousel

# NPM
npm install slick-carousel
Enter fullscreen mode Exit fullscreen mode

Contributing

PLEASE review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or…


4. Remix Icon

Open source neutral style icon system

GitHub logo Remix-Design / RemixIcon

Open source neutral style icon system

logo

npm downloads donate

Sponsor

English | 简体中文

Remix Icon is a set of open-source neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 2800+ icons are all elaborately crafted so that they are born with the genes of readability, consistency, and perfect pixels. Each icon was designed in "Outlined" and "Filled" styles based on a 24x24 grid. Of course, all the icons are free for both personal and commercial use.

icon demo View the full set of Remix Icons at remixicon.com.

Usage

Basic Usage

Just click the icons you want from remixicon.com, and then you can download the icons in SVG or PNG format.

Designers can click the Copy SVG button and then press ⌘+V or Ctrl+V to paste the vector graphic into your design tool directly, it is easy and simple.

We recommend that designers download or copy icons from our website when needed instead of managing all of them…


5. Next.js Notion Starter Kit

Deploy your own Notion-powered website in minutes with Next.js and Vercel.

GitHub logo transitive-bullshit / nextjs-notion-starter-kit

Deploy your own Notion-powered website in minutes with Next.js and Vercel.

Example article page

Next.js Notion Starter Kit

The perfect starter kit for building websites with Next.js and Notion.

Build Status Prettier Code Formatting

Intro

This repo is what I use to power my personal blog and portfolio site transitivebullsh.it.

It uses Notion as a CMS, react-notion-x, Next.js, and Vercel.

Features

  • Setup only takes a few minutes (single config file) 💪
  • Robust support for Notion content via react-notion-x
  • Built using Next.js, TS, and React
  • Excellent page speeds
  • Smooth image previews
  • Automatic social images
  • Automatic pretty URLs
  • Automatic table of contents
  • Full support for dark mode
  • Quick search via CMD+K / CMD+P
  • Responsive for different devices
  • Optimized for Next.js and Vercel

Demos

  • Default demo - Deployed from the main branch
  • My site - Deployed from the transitive-bullshit branch

Setup

All config is defined in site.config.ts.

This project requires a recent version of Node.js (we recommend >= 16).

  1. Fork / clone this repo
  2. Change…

6. Mantine

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

GitHub logo mantinedev / mantine

A fully featured React components library

Mantine

NPM GitHub contributors npm npm Help wanted Discord X Follow

Links

Packages

Getting help

Mantine has a very friendly community, we are always happy to help you get started:


7. The Fuck

Magnificent app which corrects your previous console command.

GitHub logo nvbn / thefuck

Magnificent app which corrects your previous console command.

The Fuck Version Build Status Coverage MIT License

The Fuck is a magnificent app, inspired by a @liamosaur tweet that corrects errors in previous console commands.

Is The Fuck too slow? Try the experimental instant mode!

gif with examples

More examples:

➜ apt-get install vim
E: Could not open lock file /var/lib/dpkg/lock - open (13: Permission denied)
E: Unable to lock the administration directory (/var/lib/dpkg/), are you root?

➜ fuck
sudo apt-get install vim [enter/↑/↓/ctrl+c]
[sudo] password for nvbn:
Reading package lists... Done
...
Enter fullscreen mode Exit fullscreen mode
➜ git push
fatal: The current branch master has no upstream branch.
To push the current branch and set the remote as upstream, use

    git push --set-upstream origin master


➜ fuck
git push --set-upstream origin master [enter/↑/↓/ctrl+c]
Counting objects: 9, done.
...
Enter fullscreen mode Exit fullscreen mode
➜ puthon
No command 'puthon' found, did you mean
 Command 'python' from package 'python-minimal' (main)
 Command 'python' from package 'python3' (main)
Enter fullscreen mode Exit fullscreen mode

8. git curate

Peruse and delete git branches ergonomically

GitHub logo matt-harvey / git_curate

✂️ Peruse and delete git branches ergonomically

git curate

Gem Version Build Status Coverage Status Awesome

Demo

Motivation

After a while, my local repo becomes cluttered with branches, and git branch outputs an awkwardly long list. I want to delete some of those branches to bring that list back under control; but I can’t always remember which branches I want to keep from the branch names alone; and inspecting them one at a time and then running git branch -D in a separate step, is painful.

git curate is intended to ease this pain. It steps you through the local branches of a repo one at a time, outputting the following information about each:

  • Last commit date
  • Last commit hash
  • Last commit author
  • Last commit subject
  • Whether the branch has been merged into the current HEAD
  • The status of the branch relative to the upstream branch it is tracking (if any)

You can then select whether to delete or keep each branch as you go.


9. Scribbletune

Create music with JavaScript. Use simple JavaScript Strings and Arrays to generate rhythms and musical patterns. Directly use the names of scales or chords in your code to get arrays which you can mash up using Array methods in ways you hadn't imagined before!

GitHub logo scribbletune / scribbletune

Create music with JavaScript

SCRIBBLETUNE

Build Status Try scribbletune on RunKit

Use simple JavaScript Strings and Arrays to generate rhythms and musical patterns. Directly use the names of scales or chords in your code to get arrays which you can mash up using Array methods in ways you hadn't imagined before! Create clips of musical ideas and export MIDI files which you can import in Ableton Live, Reason, GarageBand or any music creation software that accepts MIDI files.

Install

npm install scribbletune
Enter fullscreen mode Exit fullscreen mode

Use it to create a MIDI clip by running a JS file from your terminal using node.js

const scribble = require('scribbletune');
const clip = scribble.clip({
    notes: scribble.scale('C4 major'),
    pattern: 'x'.repeat(7) + '_'
});

scribble.midi(clip, 'c-major.mid');
Enter fullscreen mode Exit fullscreen mode

You can use Scribbletune even in the browser with Tone.js!. There are a…


10. Replay

A React video player facilitating adaptive stream playback with custom UI and a React-friendly API.

GitHub logo vimond / replay

A React video player facilitating adaptive stream playback with custom UI and a React-friendly API.

Replay

Replay is a React video player with these key characteristics:

  • Ready-to-use component.
  • Custom and customisable player controls and UX.
  • Enables adaptive streaming, thanks to HLS.js and Shaka Player integrations.
  • One consistent and React-friendly API across all streaming technologies.

Capabilities at a glance

  • MPEG-DASH, HLS, progressive MP4/WebM playback.
  • In-stream and side-loaded subtitles. Selector controls for subtitles and audio tracks.
  • Common player controls: play/pause, volume, mute, timeline, skip back button, fullscreen.
  • Live/DVR playback with timeshifting controls.
  • Advanced player controls: Picture-in-picture, AirPlay, bitrate (quality) selector.
  • Keyboard shortcuts and tab navigation.
  • Remembering the user's volume and language preferences.
  • Responsive player sizing and UI adaptation.
  • Touch- and mobile-friendly UX.

Full feature list

Getting started

Prerequisites

Minimum React version for Replay is 16.6. Additionally, one component, the CompoundVideoStreamer, requires your script bundler to support dynamic import() statements. This only applies if this component is actually inserted in your code.

Inserting Replay into your


Stargazing 📈

Top risers over last 7 days

  1. Supabase +2,251 stars
  2. WinBox +1,127 stars
  3. JavaScript Algorithms +1,083 stars
  4. Public APIs +1,001 stars
  5. Supabase Realtime +830 stars

Top growth(%) over last 7 days

  1. WinBox +79%
  2. github-elements +40%
  3. Supabase Realtime +33%
  4. Supabase +23%
  5. Fig +21%

Top risers over last 30 days

  1. Coding Interview University +5,530 stars
  2. Public APIs +4,836 stars
  3. Web Developer Roadmap +4,619 stars
  4. Free Programming Books +4,564 stars
  5. Supabase +4,495 stars

Top growth(%) over last 30 days

  1. React Flow +85%
  2. callbag-jsx +72%
  3. SimpleR State +63%
  4. Supabase +61%
  5. Headless UI +55%

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

If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.

Top comments (0)