DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

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

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 with TypeScript/JavaScript πŸš€

Nest Logo

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



NPM Version
Package License
NPM Downloads
CircleCI
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 Fastify, allowing for easy use of the myriad of 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, and extensible frontend applications. However, on the server-side, while there are a lot of superb libraries…





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.

Check out our full documentation site which contains many examples of components in the EUI framework aesthetic, and how to use them in your products. Our FAQ below covers common usage questions β€” for other general questions regarding EUI, check out the Discussions tab.

Note

We're in the process of migrating this repository to a monorepo structure. You can find @elastic/eui files in the packages/eui directory.

Frequently Asked Questions

What is the Elastic UI Framework?

The Elastic UI Framework (EUI) is a design library in use at Elastic to build React applications that need to share our branding and aesthetics. It distributes typed UI React components and static assets for use in building web layouts. Alongside the React components, we ship theme & style utilities that can be…


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 the Web.


Auth.js

Authentication for the Web.

Open Source. Full Stack. Own Your Data.

X (formerly known Twitter) NPM next-auth@latest release NPM next-auth@beta release Downloads Github Stars TypeScript

Auth.js is a set of open-source packages that are built on standard Web APIs for authentication in modern applications with any framework on any platform in any JS runtime.

Need help? See authjs.dev for the documentation, or join our community on DiscordΒ  TypeScript .

Sponsored Looking for a hosted alternative? Use Clerk β†’

Features

Flexible and easy to use

  • Designed to work with any OAuth service, it supports 2.0+, OIDC
  • Built-in support for many popular sign-in services
  • Email/Passwordless authentication
  • Passkeys/WebAuthn support
  • Bring Your Database - or none! - stateless authentication with any backend (Active Directory, LDAP, etc.)
  • Runtime-agnostic, runs anywhere! (Docker, Node.js, Serverless, etc.)

Own your data

Auth.js can be used with or without a 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

CI code style: prettier Gitter chat Twitter Follow Twitter Follow

You can now own the first commit of AR.js! πŸ‘‰OpenSea

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

30/12/21 Update: There is now also a brand new OSS Web AR JS library around, called MindAR If you need a great Image tracking feature (also multiple image tracking) and Face tracking, go check it out!
As for now, AR.js is still the only library providing Marker based and Location based AR features.

This project has been created by @jeromeetienne, previously managed by NicolΓ² Carpignoli and it is now maintained by the AR.js org.

πŸš€For frequent updates on AR.js you can follow @the official 𝕏(Twitter) account and Watch this repo!

Logo is courtesy of Simon Poulter .


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

Check it out: AR.js

…

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

Code Climate GitHub release npm GitHub license

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

CDN

<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
Enter fullscreen mode Exit fullscreen mode

For use directly in the browser via <script> tag:

  <!-- Element to contain animated typing -->
  <span id="element"></span>

  <!-- Load library from the CDN -->
  <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

  <!-- Setup and start animation! -->
  <script>
    var typed = new Typed('#element', {
      strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],
      typeSpeed: 50,
    });
  </script>
</body>
Enter fullscreen mode Exit fullscreen mode

As an ESModule

For use with…


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

CI Code Climate Coverage Status Quality npm

IMPORTANT:

Master Branch is the newest version using hooks (>= v10).

$ >=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 and PR changes can be supplied here.

The general i18next documentation is published on www.i18next.com and PR changes can be supplied here.

What will my code look like?

Before: Your react code would have looked something like:

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

After: With the trans component just change it to:

<div>{
…
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 quickest way to add authentication to your React app

All Contributors Version License: MIT

useAuth.dev

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.

Top comments (6)

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

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

Nest.js is awesome ! i recommend

Collapse
 
iainfreestone profile image
Iain Freestone

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

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