Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.

Благодаря нововведениям HTML5 создавать Drag and Drop интерфейсы стало гораздо проще. К сожалению, эти нововведения еще не обладают обширной поддержкой браузеров, но надеюсь в скором времени это изменится (на данный момент работает в Firefox 4+, Chrome и Opera 11.10).

Приветствую всех!
Так как тема e-commerce здесь достаточно популярная, что в общем-то логично, хотелось бы со своей стороны (максимально возможное объективное мнение представителя одной агрегаторской компании) рассказать про прием платежей. В частности, удаленные способы оплаты.
Наверняка, все и так уже многое знают, но я попробую рассказать по каким критериям проще всего сравнить всех игроков рынка и на что обращать внимание при подключении, в зависимости от типа бизнеса.

Статья посвящена плагину, который упрощающает жизнь client-side программиста.

При заполнении формы случается так, что учитывая введенные данные, форму нужно менять (прятать и показывать поля). Простейший пример: при заказе доставки товара пользователь выбрал «самовывоз», значит поля про адрес доставки можно спрятать, зато было бы здорово показать карту проезда для самовывоза.

И что дальше

Часто такая логика остается без реализации, однако если вы заботитесь о своих пользователях, то делать это нужно.

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

Второй подход это писать «портянки» javascript'а который всю эту логику реализует на стороне клиента. Особенно грустно писать «каскадную» логику типа «если ввели a в поле A, показать B, если ввели c в поле B, то показать D. Если в A ввели что-то другое, спрятать B, а потом D».

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

Для проверки текстовых полей на валидность обычно используют регулярные выражения. Существует несколько наиболе распространенных видов таких даных, как например номер кредитки, дата в определенном формате и т. д. На сайте html5pattern.com собирается коллекция регулярных выражений для таких данных (там это позиционируется, как возможное содержимое html5-атрибута pattern у inpit-элементов, но эти регулярные выражения можно использовать и для привычной валидации с помощью javascript). Актуальные для российской аудитории примеры, вместе с соответствующими регулярными выражениями вы можете посмотреть под катом.

Однажды, nickivanov нарисовал миниатюры для кучи разных флагов и выложил их в свободный доступ. А недавно, artpolikarpov собрал их в один спрайт и написал к нему удобный css, который позволяет легко отобразить любой флаг просто указанием нужного класса.

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

И был бы этот топик топиком-ссылкой, да по необъяснимым причинам не разрешает Хабр в топиках-ссылках указывать авторов, заслуживающих похвал. Так что вот они ссылки:
Описание: artpolikarpov.ru/projects/flags
Архив с флагами: artpolikarpov.ru/projects/flags/flags.zip

Люди в течение многих веков упорядочивали важные знания, которые теперь составляют основу правил дизайна. Это знания об общей природе положительных реакций человека. Дэвид Хьюм назвал такую природу «постоянными и универсальными принципами человеческого естества». Правила универсального дизайна не всегда могут быть мерилом всех вещей, но они могут помочь добиться успеха в различных сферах деятельности, включая коммуникации, производство, услуги, технику, искусство и природоохранное проектирование.

В HTML5 есть замечательный атрибут — placeholder (текст-подсказка для элементов ввода). Задается он следующим образом:

<input type=«text» placeholder=«type here some text» />

Обычно этот текст отображается серым цветом, но допустим у нас есть необходимость стилизовать этот текст с помощью CSS.

Вчера вечером добавил интерфейс взаимодействия с Робокассой в свою CMS.

Кратко о платежной системе

Робокасса — интегратор платежных систем. Она позволяет организовать прием платежей в пользу магазина через множество известных электронных валют (Webmoney, ВКонтакте, ЯндексДеньги, Деньги@Mail.Ru, RBK Money и другие), через терминалы оплаты ЭлексНет, и, самое главное — через SMS.

Доступно два варианта подключения — для юридических лиц и ИП, с выводом денег из системы на расчетный счет и для физических лиц с возможностью вывода в электронные валюты.

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

Недавно, прочитав про мини-фреймворк Silex, я подумал: а что в нем сложного? Попробовал написать нечто подобное и получилось довольно легко.

Не секрет, что писать CSS для многих стандартных кнопок, макетов, etc. бывает весьма лениво. Ниже представлена подборка генераторов CSS (и не только), которая, возможно, в некоторых случаях сможет упростить кому-то жизнь. Многими генераторами можно успешно пользоваться даже без глубоких познаний CSS.

(Осторожно! Много картинок)

Здравствуйте.
О важности регулярного резервного копирования уже сказано очень много слов. В этой статье мы предлагаем вниманию читателей примеры простых скриптов для бэкапа файлов и баз данных MySQL с последующей выгрузкой архивов на удаленный FTP-сервер.
Несмотря на то что мы в NQhost предлагаем решения по сохранению snapshot'ов VPS-контейнеров, процесс бэкапа собственными силами — безусловно важнейшая вещь.

Скорость загрузки веб-сайтов всегда была важной темой, но стала еще более актуальной с апреля 2010 года, когда Google стал учитывать её при ранжировании сайтов в поисковой выдаче. Однако, основной уклон, как правило, делался на уменьшении размера файлов, оптимизации параметров сервера, CSS и Javascript.
Также имеет место еще один немаловажный фактор. Это скорость, с которой веб-страницы формируются на сервере. Большинство крупных современных сайтов хранит всю информацию в базах данных и используют различные языки (например, PHP или ASP) для её извлечения, формирования HTML-страницы и отправки её браузеру.

