CSSやJavScript等の便利なコードスニペットを収集している・「DevSamples」
DevSamples DevSamplesはCSSやJavScript等の便利なコードスニペットを収集しているWebサイトです。 CSSやJS、Node、Git、ReactやSvelte、HTMLなど開発時にたびたびググりがちな...
Resource - JavaScript
ヘッダに良く使われるアニメーションする背景を簡単に作れる・「Free Animated Headers」
Free Animated Headers See the Pen MWbjqPO by kachibito (@kachibito) on CodePen. Free Animated Headersはヘッダに良く使...
セキュアでシンプルなオープンソースのパスワードジェネレーター・「passwrd.in」
passwrd.in passwrd.inはセキュアでシンプルなオープンソースのパスワードジェネレーターです。Vueで書かれており、サーバーには一切データは送信されず、ブラウザのみで処理されます。 パスワードは数字や記号を含めた...
タッチデバイスにも対応した、要素を複数選択できるようにするスクリプト・「Selecto.js」
Selecto.js Selecto.jsタッチデバイスにも対応した、要素を複数選択できるようにするスクリプトです。マウスによるドラッグだけでなくスマフォ等のタッチデバイスにも対応しています。 他ライブラリに依存せずVanill...
Socket.io、React.js、Tailwind等で作られたシンプルなオープンソースのチャットアプリ・「Chat-app」
Chat-app Chat-appはSocket.io、React.js、Tailwind等で作られたシンプルなオープンソースのチャットアプリです。 チャットアプリと言えばSocket.ioですが、こちらの開発者はSocket....
ドラッグ&ドロップでHTMLメールを作れるオープンソースのHTMLメールエディタ・「Unlayer email-editor」
Unlayer email-editor Unlayer email-editorはドラッグ&ドロップでHTMLメールを作れるオープンソースのHTMLメールエディタです。Vue.js、Angular.js、React.js向けがそれぞ...
任意のWebサイトのJavaScriptの構文をチェックし、最新の構文に書き換えた場合のサイズやパフォーマンスなどを計算してくれるOSSのチェックツール・「ES timator」
EStimator EStimatorは任意のWebサイトのJavaScriptの構文をチェックし、最新の構文に書き換えた場合のサイズやパフォーマンスなどを計算してくれるOSSの構文チェックツールです。GoogleChromeの開発チ...
学習コストをなるべくかけずに習得できるよう設計された、沢山のコンポーネントやユーティリティを含むCSS Gridベースのフロントエンドフレームワーク・「Axentix」
Axentix See the Pen XWjPbpG by kachibito (@kachibito) on CodePen. Axentixは学習コストをなるべくかけずに習得できるよう設計された、沢山のコンポーネ...
オーディオ素材をできるオープンソースのデスクトップアプリ・「Samplescope」
Samplescope Samplescopeはオーディオ素材をできるオープンソースのデスクトップアプリです。WindowsとMacに対応しています。 シンプルなUIで効率的に探せるのが特徴だそう。というもの、基本的にはfree...
オープンソースで提供されている自己ホスト型のチャット機能付きライブストリーミングツール・「Owncast」
Owncast Owncastはオープンソースで提供されている自己ホスト型のチャット機能付きライブストリーミングツールです。 Zoom等のビデオ会議ではなく、Youtubeやニコニコ、Twitch(Amazon)、Faceboo...
ブラウザのタブでHTML/CSS/JavaScriptを書いて実行できる拡張機能・「HTML New Tab」
HTML New Tab HTML New TabはブラウザのタブでHTML/CSS/JavaScriptを書いて実行できるChromeの拡張機能です。 jsfidleやCodepenのようなものですが、他ライブラリを読み込んだ...
軽量で拡張的な非依存のカルーセルライブラリ・「Tiny-Swiper」
Tiny-Swiper See the Pen VwKWMym by kachibito (@kachibito) on CodePen. Tiny-Swiperは軽量で拡張的な非依存のカルーセルライブラリです。他ライ...
カスタマイズ性の高い非依存のレスポンシブなグリッドレイアウトフレームワーク・「EasyGrid」
EasyGrid EasyGridはカスタマイズ性の高い非依存のレスポンシブなグリッドレイアウトフレームワークです。 依存性の無い軽量なJavaScrioptとCSSで様々なRWDのグリッドレイアウトを構築出来るようになっていま...
CSSのclip-pathを簡単な操作で生成できるオンラインツール・「CSS clip-path Editor」
CSS clip-path Editor See the Pen CSS clip-path Editor by Mads Stoumann (@stoumann) on CodePen. CSS clip-pat...
ブラウザでMarkdownでスライドを作成して公開できるJavaScipt製のOSS・「PRESENTA Lib」
PRESENTA Lib PRESENTA LibはブラウザでMarkdownでスライドを作成して公開できるJavaScipt製のOSSです。 1枚のファイルで作成可能で書き方もシンプルで使いやすそうです。また、Markdown...
Three.jsを使ってマネキンに任意のポーズで表現できるスクリプト・「mannequin.js」
mannequin.js See the Pen rNMLqKv by kachibito (@kachibito) on CodePen. mannequin.jsはThree.jsを使って3Dマネキンに任意のポーズ...
プライバシーファーストなオープンソースのナレッジベース・「Logseq」
Logseq Logseqはプライバシーファーストなオープンソースのナレッジベースです。個人情報を重視したナレッジ管理共有ツールだそう。 Roam Research、Org Mode、Tiddlywiki、Workflowyなど...
Notionのようなスラッシュコマンドが使えるOSSなノートアプリ・「Notion Clone」
Notion Clone Notion CloneはNotionのようなスラッシュコマンドが使えるOSSなノートアプリです。Next.jsが採用されています。 ブロックレベルのエディタでHTMLやNotionライクなスラッシュコ...
任意の写真から複数の色を抽出してカラーコードをコピーしたり、まとめてJSONでエクスポート可能なOSS・「Color Pick.」
Color Pick. Color Pick.は任意の写真から複数の色を抽出してカラーコードをコピーしたり、まとめてJSONでエクスポート可能なカラーピッカーWebアプリです。 任意の写真を読み込むと表示され、写真の好きな場所か...
Reactベースのシンプルでタッチフレンドリーな日付ピッカー・「React Nice Dates」
React Nice Dates React Nice DatesはReactベースのシンプルでタッチフレンドリーな日付ピッカーです。 タッチデバイスで指でタップしやすいように日付同士は間隔をあけられていたり、上下にドラッグする...
任意の要素をドラッグ移動出来るようにする軽量スクリプト・「dragmove.js」
dragmove.js See the Pen WNxjgOe by kachibito (@kachibito) on CodePen. dragmove.jsは任意の要素をドラッグ移動の操作が出来るようにする軽量ス...
RoughJSを使ったラフなタッチのFontAwesome・「Rough Awesome Font」
Rough Awesome Font Rough Awesome FontはRoughJSを使ったラフなタッチのFontAwesomeアイコン集です。RoughJSを使ってFontAwesomeの無償版のアイコンをラフ絵に変換したSV...