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 most powerful headless CMS for Node.js — built with GraphQL and React
The superpowered CMS for developers
Keystone helps you build faster and scale further than any other CMS or App Framework. Just describe your schema, and get a powerful GraphQL API & beautiful Management UI for 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
Looking for Keystone 5? Head over to keystone-5.
Contents
What's New
Keystone 6 is the new major version 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.
It's currently in the final stages of preview release, and published on npm under the @keystone-next namespace. To learn more, check out our Roadmap page.
2. Lit
Lit is a simple library for building fast, lightweight web components.
Simple. Fast. 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.
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
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
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"/>
<!-- 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"/>
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>
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, 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.
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.
transitive-bullshit
/
nextjs-notion-starter-kit
Deploy your own Notion-powered website in minutes with Next.js and Vercel.
-opt.jpg%3Ftable%3Dblock%26id%3D5b87b717-ca5b-49da-b17c-12c3eab1644a%26cache%3Dv2)
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 / 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.
- Fork / clone this repo
- 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
mantinedev
/
mantine
React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience
Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.
Links
- Documentation
- Core components by category
- Hooks list
- Notifications system
- Contributing
- Ask question or give feedback
- Changelog
- Sign up for monthly newsletter
- Follow Mantine on Twitter
- Join Discord community
Features
- Customization – colors, fonts, shadows and many other parts are customizable to fit your design needs
- Flexibility – configure components appearance and behavior with vast amount of settings or overwrite any part of component styles
- 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…
7. The Fuck
Magnificent app which corrects your previous console command.
The Fuck 
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
SCRIBBLETUNE
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)