Инструменты для экспериментов
Недавно прошла очередная встреча Web Standards Days, на которой я читал доклад про эксперименты с CSS. Там я пообещал поделиться ссылками на то, чем я пользуюсь, в этой заметке я постараюсь привести эти ссылки и чуть-чуть про каждую написать.
Пара моих экспериментов
…Которые я пытался повторить вживую во второй половине встречи.
-
Генератор случайных чисел на CSS будет позже ;)
Редакторы
-
Недавно появившийся, но набирающий обороты редактор. Очень хороший и многообещающий. Кроссплатформенный. Всё говорит за то, чтобы его попробовать.
-
Основной мой редактор для экспериментов т.к. он моментально запускается и там есть live-preview для HTML.
Быстрый предпросмотр
Если не использовать редактор с просмотром изменений на лету, то для экспериментов можно попробовать использовать и иные инструменты:
-
Новый сервис от Lea Verou, что-то вроде jsfiddle, только для HTML и CSS, но с живым предпросмотром и кучей дополнительных няшек (альт+вверх/вниз = изменение числа вверх/вниз, подсказки по цветам, транзишнам и размерам, и т.д.)
-
Отличное решение, обновляющее код страницы на лету при изменениях в соответствующих файлах. Только под мак.
-
Я не пробовал, но, кажется, это что-то подобное и не завязанное на мак (кажется).
-
http://incident57.com/codekit/
Ещё одно решение для макоси, более ориентированное именно на сборку SASS/LESS/Coffeescripе и т.д., но там также есть какие-то зачатки функции обновления страницы при изменении файлов.
-
Firebug, Web Inspector, Dragonfly…
Если нужно быстро что-то сделать, то можно попробовать экспериментировать сразу в браузере: изменения будут применяться моментально. Но усложняется последующий перенос кода в файл и/или написание кода вообще: дополнений к браузерным инспекторам не так много.
Дополнения к редакторам
-
Лучшее средство для быстрого написания HTML. Сильно кроссредакторное: скорее всего получится найти вариант для вашего редактора, если оно там ещё не встроено по умолчанию.
-
В Zen Coding по умолчанию идёт набор сниппетов для написания CSS, но подобные сниппеты — прошлый век. Я сейчас разрабатываю плагин для Саблайма, который позволяет писать CSS очень-очень быстро. Если кому интересно: напишите мне, я, может быть, пришлю ссылку на пре-альфу. Ну или можно просто подписаться на твиттер проекта и подождать публичной альфы.
Полезные букмарклеты и куски кода
Тут, возможно, появится что-то ещё, но пока я оставлю только две ссылки:
-
Пара кусков кода для веб-разработки
Первый добавляет сетку, второй включает через CSS режим редактирования текста на странице в вебкитах. Полезно для отладки резиновости блоков.
-
Букмарклет для редактирования текста на сайте
Перетащите в закладки, более-менее кроссбраузерно включит тот же режим редактирования текущей страницы.
Сервисы
-
Настоятельно рекомендую завести там аккаунт если ещё не. Потом изучить git и хранить там всякие статичные эксперименты. Ну и следить за разными разработками и разработчиками, да всячески участвовать во всяких опенсорсных проектах.
-
Популярный сервис для поделения кусками кода с примерами. Есть версионированность, возможность подключать разные js-библиотеки и т.д., но т.к. сервис очень популярный, то иногда сильно тормозит. И нет живого предпросмотра.
-
Аналог jsfiddle. Тоже неплохой, но тоже без живого просмотра.
Полезные ресурсы
-
Быстрый поиск по Mozilla Developer Network, очень полезный ресурс.
-
Спецификации :)
-
Очень много очень хороших статей про веб-стандарты, куча полезной информации и подробного описания разных свойств.
-
http://lea.verou.me/css3-tools/
Различные инструменты от Lea Verou. Есть редактор кривых Безье для транзишнов/анимаций, тестирование nth-childов, сборник паттернов (полезно для изучения возможностей CSS-градиентов) и многое другое.
-
http://www.colorzilla.com/gradient-editor/
Приличный редактор градиентов, полезен для быстрых прототипов.
Этот список будет иногда дополняться.