PlainAdmin
PlainAdminはBootstrap5ベースで作られたオープンソースの多目的ダッシュボードテンプレートです。JavaScriptはバニラとなっています。
多様な目的にも対応できるよう様々なUIコンポーネントを揃えられており、カスタマイズしやすいよう設計されています。
オープンソース版と有償版が用意されています。OSS版のライセンスはMITとの事。
Bootstrap5ベースで作られたオープンソースの多目的ダッシュボードテンプレート・「PlainAdmin」
Resources & Tools
- プラグインで拡張も可能、ローカルファーストに設計されたオープンソースのAIチャットUI・「NovaChat」
- Webサイト上のボタンやリンクなど任意の要素へのユーザーの行動を追跡するためのPHP製分析ライブラリ・「Pan」
- 開発者向けに作られたTauriベースのベーシックで使いやすいノートアプリ・「Kompad」
- ReactやNext.jsアプリにシームレスに統合できるシンプルで軽量なオープンソースのダミー画像生成ツール・「PlaceholderJS」
- ミニマルで高速なオープンソースのRSSフィードリーダー・「Feedbomb」
- ファイルをE2E暗号化してからGoogleドライブにアップロード、ファイル管理も可能なOSS・「ZeroDrive」
- 小規模な開発チームのためのオープンソースのプロジェクト管理ツール・「Namviek」
- Tailwindとshadcn/uiでスタイリングされたReact用のUIキットや1000以上のアイコンセットを提供するオープンソースプロジェクト・「Myna」
- TailwindとFramer Motionでスタイリングされたアニメーションエフェクト付きのUIを提供するReactコンポーネント集・「SyntaxUI」
- ストリートビューから場所を特定する、無料で遊べるGeoGuessrのような場所当てゲーム・「Guess Where You Are」
OSS
- プラグインで拡張も可能、ローカルファーストに設計されたオープンソースのAIチャットUI・「NovaChat」
- Webサイト上のボタンやリンクなど任意の要素へのユーザーの行動を追跡するためのPHP製分析ライブラリ・「Pan」
- 開発者向けに作られたTauriベースのベーシックで使いやすいノートアプリ・「Kompad」
- ReactやNext.jsアプリにシームレスに統合できるシンプルで軽量なオープンソースのダミー画像生成ツール・「PlaceholderJS」
- ミニマルで高速なオープンソースのRSSフィードリーダー・「Feedbomb」
- ファイルをE2E暗号化してからGoogleドライブにアップロード、ファイル管理も可能なOSS・「ZeroDrive」
- 小規模な開発チームのためのオープンソースのプロジェクト管理ツール・「Namviek」
- Tailwindとshadcn/uiでスタイリングされたReact用のUIキットや1000以上のアイコンセットを提供するオープンソースプロジェクト・「Myna」
- TailwindとFramer Motionでスタイリングされたアニメーションエフェクト付きのUIを提供するReactコンポーネント集・「SyntaxUI」
- Reactコンポーネントとして提供されている、shadcn/uiと互換性のあるオープンソースのノーコードUIビルダー・「UI Builder for shadcn/ui」
AI
- プラグインで拡張も可能、ローカルファーストに設計されたオープンソースのAIチャットUI・「NovaChat」
- 複数のLLMを切り替えて使えるクロスプラットフォーム対応オープンソースのマルチモデルAIクライアント・「Cherry Studio」
- プライバシーを重視して設計されたオープンソースのAIアシスタント・「Llama Assistant」
- 任意のテキストをAIを使って翻訳、スペル、文法修正、短文化、絵文字追加などが出来るオープンソースのWebアプリ・「Text Snap」
- ブラウザのアドレスバーに入力した内容を任意のAIチャットでプロンプトとして実行できるオープンソースのブラウザ拡張・「AI Chat Shortcut」
- Webと任意のローカルデータを同時に検索して最適な回答を返す、AIモデルの選択も可能なオープンソースのハイブリッドAI検索エンジン・「MemFree」
- 大量のAIツールを収集、カテゴリ分けされており、任意のキーワードで検索できる・「AIナビ」
- オフラインでも実行可能、Webブラウザで動作するオープンソースのAIチャット・「WebLLM Chat」
- Webサイトにおけるユーザーの様々な行動を解析するオープンソースのマイクロインタラクション向けダッシュボード・「OS Analytics」
- 自身のAI Copilotを構築できるオープンソースのローコードRAGビルダー・「Raggenie」
CSS snippet
- Tailwindからインスピレーションを得たスクロールアニメーション
- CSSだけで開閉するツリー
- 実用的でユニークなチェックボックスのまとめ・「Beautiful CSS checkboxes examples」
- CSSのみで昔のフィルム映像みたいなアニメーションノイズ
- CSSのみで白抜きテキスト内に波打つようなアニメーションエフェクト
- どのデバイスでもある程度はレイアウトが綺麗に見える100バイトのCSS
- 夢の中の景色のようなDreamy blurエフェクトをCSSで実装する
- :has()を使って親要素内に存在する子要素を数えるCSSのサンプル
- 非推奨のmarqueeタグのような動作をモダンなCSSで再現
- 文章の任意の行で文字省略を3点リーダーでなくグラデーションで
JavaScript snippet
- 任意のHTML要素を動的に生成する
- Webページに「Mastodonで記事をシェア」ボタンを設置するコード
- スクロールに応じて3Dモデルを回転させる
- localStorageで保存可能の、シンプルなテーマ切り替え
- 目線がマウスの動きを追う的なやつ
- CSS+JavaScriptでローディング時にスケルトンスクリーン
- VanillaなJavaScriptでページ内検索
- VanillaなJSでスクロールに応じて要素をアニメーション
- スクロール追従するページ内ナビゲーション
- jQueryプラグインのLettering.jsをVanillaに変換
WordPress Code
- 画像のURLから、その画像のIDを取得する
- カスタム投稿タイプの記事数をダッシュボードに表示させる
- 非公開や下書きの固定ページを親ページに設定できるようにする
- 一番最新の記事を除いた最新記事のリストを表示する
- 特定の親の固定ページに属する全ての子孫のリストを表示する
- ショートコードで任意の記事ページに関連記事を出す
- 記事内に、前後の記事に付与した任意のカスタムフィールドの値を表示する
- 記事を公開する前に確認アラートを出す
- Youtube動画にマウスホバーでSNSへのシェアボタンを表示させる
- タグクラウド内で現在閲覧中のページに付けられたタグをハイライトする