106 инструментов для WEB

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

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

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

• 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 файлы для демонстрации фирменного стиля.

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

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

• http://loadimpact.com — нагрузочное тестирование.
• Pingdom Tools — Анализ времени загрузки страницы.
• Webo.In — Проверь скорость загрузки сайта.
• OctaGate SiteTimer.
• Web Page Analyzer — free website optimization tool website speed test check website performance report from web site optimization.
• mon.itor.us — Free Websites Performance, Availability, Traffic Monitoring.
• CrazyEgg — сервис для отслеживания перемещения пользователей по сайту — кто куда кликнул, какие ссылки наиболее популярные и тому подобная, разнородная информация для юзабилистов.
• UserFly — даёт возможность визуально посмотреть, что и как делал пользователь на вашей странице. Посмотрите демку, все станет ясно!
• validator.w3.org/checklink — Проверяем наличие битых ссылок.
• Проверка и тестирование скорости интернет соединения.
• Speedtest.net — The Global Broadband Speed Test.
• Яндекс.Интернет – ваш IP-адрес и скорость интернет-соединения.
• Сервисы для анализа действий пользователей на сайте.
• Сервисы для мониторинга доступности сайта.
• 7 бесплатных сервисов для проверки сайтов (тестирование и мониторинг сервисы).
• Gitter — удобный чат, имеющий хорошую интеграцию с github’ом.
• Fibonacci — визуальный конструктор flexbox-лэйаута.
• Project Parfait — инструмент для быстрой нарезки .psd-макета, и вообще для ускорения верстки в целом. Позволяет узнавать расстояние между слоями, размер разных слоев и многое другое.
• The Code Player — онлайн-уроки по HTML / CSS / JS в формате живого кодинга. Можно записывать свои уроки.
• Типограф Муравьева — доступен также и в качестве PHP / Python библиотеки. Позволяет правильно оформить текст.

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

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

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

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

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

• Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions (тестирование адаптивной вёрстки).
• Code Beautifier — Инструмент для сжатия CSS-файлов (основанном на проекте CSS Tidy).
• CSS Frame Generator — Фреймо-генератор.
• Clean CSS — Optmize and Format your CSS.
• CSS Sprites Generator.
• Генератор CSS спрайтов.
• Генератор шаблона 1–3 колонки(X)HTML+CSS.
• Генератор HTML+CSS шаблонов — CSS Layout Generator.
• CSS3Ps — конвертер из PSD в CSS.
• border-image-generator — Генератор CSS-бордюра.
• Live Tools — 4 инструмента: генератор кнопок, форм, лент на чистом CSS, а также редактор иконок.
• CSS Hexagon Generator генератор CSS-шестиугольника.
• CSS Arrow please — генерация блока со стрелкой (тултипа) на чистом CSS.
• Bounce.JS — одновременно и сервис, и JS-библиотека для быстрого создания и редактирования CSS3-анимаций.
• CSS Shrink — онлайн-сжатие вашего CSS-кода. Кстати, не только сжатие — можно вставить уродливо отформатированный код и получить на выходе красивый.
• CSS Colours — красиво оформленный список CSS-цветов, которые могут быть использованы в виде слова, например color: blue.
• CSS Triggers — подробная информация обо всех CSS-свойствах: что они делают, как влияют на рендеринг страницы и тому подобное.
• CSS Shortand generator — собирает специфические свойства типа background-color в одно общее свойство.
• PX to EM  — удобный конвертер из PX в EM и обратно.
• Автоматическое удаление неиспользуемого CSS с помощью Grunt.

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.