WebサイトやWebアプリのデザインや開発に役立つツールやリソースを探せる・「Webdesign Toolbox」
Webdesign Toolbox Webdesign ToolboxはWebサイトやWebアプリのデザインや開発に役立つツールやリソースを探せるキュレーションサイトです。 フォーラムや各デザインツール、開発ツール、メディアスト...
Resource - フロントエンドエンジニア向け
生産性や効率の向上に貢献してくれそうなツールやアプリケーションを収集している・「theo.tools」
theo.tools theo.toolsは生産性や効率の向上に貢献してくれそうなツールやアプリケーションを収集しているキュレーションサイトです。 700以上のツールやアプリケーションが集められてて、業種や目的でソート出来るよう...
匿名で任意のファイルを共有できるOSSなWebアプリ・「beam.cafe」
beam.cafe beam.cafeは匿名で任意のファイルを共有できるOSSなWebアプリです。ログインやユーザー登録などは双方とも不要で共有用のURLを伝えるだけで利用可能です。 ファイルはサーバー上に保存されるのではなく、...
ブラウザで動作するオープンソースのテキストエディタ・「Writty」
Writty Writtyはブラウザで動作するオープンソースのテキストエディタです。HTML/JavaScript/CSSで作られています ライティングに集中できるよう、ミニマルなUIでツールバーも最小限に、且つサイドに寄せられ...
フォルダの構造をビジュアル化してくれるクロスプラットフォームのファイルマネージャ・「cryo」
cryo cryoはフォルダの構造をビジュアル化してくれるクロスプラットフォームのファイルマネージャです。Windows、Linux、MacOSなどで動作します 左ペインから任意のフォルダを右ペインにD&Dすれば自動でビジュアル...
デザインが苦手な開発者向けのツール等をまとめている・「Nodesign.dev」
Nodesign.dev Nodesign.devはデザインが苦手な開発者向けのツール等をまとめているキュレーションサイトです ノンデザイナーズ・デザインブックなどのように基礎を学ぼう、みたいなものではなく、ツールに任せようとい...
シンプルで扱いやすいHTMLテーブルライブラリ・「Grid.js」
Grid.js Grid.jsはシンプルで扱いやすいHTMLテーブルライブラリです。ReactやAngular、Vueなどは勿論、バニラでも問題なく動作します 9kbと非常に軽量で使い方もすごく簡単です。データを元に自動で指...
軽量さ重視の、markdownで書けるミニマルなオープンソースのブログシステム・「Bear blog」
Bear blog Bear blogは軽量さ重視の、markdownで書けるミニマルなオープンソースのブログシステムです 多くの人気ブログプラットフォームは需要が伸びるにつれユーザーのニーズに応え、結果的に肥大化してしまってい...
SVGのパスデータを可視化するシンプルなWebアプリ・「SVG Path Visualizer」
SVG Path Visualizer SVG Path VisualizerはSVGのパスデータを可視化するWebアプリです パスを定義するd属性を入力すると、それぞれのパラメーターが何をどのように描いているかを可視化、解説し...
レスポンシブWebデザイン対応のWebサイト開発に特化したオープンソースのWebブラウザ・「Responsively」
Responsively ResponsivelyはRWDの開発に特化したWebブラウザです。オープンソースとしてソースコードも公開されています 各スマホのデバイスやタブレット、PCなど異なるデバイスでどのように表示され...
任意のWebページのソースコードをダークモードで表示、コード整形も可能なブラウザ拡張・「Night Viewer」
Night Viewer Night Viewerは任意のWebページのソースコードダークモードで表示、コード整形やフォントサイズの変更も可能なブラウザエクステンションです また、JavaScript等によるHTMLの変更の前後...
会議やイベント等で参加者からのフィードバック収集をサポートするオープンソースのソフトウェア・「Open Feedback」
Open Feedback Open Feedbackは会議やイベント等で参加者からのフィードバック収集をサポートするオープンソースのソフトウェアです 任意の選択肢を用意して選択して貰う投票型みたいです。投票すると円状のオブジェ...
Webページで任意の要素のCSSを調査、スタイルをその場で変更、複数保存、ライブプレビューが可能なブラウザ拡張・「StyleStash」
StyleStash StyleStashはWebページで任意の要素のCSSを調査、スタイルをその場で変更、複数保存、ライブプレビューが可能なChromeエクステンションです 任意の要素ピンポイントでDevtoolsのインスペク...
Webページで音声による操作を可能にするボイスコマンドライブラリ・「Artyom.js」
Artyom.js Artyom.jsはWebページで音声による操作を可能にするボイスコマンドライブラリです Google NowやSiri、Cortanaなどの音声アシスタントの簡易版みたいなやつです 例えば挨拶したら返...
HTMLの属性にディレクティブを指定してリアクティブな動作を実装できるJavaScriptフレームワーク・「Alpine.js」
Alpine.js See the Pen To Do List - Alpine.js by kachibito (@kachibito) on CodePen. Alpine.jsはHTMLの属性にディレクティブを...
1行のコードで使えるJavaScriptユーティリティのまとめ・「1loc」
1loc 1locは1行のコードで使えるJavaScriptユーティリティをまとめているプロジェクトサイトです。名前は1行のLOC (line of code)という意味のようです スニペットのまとめページ、みたいなもの。配列や...
任意のWebサイトのスクリーンショットを取得するOSS・「Webshot」
Webshot Webshot任意のWebサイトのスクリーンショットを取得するWebアプリです ドメイン+対象URL+パラメーターだけで取得できるシンプルな仕様となっています。パラメーターはいろいろ用意されてました ...
開発者向けの様々なチェックリストを公開している・「Checklist」
Checklist Checklistは開発者向けの様々なチェックリストを公開しているプロジェクトサイトです どこかで公開されているチェックリストを引っ張ってきているのではなく、こちらを公開しているAtölye15が社内で共有し...
CSSをJavaScript用に変換するシンプルなコンバーター・「CSS2JS」
CSS2JS CSS2JSはCSSをJavaScript用のコードに変換するシンプルなコンバーターです 特に解説不要のアプリなのでサンプルを使って簡単に。例えば以下のCSSを 以下のように変換します ...
GitHubの50万以上の公開リポジトリから正規表現でコードを高速検索できるWebアプリ・「grep.app」
grep.app grep.appはGitHubのリポジトリから任意のキーワードだけでなく、正規表現でもコードを高速検索できるWebアプリです アプリ名のとおりgrepをかけられてインクリメンタルサーチしてくれるので手早...
Reactで書かれたオープンソースのWYSIWYGインラインエディター・「Edtr.io」
Edtr.io Edtr.ioはReactで書かれたオープンソースのWYSIWYGインラインエディターです mediumで採用されたエディターのようにコンテンツに直接編集を加えるタイプで、ブロックの追加やD&Dによる移動、複製な...
コードを書いたエディターのスクリーンショットをアップロードすると、似たようなカラーテーマを探してくれる・「What’s That Theme」
What's That Theme What's That Themeはコードを書いたエディターのスクリーンショットをアップロードすると、似たようなカラーテーマを探してくれるWebアプリです Youtubeなどのチュートリアル動...