Всем привет!
Уже несколько раз меня просили сделать обычные тултипы, которые со стрелочками такие. Все бы было хорошо: состряпал блок с круголками, взял треугольники отсюда и вуаля. Однако, не все так просто. Ведь полет фантазии дизайнеров велик. То им стрелочки с наклоном, то им рамки, то тени. Можно, конечно, все запилить на картинках, но ведь это старомодно непрактично. Хотя бы из-за кучи оберток, для того, чтобы все тянулось во все стороны.
Всё это оказалось абсолютно решаемым с помощью CSS, если включить немного фантазии.
От слов к делу.

Мотив написания статьи

Читая хабр, извлек для себя много полезного: некоторые статьи заставляли много думать, некоторые вдохновляли на определенные действия, какие-то, возможно, предотвратят мои дальнейшие ошибки. И хотя на себя я работаю всего лишь год, за это время в моей жизни произошел ряд существенных изменений. Я получил для себя ответ на вопрос «быть или не быть», которым я задавался, работая «на дядю» и теперь хочу вдохновить тех, кто подумывает о том, чтобы вырваться из рабства вашего начальства и основать собственное дельце, но, вместе с тем, я не достиг особых высот, и нуждаюсь в совете тех, кто, собственно, преуспел.

Я хочу описать простой минималистский подход к разработке сложных JavaScript приложений. Из внешних библиотек будут использоваться только jQuery и мой js-шаблонизатор, причём из jQuery используются только $.ready(), $.ajax() и $.proxy() — т.е. суть не в библиотеках (их тривиально заменить на предпочитаемые вами), а в самом подходе.

В основе подхода лежат две идеи:

1. JavaScript виджеты — небольшие модули, каждый из которых «владеет» определённой частью веб-странички (т.е. всё управление этой частью странички происходит исключительно через методы этого модуля, а не через прямую модификацию DOM — инкапсуляция). Виджет отвечает исключительно за функциональность, но не за внешний вид; поэтому прямая модификация части DOM, которым «владеет» виджет, снаружи виджета допускается — но только для чисто дизайнерских задач (для архитектуры и общей сложности приложения нет принципиальной разницы между коррекцией внешнего вида через CSS или jQuery).
2. Глобальный диспетчер событий. Взаимодействие между виджетами осуществляется путём посылки сообщений глобальному диспетчеру (слабая связанность, паттерн Mediator/Посредник), а уже он принимает решение что с этим сообщением делать — создать/удалить виджеты, дёрнуть методы других виджетов, выполнить дизайнерский код, etc. В отличие от динамического подхода к обработке событий (когда обработчики конкретного события добавляются/удаляются в процессе работы) статический диспетчер сильно упрощает понимание и отладку кода. Безусловно, есть задачи, для которых нужны именно динамические обработчики событий, но в большинстве случаев это избыточное усложнение, поэтому всё, что можно, делается статическими обработчиками.

Microsoft опубликовала демо-страницу улучшенной типографики для формата OpenType. Это альтернативные глифы, лигатуры, кернинг, дроби, малые прописные и минускульные цифры. Эффекты видны, если наводить на текст мышкой. Демо хорошо работает только в браузерах с поддержкой OpenType, сама Microsoft рекомендует IE10+ и Firefox 8+. В других браузерах могут проявиться не все эффекты, это ещё зависит от операционной системы.


^{Альтернативные глифы и малые прописные}

С Microsoft можно согласиться — OpenType действительно поднимает оформление текста в вебе на новый уровень, близкий к типографскому. Возможности этого формата явно превосходят @font-face.

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

Для простоты, будем рассматривать 2D случай, частицы круглые, радиус частиц у всех одинаковый.

Содержание

1. Обзор алгоритмов
1.1. Полный перебор
1.2. Sweep & Prune
1.3. Регулярная сеть
2. Некоторые оптимизации
2.1. Sweep & Prune
2.2. Регулярная сеть
3. Сравнение скорости выполнения
4. Приложение (программа и исходный код)
5. Заключение

