Resource - フロントエンドエンジニア向け

レスポンシブ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は会議やイベント等で参加者からのフィードバック収集をサポートするオープンソースのソフトウェアです 任意の選択肢を用意して選択して貰う投票型みたいです。投票すると円状のオブジェ...
Ads

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などのチュートリアル動...

30以上のプラグインでカスタマイズ可能なオープンソースのJavaScriptアップローダー・「Uppload」

Uppload Upploadは30以上のプラグインが用意された拡張的なOSSのJS製アップローダーです。※誤字ではなくUpploadが正式な名前みたいです 単にローカルからファイルをアップロードするだけでなく、SNSや画像投稿...

ソートや検索、ページネーション等、基本的な機能を備えた非依存のデータテーブルライブラリ・「Vanilla-DataTables」

Vanilla-DataTables See the Pen Vanilla DataTables by Karl Saunders (@Mobius1) on CodePen. Vanilla-DataTable...

Chakra UIのコンポーネントを使ったオープンソースのビジュアルエディタ・「OpenChakra」

OpenChakra OpenChakraはChakra UIのコンポーネントを使ったオープンソースのビジュアルエディタです Chakra UIはReactベースのコンポーネントライブラリで、このコンポーネントを使ったエディタを...

非依存でシンプルなダイアグラム作成JavaScriptライブラリ・「DiagramFlowJS」

DiagramFlowJS DiagramFlowJSは非依存でシンプルなダイアグラム作成JavaScriptライブラリです 他ライブラリを使わず単体で動作、上サンプルのようなD&Dで動かせるダイアグラムを作成出来ます ...

チャットルームを作成して友人と競いながらコーディングを学べる・「binarysearch.io」

binarysearch.io binarysearch.ioはチャットルームを作成して友人と競いながらコーディングを学べるWebアプリです ルームを作成すると問題がすでに出題されていますので招待した友人とチャットを交えて競い合...

JavaScriptライブラリやフレームワークを使わずHTML5、CSS、バニラなJSだけで作られたプロジェクト集・「Web Projects With Vanilla JavaScript 」

Web Projects With Vanilla JavaScript Web Projects With Vanilla JavaScriptはフレームワークやライブラリ等を使わずに純粋なHTML5+CSS+VannilaなJSで...

Electronで出来たオープンソースの開発者向けエディタ機能付きコードスニペット管理ツール・「massCode」

massCode massCodeはElectron製のOSSな開発者向けコードスニペット管理ツールです。Monaco Editorが採用されており、スニペット管理ツールとコードエディタを兼用する事ができます スニペットは様々な...

Webサイト開発の際にあると地味に便利なミニツールをまとめている・「Tiny helpers」

Tiny helpers Tiny helpersはWebサイトやアプリ開発の際にあると地味に便利なミニツールを集めているWebサイトです 1つのツールにつき1つの目的のために作られたミニツールをカテゴライズしている、みたいなも...

オープンソースで公開されているブラウザベースのシンプルなメモ用ピンボードアプリ・「manifest」

manifest manifestはオープンソースで公開されているブラウザベースのシンプルなメモ用ピンボードアプです グリッドがあるので綺麗にそろえられる、自動保存、メモをドラッグで移動、PWAになっているくらいしか機能はありま...
Ads