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
keystonejs / keystone
The superpowered headless CMS for Node.js — built with GraphQL and React
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:
- Read Why Keystone to learn about our vision and what's in the box.
-
Getting Started walks you through first steps with the
create-keystone-app
CLI. - Our Examples contain a growing collection of projects you can run locally to learn more about a Keystone feature.
- An API Reference contains the details…
2. Lit
Lit is a simple library for building fast, lightweight web components.
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
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
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"/>
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>
Package Managers
# Bower
bower install --save slick-carousel
# NPM
npm install slick-carousel
Contributing
PLEASE review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or…
4. Remix Icon
Open source neutral style icon system
Remix-Design / RemixIcon
Open source neutral style icon system
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.
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.
transitive-bullshit / nextjs-notion-starter-kit
Deploy your own Notion-powered website in minutes with Next.js and Vercel.
Next.js Notion Starter Kit
The perfect starter kit for building websites with Next.js and Notion.
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).
- Fork / clone this repo
- Change…
6. Mantine
React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience
mantinedev / mantine
A fully featured React components library
Mantine
Links
Packages
-
@mantine/hooks
– collection of 50+ hooks for state and UI management -
@mantine/core
– core components library – 100+ components -
@mantine/form
– forms management library -
@mantine/charts
– recharts based charts library -
@mantine/notifications
– a fully featured notifications system -
@mantine/spotlight
–Ctrl + K
command center for your application -
@mantine/code-highlight
– code highlight built with highlight.js -
@mantine/tiptap
– a Tiptap based rich text editor -
@mantine/dropzone
– manages files drag 'n' drop to an area or entire screen -
@mantine/carousel
– Carousel component -
@mantine/nprogress
– navigation progress -
@mantine/modals
– centralized modals manager
Getting help
Mantine has a very friendly community, we are always happy to help you get started:
- Join Discord community – it is the easiest way to get help, all questions are usually answered in about 30 minutes
- GitHub Discussions – ask anything about the…
7. The Fuck
Magnificent app which corrects your previous console command.
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!
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
...
➜ 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.
...
➜ puthon
No command 'puthon' found, did you mean
Command 'python' from package 'python-minimal' (main)
Command 'python' from package 'python3' (main)
…8. git curate
Peruse and delete git branches ergonomically
matt-harvey / git_curate
✂️ Peruse and delete git branches ergonomically
git curate
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!
scribbletune / 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! 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
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');
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.
vimond / replay
A React video player facilitating adaptive stream playback with custom UI and a React-friendly API.
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.
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
- Supabase +2,251 stars
- WinBox +1,127 stars
- JavaScript Algorithms +1,083 stars
- Public APIs +1,001 stars
- Supabase Realtime +830 stars
Top growth(%) over last 7 days
- WinBox +79%
- github-elements +40%
- Supabase Realtime +33%
- Supabase +23%
- Fig +21%
Top risers over last 30 days
- Coding Interview University +5,530 stars
- Public APIs +4,836 stars
- Web Developer Roadmap +4,619 stars
- Free Programming Books +4,564 stars
- Supabase +4,495 stars
Top growth(%) over last 30 days
- React Flow +85%
- callbag-jsx +72%
- SimpleR State +63%
- Supabase +61%
- 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)