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)
nestjs / nest
A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications with TypeScript/JavaScript π
A progressive Node.js framework for building efficient and scalable server-side applications.
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.
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.
Bogdanp / awesome-advent-of-code
A collection of awesome resources related to the yearly Advent of Code challenge.
Awesome Advent of Code
This is a collection of awesome resources related to the yearly Advent of Code challenge.
- The Official AoC Website
- The AoC Subreddit
- Project Templates
- Tools and Utilities
- Other Advent Calendars
- 2018
- 2019
- 2020
- 2021
- 2022
-
2023
-
Solutions
- Ada
- APL
- Arturo
- Assembly
- AWK
- Bash
- BQN
- C
- C#
- C++
- C3
- Clojure
- Common Lisp
- Crystal
- D
- Dart
- Deno
- Elixir
- Elm
- Emacs
- Erlang
- Excel
- F#
- Factor
- Gleam
- Go
- Groovy
- Hamler
- Haskell
- Haxe
- HolyC
- Hoon
- Idris
- J
- Java
- JavaScript
- jq
- Julia
- Kotlin
- LDPL
- Lua
- M4
- MATLAB
- Nim
- Nushell
- Objective-C
- OCaml
- PHP
- Perl
- Picat
- Pony
- PowerShell
- Prolog
- Python
- R
- Racket
- Raku
- ReasonML
- Red
- REXX
- Rhombus
- ROBO1
- Roc
- Ruby
- Rust
- Smalltalk
- Scala
- Scheme
- Solidity
- SpectX
- SQL
- Standard ML
- Swift
- TypeScript
- TypeScript Types
- Unison
- V
- VB.NET
- Whitespace
- Zig
- Zsh
- Live Streams
-
Solutions
Project Templates
Templates, cookiecutters and skeletons for quickly setting up projects in your favourite language.
- AlexeSimon/adventofcode (Python)
- Jadarma/advent-of-code-kotlin-template (Kotlin)
- Kaitachi/ChallengeStarter (Swift)
- Reason Starterβ¦
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.
nextauthjs / next-auth
Authentication for the Web.
Auth.js
Authentication for the Web.
Open Source. Full Stack. Own Your Data.
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Β .
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.
- An open-source solution that allows you to keep control of your data
- Built-in support for MySQL, MariaDB, Postgres, Microsoft SQL Server, MongoDB, SQLite,β¦
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.
AR.js - Augmented Reality on the Web
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.
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>
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.', '& a second sentence.'],
typeSpeed: 50,
});
</script>
</body>
As an ESModule
For use withβ¦
7. react-i18next
Internationalization for react done right. Using the i18next i18n ecosystem.
i18next / react-i18next
Internationalization for react done right. Using the i18next i18n ecosystem.
IMPORTANT:
Master Branch is the newest version using hooks (>= v10).
$ >=v10.0.0
npm i react-i18next
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
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>
...
After: With the trans component just change it to:
<div>{
β¦8. Tachyons
Functional CSS for humans. Quickly build and design new UI without writing CSS.
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.
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
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!
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/!
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)
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!
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.
Nest.js is awesome ! i recommend
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
Probably Nest.js is what you are looking for the development of your little server side
Great list! next-auth and typed.js are 2 libraries I will definitely going to use. Thanks for sharing