UNeed
UNeedはフロントエンド開発者向けのツールやリソースを大量にまとめたキュレーションサイトです
CMSやCSS、デザインやアプリケーションからバージョン管理やターミナル、テスト関連、学習ツールなどのカテゴリに分けられ、それぞれに様々な情報が集められています
自作ツールなども募集されているので目に留まれば掲載されるかもしれませんね。時間のある時に覗いてみては如何でしょうか
フロントエンド開発者向けのツールやリソースを大量にまとめた・「UNeed」
Resources & Tools
- ブラウザのタスクをノーコード/ローコードで自動化できるオープンソースのブラウザ拡張・「Automa」
- Webページ内の任意の要素のCSSの調査と編集機能を使いやすいUIで提供するオープンソースのブラウザ拡張・「Inspect CSS」
- 簡単に使える軽量且つシンプルなHTMLテンプレートエンジン・「mizu.js」
- 作業の際のBGM用に開発されたカスタマイズ可能なオープンソースのlofi音楽プレーヤー・「NextBeats」
- Loom代替として開発された軽量シンプル且つパワフルなオープンソースのスクリーンリーダーアプリ・「Cap」
- 任意のモデルとのAIチャットによる会話内容をインタラクティブなタイムラインに視覚化するOSS・「Forking Paths」
- shadcn/uiにインスパイアされたArk UIベースのコピペで使えるReactコンポーネント集・「Djamla」
- 各JavaScriptフレームワークをサポート、人気のアイコンセットの総計20万アイコンから選んでカスタマイズできるオープンソースのアイコンライブラリ・「Monicon」
- レトロにスタイリングされたWebアプリ用のTailwindコンポーネントライブラリ・「Retro UI」
- プロンプトからExcel数式を生成するオープンソースの生成AIベースのExcel数式ジェネレーター・「Excel Formula GPT」
OSS
- ブラウザのタスクをノーコード/ローコードで自動化できるオープンソースのブラウザ拡張・「Automa」
- Webページ内の任意の要素のCSSの調査と編集機能を使いやすいUIで提供するオープンソースのブラウザ拡張・「Inspect CSS」
- 簡単に使える軽量且つシンプルなHTMLテンプレートエンジン・「mizu.js」
- 作業の際のBGM用に開発されたカスタマイズ可能なオープンソースのlofi音楽プレーヤー・「NextBeats」
- Loom代替として開発された軽量シンプル且つパワフルなオープンソースのスクリーンリーダーアプリ・「Cap」
- 任意のモデルとのAIチャットによる会話内容をインタラクティブなタイムラインに視覚化するOSS・「Forking Paths」
- shadcn/uiにインスパイアされたArk UIベースのコピペで使えるReactコンポーネント集・「Djamla」
- 各JavaScriptフレームワークをサポート、人気のアイコンセットの総計20万アイコンから選んでカスタマイズできるオープンソースのアイコンライブラリ・「Monicon」
- レトロにスタイリングされたWebアプリ用のTailwindコンポーネントライブラリ・「Retro UI」
- プロンプトからExcel数式を生成するオープンソースの生成AIベースのExcel数式ジェネレーター・「Excel Formula GPT」
AI
- 任意のモデルとのAIチャットによる会話内容をインタラクティブなタイムラインに視覚化するOSS・「Forking Paths」
- ブラウザでの複雑なタスクを実行できるオープンソースのAIエージェント作成プラットフォーム・「julep」
- Pol.isを活用した議論の場を提供できるオープンソースの公開ディスカッションプラットフォーム・「Society Speaks」
- AIワークフローをフローチャートでビジュアライズ及びテストできるオープンソースのノーコードアプリ・「LLM Flow」
- 好みのAIモデルを選択可能なプライバシー重視のVS Code向け生成AIコーディングアシスタント・「Flexpilot」
- 任意のキーワードを入力するとWikipedia風の情報をAIで生成してくれる・「Knowpedia」
- 任意のWebサイトやYoutubeの内容をAIが要約し、マインドマップやタイムライン、表などで視覚化してくれるブラウザ拡張・「MyLensAI」
- タブの自動グループ化や履歴、ブックマーク、タブの一元管理やAIチャット等も可能なオープンソースのAIブラウザ拡張・「AIpex」
- プラグインで拡張も可能、ローカルファーストに設計されたオープンソースのAIチャットUI・「NovaChat」
- 複数のLLMを切り替えて使えるクロスプラットフォーム対応オープンソースのマルチモデルAIクライアント・「Cherry Studio」
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へのシェアボタンを表示させる
- タグクラウド内で現在閲覧中のページに付けられたタグをハイライトする