Open in app

Sign in

Write

Sign in

🚀10 Trending projects on GitHub for web developers

Niraj Shrestha
6 min readNov 18, 2021

--

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.

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

…

View on GitHub

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.

jonasstrehle / supercookie

⚠️ Browser fingerprinting via favicon!

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
  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

…

View on GitHub

3. Directus

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

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.

🐰 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…

View on GitHub

4. Tinycon

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

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 --saveyarn add tinycon

Basic Usage

Tinycon.setBubble(6);

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’…

View on GitHub

5. Handsfree

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

MIDIBlocks / handsfree

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

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…

View on GitHub

6. Nano Stores

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

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

View on GitHub

7. React Flip Toolkit

A lightweight magic-move library for configurable layout transitions

aholachek / react-flip-toolkit

A lightweight magic-move library for configurable layout transitions

Comparison with other React FLIP libraries

Featurereact-flip-movereact-overdrivereact-flip-toolkitAnimate 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

View on GitHub

8. Flicking

Reliable, flexible and extendable carousel.

naver / egjs-flicking

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

@egjs/flicking

Thank you for reading! :)

Git
Github
Repositories
Programming
Productivity

--

--

Niraj Shrestha

Written by Niraj Shrestha

234 Followers

https://linktr.ee/XDWOLF

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams