Я иногда сталкивался с тем, когда web-программист не знал CSS или, скорее, не хотел заниматься облагораживанием своего HTML, который являлся результатом работы разрабатываемого им скрипта. Это натолкнуло меня на мысль, что ему (программисту) не помешало бы иметь при себе некоторое средство для создания «красивых» страниц. Средство должно было бы включать в себя некоторый CSS, возможно, картинки, и подключаться к любому HTML (очевидно, созданному по некоторым определённым правилам). При этом смена CSS (и картинок) на альтернативные не должна была бы приводить к семантически некорректному отображению.
     Вышеобозначенные требования очень похожи на требования к составлению скина для какой-либо системы (в частности, CMS). Но, в отличие от скина, который заточен под конкретный HTML, в нашем случае хотелось бы максимально упростить правила написания HTML, чтобы разработчикам не нужно было держать в голове много сложных правил.
     Таким образом, оговаривая некоторые (небольшие) ограничения на HTML, мы с одной стороны гарантируем программисту, что его код, генерируемый с учётом этих правил, будет корректно оформлен любым сделанным для этих целей CSS, а с другой стороны, оговариваем шаблон изготовления самих этих CSS.

Погода за окном просто требует чего-то горяченького, поэтому воспользовавшись возможностью что-то по исследовать в свободное время, я решил подумать — а можно ли не останавливая скрипт, подменить функцию, которая выполняется? С таким требованием я встретился чуть ранее, при разработке нашего стартапа. У нас был один из внутренних серверов, который заведовал всеми действиями между пользователями в реальном времени. Это обычный РНР-демон-роутер, который обрабатывал запросы от клиентских запросов (внутри сервера), но была одна сложность — в случае, когда я что-либо изменял в коде сервера или обработчиков отдельных команд, демон приходилось перезагружать, что означало отключение текущих клиентов и потеря информации о состоянии сервера (этот вопрос решаемый, конечно). То же самое было в случае ошибки в коде — все подключенные пользователи сразу это чувствовали на себе (хорошо, что все они такие же разработчики, а не реальные клиенты). Можно ли этого избежать?

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

Публикуется по просьбе mdss, который доработал мою версию заглушки для IE6.
Все благодарности лично ему.

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

Обзор технологии

CSS Sprites, на самом деле, — всего лишь расширенное использование технологии background, заложенной еще в спецификации CSS1. Все, до чего додумалось прогрессивное человечество за эти годы — это множественный фон у элементов (как он будет совместим с концепцией CSS Sprites еще придется проверить). Основные свойства, которые мы используем для задания фонового изображения.

• background-image — основная «рабочая лошадка». Именно за ней будущее в виде data:URI, который в конце концов победит CSS Sprites. Но произойдет это нескоро.
• background-repeat — вторая не менее важная составляющая при использовании фонового изображения. Ведь задавая no-repeat для данного свойства, мы намеренно подчеркиваем, что допустимо использование CSS Sprites для «склейки» изображений (по умолчанию используется repeat).
• background-position — «волшебная палочка» для CSS Sprites, позволяющая спрятать или показать определенные части фонового изображения.

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

Плюсы

• Есть прижимающийся к полу футер
• Колонки меню растягиваются по 100% высоте
• Колонок может быть сколько душе угодно
• Колонки могут быть как лево- так и правосторонними, а также совмещенными, например 2 справа и 1 слева
• Ширина как резиновая, так и фиксированная
• Критический минимум хаков
• Не используется Javascript
• Не используются бекграундовые изображения для создания эффекта колонки
• Никаких таблиц
• Одинаковый результат в ie5.5, ie6, ie7, ie8, ff3.5, o10, chrome4 (Если у вас не работает в каком-то браузере — отпишитесь, пожалуйста, в комментах. Исправим и приведем к универсальному виду)

Минусы

• Есть несколько «лишних» блоков. (Я бы и сам рад от них избавиться)
• Есть несколько абсолютно-позиционируемых блоков

