Приложения для соцсетей. Универсальные приложения на БЭМ.

5 мая в Киеве я впервые выступал на Яндекс.Субботнике.

На нем я старался показать, как с помощью БЭМ инструментов и подходов можно создавать приложения для социальных сетей, используя общую кодовую базу.

Видео и презентацию можно найти в клубе Яндекс.Субботника.

Приложение на Facebook: https://apps.facebook.com/yandexphotoday/

Приложение на Вконтакте: http://vk.com/app2900887_6035860

Исходный код приложения: https://github.com/banzalik/yasubb-kiev2012.

Задавать вопросы можно тут.

Еще один способ использования свойства zoom

В 99.9% случаев CSS свойство zoom используется верстальщиками для активации hasLayout в IE. Я хочу рассказать о том 0.01% проценте использования этого свойства.
В те времена, когда трава была зеленее, миром правил IE, а дизайнеры учились рисовать сайты- приходилось часто сталкиваться с неоднозначными дизайнерскими решениями.
Одним из этих решений – кастомные скроллбары, например такие:
маленький скролл
Continue reading

Кеширование jQuery за счет источников трафика.

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

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

Предположим, у нас 3 сайта, которые генерируют существенный процент трафика.

  • Яндекс
  • Wikipedia
  • digg

Все они используют jQuery. Если определять HTTP_REFERER и подставлять сурс на jquery, используемый сайтом-источником перехода – можно получить профит, ведь в большинстве случав jQuery будет еще находится в кеше. Конечно, надо не забыть поставить сессионную куку, которая будет помнить, что у этого пользователя сегодня jquery кастомный, а не дефолтный.

Да, у этого приема есть и минусы, например надо постоянно мониторить генераторы трафика на актуальность ссылок, но это все делается весьма несложными автоматами.

p.s. Эту технику можно применять не только для jquery.
Возможно, этот велосипед уже где-то описывался, лично мне он пришел в голову только сегодня.

1861097.9903115.1306696357.2f536c093d61f73b3df89ed9d24b05d8

Не все теги одинаково полезны

Решил померять как быстро отрисовываются теги без применения к ним каких-либо стилей.

Суть теста – генерируем 10к тегов на одной странице и меряем reflow.

Результаты оказались очень любопытные.

Пока даю весьма скромную таблицу, с малым набором тегов.

Тег Safari 4.0.5 (mac) FF 3.6.3 (mac) Opera 10.53 (mac) iPad
div 173 270 218 710
span 52 608 113 294
p 173 287 235 711
b 50 607 116 299
i 50 600 1164 297

Очень странные результаты показал IE – почти нулевые рефлоу (поэтому пока не заполняю таблицу с результатами IE*)

Вывод:

  • в Opera и Safari inline элементы в 2 раза быстрее блочных
  • в FF все наоборот, блочные быстрее инлайновых в 2 раза
  • существую теги, которые серьезно влияют на рефлоу (например i в Опере и FF )

Скоро проведу более детальное исследование + проверим скорость основных css свойств.

upd. имена тегов в таблице ведут на соответствующие тесты

CSScomb в WebStorm – продолжение

В продолжение моей вчерашней записи про CSScomb в WebStorm спешу поделиться более усовершенствованным скриптом.

Теперь он обрабатывает только .css файлы и умеет ходить по папкам, да-да, теперь можно применять CSScomb прямо к папке, содержащей css файлы или прямо к папке проекта.

Обновленный файл лежит по старой ссылке.
Инструкция по устаноке в предыдущей статье.

CSScomb в WebStorm – Сортировка CSS свойств

Есть хороший проект называется CSScomb от Вячеслава Олиянчука aka miripiruni. Суть его в том, что он сортирует CSS свойста согласно определенному порядку, который мы выставляем самостоятельно. Уже есть плагины для Coda и TextMate. Однако я пользуюсь WebStorm (WebIde) и очень захотелось подобного функционала именно в нем. Ну что ж сказано – сделано :)
Continue reading

Фильтры в IE8

Больше всего камней в IE8, со стороны разработчиков, летело из-за того, что в нем не работали фильтры, которые понимали IE6-IE7.
Однако это не так, IE8 (в режиме IE=EmulateIE8) умеет отрабатывать фильтры.

Разработчики IE8 просто поменяли синтаксис вызова фильтра, теперь прийдется писать не
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
а
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

Пример работы: http://banzalik.ru/labs/ie8filter/

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

Произвольный цвет фона у PNG24 с прозрачностью в IE6

Все знают про проблему полупрозрачных PNG-24 в IE6, выглядит она так

Серый фон, который заливает всю прозрачность, можно менять на произвольный цвет.

Эта статья о том, как избавиться от серого фона при этом не потеряв полупрозрачность :)
Continue reading

Веб-шрифты vs. Шрифты для веба и IE6

Так получилось, что я использовал технику вставки шрифтов в страницу еще до выступления Вадима в Минске, поэтому решил написать небольшое дополнение к выступлению Вадима Макеева – “Веб-шрифты vs. Шрифты для веба.“.

Continue reading