Памятка полезных сервисов для разработки сайтов

Дневник разработчика

Перечень сервисов и инструментов, которые я часто использую при разработке сайтов, написании статей, а так же для ведения проектов. Список постоянно обновляется и дорабатывается.

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

  • Главред — доработка информационных текстов. Избавляемся от воды.
  • Типограф Артемия — делаем текст красивым. С кавычками-ёлочками, блекджеком и шлюхами (опционально).
  • Проверка текстов на уникальность №1, №2, №3
  • Более серьёзная проверка текста на уникальность — тут.

Вёрстка сайтов

Базовые штуки

  • W3C — Валидатор html-разметки. Без него никуда.
  • CSS-линтер — тут и так ясно, Кэп 😉
  • Стили по умолчанию: порой мне дают вёрстку и её нужно натянуть на CMS, но ленивый верстальщик переопределил стили для всех списков, абзацев и заголовков. Возникает проблема -как быть со стилями для статей в блоге? Там то нужны стандартные стили. Здесь мне на помощь приходит этот справочник стилей css по умолчанию.
  • Шпаргалка по font-weight (да я забываю постоянно)
  • Плагин для PostCSS для добавления вендорных префиксов в CSS — когда надо добавить поддержку старых браузеров в верстку, сделанную БЕЗ автопрефиксеров.

Документация

Генераторы сетки для html-страниц

Генератор сетки на гридах — я хз когда, но однажды я таки начту пользоваться гридами в своих проектах и возмножно этот сервис мне пригодится.

Менеджеры пакетов для сборщиков проекта

NPM — для меня это всегда будет классическим менеджером. Почти всегда пользуюсь им. И лишь иногда вспоминаю про Yarn. Мне кажется, что тут просто вкусовщина и магические тонкости решают. Поэтому выбирайте на своё усмотрение.

Минификация кода

  • JSCompress — это онлайн-компрессор JavaScript, который позволяет сжимать и минимизировать все ваши файлы JS до 80% от их исходного размера. Тупо CTRL+C, CTRL+V и обратно.
  • Вариативный минификатор CSSвыполняет три вида преобразований: очистку (удаление лишних), сжатие (замена более короткой формы) и реструктуризацию (слияние деклараций, наборов правил и т. Д.).
  • Минимизация HTML, PHP, CSS, JS и SQL онлайн — ну тут всё логично, вроде как )
  • html-beautify — Онлайн форматирование html-кода
  • css comb — форматирование css онлайн

Подключение шрифтов

  • Google fonts — самое простое и популярное решение проблемы со шрифтами для сайта. тут всё бесплатно, грамотно и знакомо для большинства веб-мастеров.
  • Google-webfonts-helper — альтернативный способ подключения веб-шрифтов от Google, он удобней официального сайта Google со шрифтами, если вы хотите подключать шрифты локально.
  • Font Squirrel — перепаковка нестандартных шрифтов.
  • Fontawesome — ну куда же без иконочных шрифтов от Fonticons. Порой они спасают моё время.

SVG

Ресайз SVG — Изменить размер SVG путем новой установки высоты и ширины пикселей. Изменить несколько SVG изображений сразу онлайн.

Favicon

  • favicon.cc — генератор классических фавиконок для сайта в .ico с размерами 16 на 16
  • favicon-generator— Вариативный генератор фавиконок для сайта (все форматы и размет за раз!). Почти везде его использую.

Паттерны

Халявные SVG-паттерны — отличный сайт с бесплатными svg-паттернами от Steve Schoger. Очень часто использую на сайтах.

Бесплатные иконки для сайта

  • flaticon — тут очень много вариантов иконок. Любые форматы и размеры. Чаще всего ищу именно тут.
  • icomoon — иконки для сайта. Можно сразу и в спрайт собирать.
  • fontastic -Сборщик персональных коллекций иконочных шрифтов под ваш проект (только те иконки, которые нужны/с возможностью обновления коллекции). Доступно более 9000 иконок.

Сложное

  • Генератор .htacces — ничего не понятно, но ооочень интересно для верстака )))
  • Cleancss — куча генераторов, кодировщиков, конвертеров и не только. Проще вам заглянуть и выбрать, чем описывать тут всё что там есть. Реально много всего.

Прочее

  • Текстовые смайлы (целая куча текстовых смайликов). Бывает сидишь в чатике, а там нет эмодзи. Но ты не можешь без рожец жить и приходится извращаться. В этой коллекции есть куча крутых персонажей. И с FACKами и с сиськами. Всё что твоё настроение пожелает, что бы пофлудить.
  • Мнемоники в HTML (Википедия) — иногда беру отсюда код спец-символов.
  • Коллекция спецсимволов для html — ну типа неразрывный пробел, значок копирайта и прочая муть. Бывает, что нужно, а как писать — забыл.
  • Таймер Tomato — иногда я снова пытаюсь внедрить в свой мир работу по помидоро-таймеру.
  • num2word — Поиск отличий в похожих фрагментах кода или текста (с подсветкой, поти как на ГИТХАБЕ :)))
Юрий Ронин