DEV Community

loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 7th May 2021

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ใƒป3 min read

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 most powerful headless CMS for Node.js โ€” built with GraphQL and React



A scalable platform and CMS to build Node.js applications.

schema => ({ GraphQL, AdminUI })


Keystone Next is a preview of the next major release of KeystoneJS, the most powerful headless content management system around.

Looking for Keystone 5? Head over to keystone-5.

Contents

What's new?

Keystone Next is a preview of the next major release of KeystoneJS, the most powerful headless content management system around. We've substantially rewritten the CLI, Schema config, and Admin UI to make them more powerful and easier to use than ever before.

To learn more, check out our What's next for KeystoneJS announcement post.

You can learn more about the next version, which is now in preview.

Keystone 5

The Keystone 5 codebase is now in active maintenance mode and now lives at keystonejs/keystone-5.

For more information please read our Keystone 5 andโ€ฆ


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 Slack 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.

For information about upgrading lit-html 1.x and lit-element 2.x code, see the Lit 2.0 Upgrade Guide.

npm

To install from npm:

npm i lit
Enter fullscreen mode Exit fullscreen mode

Lit Monorepo

This is the monorepo for upcoming Lit packages, including lit, lit-html 2.0 and lit-element 3.0.

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 reactive lifecycleโ€ฆ

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 availabile 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="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/&gt
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//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="//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 spectrum donate

English | ็ฎ€ไฝ“ไธญๆ–‡

Suspension Notification

Remix Icon is a set of open-source neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 2200+ icons are all elaborately crafted so that they are born with the gene 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, 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 / portfolio site transitivebullsh.it.

It uses Notion as a CMS, fetching content from Notion and then uses Next.js and react-notion-x to render everything.

The site is then deployed to Vercel.

Features

  • Setup only takes a few minutes (single config file) ๐Ÿ’ช
  • Robust support for Notion content via react-notion-x
  • Next.js / TS / React / Notion
  • Excellent page speeds
  • Sexy LQIP image previews
  • Embedded GitHub comments
  • Automatic open graph images
  • Automatic pretty URLs
  • Automatic table of contents
  • Full support for dark mode
  • Quick search via CMD+P just like in Notion
  • Responsive for desktop / tablet / mobile
  • Optimized for Next.js and Vercel

Setup

All config is defined in site.config.js.

  1. Fork / clone this repo
  2. Change a few values inโ€ฆ

6. Mantine

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

GitHub logo mantinedev / mantine

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

Mantine

Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.

Banner

Links

Features

  • Customization โ€“ colors, fonts, shadows and many other parts are customizable to fit your design needs
  • Dark theme โ€“ mantine supports dark theme by default in all components
  • Accessibility and usability โ€“ all components follow accessibility best practices and feature full keyboard support
  • TypeScript โ€“ all @mantine/ scoped packages are built with TypeScript and support it by default
  • Ready for production โ€“ mantine is well tested and works in all modern browsers
  • Developer experience โ€“ mantine comes with more than 50 components and 15 hooks to cover you in most cases
  • No annoying focus ring โ€“ withโ€ฆ

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, Garage Band 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โ€ฆ


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.

Discussion (0)

Forem Open with the Forem app