DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 18th June 2021

Iain Freestone
A Web developer from Hampshire in the south of England.
Originally published at iainfreestone.com ・3 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. Astro

Astro is a fresh but familiar approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScriptβ€”by default.

GitHub logo snowpackjs / astro

πŸš€πŸ§‘β€πŸš€ Keep your eyes to the skies, astronauts!

Astro is a fresh but familiar approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScriptβ€”by default.

Learn more: https://astro.build/blog/introducing-astro

Project Status

⚠️ Astro is still an early beta, missing features and bugs are to be expected! If you can stomach it, then Astro-built sites are production ready and several production websites built with Astro already exist in the wild. We will update this note once we get closer to a stable, v1.0 release.

πŸ”§ Quick Start

Important: Astro is built with ESM modules which are not supported in older version of Node.js. The minimum supported version is 14.15.1.

# create your project
mkdir new-project-directory
cd new-project-directory
npm init astro
# install your dependencies
npm install
# start the dev server and open your browser
…
Enter fullscreen mode Exit fullscreen mode

2. Supercookie

Supercookie uses favicons to assign a unique identifier to website visitors. Unlike traditional tracking methods, this ID can be stored almost persistently and cannot be easily cleared by the user.

GitHub logo jonasstrehle / supercookie

⚠️ Browser fingerprinting via favicon!

supercookie

Documentation

Website Status License

Fingerprint index N Redirects

Supercookie uses favicons to assign a unique identifier to website visitors.
Unlike traditional tracking methods, this ID can be stored almost persistently and cannot be easily cleared by the user.

The tracking method works even in the browser's incognito mode and is not cleared by flushing the cache, closing the browser or restarting the operating system, using a VPN or installing AdBlockers. 🍿 Live demo.

About

πŸ’­ Inspiration

πŸͺ§ Purpose

This repository is for educational and demonstration purposes only!

The demo of "supercookie" as well as the publication of the source code of this repository is intended to draw attention to the problem of tracking possibilities using favicons.

πŸ“• Full documentation

Installation

πŸ”§ Docker

requirements Docker daemon

  1. Clone repository
git clone https://github.com/jonasstrehle/supercookie
Enter fullscreen mode Exit fullscreen mode
  1. Update .env file in supercookie/server/.env
HOST_MAIN=yourdomain.com #or localhost:10080
PORT_MAIN=10080
HOST_DEMO=demo.yourdomain.com #or localhost:10081
…
Enter fullscreen mode Exit fullscreen mode

3. Directus

Directus wraps any SQL database with a real-time GraphQL+REST API and an intuitive app for non-technical users.

GitHub logo directus / directus

Open-Source Data Platform 🐰 β€” Directus wraps any SQL database with a real-time GraphQL+REST API and an intuitive app for non-technical users.


Logo


🐰 Introduction

Directus is a real-time API and App dashboard for managing SQL database content.

  • Free & open-source. No artificial limitations, vendor lock-in, or hidden pricing.
  • REST & GraphQL API. Instantly adds a blazingly fast Node.js API layer to your database.
  • Manage pure SQL. Works with existing SQL databases, or helps build new architectures from scratch.
  • Choose your database. Supports PostgreSQL, MySQL, SQLite, OracleDB, MariaDB and MS-SQL.
  • Allows self-hosting. Choose your hosting and infrastructure, run locally, or deeply integrate on-premises.
  • Completely extensible. Built to white-label, it is easy to customize our modular platform.
  • A modern dashboard. A Vue.js Admin App so safe and intuitive, non-technical users require no training.

Learn more about Directus on our website.


🚧 Release Candidate

This is pre-release software. While we're providing migrations between versions, changes may occur at any time, and certain features might be missing or broken. You can follow along with the issue…


4. Tinycon

A small library for manipulating the favicon, in particular adding alert bubbles and changing images.

GitHub logo tommoor / tinycon

A small library for manipulating the favicon, in particular adding alert bubbles and changing images.

Tinycon

A small library for manipulating the favicon, in particular adding alert bubbles and changing images. Tinycon gracefully falls back to a number in title approach for browsers that don't support canvas or dynamic favicons.

See the Live Demo here.

Documentation

Tinycon adds a single object to the global namespace and does not require initialization.

Installation

Install with your favorite package manager.

npm install tinycon --save
yarn add tinycon

Basic Usage

