Инструменты для верстальщика

Проверка по стандартам

• Валидатор вёрстки. Проверяем, валидный ли мы написали HTML.
• Can I use — проверяем, как браузеры прямо сейчас поддерживают разные свойства, теги, API и технологии.
• Can I include — проверяем, можно ли вложить один тег в другой, и если нельзя, то почему. Всё подробно показывают и рассказывают со ссылками на спецификацию.

Проверка вёрстки и стилей

• BrowserStack — показывает, как выглядит вёрстка в разных браузерах.
• Генератор HTML-дерева — в удобном виде показывает структуру разметки и структуру заголовков на странице.
• PerfectPixel — плагин для проверки того, насколько вёрстка близка к макету.
• CSS Peeper — расширение, чтобы быстро промониторить стили, картинки, и снять размеры без открытия инструментов разработчика.

Работа с кодом

• JavaScript Event KeyCodes — получаем KeyCode любой нажатой клавиши, пригодится в приложениях, которые обрабатывают ввод с клавиатуры.
• Regex 101 — библиотека регулярных выражений, проверка регулярных выражений, всё что угодно для регулярных выражений.

Кое-что ещё

• Online Color Picker — просто удобная выбиралка цветов прямо в браузере. Показывает всю основную информацию, можно забить, например, RGB, а потом забрать HEX и посмотреть совместимые цвета.

Работа с текстом

Эти инструменты помогут чуть ускорить вёрстку, если вы, например, работаете в редакции, пишете в гуглдоках и хотите сразу получать нормальный HTML или markdown для вставки на сайт.

• Типограф, ещё один типограф и другой типограф — все три помогают получить текст с правильными кавычками, неразрывными пробелами и другими типографическими элементами.
• Хабраконвертер — превращает гугл-документ с картинками в HTML.
• Docs to Markdown — ещё один конвертер гугл-доков, на этот раз в Markdown. Устанавливается как расширение прямо в гугл-документы, выдаёт вполне сносный маркдаун.
• md2html — хороший конвертер и онлайн-редактор заодно. Отдаём на вход markdown, получаем HTML. Быстро, без мусора. Пользуемся в редакции сами, нарадоваться не можем.