GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースのまとめ
Post on:2021年6月15日
sponsors
GitHubで注目をあつめているHTML, CSS, JavaScriptのライブラリ・リソースを紹介します。
当ブログでもよく紹介しますが、見逃していたものがありました。
1年間分、52個もあるので、時間のあるときにチェックしてみてください。
The 52 most popular projects from the last year of Trending Projects
by Iain Freestone
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
私を注目をあつめたプロジェクトをキュレーションしており、人気があるWeb開発プロジェクト10個を紹介するニュースレターを毎週、配信しています。この記事では、ここ1年間に配信した各ニュースレターから最も多くクリックされたプロジェクトをリストアップしました。
ニュースレターに興味がある人は、iainfreestone.comで登録（無料）ができます。
ここ1年、GitHubで注目をあつめたWeb開発プロジェクト
訳者注: カテゴリ分けしようと思いましたが、時系列順のまま掲載しました。
doczはコードの美しいインタラクティブなドキュメントを作成して簡単に公開することができます。コードを紹介するMDXファイルを作成すると、doczがそれをライブローディング可能な本番環境に対応したサイトに変換します。
デベロッパー向けにプレゼンテーション用のスライドを作成できます。
Node.js用の最も強力なヘッドレスCMS、GraphQLとReactで構築されています。
デベロッパーのための何でも自動化するツール、スクリプトの実行・書き込み・共有を容易にします。
デベロッパーがよく使用する便利なgitのテクニックのまとめ。
よく使用されるレイアウトやコンポーネントをCSSで実装したコードのまとめ。100パターン以上あり、現在でも数が増え続けています。
モダンWebアプリ用のオールインワンの小さな開発ツールで、依存関係のない単一の2MBのファイルです。
関数、Promise、ジェネレーターを使用して JSX駆動のコンポーネントを作成できます。
The Magic of CSS, GitHub
ニュースレター
あなたをCSSの上級者にする講座。
Awesome Design Tools -GitHub
ニュースレター
人気があるデザインのツールとプラグインのまとめ。
JavaScriptのalertの美しい代替機能。
The Art of Node -GitHub
ニュースレター
node.jsの入門者用の解説。
Serverless Stack (SST), GitHub
ニュースレター
aaaServerless Stack（SST）は、サーバーレスアプリを簡単に構築できるフレームワークです。/p>
デベロッパー向けに作成されたアイコンフォントです。ベクター化された85個のシャープなグリフが含まれています。MITライセンスなので、商用プロジェクトでも無料で利用できます。
Oasis Engineは、Webファーストおよびモバイルファーストの高性能リアルタイム開発プラットフォームです。
Flexbox Patterns, GitHub
ニュースレター
CSS Flexboxで実装されたUIコンポーネントを構築するためのパターン。
Lazy Collections -GitHub
ニュースレター
高速演算と遅延演算のコレクション。
Naming cheatsheet -GitHub
ニュースレター
名前をつけることは難しいことです。どのプログラミング言語にも適用できますが、このチートシートではJavaScriptを使用して実際の名前のつけ方を解説します。
コードコンポーネントを使用して、ページをドラッグアンドドロップで構築できます。デザインシステムに命を吹き込みましょう。
Software Developer Folio, GitHub
ニュースレター
デベロッパー向けのクリーンで美しい、レスポンシブ対応のポートフォリオのテンプレートです。
TypeScript Deep Dive, GitHub
ニュースレター
TypeScriptの決定版ガイドで、最高のTypeScriptブックです。しかも、無料でオープンソース。
Prisma Clientは、あらゆるNode.jsまたはTypeScriptのバックエンドアプリケーション（サーバーレスアプリケーションやマイクロサービスを含む）で使用できます。REST API、GraphQL API、gRPC APIなど、データベースを必要とするものであれば何でも構いません。
50 Projects in 50 Days - HTML/CSS and JavaScript -GitHub
ニュースレター
HTML、CSS、JavaScriptを使用した50個以上のWebプロジェクト。
Elastic UI Framework, GitHub
ニュースレター
Elastic UI Frameworkは、Elasticのユーザーインターフェイスを素早く構築するためのReact UIコンポーネントのコレクションです。Reactを使用していない？問題ありません。各コンポーネントの背後にあるCSSを使用することができます。
You-need-to-know-css, GitHub
ニュースレター
WebデベロッパーのためのCSSのテクニック集。
Layrは、フルスタックのアプリケーションの開発を劇的に簡素化するJavaScript/TypeScriptライブラリです。
The Book of Secret Knowledge -GitHub
ニュースレター
刺激的なリスト、マニュアル、チートシート、ブログ、ハック、ワンライナー、CLI/Webツールなどのコレクション。
DenoのReactフレームワーク。
すべてのプロジェクトのための、迅速、簡単、強力、で解放感のあるローカル開発およびDevOpsツール。
バニラWeb開発のための実行可能な技術についてのケーススタディ。
AdminBroはアプリケーションにプラグインできる自動管理インターフェイスです。デベロッパーはデータベースモデル (投稿、コメント、ストア、商品などアプリが使用するもの) を提供し、AdminBroはデベロッパー (または信頼できる他のユーザー) がコンテンツを管理するためのUIを生成します。
Pre-trained TensorFlow.js models, GutHub
ニュースレター
このリポジトリには、TensorFlow.jsに移植された学習済みモデルのセットがあります。モデルはNPMとunpkgでホストされているため、どんなプロジェクトでもすぐに使うことができます。これらのモデルは、直接使用することも、TensorFlow.jsを使った転送学習の設定で使用することもできます。
シンプルなWebサイトをより良くするCSSスタイルのドロップインコレクション。
オープンソースのHTMLプレゼンテーションのフレームワーク。ブラウザを使用する人なら誰でも、充実した機能を備えた美しいプレゼンテーションを無料で作成できます。
Front End Interview Handbook, GitHub
ニュースレター
フロントエンドのデベロッパーが面接の準備をするのに役立つ既存の資料はいくつかありますが、ソフトウェアエンジニアの面接用の資料ほど豊富ではありません。既存の資料の中で、おそらく最も役立つ質問集は「Front-end Developer Interview Questions」でしょう。残念ながら、これらの質問に対する完全で満足のいく回答をオンラインで見つけることができませんでしたので、ここで私が回答しようと思います。
リンク、ボタン、ロゴ、SVG、アイキャッチ画像などに使用する、CSSで実装されたホバーエフェクトのコレクション。独自の要素に簡単に適用したり、変更したり、インスピレーションのために使用したりできます。Sass, LESS完備。
Boilerplate App for SaaS Product -GitHub
ニュースレター
独自のSaaSプロダクトを構築する際に数週間の作業を省けるオープンソースのWebアプリ。
Project Guidelines -GitHub
ニュースレター
新しいプロジェクト用のガイドライン。ほとんどのJavaScriptプロジェクトで非常にうまく機能します。
Carbon Design System, GitHub
ニュースレター
IBMによって構築されたオープンソースのデザインシステム。IBM Design Languageをベースとしたこのシステムは、作業コード、デザインツールとリソース、ヒューマンインターフェースのガイドライン、そして活発な貢献者のコミュニティーで構成されています。
Design resources for developers- GitHub
ニュースレター
ストックフォト、Webテンプレート、CSSフレームワーク、UIライブラリ、ツールなどのデザインおよびUI リソースの精選されたリスト。
すぐに使用できるTailwind CSSで実装された、15の異なるカテゴリ (e コマース、ブログ、価格表など)、レスポンシブ、ダーク・ライトモード、カラー バリエーション。
Inkは、Reactがブラウザで提供するのと同じコンポーネントベースのUI構築エクスペリエンスを提供しますが、コマンドラインアプリ向けです。Yogaを使用してターミナルでFlexboxレイアウトを構築するため、CSSのような小道具はInkでも利用できます。
ドキュメントサイトを生成するジェネレーター。
Adobe React Spectrum, GitHub
ニュースレター
Adobeが提供する、アクセシブルで、堅牢なユーザーエクスペリエンスを構築するのに役立つライブラリとツールのコレクション。
Viteは、開発中にネイティブのESモジュールのインポートを介してコードを提供し、本番用のロールアップにバンドルする、Web開発ビルド ツールです。
Redwoodは、JAMstackアプリケーションを簡単に構築およびデプロイできる、独自のフルスタックサーバーレスWebアプリケーションのフレームワークです。
アリババグループの統一フォームのソリューション。
Reactで非同期データをフェッチ、キャッシュ、更新するためのフック。
アクセシブルなReactアプリをスピーディーに構築できます。
The Algorithms - JavaScript -GitHub
ニュースレター
Javascriptで実装されたすべてのアルゴリズムのリポジトリ。
モダンWeb向けのより高速なビルドシステム。
非常に高速なJavaScriptバンドラおよびミニファイア。
GitHubの振り返りを楽しんでいただけたでしょうか。このリストで、新しいプロジェクトを発見していただければ幸いです。
トレンドのプロジェクトは週刊ニュースレターとして入手できます。www.iainfreestone.comにメールアドレスを登録（無料）して、トレンドを見逃さないようにしてください。
sponsors
