Заметки Сергея Дмитриева

CardInfo.js поможет создать красивую форму для приёма банковских карт

6 апреля 2017

Я сделал плагин CardInfo.js, который поможет вам сверстать вот такую форму для приёма банковских карт:

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

Поиграться с плагином можно на демо странице. Инструкции по установке, код и вся документация выложена на гитхабе. Развёрнутый рассказ о плагине в статье на хабре.

Расширение сафари для Главреда

11 ноября 2015

Готово. Скачивайте из официальной галереи расширений сафари.

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

Расширение гугл хрома для Главреда

«Главред помогает очистить текст от словесного мусора, проверяет на соответствие информационному стилю»
— Сайт Главреда

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

У сервиса появился АПИ. АПИ еще горячее, и никаких плагинов или расширений с его использованием никто до сих пор не создал.

Я написал расширение для гугл хрома. Пока другие разработчики пишут плагины под ЖЖ, вордпресс и прочее, пользователи Главреда уже могут улучшать свои тексты быстрее и проще чем раньше.

Scrollport.js — анимация скролла была скучной

Может видели плагин jQuery.scrollTo? С помощью него многие делают анимированное передвижение скролла к указанному месту на странице. В сущности тоже самое делает и эта строка кода:

$('html, body').animate({
  scrollTop: $('#my_target').offset().top
}, 600);

Только весит эта строчка в 30 раз меньше плагина.

И черт бы с ним, с весом. Что строчка кода, что целый плагин делают эту анимацию слишком уж скучно. А я хочу хлеба и зрелищ. Удовлетворение своих потребностей нашел в написании плагина «Scrollport.js». Пока фантазии хватило только на 3 новых способов разнообразить анимацию скролла. Взгляните на демо страницу.

Если делаете обычную анимацию скролла, не используйте плагин, напишите одну строчку кода, её хватит за глаза. Хотите изюма в динамике — используйте «Scrollport.js».

Вся документация по использованию на гитхабе. Рассуждения о плагине и комментарии умных людей найдёте в статье на хабрахабре.

Afterlag.js — анимация против лагов

Сайты тормозят. Особенно они тормозят при загрузке. Бедная анимация не знает куда ей деваться, становится рваной. Несчастные параллаксы дёргаются, а плавный скрол к участку страницы уже нельзя назвать плавным. Раньше я относился к этому естественно: «Ну, сайт грузится, конечно всё тормозит. Это норма». В итоге мне это надоело, и я отнёсся к происходящему как к проблеме.

В качестве решения я написал плагин «Afterlag.js», нативную и джэйквери версии. С помощью него можно отследить, когда лаги на странице закончились. Теперь я запускаю динамику на сайтах, когда станет ясно, что она будет работать гладко, красиво. Взгляните на демо, и проблему сразу поймёте и решение в действии увидите.

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

$.afterlag(function() {
  // Код, который должен исполниться после окончания лагов.
});

Вот и всё. А можно использовать плагин сложно, передать в него пачку настроек, использовать API и всё такое. Для этого читайте документацию на гитхабе, там и о различных способах подключения информация имеется. О принципах работы можно прочитать в статье на хабре.

Будьте здоровы, не лагайте.