軽量で非依存のカスタマイズ可能なパーティクル生成ライブラリ・「tsParticles」
tsParticles See the Pen tsParticles - Monocromatic confetti explosions by Matteo Bruni (@matteobruni) on CodePen...
Resource - フロントエンドエンジニア向け
Tailwind.cssベースのクリーンでミニマルなオープンソースの管理画面テンプレート・「Cleopatra」
Cleopatra CleopatraはTailwind.cssベースのクリーンでミニマルなオープンソースの管理画面テンプレートです。 最近のCSSフレームワークでは最も注目されているであろうTailwind.cssがベースのダ...
コードを書くと結果が即反映されるCodepenやjsfidleのようなHTML/CSS/JavaScripteコード実行ツール・「Codeist」
Codeist Codeistはコードを書くと結果が即反映されるCodepenやjsfidleのようなHTML/CSS/JavaScripteコード実行ツールです。Ace.jsが使われています。書いたコードは自動で保存されます。 ...
AirtableやTiktok、Spotify、1Password等、人気のアプリのオープンソースクローンを沢山集めたリスト・「Clone Wars」
Clone Wars Clone WarsはAirtableやTiktok、Spotify、1Password等、人気のアプリのオープンソースクローンを沢山集めたリストです。 他にもAirbnb、Amazon、Instagram...
Airtableの代替として開発されたオープンソースのオンラインデータベース・「Baserow」
Baserow BaserowはAirtableの代替として開発されたオープンソースのオンラインデータベースWebアプリです。Airtableと同じようにスプレッドシートを使用します。 DjangoとNuxtで作られており、ユー...
仮想キーボードを実装する非依存で軽量なJavaScriptライブラリ・「Simple-keyboard」
Simple-keyboard Simple-keyboardは仮想キーボードを実装する非依存で軽量なJavaScriptライブラリです。PCのキーボードをモニターに表示してマウスでキーを選択できる、というもの。 スパイウェア対...
ログインやユーザー登録不要で任意のコードスニペットを管理できるシンプルなブラウザ拡張・「Snippy」
Snippy Snippyはログインやユーザー登録不要で任意のコードスニペットを管理できるシンプルなChromeエクステンションです。 エクステンションを起動するとその場にエディタが表示され、任意のフォルダを作成してコードスニペ...
クラスレスでHTML要素に基本的なスタイルを適応するCSS・「Bamboo CSS」
Bamboo CSS See the Pen XWNqrRE by kachibito (@kachibito) on CodePen. Bamboo CSSはHTML要素に基本的なスタイルを適応するclass-les...
コードを画像化してダウンロードできるWebアプリ・「Ray.so」
Ray.so Ray.soはコードを画像化してダウンロードできるWebアプリです。書いたコードを画像にしてSNSなどに投稿するのが主な目的みたいです。 この手のツールは既に多く世に送られていて、その筆頭がCarbon（当ブログの...
Intercomなどのように顧客とのコミュニケーションの場を提供するオープンソースのライブチャットアプリ・「Chatwoot」
Chatwoot Chatwootは顧客とのコミュニケーションの場を提供するオープンソースのライブチャットアプリです。 よく海外などのWebサービス等の右下に見かける、訪問ユーザーとのチャットツールの様なものを提供してくれる、と...
シンプルなUIのモダンなwysiwygエディタを構築するためのオープンソースのツールキット・「bangle.dev」
bangle.dev bangle.devはシンプルなUIのモダンなwysiwygエディタを構築するためのオープンソースのツールキットです。 基本的にはReactで使う事を想定した設計で今後はVueもサポートする予定との事です。...
CSSやJavScript等の便利なコードスニペットを収集している・「DevSamples」
DevSamples DevSamplesはCSSやJavScript等の便利なコードスニペットを収集しているWebサイトです。 CSSやJS、Node、Git、ReactやSvelte、HTMLなど開発時にたびたびググりがちな...
ダミーの画像やテキストを提供するweb components・「</placeholders>」
</placeholders> See the Pen dyOXOrR by kachibito (@kachibito) on CodePen. </placeholders>はダミーの画像や...
開発者やデザイナー向けのツールやリソースを収集している・「Dev Resources」
Dev Resources Dev Resourcesは開発者やデザイナー向けのツールやリソースを収集しているプロジェクトです。OSSとしてMITライセンスの元、Githubで収集データも公開されています。 Webサイトやアプリ...
ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」
Pollen Pollenは一貫したスタイルやユーティリティファーストなCSSを設計するためのCSS変数を提供するスタイルシートです。 中身は全てCSS変数のみで構成されており、既に定義付けられていますので、classを変えるこ...
セキュアでシンプルなオープンソースのパスワードジェネレーター・「passwrd.in」
passwrd.in passwrd.inはセキュアでシンプルなオープンソースのパスワードジェネレーターです。Vueで書かれており、サーバーには一切データは送信されず、ブラウザのみで処理されます。 パスワードは数字や記号を含めた...
React.js/Bootstrapベースのオープンソースの管理画面テンプレート・「Volt React」
Volt React Volt ReactはReact.js/Bootstrapベースのオープンソースの管理画面テンプレートです。 100以上のコンポーネントと10のサンプルページが用意されており、RWD対応、WCAGに準拠して...
タッチデバイスにも対応した、要素を複数選択できるようにするスクリプト・「Selecto.js」
Selecto.js Selecto.jsタッチデバイスにも対応した、要素を複数選択できるようにするスクリプトです。マウスによるドラッグだけでなくスマフォ等のタッチデバイスにも対応しています。 他ライブラリに依存せずVanill...
コードスニペットをフォルダで管理したりカスタマイズ可能なスクリーンショットを撮ったりembedも出来るスニペット管理ツール・「CodeKeep」
CodeKeep CodeKeepはコードスニペットをフォルダで管理したりカスタマイズ可能なスクリーンショットを撮ったりembedも出来るスニペット管理ツールです。 単純にコードスニペットを登録するだけでなく、フォルダでカテゴラ...
任意のWebサイトのJavaScriptの構文をチェックし、最新の構文に書き換えた場合のサイズやパフォーマンスなどを計算してくれるOSSのチェックツール・「ES timator」
EStimator EStimatorは任意のWebサイトのJavaScriptの構文をチェックし、最新の構文に書き換えた場合のサイズやパフォーマンスなどを計算してくれるOSSの構文チェックツールです。GoogleChromeの開発チ...
学習コストをなるべくかけずに習得できるよう設計された、沢山のコンポーネントやユーティリティを含むCSS Gridベースのフロントエンドフレームワーク・「Axentix」
Axentix See the Pen XWjPbpG by kachibito (@kachibito) on CodePen. Axentixは学習コストをなるべくかけずに習得できるよう設計された、沢山のコンポーネ...
開発者向けに作られたオープンソースのオンラインブックマークツール・「bookmarks.dev」
bookmarks.dev bookmarks.devは開発者向けに作られたオープンソースのオンラインブックマークツールです。 よくある（一時期に比べればかなり減りましたが）オンラインブックマークサービス同様、任意のWebサイト...