Tinycon.setBubble(6);
Enter fullscreen mode Exit fullscreen mode

Options

Tinycon can take a range of options to customize the look

  • width: the width of the alert bubble
  • height: the height of the alert bubble
  • font: a css string to use for the fontface (recommended to leave this)
  • color: the foreground font color
  • background: the alert bubble background color
  • fallback: should we fallback to a number in brackets for browsers that don't support canvas/dynamic favicons? Boolean, or use the string 'force'…

5. Handsfree

Quickly integrate face, hand, and/or pose tracking to your frontend projects in a snap

GitHub logo MIDIBlocks / handsfree

Quickly integrate face, hand, and/or pose tracking to your frontend projects in a snap βœ¨πŸ‘Œ

handsfree.js.org

Quickly integrate face, hand, and/or pose tracking to your frontend projects in a snap βœ¨πŸ‘Œ

Powered by:

Β Β Β  Β Β Β 















Explore the interactive docs at: Handsfree.js.org

Or try it right away with the serverless boilerplates in /boilerplate/!








Contents

This repo is broken into 3 main parts: The actual library itself found in /src/, the documentation for it in /docs/, and the Handsfree Browser Extension in /extension/.








Quickstart

Installing from CDN

Note: models loaded from the CDN may load slower on the initial page load, but should load much faster once cached by the browser.

This option is great if you don't have or need a server, or if you're prototyping on a site like CodePen. You can also just download this repo and work with one…


6. Nano Stores

A tiny (152 bytes) state manager for React/Preact/Vue/Svelte with many atomic tree-shakable stores

GitHub logo ai / nanostores

A tiny (152 bytes) state manager for React/Preact/Vue/Svelte with many atomic tree-shakable stores

Nano Stores

A tiny state manager for React, Preact, Vue, Svelte and vanilla JS. ItΒ usesΒ manyΒ atomicΒ storesΒ andΒ direct manipulation.

  • Small. between 152 and 459 bytes (minified and gzipped) Zero dependencies. It uses Size Limit to control size.
  • Fast. With small atomic and derived stores, you do not need to call the selector function for all components on every store change.
  • Tree Shakable. The chunk contains only stores used by components in the chunk.
  • Was designed to move logic from components to stores. Already has router and persistent stores.
  • It has good TypeScript support.
// store/users.ts
import { createStore, getValue } from 'nanostores'
export const users = createStore<User[]>(() => {
  users.set([])
})

