Подписка на блог

РСС — лучше всего

Ещё есть автоматические трансляции в Тумблере и Же-же. Если что-то не работает, напишите мне: ilyabirman@ilyabirman.ru.

Эмёрдж

Эмёрдж 1.3 с поддержкой видео и повтора

Вышел Эмёрдж 1.3:

  • теперь поддерживаются не только картинки, но и видео;
  • любой элемент с классом data-replay по клику запустит все анимации заново — удобно для отладки.

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

2016   релиз   Эмёрдж

Эмёрдж 1.2.3

Вышел Эмёрдж 1.2.3:

  • теперь data-expose не забывает сработать при изменении размера окна браузера (если стало влезать то, что не влезало);
  • встроенный спиннер стал крутиться точно вокруг собственного центра;
  • вместо СВГ-анимации снова используется ЦСС-анимация.

Цена на Эмёрдж в биткоинах стала вдвое ниже, в долларах — на четверть ниже, а в рублях — немного выше. Если вы напишете мне письмо прямо сегодня, я вам продам его по старой рублёвой цене.

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

2016   продукты   релиз   Эмёрдж

Эмёрдж 1.2.2

Вышел Эмёрдж 1.2.2, который должен лучше поддерживать свойство data-expose в Интернет-эксплорере и Фаерфоксе.

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

2016   продукты   релиз   Эмёрдж

Эмёрдж 1.2.1

В новой версии исправлена ошибка, из-за которой data-expose мог не работать на страницах с доктайпом ХТМЛ 5.

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

Эмёрдж 1.2 с анимацией по скроллу

Вышла новая версия Эмёрджа.

Появился атрибут data-expose, с помощью которого можно придержать анимацию появления элемента до тех пор, пока человек не доскролит до этого элемента:

<div class="emerge" data-expose="true">
  <!-- то, что красиво проявится только когда докрутишь -->
</div>

Разумеется, это можно комбинировать со всеми другими атрибутами и эффектами. Этот див проявится с эффектом зума спустя четверть секунды после доскроливания:

<div class="emerge" data-effect="zoom" data-hold="250" data-expose="true">
  <!-- это проявится чуть позже, чем когда докрутишь -->
</div>

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

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

Эмёрдж 1.1 с собственным спиннером и поддержкой кастомных

Вышла новая версия Эмёрджа.

Он больше не требует spin.js для рисования индикатора загрузки — есть встроенный в виде незамкнутого колечка. Появилась поддержка пользовательских индикаторов. В том числе, можно продолжать использовать spin.js.

Как и раньше, чтобы на месте загружаемого элемента изображался спиннер, нужно написать data-spin="true". Видом спиннера управляют новые параметры: data-spin-size, data-spin-color, data-spin-direction (см. документацию на странице Эмёрджа).

Чтобы использовать другой индикатор, например, один из кайфных индикаторов Сэма Херберта, достаточно завернуть его код в именованный див:

<div id="cool-spinner" style="display: none">
  <svg> ... </svg>
</div>

и сказать Эмёрджу, что содержимое этого дива надо использовать в качестве индикатора загрузки:

<div class="emerge" data-spin-element="cool-spinner">
  <!-- контент, во время загрузки которого показывается индикатор -->
</div>

Чтобы использовать spin.js по-старинке, заведите его внутри вашего дива, не забыв выровнять по центру:

<script src="/path/to/spin.js"></script>

  ...

<div id="spinjs-spinner" style="display: none">
  <div style="position: absolute; left: 50%; top: 50%; margin: -8px"></div>
</div>

<script>
  var spinner = new Spinner ({
    lines: 12,
    length: 4,
    width: 2,
    radius: 8,
    corners: 0,
    rotate: 0,
    color: 'rgba(96, 96, 96, .75)',
    hwaccel: true
  })
  spinner.spin ($ ('#spinjs-spinner div')[0])
</script>

  ...

<div class="emerge" data-spin-element="spinjs-spinner">
  <!-- контент, во время загрузки которого показывается индикатор -->
</div>

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

Ссылки на первых пользователей Эмёрджа

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

