こんにちは、@desnote_blogです。

私がコーディング時によく使うツールを紹介します。

もし「こんなツールもあってよく使っているよ。」というのがあれば教えてください!

autoprefixer

nodeでautoprefixerを使っていたが、node.jsを使わないケースでこれを使いたいと感じて探したらツールも提供していた。
指定したバージョンに対応したCSSを出力してくれる便利ツール。
サポートしているブラウザやOSの設定値を入れるだけでブラウザ崩れを最小限にできる。

Placehold.jp

プロトタイプ作成時に、一旦ダミーのURLを設定したい時に利用。
https://placehold.jp/150×150.png
と設定すると、150×150の画像が出力されるので便利。

Can I use

言わずとも知れたツール。
cssやjavascriptの構文がどのブラウザ、OSのバージョンまで対応されているかを確認できるツール。
自分が作成したコードに対して、怪しいと思ったらまず確認する。
通常使わないコードを利用した時もチェック

W3C Markup Validation Service

HTMLのタグチェックツール。
ページを作成したら絶対これを通してから納品する。

tinypng

 tinypng.com
404 Not Found
https://tinypng.com/¥

画像圧縮ツール。
圧縮してもあまり画像が粗くならない印象。
画質を超細かく気にするケースでなければ、まずここに入れると軽量化できる。

eslint

javascriptの構文チェックツール。
eslintをGUIでチェックできる。
nodeなど使っていないケースではここを通すと良い。
余計なエラーも出るのでそこは無視する。

Unused CSS

サイトURLを指定すると、使われていないCSSを抽出してくれる。
ただ、実際はこのページだけのために使っているCSSファイルな訳ないので、使えるケースは多くない。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)