🚀10 Trending projects on GitHub for web developers
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
…
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
- Paper by Scientists at University of Illinois, Chicago: www.cs.uic.edu
- Article by heise: heise.de
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.
Installation
🔧 Docker
requirements
- Clone repository
git clone https://github.com/jonasstrehle/supercookie
- 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
…
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…
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.
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’…
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/
.
- Handsfree.js
- Quickstart with CDN (fastest way to get started)
- Quickstart with NPM (requires server or bundler)
- Development guide
- Handsfree Browser 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
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
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-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
- Wrap all animated children with a single
Flipper
component that has aflipKey
prop that changes every time animations should happen. - Wrap elements that should be animated with
Flipped
components that have aflipId
prop matching them across renders.
Table of Contents
- Forkable Examples
- Simple Example: An Expanding Div
- Simple Example: Two Divs
- Simple Example: List Shuffle
- List Transitions
- Stagger Effects
- Spring Customizations
- Nested Scale Transforms
- Route-based Animations With React Router
- More examples
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! :)