プライバシーを保護しながらYoutube動画を視聴できるOSS・「Piped」

Piped Pipedはプライバシーを保護しながらYoutube動画を視聴できるオープンソースのソフトウェアです。 Youtubeは視聴者のアイデアや音楽の好み、嗜好コンテンツ、政治的思想など、視聴者が知りえぬ内に思っている以上...

Kachibito.net is a website to writing tutorials and code snippets for Web Developers, the main subjects are WordPress, javascript, CSS, OSS, tools and resources.

Links

Resources & Tools

モダンでパワフル且つ直感的な操作が可能なオープンソースのTauri製データベース管理ツール・「QoreDB」
ブラウザでReact Nativeを実行できるオープンソースのReact Nativeアプリ向け開発環境・「reactnative.run」
直感的に使えてシンプルで見やすいオープンソースのLinear向けタイムライン視覚化ツール・「GanttSmart」
ブラウザベースで使えるオープンソースの高速P2Pファイル共有Webアプリ・「FileSpread」
5000以上の様々なブランドのロゴをSVGで公開、各フレームワークもサポートしたブランドロゴ検索アプリ・「theSVG」
Moodleの代替として開発されたオープンソースの学習支援アプリ・「EaseLMS」
cookie等も不要でGDPR準拠、AI機能も搭載したオープンソースのWeb分析アプリ・「Ninelytics」
AndroidアプリでローカルAIの実行をサポートするオープンソースのFlutterプラグイン・「1nm」
チーム向けのオープンソースのマルチプロジェクト翻訳管理ツール・「Transi-store」
様々なファイル形式の画像や動画のファイルサイズを縮小できるオープンソースのCLI・「Optimo」

OSS

モダンでパワフル且つ直感的な操作が可能なオープンソースのTauri製データベース管理ツール・「QoreDB」
ブラウザでReact Nativeを実行できるオープンソースのReact Nativeアプリ向け開発環境・「reactnative.run」
直感的に使えてシンプルで見やすいオープンソースのLinear向けタイムライン視覚化ツール・「GanttSmart」
ブラウザベースで使えるオープンソースの高速P2Pファイル共有Webアプリ・「FileSpread」
Moodleの代替として開発されたオープンソースの学習支援アプリ・「EaseLMS」
cookie等も不要でGDPR準拠、AI機能も搭載したオープンソースのWeb分析アプリ・「Ninelytics」
AndroidアプリでローカルAIの実行をサポートするオープンソースのFlutterプラグイン・「1nm」
チーム向けのオープンソースのマルチプロジェクト翻訳管理ツール・「Transi-store」
様々なファイル形式の画像や動画のファイルサイズを縮小できるオープンソースのCLI・「Optimo」
あらゆる学習教材をAIでゲーミフィケーション化するオープンソースの学習ツール・「EdGameClaw」

AI

モダンでパワフル且つ直感的な操作が可能なオープンソースのTauri製データベース管理ツール・「QoreDB」
cookie等も不要でGDPR準拠、AI機能も搭載したオープンソースのWeb分析アプリ・「Ninelytics」
AndroidアプリでローカルAIの実行をサポートするオープンソースのFlutterプラグイン・「1nm」
チーム向けのオープンソースのマルチプロジェクト翻訳管理ツール・「Transi-store」
あらゆる学習教材をAIでゲーミフィケーション化するオープンソースの学習ツール・「EdGameClaw」
Datadog代替として開発された、高速且つスケーラブルでAIネイティブなオープンソースの可観測性プラットフォーム・「OpenObserve」
Markdown及びMDXからドキュメントWebサイトを生成できるAIもサポートしたオープンソースのCLI・「Doccupine」
システムトレイに常駐し、AI Second Brainとして機能する軽量なLLMエージェントのOSSデスクトップアプリ・「Lore」
AIによる類似カラーの提案機能も付いたオープンソースのWCAG準拠チェックが可能なWebカラーツール・「Smart Color Contrast Assistant」
Claude CodeやCursorの代替として開発された、自由にAIプロバイダーを選択可能且つオフラインファーストなオープンソースのAIコーディングエージェント・「EuroCoder」

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へのシェアボタンを表示させる
タグクラウド内で現在閲覧中のページに付けられたタグをハイライトする

Projects Links Author

Kachibito.net is a website to writing tutorials and code snippets for Web Developers, the main subjects are WordPress, javascript, CSS, OSS, tools and resources.