DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 26th February 2021

Iain Freestone
A Web developer from Hampshire in the south of England.
Originally published at iainfreestone.com ・2 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. Absolutely Awesome React Components

Curated List of React Components & Libraries.

GitHub logo 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.

Maintainers:

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

GitHub logo steveruizok / perfect-freehand

Draw perfect freehand lines.

Perfect Freehand

Perfect freehand is a library for creating freehand paths by @steveruizok.

Screenshot

πŸ”— Demo

Installation

npm install perfect-freehand
Enter fullscreen mode Exit fullscreen mode

or

yarn add perfect-freehand
Enter fullscreen mode Exit fullscreen mode

Usage

The library exports a default function, getPath, that accepts an array of points and an (optional) options object and returns SVG path data for a stroke.

The array of points may be either an array of number pairs representing the point's x, y, and (optionally) pressure...

import getPath from 'perfect-freehand'
const path = getPath([
  [0, 0],
  [10, 5],
  [20, 8],
])
const path = getPath([
  [0, 0, 0],
  [10, 5, 0.5],
  [20, 8, 0.3],
])
Enter fullscreen mode Exit fullscreen mode

...or an array of objects with x, y, and (optionally) pressure properties.

getPath([
  {
…

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.

GitHub logo nasa / openmct

A web based mission control framework.

Open MCT license

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

See Open MCT in Action

Try Open MCT now with our live demo Demo

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 the directions below. Need additional information? Check out the Getting Started page on our website (These…


4. Next SEO

Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

GitHub logo garmeeh / next-seo

Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

Next SEO

All Contributors npm

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?

Buy Me A Coffee

Table of Contents

Usage

NextSeo works by including it on pages where you would like SEO attributes to be added. Once included on the…


5. Serverless Stack (SST)

Serverless Stack (SST) is a framework that makes it easy to build serverless apps.

GitHub logo serverless-stack / serverless-stack

Serverless Stack (SST) is a framework that makes it easy to build serverless apps.

Serverless Stack (SST)

Slack npm Build status


Serverless Stack (SST) is a framework that makes it easy to build serverless apps. It's an extension of AWS CDK and it features:

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
Enter fullscreen mode Exit fullscreen mode

Documentation

Follow us on Twitter or 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 local development environment that opens a WebSocket connection to your deployed app and proxies any…


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.

GitHub logo typicode / husky

Git hooks made easy 🐢 woof!

husky

Financial Contributors on Open Collective Node.js CI

Git hooks made easy

Husky improves your commits and more 🐢 woof!

πŸ‘‹ Read husky 5 announcement and see what's new


You're viewing documentation for husky v5, which is free to use in Open Source projects ❀️ and in early access for Sponsors 🎁.

To use this new version at work, you can become a sponsor on GitHub Sponsors or Open Collective (monthly or yearly donations are supported).

If you can't sponsor Husky, that's okay, husky v4 is free to use in any project. During the early access, v4 will continue to receive maintainance updates.

After the early access, husky v5 will be MIT again.


Sponsors

Companies

Individuals

Find Husky helpful? Become a backer and show your appreciation with a monthly donation on Open Collective. You can also tip with a one-time donation.

Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor Husky Sponsor

GitHub sponsors can be…


7. 30 seconds of CSS

Short CSS code snippets for all your development needs

GitHub logo 30-seconds / 30-seconds-of-css

Short CSS code snippets for all your development needs

Logo

30 seconds of CSS

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 List 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 on the right side of a snippet card to copy the code to clipboard.
  • 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…

8. react-responsive

CSS media queries in react - for responsive design, and more.

GitHub logo contra / react-responsive

CSS media queries in react - for responsive design, and more.

react-responsive NPM version Downloads

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
Enter fullscreen mode Exit fullscreen mode

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
…
Enter fullscreen mode Exit fullscreen mode

9. Vitesse

Opinionated Vite Starter Template

GitHub logo antfu / vitesse

πŸ• Opinionated Vite Starter Template

Vitesse - Opinionated Vite Starter Template

Mocking up web app with Vitesse(speed)
Now with Windi CSS! ⚑️

Live Demo

Features

Pre-packed

UI Frameworks

Icons

Plugins


10. microsite

A fast, opinionated static site generator powered by Snowpack. Build simple static sites with fool-proof performance by leveraging automatic partial hydration.

GitHub logo natemoo-re / microsite

A fast, opinionated static site generator powered by Snowpack. Build simple static sites with fool-proof performance by leveraging automatic partial hydration.



microsite

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 <project>
Enter fullscreen mode Exit fullscreen mode

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 src/pages outputs a corresponding HTML file.

Page templates are .js, .jsx, or .tsx files which export a default a Preact component.

Styles

Styles are written using CSS Modules. src/global.css is, as you guessed, a…


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 (4)

Collapse
kamo profile image
KAIDI

Thanks for sharing, Serverless stack is awesome , it makes serverless development much easier ..

Collapse
sadhac profile image
sadhac

Thanks for sharing

Collapse
aalphaindia profile image
Pawan Pawar

Good post!

Collapse
pablets profile image
Pablets

Awesome!