29 декабря 2015 г.

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

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

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

Мое участие:

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


Внешний вид:


28 декабря 2015 г.

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


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

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

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

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

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


25 декабря 2015 г.

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

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

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

Мое участие:

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

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

Внешний вид:


10 декабря 2015 г.

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

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

Мое участие:

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

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

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

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

Внешний вид:


9 декабря 2015 г.

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

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

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

Мое участие:

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

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

Внешний вид:


5 декабря 2015 г.

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

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

Мое участие:

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

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

Внешний вид:


4 декабря 2015 г.

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

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

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

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



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

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

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

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

Мое участие:

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

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

Внешний вид:



5 ноября 2015 г.

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

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

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

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

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

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

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

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


9 сентября 2015 г.

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

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

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

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

Hand Grip 200 lbs

18 августа 2015 г.

Улучшаем редактор Github Atom

Как я уже писал, редактор Github Atom удобнее в работе, чем Notepad++.

Но в Atom после установки не хватает некоторых «плюшек», к которым давно привык в Notepad++.

Часть из них удалось получить, установив дополнительные пакеты.

Цветовые схемы

Monokai
Atom Dark Fusion
Base16 Tommorow Dark
В Notepad++ по умолчанию используется светлая цветовая схема, в Atom – темная. Надо признать, в Atom при темной схеме работать приятнее (лично мне). Но вот сама подсветка синтаксиса по умолчанию не понравилась. Поэтому я установил цветовую схему Monokai – самое оно!

Также отличные, на мой взгляд, цветовые схемы Atom Dark Fusion и Base16 Tommorow Dark – но в сравнении с Monokai они приглушены; Monokai имеет более выраженный цветовой контраст.

17 августа 2015 г.

2-я редакция книги «CSS3. Руководство разработчика»

Когда-то я писал об очень хорошей книге по CSS3 — Питер Гастон «CSS3. Руководство разработчика». Как ни странно — учитывая активность наших пиратов — прошло несколько лет, а пиратской копии русской версии так и не появилось. Но это, будем полагать, только хорошо.

Но я был удивлен, обнаружив, что в свободном доступе уже есть 2-я редакция этой книги, датированная началом 2015 года. Но, разумеется, уже в оригинале — на английском.

Там же, кстати, и 1-я редакция есть; но во 2-й материал намного актуальнее.

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


Короче, рекомендую!

30 июля 2015 г.

Atom удобнее чем Notepad++

Опробовал редактор Github Atom, и должен сказать, что в работе он удобнее и приятнее, чем Notepad++.



Последний, конечно, стартует намного быстрее, но что касается самой работы, то в Atom она протекает с большим комфортом. (Кстати, если сравнивать скорость запуска с PHPStorm, то Atom стартует намного быстрее.)

Разумеется, я видел еще только малую часть возможностей Atom, но и автоматическое дополнение кода, и отклик интерфейса в целом намного приятнее, чем в Notepad++.

Конечно, Notepad++ благодаря малому размеру и реактивности останется инструментом для оперативных правок, но для основной работы перейду на Atom.

Atom - разработка от GitHub, основан на движке Google Chromium. Отлично поддается расширению и кастомизации. Кстати, поскольку в основе его Chromium, то там есть даже панель разработчика, как в Chrome, вызывается по Ctrl-Alt-I.

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

В целом - отличный редактор, рекомендую.

P.S. Я пробовал и Sublime Text (на Ubuntu Desktop и на Windows) - и Atom, на мой взгляд, приятнее. Впрочем, должен сказать что Sublime Text мне не очень понравился, Notepad++ за годы работы стал ближе, так что мое мнение предвзято.

10 апреля 2015 г.

Как в Yii 2 включить Debugger Toolbar

В Yii 2 во вновь созданном приложении в режиме разработки по умолчанию внизу страницы отображается панель отладчика, которая выглядит вот так:


Есть, правда, одна особенность - по умолчанию она отображается только при просмотре сайта с локального компьютера, то есть - с адреса 127.0.0.1. Лично я же использую виртуальную машину с Ubuntu Server, на котором и крутится приложение Yii 2 - а сама разработка идет из-под Windows. То есть, хост уже не локальный. И полосы отладчика не видно...

10 февраля 2015 г.

Рывки изображения при трансформации CSS transitions в Firefox

Делая кое-какую работу по сайту http://inventive.ru/ заметил неприятную вещь — слайдер с эффектом Кена Бёрнса, что на главной, который я когда-то делал, в Firefox почему-то начал увеличивать картинки рывками. Зрелище было не из приятных. А вот в Хроме, к примеру, по прежнему все было ОК, то есть плавная анимация, как и положено.

Чтобы было понятно о чем я говорю, я оставил данный эффект у себя на тестовой площадке - http://layouts.borshak.com/inventive/ Причем наблюдается он не только в Firefox (v.35), но и в Internet Explorer (v.11). Хотя раньше, разумеется, все было нормально — я тестировал эффект с нескольких компьютеров, плюс перед внедрением на рабочий сайт эффект тестировали коллеги.

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

backface-visibility:hidden;
на анимируемый блок. Не помогло.


Однако потом наткнулся на заметку веб-разработчика Джиеля Беркерса. У него возникла точно такая же проблема, и решил он её следующим образом — добавил к трансформации в FireFox небольшой поворот блока, всего в 0,02 градуса (угол столь мал, что визуально никакого поворота незаметно). Я попробовал повторить, и — о, чудо! — всё заработало как надо.

Поскольку у меня проблема наблюдалась и в IE, добавил этот "финт ушами" и для него.

В итоге, мои правила трансформации выглядят сейчас так:


-webkit-transform: scale(1.08);
transform: scale(1.08);
-moz-transform: scale(1.08) rotate(0.01deg);
-ms-transform: scale(1.08) rotate(0.01deg);



— 1-е правило задано специально для Safari под Mac — без него он напрочь отказывался что-либо анимировать.
— 2-е правило — для всех современных браузеров.
— 3-е и 4-е — оперативное решение проблемы для Firefox и IE.