DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 11th December 2020

iainfreestone profile image Iain Freestone 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. Nest

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8)

GitHub logo nestjs / nest

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) πŸš€

Nest Logo

A progressive Node.js framework for building efficient and scalable server-side applications.



NPM Version
Package License
NPM Downloads
CircleCI
Coverage
Discord
Backers on Open Collective
Sponsors on Open Collective

Support us

Description

Nest is a framework for building efficient, scalable Node.js server-side applications. It uses modern JavaScript, is built with TypeScript (preserves compatibility with pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).

Under the hood, Nest makes use of Express, but also, provides compatibility with a wide range of other libraries, like e.g. Fastify, allowing for easy use of the myriad third-party plugins which are available.

Philosophy

In recent years, thanks to Node.js, JavaScript has become the β€œlingua franca” of the web for both front and backend applications, giving rise to awesome projects like Angular, React and Vue which improve developer productivity and enable the construction of fast, testable, extensible frontend applications. However, on the server-side, while there are a lot of superb libraries, helpers and tools…


2. Elastic UI Framework

The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. Not using React? No problem! You can still use the CSS behind each component.

GitHub logo elastic / eui

Elastic UI Framework πŸ™Œ

Elastic UI Framework

The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. Not using React? No problem! You can still use the CSS behind each component.

You should check out our living style guide, which contains many examples of components in the EUI framework aesthetic, and how to use them in your products. We also have a FAQ that covers common usage questions.

Installation

To install the Elastic UI Framework into an existing project, use the yarn CLI (npm is not supported).

yarn add @elastic/eui

Note that EUI has several peerDependencies requirements that will also need to be installed if starting with a blank project. You can read more about other ways to consume EUI.

yarn add @elastic/eui @elastic/datemath moment prop-types

Running Locally

Node

We depend upon the version of node defined in .nvmrc.

You will probably…


3. Awesome Advent of Code

A collection of awesome resources related to the yearly Advent of Code challenge.


4. NextAuth.js

NextAuth.js is a complete open source authentication solution for Next.js applications. It is designed from the ground up to support Next.js and Serverless.

GitHub logo nextauthjs / next-auth

Authentication for Next.js

NextAuth.js

Build Test Integration Test

Overview

NextAuth.js is a complete open source authentication solution for Next.js applications.

It is designed from the ground up to support Next.js and Serverless.

Follow the examples to see how easy it is to use NextAuth.js for authentication.

Install: npm i next-auth

See next-auth.js.org for more information and documentation.

Features

Flexible and easy to use

  • Designed to work with any OAuth service, it supports OAuth 1.0, 1.0A and 2.0
  • Built-in support for many popular sign-in services
  • Supports email / passwordless authentication
  • Supports stateless authentication with any backend (Active Directory, LDAP, etc)
  • Supports both JSON Web Tokens and database sessions
  • Designed for Serverless but runs anywhere (AWS Lambda, Docker, Heroku, etc…)

Own your own data

NextAuth.js can be used with or without a database.

  • An open source solution that allows you to keep control of your data
  • Supports Bring Your Own Database (BYOD) and can be used with any database
  • …

5. AR.js - Augmented Reality on the Web

AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Image Tracking, Location-based AR and Marker tracking.

GitHub logo AR-js-org / AR.js

Image tracking, Location Based AR, Marker tracking. All on the Web.

AR.js - Augmented Reality on the Web


Build Status Gitter chat Twitter Follow Twitter Follow

AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Image Tracking, Location-based AR and Marker tracking.

Welcome to the official repository!

This project has been created by @jeromeetienne and it is now maintained by @nicolocarpignoli.

πŸš€For frequent updates on AR.js you can follow @nicolocarp and Watch this repo!

Logo is courtesy of Simon Poulter .


You can get paid support and new features for AR.js. Check this link.


⚑️AR.js has now an official Documentation!⚑️

Check it out: AR.js Official Documentation.

If you want to give a first look at AR.js potential, you can continue with this Readme.


⚑️ AR.js is coming in two, different builds. They are both maintained. They are exclusive.

Please import the one you need for your project, not both:

  • AR.js with Image Tracking + Location Based AR:

    • AFRAME…


6. Typed.js

Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

GitHub logo mattboldt / typed.js

A JavaScript Typing Animation Library

Build Status Code Climate GitHub release npm GitHub license

Live Demo | View All Demos | View Full Docs | mattboldt.com

Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.


Installation

Choose One

npm install typed.js
yarn add typed.js
bower install typed.js

CDN

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
Enter fullscreen mode Exit fullscreen mode

Setup

This is really all you need to get going.

// Can also be included with a regular script tag
import Typed from 'typed.js';
var options = {
  strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
  typeSpeed: 40
};
var typed = new Typed('.element', options);
Enter fullscreen mode Exit fullscreen mode

Wonderful sites that have used (or are using) Typed.js

https://github.com/features/package-registry

https://slack.com/

https://envato.com/

https://gorails.com/

https://productmap.co/

https://www.typed.com/

https://apeiron.io

https://git.market/

https://commando.io/

http://testdouble.com/agency.html

https://www.capitalfactory.com/

http://www.maxcdn.com/

https://www.powerauth.com/


Strings from

…

7. react-i18next

Internationalization for react done right. Using the i18next i18n ecosystem.

GitHub logo i18next / react-i18next

Internationalization for react done right. Using the i18next i18n ecosystem.

react-i18next Tweet

