API開発に貢献するオープンソースのPostman代替・「Hoppscotch」
Hoppscotch HoppscotchはAPI開発に貢献するオープンソースのAPIリクエストビルダーです。Vue/TSで書かれておりMITライセンスの元、OSSとしてソースコードが公開されています。 Postman代替として...
Resource - フロントエンドエンジニア向け
PythonやPHP、JavaScriptなど言語別にそれぞれよく使われる正規表現のコードを確認出来る・「RegEx Library」
RegEx Library RegEx LibraryはPythonやPHP、JavaScriptなど言語別にそれぞれよく使われる正規表現のコードを確認出来る正規表現コードサンプルのライブラリです。 例えばメールアドレスや電話番...
モダンなWebサイト構築の為のTailwind.css向けUIコンポーネントライブラリ・「TailGrids」
TailGrids TailGridsはモダンなWebサイト構築の為のTailwind.css向けUIコンポーネントライブラリです。よく使われるUIの他にカードや認証、フォームやモーダル、テーブル、価格表などなどWebアプリや企業サイ...
好みのフレームワークやツールを選んで導入できるwebpackやParcelのboilerplateジェネレーター・「Create App」
Create App Create Appは好みのフレームワークやツールを選んで導入できるwebpackやParcelのboilerplateジェネレーターです。Webアプリの他、CLIでも使えます。 webpack、parce...
シンプルさとカスタマイズ性の高さでUI設計をサポートするフロントエンドライブラリ・「Xtend UI」
Xtend UI Xtend UIはシンプルさとカスタマイズ性の高さでUI設計をサポートするフロントエンドライブラリです。A11y規格に準拠しておりアクセシビリティにも配慮されています。 Tailwind.css、vanilla...
TailwindとAntDesignにインスパイアされたオープンソースのUIコンポーネントライブラリ・「Supabase UI」
Supabase UI Supabase UIはTailwindとAntDesignにインスパイアされたオープンソースのUIコンポーネントライブラリです。 名前から想定できる通りFirebaseのオープンソース代替であるSupa...
軽量、シンプルで使いやすく様々なユーティリティも備えられたCSSフレームワーク・「Beercss」
Beercss See the Pen Untitled by kachibito (@kachibito) on CodePen. Beercssは軽量、シンプルで使いやすく様々なユーティリティも備えられたC...
three.jsを使った3Dなアニメーション背景を簡単に作成、設置できるライブラリ・「Vanta.js」
Vanta.js Vanta.jsはthree.jsを使った3DなWebGLアニメーションの背景を簡単に作成、設置できるライブラリです。 同ライブラリのプロジェクトサイト内で簡単な編集を、プレビューを確認しながらツールバーの調整...
SvelteでWebアプリ開発する方の為のオープンソースIDE・「sVelocity」
sVelocity sVelocityはSvelteでWebアプリ開発する方の為のオープンソースのIDE（統合開発環境）です。electronベースみたいですね。クロスプラットフォーム対応となっています。 Svelteアプリのビ...
高速かつシンプルで使いやすいJavaScriptアニメーションライブラリ・「luge」
luge lugeは高速かつシンプルで使いやすいJavaScriptアニメーションライブラリです。プラグインを追加して拡張する事も可能です。 読み込むだけでhtmlタグに自動でデバイスやブラウザのclassも付与されるので異なる...
JavaScriptを使ったWebアプリの設計を改善するためのパターンやヒント、コツをまとめた・「Patterns.dev」
Patterns.dev Patterns.devはVanillaなJavaScriptやReactなどを使ったWebアプリの設計を改善するためのパターンやヒント、コツをまとめたWebサイトです。 チェックリストでは無く、パター...
ブックマークレットも用意されている、引用文を綺麗に見やすくスタイリングするライブラリ・「Quotebacks」
Quotebacks Quotebacksはブックマークレットやブラウザ拡張も用意されている、引用文を綺麗に見やすく整形するライブラリです。OSSとしてソースコードも公開されています。 以下のように引用と引用元へのリンクとファビ...
ツールチップやポップオーバー、ドロップダウンなどのフローティングエレメントを完全制御する為のJavaScriptライブラリ・「Floating UI」
Floating UI Floating UIはツールチップやポップオーバー、ドロップダウンなどのフローティングエレメントを完全制御する為のJavaScriptライブラリです。 表示位置の調整やスクロールした際の位置調整など、ユ...
素早くドキュメントサイトをMarkdownで作成、運用できるオープンソースのドキュメント生成ツール・「docs.page」
docs.page docs.pageは素早くドキュメントサイトをMarkdownで作成、運用できるオープンソースのドキュメント生成ツールです。 GitHubの公開リポジトリから直接コンテンツを取得して手軽にドキュメントサイトを...
パフォーマンスを重視した高速で軽量なカルーセル/スライダーライブラリ・「Swiffy Slider」
Swiffy Slider See the Pen Untitled by kachibito (@kachibito) on CodePen. Swiffy Sliderはパフォーマンスを重視した高速で軽量な...
Vue.jsとTailwind.cssで設計されたオープンソースの管理画面テンプレート・「Aatrox」
Aatrox AatroxはVue.jsとTailwind.cssで設計されたオープンソースの管理画面テンプレートです。開発者フレンドリーで多機能、カスタマイズ性の高い管理画面の開発を目的としているそうです。 高い利便性と汎用性...
アクセシブルなモバイルアプリを構築する為のデザインファーストなUIキット・「Pearl UI」
Pearl UI Pearl UIはアクセシブルなモバイルアプリを構築する為のデザインファーストなUIキットです。現在のところ、Expoのマネージドワークフローを使用しているReact Nativeプロジェクトのみサポートされています...
シンプルなUIで見やすく使いやすいオープンソースのTailwind.css製の管理画面テンプレート・「Windster」
Windster WindsterはシンプルなUIで見やすく使いやすいオープンソースのTailwind.css製の管理画面テンプレートです。Tailwind.cssのユーティリティクラスのみを使用して構築されています。 管理画面...
カレンダーサービスに任意のイベントを追加するボタンを設置する為のJavaScript・「Add-to-Calendar Button」
Add-to-Calendar Button See the Pen Untitled by kachibito (@kachibito) on CodePen. Add-to-Calendar Butto...
HTMLのタグ内に含めて良いタグかどうかを教えてくれる、HTMLタグのネスト可否チェックツール・「Can I Include」
Can I Include Can I IncludeはHTMLのタグ内に含めて良いタグかどうかを教えてくれるWebアプリです。HTMLタグがネスト可能かどうかをチェックできる、というもの。 調べ方は簡単で、左に子、右に親のHT...
50以上のUIコンポーネントを提供する、モダンなWebアプリケーションを構築するためのOSS・「PoemKit」
PoemKit PoemKitは50以上のUIコンポーネントを提供する、モダンなWebアプリケーションを構築するためのオープンソースのWeb開発キットです。 Reactを使ったUIキットで、サーバーサイドレンダリングによる高速な...
JavaScriptのコードスニペットのパフォーマンスを比較できるチェックツール・「HASTY」
HASTY HASTYはJavaScriptのコードスニペットのパフォーマンスをオンラインで比較できるチェックツールです。上のようにembedやURLで共有する事も可能となっています。 昔からあるjsperfやJSBench.m...