使いやすくて超軽量、ゼロ依存なReactive UIフレームワーク・「VanJS」 VanJS VanJSは使いやすくて、1.2kBと超軽量且つゼロ依存の、React/JSXを使わないReactive UIフレームワークです。 Vanilla Javascrriptを略した名で、bashがターミナルのスクリプト...2023.05.26 | 10時02分10秒
簡単な設定で実装できるスクロール連動アニメーションライブラリ・「Trig.js」 Trig.js See the Pen Untitled by kachibito (@kachibito) on CodePen. Trig.jsは簡単な設定で実装できるスクロール連動アニメーションライブ...2023.04.22 | 10時02分48秒
リアルタイムコラボレーションなアプリ開発のためのNext.jsスターターキット・「Liveblocks starter kit」 Liveblocks starter kit Liveblocks starter kitはリアルタイムコラボレーションなアプリ開発のためのNext.jsスターターキットです。例えばTodoやホワイトボードなどなど他ユーザーと共同で作...2023.02.08 | 10時01分42秒
スクロールと動画を同期させるJavaScriptライブラリ・「ScrollyVideo.js」 ScrollyVideo.js ScrollyVideo.jsはスクロールと動画を同期させるJavaScriptライブラリです。スクロールすると動画が再生する、ではなくて、スクロールに応じて動画が進む感じです。 このライブラリは...2023.01.21 | 10時04分59秒
非依存で使えるオープンソースのモジュール式データ可視化のためのJavaScriptフレームワーク・「Unovis」 Unovis Unovisは非依存で使えるオープンソースのモジュール式データ可視化のためのJavaScriptフレームワークです。React、Angular、SvelteはもちろんVanillaでもTSでも使えます。 動的に変化...2022.12.14 | 10時05分25秒
スクロールに連動した演出をサポートするオープンソースの軽量スクロールライブラリ・「Lenis」 Lenis Lenisはスクロールに連動した演出をサポートするオープンソースの軽量スクロールライブラリです。LocomotiveやGSAP ScrollSmootherといった先発ライブラリをリスペクトしつつ、より使いやすく欠点も補っ...2022.11.22 | 9時55分06秒
Intro.jsのようなWebサイトのツアーを実装するオープンソースのJSライブラリ・「TourGuide.js」 TourGuide.js See the Pen TourGuide JS basic CDN example by kachibito (@kachibito) on CodePen. TourGuide.j...2022.11.17 | 9時54分11秒
オープンソースのNode.jsアプリケーション用管理パネル・「AdminJS」 AdminJS AdminJSはオープンソースのNode.jsアプリケーション用管理パネルです。数分で全てのデータを1か所で管理できるNode.jsアプリ用のダッシュボードを構築できるそうです。 提供された複数データをもとに、O...2022.10.16 | 10時01分44秒
HTMLやCSSをSVGに変換するためのオープンソースのライブラリ・「Satori」 Satori SatoriはHTMLやCSSをSVGに変換するためのオープンソースのライブラリです。ホスティングサービスのVercel謹製のようです。 イメージ的にはHTMLやCSSを書く感覚でSVGを生成できる、と言った方が近...2022.10.12 | 10時03分06秒
ブラウザで任意の要素をクリックするだけでIDEを起動して該当のコードに移動してくれる拡張機能・「Locator.js」 Locator.js Locator.jsはブラウザで任意の要素をクリックするだけでIDEを起動して該当のコードに移動してくれるブラウザ拡張機能です。Chrome、Edge、Brave、Opera、Firefoxなど主要ブラウザは概ね...2022.10.07 | 9時55分19秒
ダークテーマを重視したオープンソースのUIパターンとコンポーネントのコレクション・「Dracula UI」 Dracula UI Dracula UIはダークテーマを重視したオープンソースのUIパターンとコンポーネントのコレクションです。Draculaの名に見覚えのある方も多いかもしれませんが、テキストエディターのダークテーマとしても人気の...2022.10.02 | 10時05分43秒
軽量で高速なWebコンポーネントベースのフロントエンドフレームワーク・「Leaf.js」 Leaf.js Leaf.jsは軽量で高速なWebコンポーネントベースのフロントエンドフレームワークです。ES Modulesも用いられています。 何より使いやすさを重視しており、Webサイトやコンポーネント、ライブラリなどを構...2022.09.13 | 10時03分04秒
スクロールやマウスの動きに合わせて視差効果を実装するReactライブラリ・「React Just Parallax」 React Just Parallax React Just Parallaxはスクロールやマウスの動きに合わせて視差効果を実装するReactライブラリです。軽量高速で簡単に書けるのが特長だそう。 マウスの動きに合わせた視差効果...2022.09.03 | 10時06分47秒
90年代を彷彿とさせるカーソルエフェクトを実装するためのライブラリ・「90’s Cursor Effects」 90's Cursor Effects See the Pen Untitled by kachibito (@kachibito) on CodePen. 90's Cursor Effectsは90年代のW...2022.08.28 | 10時03分54秒
Webサイトにカスタマイズ可能なコマンドメニューを追加できるライブラリ・「kmenu」 kmenu kmenuはWebサイトにカスタマイズ可能なコマンドメニューを追加できるライブラリです。各コードエディタを始め、最近ではWebアプリ等でも導入されるようになったコマンドメニューを実装できる、というライブラリです。 以...2022.08.06 | 10時01分21秒
Twitterなどでの口コミを収集してAirtableにデータを保存し、任意のWebページで紹介出来るOSS・「Open Testimonials」 Open Testimonials Open TestimonialsはTwitterなどでの口コミを収集してAirtableにデータを保存し、任意のWebページで紹介出来るOSSです。英語圏でのWebアプリ等で良く見られるUIですよ...2022.07.21 | 10時06分15秒
ASCIIアートで描いたダイアグラムをSVGで整形して表示するJavaScriptライブラリ・「typograms」 typograms See the Pen Untitled by kachibito (@kachibito) on CodePen. typogramsはASCIIアートで描いたダイアグラムをSVGで整形し...2022.07.20 | 10時05分35秒
様々なグラフに対応したフレキシブルで高性能なオープンソースのReact向けチャートライブラリ・「React Charts」 React Charts React Chartsは多種多様なグラフに対応したフレキシブルで高性能なオープンソースのReact向けチャートライブラリです。 上動作デモのように、様々なタイプのグラフを描画可能で、表現にも非常に応用...2022.06.20 | 9時51分26秒
Reactベースで独自のWebアプリ向けコマンドパレットを作成出来る・「react-cmdk」 react-cmdk react-cmdkは独自のWebアプリ向けコマンドパレットを作成出来るReactコンポーネントパッケージです。開発者にはお馴染みのコマンドパレットをWebアプリ等に導入できる、というもの。 検索窓にテ...2022.06.11 | 9時54分49秒
スクロールに応じて任意の要素をアニメーションさせる非依存の軽量スクリプト・「PushIn.js」 PushIn.js PushIn.jsはスクロールに応じて任意の要素をアニメーションさせる非依存の軽量スクリプトです。ES5に準拠した全てのブラウザに対応しており、非依存で動作も軽く使い方も簡単です。 JavaScriptとCS...2022.06.08 | 10時01分59秒
面倒な設定不要で手軽にアニメーションエフェクトを付与してくれるライブラリ・「AutoAnimate」 AutoAnimate AutoAnimateは面倒な設定不要で手軽にアニメーションエJavaScriptライブラリです。学習コストもほぼ必要なくCSSを書く必要もありません。 React、Vue、SvelteやVanillaで...2022.06.03 | 10時00分34秒
アプリケーション開発をより早くリリースする為に設計されたReactベースのコンポーネントライブラリ・「Formation」 Formation Formationはアプリケーション開発をより早くリリースする為に設計されたReactベースのコンポーネントライブラリです。TypeScriptで書かれており、アクセシビリティ重視でWCAG 2.0に準拠、シンプル...2022.06.01 | 10時04分38秒