CircleCI Code Climate Coverage Status Quality dependencies devdependencies

IMPORTANT:

Master Branch is the new v10 using hooks.

$ v10.0.0
npm i react-i18next
Enter fullscreen mode Exit fullscreen mode

react-native: To use hooks within react-native, you must use react-native v0.59.0 or higher

For the legacy version please use the v9.x.x Branch

$ v9.0.10 (legacy)
npm i react-i18next@legacy
Enter fullscreen mode Exit fullscreen mode

Documentation

The documentation is published on react.i18next.com

What will my code look like?

Before: Your react code would have looked something like:

...
<div>Just simple content</div&gt
<div&gt
  Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link&gt
</div>
...
Enter fullscreen mode Exit fullscreen mode

After: With the trans component just change it to:

...
<div>{t('simpleContent')}</div&gt
<Trans i18nKey="userMessagesUnread" count=
…
Enter fullscreen mode Exit fullscreen mode

8. Tachyons

Functional CSS for humans. Quickly build and design new UI without writing CSS.

GitHub logo tachyons-css / tachyons

Functional css for humans

TACHYONS

Functional CSS for humans.

Quickly build and design new UI without writing CSS.

Principles

  • Everything should be 100% responsive
  • Everything should be readable on any device
  • Everything should be as fast as possible
  • Designing in the browser should be easy
  • It should be easy to change any interface or part of an interface without breaking any existing interfaces
  • Doing one thing extremely well promotes reusability and reduces repetition
  • Documentation helps promote reusability and shared knowledge
  • CSS shouldn't impede accessibility or the default functionality of HTML
  • You should send the smallest possible amount of code to the user

Features

  • Mobile-first CSS architecture
  • 490 accessible color combinations
  • 8px baseline grid
  • Multiple debugging utilities to reduce layout struggles
  • Single-purpose class structure
  • Optimized for maximum gzip compression
  • Lightweight (~14kB)
  • Usable across projects
  • Growing open source component library
  • Works well with plain HTML, React, Ember, Angular, Rails and more
  • Infinitely nestable responsive grid system
  • …

9. useAuth

useAuth is designed to be quick to setup. You'll need an account with Auth0 or Netlify Identity and the appropriate access keys.

GitHub logo Swizec / useAuth

The simplest way to add authentication to your React app. Supports various providers.

useAuth

the simplest way to add authentication to your React app

All Contributors Version License: MIT

Getting Started

useAuth is designed to be quick to setup. You'll need an account with Auth0 or Netlify Identity and the appropriate access keys.

1. Install the hook

$ yarn add react-use-auth

Downloads from npm, adds to your package.json, etc. You can use npm as well.

2. Install your auth client

useAuth does not install its own authentication clients. Instead they're marked as peer dependencies.

Install auth0-js or netlify-identity-widget depending on what you'd like to use. More coming soon :)

$ yarn add auth0-js

or

$ yarn add netlify-identity-widget

You'll see warnings about missing peer dependencies for the client you aren't using. That's okay.

3. Configure with AuthConfig

useAuth uses an <AuthConfig> component to configure your authentication client. We use XState behind the scenes to manage authentication state for you.

Ensure AuthConfig renders on every page.

With Gatsby, add…


10. Weather Icons

Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into Bootstrap, or any project that needs high quality weather, maritime, and meteorological based icons!

GitHub logo erikflowers / weather-icons

215 Weather Themed Icons and CSS

Weather Icons

222 Weather Themed Icons and CSS

Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into Bootstrap, or any project that needs high quality weather, maritime, and meteorological based icons!

Get started at https://erikflowers.github.io/weather-icons/!

Icon Preview

Basic Usage

Place the 5 font files and the main weather-icons.min.css file in your project, with the assumption that the fonts are located up ../ from your CSS directory.

The icons are displayed by using an i element and adding the base class wi and then the icon class you want, such as day-sunny. This then looks like <i class="wi wi-day-sunny"></i>.

To add a modifier, include the class you want after the icon name, which looks like <i class="wi wi-day-sunny wi-flip-vertical"></i>. You can flip, rotate, or add a fixed width. See it all at https://erikflowers.github.io/weather-icons/.

API Usage

This…


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

pic
Editor guide
Collapse
jdespraz profile image
Julie

Brilliant list, particularly useAuth! Which one have you been diving in?
We also started Alloverse last year as an open-source project. Here's our Github: github.com/alloverse/
Your feedback would be awesome!

Collapse
iainfreestone profile image
Iain Freestone Author

Thanks Julie

I have having started a new nextJs project this week and incorporated NextAuth.js from the list above. I never look forward to adding authentication but this was a joy to use.

Just had a quick look at the Alloverse website and watched the video and looks very interesting especially with so many of us working at home currently. Will dig a little deeper over the weekend.

Collapse
bevilaquabruno profile image
Bruno Fernando Bevilaqua

Nest.js is awesome ! i recommend

Collapse
iainfreestone profile image
Iain Freestone Author

I do have an idea for a little server side app maybe I will look into doing it with Nest.js. I was unaware of it before compiling the list

Collapse
bevilaquabruno profile image
Bruno Fernando Bevilaqua

Probably Nest.js is what you are looking for the development of your little server side

Collapse
harrisgeo88 profile image
Harris Geo πŸ‘¨πŸ»β€πŸ’»

Great list! next-auth and typed.js are 2 libraries I will definitely going to use. Thanks for sharing