09.01.2012 в «Smashing Magazine» была опубликована подборка бесплатных шрифтов.

В подборке представлены такие шрифты как: Homestead, Bree Serif, Levanderia, Valencia, Nomed Font, Carton.

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

P.S. Для того чтобы скачать шрифт установите 0 (ноль) в поле «Amount».

UPD: Smashing Magazine сново онлайн.

Сегодня на конференции CES в Лас-Вегасе, одной из ведущих мировых сцен, на пленарном докладе Microsoft была анонсирована HTML5-версия одной из самых популярных игр в мире — Cut the Rope!

Напомню, это один из мировых хитов, уже вышедший на iPhone, iPad, Android и сделанной российской компанией ZeptoLab. Cut the Rope также стала первой в мире игрой, которую показали на текущей версии Windows 8 и в новом магазине Windows Store около месяца назад.

Девятое января 2012 года — последний день январских праздников в России. Позади не только западная, но и русская православная дата Рождества Христова, а также и Новый год между ними. (Впереди остаётся только возможность отметить Новый год по старому стилю — реликт павшей Империи, бережно сохраняемый православной церковью и народной традицией со дня его отмены в 1918 году.) Декада праздников стремительно уступает место суровым будням, и ужé сегодня многие из нас лягут спать с учётом завтрашней необходимости раннего бодрствования. И с каким же радостным, увесистым грузом бесплатных подарков мы вступаем в начинающуюся середину января? Насчёт шрифтов своими ответами на этот вопрос всех нас стремились порадовать сразу три словолитни.

---

PT Mono

Производитель «ПараТайп» 30 декабря 2011 года объявил в LiveJournal о выходе в свет PT Mono — моноширинного шрифта, естественным образом дополняющего шрифтовую систему ПТ Проект, состоящую из семейств PT Sans и PT Serif, появившихся в 2009 и в 2010 году соответственно. Новый шрифт, что небезынтересно, разработан при финансовом участии компании Google и, вероятно, займёт вскорости своё место в её коллекции Google Web Fonts. Как и прежние работы ПТ Проект, новый шрифт включает буквы не только русской кириллицы, но и кириллических систем письменности десятков других народов современной России и ряда соседствующих народов и стран. Он также может считаться свободным, потому что одна из его версий распространяется по лицензии OFL (SIL Open Font License). И вот опубликованная на сайте у «ПараТайп» картинка внешнего вида шрифта:


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

Этот шрифт доступен в единственном (прямом нежирном) начертании.

---

ROSA Arion и ROSA Verde

Как известно, Firefox 5 вышел 21 июня, а между отдельными выпусками ожидается шестинедельный промежуток, так что до появления Firefox 6 остаётся чуть больше недели. Ужé доступна его бета-версия, ужé обретает более или менее окончательный вид страница «Firefox 6 for developers» в вики MDN, содержащая перечень новых возможностей будущей новой версии Файерфокса.

Этих возможностей не так мало: обновлена и вдругорядь включена поддержка WebSockets, появилась поддержка элемента <progress>, отслеживаются события тыка пальцем и даже многотыка (multitouch), и так далее. Однако такого рода нововведения для их широкого использования всё же потребуют некоторой кросс-платформенности, так что меня вместо них более всего порадовали новинки CSS, которые носят скорее декоративный характер и смысл — так что, даже если и не заработают, то не страшно.

Речь идёт об экспериментальном (с префиксом «-moz-») внедрении четырёх свойств из черновика «CSS Text Level 3», и это свойства -moz-text-decoration-color, -moz-text-decoration-line, -moz-text-decoration-style и -moz-hyphens.

Предлагаю внимательно рассмотреть каждое из них, вглядеться в приносимые ими возможности и перспективы.

