Сама презентация, работающая прямо в браузере, доступна для внимательного изучения, а видео можно скачать на его странице на Vimeo. Остальные видео с конференции, имеющие отношение к клиент-сайд разработке, позже появятся на канале Web Standards Days.

Самые давние читатели этого блога должны помнить серию заметок, посвящённых скрипту для красивого открытия картинок, написанному в подражание множественным «лайтбоксам»: Даркбокс и Даркбокс 2. С появления этой идеи минуло уже больше двух лет и, вроде бы, уже должны были появиться внятные решения, которые соответствуют всем заявленным в первой заметке условиям. Только вот до сих пор не видно на горизонте ничего приличного. Поэтому Даркбокс возвращается — отбросив версию и все приличия — прямиком на новомодный Github. Столь же красивый и простой — встречайте!

Технологические изменения

Прежде всего, код был полностью переписан в полном соответствии с традициями последнего времени — то есть не мной. Игры в эффективное программирование я, к счастью, бросил. Автором нового кода является Олег Рощупкин, нескучный программист и коллега по песочнице ещё с вебмасконовских времён. Новая версия скрипта некоторое время проходила испытания как на этом сайте, так и на проекте «Веб-стандарты», пока в один чудесный день не появилась на GitHub. Но что-то мешало мне расслабиться и публично заявить о новинке. Всё-таки HTML- и CSS-коду исполнилось почти два года, за которые я успел научиться чему-то новому. Поэтому вся структура и стили были радостно переписаны с нуля.

В основу новой HTML-стуктуры был положен принцип состояний, который был успешно опробован для проекта Open Player, который всё ещё ждёт своего часа и гениального JavaScript-программиста, но об этом в другой раз. Суть принципа сводится к тому, что каждый модификатор, изменяющий состояние всей структуры, применяется к корневому элементу и видоизменяет все нужные элементы через каскад. Это позволяет окончательно очистить JavaScript от оформительских штучек и минимизировать количество операций с атрибутами class. Вот так выглядит код открытой картинки:

	<div class="darkbox darkbox-on darkbox-loaded darkbox-done">
	    <div class="darkbox-shadow"></div>
	    <div class="darkbox-canvas">
	        <img src="picture.jpg" alt="">
	        <div class="darkbox-button darkbox-button-left" title="Close"></div>
	    </div>
	</div>

Как вы можете видеть, вся история открытия картинки записана в атрибуте class корневого элемента. Пройдёмся по ней с самого начала:

1. По клику пишем на страницу базовый класс darkbox;
2. Инициализируем его и готовим к загрузке при помощи darkbox-on;
3. Готовимся к тому, чтобы красиво показать загруженную картинку: darkbox-loaded;
4. Завершаем все действия, вешаем обработчики закрытия и показываем крестик: darkbox-done.

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

Упомянутые состояния также позволили более наглядно записать CSS-код: теперь он структурирован по принципу базовый класс → модификаторы. Более того, из-за этих чисто архитектурных решений значительно упростился файл хаков для IE, теперь он содержит всего одно правило для IE7, позволяющее окончательно сбросить полупрозрачность, которая задаётся в JavaScript при помощи фильтров:

	* + HTML .darkbox-done .darkbox-canvas {
	    filter:none !important;
	    }

Поддержка IE6 осознанно не предусмотрена, однако магическая сила open source позволит вам не только дописать нужный уровень поддержки, но ещё и предложить её в виде патча к существующему проекту прямо на GitHub. Дерзайте.

Функциональные изменения

Благодаря серьёзному подходу Олега, скрипт теперь умеет обрабатывать битые картинки, для которых не случилось заветного события load. Оформляется это соответствующим запретительным значком. Мои же попытки освежить CSS-код привели к тому, что теперь для анимации загрузочного спиннера используется не анимированный GIF, а восемь последовательно смещающихся состояний спиннера, заключённых в один вертикальный спрайт. Это позволяет получить гораздо более чёткий и аккуратный спиннер, благодаря альфа-прозрачности в PNG-24.

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

Использование скрипта

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

Остаётся только добавить список файлов, необходимых для работы скрипта, примерно в таком порядке — от оформления к динамике:

• Стили: jquery.darkbox.css и jquery.darkbox.ie.css;
• Картинки: close.png, error.png и spinner.png из папки i;
• Библиотека jQuery последней версии, можно использовать статику от Яндекса или Google;
• Минифицированный файл скрипта: jquery.darkbox.min.js.

