仮想キーボードを実装する非依存で軽量なJavaScriptライブラリ・「Simple-keyboard」
Simple-keyboard Simple-keyboardは仮想キーボードを実装する非依存で軽量なJavaScriptライブラリです。PCのキーボードをモニターに表示してマウスでキーを選択できる、というもの。 スパイウェア対...
Resource - フロントエンドエンジニア向け
ログインやユーザー登録不要で任意のコードスニペットを管理できるシンプルなブラウザ拡張・「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サイト...
アクセシビリティやカスタマイズ性を重視したWebアプリ向けのOSSなUIコンポーネントライブラリ・「Radix UI」
Radix UI Radix UIはアクセシビリティやカスタマイズ性を重視したWebアプリ向けのOSSなUIコンポーネントライブラリです。高品質でアクセシビリティなデザインシステムを提供しWebアプリ構築に貢献してくれるのだそう。 ...
ブラウザのタブでHTML/CSS/JavaScriptを書いて実行できる拡張機能・「HTML New Tab」
HTML New Tab HTML New TabはブラウザのタブでHTML/CSS/JavaScriptを書いて実行できるChromeの拡張機能です。 jsfidleやCodepenのようなものですが、他ライブラリを読み込んだ...
Web制作者やマーケター向けのアプリをプライバシー重視の代替アプリとして提供されたOSSを探せる・「Open Source Stash」
Open Source Stash Open Source Stashはデザイナーやマーケター、デベロッパー向けのアプリをプライバシー重視の代替アプリとして提供されたOSSを探せるWebサイトです。 GAやSlack、Zapie...
軽量で拡張的な非依存のカルーセルライブラリ・「Tiny-Swiper」
Tiny-Swiper See the Pen VwKWMym by kachibito (@kachibito) on CodePen. Tiny-Swiperは軽量で拡張的な非依存のカルーセルライブラリです。他ライ...
Three.jsを使ってマネキンに任意のポーズで表現できるスクリプト・「mannequin.js」
mannequin.js See the Pen rNMLqKv by kachibito (@kachibito) on CodePen. mannequin.jsはThree.jsを使って3Dマネキンに任意のポーズ...