http://ixley.ru/
Портфолио Артёма Самохина с фотографиями автомобилей.

http://navigator-edu.ru/
Уроки иностранных языков по Скайпу с индивидуальным подбором профессионального преподавателя. Предлагаем изучить 9 европейских и китайский язык. Читателям блога скидка 5%.

http://tjournal.ru/
Самобытное издание, которое делают люди и роботы. Это топ новостей в российских СМИ (собирает робот, анализируя соцсети), материалы нашей редакции про технологии и интернет, популярные мнения из твиттера и топ коубов.

http://intereffect.ru/
Агентство Intereffect.

http://dnscnnct.ru/
Скромное портфолио дизайнера.

Сходите по ссылкам, сделайте людям приятно.

Купите Эмёрдж, используйте в своих проектах.

Заодно напомню, что в моём блоге по средам размещается платная реклама (см. последние отзывы рекламодателей). До конца года для всех действует скидка 51% при оплате рекламы биткоинами.

2013   биткоин   Эмёрдж

Эмёрдж: теперь для всех

Первые одиннадцать копий Эмёрджа разлетелись за пару дней, после чего я продажу поставил на паузу (я обещал продать десять, но из-за криворукости умудрился сбиться со счёту). Смысл ограничения был в том, чтобы исправить все страшные проблемы, пока пользователей не очень много. Никто из покупателей пока не пожаловался и не попросил деньги назад, чему я очень рад (разумеется, вы всё ещё можете это сделать, если столкнулись с проблемами).

Теперь Эмёрдж продаётся по полной цене ($19 или 0,014 BTC) без ограничений. Обратите внимание, что цена в биткоинах по сегодняшнему курсу — это около $16 долларов. Покупайте за биткоины!

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

В качестве дополнительной благодарности первым покупателям — нехитрая акция. С удовольствием напишу пост со ссылками на каждый из ваших сайтов. Если хотите ссылку, напишите мне письмо (ссылку и пару слов о том, что за ней). На сайте должен быть установлен Эмёрдж. Если желающие будут, пост выйдет в следующую среду, 4 декабря; дедлайн для подачи заявок — понедельник, 2 декабря.

2013   Эмёрдж

Эмёрдж: ограниченный релиз

Так, у меня для вас готов Эмёрдж — система управляемой загрузки страниц. Страничку пока успел только по-английски написать.

Правила покупки очень простые:

  • одна лицензия на домен;
  • право передумать и получить деньги назад без вопросов в течение 30 дней;
  • пожизненные бесплатные апдейты.

Пока релиз ограниченный. В ближайшие три дня я продам скрипт только первым десяти человекам, кто закажет там по кнопке (для них же действует скидка 50%). Это нужно, чтобы устаканить АПИ и отладить возможные баги до того, как всё зашло слишком далеко. Когда будут доступны ещё десять копий — пока не знаю, зависит от отзывов первых пользователей. Если у вас есть дельные советы, пишите. Идей по тому, какие ещё фичи добавить, пока много и у самого, это можно не слать.

См. также мой пост про то, что это и зачем.

2013   проекты   Эмёрдж

Эмёрдж: система управляемой загрузки страниц

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

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

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

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

  • class="emerge" — появись только после того, как все твои внутренности будут загружены;
  • data-effect="slide" data-up="100px" — появись, пролетев снизу вверх 100 пк;
  • data-spin-parent="true" — показывай ромашку в родительском элементе, пока не загрузишься.

По умолчанию любой элемент с классом emerge появляется после загрузки всех содержащихся в нём изображений с полусекундным фейдом (изображения, прописанные через ЦСС, тоже учитываются). Эффекты позволяют модифицировать это поведение. Кроме встроенных эффектов, можно создать любой с помощью параметров data-style-1 и data-style-2. Стиль элемента переключится из первого во второе состояние, как только элемент будет готов — программирования снова не потребуется (используются ЦСС-анимации).

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

В первой публичной версии будет как минимум:

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

Эмёрдж будет платным продуктом и выйдет в ноябре.

2013   проекты   Эмёрдж