суббота, 14 апреля 2012 г.

Все на ZFConf 2012!!!

21 апреля в Москве пройдет очередная ежегодная конференция для веб-разработчиков ZFConf 2012, посвященная популярной платформе Zend Framework.

В этом году с докладом выступит гость из Италии — Enrico Zimuel из Zend Framework Core Team. А также Виктор Фараздаги, Александр Веремьев, Алексей Качаев и многие другие специалисты.

На сайте опубликован полный список докладов и открыта регистрация.

Доклады:

К участию также приглашаются спонсоры и инфопартнеры. По всем предложениям и вопросам пишите, пожалуйста, через форму обратной связи.

Следите за последними новостями:

Организатор: компания Wizartech

Партнеры: сообщество Zend Framework и конференция Frameworks Days

воскресенье, 1 апреля 2012 г.

Модуль управления доступом к меню Menu subtree per role для Drupal 6

Итак, второй модуль, призванный помочь администратору в деле управления доступом к меню на страницах создания/редактирования материала. Описание модуля находится тут: http://olevshin.ru/projects/drupal_6_menu_subtree_per_role.

четверг, 15 марта 2012 г.

Модуль создания маршрутов на Яндекс.Картах Ymaps Routes для Drupal 6

Таки впервые показываю общественности свои наработки для Drupal. К сожалению, пока что активно пользую 6-ю ветку, но руки уже начали тянуться к 7-ой. Все проекты будут хоститься на ГитХабе (https://github.com/LordotU). Со временем, может быть, они замайнтейнятся на Drupal.org, но не сейчас.

Первые модуль - это модуль создания маршрутов на основе Яндекс.Карт. Описание модуля находится тут: http://olevshin.ru/projects/drupal_6_ymaps_routes_module.

суббота, 10 марта 2012 г.

Установка и настройка web-интерфейса Anyterm для терминала под Ubuntu и Apache

Давайте проведем, так сказать, мысленный эксперимент. Представьте, что вы работаете в месте, где с рабочего компьютера очень сложно попасть во вне - вы ограничены только стандартными портами для HTTP, NTLM-аутентификацией и другими штуками, которые делают ваше пребывание в Сети не очень комфортным. Тем не менее, вам кровь из носу нужно достучаться по SSH до домашней (любой другой) машины. В этой заметке я постараюсь рассказать о том, как можно миновать вышеперечисленные ограничения.

Описанный ниже способ не претендует на единственность и оригинальность - это лишь один из вариантов. Например, можно еще поиграться с cntlm и proxytunnel. Но... тут речь пойдет не об этом. Здесь мы попробуем установить на целевую машину Anyterm и сделать его доступным по HTTPS с базовой аутентификацией.

Итак, мне нужно было достучаться до моего домашнего сервачка, на котором установлена Ubuntu 11.04, Apache 2 и остальной зоопарк разного ненужного, а сам он находится за NAT ADSL-роутера. Для того, чтобы он все время был доступен по одному адресу, я зарегистрировал домен третьего уровня на http://dlinkddns.com/.

Для начала Anyterm нужно скачать (http://anyterm.org/download/index.html). Я забирал последнюю dev-версию (1.1.29), так что все описанное справедливо именно для нее. Скачиваем, выполняя, например, такую команду:

svn co http://svn.anyterm.org/anyterm/tags/releases/1.1/1.1.29/ anyterm-1.1.29

Результатом ее выполнения будет папка anyterm-1.1.29, созданная в директории, откуда эта команда исполнялась. Т.к. были скачаны исходные кода, а сама программа написана на C++ с использованием библиотек Boost, то нужно убедиться, что у вас установлено все необходимое для успешного компилирования исходников, а именно: пакеты build-essential, libboost1.42-dev и zlib1g-dev. Все скопом можно установить, выполнив следующую команду:

sudo apt-get install build-essential libboost1.42-dev zlib1g-dev

Теперь, вроде, можно компилировать. Переходим в ранее созданную директорию anyterm-1.1.29 и, скрестя пальцы, выполняем команду:

make

К сожалению, скрещенные пальцы тут не помогут, т.к. процесс компиляции завершится неудачно - все дело в том, что в файле anyterm-1.1.29/libpbe/src/SmtpClient.cc отсутствует строка, которая подключает стандартную библиотеку языка. Её нужно добавить куда-нибудь в начало файла:

#include  //Missed string

После добавления этой пропущенной строки, необходимо выполнить команды:

make clean; make

Дожидаемся окончания процесса компиляции - на выходе получим исполняемый файл anytermd, который было бы полезно скопировать в какую-нибудь директорию типа /usr/local/bin (мой именно там и лежит).

Попробуем провести тестовый запуск свежескомпилированного демона командой:

anytermd -p 7777 --local-only

Запускаем браузер и переходим по адресу http://localhost:7777. Если вы увидели окошко терминала, то все ок и можно продолжать. Теперь необходимо сделать этот терминал доступным извне.

Для этого, как я уже писал выше, понадобится установленный веб-сервер Apache 2 с включенными модулями mod_proxy, mod_proxy_http, mod_ssl и mod_auth_basic. Включить их можно такой командой:

sudo a2enmod proxy proxy_http ssl auth_basic

Модули включили, теперь нужно создать самодписной SLL-сертификат и файл с данными для basic-аутентификации.

Этапы создания сертификата следующие: создание ключа, создание CSR (запроса на сертификат, в котором содержаться некоторые данные о сервере), подписание сертификата. Создаем какую-нибудь директорию для этого добра, переходим в нее и начинаем последовательно выполнять команды:

sudo openssl genrsa -des3 -out server.key 1024 #В конце два раза вводим парольную фразу
sudo openssl req -new -key server.key -out server.csr #Можно просто вводить пустые ответы
sudo openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

Теперь необходимо перенести созданное в правильные папки:

sudo cp server.crt /etc/ssl/certs
sudo cp server.key /etc/ssl/private

Далее, создадим файл с данными для basic-аутентификации. Для этого выполним команду:

htpasswd -mbc /var/www/anyterm/.htpasswd username PassWord #где username - имя пользователя, а PassWord - его пароль

Обратите внимание, что файл .htpasswd создастся в директории /var/www/anyterm, которая должна существовать. Предпоследний шаг - настроить веб-сервер так, чтобы он принимал соединения на 443 порт по HTTPS и перенаправлял их демону Anyterm. Для этого в директории /etc/apache2/sites-available (предварительно веб-сервер должен уметь работать с виртуальными хостами и прослушивать 443 порт) создадим файл anyterm, выполнив команду:

sudo touch /etc/apache2/sites-available/anyterm

Теперь, добавим в свеженький файл строки конфигурации примерно такого содержания:

<IfModule mod_ssl.c>

    <VirtualHost *:443>

        ServerName server

        <Location /anyterm>

             Allow from all

             ProxyPass http://localhost:8022 ttl=60

             ProxyPassReverse http://localhost:8022

             AuthType Basic

             AuthName "Anyterm"

             AuthUserFile /var/www/anyterm/.htpasswd             

             Require valid-user

         </Location>

         SSLEngine on

         SSLCertificateFile /etc/ssl/certs/server.crt

         SSLCertificateKeyFile /etc/ssl/private/server.key

    </VirtualHost>

</IfModule>

Ффух... осталось соовсем немного, потерпите. Дадим веб-серверу знать, что мы добавили новый хост и сделаем ему рестарт:

sodu a2ensite anyterm
sudo /etc/init.d/apache2 restart

Обратите внимание, что сервер попросит вас ввести парольную фразу для ssl-ключа. Теперь остается последний шаг - правильный запуск демона Anyterm. Помните, что мы выполняли тестовый запуск на 7777 порту? Так вот, надо бы остановить его выполнение. Самый простой способ - это посмотреть идентификатор процесса при помощи:

ps ax | grep anyterm

И его дальнейшее убийство командой kill:

kill идентификатор_процесса_anyterm

Запустим демона заново:

anyterm -p 8022 --user username #где username - имя пользователя, из-под которого будет вестись работа в терминале

Теперь, сидя на работе, вы спокойно можете постучаться на домашнюю машину. Для этого достаточно в адресной строке браузера вбить https://ваш_ip-адрес/anyterm (или https://ваш_домен.служба_динамических_dns:проброшеный_порт, если у вас ADSL без статичного IP и сервер находится за NAT) - и вы увидите родной терминал. :)

Вот, вроде, и все. Кончено, я мог что-то упустить, но вы можете задавать вопросы, которые могут появиться по ходу выполнения описанного процесса, и мы вместе восстановим справедливость и найдем истину.

пятница, 25 ноября 2011 г.

Еще одна мысль на тему, почему Lorem ipsum калечит Ваш дизайн

Я знаю, что сейчас Вы подумали что-то, типа: "Ооо, еще один пост на тему того, как важен контент, и что в дизайне должна использоваться копия реального текста... Ну а если клиенты не отдали мне текстовку, но все равно хотят, чтобы я что-то им показал? Как тут быть, а?"

Оокей, не волнуйтесь. Я тут не для того распинаюсь, чтобы давать Вам непрактичные советы или рассказывать то, что Вы и без меня прекрасно знаете. Я знаю, что если бы дизайнеры имели реальный контент, то они ни в коем случае не стали использовать Lorem ipsum, и с этим не поспоришь. Но, если все-таки Вас вынуждают использовать текстовую рыбу, то... вместо Lorem ipsum, Hipster ipsum, или Samuel L. Ipsum, я считаю, что Вы должны использовать первый абзац любой случайной статьи из Википедии.

Чтобы понять, зачем, давайте рассмотрим простой текст. Пожалуйста, внимательно прочтите следующее:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in the answer is purple voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

А теперь, если я спрошу, какой мой любимый цвет, то Вы сможете мне ответить?

А ведь ответ есть в прочтенном Вами тексте!

Как же так? Все потому, что как только Ваши глаза наткнулись на незнакомые латинские слова, то они просто соскользнули в его конец и Вы почти мгновенно прекратили чтение. Поверьте, Вы не сможете настроить свой мозг так, чтобы он смог переварить такую тарабарщину, как 100500 латинских слов.

Просмотр против Чтения

Как правило, Вы, как и Ваш клиент, игнорируете целые абзацы, не уделяя внимания многим мелочам. А происходит это потому, что Вы не читаете, а всего лишь просматриваете текст.

С другой же стороны, какая-нибудь интересная статья с Википедии или какая-нибудь новость смогут пробудить Ваше любопытство и заставят Вас внимательно прочитать [себя] текст.

Почему Латынь?

Сейчас, я так полагаю, большинство людей используют рыбу Lorem Ipsum, даже не зная, откуда пошла такая практика - раньше этот текст использовали в книгопечатании в качестве заполнителя.

Но нужна ли нам сейчас эта рыба? Я уверен, что большинство людей сможет отличить выдуманный контент от настоящего. И наихудшим вариантом развития событий может стать то, что Вы случайно оставили рыбу на какой-нибудь странице сайта. Но ничего, Вы ведь сможете легко ее заменить на реальный контент. (А представьте, если бы это была печатная продукция?)

Так что... я считаю, что реальный и интересный текст, который заставляет в себя вчитываться, способен гораздо сильнее сконцентрировать внимание человека на мелочах типографики, нежели какая-то там рыба, написанная, к тому же, на латыни.

Источник: http://www.attackofdesign.com/why-lorem-ipsum-is-hurting-your-designs/

четверг, 3 ноября 2011 г.

Об атрибуте scope в HTML5

В спецификации HTML5 был добавлен новый атрибут scope для тэга <style>. Итак, эта заметка о том, как работает этот новый атрибут и как это можно использовать.

Этот атрибут, исходя из названия, используется для того, чтобы ограничить область действия стиля, для которого он (атрибут) указан. Область действия стиля с таким атрибутом будет распространяться на родительский элемент, внутри которого находится тег <style> этого стиля, и всех дочерние элементы этого родителя. Все элементы снаружи области действия будут проигнорированы даже в случае полного совпадения селекторов. Этот атрибут принимает булевские значения, так что указывать его можно либо как просто scope для HTML, либо как scope="scoped" для XML/XHTML. Вот небольшой пример использования этого атрибута:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <title>Пример использования атрибута scope</title>
        <style>
            p { color: black; }
        </style>
    </head>
    <body>
        <p>Цвет текста в этом параграфе будет черным.</p>
        <div>
            <style scoped>
                p { color: green; }
            </style>
            <p>А здесь - зеленым.</p>
            <p>И тут!</p>
        </div>
        <p>А тут - снова черным.</p>
    </body>
</html>

В браузерах, которые поддерживают этот атрибут, цвет текста в тех параграфах, что внутри <div>, будет зеленым, в остальных же - черным. Любой стиль, внутри тега <style> с ограниченной областью действия, будет применен только к его родителю (в данном случае - к <div>) и всем дочерним элементам этого родителя (в данном случае - к двум <p>).

И, еще небольшое уточнение. Любые общие правила (т.н. @-правила) игнорируются за пределами ограниченных стилей. Например, если внутри ограниченного стиля мы подключили какой-то шрифт посредством @font-face, то этот шрифт не получится использовать для элементов вне области действия данного стиля, даже если явно указать в свойстве font-family имя данного шрифта.

Зачем использовать стили с ограниченной областью действия?

Первый вопрос, который может возникнуть в голове у верстальщика, узнавшего про scope: "Где я могу это использовать?". Когда мы вставляем код стилей в HTML, то это не сильно, на первый взгляд, отличает scoped-стили от обыкновенных inline. Не надо путать эти два понятия.

Вот пара ситуаций, в которых можно было бы применить <style> с атрибутом scope. Первая - это какие-либо html-демо на странице. Чтобы не париться с различными блоками и их id, достаточно просто создать стиль с ограниченной областью действия и вставить его прямо в страницу. Это может пригодиться лишь немногим веб-разработчикам, но, тем не менее, использование новых возможностей в такой ситуации - очевидно.

Другая ситуация - это использование scoped-стилей для элементов управления богатых функционалом веб-приложений, для обеспечения самодостаточности этих элементов. Хотя существует множество фреймворков, которые призваны решить проблемы элементов интерфейса веб-приложений, да может и Shadow DOM стандартизируют, но, тем не менее, scope - тоже решение.

Какими браузерами это поддерживается?

Кхм... да пока никакими! Только работы по поддержки этого свойства в WebKit идут...

Было бы неплохо...

Основная критика, которую народ высказывает по поводу scope - это то, что новая возможности практически ничем не отличается от inline-стилей. Возможно, было бы логично сделать что-то вроде такого: <link rel="stylesheet" href="style.css" scoped for="scoped-element" />, - где вместо "scoped-element" был бы id родительского для этого стиля элемента. Но, умные люди, видимо, знают, почему так сделать нельзя. А жаль...

Источник: http://dstorey.tumblr.com/post/11405550112/scoped

пятница, 23 сентября 2011 г.

Дорогие клиенты, Веб изменился! Пришло время использовать HTML5 и CSS3

Отсебятина

Немного капитанская на мой взгляд статья, но раз уж перевел, то почему бы не выложит.

Отношение к разработке

Приблизительно 40% времени разработки сайта уходит на то, чтобы сайт выглядел одинаково, пиксель в пиксель, во всех браузерах. Мы хотим, чтобы все браузеры показывали посетителю одно и то же (ну, или очень похожее). Но нет никаких гарантий, что на мобильных устройствах все будет хорошо.
Раньше при разработке сайта все были уверены, что он должен отображаться идентично всегда и везде.
Теперь мы должны понимать, что знакомый нам Веб изменился. Мы уже не в 2004 году, когда разработка велась в основном под IE 6 на PC. Сегодня Веб охватывает множество устройств, включая мобильные телефоны, телевизоры, портативные компьютеры и Маки. Так что, наши сайты должны отображаться на разных устройства в соответствии со спецификой их платформы.
Стремясь сделать внешний вид вашего проекта идентичным только во всех десктопных браузерах, вы делаете его менее доступным.

Валидность кода

Валидация – это всего лишь инструмент, а не религия, которой нужно слепо следовать. Если хотите ознакомится с этим утверждением поближе, то прочитайте статью Джефри Вэя «But It Doesn’t Validate».
Сайт, код которого полностью валидный, не будет более доступным для пользователей, и не факт, что он будет корректно отображаться во всех браузерах. Но валидация на доступность и юзабилити не будет излишней.
Google утверждает, что валидность не влияет на результат поисковой выдачи. Но на эти результаты отчасти влияет то, насколько сайт доступен на различных платформах. Если хотите, то можете посмотреть ответ Мэтта Ката на вопрос о том, почему google.com не проходит валидацию W3C.

Так как же нам вести разработку сегодня?

  • Мы должны использовать HTML5 и CSS3 для того, чтобы наши сайты были более дружелюбны к современным устройствам, чтобы они были доступны и удобны для пользователей;
  • В связи с этим, процесс разработки ускоряется, что позволяет заканчивать проекты быстрее и делать их очень качественными;
  • Такие изменения используемых технологий позволяют экономить деньги клиентов;
  • Спроектированные таким образом сайты будут более перспективными;
  • Эта методология ускоряет разработку и уменьшает стоимость проекта.

Контент – важнее всего!

Наиболее важные принципы, которых стоит придерживаться – это:
  • Доступность. Каждый сайт должен состоять из чистого HTML-кода, чтобы быть доступным на любом устройстве. Это подразумевает доступность контента везде и всюду.
  • Удобство. Удобство восприятия информации также важно. Если сайт будет доступен, но не удобен в использовании, то это очень плохо (и может даже повлиять на результаты поисковой выдачи Google).

Различия между браузерами

На скриншоте выше вы можете увидеть, как один и тот же сайт может выглядеть в разных браузерах на различных устройствах. Слева направо вы видите:
  • IE6, браузеры и устройства, которые не поддерживают CSS;
  • Устаревшие версии браузеров, такие как: IE7-8, FF2, Chrome, Opera и Safari;
  • Все современные браузеры, типа FF3.6, Chrome, Opera и Safari;
  • CSS 3-D-анимация, которая на данный момент доступна только в Safari, но вскоре должна появиться в FF и Chrome.

Адаптивный дизайн

Адаптивный подход к дизайну подразумевает немного другое отношение к созданию сайтов и увеличивает время разработки. Тут вы должны делать сайт с резиновой шириной такой, что взаимодействие с ним пользователя будет зависеть от разрешения экрана устройства, с которого ведется просмотр. Такой подход включает в себя ориентацию на различные размеры экранов устройств, начиная от смартфонов и заканчивая широкоэкранными PC и Маками. Вот главные категории устройств, на которые стоит ориентироваться при таком подходе:
  • Смартфоны;
  • iPad в портретной ориентации, различные планшеты;
  • iPad в ландшафтной ориентации, PC и Маки с экранными разрешениями около 1024 пикселей;
  • Широкоэкранные дисплеи.

Подводя итоги

Если просто, то нужно работать над тем, чтобы контент сайта был доступен всегда, чтобы сайт был современным и перспективным. Вы можете найти некоторую статистику использования браузеров и развития тенденций в этой сфере. Использование мобильных платформ на июнь 2010 года:
Opera iPhone Nokia iPod Touch Blackberry Android
26.35% 18.05% 15.84% 8.69% 14.41% 6.69%
Также можно наблюдать сокращение доли IE, который уступает место другим браузерам.

Рассказывайте вашим клиентам о HTML5 и CSS3

Итак, вы должны помочь своим клиентам понять, почему нужно делать так, а не иначе, чтобы они не боялись перемен. Надо работать в этом направлении и быть честным клиентом уже в начале работы, и они поймут, что так делать правильно.

четверг, 1 сентября 2011 г.

Полезные инструменты для работы с HTML, CSS и JS: часть 2

Инструменты для работы с JS

Modernizr 2
Modernizr – это широко используемая, открытая JS-библиотека, которая помогает вам использовать HTML5 и CSS3 при разработке сайтов. Начиная со второй её версии, вы можете совместно использовать механизм определения функционала браузера, media queries и загрузку ресурсов по требованию. Это дает вам мощь и гибкость для оптимизации при любых обстоятельствах.

yepnope.js
Условный загрузчик, который позволяет загружать только те скрипты, которые действительно необходимы в данный момент.

FitText
FitText – это плагин для jQuery, который предназначен для отображения текста таким образом, чтобы он заполнял все пространство родительского элемента. Отлично подходит для создания заголовках, которые будут выглядеть одинаково красиво как на огромной панели, так и на экране мобильного устройства.

jQuery Waypoints
Это маленький плагин для jQuery который позволяет выполнить какую-либо функция, когда пользователь доскроллил до определенного элемента.

jQuery Plugin Boilerplate
Этот шаблон уже содержит в себе реализацию public- и private-методов, а также набор public- и private-свойств, которые могут пригодиться для комплексной разработки плагинов для jQuery.

ligature-js
Эта библиотека предназначена для конвертирования символов текста в типографские лигатуры с последующей вставкой их на страницу.

Placeholder jQuery Plugin/Polyfill
Этот jQuery-плагин обеспечивает поддержку нового атрибута форм в HTML5 – placeholder="", - в браузерах, которые его не понимают (речь идет, конечно, об IE).

StronglyTyped
Эта библиотека превращает JavaScript в некое подобие строго типизированного языка.

Kaffeine
Это набор расширений для JS, которые добавляют в язык некоторый синтаксический сахар.

Crossroads.js
Библиотека, предназначенная для диспетчерезации URL-адресов, написанная на JS.

Doctor JS
Doctor JS анализирует ваш JS-код и выдает отчет о проделанной работе в формате JSON.

HEAD.js
Это скрипт, который предназначен для ускорения, упрощения и модернизации сайта – это набор различных универсальных решений. С ним вы сможете загружать скрипты, как обычные картинки, а также безопасно использовать HTML5 и CSS3.

Hivelogic
Публикация e-mail-адреса на сайте в открытом виде – не лучшее решение, т.к. можно нагрести кучу спама в свой почтовый ящик. Эта библиотека предназначена для безопасной публикации e-mail на страницах сайта, так что их увидят только реальные люди, а не спам-боты. Более надежным решением данной проблемы является сервис Mollom.

JavaScript Garden
Это сервис, который создавался с образовательной целью. Он содержит информацию о распространенных ошибках, которые допускают разработчики, только что начавшие изучение языка.

Syntaclet
Этот букмарклет предназначен для подсветки кода, который может быть вставлен в элемент textarea. Один клик – и вы видите подсвеченный в соответствии с выбранным синтаксисом код, строки которого пронумерованы.

Bookmarkleter
Этот сервис предназначен для создания букмарклетов из JS-кода. Он убирает переводы строк, табуляцию, ненужные пробелы, кодирует URL и помещает код в функцию-обёртку.

Bookmarklet Crunchinator
Крутая тулза, которая также поможет вам создать букмарклет из JS-кода.

суббота, 27 августа 2011 г.

Полезные инструменты для работы с HTML, CSS и JS: часть 1

Разработка клиентской части веб-приложения – штука занятная: учиться ей не сложно, но, чтобы стать профессиональным разработчиком, придется постараться. Она состоит из огромной кучи всевозможных вещей, которые необходимо учитывать; безумного количества настроек, которые нужно применять то там, то сям; большого количества деталей, не обращать внимания на которые просто нельзя, если хочешь сделать все правильно… К счастью, разработчики и дизайнеры придумали множество полезных утилит, библиотек и приложений, которые помогают нам, простым смертным, в этом нелегком деле освоения клиентской веб-разработки. Такие инструменты являются ценными и полезными, поскольку они экономят наше время при автоматизации рутинных задач и, следовательно, помогают нам сосредоточиться на более важных вещах.

Инструменты для работы с HTML и CSS

MHTML Email Boilerplate
Примеры кода на этом сайте помогут вам справится с наиболее распространенными ошибками, которые встречаются при верстке HTML-макетов писем почтовой рассылки.


Initializr
Этот инструмент позволяет вам сгенерировать HTML5-шаблон, основанный на HTML5 Boilerplate. Вы можете решить добавить ли в него образец содержимого, использовать jQuery или чистый JS, указать различные совместимости и настройки сервера. На выходе вы получите шаблон, который сможете применить для нового проекта.


Layer Styles
Это симпотичный и простой инструмент для создания CSS-кода. Он позволяет добавлять тени, фон, границы блока, закругление уголков и генерирует кросс-браузерный CSS-код.
Mobile Boilerplate
Шаблон, который позволит создавать вам насыщенные и производительные мобильные приложения. Используя этот инструмент, вы получите кросс-браузерный код для новых мобильных устройств, а также поддержку устаревших платформ Symbian, Blackberry, IE mobile.


Kotatsu
Простой генератор HTML-таблиц, который позволит вам легко и просто присвоить необходимые классы столбцам и строкам. Если же вам нужен простой генератор списков, то посмотрите вот тут.


Vogue
Этот инструмент позволяет перезагружать стили на странице во всех браузерах и может быть настроен для одновременной перезагрузки стилей во всех открытых браузерах одновременно. Для того, чтобы воспользоваться данным инструментом, необходимо установить NodeJS и npm.


LiveReload
LiveReload применяет изменения CSS/JS-файлов страницы в Safari и Chrome без ее перезагрузки и перезагружает страницу, если был изменен ее HTML-код. В качестве альтернативы этому инструменту можно использовать библиотеку Live.js, задача которой отображать только актуальную версию страницы, над которой вы работаете в данный момент.


css-x-fire
Интересный инструмент, который позволяет применять в IDE CSS-свойства, которые были установлены «на лету» через FireBug. Таким образом, разработчик может сосредоточится на работе с CSS, избегая процесса обновления страницы.
Ffffallback
Букмарклет, который позволяет вам тестировать различные наборы шрифтов, пока не будет достигнут удовлетворительный результат. Работает он так: производится сканирование CSS открытой страницы, а затем создается ее клон, с которым вы можете спокойно работать.


LESS.app for Mac OS X
LESS добавляет в стандартный CSS переменные, вложенные правила и операторы. Это приложение делает работу с LESS еще проще и позволяет компилировать less-файлы в стандартный CSS.


Less-Boilerplate
Шаблонный CSS, написанный на LESS, включающий в себя CSS reset, CSS3-хелперы и многое другое.


Needle v0.1a1
Neddle представляет собой удобный инструмент для тестирования CSS путем снятия скриншотов различных частей сайта и сравнения их с эталоном. Также этот инструмент предоставляет средства для тестирования рассчитанных CSS-значений и позиционирования HTML-элементов.


inuit.css
Это CSS-фреймворк, который содержит полезные советы, приемы и практики в одном файле.


Spritemapper
Это приложение необходимо для слияния нескольких изображений в одно (спрайт) и генерации соответствующего CSS-кода, в котором будет расписано позиционирования для отдельных частей общего изображения; такой подход необходим для уменьшения времени загрузки страниц.


CSSsitemap System
David Leggett поделился с общественностью кодом основанной на CSS карты сайта, которую они разработали вместе с Andrew Maier.


Normalize.css
Normalize.css использует несколько другой подход к сбросу умолчаний CSS-свойств. Jonathan Neal и Nicolas Gallagher провели некоторые исследования и остановились на том, что не все свойства нужно сбрасывать, но некоторые из них нуждаются в «нормализации».


Holmes
Это инструмент для тестирования правильности разметки прямо на странице. Вам нужно только добавить один единственный класс в тег <body> страницы и вокруг ошибочной разметки появится красная рамка, желтой рамкой обведуться предупреждения, а серой – упраздненные элементы. Также, существует букмарклет, который позволяет holmes.css к любой странице, открытой в вашем браузере.


Zen Coding
Это плагин для редакторов и сред разработки, который позволяет писать разметку страницы в стиле CSS-селекторов.

CSS Stress Testing and Performance Profiling
Andy Edinborough поделился с нами кодом, при помощи которого можно провести стресс-тест на производительность CSS в основных браузерах.

CSS Crush
Препроцессор для CSS. Выполняет много полезной работы при обработке и подключении CSS-файлов на страницу.


CSSPrefixer
CSSPrefixer поможет вам оптимизировать рабочий процесс и сэкономить массу времени при вставке необходимых префиксов CSS-свойств для различных браузеров.


iOS Media Query Previewer
Очень простой и интуитивно понятный инструмент для того, чтобы посмотреть, как будет выглядеть сайт на iPhone и iPad.


CSS Pivot
С помощью этого инструмента, вы сможете добавить свои стили для любого сайта и поделиться своими результатами при помощи ссылки.

PCSS
Написанный на PHP CSS-препроцессор, который позволяет использовать всю мощь CSS3, обходясь меньшим количеством кода.

Спич!

Таки очень давно ничегошеньки не писал... И это "неписание" меня тяготит, т.к. в голове упорно вертится слово "надо", которое, что странно, не идет вразрез с "хочу". Что ж, вернемся пока к переводам, а там - посмотрим, как пойдет. ;)