Я уже писал про обучение детей программированию на основе Лого. Однако возможен и другой, ещё более “симпатичный” подход – это визуальное программирование, в котором вообще не надо писать текст. Причём визуальное – это не обязательно рисование блок-схем! Например, можно исходить из понятия объекта, который находится в разных состояниях и реагирует на внешние события.

В Майкрософт также задумываются над проблемами обучения детей, в частности, уже писалось про проект Kodu Game Lab. Kodu – это интерактивная среда создания трехмерных игр, доступная одновременно на Xbox 360 и на ПК. Я решил написать о ней подробнее, поскольку начиная с сегодняшнего для любой желающий может скачать и попробовать версию для ПК.

Сегодня (14 января) — дата релиза новой версии популярного JavaScript-фреймворка jQuery. К этому событию мы подготовили свою шпаргалку по API новой версии (1.4), которой хотим со всеми поделиться.

Шпаргалка существует в двух вариантах:

1. Online-вариант с ссылками на описание каждой функции на сайте новой документации
   
2. PDF-вариант для распечатки
   

Привет, .

Недавно, когда запускали Кинобазу, мы помимо способов противодействия хабраээфекту задались ещё одним вопросом, который нас давно интересовал: какая форма логина удобнее всего для большинства пользователей. Для этого мы провели эксперимент: до сегодня всем посетителям сайта предлагалась случайным образом один из 4х вариантов формы логина, каждый из которых состоял из 2х форм. Оценку мы проводили очень просто: по количеству человек, которые всё-таки зарегистрировались через каждый из вариантов форм. Поскольку варианты предлагались случайным образом, чем больше человек зарегистрировалось — тем удобнее форма (или тем меньшее количество людей она отпугнула:).

Итак, участники эксперимента и его результаты:

Закончился 2009 год, начинается новое десятилетие, с чем я от души поздравляю всех читателей! P2P стал одним из важных явлений прошедшего десятилетия, и его популярность уменьшаться не собирается. Например, в 2009 году у двух сериалов — Heroes и Dexter — число скачиваний превысило число телевизионных просмотров. В России p2p-файлообмен, можно сказать, в минувшем десятилетии и появился. Какие-то тренды проходят мимо нас, что-то становится популярнее чем в мире (ICQ, броузер Opera), появившийся в 1999-м году Napster вобщем-то прошел мимо нас, как и LimeWire, а первым популярным P2P протоколом у нас стал ed2k, официальный клиент которого уже давно закрыт, но остались альтернативы типа eMule.

Однажды я зашел на rememberthemilk.com и понял, что хочу такое же контекстное autocomplete меню в свой проект. В результате получился небольшой jquery плагин, который хочу презентовать в этом посте. Работает в ie6+, opera, safari, firefox, chrome (тестировал в последних версиях). В кратце расскажу в чем суть «контекстного» меню в RTM-стиле.

Это меню присоединяется к input-элементу, но, в отличие от обычных autocomplete меню, оно «всплывает» не для ввода всего значения элемента, а для какой-то логической части поля ввода. При этом меню позиционируется непосредственно под автодополняемым текстом. Вот как это выглядит:



Лицензия проекта — MIT / beerware.
Скачать библиотеку с примерами можно тут: js-context-autocomplete.googlecode.com/files/js-autocomplete-v5.tar
Последнюю ревизию забираем тут: svn checkout js-context-autocomplete.googlecode.com/svn/trunk js-context-autocomplete-read-only
Кому интересно поучаствовать в проекте — пишите в личку.
Временное online-demo (upd)

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

Итак, как я и обещал, начинаем цикл статей о разработке барахолки на Codeigniter.
Мы вместе, пошагово будем разрабатывать барахолку.

Перевод статьи 8 Excellent Tools for Optimizing Your Images
К сожалению на момент перевода один из сервисов перестал работать. Но хабровчане предложили еще много хороших решений!

Одним из самых простых способов уменьшить время отклика страниц на вашем сайте является оптимизация изображений.

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

