Предлагаем вам перечень сервисов, которые могут помочь владельцам и специалистам, работающим с сайтами, более продуктивно взаимодействовать с интернет-ресурсами на самых разных уровнях.

Работать с контентом с сервисами проще.

Сайт – это в первую очередь контент. Причем работать с ним непросто – фотографии, видео, тексты, шрифты, форматы отображения всего вышеперечисленного на странице… Все многообразие требует особого подхода. Следующий перечень сервисов поможет вам решить многие задачи их тех, что поставит перед вами контент.

  • Blind Text Generator — генератор текста-рыбы.
  • Random User Generator — генератор случайных пользователей.
  • User Inter Faces — генератор аватарок для вашего проекта.
  • Prepros — компиляция, сжатие, оптимизация и еще куча всего — все возможности смотрите на сайте.
  • Badge Service — генерация svg-значков в стиле github.
  • Webflow — drag & drop редактор для создания респонсивных сайтов.
  • html2pdf — конвертер веб-страниц в PDF-формат.
  • NinjaMock — неплохой инструмент для прототипирования.
  • Moqups — еще один инструмент для прототипирования.
  • Sache — коллекция Sass и Compass расширений.
  • Web Developer Checklist — проверьте все пункты чек-листа перед запуском своего проекта.
  • Glyphter — создание своего иконочного шрифта.
  • Pics.IO — онлайн фоторедактор.
  • Safarizator — вставка вашего дизайн-макета в окно браузера Safari.
  • PlaceIt — еще один сервис для генерации превью ваших работ.
  • TinyPNG — сжатие изображений в формате PNG.
  • Golden Ratio Typography Calculator — расчет оптимального размера шрифта на основе золотого сечения.
  • Favicon Generator — генератор кросплатформенной favicon.
  • HTML5 Please — статистика по поддержке фич HTML5 в различных браузерах.
  • Pictaculous — генератор цветовой схемы на основе загруженного изображения.
  • JSON Generator — генератор большого объема нужных данных в json-формате.
  • Codio — онлайн-IDE для полноценной разработки любых проектов, связанных с веб-технологиями.
  • HTML Template Generator — больше подойдет для ленивых разработчиков, еще не использующих никакого boilerplate. Сервис позволяет сгенерировать базовую HTML-разметку документа: добавить нужные мета-теги, скрипты, либо целые бандлы, например, Twitter Bootstrap.
  • Shortcut Mapper — позволяет освежить в памяти горячие сочетания клавиш для программ Adobe Photoshop / Adobe Lightroom, Autodesk 3dsMax / Autodesk Maya, Blender и, с недавних пор, Sublime Text 2.
  • Responsive Patterns A collection of patterns and modules for responsive designs.
  • Web Designers Checklist — чек-лист по подготовке проекта к сдаче для веб-дизайнера. Затрагивает многие аспекты, такие как именование файлов и слоев в макете, подготовка типографики, структура файлов и так далее.
  • HTML Hint — похож на JS Hint. Проверяет разметку на соответствие заданным параметрам.
  • Lollytin — визуальный конструктор лэйаута страницы. Использует Bootstrap 3.
  • Blockspring — создание своих API, не требующих хранения данных в БД, а также коллекция уже созданных другими юзерами API.
  • Qwecode — кодирование / декодирование строк в различные форматы: BASE64, Binary, Unicode numbers и другие.
  • Loremflickr — это как placehold.it, но с котиками.
  • Frame  — набор готовых мокапов для демонстрации дизайна / верстки / etc. Выбираете мокап, загружаете изображение, получаете на выходе готовую картинку с вашей работой.
  • SnazzyMaps — различные цветовые схемы для Google Maps.
  • Plain Pattern — создание паттернов из SVG-изображений.
  • Sass to Scss — конвертер из Sass в Scss.
  • Email Design Workflow.
  • A Grunt workflow for designing and testing HTML email templates with SCSS.
  • Mock-up файлы для демонстрации фирменного стиля.

Помоги себе сам: проверь свой сайт на технические неполадки

Техническая сторона сайта обыкновенно – темный лес, который требует долгого изучения, а чаще привлечения специалиста. Однако можно сравнить сайт с автомобилем: чините вы его в автосервисе, но вот узнать о проблеме вашего авто вы можете и сами несложными диагностическими методами. Эти сервисы – как раз такая диагностика. Используя их, вы сможете узнать, необходима ли сайту помощь специалиста.

На разных экранах – проверка браузером

Следующие сервисы предназначены для того, чтобы узнать, на любом ли экране и в любом ли браузере ваш сайт смотрится действительно хорошо. Конечно, вы можете сделать такой тест и просто, вручную. Однако времени это займет немало, так что сервисы действительно упрощают задачу.

  • BrowserShots — Проверьте отображение вашего сайта в разных браузерах.
  • IE NetRenderer — Browser Compatibility Check.
  • Websnapr 2.0 — Быстрое добавление скриншота нужного размера к себе на сайт.
  • WayBack Machine — В базе сохраняется содержимое веб-страниц, и можно посмотреть как выглядела та или иная страница раньше, даже если сайт больше не существует.
  • Создать Превью — Просто загружаете шаблон дизайна и получаете превью в формате любого браузера.
  • WebShotsPro.com — Website Screenshot Generation — Website Thumbnail Service.

Сделай сам: элементы верстки для продвинутых владельцев

Иногда есть желание самостоятельно поработать над элементами сайта – это возможно, если внимательно изучать следующие сервисы, которые помогут вам в верстке некоторых элементов и их диагностике:

JavaScript – основы для специалистов

Следующий набор сервисов – это полезные сайты для тех, кто хочет проверять и корректировать JavaScript сайта. Рекомендуется к использованию тем, кто знает основы этой области программирования.

  • JavaScript Compressor — инструмент для сжатия JS-файлов от Dean Edwards.
  • Yahoo! UI Library — YUI Compressor.
  • JS Minifier — JavaScript Minifier от Douglas Crockford.
  • JSLint, The JavaScript Verifier — Проверка синтаксиса JavaScript.
  • Online javascript beautifie.
  • The JavaScript CompressorRater.
  • JS Bin — Collaborative JavaScript Debugging.
  • jsFiddle — Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS).
  • Tryit Editor v1.4 — JavaScript emulator.
  • Google Code Playground — инструмент для совместного тестирования примеров на Javascript.
  • JS Nice — деобфускация и базовое документирование JS-скрипта. Вставляете непонятный код, сервис его анализирует и приводит в нормальный вид — добавляет отступы, пытается назвать переменные осмысленно в зависимости от контекста, добавляет комментарии с указанием переменных и их типов и т.д.
  • CodeFights — задачки на знание языка JavaScript.