🚀Web 開発者向け GitHub の 10 のトレンド プロジェクト - 2021 年 6 月 18 日


Trending Projects は毎週のニュースレターとして入手できます.www.iainfreestone.com にサインアップして、問題を見逃さないようにしてください.

1. アストロ



Astro は、Web サイトを構築するための斬新でありながら馴染みのあるアプローチです. Astro は、数十年にわたる実証済みのパフォーマンスのベスト プラクティスと、コンポーネント指向時代の DX の改善を組み合わせています.お気に入りの JavaScript フレームワークを使用して、最小限の量の JavaScript をデフォルトで自動的に出荷します.


snowpackjs / アストロ


🚀🧑‍🚀 宇宙飛行士の皆さん、空から目を離さないでください!






Astro は、Web サイトを構築するための斬新でありながら馴染みのあるアプローチです. Astro は、数十年にわたる実証済みのパフォーマンスのベスト プラクティスと、コンポーネント指向時代の DX の改善を組み合わせています.お気に入りの JavaScript フレームワークを使用して、最小限の量の JavaScript をデフォルトで自動的に出荷します.

お知らせ投稿 →


完全なドキュメント サイト →


プロジェクトの状況


⚠️ Astro はまだ初期のベータ版であり、不足している機能やバグが予想されます!あなたがそれを受け入れることができれば、Astro で構築されたサイトは本番環境に対応しており、Astro で構築されたいくつかの本番 Web サイトはすでに公開されています.安定した v1.0 リリースに近づいたら、このメモを更新します.

クイックスタート


# get started with astro in 3 easy steps:
mkdir new-project-directory
cd new-project-directory
npm init astro

完全なドキュメント サイト →





2.スーパークッキー

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.

ヨナストレール / スーパークッキー

⚠️ ファビコンによるブラウザフィンガープリント!

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.

約

💭 インスピレーション

目的

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

インストール

🔧 ドッカー

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
…

3.ダイレクトス

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

直接 / 直接

オープンソース データ プラットフォーム 🐰 — Directus は、あらゆる SQL データベースをリアルタイムの GraphQL+REST API と非技術者向けの直感的なアプリでラップします。


🐰はじめに

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.


🚧 リリース候補

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.タイニコン

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

トムーア / タイニーコン

ファビコンを操作するための小さなライブラリ。特にアラート バブルの追加と画像の変更。

タイニコン

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.

ドキュメンテーション

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

インストール

Install with your favorite package manager.

npm install tinycon --save
yarn add tinycon

基本的な使い方


Tinycon.setBubble(6);

オプション

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. ハンズフリー

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

MIDIブロック / ハンズフリー

顔、手、および/またはポーズのトラッキングをフロントエンド プロジェクトにすばやく統合します✨👌

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

Powered by:

       

Handsfree.js.Portfolio.mp4

Explore examples: https://labofoz.notion.site/901ff075d8df4bd7b9500d134c22038b?v=f33d13f1c67b458487250992a8501e2c








💻 プロジェクト一時保留

Hello! I was recently displaced from my home following a few traumatic events. I wasn't able to raise enough support and so I deleted my socials and am just going to work through this on my own.

It'll take time for me to get back into this project, but it's still very functional. Here are some links:

Thanks for your patience, and also for all the support I have received over the last 3 years of developing this library! Oz








コンテンツ

This repo is broken into 3 main parts: The actual library…


6.ナノストア

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

ナノストア / ナノストア

React/RN/Preact/Vue/Svelte 向けの小さな (172 バイト) 状態マネージャー

ナノストア

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

  • Small. between 172 and 526 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.
  • It has good TypeScript support.
// store/users.ts
import { createStore, update } from 'nanostores'
export const users = createStore<User[]>(() => {
  users.set([])
})

export function addUser(user: User) {
  update(users, current => [...current,
…

7. React フリップ ツールキット

A lightweight magic-move library for configurable layout transitions

アホラチェク / 反応フリップツールキット

構成可能なレイアウト トランジション用の軽量のマジック ムーブ ライブラリ

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

クイックスタート

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.

目次


8.フリック

Reliable, flexible and extendable carousel.

ネイバー / egjs-フリック

🎠 ♻️毎日30万人が体験。信頼性が高く、柔軟で拡張可能なカルーセルです。

@egjs/フリック

デモ / ドキュメント / その他のコンポーネント

Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
📱💻🖥

Supported Frameworks
           


Music app demo
🖱️Click each images to see its source or check our full demos.

✨特徴

  • 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

⚙️インストール

npm

$ npm install --save @egjs/flicking

CDN

🏃 クイックスタート

HTML

Flicking requires minimal structure to initialize properly.

You don't…


9.究極のバックエンド

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

ジュースクレフ / 最終的なバックエンド

cqrs graphql マイクロサービス アーキテクチャ、apollo フェデレーション、イベント ソース、および認証を備えたマルチテナント SaaS スターター キット

究極のバックエンド

(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 :)

説明

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.リキャスト

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

ベンジャミン / リキャスト

JavaScript 構文ツリー トランスフォーマー、非破壊プリティ プリンター、自動ソース マップ ジェネレーター

リキャスト、v.

  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.

インストール

From NPM:

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

スタイルのインポート


Recast は、名前付きインポートを使用してインポートされるように設計されています.

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

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


CommonJS を使用している場合:

const { parse, print } = require("recast");
console.log(print(パース(ソース)…


View on GitHub


星空観察 📈


過去 7 日間のトップライザー



  • Coding Interview University +4,250 スター

  • Free Programming Books +1,145 スター

  • Public APIs +965 スター

  • JavaScript Questions +736 スター

  • Next.js +729 スター

  • 過去 7 日間の上位成長率 (%)



  • React Virtual Cool +252%

  • Map of JavaScript +55%

  • Plaiceholder +36%

  • Million +31%

  • Slides +30%

  • 過去 30 日間のトップライザー



  • Coding Interview University +11,307 スター

  • Public APIs +7,045 スター

  • Free Programming Books +5,265 スター

  • Slidev +4,679 スター

  • Developer Roadmap +2,855 スター

  • 過去 30 日間の上位成長率 (%)



  • useStateMachine +282%

  • Fig +165%

  • Slidev +50%

  • Plaiceholder +46%

  • Appwrite +41%



  • Trending Projects は毎週のニュースレターとして入手できます.www.iainfreestone.com にサインアップして、問題を見逃さないようにしてください.

    この記事を楽しんでいただけたなら、Twitter で HTML、CSS、JavaScript に関する簡単なヒントを定期的に投稿してください.