В не столь давно вышедшей версии jQuery 1.7 появился новый объект Callbacks, о котором сегодня и пойдёт речь.
В официальной документации jQuery.Callbacks описан, как многоцелевой объект, представляющий собой список функций обратного вызова (callbacks — далее просто колбэков) и мощные инструменты по управлению этим списком.

Я просматривал возможности этого объекта, когда он был ещё только в разработке, и надо сказать, что возможностей у него изначально было немного больше, чем осталось в релизной версии. Например, сейчас отсутствует возможность создания очереди (queue) колбэков, которые вызываются по одному на каждый вызов fire(). Видимо, команда jQuery, решила немного подсократить код, убрав «ненужные/редкоиспользуемые» возможности, чтобы сэкономить в весе библиотеки. Это маленький экскурс в историю Callbacks, но далее я буду описывать только доступные сейчас функции и в конце напишу небольшое возможное улучшение этого объекта.

Введение

Думаю, многим известен Notepad++ — удобная бесплатная утилита, выступающая в качестве «продвинутой» замены стандартному Блокноту Windows. Как и при работе в любом текстовом редакторе, в Notepad++ время от времени возникает необходимость автоматизировать какие-либо повторяющиеся действия, которые в силу сложности логики невозможно записать как макрос. К счастью, для решения этой задачи нет необходимости переключаться из Notepad++ в, например, Word, дабы воспользоваться встроенным в него VB.

Среди плагинов для Notepad++ существуют расширения, реализующие возможность написания скриптов для Notepad++ на разных языках, таких как JavaScript, Lua, PHP или Python. Именно на последнем я и решил остановиться для решения своей задачи.

Вот смотрю как товарищ grokru выложил свое творчество и прямо вдохновляюсь. И поскольку мне было скучно, я решил тоже вспомнить былое и наштампить иконок. Заняло все это порядка 18-20 минут.



Попробовал себя в народном творчестве так сказать. Может совместно создадим habrapack?

Архив с .PSD и .PNG

_{Поль Руже:  Это блогозапись нашего гостя, Маркуса Стэнджа. Маркус обыкновенно работает над реализацией темы оформления Firefox для Маков, но на сей раз он совершил небольшую окольную прогулку по движку макетирования в Gecko, реализуя -moz-element.}

