実務で使うツール・情報収集しているものについて紹介
実務で使っているツールや普段の情報収集で使っているものになります。
基本個人のメモ用でフロントエンドエンジニア向けです。
実務で使っているツール
SassMeister
オンライン上でsassからcssの変換ができるツール。
基本css-modulesを使用しているため、プロジェクトでのビルドとしては使用していませんが、以下のような&を記載した際のcssでの挙動やその他どのようなsassで記載する際にどのようにcssが表示されるかの検証として使用しています。
placehold.jp
ダミー画像を生成してくれるツール。
https://placehold.jp/150x150.pngのように記載してくれるとサイズが表示された画像を表示してくれます。
caninclude
親要素、子要素に入れる要素を入力するとその要素がHTMLセマンティックとして問題ないか検証してくれるツール。
ちなみに以下のようなマークアップの場合、ちゃんと警告も出してくれます。
<p> <div></div> <p>
runjs
JavaScriptで記載した内容を検証してくれるツール。
Node.jsでの検証やブラウザのdevtoolを使うほどではないけど、変数の中身がどのようになっているのかを検証したい時に役に立ちます。
screensizes
iPhone, iPadの画面サイズの一覧を表示してくれるサイト。
普段のWeb制作時にiPhoneの画面サイズを一覧形式で見ることができるので、各種デバイスの違い等もわかりやすいです。また、スクリーンの倍率や発売された時の倍率も教えてくれるため、iPhoneの情報を調べるのにも役に立ちます。
各種整形ツール
各種出力されたデータを整形や変換をする際にはこちらのツールを使用しています。
情報収集しているもの
ギャラリーサイト
日常的に見るギャラリーサイトはこの4つを見ています。
