Three.jsを使ってマネキンに任意のポーズで表現できるスクリプト・「mannequin.js」
mannequin.js See the Pen rNMLqKv by kachibito (@kachibito) on CodePen. mannequin.jsはThree.jsを使って3Dマネキンに任意のポーズ...
Resource - フロントエンドエンジニア向け
CSS-Tricksによるコーディングに最適なフォントのまとめ・「Coding Fonts 」
Coding Fonts Coding FontsはCSS-Tricksによるコーディングに最適なフォントのまとめサイトです。 先日ご紹介したDev Fontsと異なり、肝心のコードは確認出来るものの、画像となっていて実際に打...
プログラミング向けの様々なフォントを、実際にコードを書いて試せる・「Dev Fonts」
Dev Fonts Dev Fontsはプログラミング向けの様々なフォントを、実際にコードを書いて試せるWebアプリです。 実際に書かれているコードは編集可能となっており、他にもテーマや言語の種類も変えられるようになっています。...
Notionのようなスラッシュコマンドが使えるOSSなノートアプリ・「Notion Clone」
Notion Clone Notion CloneはNotionのようなスラッシュコマンドが使えるOSSなノートアプリです。Next.jsが採用されています。 ブロックレベルのエディタでHTMLやNotionライクなスラッシュコ...
多数のコンポーネントも用意されたFlexboxベースのモダンなCSSフレームワーク・「OrbitCSS」
OrbitCSS See the Pen eYzLLbZ by kachibito (@kachibito) on CodePen. OrbitCSSは多数のコンポーネントも用意されたFlexboxベースのモダ...
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は任意の要素をドラッグ移動の操作が出来るようにする軽量ス...
マウスホバーで任意の要素のCSSをその場で調査、コードをCodepenに送ったりコピーできるブラウザ拡張・「CSS Spider」
CSS Spider CSS Spiderはマウスホバーで任意の要素のCSSをその場で調査、コードをCodepenに送ったりコピーできるブラウザ拡張です。 起動するとマウスホバーで要素のCSSを自動解析し、その場にclassやI...
Notionにインスパイアされたオープンソースのカンバンボード付きノートアプリ・「Notence」
Notence NotenceはNotionにインスパイアされたオープンソースのカンバンボード付きノートアプリです。 Markdownで書けるノート機能と、Todoリストやプロジェクト管理が出来るカンバンボードが備えられており、...
タッチデバイスフレンドリーなブロックレベルのコンテンツエディターライブラリ・「SmartBlock」
SmartBlock See the Pen SmartBlock Demo by kachibito (@kachibito) on CodePen. SmartBlockはッチデバイスフレンドリーなブロックレベ...
Moment.jsライクに使える2KBほどの軽量な日付操作ライブラリ・「Day.js」
Day.js Day.jsはMoment.jsライクに使える2KBほどの軽量な日付操作ライブラリです。Moment.jsとほぼ同じ使い方で同じように操作する事が出来ます。 他ライブラリにも依存せず、Moment.jsを使って...
ログインもメールアドレス等も不要で使えるオープンソースのセキュアなチャットツール・「chatsecure.online」
chatsecure.online chatsecure.onlineはユーザー登録やログイン、メールアドレス等も不要で使えるオープンソースのセキュアなチャットツールです。 チャットを開始すると特定の番号が割り当てられるのでその...
アクセシビリティに関するツールやリソースなどをカテゴリに分けて大量にまとめている・「a11yresources」
a11yresources a11yresourcesはアクセシビリティに関するツールやリソースなどをカテゴリに分けて大量にまとめているキュレーションサイトです。 書籍やブログ、記事などの情報やブラウザ拡張、ブックマークレットな...
Webサイトに映画のようなスタッフロールを追加できるスクリプト・「QreditRoll」
QreditRoll QreditRollはWebサイトに映画のようなスタッフロールを追加できるスクリプトです。 ボタンのクリックで自動スクロールするスタッフロールが開始される、というものですが、コナミコマンド(上上下下左右左右...
Vue.jsとBulma.cssで構築されたTrelloライクなオープンソースのカンバンツール・「Vue Trello Clone」
Vue Trello Clone Vue.jsとBulma.cssで構築されたTrelloライクなオープンソースのカンバンツールです。ネーミングそのまんまですが、Trelloと同機能を提供する訳ではなく、シンプルなカンバンアプリといっ...
未来SFっぽいUIを構築できるWebアプリ向けのUIフレームワーク・「Arwes」
Arwes Arwesは未来SFっぽいUIを構築できるWebアプリ向けのUIフレームワークです。React.jsベースとなっています。 サイバーパンクのようなものをイメージして作ったみたいです。Webアプリケーション等に使える独...
オープンソースのCalendly代替・「What Time Today?」
What Time Today? What Time Today?はオープンソースとしてソースコードが公開されているスケジュール管理ツールです。Calendly代替として開発されたそうです。 vimcalやAvailableとい...
全てオープンソースで公開されている、Web制作に使えるシンプルなツール集・「Omatsuri」
Omatsuri OmatsuriはWeb制作に使えるシンプルなツールのコレクションです。基本的にフロントエンド開発向けがメインだそうです。1つ1つはシンプルなツールですが、全てがPWA対応且つオープンソースとしてソースコードも公開さ...
会話しながらコード共有やペアプログラミングが出来る開発者向けのコードエディタ付きビデオ会議ツール・「GitDuck」
GitDuck GitDuckは会話しながらコード共有やペアプログラミングが出来る開発者向けのエディター付きビデオ会議ツールです。 オンラインビデオチャットにペアプログラミングが可能なコードエディタが付与してる、みたいなやつ。ブ...
任意のテキストを自動で3D化するスクリプト・「ztext.js」
ztext.js See the Pen ztext.js test by kachibito (@kachibito) on CodePen. ztext.jsは任意のテキストを自動で3D化するスクリプトです。上デモ...
プライバシーに配慮したシンプルで使いやすいオープンソースのGoogleアナリティクス代替アクセス解析ツール・「Plausible」
Plausible Plausibleはプライバシーに配慮したシンプルで使いやすいオープンソースのGoogleアナリティクス代替アクセス解析ツールです。 通常のアクセス解析ツールとしてサービス展開していますが、OSSとしてもソー...
チーム向けのワークスペースを提供するシンプルなプロジェクト管理ツール・「Undesk」
Undesk Undeskはチーム向けのワークスペースを提供するシンプルなプロジェクト管理ツールです。 チーム向けとあって、チャットツール、タスク管理、ファイル管理などが可能で共有できる他、伝言やメモ、アイデアの共有などに使える...