Весь этот суповой набор можно скачать со страницы проекта на GitHub. Там же, в разделе Issues, вы можете оставить свои замечания, сообщения об ошибках и даже пожелания для будущих версий. Однако это никоим образом не лишает вас возможности порезвиться в комментариях к этому посту.

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

Попытки использовать видео плеер SublimeVideo для вставки видео провалились — скрипт оказался слишком глючный.

Конкурс WebHiTech

Единственный в своём роде технологический конкурс, за непредвзятость и высокую квалификацию которого я могу ручаться головой. Хотя бы потому, что я уже третий год участвую в жюри рука об руку с настоящими зубрами от веб-разработки. Заявки на конкурс начали принимать ещё в конце августа, но у вас ещё есть время до 29 октября, чтобы заявить либо собственный проект, либо — внимание! — любой другой высокотехнологичный проект, достойный участия в конкурсе. Читайте правила конкурса, отправляйте ваши заявки, и до встречи на церемонии награждения!

Встреча «Web Standards Days»

Шапито под названием «Web Standards Days», после долгих странствий по свету, докатилось и до Киева, где 18 сентября состоится очередная встреча с участниками проекта «Веб-стандарты» и просто хорошими разработчиками, которые прочитают вам доклады, ответят на вопросы и может быть даже немного развлекут. Участие во встрече строго бесплатное, для регистрации нужно всего лишь отправить простую форму. Торопитесь — осталась всего неделя, а зал, как выяснилось, совсем не резиновый.

Мастер-класс «Современная вёрстка»

На следующий день после встречи «Web Standards Days», то есть 19 сентября, в Киеве пройдёт не менее интересный мастер-класс, провести который меня пригласила площадка SmartMe. Мастер-класс будет сработан под ключ и расскажет о трёх основных аспектах современной вёстки: о семантике, стилях и графике. Участие платное, но цены совсем не кусаются.

Фестиваль «404»

9–10 октября в Самаре пройдёт одна из моих самых любимых конференций, которую организовывают не менее симпатичные студии Турбомилк и Доминион. Роскошная программа на два дня — это не только куча интересных докладов, но ещё и целых две афтепати! Если вы не сможете приехать на Web Standards Days в Киев, то у вас будет отличный шанс услышать мой доклад «Веб в кривых. Второе рождение SVG» в Самаре.

В общем, скучать этой осенью вам не придётся. Увидимся!

Современный дизайн просто помешан на спецэффектах, он, можно сказать, только ими и живёт. И это ничего, лишь бы со вкусом. Приходится иногда делать такую штуку как размытие или fade-out. Видимо из-за некоторых проблем с реализацией text-overflow:ellipsis в браузерах, этот спецэффект получил некоторую популярность. Суть его сводится к тому, чтобы положить на объекты, которые не помещаются в рамки родителя, некую картинку, плавно переходящую от прозрачности к сплошному цвету. Мол, не поместилось — прокрутите или сделайте браузер пошире. Простая штука, на самом деле.

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

И тут сегодня мне приходит письмо: мол, такие дела — как-то всё странно и плохо накладывается, вот вам тестовый пример. Спасибо, — говорю, — посмотрим. Посмотрел: и правда, какая-то чертовщина. Скажу сразу, внятного объяснения я так и не нашёл. Так вот…

Эксперимент

Сначала рисуем в Фотошопе пять квадратов:

• Квадратная шейпа, заливка (fill) уведена в ноль;
• внутри эффектом наложен горизонтальный линейный градиент: от выбранного цвета к нему же;
• левая часть градиента уведена в нулевую прозрачность.

Квадратные шейпы положены рядом, под каждой из них помещён растровый квадрат со сплошной заливкой, соответствующей основному цвету градиента. Режим смешения (blending mode) каждого из слоёв выставлен в «Normal». Тем самым, мы избавляемся от любых визуальных проявлений градиента. Экспортированная в PNG-8 картинка получается такой:

Любые попытки потрогать её пипеткой, приводят ровно к пяти цветам, как и ожидалось. Дальше верстаем такие же пять квадратов размером 200 × 200 пикселов. Каждому из них присваивается класс, накладывающий градиентную картинку (полупрозрачный PNG-24, почищенный при помощи ImageOptim) на соответствующий фоновый цвет:

	.color-000 {
	    background:#000 url(000.png) no-repeat;
	    }
	.color-CCC {
	    background:#CCC url(CCC.png) no-repeat;
	    }
	.color-C00 {
	    background:#C00 url(C00.png) no-repeat;
	    }
	.color-090 {
	    background:#090 url(090.png) no-repeat;
	    }
	.color-069 {
	    background:#069 url(069.png) no-repeat;
	    }

