Visual Studio Code - better then Atom & Sublime

I'm start to use Visual Studio Code - it's better than Github Atom and Sublime Text, much faster than Atom and it's free. Has very nice autocomplete, integrated with Git and include debugger for JS code (via Node.js).

P.S. Think about switch to vim.

[on Russian] Отказался от использования Github Atom и Sublime Text, и перешел на Visual Studio Code. Это бесплатная разработка Microsoft, построенная на базе Atom - но она намного быстрее, имеет великолепный автокомплит, интеграцию с Git, а также отладчик для JS (на базе Node.js).

Да и вообще подумываю о том, чтобы перейти на vim.

Отличные лекции по Python

На сайте центра Computer Science Center в открытом доступе лежат отличные лекции курса по Python. Курс охватывает множество вопросов, включая тестирование кода, оптимизацию быстродействия и многопоточность.

Уровень курса - углубленный, то есть, если сравнивать с курсом по Python, о котором упоминал ранее (от Geekbrains), то тот курс был для начинающих; а данный курс - от Computer Science Center - уже для практикующих, то есть смотреть его стоит после прохождения курса от GeekBrains и после практического закрепления знаний по питону.

Смотреть лекции от Computer Science Center (или на Ютюбе)

Хорошие книги по Django

Сейчас есть много книг по Django - в основном, правда, англоязычных.

Но чтобы хороших, и для начинающих - таких 2.

1. Mastering Django [англ.]

Это неофициальное, 3-е издание книги Адриана Головатого и Джейкоба Каплан-Мосса, разработчиков Django. Данное (т.е. 3-е) издание книги написано уже сторонним автором, но в основе лежит превосходный материал оригинальной книги. Глава за главой объясняется, как работает фреймворк, как та или иная задача выполняется без фреймворка, затем постепенно вносятся улучшения в алгоритм, и через несколько итераций выполнение приводится к тому, как оно работает в Django. Это дает отличный фундамент для дальнейшей работы.