В четвёртой бета-версии нового Файерфокса мы представляем вам новое расширение CSS-свойства background-image: возможность отрисовывать произвольные элементы в качестве фонов, используя -moz-element(#elementID).

<p id="myBackground1" style="background: darkorange; color: white; width: 300px; height: 40px;">
    This element will be used as a background.
    <!-- Этот элемент послужит фоном. -->
</p>
<p style="background: -moz-element(#myBackground1); padding: 20px 10px; font-weight: bold;">
    This box uses #myBackground1 as its background!
    <!-- Этот прямоугольник использует #myBackground1 в качестве фона! -->
</p>

Изображение -moz-element() срабатывает совершенно так же, как и привычное изображение url(). Это значит, что оно управляется всеми привычными свойствами фонов: background-position, background-repeat, и даже background-size.

Используя background-size, вы можете создать миниатюру (thumbnail) того элемента, который используется в качестве фона — вот пример:

Вкратце: как заставить новые теги из HTML 5 работать в Internet Explorer.

Любой веб-разработчик смотря на HTML 5 плачет от счастья, которое наконец-то пришло в наш дом. Для большинства функций (такие как WebGL, многопоточность и веб-сокеты) придётся ждать поддержки от браузеров (а в самых правильных эти возможности уже есть), но новые удобные теги мы можем использовать уже сейчас.

Однако Internet Explorer (даже последней, 8-ой версии) и тут сумел споткнуться — новые теги вне HTML 4 он просто не замечает — на них нельзя повесить стили.

В IE проблем даже две — отдельно нужно включать поддержку HTML 5 тегов в обычном документе, и отдельно в содержимом, которое добавляется динамически (например, через AJAX).

Я уверен, что у любого дизайнера был такой момент, когда он видел где-то какой-то шрифт, который так мог бы пригодится в проекте, но… что за шрифт?.. Ответ на этот вопрос затаился в глубине Вашего сознания, либо в глубине Вашего «незнания» (что разумеется простительно).



В этой статье мы рассмотрим несколько ресурсов, которые могут помочь вам в идентификации понравившегося шрифта.

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

Данная статья — первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset.

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

Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей.

Например, вы используете элемент a в вашем документе. Большинство браузеров, как Internet Explorer и Firefox, добавляют ссылке синий цвет и подчёркивание. Однако представьте, что через пять лет кто-то решил создать новый браузер (назовём его UltraBrowser). Разработчикам браузера не нравился синий цвет и раздражало подчёркивание, поэтому они решили выделять ссылки красным цветом и полужирным шрифтом. Именно исходя из этого, если вы установите базовое значение стилей для элемента a, то он гарантированно будет таким, каким вы хотите его видеть, а не как предпочитают его отображать разработчики UltraBrowser.

В этом топике я хотел бы рассказать, как добавить изображениям на веб странице эффект размытия по Гауссу без использования флеша. Статью я планировал написать еще год назад, и, к моему большому удивлению, меня никто не опередил, хотя тема достаточно проста и интересна как с точки зрения веб дизайна, так и с точки зрения клиентской разработки. Для создания эффекта будем использовать уже ставшую популярной технологию SVG, которая работает во всех последних версиях браузеров. Для IE8- воспользуемся CSS фильтрами (Blur в частности), которые работают только в продуктах Microsoft. Для начала, предлагаю ознакомиться с итоговым вариантом здесь (наведите на любое изображение). Скрипт представлен в виде jQuery плагина, но выдернуть его для использования вне jQuery не составит труда.

Очевидно, целью работы являетя не только размытие картинки, а и анимация этого размытия.

Из простейшего примерамы видим, что интенсивность размытия зависит от атрибута stdDeviation в теге feGaussianBlur.

Компании Adobe, Apple и Opera совместно разработали спецификации CSS Shaders для генерации качественных видеоэффектов в браузере, причём фильтры можно накладывать на любой HTML-элемент. Они выглядят знакомо для всех, кто применял эффекты в редакторе Flash-анимации, или для тех, кто знает элемент filter из стандарта Filter Effects 1.0 для SVG. Здесь то же самое, только гораздо лучше.

В преддверии нового года и продолжительных праздников публикую вторую подборку игр, не вошедших в первый пост. С наступающим! )

TankWorld

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

Как известно, в W3C идёт работа над черновиком стандарта Battery API, реализация которого позволит джаваскрипту в браузере наблюдать за уровнем заряда аккумуляторной батареи в том мобильном устройстве (мобильнике, планшете, нетбуке, ноутбуке и так далее), на котором браузер запущен.

Речь идёт о появлении объекта navigator.battery со свойствами navigator.battery.charging (логическое; равно true, когда устройство подзаряжается) и navigator.battery.level (число от 0.0 до 1.0, выражающее величину заряда батареи по отношению к максимальному заряду её). Оба свойства — только для чтения. У этого объекта также будут события, позволяющие наблюдать за изменениями состояния батареи примерно так:

navigator.battery.addEventListener('chargingchange', function () {
   if (navigator.battery.charging) {
      console.log('Устройство только что воткнули в розетку.');
   }
}, false);

В конце осени нынешнего (2011) года соответствующий объект (под именем navigator.mozBattery) добавили в объектную модель Файерфокса одиннадцатой версии (см. баг 678694); её появления по графику следует ожидать в середине марта будущего (2012) года, а бету мы увидим в сáмом начале февраля. Жду с нетерпением, потому что мобильный Firefox одиннадцатой версии вообще обещает заблистать множеством изменений по сравнению с десятым.