Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 15, 2021 01:58 pm GMT

10 Trending projects on GitHub for web developers - 15th October 2021

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

1. Robot

A small functional and immutable Finite State Machine library. Using state machines for your components brings the declarative programming approach to application state.

GitHub logo matthewp / robot

A functional, immutable Finite State Machine library

Robot

The Robot logo, with green background.

A small functional and immutable Finite State Machine library. Using state machines for your components brings the declarative programming approach to application state.

See thisrobot.life for the main documentation.

import { createMachine, interpret, state, transition } from 'robot3';let machine = createMachine({  off: state(    transition('toggle', 'on')  ),  on: state(    transition('toggle', 'off')  )});const service = interpret(machine, () => {  render();});

Documentation

Testing

Tests are located in the test/ folder. Load test/test.html in your browser of choice with any HTTP server you like (I use http-server). Tests are written in QUnit and are

2. Ultimate SAAS template

Template to quickstart a SAAS business. Stop losing time implementing authentication and payment over and over again.
Focus on what brings value to your customers

GitHub logo gmpetrov / ultimate-saas-ts

Template to quickstart a SAAS business

Ultimate SAAS template Typescript/Next.js/NextAuth.js/Prisma/Stripe/Tailwindcss/Postgresql

My template to quickstart a SAAS project

Stop losing time implementing authentication and payment over and over again.
Focus on what brings value to your customers

Demo

https://utlimate-saas-js.vercel.app

Features

  • Authentication with NextAuth.js (Own Your Data )
    • Email with magic link
    • Github
    • Many other oauth providers available check their docs
  • Payment with Stripe
    • Stripe checkout
    • Stripe billing portal
    • Stripe webhooks (products / prices are synced)
  • Hosted on vercel for free

Stripe

Check the stripe section of this repo as the steps are very similar

Postgresql

A postgresql db is needed to deploy the app.
You can have a very small instance for free on heroku

Made with

  • Typescript
  • Next.js
  • NextAuth.js
  • Prisma
  • Postgresql
  • Stripe
  • Tailwindcss

Develop

# create .envcp .env.example .env# install dependenciesyarn# Launch pgsql and maildevyarn docker:start# migrate and seed the databaseyarn prisma:migrate:devyarn prisma:seed#

3. Pure

A set of small, responsive CSS modules that you can use in every web project.

GitHub logo pure-css / pure

A set of small, responsive CSS modules that you can use in every web project.

Pure

Pure

A set of small, responsive CSS modules that you can use in every web projecthttp://purecss.io/

Build StatusGitter

This project is looking for maintainers to support and enhance Pure.css. If you are interested please leave a comment in the Github issue.

Features

Pure is meant to be a starting point for every website or web app. We take careof all the CSS work that every site needs, without making it look cookie-cutter:

  • A responsive grid that can be customized to your needs.

  • A solid base built on Normalize.css to fix cross-browser compatibilityissues.

  • Consistently styled buttons that work with <a> and <button> elements.

  • Styles for vertical and horizontal menus, including support for dropdownmenus.

  • Useful form alignments that look great on all screen sizes.

  • Various common table styles.

  • An extremely minimalist look that is super-easy to customize.

  • Responsive by default, with a non-responsive option.

  • Extremely small file size: 3.7KB minified

4. Xterm.js

Xterm.js is a front-end component written in TypeScript that lets applications bring fully-featured terminals to their users in the browser. It's used by popular projects such as VS Code, Hyper and Theia.

GitHub logo xtermjs / xterm.js

A terminal for the web

xterm.js logo

Build Status

Xterm.js is a front-end component written in TypeScript that lets applications bring fully-featured terminals to their users in the browser. It's used by popular projects such as VS Code, Hyper and Theia.

Features

  • Terminal apps just work: Xterm.js works with most terminal apps such as bash, vim, and tmux, including support for curses-based apps and mouse events.
  • Performant: Xterm.js is really fast, it even includes a GPU-accelerated renderer.
  • Rich Unicode support: Supports CJK, emojis, and IMEs.
  • Self-contained: Requires zero dependencies to work.
  • Accessible: Screen reader and minimum contrast ratio support can be turned on.
  • And much more: Links, theming, addons, well documented API, etc.

