簡単な設定で使える軽量でモダンなキーバインドライブラリ・「tinykeys」
tinykeys See the Pen yLOBWdj by kachibito (@kachibito) on CodePen. tinykeysは簡単な設定で使える軽量でモダンなキーバインドJavaScriptラ...
Resource - JavaScript
CSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説する・「this vs that」
this vs that this vs thatはCSSやHTML、JavaScript等で、似たような挙動をするタグや方法で何が違うのかを解説するWebサイトです。 ちょっと何言ってるか分からない、という方もいらっしゃると思...
アニメーションしながら動的に順位が入れ替わるバーチャートを生成できるOSS・「Bar chart race generator」
Bar chart race generator Bar chart race generatorはアニメーションしながら動的に順位が入れ替わるバーチャートを生成できるOSSです。Bar chart raceって言うんですね。初めて知...
Webアプリ等に手軽にキーバインドを実装できるスクリプト・「whenipress」
whenipress See the Pen xxZWjwB by kachibito (@kachibito) on CodePen. whenipressは開発したWebアプリ等に手軽にキーバインドを実装できる...
手軽に扱えるタッチフレンドリーで汎用的なカルーセルライブラリ・「keen-slider」
keen-slider keen-sliderは手軽に扱えるタッチフレンドリーで汎用的なカルーセルライブラリです。 他ライブラリを必要としない非依存型でタッチデバイスファーストな設計となっています。操作もシンプルで様々な用途に使...
Animate.cssを使用してスクロールに応じてコンテンツにアニメーションエフェクトを追加できる軽量スクリプト・「Josh.js」
Josh.js See the Pen wvMzNYv by kachibito (@kachibito) on CodePen. Josh.jsはAnimate.cssを使用してスクロールに応じてコンテンツにアニ...
チャートも含める事が出来るテーブルライブラリ・「AnyGrids」
AnyGrids See the Pen YzwWpoK by kachibito (@kachibito) on CodePen. AnyGridsはチャートも含める事が出来るテーブル生成JavaScriptライブラ...
シンプルで扱いやすいHTMLテーブルライブラリ・「Grid.js」
Grid.js Grid.jsはシンプルで扱いやすいHTMLテーブルライブラリです。ReactやAngular、Vueなどは勿論、バニラでも問題なく動作します 9kbと非常に軽量で使い方もすごく簡単です。データを元に自動で指...
uilangやAlpine.js等にインスパイアされた、簡単なDOM操作を手軽に行える超軽量スクリプト・「Fluor.js」
Fluor.js Fluor.jsはちょっとしたDOM操作を手軽に行える超軽量スクリプトです。uilangやAlpine.js等にインスパイアされたそう classの付与/除去やクリックイベント、トグルなどなど需要の高そうな操作...
Webページで音声による操作を可能にするボイスコマンドライブラリ・「Artyom.js」
Artyom.js Artyom.jsはWebページで音声による操作を可能にするボイスコマンドライブラリです Google NowやSiri、Cortanaなどの音声アシスタントの簡易版みたいなやつです 例えば挨拶したら返...
HTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワーク・「Alpine.js」
Alpine.js See the Pen To Do List - Alpine.js by kachibito (@kachibito) on CodePen. Alpine.jsはHTMLの属性にディレクティブを...
1行のコードで使えるJavaScriptユーティリティのまとめ・「1loc」
1loc 1locは1行のコードで使えるJavaScriptユーティリティをまとめているプロジェクトサイトです。名前は1行のLOC (line of code)という意味のようです スニペットのまとめページ、みたいなもの。配列や...
Markdownでマインドマップを作れるライブラリ・「Markmap」
Markmap MarkmapはMarkdownでマインドマップを作れるライブラリです。Markmapにインスパイアされて開発したそうです 基本的には以下のようにリストや見出し等でマインドマップを描けるようになっています ...
アイソメトリック図を手軽に作れるJavaScriptライブラリ・「isocity」
isocity isocityはアイソメトリック図を手軽に作れるJavaScriptライブラリです 動作サンプルでは街を作れるようになっており、ライブラリ名もサンプルに沿ったネーミングですが、素材を変えれば様々な用途に応用できそ...
任意の画像と同じ色の影を作るシンプルなスクリプト・「cosha」
cosha See the Pen zYGjrbq by kachibito (@kachibito) on CodePen. coshaは任意の画像と同じ色の影を作るスクリプトです。上サンプルのようにステンドグラ...
Reactで書かれたオープンソースのWYSIWYGインラインエディター・「Edtr.io」
Edtr.io Edtr.ioはReactで書かれたオープンソースのWYSIWYGインラインエディターです mediumで採用されたエディターのようにコンテンツに直接編集を加えるタイプで、ブロックの追加やD&Dによる移動、複製な...
モスキート音を出すためのスクリプト・「Mosquito.js」
Mosquito.js Mosquito.jsはいわゆるモスキート音を鳴らせるスクリプトです。非依存なので単体で動作します 一昔前に、深夜の若者の騒音対策として公園などに導入されたものです（Wikipedia:モスキート音） ...
30以上のプラグインでカスタマイズ可能なオープンソースのJavaScriptアップローダー・「Uppload」
Uppload Upploadは30以上のプラグインが用意された拡張的なOSSのJS製アップローダーです。※誤字ではなくUpploadが正式な名前みたいです 単にローカルからファイルをアップロードするだけでなく、SNSや画像投稿...
ソートや検索、ページネーション等、基本的な機能を備えた非依存のデータテーブルライブラリ・「Vanilla-DataTables」
Vanilla-DataTables See the Pen Vanilla DataTables by Karl Saunders (@Mobius1) on CodePen. Vanilla-DataTable...
非依存でシンプルなダイアグラム作成JavaScriptライブラリ・「DiagramFlowJS」
DiagramFlowJS DiagramFlowJSは非依存でシンプルなダイアグラム作成JavaScriptライブラリです 他ライブラリを使わず単体で動作、上サンプルのようなD&Dで動かせるダイアグラムを作成出来ます ...
Webページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプト・「GuideChimp」
GuideChimp GuideChimpはWebページの各所の役割等をユーザーに伝えるページツアーを実装するスクリプトです 使い方も手軽で簡単、既存のWebページにも組み込む事が出来ます。nextはカーソルキーにも対応してあり...
軽量で非依存な、ダーク/ライトモード切り替えスクリプト・「DarkModeJS」
DarkModeJS See the Pen VwLYLzd by kachibito (@kachibito) on CodePen. DarkModeJSは軽量で非依存なダークモード/ライトモードの切り替えスクリプ...