Пропал немного из блогерской жизни 🙂

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

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

Сегодня был на футболе ⚽

Высшая лига вернулась в Бобруйск (я живу в этом городе кто не знал🙂)
Начали с победы, хотя и мало кто этого ожидал.
На стадионе аншлаг. Пришлось стоя смотреть матч, 😅 но это того стоило.

Новое видео уже ждет своих просмотров 🙂
Реализуем кнопку Наверх на чистом JavaScript и добавим немного анимации при наведении.
Будет максимально просто и полезно.
Благодарен каждому лайку и комментарию ❤️

https://www.youtube.com/watch?v=RGSZO4rubn0

🔥 CSS-свойство дня: scrollbar-gutter

Бесит, когда контент «прыгает» вправо-влево на 15–20 пикселей при открытии модалок или смене страниц? Это исчезает и появляется полоса прокрутки.
Но решение есть: Свойство scrollbar-gutter резервирует место под скроллбар заранее. Контент стоит как вкопанный, даже если прокрутки в данный момент нет.

Как использовать:
html{
scrollbar-gutter: stable;
}

Плюсы этого свойства:
✅ Никаких костылей: Больше не нужно вычислять ширину скролла через JS или calc(100vw - 100%).
✅ UX +100: Сайт выглядит монолитно, верстка не дергается.
✅ Чистый CLS: Помогает держать показатели стабильности макета в норме.
На macOS с «умными» (плавающими) скроллбарами свойство ничего не меняет (там и так ничего не прыгает). А вот на Windows - это просто спасение.👌

❤️ - было полезно

#cssсвойстводня

В этот день родили меня на свет
В этот день с иголочки я одет
В этот день теплом вашим я согрет
Мне сегодня тридцать лет!🎂

Интерактивная карта

Первый раз как увидел макет подумал:"Как я это буду реализовывать?".
Но глаза боятся, руки кодят 🙂

На мобилке идет переключение между регионами с помощью кнопок, на пк при наведении.
Подписи везде одинаковые, пока для примера )
Возможно запишу туториал если кому интересно как тут что работает. ❤️

Статья про оптимизацию изображений

В основном все это мне известно, но почерпнуть что-то новое тоже можно.

В каких случаях лучше всего использовать PNG , а в каких jpeg? Где лучше подойдут webp и avif? Узнаете в этой статье 👇

https://habr.com/ru/companies/alfa/articles/1012848

Вечная боль верстальщиков 😅🥲

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

Рай для удаленщиков найден.

Параллельно еще выполнил небольшой заказ по доработке верстки👌
Пишите по вопросам сотрудничества @krizbyn

Почти 30 лет спустя

Встречаюсь с братом не так часто как хотелось бы. Живем в разных странах.

Что тогда, что сейчас я в головном уборе 🙂

Анимация roadmap ✅

Кажется, неплохо получилось

👍 CSS-свойство дня: light-dark()

В CSS наконец-то завезли функцию light-dark(), которая делает всю грязную работу в одну строчку. Ты просто скармливаешь ей два цвета: первый для дня, второй для ночи.
Как это выглядит в коде:
CSS

:root {
  /* Говорим браузеру, что у нас тут равноправие тем как бы */
  color-scheme: light dark;
}

body {
  /* Днем работаем / Ночью тушим свет */
  background-color: light-dark(#fff, #1e1e1e);
  color: light-dark(#333, #f5f5f5);
}

Браузер сам смотрит в настройки телефона или компа пользователя. Если у него включена темная тема - магия сработает автоматически, и применятся вторые цвета. Без единого медиа-запроса и без единой строчки на JavaScript.

Пользуйтесь, это уже работает во всех современных браузерах!❤️
#cssсвойстводня