What xterm.js is not

  • Xterm.js is not a terminal application that you can download and use on your computer.
  • Xterm.js is not bash. Xterm.js can be connected to processes like bash and let you interact with

5. timeago.js

timeago.js is a nano library(less than 2 kb) used to format datetime with *** time ago statement. eg: '3 hours ago'.

GitHub logo hustcc / timeago.js

timeago.js is a tiny(2.0 kb) library used to format date with `*** time ago` statement.

timeago.js

timeago.js is a nano library(less than 2 kb) used to format datetime with *** time ago statement. eg: '3 hours ago'.

  • i18n supported.
  • Time ago and time in supported.
  • Real-time render supported.
  • Node and browser supported.
  • Well tested.

Official website. React version here: timeago-react. Python version here: timeago.

npm VersionunpkgBuild StatusCoverage StatusDist gzipnpm Downloadnpm License

Such as

just now12 seconds ago2 hours ago3 days ago3 weeks ago2 years agoin 12 secondsin 3 minutesin 24 daysin 6 months

Usage

  • install
npm install timeago.js
  • import
import { format, render, cancel, register } from 'timeago.js';

or import with script tag in html file and access global variable timeago.

<script src="dist/timeago.min.js"></script>
  • example
// format the time with localeformat('2016-06-12', 'en_US');

CDN

Alternatively to NPM, you can also use a

6. GitHub userscripts

Userscripts to add functionality to GitHub.

GitHub logo Mottie / GitHub-userscripts

Userscripts to add functionality to GitHub

GitHub userscripts tag Mentioned in Awesome Userscripts

Userscripts to add functionality to GitHub.

Installation

  1. Make sure you have user scripts enabled in your browser (these instructions refer to the latest versions of the browser):

  2. Get information or install:

    • Learn more about the userscript by clicking on the named link. You will be taken to the specific wiki page.
    • Install a script directly from GitHub by clicking on the "install" link in the table below.
    • Install a script from GreasyFork (GF) from the userscript site page
    • Or, install the scripts from OpenUserJS (OU).
    Userscript WikiDirect
    Install
    SitesCreatedUpdated
    GitHub code colorsinstallGF OU2016.03.202021.07.21
    GitHub code foldinginstallGF OU2016.12.28

7. DOM to SVG

Library to convert a given HTML DOM node into an accessible SVG "screenshot".

GitHub logo felixfbecker / dom-to-svg

Library to convert a given HTML DOM node into an accessible SVG "screenshot".

DOM to SVG

npmCI statuslicense: MITsemantic-release

Library to convert a given HTML DOM node into an accessible SVG "screenshot".

Demo

Try out the SVG Screenshots Chrome extension which uses this library to allow you to take SVG screenshots of any webpageYou can find the source code at github.com/felixfbecker/svg-screenshots.

Usage

import { documentToSVG, elementToSVG, inlineResources, formatXML } from 'dom-to-svg'// Capture the whole documentconst svgDocument = documentToSVG(document)// Capture specific elementconst svgDocument = elementToSVG(document.querySelector('#my-element'))// Inline external resources (fonts, images, etc) as data: URIsawait inlineResources(svgDocument.documentElement)// Get SVG stringconst svgString = new XMLSerializer().serializeToString(svgDocument)

The output can be used as-is as valid SVG or easily passed to other packages to pretty-print or compress.

Features

  • Does NOT rely on <foreignObject> - SVGs will

8. Serverless Examples

A collection of boilerplates and examples of serverless architectures built with the Serverless Framework on AWS Lambda, Microsoft Azure, Google Cloud Functions, and more.

GitHub logo serverless / examples

Serverless Examples A collection of boilerplates and examples of serverless architectures built with the Serverless Framework on AWS Lambda, Microsoft Azure, Google Cloud Functions, and more.

Website Email Updates Gitter Forum Meetups Twitter Facebook Contact Us

