ダークテーマを重視したオープンソースのUIパターンとコンポーネントのコレクション・「Dracula UI」
Dracula UI Dracula UIはダークテーマを重視したオープンソースのUIパターンとコンポーネントのコレクションです。Draculaの名に見覚えのある方も多いかもしれませんが、テキストエディターのダークテーマとしても人気の...
Resource - JavaScript
軽量で高速なWebコンポーネントベースのフロントエンドフレームワーク・「Leaf.js」
Leaf.js Leaf.jsは軽量で高速なWebコンポーネントベースのフロントエンドフレームワークです。ES Modulesも用いられています。 何より使いやすさを重視しており、Webサイトやコンポーネント、ライブラリなどを構...
90年代を彷彿とさせるカーソルエフェクトを実装するためのライブラリ・「90’s Cursor Effects」
90's Cursor Effects See the Pen Untitled by kachibito (@kachibito) on CodePen. 90's Cursor Effectsは90年代のW...
Webサイトにカスタマイズ可能なコマンドメニューを追加できるライブラリ・「kmenu」
kmenu kmenuはWebサイトにカスタマイズ可能なコマンドメニューを追加できるライブラリです。各コードエディタを始め、最近ではWebアプリ等でも導入されるようになったコマンドメニューを実装できる、というライブラリです。 以...
Twitterなどでの口コミを収集してAirtableにデータを保存し、任意のWebページで紹介出来るOSS・「Open Testimonials」
Open Testimonials Open TestimonialsはTwitterなどでの口コミを収集してAirtableにデータを保存し、任意のWebページで紹介出来るOSSです。英語圏でのWebアプリ等で良く見られるUIですよ...
ASCIIアートで描いたダイアグラムをSVGで整形して表示するJavaScriptライブラリ・「typograms」
typograms See the Pen Untitled by kachibito (@kachibito) on CodePen. typogramsはASCIIアートで描いたダイアグラムをSVGで整形し...
様々なグラフに対応したフレキシブルで高性能なオープンソースのReact向けチャートライブラリ・「React Charts」
React Charts React Chartsは多種多様なグラフに対応したフレキシブルで高性能なオープンソースのReact向けチャートライブラリです。 上動作デモのように、様々なタイプのグラフを描画可能で、表現にも非常に応用...
Reactベースで独自のWebアプリ向けコマンドパレットを作成出来る・「react-cmdk」
react-cmdk react-cmdkは独自のWebアプリ向けコマンドパレットを作成出来るReactコンポーネントパッケージです。開発者にはお馴染みのコマンドパレットをWebアプリ等に導入できる、というもの。 検索窓にテ...
スクロールに応じて任意の要素をアニメーションさせる非依存の軽量スクリプト・「PushIn.js」
PushIn.js PushIn.jsはスクロールに応じて任意の要素をアニメーションさせる非依存の軽量スクリプトです。ES5に準拠した全てのブラウザに対応しており、非依存で動作も軽く使い方も簡単です。 JavaScriptとCS...
面倒な設定不要で手軽にアニメーションエフェクトを付与してくれるライブラリ・「AutoAnimate」
AutoAnimate AutoAnimateは面倒な設定不要で手軽にアニメーションエJavaScriptライブラリです。学習コストもほぼ必要なくCSSを書く必要もありません。 React、Vue、SvelteやVanillaで...
アプリケーション開発をより早くリリースする為に設計されたReactベースのコンポーネントライブラリ・「Formation」
Formation Formationはアプリケーション開発をより早くリリースする為に設計されたReactベースのコンポーネントライブラリです。TypeScriptで書かれており、アクセシビリティ重視でWCAG 2.0に準拠、シンプル...
Webサイトの任意のテキストをその場で変更できるブックマークレット・「Quick Edit Bookmarklet」
Quick Edit Bookmarklet Quick Edit BookmarkletはWebサイトの任意のテキストをその場で変更できるブックマークレットです。 Devtoolsを開かずとも、起動すれば即エディターモードにな...
高速なMagento製ECストアをReactで構築するためのオープンソースのフレームワーク・「GraphCommerce」
GraphCommerce GraphCommerceは高速で優れたUXのMagento製ECストアをReactで構築するためのオープンソースのフレームワークです。ハイエンドなEコマースPWAのスタイリングや設計に集中できるよう、必要...
EPGベースのタイムラインコンテンツを実装する為のReactコンポーネント・「Planby」
Planby PlanbyはEPGベースのタイムラインコンテンツを実装する為のReactコンポーネントです。OSSとしてソースコードが公開されています。 EPGとはTVやPCなどに、いわゆるTV番組表を表示するシステムでElec...
手軽にモダンなスクロールエクスペリエンスを構築できる軽量Reactライブラリ・「scrollex」
scrollex scrollexは手軽にモダンなスクロールエクスペリエンスを構築できる軽量Reactライブラリです。スクロールに応じてコンテンツをスマートに表示したり画像等を切り替えたりといった演出を手軽に実装する事が出来ます。 ...
先進的且つ多機能で安定したYoutube用JavaScriptライブラリ・「YouTube.js」
YouTube.js YouTube.jsは先進的且つ多機能で安定したYoutube用JavaScriptライブラリです。Innertube APIのフル機能ラッパーでYoutubeをシンプルで効率的に扱う方法を提供する為に作られてい...
class属性を利用するCSSライクなデザインエンジン・「Master Styles」
Master Styles Master Stylesはclass属性を利用するCSSライクなデザインエンジンです。本サイトでは拡張された構文を持った仮想CSS言語と説明しています。 実際に見た方がどういう事か把握できると思うの...
直感的な操作で使えるTypeScriptベースのオープンソースなPDF生成ライブラリ・「pdfme」
pdfme pdfmeは直感的な操作で使えるTypeScriptベースのオープンソースなPDF生成ライブラリです。ユーザーの使用にあたり、特別なスキルや訓練等も不要でオンラインでPDFを生成する事が出来ます。 テンプレート式にな...
CSSライクに書けるオープンソースのデータバインディングJavaScriptライブラリ・「Corset」
Corset See the Pen Counter example by kachibito (@kachibito) on CodePen. CorsetはCSSライクに書けるオープンソースのデータバインデ...
テキスト/アイコンベースのシンプルなアバターを生成するReactライブラリ・「Avvvatars」
Avvvatars Avvvatarsはテキスト/アイコンベースのシンプルなアバターを生成するReactライブラリです。任意の画像等を選択しないユーザーの為のもの、という感じ。 40の色と60のアイコン、入力されたテキスト（ユー...
リアルタイムで2Dまたは3DCGのシェーダーを作成するためのオープンソースJavaScriptフレームワーク・「Shader Park」
Shader Park Shader Parkはリアルタイムで2Dまたは3DCGのシェーダーを作成するためのオープンソースJavaScriptフレームワークです。 数行のコードで複雑なシェーダを作成できる、というもの。javas...
サポートが終了したパッケージや危険なパッケージが除外されたJavaScriptライブラリ検索ツール・「Code awesome」
Code awesome Code awesomeはサポートが終了したパッケージや危険なパッケージが除外されたJavaScriptライブラリ検索ツールです。 更にVanilla、React、Vueに分けられており、それぞれ更に細...