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
Maintainers:
- @petebray, author of Fluxguard — monitor PROD website changes.
- @brillout, author of Wildcard API — create an RPC-like API as an alternative to REST and GraphQL.
Contributing
Please review our contributing guidelines. We keep this list fresh by requiring all PRs to remove one or more non-awesome entries from this list. Please ONLY…
2. Perfect Freehand
Draw perfect freehand lines. A library for creating freehand paths
steveruizok
/
perfect-freehand
Draw perfect pressure-sensitive freehand strokes.
Draw perfect pressure-sensitive freehand strokes.
Table of Contents
Installation
npm install perfect-freehand
or
yarn add perfect-freehand
Usage
This package's default export is a function that:
- accepts an array of points and an (optional) options object
- returns a stroke outline as an array of points formatted as
[x, y]
import getStroke from 'perfect-freehand'
You may format your input points as array or an object. In both cases, the value for pressure is optional (it will default to .5).
getStroke([
[0, 0, 0],
[10, 5, 0.5],
[20, 8, 0.3],
])
getStroke([
{ x: 0, y: 0, pressure: 0 },
{ x…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 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.
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!
See Open MCT in Action
Try Open MCT now with our live demo
Building and Running Open MCT Locally
Building and running Open MCT in your local dev environment…
4. Next SEO
Next SEO is a plug in that makes managing your SEO easier in Next.js projects.
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?
Table of Contents
- Usage
- Open Graph
- JSON-LD
- Contributors
Usage
NextSeo works by including it on pages where you would…
5. Serverless Stack (SST)
Serverless Stack (SST) is a framework that makes it easy to build serverless apps.
serverless-stack
/
serverless-stack
💥 Serverless Stack (SST) is a framework that makes it easy to build serverless apps.
Serverless Stack (SST) is a framework that makes it easy to build serverless apps. It's an extension of AWS CDK and it features:
- A Live Lambda Development environment
- Support for setting breakpoints and debugging in VS Code
- Support for deploying to multiple environments and regions
- Higher-level constructs designed specifically for serverless apps
- Zero-config support for JS and TS (using esbuild), Go, Python, C#, and F#
Quick Start
Create your first SST app.
# Create your app
$ npx create-serverless-stack@latest my-sst-app
$ cd my-sst-app
# Start Live Lambda Development
$ npx sst start
# Deploy to prod
$ npx sst deploy --stage prod
Documentation
Follow us on Twitter and subscribe to our newsletter for updates.
About SST
We think SST can make it dramatically easier to build serverless apps.
Live Lambda Development
The sst start command starts up a…
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
Install
npm install husky -D
Usage
Edit package.json > prepare script and run it once:
npm set-script prepare "husky install"
npm run prepare
Add a hook:
npx husky add .husky/pre-commit "npm test"
git add .husky/pre-commit
Make a commit:
git commit -m "Keep calm and commit"
# `npm test` will run every time you commit
For more use cases (project in sub-directory, custom directory, CI support, ...), see documentation.
Documentation
https://typicode.github.io/husky
Important Upgrading from v4 to v7 requires migrating previous config, please see the docs.
Articles
License
MIT
Sponsors
Companies
Does your company use husky? Ask your manager or marketing team if your company would be interested in supporting this project.
Individuals
Find husky helpful? Become a backer…
7. 30 seconds of CSS
Short CSS code snippets for all your development needs
30-seconds
/
30-seconds-of-css
Short CSS code snippets for all your development needs
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 it a star. It means a lot to the people maintaining it.
Want to contribute?
- If you want to help us improve, take a…
8. react-responsive
CSS media queries in react - for responsive design, and more.
contra
/
react-responsive
CSS media queries in react - for responsive design, and more.
react-responsive 
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</p…9. Vitesse
Opinionated Vite Starter Template
Mocking up web app with Vitesse(speed)
Features
-
📲 PWA -
🎨 Windi CSS - next generation utility-first CSS framework -
🔥 Use the new<script setup>style -
🖨 Server-side generation (SSG) via vite-ssg -
🦔 Critical CSS via critters -
🦾 TypeScript, of course -
☁️ Deploy on Netlify, zero-config
Pre-packed
UI Frameworks
- Windi CSS (On-demand TailwindCSS) - lighter and faster, with a bunch of additional features
Icons
-
Iconify - use icons from any icon sets
🔍 Icônes -
vite-plugin-icons- icons as Vue components
Plugins
-
Vue Router
-
vite-plugin-pages- file system based routing -
vite-plugin-vue-layouts- layouts for pages
-
- Pinia - Intuitive, type…
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.
Read the docs | See the live examples | Join our Discord
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!