Serverless Examples

A collection of ready-to-deploy Serverless Framework services.

Table of Contents

Click to expand

Getting Started

If you are new to serverless, we recommend getting started with by creating an HTTP API Endpoint in NodeJS, Python, Java, or Golang.

Examples

Each example contains a README.md with an explanation about the service and it's use cases.

Have an example? Submit a PR or open an issue.

To install any of these you can run:

serverless install -u https://github.com/serverless/examples/tree/master/folder-name -n my-project
ExampleRuntime
Aws Dotnet Rest Api With Dynamodb
Reading/Writing operations using .NET Core and DynamoDB
dotnet
Aws Lambda LayernodeJS
Aws Golang Auth Examples
These example shows how to

9. dva

React and redux based, lightweight and elm-style framework. (Inspired by elm and choo)

GitHub logo dvajs / dva

React and redux based, lightweight and elm-style framework. (Inspired by elm and choo)

English |

dva

codecovCircleCINPM versionBuild StatusCoverage StatusNPM downloadsDependenciesJoin the chat at https://gitter.im/dvajs/Lobby

Lightweight front-end framework based on redux, redux-saga and react-router. (Inspired by elm and choo)

Features

  • Easy to learn, easy to use: only 6 apis, very friendly to redux users, and API reduce to 0 when use with umi
  • Elm concepts: organize models with reducers, effects and subscriptions
  • Support HMR: support HMR for components, routes and models with babel-plugin-dva-hmr
  • Plugin system: e.g. we have dva-loading plugin to handle loading state automatically

Demos

Quick

10. Pigeon Maps

ReactJS Maps without external dependencies

GitHub logo mariusandra / pigeon-maps

ReactJS Maps without external dependencies

Pigeon Maps - ReactJS maps without external dependencies

npm versionminifiedminified + gzipped

Demo: https://pigeon-maps.js.org/ (using maps from MapTiler, OSM and Stamen)

What is it?

Are you tired of waiting 3 seconds to parse 200kb of Google Maps JavaScript just to display a few tiles and a marker? 140kb of minified Leaflet too much?

Welcome to the club!

This project aims to provide a performance-first React-centric extendable map engine.

We're currently at:

  • minified
  • minified + gzipped

Implemented:

  • Show tiles
  • Arbitrary overlays (markers, etc)
  • Move the map by dragging
  • Move the map by touch on mobile
  • Zooming with the scroll wheel
  • Zooming by touch
  • Fractional zooming (e.g. to level 12.2)
  • Zoom without flickering (keep old tiles until new ones load)
  • Smooth animated zooming
  • Slide when dragging and letting go
  • Event handling (clicks, etc)
  • Double click and double tap zooming
  • Option to block dragging with one finger and mouse wheel scrolling without holding meta key
  • Enable/disable touch and mouse events as

Stargazing

Top risers over last 7 days

  1. Uptime Kuma +1,991 stars
  2. Playwright +685 stars
  3. Awesome +979 stars
  4. Developer Roadmap +641 stars
  5. Public APIs +640 stars

Top growth(%) over last 7 days

  1. Nice Modal React +63%
  2. Uptime Kuma +38%
  3. kbar +36%
  4. envsafe +27%
  5. DevOp Resources +23%

Top risers over last 30 days

  1. Public APIs +7,348 stars
  2. Free Programming Books +4,285 stars
  3. Free Code Camp +3,932 stars
  4. Uptime Kuma +3,882 stars
  5. Awesome +3,602 stars

Top growth(%) over last 30 days

  1. Nice Modal React +138%
  2. Uptime Kuma +118%
  3. Pico +73%
  4. Medusa +71%
  5. React Web Editor +66%

For all for the latest rankings please checkout Stargazing.dev

Trending Projects is available as a weekly newsletter please sign up at Stargazing.dev to ensure you never miss an issue.

If you enjoyed this article you can follow me on Twitter where I regularly post about HTML, CSS and JavaScript.


Original Link: https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-15th-october-2021-58k3

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To