Такое наложение имитирует слои в Фотошопе. В браузерах вышла следующая картина:

Свёрстанная страница выглядит так же, как экспортированная картинка. Даже если очень сильно приблизить. Но это если на первый взгляд, а если повозить по этому делу пипеткой (попробуйте сами), то получается что-то странное: цвет начинает дрожать. Например, мой любимый оттенок красного #CC0000 прыгает красной составляющей в #CB0000 (или 204–203, если в системе RGB). Исключение составил чёрный квадрат и, как выяснилось, другие простые цвета (#00F, #FF0 и так далее) — они состоят из одного сплошного цвета.

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

Смешение разнится не только в разных браузерах и разных системах, но ещё и для разных цветов. На этом этапе любые эксперименты хочется прекратить и громко спросить кого-то: «Что за дела, шеф?!» Ответа, как обычно, не следует. Поэтому попробуем предположить что-нибудь самостоятельно.

Никаких проблем с гаммой, цветовыми профилями и другими чанками в PNG быть не может — файлы почищены всеми возможными утилитами. Единственное, что приходит мне в голову — это нехватка цветов в некоторых цветовых диапазонах, которая заставляет браузеры делать смешение (dithering) пограничных цветов для имитации недостающего. Но почему в некоторых диапазонах всё проходит гладко, да и сам Фотошоп справляется на «отлично»…

Кажется у меня ещё осталась «Помощь зала». Идеи?

UPD: В комментариях были предложены весьма достойные версии происходящего: первая и вторая — обе, в общем-то, об одном и том же: сложности округления.

Архитектура

После продолжительной агонии, с сайта исчезли рубрики и теперь существует всего одна главная витрина с последним постом и списком всех публикаций, спрятанным в разворачивающуюся гармошку. Основным средством для поиска предыдущих публикаций стала вспомогательная страница «Поиск», которая содержит упомянутый выше архив публикаций и форму поиска — пока силами Яндекса, но потом, возможно, появится возможность выбирать и Google.

Меньше всего изменений пришлось на страницу «Об авторе», на которой добавилось несколько социальных сервисов и рабочий e-mail.

Дизайн

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

Технологии

Как бы это ни было сложно, но HTML-код сайта старается соответствовать черновику спецификации HTML5. Более того, пока даже получается проходить валидацию. И самое минимальное: отказ от XHTML, новый доктайп <!DOCTYPE HTML>, новая семантика языка <article>, <header>, <time>. По этой причине пока пользователи IE видят не самые приятные вещи, но почему так — чуть ниже.

Пересмотру подверглись некоторые элементы: фрагмент кода теперь состоит из элемента <pre> и <code>, по количеству строк:

<pre>
    <code></code>
    <code></code>
<pre>

…а уменьшенные версии картинок построены на элементе <figure>:

<figure>
    <dd><img src="…" alt="Описание"></dd>
    <dt>Описание</dt>
<figure>

На примеры использования таких картинок, а также работу новой версии Даркбокс, можно взглянуть в заметке Firefox против Photoshop. Ну и конечно же CSS 3: от пресловутых веб-шрифтов и border-radius до transition, из-за чего код местами распух от вендорных префиксов:

-webkit-transition:background-color .2s linear;
-moz-transition:background-color .2s linear;
-o-transition:background-color .2s linear;
transition:background-color .2s linear;

Также гораздо смелее стали использоваться селекторы: от простых E > E и E + E до E:first-of-type. К сожалению, с некоторыми конструкциями не справляется даже IE8.

Концепция

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

Для этого вам понадобятся следующие вещи: простой текстовый редактор и свежий браузер, вроде Firefox, Opera, Safari или Chrome. Чем свежее, тем лучше — хорошо бы даже ночную сборку или какую-нибудь альфу.

Готовим основу

Для начала подготовим основу для нашего чаепития. На мой взгляд, прогрессивный HTML5-шаблон с простым доктайпом <!DOCTYPE HTML> подойдёт лучше всего:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <title>Чай со спецэффектами</title>
    <meta charset="UTF-8">