export function addUser(user: User) {
  users.set([...getValue
…
Enter fullscreen mode Exit fullscreen mode

7. React Flip Toolkit

A lightweight magic-move library for configurable layout transitions

GitHub logo aholachek / react-flip-toolkit

A lightweight magic-move library for configurable layout transitions

react-flip-toolkit animated logo

Minified & Gzipped size MIT license npm version

Comparison with other React FLIP libraries

Feature react-flip-move react-overdrive react-flip-toolkit
Animate position βœ… βœ… βœ…
Animate scale ❌ βœ… βœ…
Animate opacity ❌ βœ… βœ…
Animate parent's size without warping children ❌ ❌ βœ…
Use real FLIP instead of cloning & crossfading βœ… ❌ βœ…
Use springs for animations ❌ ❌ βœ…
Support spring-based stagger effects ❌ ❌ βœ…
Usable with frameworks other than React ❌ ❌ βœ…

Quick start

npm install react-flip-toolkit or yarn add react-flip-toolkit

  1. Wrap all animated children with a single Flipper component that has a flipKey prop that changes every time animations should happen.

  2. Wrap elements that should be animated with Flipped components that have a flipId prop matching them across renders.

Table of Contents


8. Flicking

Reliable, flexible and extendable carousel.

GitHub logo naver / egjs-flicking

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

Flicking Logo
@egjs/flicking

version npm bundle size (scoped) Travis (.org) Coveralls github DeepScan grade

GitHub commit activity npm downloads per month GitHub contributors GitHub

Angular React Vue Vue

Demo / Documentation / Other components

Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
πŸ“±πŸ’»πŸ–₯

Supported Frameworks
AngularJSΒ Β  ReactΒ Β  Vue.jsΒ Β  Preact


iPhone demo Music app demo Full page demo
Parallax demo
πŸ–±οΈClick each images to see its source or check our full demos.

✨ Features

  • Use it in a framework you like.
    • We supports all major JS frameworks like React, Vue, Angular
  • SSR(Server Side Rendering) ready
    • You can use Flicking at your favorite SSR frameworks like Next.js or Nuxt.js.
  • Circular(Loop) Mode
  • Ready-to-use plugins you can grab right away.
    • Autoplay, Fade effect, Parallax effect, ...
  • Restore state like position and active slide with persist
  • You can make native-scroll like UI with bound and moveType: freeScroll
  • Supports both Desktop & Mobile
  • Rich API
  • Supports IE9+ with the polyfill

βš™οΈ Installation

npm

$ npm install --save @egjs/flicking
Enter fullscreen mode Exit fullscreen mode

CDN

πŸƒ Quick Start

HTML

Flicking requires minimal structure to initialize properly.

You don't…


9. Ultimate Backend

Multi tenant SaaS starter kit with cqrs graphql microservice architecture, apollo federation, event source and authentication

GitHub logo juicycleff / ultimate-backend

Multi tenant SaaS starter kit with cqrs graphql microservice architecture, apollo federation, event source and authentication

ULTIMATE BACKEND

(WIP): This is an enterprise scale advanced microservice pattern with GraphQL API and GRPC Microservices, based on Domain (DDD) using the command query responsibility segregation (CQRS) design pattern. Want to ask Rex Isaac Raphael questions, join the slack channel :)

License Snyk Code Size Version Top Language Top Language

Description

This should be the go to backend base for your next scalable project. This is a proof of concept project designed to be extremely slim and scalable, with distributed data request and process handling, built from the ground up for production use. It comes with Multi-Tenancy SaaS support, following different multi-tenancy database strategy as well as different resolver patterns
to identify your tenants. The goal is to give your next big project that extra leap to awesomeness. To get started read the instructions below. With support for both Event Store and NATS Streaming for event streaming and Kafka comming soon.

Note: Seeing alot of clone of the…


10. recast

JavaScript syntax tree transformer, nondestructive pretty-printer, and automatic source map generator

GitHub logo benjamn / recast

JavaScript syntax tree transformer, nondestructive pretty-printer, and automatic source map generator

recast, v. CI Join the chat at https://gitter.im/benjamn/recast

  1. to give (a metal object) a different form by melting it down and reshaping it.
  2. to form, fashion, or arrange again.
  3. to remodel or reconstruct (a literary work, document, sentence, etc.).
  4. to supply (a theater or opera work) with a new cast.

Installation

From NPM:

npm install recast

From GitHub:

cd path/to/node_modules
git clone git://github.com/benjamn/recast.git
cd recast
npm install

Import style

Recast is designed to be imported using named imports:

import { parse, print } from "recast";
console.log(print(parse(source)).code);

import * as recast from "recast";
console.log(recast.print(recast.parse(source)).code);
Enter fullscreen mode Exit fullscreen mode

If you're using CommonJS:

const { parse, print } = require("recast");
console.log(print(parse(source)
…
Enter fullscreen mode Exit fullscreen mode

Stargazing πŸ“ˆ

Top risers over last 7 days

  1. Coding Interview University +4,250 stars
  2. Free Programming Books +1,145 stars
  3. Public APIs +965 stars
  4. JavaScript Questions +736 stars
  5. Next.js +729 stars

Top growth(%) over last 7 days

  1. React Virtual Cool +252%
  2. Map of JavaScript +55%
  3. Plaiceholder +36%
  4. Million +31%
  5. Slides +30%

Top risers over last 30 days

  1. Coding Interview University +11,307 stars
  2. Public APIs +7,045 stars
  3. Free Programming Books +5,265 stars
  4. Slidev +4,679 stars
  5. Developer Roadmap +2,855 stars

Top growth(%) over last 30 days

  1. useStateMachine +282%
  2. Fig +165%
  3. Slidev +50%
  4. Plaiceholder +46%
  5. Appwrite +41%

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
bajro17 profile image
Bajro

This week is really amazing. I love it <3 Thank you so much for share this with us

Collapse
iainfreestone profile image
Iain Freestone Author

Agreed some great projects this week. It does still amaze me that week after week I continue to find amazing projects. We are lucky to have such amazing projects at our fingertips.

Collapse
eldadfux profile image
Eldad A. Fux

Awesome coverage! Love to see appwrite.io on it ❀️

Collapse
gumonet profile image
Angel Gutierrez

Really awesome! Thanks a lot!