Разработка вебинтерфейсов дело не самое легкое. Причем начать вроде бы несложно, а вот добиться совершенства поистинне проблематично. Уж очень многое необходимо учесть. Просто масса настроек и ньюансов, в которых легко запутаться и сделать что-то не так. К счастью, разработчики и дизайнеры склонны упрощать этот нелегкий труд и постоянно изобретают всяческие инструменты позволяющие сделать больше и лучше за то же самое время, а главное не погрязнуть в мелочах и состредоточиться на чем-то более важном.
Множество удобных инструментов, найденных командой популярного онлайн журнала SmashingMagazine, приводится под катом
HTML Email Boilerplate
Сайт, содержащий немалое количество шаблонов и примеров для создания сообщений отправляемых по электронной почте позволяющих избежать большинство проблем с отображением этих сообщений в популярных клиентских приложениях.
![image](http://media.smashingmagazine.com/uploads/2011/06/emailboiler.jpg)
Initializr
Генератор HTML 5 шаблонов. Выбираете образец, сырой js или jQuery, указываете уровень совместимости вашего будущего приложения с устройствами, серверные настройки и получаете готовый шаблон, с которого можно начинать ваш проект.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/315/069/e13/315069e136623e6c560311d617e4eeba.jpg)
Layer Styles
Простой и достаточно эффективный инструмент для создания кроссбраузерных CSS эффектов (таких как тень, фон, границы со скругленными углами). Имеет пользовательский интерфейс похожий на аналогичные инструменты в графических редакторах.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/3ac/afb/1ab/3acafb1ab33ae83379e6df94440ca935.jpg)
Mobile Boilerplate
Шаблон для создания вебприложений для широкого диапазона мобильных устройств, начиная от самых современных смартфонов и заканчивая старенькими моделями на Blackberry, Symbian и IE Mobile.
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-tools-124.jpg)
Kotatsu
Простенький конструктор HTML таблиц. Кому интересен аналогичный генератор списков можно взглянуть еще и сюда.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/646/994/e85/646994e85f51a4c74ec5efed33121375.jpg)
Vogue
Локальный сервер, основанный на Node JS, позволяющий избежать проблемы постоянной очистки кеша браузера при правке css.
LiveReload
Инструмент автоматически применяющий изменения в CSS/JS в таких браузерах как Safari и Chrome и перезагружающий страницу целиком, если изменился HTML. Можно также взглянуть на альтернативный инструмент Live.js
media.smashingmagazine.com/uploads/2011/06/useful-tools-141.jpg
css-x-fire
Инструмент для редактирования CSS правил в удобном IDE и без необходимости перезагрузки страницы браузера в ходе отладки.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/2f0/640/3bc/2f06403bcda4767c7a4f3fb664b3e40f.jpg)
Ffffallback
Инструмент для тестирования ваших вебприложений на предмет совместимости с различными наборами шрифтов.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/a1b/ef7/26d/a1bef726d460afa92d57261dcbe37f13.jpg)
Less-Boilerplate
CSS Boilerplate переписанный на LESS
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/f93/900/d3f/f93900d3f3b5c43d1fe88d8b053af053.jpg)
Needle v0.1a1
Инструмент для тестирования верстки. Делает скриншоты и позволяет их сравнивать их с другими скринштами. Также предоставляет инструменты для тестирования рассчитанных CSS правил, а также позиций HTML элементов на странице
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-res-101.jpg)
inuit.css
Очередной CSS фреймворк, в котором автор попытался собрать лучшие накопленные им практические приемы в одном файле.
Spritemapper
Генератор CSS-спрайтов. Объединяет большое количество изображений в одно и генерирует CSS правила для вывода их по отдельности. Этот прием уменьшает количество соединений с сервером необходимое для загрузки страницы, что может уменьшить общее время этой самой загрузки.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/032/b8b/964/032b8b9640766126af98f973e9922b6f.jpg)
CSSsitemap System
Интересный проект по созданию карты сайта на css
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/cd1/ccf/fa9/cd1ccffa92ea6d3fa8ea425f3f44a39a.jpg)
Normalize.css
Результат работы Джонатана Нила и Николаса Галлахера над reset.css. Вместо традиционного сброса всех параметров по умолчания браузеров они предлагают сбрасывать только те, которые мешают использованию одинаковых CSS правил для всех браузеров, а другие удобные умолчания — сохранить.
![image](http://media.smashingmagazine.com/uploads/2011/06/normalizecss.gif)
Holmes
Набор CSS правил позволяющий подсветить на странице блоки с сомнительной, ошибочной или неустойчивой версткой. Предлагается использовать с букмарклетом.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/7a5/e63/77f/7a5e6377f15fd6682c96a3e27c193f0f.jpg)
Zen Coding
Подключаемый модуль для большого количество редакторов кода, предлагающий ускорение набора и редактирования CSS правил с помощью специальных сокращений.
CSS Stress Testing and Performance Profiling
Инструмент для тестирования производительности и профилирования CSS.
CSS Crush
PHP препроцессор для CSS позволяющий избежать необходимость использования вендорных префиксов, а также некоторых других многословных конструкций при создании CSS правил. Можно взглянуть еще и на <a href="PCSS">этот похожий инструмент
CSSPrefixer
Инструмент автоматизации процесса добавления вендорных префиксов в CSS.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/5bc/923/b14/5bc923b14f27d10045e26d9fa8dd59c7.jpg)
Modernizr 2
Вторая версия замечательного фреймворка позволяющая использовать прелести HTML5 и CSS3 без риска потери пользователей не очень свежих браузеров.
![image](http://media.smashingmagazine.com/uploads/2011/06/modernizr.jpg)
yepnope.js
Библиотека позволяющая подгружать только нужные на данной странице js файлы.
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-res-117.jpg)
FitText
Модуль для jQuery, гибко меняющий размеры шрифта для удобного размещения одного и того же текста на широком диапазоне устройств от небольшого экрана мобильного устройства до профессионального тридцатидюймового монитора.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/66e/adc/b2c/66eadcb2c769f56f02cdf438822b161f.jpg)
jQuery Waypoints
Модуль позволяющий выполнить определенный код в момент когда пользователь проскролит страницу к определенному элементу.
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-res-109.jpg)
jQuery Plugin Boilerplate
Удобная обертка для написания подключаемых модулей к jQuery
ligature-js
Фунция добавляющая типографические лигатуры в текст
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-res-112.jpg)
Placeholder jQuery Plugin/Polyfill
Модуль для поддержки HTML5 атрибута placeholder в старые или не поддерживающие это свойство браузеры.
StronglyTyped
Попытка максимально кроссбраузерно добавить более строгую типизацию переменных в javascript
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-tools-129.jpg)
Kaffeine
Синтаксический сахар для написания сложных javascript-приложений. Компилируется в обычный javascript код.
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-res-113.jpg)
Crossroads.js
Механизм вызова определенных js функций в зависимости от определенных URL похожий на аналогичные механизмы в таких серверных фреймфорках как Rails, Pyramid, Django, CakePHP, CodeIgniter и т.д.
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-res-114.jpg)
Hivelogic
Библиотека позволяющая относительно безопасно (в плане разбора спамерскими программами) публиковать e-mail на вашем сайте.
JavaScript Garden
Анализатор js кода позволяющий еще до стадии публикации кода устранить часто возникающие ошибки в использовании языка javascript у неопытных пользователей.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/280/ab0/446/280ab0446b3dc0e47b1858530b8918fc.jpg)
Syntaclet
Букмарклет для подсветки синтаксиса js на html страницах
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/7fb/e2d/a78/7fbe2da78ad661ee085d0ad2a4432673.jpg)
Bookmarkleter
Инструмент для конвертации js кода в букмарклет с возможностью переформатирования (удаления лишних пробелов, заменой юникодных символов и т.д.)
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/f20/461/e53/f20461e53e1ed3dc7cb038fcab261bb2.jpg)
The JavaScript Grid
Генератор сетки с простым механизмом просмотра через закладки.
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-tools-164.jpg)
Grid Calculator
Удобный конструктор сетки с импортом в Adobe Illustrator или Adobe Photoshop
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-tools-139.jpg)
GridCalc
Калькулятор возможных вариантов сетки при заданных размерах ширины страницы, ширины блока и промежутка между блоками, а также генератор кода для выбранных вариантов.
Modular Grid Pattern
Генератор сеток для графических редакторов. Имеется также соответствующее расширение для Photoshop
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/507/1eb/f7c/5071ebf7c68bf632e65011980ba96332.jpg)
Susy
Rails фреймворк позволяющий создать сетку, максимально гибко подстраиваясь под вашу разметку, дизайн и пожелания.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/df9/e07/20d/df9e0720d13cac636432788f13f72352.jpg)
Griddle.it
Простой и удобный механизм позволяющий сгенерировать фон страницы, на котором будут нанесены линейки для выравнивания элементов дизайна сайта.
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/f14/f5a/ca5/f14f5aca535f5e161f9fbf16e18a23f7.png)
ASCII Pronunciation Rules for Programmers
Сайт — справочник по названиям ASCII символов на английском языке.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/7cd/ee9/3dc/7cdee93dc4669da1c0af969f9b9ab2fe.jpg)
PS: В перевод включены не все описанные в оригинальной статье инструменты — некоторые просто не работали, некоторые показались мне совершенно неуместными здесь. Но и того, что перевел получилось очень немало, так что респект тем, кто добрался до этих строк :-)
Множество удобных инструментов, найденных командой популярного онлайн журнала SmashingMagazine, приводится под катом
Инструменты для CSS и HTML
HTML Email Boilerplate
Сайт, содержащий немалое количество шаблонов и примеров для создания сообщений отправляемых по электронной почте позволяющих избежать большинство проблем с отображением этих сообщений в популярных клиентских приложениях.
![image](http://media.smashingmagazine.com/uploads/2011/06/emailboiler.jpg)
Initializr
Генератор HTML 5 шаблонов. Выбираете образец, сырой js или jQuery, указываете уровень совместимости вашего будущего приложения с устройствами, серверные настройки и получаете готовый шаблон, с которого можно начинать ваш проект.
![image](https://habrastorage.org/getpro/habr/post_images/315/069/e13/315069e136623e6c560311d617e4eeba.jpg)
Layer Styles
Простой и достаточно эффективный инструмент для создания кроссбраузерных CSS эффектов (таких как тень, фон, границы со скругленными углами). Имеет пользовательский интерфейс похожий на аналогичные инструменты в графических редакторах.
![image](https://habrastorage.org/getpro/habr/post_images/3ac/afb/1ab/3acafb1ab33ae83379e6df94440ca935.jpg)
Mobile Boilerplate
Шаблон для создания вебприложений для широкого диапазона мобильных устройств, начиная от самых современных смартфонов и заканчивая старенькими моделями на Blackberry, Symbian и IE Mobile.
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-tools-124.jpg)
Kotatsu
Простенький конструктор HTML таблиц. Кому интересен аналогичный генератор списков можно взглянуть еще и сюда.
![image](https://habrastorage.org/getpro/habr/post_images/646/994/e85/646994e85f51a4c74ec5efed33121375.jpg)
Vogue
Локальный сервер, основанный на Node JS, позволяющий избежать проблемы постоянной очистки кеша браузера при правке css.
LiveReload
Инструмент автоматически применяющий изменения в CSS/JS в таких браузерах как Safari и Chrome и перезагружающий страницу целиком, если изменился HTML. Можно также взглянуть на альтернативный инструмент Live.js
media.smashingmagazine.com/uploads/2011/06/useful-tools-141.jpg
css-x-fire
Инструмент для редактирования CSS правил в удобном IDE и без необходимости перезагрузки страницы браузера в ходе отладки.
![image](https://habrastorage.org/getpro/habr/post_images/2f0/640/3bc/2f06403bcda4767c7a4f3fb664b3e40f.jpg)
Ffffallback
Инструмент для тестирования ваших вебприложений на предмет совместимости с различными наборами шрифтов.
![image](https://habrastorage.org/getpro/habr/post_images/a1b/ef7/26d/a1bef726d460afa92d57261dcbe37f13.jpg)
Less-Boilerplate
CSS Boilerplate переписанный на LESS
![image](https://habrastorage.org/getpro/habr/post_images/f93/900/d3f/f93900d3f3b5c43d1fe88d8b053af053.jpg)
Needle v0.1a1
Инструмент для тестирования верстки. Делает скриншоты и позволяет их сравнивать их с другими скринштами. Также предоставляет инструменты для тестирования рассчитанных CSS правил, а также позиций HTML элементов на странице
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-res-101.jpg)
inuit.css
Очередной CSS фреймворк, в котором автор попытался собрать лучшие накопленные им практические приемы в одном файле.
Spritemapper
Генератор CSS-спрайтов. Объединяет большое количество изображений в одно и генерирует CSS правила для вывода их по отдельности. Этот прием уменьшает количество соединений с сервером необходимое для загрузки страницы, что может уменьшить общее время этой самой загрузки.
![image](https://habrastorage.org/getpro/habr/post_images/032/b8b/964/032b8b9640766126af98f973e9922b6f.jpg)
CSSsitemap System
Интересный проект по созданию карты сайта на css
![image](https://habrastorage.org/getpro/habr/post_images/cd1/ccf/fa9/cd1ccffa92ea6d3fa8ea425f3f44a39a.jpg)
Normalize.css
Результат работы Джонатана Нила и Николаса Галлахера над reset.css. Вместо традиционного сброса всех параметров по умолчания браузеров они предлагают сбрасывать только те, которые мешают использованию одинаковых CSS правил для всех браузеров, а другие удобные умолчания — сохранить.
![image](http://media.smashingmagazine.com/uploads/2011/06/normalizecss.gif)
Holmes
Набор CSS правил позволяющий подсветить на странице блоки с сомнительной, ошибочной или неустойчивой версткой. Предлагается использовать с букмарклетом.
![image](https://habrastorage.org/getpro/habr/post_images/7a5/e63/77f/7a5e6377f15fd6682c96a3e27c193f0f.jpg)
Zen Coding
Подключаемый модуль для большого количество редакторов кода, предлагающий ускорение набора и редактирования CSS правил с помощью специальных сокращений.
CSS Stress Testing and Performance Profiling
Инструмент для тестирования производительности и профилирования CSS.
CSS Crush
PHP препроцессор для CSS позволяющий избежать необходимость использования вендорных префиксов, а также некоторых других многословных конструкций при создании CSS правил. Можно взглянуть еще и на <a href="PCSS">этот похожий инструмент
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-res-103.jpg)
CSSPrefixer
Инструмент автоматизации процесса добавления вендорных префиксов в CSS.
![image](https://habrastorage.org/getpro/habr/post_images/5bc/923/b14/5bc923b14f27d10045e26d9fa8dd59c7.jpg)
JavaScript-инструменты
Modernizr 2
Вторая версия замечательного фреймворка позволяющая использовать прелести HTML5 и CSS3 без риска потери пользователей не очень свежих браузеров.
![image](http://media.smashingmagazine.com/uploads/2011/06/modernizr.jpg)
yepnope.js
Библиотека позволяющая подгружать только нужные на данной странице js файлы.
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-res-117.jpg)
FitText
Модуль для jQuery, гибко меняющий размеры шрифта для удобного размещения одного и того же текста на широком диапазоне устройств от небольшого экрана мобильного устройства до профессионального тридцатидюймового монитора.
![image](https://habrastorage.org/getpro/habr/post_images/66e/adc/b2c/66eadcb2c769f56f02cdf438822b161f.jpg)
jQuery Waypoints
Модуль позволяющий выполнить определенный код в момент когда пользователь проскролит страницу к определенному элементу.
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-res-109.jpg)
jQuery Plugin Boilerplate
Удобная обертка для написания подключаемых модулей к jQuery
ligature-js
Фунция добавляющая типографические лигатуры в текст
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-res-112.jpg)
Placeholder jQuery Plugin/Polyfill
Модуль для поддержки HTML5 атрибута placeholder в старые или не поддерживающие это свойство браузеры.
StronglyTyped
Попытка максимально кроссбраузерно добавить более строгую типизацию переменных в javascript
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-tools-129.jpg)
Kaffeine
Синтаксический сахар для написания сложных javascript-приложений. Компилируется в обычный javascript код.
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-res-113.jpg)
Crossroads.js
Механизм вызова определенных js функций в зависимости от определенных URL похожий на аналогичные механизмы в таких серверных фреймфорках как Rails, Pyramid, Django, CakePHP, CodeIgniter и т.д.
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-res-114.jpg)
Hivelogic
Библиотека позволяющая относительно безопасно (в плане разбора спамерскими программами) публиковать e-mail на вашем сайте.
JavaScript Garden
Анализатор js кода позволяющий еще до стадии публикации кода устранить часто возникающие ошибки в использовании языка javascript у неопытных пользователей.
![image](https://habrastorage.org/getpro/habr/post_images/280/ab0/446/280ab0446b3dc0e47b1858530b8918fc.jpg)
Syntaclet
Букмарклет для подсветки синтаксиса js на html страницах
![image](https://habrastorage.org/getpro/habr/post_images/7fb/e2d/a78/7fbe2da78ad661ee085d0ad2a4432673.jpg)
Bookmarkleter
Инструмент для конвертации js кода в букмарклет с возможностью переформатирования (удаления лишних пробелов, заменой юникодных символов и т.д.)
![image](https://habrastorage.org/getpro/habr/post_images/f20/461/e53/f20461e53e1ed3dc7cb038fcab261bb2.jpg)
Сетки
The JavaScript Grid
Генератор сетки с простым механизмом просмотра через закладки.
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-tools-164.jpg)
Grid Calculator
Удобный конструктор сетки с импортом в Adobe Illustrator или Adobe Photoshop
![image](http://media.smashingmagazine.com/uploads/2011/06/useful-tools-139.jpg)
GridCalc
Калькулятор возможных вариантов сетки при заданных размерах ширины страницы, ширины блока и промежутка между блоками, а также генератор кода для выбранных вариантов.
Modular Grid Pattern
Генератор сеток для графических редакторов. Имеется также соответствующее расширение для Photoshop
![image](https://habrastorage.org/getpro/habr/post_images/507/1eb/f7c/5071ebf7c68bf632e65011980ba96332.jpg)
Susy
Rails фреймворк позволяющий создать сетку, максимально гибко подстраиваясь под вашу разметку, дизайн и пожелания.
![image](https://habrastorage.org/getpro/habr/post_images/df9/e07/20d/df9e0720d13cac636432788f13f72352.jpg)
Griddle.it
Простой и удобный механизм позволяющий сгенерировать фон страницы, на котором будут нанесены линейки для выравнивания элементов дизайна сайта.
![image](https://habrastorage.org/getpro/habr/post_images/f14/f5a/ca5/f14f5aca535f5e161f9fbf16e18a23f7.png)
Ну и еще немного
ASCII Pronunciation Rules for Programmers
Сайт — справочник по названиям ASCII символов на английском языке.
![image](https://habrastorage.org/getpro/habr/post_images/7cd/ee9/3dc/7cdee93dc4669da1c0af969f9b9ab2fe.jpg)
PS: В перевод включены не все описанные в оригинальной статье инструменты — некоторые просто не работали, некоторые показались мне совершенно неуместными здесь. Но и того, что перевел получилось очень немало, так что респект тем, кто добрался до этих строк :-)