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

А вы знаете, что в 99% приложений и абсолютно всех CPAN-модулях таймеры и таймауты реализованы неправильно? Не верите? Правильно не верите! Есть, есть один CPAN-модуль, с корректной реализацией таймеров: EV. :) (Кстати, это, похоже, единственный CPAN-модуль из всех, реализующих event loop, который знает о проблеме использования fork вместе с event loop, описывает её в документации и даже пытается как-то решать!)

Проблема в том, что для реализации таймеров и таймаутов используются функции, возвращающие текущее время. А текущее время может быть изменено в любой момент в любую сторону на любую величину — админом или NTP-демоном. Поэтому получается так, что, например, таймаут установленный программой на 30 секунд, может сработать либо через 2 секунды, либо через пару суток — смотря как изменится текущее время после установки таймаута (а в особо запущенных случаях может не сработать никогда).

Единственный надёжный способ работать с таймерами и таймаутами — использовать монотонное время:
use Time::HiRes qw( clock_gettime CLOCK_MONOTONIC );
$now = clock_gettime(CLOCK_MONOTONIC);

Поддержка CLOCK_MONOTONIC была добавлена в Time::HiRes (по моей инициативе :)) два года назад. И вот сегодня я снова, как и два года назад, поискал на CPAN модули с правильной реализацией таймеров и таймаутов… и нашёл только один. :(

Сейчас уже много где написано и упомянуто про технику CSS sprites (aka CSS Image Maps). Я не буду открывать Америку и рассказывать о ней дотошно еще раз, а просто хочу привести несколько примеров и полезных ссылок. И пару советов из собственной практики.

Сама техника заключается в том, что мы создаем комбинированное изображение, из которого затем «вырезаем» с помощью свойств background-position нужный нам в данном случае кусок. На текущем уровне поддержки браузерами (я полагаю, что 99,9%) оно является просто must-have для любого уважающего себя интернет-ресурса (ибо позволяет сократить число запросов к серверу, отделить поведение от представления, возложить труд по анимации на CSS-движок браузера, а не на JS-движок, т.е. это будет работать даже с выключенными скриптами, и много-много прочих «вкусностей»). Но обо всем по порядку. Поехали.

читать дальше на webo.in →

Если кто и разбирается хоть немного в человеко-машинных интерфейсах, то это Дональд Норман, профессор, автор книги «Дизайн вещей будущего» и сооснователь Nielsen Norman Group.

Кроме работы консультантом для крупнейших технологических компаний и автопроизводителей, Норман являлся вице-президентом подразделения Advanced Technology Group в компании Apple, известной примерами хорошего потребительского дизайна.

Норман выкроил время из своего загруженного расписания и книжного тура, чтобы поговорить с корреспонденткой CNET News.com о том, что дизайнеры и разработчики делают правильно, что упускают из виду и какие интерфейсы могут быть в технологиях будущего.

Итак, когда же мы избавимся от мышей?
Зачем от чего-то избавляться, если оно хорошо работает?.. Проблема здесь не столько в самой мыши, сколько в задачах, которые требуют длительных периодов повторяющихся движений. Настоящий вопрос состоит в том, как нам взаимодействовать с нашими технологиями? Клавиатура по-прежнему лучше всего подходит для ввода текста, а выбор объектов лучше всего осуществлять через указание курсором.

Примечание: ниже находится перевод статьи «Bring on the tables», в которой рассматривается использование таблиц по прямому назначению и некоторые методы по увеличению их доступности.

UPD: текст статьи полностью убран в связи с его неконтролируемыми преобразованиями с момента публикации.

Последние пару месяцев пишу небольшое Ajax-приложение.

Если коротко, то такой упрощённый браузерный Excel — фильтр сверху, табличка с данными снизу. Пользователь выбирает в фильтре, что он хочет редактировать, в табличку снизу подгружаются данные, пользователь их может редактировать, после изменения данных они отправляются на сервер, там обрабатываются, записываются в базу данных, сервер генерирует новые данные, графики, данные отправляет назад, графики отображаются отдельно в iFrame. До меня это приложение было не аяксовым, а основывалось на обычных формах, и пользователю приходилось ждать новой загрузки страницы после каждого изменения фильтра или данных (так как данные в ячейках зависили от других ячеек, приходилось делать пересчёт после каждого изменения), а мне поручили переделать всё под Ajax. Я не javascript-программист, я из мира Delphi/Builder, где весь интерфейс рисуется без проблем за полчаса, а потом уже пишется логика. Многое мне пришлось изучать на ходу, почти всё пришлось писать самому (вручную рисовать контролы и описывать эвенты на javascript, попутно борясь с несовместимостью или разной реакцией разных браузеров на один и тот же код — брррр, врагу не пожелаешь).

Наткнулся на очень интересную коллекцию валпайперов:


Ну и сама ссылка:
http://mostlysavingmoney.com/cool-firefox-wallpapers/

Часто, когда мы сдаем проект клиенту, мы теряем контроль над HTML-кодом. Иногда клиент использует CMS (Системы Управления Контентом), которые дают ему полный контроль над теми или иными частями HTML-кода. Иногда клиент просто использует наши темплейты для вывода своего кода в документ.
В большинстве случаев довольно тяжело проинформировать клиента о том, как использовать темплейты или CMS, которые вы ему предоставляете, а иногда просто неприемлемо толкать пламенные речи о семантической верстке и веб-стандартах. Клиент может/будет использовать «старую, добрую разметку», ту, которую он знает, просто потому что она работает и выглядит так как он привык. Скорее всего в ней будут присутствовать нежелательные (deprecated) тэги и атрибуты, такие как bgcolor, align и «вечный» font. Эта статья о том, как блокировать нежелательные HTML-тэги с помощью CSS, тем самым аккуратно направляя клиента в правильном направлении.

Для кого эта статья?

Html кодерам – начинающим кодерам поможет повысить
свой профессиональный уровень; оценить текущую ситуацию
в проектах, предупредить негативное течение проекта.Тем, кто
ещё только определяется «быть или не быть» больше вкурить
о профессии html кодер. Те же, кто в кодинге давно врятле
найдут в статье что-то новое для себя, а некоторые вещи
даже могут показаться не достойными внимания. Однако стоит
помнить, что очевидные вещи для одного — это неизвестный
мир для другого, а ваш опыт хорошей практики может быть
выходом из сложной сложившейся ситуации для кого-то.
Руководству – узнать, какие мероприятия стоит провести
в компании для улучшения рабочего процесса, повышения
опыта работников, уменьшения издержек (за счёт уменьшения
перерасхода проектного времени и учёта не просчитанных
ранее активностей) и повышения качества.
Руководителям проектов (Project managers) – поможет
учесть некоторые специфические риски проекта: узнать о
неизвестных ранее поглотителях проектного времени и не
запланированных активностях; узнать о реальных трудозатратах
по некоторым активностям; оценить и улучшить текущий уровень
ведения проектов.
Другим участникам web разработок – поможет больше
узнать о трудовых буднях своих коллег.

Night.css выключает в браузере свет.

Стиль для любителей сидеть по ночам.

Забавная функция. Выполняет преобразование относительных uri-адресов в абсолютные.
Может помочь новичкам при организации поиска по сайту.
Хороший пример с location().

Источник и примеры использования здесь

Свершилось! Около двух недель назад обновился сайт mmm-tasty.ru. Многие этого очень ждали и теперь вкушают плоды своего терпения. Для тех, кто не знает, «Ммм… тейсти» — сервис для создания тлогов. Тлоги — это нечто среднее между микроблогами (например: tumblr.com) и закладками (например: del.icio.us).

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


просто пост, ссылка, цитата, картинка, видео, разговор

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

Основы масштабирования

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

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

Примечание: ниже находится перевод тезисов доклада «Learning to Love Forms» с конференции «WebVisions 2007» (автор Aaron Gustafson). Докладчик рассказывает о верстке форм, используя корректный и эффективный XHTML/CSS-код.

• Формы — это необходимое зло. Людям свойственно усложнять формы, хотя они могут быть представлены весьма просто.
• Рассматривайте верстку форм как создание обычного XHTML-кода. Но будьте готовы к несоответствиям со стороны браузеров и применению хаков.
• Разбивайте сложные формы на несколько простых частей.
• Старайтесь обеспечивать максимальную семантическую ценность кода.
• Не усложняйте дизайн форм.

XHTML & CSS приемы

1. Элемент FORM создает форму.
2. Единственным обязательным его атрибутом является ACTION, и он всегда должен быть URI.
3. По умолчанию METHOD выставляется в GET.
4. Атрибут NAME устарел, используйте вместо него ID.
5. Элемент FIELDSET используется для группировки связанных полей формы. Может быть вложенным.

Джош Беркус (Josh Berkus) объявил о выходе PostgreSQL 8.3beta1 (см. официальный Changelog). Более полугода потребовалось разработчикам для того, чтобы завершить работу по обработке патчей (напомним, feature freeze состоялся 1-го апреля 2007 года). Так что самое время рассказать, чем же порадует нас в этом году самая развитая из открытых СУБД в мире.

Я разобью весь список на четыре части. В первой, для многих самой важной, части я перечислю изменения, которые так или иначе касаются производительности. Во второй — приведу список новых возможностей для программистов баз данных, призванных ещё более расширить и без того неслабый набор «фич» PostgreSQL. Третья часть посвящена нововведениям, предназначенным для администраторов баз данных. И, наконец, в конце я упомяну некоторые Open Source проекты, которые являются проектами-спутниками Постгреса (другими словами, имеют свой собственный цикл разработки).

Внимание! Это все устарело, но публикацию не удаляю, чтобы все знали как мы мучались в 2007 году из-за IE6 :-)

Задача: сделать врезку с закругленными уголками с минимумом html-кода.

Примечание: мини-статья написана для новичков

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

Примечание: ниже находится перевод статьи Understanding and Solving Internet Explorer Leak Patterns", в которой автор рассматривает некоторые характерные случаи утечек памяти в IE и предлагает методы для их избежания и устранения. Рассмотренные проблемы не являются чем-то новым или революционным, однако, знать об их существовании должен любой уважающий себя программист клиентских интерфейсов. Мои комментарии далее курсивом.

Опубликована: июнь 2005

Развитие веб-разработок

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

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

Большим плюсом в данной ситуации будет то, что шаблоны утечек памяти могут быть легко обнаружены, если вы знаете, где их искать. Наиболее тяжелые из них, с которыми, возможно, вам довелось столкнуться, имеют подробно описанные методы устранения, которые, скорее всего, в вашем случае потребуют лишь небольшого количества дополнительной работы. Хотя некоторые страницы могут по-прежнему «падать» из-за небольших утечек, самые значительные могут быть легко удалены.

читать дальше на webo.in →

Однажды вечером я почувствовал, что пришло время расширить 97‐ й параграф «Ководства» Артемия Лебедева.

На клавиатуре одна чёрточка, она обычно правее нуля и повыше букв «З» и «Х». Неосведомлённые люди называют её попеременно то дефисом, то минусом, то тире. Лебедев объясняет нам, что это четыре (учитывая две разновидности тире) различных символа. На самом деле их как минимум девять, и об этом я и расскажу вам сейчас.