Небольшие улучшения 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/

Внешний вид:

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

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

Страница посвящена работам творческих людей, которые периодически читают лекции в рамках проекта Академия re:Store.

Мое участие:

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

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

Внешний вид:

CSS transiton «наоборот»

При верстке иногда надо сделать CSS-переход (transition) при отведении мышки не таким, как при наведении. То есть, при наведении мышки - один эффект, при отведении мышки другой эффект (не такой, как при наведении).

Это возможно, и для этого в псевдоклассе :hover надо прописать еще один transition. Тот, что прописан в :hover, будет иметь более высокий приоритет, и перекроет transition, прописанный в самом классе. В итоге:

• при наведении мышки будет использован transition, записанный в псевдоклассе :hover
• при отведении мышки будет использован transition, записанный в основном классе

Пример (при наведении - смена цвета, при отведении - переворот):

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

Данный прием подсмотрел на сайте CSS-Tricks.

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

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

Страница посвящена совместной акции с Амедиатекой.

Мое участие:

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

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

Внешний вид:

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

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

Мое участие:

• верстка страницы;
• сопровождающие JS-скрипты (подключение и адаптация плагина для имитации снега).

Кстати, снег создан с помощью плагина SnowFall - он написан на нативном JavaScript, использует для анимации CSS3, легко модифицируется, и имеет гибкие настройки.
Демо-страница плагина | плагин на GitHub.

Но вернемся к нашей странице.

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

Внешний вид:

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

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

Страница посвящена скидкам на зимние праздники.

Мое участие:

• верстка страницы.

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

Внешний вид:

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

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

Мое участие:

• верстка страницы;
• сопроводительные JS-скрипты (управление слайдерами картинок, анимация шапки, проверка формы обратной связи).

Адрес страницы: http://unode50.ru/b2b/

Внешний вид:

И все таки Sublime...

Раньше я писал, что редактор Atom удобнее, чем Notepad++.

И это, разумеется, так.

Но я все же полностью перешел на Sublime Text.

Причина - в скорости запуска и скорости работы самого редактора.

Верстка промо-страницы к 10-летию компании re:Store

Буду постепенно выкладывать свои работы - их много, но начинать с чего-то стоит.

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

Мое участие:

• верстка (по готовому макету от дизайнера);
• адаптивность в пределах предоставленного макета ("резиновая верстка"), автомасштабирование фотографий в зависимости от разрешения экрана;
• анимация;
• вспомогательные JS-скрипты (для работы слайдера истории, для проверки формы обратной связи).

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

Внешний вид:

Интерактивный учебник по Git

По адресу http://pcottle.github.io/learnGitBranching/ находится великолепный учебник по Git. У него 2 особенности:

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

2. Ветки отображаются в виде интерактивных графов, что сильно упрощает понимание.

В целом, обучение строится по такой схеме:

- вначале идет объяснение темы;

- а затем интерактивное задание.

Доступно несколько десятков заданий, которые разбиты на несколько категорий, где есть и основы, и продвинутый уровень, и работа с удаленными репозиториями (опять таки - как основы, так и продвинутый уровень).

В общем, этот учебник - идеальное дополнение к знаменитой книге Pro Git.

Эспандер Hand Grip — недорогая замена фирменному CoC

У меня непонятно от чего поломался эспандер CoC 1 - я сжал его до упора и бац!.. Лопнула пружина.

Покупать сейчас фирменный CoC накладно - за него хотят 500 грн. и выше (а в некоторых местах уже больше 1000 грн.)

Решил купить китайский аналог - Hand Grip. Я уже писал о том, что «китайцы» по качеству сильно уступают фирменным CoC, но Hand Grip приятно удивил: он может служить полноценной, и при этом недорогой альтернативой CoC  - вместе с доставкой он обошелся примерно в 200 грн. (то есть, порядка 9 дол.)

Hand Grip 200 lbs