Недавно появилась необходимость запретить вход кому попало на FTP сервер, то есть заблокировать вход под anonymous. Но содержать отдельную базу с FTP пользователями неудобно, а более того неэффективно. Думал-думал, и решил авторизировать пользователей по учетной записи форума, в моем случае SMF. Пользователи хранятся в MySQL таблице smf_members, имя пользователя в memberName, а пароль в passwd. У ProFTPD есть хорошо документированная возможность получать учетные данные с PostgreSQL / MySQL. Но вот беда, у форума пароли хранятся в хеше SHA1, да и в начало пароля добавляется имя пользователя в нижнем регистре. А ProFTPD ожидает, что ему из SQL-запроса к базе вернется пароль в форматах MySQL PASSWORD(), Crypt, либо Plaintext. Само собой, никакого SHA1 там нет, не говоря уже о том, что к паролю еще добавляется имя пользователя. Гуглил день, другой, все жалуются на подобное, а готового решения никто не предлагает.

Для организации трансляции нам потребуется:

• Linux
• FFmpeg (включает в себя ffserver)

Теория

FFmpeg — это набор свободных библиотек с открытым исходным кодом, которые позволяют записывать, конвертировать и передавать цифровое аудио и видео в различных форматах. Он включает libavcodec, библиотеку кодирования и декодирования аудио и видео и libavformat, библиотеку мультиплексирования и демультиплексирования в медиаконтейнер. Название происходит от названия экспертной группы MPEG и «FF», означающего «fast forward».

© Wikipedia

ffserver идёт в комплекте с ffmpeg и выполняет роль медиа-сервера — получает видеопоток от ffmpeg, который может быть запущен на другой машине, и раздаёт его счастливым пользователям.
Каждый получаемый поток называется Feed’ом (далее будет просто фид). Таких потоков может быть несколько, так же как и отдаваемых (выходных).
FFmpeg у нас будет захватывать видео с веб-камеры или читать из файла.

Зачем мне это было нужно?

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

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

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

Сказано – сделано!

Для сайта был взят вполне заурядный VDS, на котором собран вполне заурядный же серверный набор – nginx спереди, Apache позади.

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

Для работы с SOAP проще всего взять с гуглокода класс nuSOAP (http://code.google.com/p/nusoap-for-php5/).

Затем нам надо сделать две вещи:

1. Отправку на сервер QIWI информации о попытке платежа
2. Прием от QIWI на наш сервер пакета с информацией об изменении статуса платежа.

Документация, жаль, что не очень подробная, есть здесь: https://ishop.qiwi.ru/docs/OnlineStores_Protocols_SOAP.pdf

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

Думаю, каждый из нас с вами сталкивался с проблемой, когда из-за глюка прошивки фотоаппарата, камеры, кпк, смартфона или просто из-за особого устройства /dev/hands карточка была отформатирована, данные были удалены. В свое время данную проблему я решал достаточно просто, используя Portable версию Ontrack Easy Recovery, но так как уже несколько лет являюсь пользователем linux систем, то использование данного нелицензионнного приложения через wine показалось не совсем кошерным, к тому же жажда исследований и приключений требовала найти бесплатный родной аналог для linux систем. Исследования закончились, даже не успев начаться, так как первая строчка в поиске Google привела к набору утилит TestDisk, о которых я расскажу далее подробнее.

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

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

update: Теперь есть электронные версии книг!

Начнём…

1. Используйте DOCTYPE

Лучше всегда прописывать доктайп в заголовке каждой html-страницы, причем, строгий режим рекомендуется:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

для XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

от себя добавлю, что недопускайте никаких сторонних символов перед доктайпом. Ни пробелов, ни переносов строки — иначе появятся странные поля у body и html

Привет всем! Очень странно, что я не нашел на Хабре ничего такого, про что расскажу вам далее…
Это мой первый пост, а потому попрошу сильно не ругать =)

Я думаю, кто-то из вас рано или поздно сталкивался с задачей сделать для своего сайта уникальный дизайн, но, увы, это не так просто осуществить, как хотелось бы. Но с помощью DIVINE всё становиться гараздо проще. Дизайнерам теперь не нужно владеть HTML, CSS и понятием о том, как устроены темы для WordPress