</head>
<body>
    …
</body>
</html>

Обратите внимание на атрибут lang элемента <html> — мы собираемся заваривать английский чай с американским акцентом, и его значение как раз соответствует нашему замыслу: en-US. Дальше нам это ещё пригодится.

Теперь давайте отыщем подходящую чашку. Точнее, даже не отыщем, а тут же соберём из знакомых частей. Из чего мы можем составить обычную чашку чая? Как минимум, из самой чашки cup и блюдца saucer. Чашка состоит из сосуда vessel с ручкой handle, в который последовательно налиты чай tea, брошены два кусочка сахара sugar, по вкусу, а замыкается это всё донышком bottom. Так у нас и получилось:

<div class="cup">
    <div class="vessel">
        <div class="tea">
            <div class="sugar"></div>
            <div class="sugar"></div>
            <div class="bottom"></div>
        </div>
    </div>
    <div class="handle"></div>
</div>
<div class="saucer"></div>

Итак, основа для нашего чаепития готова, начинаем его рисовать.

Раскрашиваем набросок

Теперь отбросим все браузерные условности простым ластиком. Чай у нас незамысловатый, поэтому здесь подойдёт и * { … }. Для более сложных проектов всё же рекомендуется использовать reset.css

* {
    padding:0;
    margin:0;
    }

Наступает очередь воплотить все составные части нашего чая: позиционируем их по центру, правильно расставляем z-index, задаём размеры и цвет фона для каждого элемента. Вот как выглядит чашка:

.cup {
    position:absolute;
    top:50%;
    left:50%;
    z-index:2;
    margin:-150px 0 0 -150px;
    width:300px;
    height:300px;
    }

…и получаем пример №1, он же на картинке.

Если вы остались довольны получившимся кубизмом — хорошо, значит вас устроит чаепитие даже в компании Internet Explorer. Те, кому этого мало, приглашаются дальше.

Спиливаем лишнее

И всё-таки, чашка должна быть круглой. Хотя бы для того, чтобы во время размешивания там не застревала чайная ложка. Давайте всё скруглим. После недавнего выхода альфа-версии Opera 10.50 с широкой поддержкой модуля CSS Backgrounds and Borders Level 3 для этих целей мы вполне можем рассчитывать на свойство border-radius.

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

.saucer {
    position:absolute;
    top:50%;
    left:50%;
    z-index:1;
    margin:-250px 0 0 -250px;
    width:500px;
    height:500px;
    -webkit-border-radius:250px;
    -moz-border-radius:250px;
    border-radius:250px;
    background:#FFF;
    }

В данном случае компактное правило border-radius:250px задаёт радиус скругления всех четырёх углов, точно так же, как margin:0 обнуляет поля со всех четырёх сторон элемента.

Обратите внимание на префиксы -webkit и -moz — они нужны браузерам на основе Webkit (Safari, Chrome) и Gecko (Firefox) для того, чтобы применить скругление. Последняя альфа браузера Opera обрабатывает свойство без префикса. Подобным же образом мы скругляем сосуд, чай и донышко. Ручку и подтаявшие кусочки сахара мы подтачиваем до скруглённых брусков.

И получаем пример №2, он же на картинке.

И хорошо бы: всё скруглилось, встало на свои места. Так ведь и просилась бы чашка в руки, если бы не пугала своей плоской двухмерностью. Самое время добавить немного объёма.

Надуваем чашку

Будем честны, мы здесь не пытаемся заигрывать с Canvas, поэтому объём у нас будет псевдо-трёхмерным. А много ли надо нам, жертвам квадратного и плоского веба? Берём в руки свойство box-shadow и вперёд:

.vessel {
    -webkit-box-shadow:20px 20px 100px rgba(0,0,0,.8);
    -moz-box-shadow:20px 20px 100px rgba(0,0,0,.8);
    box-shadow:20px 20px 100px rgba(0,0,0,.8);
    }

Свойство box-shadow конструируется просто: горизонтальное смещение тени, вертикальное, размер и цвет, который мы задаём в виде rgba(), чтобы последним значением указать полупрозрачность заливки. В случае с элементом tea, также используется ключевое слово inset, чтобы повернуть тень внутрь элемента.

И вот пример №3, он же на картинке.

