Разработка вебинтерфейсов дело не самое легкое. Причем начать вроде бы несложно, а вот добиться совершенства поистинне проблематично. Уж очень многое необходимо учесть. Просто масса настроек и ньюансов, в которых легко запутаться и сделать что-то не так. К счастью, разработчики и дизайнеры склонны упрощать этот нелегкий труд и постоянно изобретают всяческие инструменты позволяющие сделать больше и лучше за то же самое время, а главное не погрязнуть в мелочах и состредоточиться на чем-то более важном.
Множество удобных инструментов, найденных командой популярного онлайн журнала SmashingMagazine, приводится под катом
HTML Email Boilerplate
Сайт, содержащий немалое количество шаблонов и примеров для создания сообщений отправляемых по электронной почте позволяющих избежать большинство проблем с отображением этих сообщений в популярных клиентских приложениях.
Initializr
Генератор HTML 5 шаблонов. Выбираете образец, сырой js или jQuery, указываете уровень совместимости вашего будущего приложения с устройствами, серверные настройки и получаете готовый шаблон, с которого можно начинать ваш проект.
Layer Styles
Простой и достаточно эффективный инструмент для создания кроссбраузерных CSS эффектов (таких как тень, фон, границы со скругленными углами). Имеет пользовательский интерфейс похожий на аналогичные инструменты в графических редакторах.
Mobile Boilerplate
Шаблон для создания вебприложений для широкого диапазона мобильных устройств, начиная от самых современных смартфонов и заканчивая старенькими моделями на Blackberry, Symbian и IE Mobile.
Kotatsu
Простенький конструктор HTML таблиц. Кому интересен аналогичный генератор списков можно взглянуть еще и сюда.
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 и без необходимости перезагрузки страницы браузера в ходе отладки.
Ffffallback
Инструмент для тестирования ваших вебприложений на предмет совместимости с различными наборами шрифтов.
Less-Boilerplate
CSS Boilerplate переписанный на LESS
Needle v0.1a1
Инструмент для тестирования верстки. Делает скриншоты и позволяет их сравнивать их с другими скринштами. Также предоставляет инструменты для тестирования рассчитанных CSS правил, а также позиций HTML элементов на странице
inuit.css
Очередной CSS фреймворк, в котором автор попытался собрать лучшие накопленные им практические приемы в одном файле.
Spritemapper
Генератор CSS-спрайтов. Объединяет большое количество изображений в одно и генерирует CSS правила для вывода их по отдельности. Этот прием уменьшает количество соединений с сервером необходимое для загрузки страницы, что может уменьшить общее время этой самой загрузки.
CSSsitemap System
Интересный проект по созданию карты сайта на css
Normalize.css
Результат работы Джонатана Нила и Николаса Галлахера над reset.css. Вместо традиционного сброса всех параметров по умолчания браузеров они предлагают сбрасывать только те, которые мешают использованию одинаковых CSS правил для всех браузеров, а другие удобные умолчания — сохранить.
Holmes
Набор CSS правил позволяющий подсветить на странице блоки с сомнительной, ошибочной или неустойчивой версткой. Предлагается использовать с букмарклетом.
Zen Coding
Подключаемый модуль для большого количество редакторов кода, предлагающий ускорение набора и редактирования CSS правил с помощью специальных сокращений.
CSS Stress Testing and Performance Profiling
Инструмент для тестирования производительности и профилирования CSS.
CSS Crush
PHP препроцессор для CSS позволяющий избежать необходимость использования вендорных префиксов, а также некоторых других многословных конструкций при создании CSS правил. Можно взглянуть еще и на <a href="PCSS">этот похожий инструмент
CSSPrefixer
Инструмент автоматизации процесса добавления вендорных префиксов в CSS.
Modernizr 2
Вторая версия замечательного фреймворка позволяющая использовать прелести HTML5 и CSS3 без риска потери пользователей не очень свежих браузеров.
yepnope.js
Библиотека позволяющая подгружать только нужные на данной странице js файлы.
FitText
Модуль для jQuery, гибко меняющий размеры шрифта для удобного размещения одного и того же текста на широком диапазоне устройств от небольшого экрана мобильного устройства до профессионального тридцатидюймового монитора.
jQuery Waypoints
Модуль позволяющий выполнить определенный код в момент когда пользователь проскролит страницу к определенному элементу.
jQuery Plugin Boilerplate
Удобная обертка для написания подключаемых модулей к jQuery
ligature-js
Фунция добавляющая типографические лигатуры в текст
Placeholder jQuery Plugin/Polyfill
Модуль для поддержки HTML5 атрибута placeholder в старые или не поддерживающие это свойство браузеры.
StronglyTyped
Попытка максимально кроссбраузерно добавить более строгую типизацию переменных в javascript
Kaffeine
Синтаксический сахар для написания сложных javascript-приложений. Компилируется в обычный javascript код.
Crossroads.js
Механизм вызова определенных js функций в зависимости от определенных URL похожий на аналогичные механизмы в таких серверных фреймфорках как Rails, Pyramid, Django, CakePHP, CodeIgniter и т.д.
Hivelogic
Библиотека позволяющая относительно безопасно (в плане разбора спамерскими программами) публиковать e-mail на вашем сайте.
JavaScript Garden
Анализатор js кода позволяющий еще до стадии публикации кода устранить часто возникающие ошибки в использовании языка javascript у неопытных пользователей.
Syntaclet
Букмарклет для подсветки синтаксиса js на html страницах
Bookmarkleter
Инструмент для конвертации js кода в букмарклет с возможностью переформатирования (удаления лишних пробелов, заменой юникодных символов и т.д.)
The JavaScript Grid
Генератор сетки с простым механизмом просмотра через закладки.
Grid Calculator
Удобный конструктор сетки с импортом в Adobe Illustrator или Adobe Photoshop
GridCalc
Калькулятор возможных вариантов сетки при заданных размерах ширины страницы, ширины блока и промежутка между блоками, а также генератор кода для выбранных вариантов.
Modular Grid Pattern
Генератор сеток для графических редакторов. Имеется также соответствующее расширение для Photoshop
Susy
Rails фреймворк позволяющий создать сетку, максимально гибко подстраиваясь под вашу разметку, дизайн и пожелания.
Griddle.it
Простой и удобный механизм позволяющий сгенерировать фон страницы, на котором будут нанесены линейки для выравнивания элементов дизайна сайта.
ASCII Pronunciation Rules for Programmers
Сайт — справочник по названиям ASCII символов на английском языке.
PS: В перевод включены не все описанные в оригинальной статье инструменты — некоторые просто не работали, некоторые показались мне совершенно неуместными здесь. Но и того, что перевел получилось очень немало, так что респект тем, кто добрался до этих строк :-)
Множество удобных инструментов, найденных командой популярного онлайн журнала SmashingMagazine, приводится под катом
Инструменты для CSS и HTML
HTML Email Boilerplate
Сайт, содержащий немалое количество шаблонов и примеров для создания сообщений отправляемых по электронной почте позволяющих избежать большинство проблем с отображением этих сообщений в популярных клиентских приложениях.
Initializr
Генератор HTML 5 шаблонов. Выбираете образец, сырой js или jQuery, указываете уровень совместимости вашего будущего приложения с устройствами, серверные настройки и получаете готовый шаблон, с которого можно начинать ваш проект.
Layer Styles
Простой и достаточно эффективный инструмент для создания кроссбраузерных CSS эффектов (таких как тень, фон, границы со скругленными углами). Имеет пользовательский интерфейс похожий на аналогичные инструменты в графических редакторах.
Mobile Boilerplate
Шаблон для создания вебприложений для широкого диапазона мобильных устройств, начиная от самых современных смартфонов и заканчивая старенькими моделями на Blackberry, Symbian и IE Mobile.
Kotatsu
Простенький конструктор HTML таблиц. Кому интересен аналогичный генератор списков можно взглянуть еще и сюда.
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 и без необходимости перезагрузки страницы браузера в ходе отладки.
Ffffallback
Инструмент для тестирования ваших вебприложений на предмет совместимости с различными наборами шрифтов.
Less-Boilerplate
CSS Boilerplate переписанный на LESS
Needle v0.1a1
Инструмент для тестирования верстки. Делает скриншоты и позволяет их сравнивать их с другими скринштами. Также предоставляет инструменты для тестирования рассчитанных CSS правил, а также позиций HTML элементов на странице
inuit.css
Очередной CSS фреймворк, в котором автор попытался собрать лучшие накопленные им практические приемы в одном файле.
Spritemapper
Генератор CSS-спрайтов. Объединяет большое количество изображений в одно и генерирует CSS правила для вывода их по отдельности. Этот прием уменьшает количество соединений с сервером необходимое для загрузки страницы, что может уменьшить общее время этой самой загрузки.
CSSsitemap System
Интересный проект по созданию карты сайта на css
Normalize.css
Результат работы Джонатана Нила и Николаса Галлахера над reset.css. Вместо традиционного сброса всех параметров по умолчания браузеров они предлагают сбрасывать только те, которые мешают использованию одинаковых CSS правил для всех браузеров, а другие удобные умолчания — сохранить.
Holmes
Набор CSS правил позволяющий подсветить на странице блоки с сомнительной, ошибочной или неустойчивой версткой. Предлагается использовать с букмарклетом.
Zen Coding
Подключаемый модуль для большого количество редакторов кода, предлагающий ускорение набора и редактирования CSS правил с помощью специальных сокращений.
CSS Stress Testing and Performance Profiling
Инструмент для тестирования производительности и профилирования CSS.
CSS Crush
PHP препроцессор для CSS позволяющий избежать необходимость использования вендорных префиксов, а также некоторых других многословных конструкций при создании CSS правил. Можно взглянуть еще и на <a href="PCSS">этот похожий инструмент
CSSPrefixer
Инструмент автоматизации процесса добавления вендорных префиксов в CSS.
JavaScript-инструменты
Modernizr 2
Вторая версия замечательного фреймворка позволяющая использовать прелести HTML5 и CSS3 без риска потери пользователей не очень свежих браузеров.
yepnope.js
Библиотека позволяющая подгружать только нужные на данной странице js файлы.
FitText
Модуль для jQuery, гибко меняющий размеры шрифта для удобного размещения одного и того же текста на широком диапазоне устройств от небольшого экрана мобильного устройства до профессионального тридцатидюймового монитора.
jQuery Waypoints
Модуль позволяющий выполнить определенный код в момент когда пользователь проскролит страницу к определенному элементу.
jQuery Plugin Boilerplate
Удобная обертка для написания подключаемых модулей к jQuery
ligature-js
Фунция добавляющая типографические лигатуры в текст
Placeholder jQuery Plugin/Polyfill
Модуль для поддержки HTML5 атрибута placeholder в старые или не поддерживающие это свойство браузеры.
StronglyTyped
Попытка максимально кроссбраузерно добавить более строгую типизацию переменных в javascript
Kaffeine
Синтаксический сахар для написания сложных javascript-приложений. Компилируется в обычный javascript код.
Crossroads.js
Механизм вызова определенных js функций в зависимости от определенных URL похожий на аналогичные механизмы в таких серверных фреймфорках как Rails, Pyramid, Django, CakePHP, CodeIgniter и т.д.
Hivelogic
Библиотека позволяющая относительно безопасно (в плане разбора спамерскими программами) публиковать e-mail на вашем сайте.
JavaScript Garden
Анализатор js кода позволяющий еще до стадии публикации кода устранить часто возникающие ошибки в использовании языка javascript у неопытных пользователей.
Syntaclet
Букмарклет для подсветки синтаксиса js на html страницах
Bookmarkleter
Инструмент для конвертации js кода в букмарклет с возможностью переформатирования (удаления лишних пробелов, заменой юникодных символов и т.д.)
Сетки
The JavaScript Grid
Генератор сетки с простым механизмом просмотра через закладки.
Grid Calculator
Удобный конструктор сетки с импортом в Adobe Illustrator или Adobe Photoshop
GridCalc
Калькулятор возможных вариантов сетки при заданных размерах ширины страницы, ширины блока и промежутка между блоками, а также генератор кода для выбранных вариантов.
Modular Grid Pattern
Генератор сеток для графических редакторов. Имеется также соответствующее расширение для Photoshop
Susy
Rails фреймворк позволяющий создать сетку, максимально гибко подстраиваясь под вашу разметку, дизайн и пожелания.
Griddle.it
Простой и удобный механизм позволяющий сгенерировать фон страницы, на котором будут нанесены линейки для выравнивания элементов дизайна сайта.
Ну и еще немного
ASCII Pronunciation Rules for Programmers
Сайт — справочник по названиям ASCII символов на английском языке.
PS: В перевод включены не все описанные в оригинальной статье инструменты — некоторые просто не работали, некоторые показались мне совершенно неуместными здесь. Но и того, что перевел получилось очень немало, так что респект тем, кто добрался до этих строк :-)