コーディング時によく使うツール一覧

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

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

autoprefixer

Autoprefixer online — add the desired vendor prefixes and re…

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

W3C's easy-to-use markup validation service, based on …

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

tinypng

Make your website faster and save bandwidth. TinyPNG optimiz…

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

eslint

ESLint - Pluggable JavaScript linter

A pluggable and configurable linter tool for identifying and…

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

Unused CSS

jitbit.com

This tool recursively crawls your website and finds unused C…

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


Fatal error: Uncaught Error: Call to undefined function set_post_views() in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php:658 Stack trace: #0 /home/jszk/desnote.com/public_html/wpjs/wp-includes/template-loader.php(78): include() #1 /home/jszk/desnote.com/public_html/wpjs/wp-blog-header.php(19): require_once('/home/jszk/desn...') #2 /home/jszk/desnote.com/public_html/index.php(17): require('/home/jszk/desn...') #3 {main} thrown in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php on line 658