Crosspixel — небольшая программка на Javascript (около 15 Кб), которая показывает макет поверх вёрстки; как PixelPerfect для Firefox, только работает в любом браузере :)
Работает так:

1. скачайте crosspixel.js и подключите в ваш html-файл;
2. укажите путь до вашего файла-макета и его размеры;
3. в браузере появится панелька, которая позволяет показывать/скрывать макет (при показе меняет размер окна браузера под макет, при сокрытии восстанавливает прежний размер), менять его прозрачность.

Проект на GitHub

Привет, собственно, этот пост я решил написать в ответ воот на это сообщение из песочницы.
Я не считаю себя профи в программировании, хотя иногда очень хочется, но все-же, я считаю, что неправильно таким способом строить деревья).
Я Буду строить не дерево комментариев, а дерево меню. Мой способ построения меню легко модифицировать и для построения дерева комментариев. Меню может иметь любое количество вложенных подменю. Моя структура таблицы меню такая:

Не так давно на хабре был топик, который привел на наш сайт 17 тысяч посетителей за два дня (11,828+5,100 on October 21, 2010). С 2009го года эта уже не первая волна, а последние иконки будут нарисованы в первой четверти 2012го года. Best reseller hosting providers.



Не хватает еще 1000 иконок для best email hosting. Готовы ли вы предложить метафоры, которых у нас еще не хватает? Тогда follow me…

Вы PM. Как узнать – готова ли вёрстка к реальному использованию?
Вы заказчик. Как убедиться, что работа выполнена качественно?
Как оценить качество вёрстки?

Когда я стал тим-лидом, а позже PM, передо мной стала задача проверять вёрстку наших проектов. Нужно было выработать формальные, легкопроверяемые критерии, соответствие кода которым, должно было давать некую гарантию, что не будет факапов и ни клиент, ни программеры не сказажут потом “WTF?”.

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

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

Итак что же это за список?

Краткая версия теперь доступна на html5checklist.com (github), где можно вносить pull-request'ы.

История обновлений:

• 2015/08/11: Актуализировал рекомендации по оптимизации скорости загрузки. Добавил требование поддержки Retina. Дополнил «19. Мелочи» требованием что изображения должны масштабироваться в зависимости от размера окна.
• 2015/08/10: актуализирован список исключений для CSSLint
• 2015/07/29: актуализирован пункт №13 «плохо»/«хорошо»
• 2015/04/08: добавлено требование использования препроцессоров и рекомендация использования систем сборки
• 2013/04/25: добавлены анализаторами качества кода: CSSLint и JSHint, указан сайт подбора css font stack (спасибо @fliptheweb), мелкие уточнения (работу интерактивных элементов страницы, что не пропадает фон на высоких разрешениях, не должно быть пустых презентационных блоков, при проверках контента — пробовать удалять заголовки, менять местами блоки)
• 2013/04/24: добавил пункт об минимизации каскада (БЭМ-техники, MCSS, SMACSS), необходимости вписывания в экран моб. устройства, заменил ссылку на проверочный текст отображения стандартного html на код с normalize.css, поправил пример где в рекомендации встречался длинный каскад, упомянул про Opera на Presto и новый уровень семантики — в именах классов BEM.
• 2012/04/12: отсортировал пункты проверки в порядке важности, выделил главные, дополнил статью подробностями
• 2011/12/07: дополнил согласно доклада на WSD Минск'2011.
• 2011/07/19: добавлено про повышение надёжности вёрстки благодаря html5-тэгам, про необходимость favicon/apple-touch-icon, отсутствие багов при ресайзе textarea
• 2011/06/15: добавил пояснения какие ошибки валидации допустимы, рассказал про отсутствие официальной кнопки «HTML5 Valid» и про официальное лого HTML5 на сайте.

Как показывает независимое исследование, около 67 процентов Web-разработчиков на Хабрахабре пишут свои CMS. За свою жизнь ваш покорный слуга написал около пяти-шести CMS-велосипедов, и в процессе работы была с жадностью перерыта масса информации о структуре и принципах работы других CMS, а также придумано несколько своих. Мир CMS полон разнообразных модулей, расширений, компонентов, компонент, плагинов. О том, как разработчики CMS позволяют расширять функционал, и какие термины для этого используются, я и хочу рассказать. Сразу предупреждаю, что нижеследующая информация может и запутать, поэтому термины, которые в контексте разных CMS имеют разные значения, несут в скобках номер, указывающий на то или иное значение. Некоторые принципы, изложенные здесь, могут заставить сморщиться кого-либо. В списке, в основном, перечислен функционал, расширяющий систему. Синтаксис, используемый в примерах, в большинстве случаев выдуман.
Надеюсь, список поможет с организацией принципов работы собственных CMS, подкинет идею или просто заинтересует. Те, кому скучно, могут попробовать угадать, какая именно CMS имелась в виду в каждом конкретном случае (дабы избежать холивара, названия CMS в самом списке не используются, да и в конкретных случах термины могут содержать несколько иное значение).

Эту статью давно стоило переписать (слишком много «экономии на спичках»), но руки не доходят. Пускай весит и напоминает о том, как мы глупы в молодости.
Одним из основных критериев успешности любого интернет-ресурса является скорость его работы и с каждым годом пользователи становятся всё более и более требовательными по этому критерию. Оптимизация работы php-скиптов — это один из методов обеспечения скорости работы системы.
В этой статье я бы хотел представить на суд общественности свой сборник советов и фактов по оптимизации скриптов. Сборник собирался мною достаточно долго, основан на нескольких источниках и личных экспериментах.