Анимированный логотип

Я постоянно продолжаю совершенствовать свой интернет магазин (чего не скажешь о блоге, но ему это и не нужно), и сегодня я расскажу вам как я делал анимированный логотип – Крутящиеся шестеренки позади буквы R.

Пример вы можете посмотреть на моем сайте – https://robom.ru или на следующей гифке.

А теперь подробнее о том, как я это делал.

Читать далее “Анимированный логотип”

Минификация js и css

Небольшая заметка по поводу минификации – что, чем и как.
(немного кода и совсем мало текста)

Сжимаем js/css вместе

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

Читать далее “Минификация js и css”

Фиксированная правая колонка

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

Чаще всего они достаточно коротки, и если пользователь, при прочтении длинной статьи, прокрутил сайт до футера, то для того чтобы вернуться к навигации с помощью правой колонки ему нужно будет вернуться вверх. И очень хорошо, если есть какая-то кнопка для возврата наверх, потому-что если нет, то бывает очень лениво крутить вверх колесиком мышки, пытаться попасть в скролл бар, или искать на клавиатуре кнопку HOME.

Сейчас все чаще встречаются решение либо привязать эту колонку к верху страницы (CSS – position:finxed; top:0px), либо, если есть какая-то красивая шапка, решение на JS – во время скролла страницы колонка привязывается к верху только если ее верхняя часть уходит за пределы экрана.

Очень даже неплохое решение, и достаточно простое.

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

Читать далее “Фиксированная правая колонка”

Форматирование цены, или как я input переписывал

По работе недавно столкнулся с, вроде бы, тривиальной задачей — форматирование цены и деление ее по разрядам.
Ничего сложного решил я. Тем более на просторах интернета лежит уже куча готовых решений от простых и скучных (разворачиваем строку, добавляем через каждые 3 символа пробелы и разворачиваем назад) до вполне интересных (уверен что эту регулярку многие видели, но речь не о ней)

price.replace(/(d)(?=(ddd)+([^d]|$))/g, '$1 ')

Забегая вперед — это не рассказ о том как я пытался одним из стандартных методов выполнить задачу, или как плодил костыли.
Прежде чем начать работу я изучил много материалов и пол сотни библиотек. Подобного функционала нигде не нашел.
Надеюсь это кому-нибудь пригодится.

Читать далее “Форматирование цены, или как я input переписывал”

Смена изображений

Как-то раз, ползая по всемирной сети, я наткнулся на очень интересный скрипт галереи фотографий. Ссылку на этот скрипт давно подзабыл, но сама идея очень уж понравилась и осталась в подсознании.
И вот настало время для создания нового сайта и я вспомнил про эту очень даже интересную и нестандартную галерею (простые затухания и съезжания уже приелись) но не смог найти.
Чтобы было понятно о чем я – вот скриншот ее работы

Скриншот во время работы галереи

Читать далее “Смена изображений”

Сапер в 30 строк кода

Когда то давно, на habrahabr была “неделя игр в 30 строк кода”. Я тоже успел внести свою лепту в эту игру, и написал старую добрую игрушку – “Сапер”

Конец игры, и начало. Сверху указано количество бомб на поле

Поиграть в него можно здесь

Читать далее “Сапер в 30 строк кода”