Рубрики
Инструменты

Полезные инструменты для WEB

Blind Text Generator — генератор текста-рыбы

Social Good Ipsum — сервис для генерации текста-рыбы

Random User Generator — генератор случайных пользователей

User Inter Faces — генератор аватарок для вашего проекта.

Prepros — компиляция, сжатие, оптимизация и еще куча всего — все возможности смотрите на сайте

Badge Service — генерация svg-значков в стиле github

Webflow — drag & drop редактор для создания респонсивных сайтов

html2pdf — конвертер веб-страниц в PDF-формат

Trackduck — рецензирование веб-страниц (полезно для фрилансеров)

NinjaMock — неплохой инструмент для прототипирования

Moqups — еще один инструмент для прототипирования

Sache — коллекция Sass и Compass расширений

Web Developer Checklist — проверьте все пункты чек-листа перед запуском своего проекта

Glyphter — создание своего иконочного шрифта

Pics.IO — онлайн фоторедактор

Safarizator — вставка вашего дизайн-макета в окно браузера Safari

PlaceIt — еще один сервис для генерации превью ваших работ

TinyPNG — сжатие изображений в формате PNG

BrowserShots — тестируем сайт в самых различных браузерах

Golden Ratio Typography Calculator — расчет оптимального размера шрифта на основе золотого сечения

Lavish — генератор цветовых схем для Bootstrap на основе пользовательского изображения

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. Выбираете мокап, загружаете изображение, получаете на выходе готовую картинку с вашей работой.

Cheetyr — шпаргалки по Photoshop, Illustrator, CSS, Git и Vim.

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 — нагрузочное тестирование

WebPagetest — один из лучших анализаторов производительности сайта.

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

Pagetest — web page performance test

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 библиотеки. Позволяет правильно оформить текст.

 

Определение информация о подключении клиента (помогает в тестировании соединения)

Whoer.net — find out IP address: host, whois, DSBL, black list, ISP, IP range, country, state, region, city, browser language, user agent, check proxy, local time, Google map, HTTP headers, plugins, JavaScript

 

SnapShot &Browser Compatibility Check

BrowserShots — Проверьте отображение вашего сайта в разных браузерах.

IE NetRenderer — Browser Compatibility Check

Websnapr 2.0 — Быстрое добавление скриншота нужного размера к себе на сайт.

WayBack Machine — В базе сохраняется содержимое веб-страниц, и можно посмотреть как выглядела та или иная страница раньше, даже если сайт больше не существует.

Создать Превью — Просто загружаете шаблон дизайна и получаете превью в формате любого браузера

WebShotsPro.com — Website Screenshot Generation — Website Thumbnail Service

 

CSS инструменты

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

psd2css online — генерация верстки из PSD

CSS3Ps — конвертер из PSD в CSS

border-image-generator — Генератор CSS-бордюра

Less2CSS — конвертер из Less в CSS

Live Tools — 4 инструмента: генератор кнопок, форм, лент на чистом CSS, а также редактор иконок

CSS Hexagon Generator генератор CSS-шестиугольника

StyleStats — исчерпывающая статистика о 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 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.

Pastebin

Pastebin.com

Pastebin mozilla-russia.org

paste.ly — yet another pastebin

 

Regexp инструменты

Debuggex: Online visual regex tester. JavaScript, Python, and PCRE

Regular Expressions 101

Пыха.РУ → Вычисление регулярок

MyRegExp.com Regular Expression Editor

RegExr: Learn, Build, & Test RegEx

RegexpOnline: Interactive regular expressions editor and constructor