Ну, что — чай уже почти как настоящий. За исключением некоторых проблем: тени в браузерах на движке Webkit рассчитываются весьма загадочно (см. заметку Firefox против Photoshop), поэтому, в нашем случае, выглядят более жёстко. Также текущая версия Webkit в браузере Safari 4.0.4 пока не умеет применять ключевое слово inset, однако Chrome уже справляется.

Осталось только добавить в это чаепитие немного жизни.

Художественный беспорядок

Самая очевидная проблема нашей чашки — это отвалившаяся ручка и вставшие пирамидой кусочки сахара. Давайте разбросаем всё это по своим местам и попробуем размешать сахар. Поможет нам в этом свойство transform и методы rotate() и translate(), занимающиеся, соответственно, поворотом и перемещением элементов.

Обратите внимание, что для краткости в этой части примеры кода будут приводится без дублирования свойств с префиксами -webkit, -moz и -o. Полный код вы можете найти в примерах.

Для начала, вернём ручку ровно в центр чашки, изменив значение отрицательного поля, а потом применим transform: повернём на –145 градусов и сместим на 170 пикселов.

.handle {
    margin:-20px 0 0 -45px;
    transform:rotate(-145deg) translate(170px,0);
    }

Принимаемся за кубики: их у нас ровно два. Не знаю, как для вас, но для меня это оптимальное количество сахара. И нам нужно обратиться к каждому из кубиков, чтобы применить нужное смещение. Самым удачным способом будет посчитать их по порядку появления в чае, при помощи селектора :nth-child():

.sugar:nth-child(1) {
    transform:rotate(70deg) translate(-20px,20px);
    }
.sugar:nth-child(2) {
    transform:rotate(30deg) translate(35px,0);
    }

Теперь всё на месте, и вроде бы можно пить чай, но сахар упорно не желает размешиваться. Значит, самое время встряхнуть его при помощи сочетания свойств transform и transition. Для начала мы задаём каждому кубику новое смещение, которое произойдёт при наведении на чашку: поворот на 1200 градусов и новые координаты.

.cup:hover
.sugar:nth-child(1) {
    transform:rotate(1200deg) translate(-20px,20px);
    }

А затем описываем сам процесс перемещения:

.sugar {
    transition:transform 10s ease-out;
    }

Синтаксис свойства transition простой: сначала идёт то свойство, которое мы собираемся изменять, потом время и тип ускорения, в нашем случае ease-out, что значит с замедлением. При наведении курсора на чашку .cup:hover сахар будет размешиваться по часовой стрелке, при отведении — в обратную сторону.

И вот пример №4, он же на картинке.

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

Немного разнообразия

Сколько людей, столько и вкусов. Поэтому давайте добавим нашему чаепитию возможность выбрать в какой традиции пить чай: в английской, русской или японской. Предлагаю сделать это наиболее адекватно, используя упомянутый выше атрибут lang элемента <html>. Для этого добавим возможность выбора:

<ul class="switcher">
    <li lang="en-US" title="Английски"></li>
    <li lang="ru-RU" title="Русский"></li>
    <li lang="ja-JP" title="Японский"></li>
</ul>

Каждый из пунктов нашего меню будет переключать атрибут lang на нужный язык при помощи нехитрого скрипта, навешивающего обработчики:

function init() {
    var html = document.documentElement;
    var items = document.querySelectorAll('ul.switcher li');
    for(var i=0; i<items.length; i++){
        items[i].onclick = function() {
            html.lang = this.lang;
        }
    }
}
window.onload = init;

В этом скрипте используется удобнейший метод querySelectorAll, который позволяет выбрать нужные элементы при помощи CSS-селекторов наподобие jQuery.

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

BODY:lang(en-US) {
    background:#519AB8 url(i/en.png);
    }
.switcher:lang(en-US) LI[lang=en-US],
.switcher:lang(ru-RU) LI[lang=ru-RU],
.switcher:lang(ja-JP) LI[lang=ja-JP] {
    border-color:#FFF;
    cursor:default;
    }

И, наконец, последний пример №5, он же на картинке. Чай готов, сахар по вкусу — можно пить :)

Также существует полноценная видео-запись этого доклада с минской встречи Web Standards Days, однако в Москве прозвучала его улучшенная и дополненная версия, а в предложенном скринкасте гораздо удобнее следить за содержанием слайдов.

И немного о забвении: в начале года планируется выпустить новую версию этого сайта: новый дизайн, вёрстка и архитектура. Заметки станут короче и будут выходить значительно чаще. До встречи ;)