Мы надеемся, что эти инструменты помогут вам улучшить ваши навыки, а также профессиональный опыт. Выражаем искреннюю благодарность всем дизайнерам и разработчикам, которые фигурируют в этом списке. Мы уважаем и ценим ваш вклад в дизайн сообщества.
HTML и CSS инструменты
Стандартный HTML Email
Этот веб-сайт и его пример кода поможет быстро создать шаблон HTML письма без дизайна и макета, что поможет вам избежать некоторых проблем рендеринга в наиболее распространенных почтовых клиентах.
Initializr
Этот инструмент создает настраиваемый шаблон, основанный на стандартном HTML5. Формируемый образец шаблона может быть основан на JavaScript или jQuery. В результате вы получите шаблон, основанный на ключевых особенностях HTML5, для быстрого начала работ вашего проекта.
Стили слоя
Данный инструмент предназначен для простого создания CSS интуитивно понятным способом — также просто, как вы могли бы сделать с помощью графического редактора. Этот инструмент позволяет вам добавлять внутренние и внешние тени, фон, границы и их радиус. В результате вы можете получить уже сформированный и готовый к использованию кросс-браузерный CSS код.
Мобильный шаблон
Шаблон позволит вам создать функциональные и мощные мобильные веб-приложения. В результате вы можете получить кросс-браузерную платформу для смартфонов A-класса, а также поддержку устаревших Blackberry, Symbian и мобильных IE.
Kotatsu
Простой инструмент для генерации HTML таблиц, который поможет вам быстро создать таблицу в удобном интерфейсе. Также, если вам необходимо вы можете воспользоваться инструментом генерации списков
Vogue
Эта программа позволяет автоматически перезагружать таблицу стилей страницы во всех браузерах, когда эти стили были изменены, и в это же время он позволяет установить в настройках автоматическую перезагрузку страницы. Для работы вам потребуется NodeJS и npm.
LiveReload
LiveReload применяет изменения CSS/JS к Safari или Chrome без перезагрузки страницы и загружает изменения страницы автоматически. Кроме того, в качестве альтернативы посмотрите на Live.js. Данная библиотека также позволяет всегда просматривать последнюю версию страницы, независимо от того с каким кодом вы работаете HTML, CSS или JavaScript.
css-x-fire
Этот инструмент позволяет редактировать свойства CSS в среде IDE из редактора Firebug CSS и также позволяет разработчику сосредоточиться на CSS без необходимости обновления страницы в обозревателе.
Ffffallback
Инструмент позволяет протестировать стеки различных шрифтов для поиска наилучшего результата. Программа сканирует страницу и создает ее клон, где можно тестировать и анализировать различные имеющиеся шрифты.
LESS.app для Mac OS X
Данное дополнение позволяет очень просто использовать автоматическую компиляцию файлов *.less в стандартные CSS.
Less-Boilerplate
Шаблон CSS включает в себя сброс стандартных настроек CSS, CSS3 помощники, выравнивание по центру колонки блоков и многое другое.
Needle v0.1a1
Needle является удобным инструментом, который можно использовать для проверки вашего CSS, путем создания скриншотов части веб-сайта и сравнения их с другими скриншотами. Он также предоставляет средства для тестирования рассчитанных значений CSS и положения элементов HTML.
inuit.css
Основы CSS, лучшие советы профессиональных разработчиков, трюки и практические примеры - в одном месте.
Spritemapper
Это приложение объединяет несколько изображений в один и генерирует CSS позиционирование для соответствующих фрагментов. Путем уменьшения количества изображений и использования CSS spritemapping можно уменьшить время загрузки вашего сайта.
CSSsitemap System
Инструмент для быстрого и удобного создания CSS карты сайта.
Normalize.css
Normalize.css имеет несколько иной подход к сбросу стандартных настроек CSS. Вместо того, чтобы удалять свойства всех браузеров по умолчанию, в коде хранятся стандартные настройки для различных браузеров по умолчанию. Это экономит ваше время, как дизайнера, а также предоставляет согласованные результаты.
Holmes
Holmes - инструмент диагностики стилей CSS, который подчеркивает возможно недействительный или ошибочный код. Просто добавьте один класс, и он будет создавать красные границы вокруг ошибки, желтым - границы вокруг кода с предупреждением об ошибке и серые границы вокруг устаревших стилей.
Zen Coding
Zen Coding является плагином-редактором для высокоскоростного кодирования и редактирования. Ядром этого плагина является мощный движок, который позволяет преобразовать выражения (аналогично селекторам CSS) в HTML-код.
CSS тестирование и профилирование производительности
Код, для так называемого «CSS стресс теста», использовать который возможно почти во всех браузерах.
CSS Crush
CSS Crush - знакомый, удобный, интуитивно понятный CSS препроцессор.
CSSPrefixer
CSSPrefixer помогает вам улучшить ваш рабочий процесс и экономит много времени при вставке всех необходимых CSS префиксов для различных браузеров.
iOS Media Query Previewer
Очень простой инструмент для просмотра корректности отображения веб-сайта на iPhone, а также iPad.
CSS Pivot
При помощи данного инструмента вы можете добавить стили CSS для любого веб-сайта короткой, удобной ссылкой.
PCSS
Управляемый PHP CSS препроцессора, поможет вам задействовать мощности CSS3 с гораздо более меньшим кодом в особенности вложенности, учитывая особенности браузеров на стороне сервера. Инструмент требует PHP5.
JavaScript инструменты
Modernizr 2
Modernizr является широко используемым открытым исходным кодом JavaScript библиотеки, которая помогает вам создавать веб-сайты по стандартам HTML5 и CSS3.
yepnope.js
Условный загрузчик который очень быстро работает и позволяет загружать только сценарии, которые необходимы вашим пользователям в данный момент.
FitText
FitText это jQuery плагин предназначенный для гибкой настройки макетов, который позволяет динамически изменять размер отображаемого текста по размеру его родительского элемента. Хорошее решение для создания заголовков, которые будут хорошо выглядеть везде, от малого мобильного устройства до 30-дюймового экрана.
jQuery Waypoints
jQuery Waypoints это небольшой jQuery плагин, который выполняется всякий раз, когда вы выделяете элемент.
jQuery Plugin Boilerplate
Плагин позволяет реализовать публичные и частные методы, а также публичные и частные свойства, что позволяет с его помощью легко создавать простые и сложные jQuery плагины.
ligature-js
Данный скрипт позволяет преобразовать текстовые шаблоны в общие типографские лигатуры, проходя через текст на веб-странице и вставляя лигатуры, где это уместно.
Placeholder jQuery Plugin/Polyfill
Данный jQuery плагин обеспечивает поддержку для нового HTML5 атрибута формы placeholder="" в веб-обозревателях, которые изначально не поддерживают его (IE и др).
StronglyTyped
JS библиотека, которая позволяет вам задать строго типизированные свойства различных типов (Number, Boolean, String, и т.д.) и констант (окончательный свойства в Java). Он использует ES5 методы Get и Set и возвращает обратно регулярные, слабо типизированные свойства в неподдерживаемых браузерах.
Kaffeine
Набор расширений JavaScript синтаксиса, который пытается сделать его использование лучше. Он компилируется непосредственно в JavaScript, который является очень похожим стандартным кодом, линия в линию, эквивалентным входным данным.
Crossroads.js
JS библиотека направления, подобная утилитам присутствующим в таких фреймворках как Rails, Pyramid, Django, CakePHP, CodeIgniter, и т.д. Данный скрипт разбирает входящие данные URL и решает, какое действие должно быть выполнено, что позволяет избавиться от многократных образцов.
Doctor JS
Doctor JS анализирует ваш коде JavaScript и предоставляет вам полный анализ в JSON, имеете ли вы дело с полиморфизмом, прототипами, исключениями или обратными вызовами.
HEAD.js
Скрипт, который ускоряет, упрощает и модернизирует ваш сайт - краткое решение универсальных проблем. Вы можете загрузить сценарии как образцы, а также безопасно использовать HTML5 и CSS3.
Hivelogic
Размещение вашего адреса электронной почты на веб-сайте является легким способом получить на него большое количество спама. Данный инструмент помогает защитить адреса электронной почты, преобразовывая их в зашифрованный код JavaScript так, что только человек, использующий реальный браузер, будет видеть их. Альтернативное, более здравое решение - Mollom.
JavaScript Garden
Проект JS, который дает советы, как избежать частых и редких ошибок, проблемы производительности и плохие методы программирования, с которыми JavaScript программисты могут столкнуться при изучении данного языка программирования.
Syntaclet
Нажимая на Syntaclet закладку, вы можете автоматически просматривать весь подробный синтаксис языка, подсвеченный с номерами строк по всему коду на странице.
Bookmarkleter
Этот инструмент создает закладки из JavaScript кода - удаляет переносы и пустые строки, дополнительные пробелы, кодирует в URL специальные символы ASCII и помещает код в функцию обертки (если не сделанный). Также можете ознакомиться с аналогичным инструментом Bookmarklet Crunchinator.
Сетки
The JavaScript Grid
Сетка основанная на JavaScript наложении - просто перетащите нужный блок в панель закладок, откройте ваш URL и нажмите кнопку закладки.
Grid Calculator
Калькулятор, который поможет вам легко создать свою собственную сетку и загрузить ее для Adobe Illustrator или для Adobe Photoshop.
GridCalc
Этот удобный в работе калькулятор сетки позволит вам загружать конфигурацию как файл CSS, который вы можете использовать в своем проекте, просто указав желаемую ширину вашей страницы и диапазона aproximate для вашей колонки, а также ширину отступа. После чего вы получите все возможные комбинации в пределах заданных параметров, что даст Вам хорошее визуальное представление результатов использования того или иного варианта.
Modular Grid Pattern
Этот инструмент позволит вам создать шаблон сетки для Adobe Photoshop и других редакторов. Укажите необходимые параметры ширины сайта, ширины и высоты модуля, ширину отступа, и число модулей (колонок), после чего вы получите финальный образец для экспорта в Adobe Photoshop. Вы также можете загрузить результат в формате PNG.
Susy
Фреймворк, который позволит вам создавать полностью пользовательские сетки, основанные на ваших требованиях к дизайну.
Griddle.it
Быстрый и простой способ выровнять свои макеты. Все, что вам необходимо сделать - это подставить ваши размеры в конце URL. Сетки создаются на лету, так что любая комбинация должна работать.
В заключении
Правила вызова ASCII для программистов
Большинство программистов используют ASCII на своих веб-сайтах и знают как использовать их в их собственной работе. Но сколько знает как их вызвать? Эта статья дает довольно полное изложение вызова общих символов ASCII.
Волны
Хотите преобразовать ваш рабочий стол или оживить вашу работу чем то ярким? Юрий Вишневский создал эту экспериментальную, интерактивную анимацию. Вы можете провести минуты, играя вокруг с этой анимацией, основанной на HTML5 стандарте: никакого Flash в использовании.
Комбинация
Хотя это и не имеет никакого отношения к CSS, HTML или JavaScript, но это интересно. Используя старый добрый формат GIF и комбинируя его с форматом JPG, можно добиться отличных результатов для анимации частей фотографии. Посетите статью «Positioning an animated gif over a jpg image». Эта короткая обучающая статья объясняет, как экономить на байтах, совмещая GIF и JPEG вместе, не теряя слишком большое качество.