В книге рассмотрена версия Django 1.8 LTS (то есть версия с длительным термином поддержки). На сайте книга доступна как в виде отдельных глав, так и в виде PDF для свободного скачивания (но в PDF только первые 13 глав, остальные - а их больше 20 - можно прочитать только онлайн. Язык - английский.

2. Tango with Django [англ., но есть перевод]

Тоже очень качественный материал, который отлично дополняет книгу, что указана первой. В этом материале рассмотрена версия Django 1.7, но там отличия с версией 1.8 минимальные.

Кстати, есть перевод этого материала на русский. В онлайн он доступен, к примеру, вот здесь; но если эта ссылка перестанет работать, то есть и актуальная версия от переводчика на GitHub, правда для просмотра ее надо конвертировать в HTML. В любом случае - огромное спасибо Максиму Джангирову за его труд по переводу.

P.S. Хорошая книга для "продолжающих" - "Two Scoops of Django: Best Practices for Django 1.8". К слову, очень легко гуглится в виде PDF.

P.P.S. И еще одна хорошая для "продолжающих" - "Test-Driven Development with Python".

Get number of NEXT sllide in Bootstrap Carousel

If we want find number of the next slide in Bootstrap carousel in handler of slide.bs.carousel event (not slid.bs.carousel, i.e. before animation start, not after) we can do it.

For do this we can use e.relatedTarget object in event handler (it'll be the next slide), than find it index in list of all slides.

The example of code below:

$('#bootstrap_carousel').on('slide.bs.carousel', function (e) {
    var nextItem = $(e.relatedTarget);
    var allItems = $(e.currentTarget).find('.item');

    var indexOfNextElement = allItems.index( nextItem );
});

P.S. Краткий перевод на русский: чтобы узнать индекс следующего слайда в карусели Bootstrap до начала анимации, можно в обработчике события slide.bs.carousel использовать объект e.relatedTarget, который и является следующим слайдом. Подробности - в коде выше.

Remove <br> tag from flow

Sometimes — on promo pages — we want to use tag <br> for neatly formatted text blocks "as in PSD" from designer. But using <br> isn't good, and on small screen of smartphone those blocks will have awkward views.

But we can use simple trick — set CSS  media query with breakpoint (say, for smartphone screens), and set rule for <br> tag property display with value none. That force browser to remove <br> tags from flow, and text will be shown properly.

See an example below — on wide screen (open example in separate window) text shown as preformatted with breaks, on narrow screen (768 px and narrowed) — without breaks. (I used red background only as indicator of without-br mode.)

See the Pen Remove tag
from flow by borshak (@borshak) on CodePen.

P.S. Краткий перевод на русский - если мы хотим использовать тег br, и в то же время не хотим, чтобы он портил текст на экранах сматрфонов, мы создать CSS-медиазапрос, и в нем прописать правило, которое заставит браузер на мелких экранах убирать тег br из потока. Подробности смотрите в коде примера.

[Pseudo] fallback for background-blend-mode in IE

As for now IE browser don't support CSS property background-blend-mode. But in simple cases (when we use blend mode multiply for toning background images with one color) we can use multiple background images for emulate blending.

The idea of fallback is simple:

• we prepare PNG image with alpha channel with color we need (with help of level of transparency in PGN we control level of final "blending", i.e. PNG with 25% of transparency will tint our background slightly, and 75% tint background greatly;
• size of PNG must be the same of size of
  where we use our fallback, or we can adjust size via CSS;
• then with help of JS or jQuery detect IE browser (I use function detectIE());
• if browser is IE we read URL of current image in CSS property background-image in;
• then we create string with two URLs, first for our transparent PNG, second for picture, that was used as background image in
  (our PNG must be first in list, otherwise it'll be lied under original background);
• write back this list to CSS property background-image.

And voila! IE placed our PNG over background, and we have some "blending".

In example below instead URL for PNG with transparency I used base64 encoded image, embedded right into JS.  Open this example in IE and Chrome for see the change in end result.

See the Pen [Pseudo] fallback for background-blend-mode in IE by borshak (@borshak) on CodePen.

P.S. Краткий перевод на русский - в браузере IE можно имитировать CSS-свойство background-blend-mode, добавляя в список фоновых картинок (первым в списке) полупрозрачный PNG с заливкой нужного цвета для тонировки основной фоновой картинки. Подробности смотрите в коде примера.

Верстка страницы «Киберпонедельника» для сайта re:Store

Очередная работа - верстка промо-страницы для сайта компании re:Store.

Страница посвящена акции «Киберпонедельник 2016», которая проходит во многих магазинах, и длится всего один день (25 января).

Мое участие:

• верстка страницы;
• полюс капелька анимации;
• дополнительно (по отдельному макеты) - верстка почтовой рассылки для акции.

Страница акции: http://www.re-store.ru/promo/cm2016/

Внешний вид:

Верстка промо-страницы для сайта re:Store

Очередная работа - верстка промо-страницы для сайта компании re:Store.

Страница посвящена шлему виртуальной реальности Fibrum и скидке при его одновременной покупке с беспроводной гарнитурой Jabra.

Мое участие:

• верстка страницы;
• сопровождающие скрипты.

Адрес страницы: http://www.re-store.ru/promo/fibrum/

Внешний вид:

Небольшие улучшения Sublime Text

Рассмотрим 3 небольшие, но полезные визуальные улучшения Sublime Text:

1. Улучшение цветовой схемы
2. Изменение цветов окна автодополнения
3. Подсветку текущего блока кода

Улучшение цветовой схемы

Видеоуроки по Django

На YouTube нашелся цикл видеоуроков по фреймворку Django.

В настоящий момент - 13 видеоуроков. Для начинающих, на русском.

Сноски при верстке почтовых рассылок

При верстке email-рассылки вставить сноску (<sup> или <sub>) - та еще задача.

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

Но есть один хороший прием — сноску надо оформить кодом

<span style="font-size: 10px; line-height: 0; vertical-align: 14px;">1</span>

Вся суть здесь в задании line-height: 0; - это заставляет сноску не участвовать в расчете высоты строки и не менять межстрочный интервал. Ну а само положение сноски регулируется значением параметра vertical-align.

Работает даже в MS Outlook.

Наглядный пример ниже:

See the Pen YwxOae by borshak (@borshak) on CodePen.

Этот прием подсмотрел в блоге австралийской дизайнера и верстальщика Nicole Merlin.

Книга «Python. К вершинам мастерства»

Изд-во «ДМК Пресс» перевело и издало книгу Лучано Ромальйо «Python. К вершинам мастерства».

Книга посвящена углубленному пониманию структур данных, функций, объектов и потока выполнения — то есть полному пониманию философии Python 3.

В оригинале данная книга называется «Fluent Python», она была выпущена изд-вом O'Reilly в июле 2015 года. 

На сайтах O'Reilly и Amazon книга имеет сплошь хвалебные отзывы; кроме того Andrew Montalenti (разработчик, один из создателей Parse.ly) включил эту книгу в ТОП-3 книг по Python 3, наряду с двумя книгами от Дэвида Бизли (выбрав из очень обширного списка, в который включен и М. Лутц).

Верстка страницы для сайта сети магазинов LEGO

Новая работа - верстка страницы для сайта сети магазинов LEGO.

Страница посвящена началу продаж конструкторов серии LEGO Nexo Knights.

Мое участие:

• верстка страницы;
• CSS-анимация.

Адрес страницы: http://mir-kubikov.ru/nexo/

Внешний вид: