Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. Absolutely Awesome React Components
Curated List of React Components & Libraries.
brillout / awesome-react-components
Curated List of React Components & Libraries.
🚀 Absolutely Awesome React Components & Libraries
This is a list of AWESOME components. Nope, it's NOT a comprehensive list of every React component under the sun. So, what does "awesome" mean? Well:
- It solves a real problem
- It does so in a 🦄 unique, 🦋 beautiful, or 🏆 exceptional way. (And it's not super popular and well-known... no point in listing those.)
- It has recent code commits!
Look for a 🚀 for truly amazing projects. And look for quickie maintainer commentary and reviews in (italic parens) after some listings of note.
See also: Awesome React Frameworks.
Maintainers:
- @petebray, author of Fluxguard — monitor PROD website changes.
- @brillout, author of Vike — a fast Vite-based React framework that is flexible, lean, community-driven and dependable.
Contributing
Please review our contributing guidelines. We keep this list fresh by requiring all PRs to remove one or more non-awesome entries…
2. Perfect Freehand
Draw perfect freehand lines. A library for creating freehand paths
steveruizok / perfect-freehand
Draw perfect pressure-sensitive freehand lines.
Draw perfect pressure-sensitive freehand lines.
🔗 Curious? Try out a demo.
💅 Designer? Check out the Figma Plugin.
🕊 Flutterer? There's now a dart version of this library, too.
💕 Love this library? Consider becoming a sponsor.
Table of Contents
Installation
npm install perfect-freehand
or
yarn add perfect-freehand
Introduction
This package exports a function named getStroke
that will generate the points for a polygon based on an array of points.
To do this work, getStroke
first creates a set of spline points (red) based on the input points (grey) and then creates outline points (blue). You can render the result any way you like, using whichever technology you prefer.
Usage
To use this library, import the getStroke
function and pass it an array of input points, such as those recorded from a user's mouse movement. The getStroke
function will return a…
3. Open Mission Control Technologies
Open MCT (Open Mission Control Technologies) is a next-generation mission control framework for visualization of data on desktop and mobile devices. It is developed at NASA's Ames Research Center, and is being used by NASA for data analysis of spacecraft missions.
Open MCT (Open Mission Control Technologies) is a next-generation mission control framework for visualization of data on desktop and mobile devices. It is developed at NASA's Ames Research Center, and is being used by NASA for data analysis of spacecraft missions, as well as planning and operation of experimental rover systems. As a generalizable and open source framework, Open MCT could be used as the basis for building applications for planning, operation, and analysis of any systems producing telemetry data.
Note
Please visit our Official Site and Getting Started Guide
Once you've created something amazing with Open MCT, showcase your work in our GitHub Discussions Show and Tell section. We love seeing unique and wonderful implementations of Open MCT!
Building and Running Open MCT Locally
Building and running Open MCT in your local dev environment is very easy. Be sure you have Git and Node.js installed, then follow…
4. Next SEO
Next SEO is a plug in that makes managing your SEO easier in Next.js projects.
Have you seen the new Next.js newsletter?
Useful Tools
Next SEO
Next SEO is a plugin that makes managing your SEO easier in Next.js projects.
Pull requests are very welcome. Also make sure to check out the issues for feature requests if you are looking for inspiration on what to add.
Feel like supporting this free plugin?
It takes a lot of time to maintain an open source project so any small contribution is greatly appreciated.
Coffee fuels coding ☕️
next-seo.wallet (ERC20 & SOL)
Note on app directory
This note is only relevant if using the app
directory.
For standard meta data (e.g., , <title>) then it is highly recommended that you use the built-in generateMetaData
method. You can check out the docs here
For JSON-LD then, the only change needed is to add useAppDir={true}
to the…
5. Serverless Stack (SST)
Serverless Stack (SST) is a framework that makes it easy to build serverless apps.
SST makes it easy to build modern full-stack applications on AWS. Watch the SST in 100 seconds video to learn more.
$ npx create-sst@latest
For v2 docs, head over to v2.sst.dev
Pick your frontend
Deploy Next.js, Svelte, Remix, Astro, Solid, or any static site to AWS.
Add any feature
SST gives you the full power of AWS. Making it easy to add any feature to your product.
- File uploads — Allow your users to upload files to S3.
- Auth — Authenticate your users through any auth provider.
- Events — Run tasks after your app has returned to your user.
- Databases — Use a serverless SQL or NoSQL database to power your app.
- Jobs — Run cron jobs or long running jobs powered by serverless functions.
- APIs — Add a dedicated serverless REST, GraphQL, or WebSocket API to your app.
Collaborate with your team
Finally, you…
6. Husky
Git hooks made easy. You can use it to lint your commit messages, run tests, lint code, etc. when you commit or push. Husky supports all Git hooks.
husky
Modern native Git hooks made easy
Husky improves your commits and more 🐶 woof!
👋 Hey! Using React, Vue or Astro? Check my new project MistCSS to write 50% less code.
Features
- Just
2 kB
(📦 gzipped) with no dependencies - Extremely fast (runs in
~1ms
) - Uses new Git feature (
core.hooksPath
) - Supports
- macOS, Linux, Windows
- Git GUIs, Node version managers, custom hooks directory, nested projects, monorepos
- All 13 client-side Git hooks
And more:
- Branch-specific hooks
- Use POSIX shell to script advanced cases
- Adheres to Git's native hook organization
- Aligns with npm best practices using
prepare
script - Opt-in/opt-out options
- User-friendly error messages
Changelog
Check out the v9 changelog to discover all the new and improved features!
Documentation
https://typicode.github.io/husky
Important Upgrading from v4 to v9 requires migrating previous config, please see the docs.
Sponsors
Support this project by becoming a sponsor here 💖
Special Sponsor
7. 30 seconds of CSS
Short CSS code snippets for all your development needs
Chalarangelo / 30-seconds-of-css
Short CSS code snippets for all your development needs
IMPORTANT NOTICE:
As of May, 2023, all 30-seconds content repositories have been merged into 30-seconds-of-code.
Please watch, star and follow relevant activity there.
30 seconds of code
Short CSS code snippets for all your development needs
- Visit our website to view our snippet collection.
- Use the Search page to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up.
- Browse the CSS Snippet collection to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
- Click on each snippet card to view the whole snippet, including code, explanation and examples.
- You can use the button at the bottom of a snippet card to view the snippet in Codepen.
- If you like the project, give…
8. react-responsive
CSS media queries in react - for responsive design, and more.
yocontra / react-responsive
CSS media queries in react - for responsive design, and more.
Information
Package | react-responsive |
Description | Media queries in react for responsive design |
Browser Version | >= IE6* |
Demo |
The best supported, easiest to use react media query module.
Install
$ npm install react-responsive --save
Example Usage
With Hooks
Hooks is a new feature available in 8.0.0!
import React from 'react'
import { useMediaQuery } from 'react-responsive'
const Example = () => {
const isDesktopOrLaptop = useMediaQuery({
query: '(min-width: 1224px)'
})
const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })
return (
<div>
<h1>Device Test!</h1>
{isDesktopOrLaptop && <p>You are a desktop or laptop</
…9. Vitesse
Opinionated Vite Starter Template
antfu-collective / vitesse
🏕 Opinionated Vite + Vue Starter Template
Mocking up web app with Vitesse(speed)
Note: This template is created during the early transition of Vue 3 and Vite. At this moment, if you are seeking for better Vue developer experience and more consistent maintenance, we recommend using Nuxt 3 instead (it also works perfectly with SPA or SSG as needed). This template still serves as a reference, but expect slower updates.
English | 简体中文
Features
-
📲 PWA
-
🎨 UnoCSS - the instant on-demand atomic CSS engine
-
🔥 Use the new
<script setup>
syntax -
📥 APIs auto importing - use Composition API and others directly
-
🖨 Static-site generation…
10. microsite
A fast, opinionated static site generator powered by Snowpack. Build simple static sites with fool-proof performance by leveraging automatic partial hydration.
natemoo-re / microsite
Do more with less JavaScript. Microsite is a smarter, performance-obsessed static site generator powered by Preact and Snowpack.
microsite
is a fast, opinionated static-site generator (SSG) built on top of Snowpack. It outputs extremely minimal clientside code using automatic partial hydration.
npm init microsite
Microsite's public API is quite stable, but I caution professional users to consider this a WIP! There are plenty of quirks and bugs (especially with dev
mode) that are being ironed out until Microsite reaches a more stable v2.0.0!
Microsite is an ESM node package, so it needs to run in a Node environment which supports ESM. We support the latest version of node
v12.x LTS (Erbium) — see Engines for more details.
Ensure that your project includes "type": "module"
in package.json
, which will allow you to use ESM in your project's node
scripts.
Pages
Microsite uses the file-system to generate your static site, meaning each component in…
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 (4)
Thanks for sharing, Serverless stack is awesome , it makes serverless development much easier ..
Thanks for sharing
Good post!
Awesome!