object-fit — свойство, которое позволяет вместить изображение в любой контейнер с сохранением пропорций. Всё, что нужно сделать, это задать необходимый размер родительскому контейнеру, а тег img растянуть на 100% по ширине и высоте, после чего указать данное свойство со значением «contain».

Пример использования 👈

#cssфичи

Я устал, я ухожу… в отпуск

В последнее время, я чувствовал, что сильно измотан. Моя голова каждый вечер дико кипела после работы, а когда я закрывал ноутбук, мне хотелось просто лечь на диван и ничего не делать. Поэтому я решил, что пора ребутить мозги и взял себе отпуск на 2 недели. Вы только представьте 2 НЕДЕЛИ БЕЗ ПРОГРАММИРОВАНИЯ! Не нужно думать о дедлайнах, о каких-то фичах, багах и прочих рабочих моментах. Так что начиная с завтрашнего дня я планирую как следует отдохнуть и по минимуму садиться за комп. Дышать свежим воздухом, ходить в кино, смотреть сериалы и кушать разные вкусности. Именно об этом я и мечтал последние несколько месяцев. Кто знает, может даже удастся собрать друзей поиграть в настолки! ☺️

Минутка полезности 👨‍💻

every — метод массива, о котором часто многие забывают и начинают придумывать велосипеды в своих проектах. Данный метод возвращает результат проверки всех значений массива на указаное условие.

#полезное

Часто ловлю себя на мысли, что во время работы на меня очень сильно влияет моё окружение. Например, я не могу нормально работать, когда за окном пищит чья-то машина или когда соседи решают устроить недельный марафон по ремонту в будние дни (иногда мне кажется, что это NPC, иначе почему они занимаются этим с утра до вечера, а не работой).

Кто-то скажет: «Ага! Вот оно! Это всё потому, что дома нерабочая атмосфера, а вот в ооофисе…».
А я отвечу, что тоже самое у меня было и в офисе (когда я в него ещё ходил), там также часто рабочая атмосфера срывалась болтовнёй с коллегами, которая могла затянуться на весь день.

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

Поэтому единственный выход, который я для себя нашел — это девочка в больших наушниках. Да, я говорю о знаменитом youtube-канале с абстрактной расслабляющей музыкой. Она реально мне помогает приглушить все внешние раздражители и сосредоточиться на своих мыслях. Я знаю людей, которые могут работать абсолютно в любом месте и при любых обстоятельствах, но к сожалению, я к таковым не отношусь.

А как у вас обстоят дела с подобными проблемами? Получается ли у вас сосредоточиться на работе не смотря на внешние триггеры? 😱

Сколько должна длиться стандартная анимация на сайте?

Еще пару лет назад можно было встретить сайт с настолько плохо подобранной длительностью анимации, что пользоваться им было практически невозможно, анимация была либо слишком быстрая и дёрганая, либо очень медленная и буквально укачивала при использовании ресурсом. Сейчас таких сайтов меньше, но периодически всё же встречаются, поэтому я и решил сделать наглядную памятку по оптимальным значениям продолжительности анимации. В 99% случаев для рядовых hover-эффектов или всплывающих модалок эти значения подходят идеально.

Ссылка на codepen 😎

#cssфичи

Новый проект, как глоток свежего воздуха

Уже больше полутора лет я работаю над одним и тем же проектом. Как в любой сфере и с любым делом, когда ты долго работаешь над чем-то одним, тебя это перестаёт радовать. Пропадает азарт и интерес, всё превращается в сплошную рутину. И как же я был рад тому, что мне в один прекрасный день предложили поработать над новым небольшим продуктом. Это чувство развёртывания проекта с нуля можно сравнить с распаковкой новой техники или с запахом новой книги. Передо мной снова чистый лист, где я могу выбрать новые инструменты для работы или переосмыслить структуру проекта с учётом полученного опыта. Из чего я сделал для себя следующий вывод: переключаться между проектами — это то, что помогает не уставать от своей работы. Главное делать это вовремя и в меру. Я сомневаюсь, что если часто прыгать по проектом будет тот же результат, но в моём случае, это произошло как раз тогда, когда я почувствовал застой в своей работе. И теперь после большого количества времени работы над одним проектом, мне наконец снова интересно писать код. Такие дела 😊

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

«Classnames» — это небольшая библиотека, которая позволяет упростить работу с css-классами, передавать и указывать их абсолютно в любом удобном для вас формате, а если вдруг переданный класс окажется «undefined» или «null», он попросту не будет выводиться, сохраняя тем самым ваш конечный атрибут «class» в чистоте и порядке. Работает как на Next.js, так и на React. Пользуйтесь!

📌 Ссылка: npmjs.com

#полезное

📢 Новая единица измерения для мобилок

Одна из главных проблем при использовании «100vh» на мобильных устройствах — это игнорирование высоты панели браузера, которая динамически появляется и исчезает в зависимости от скролла. Недавно в CSS появились новые единицы измерения, которые созданы решить эту проблему. В частности «dvh» (Dynamic viewport height) динамически меняет значение высоты относительно панели навигации браузера. Так что теперь можно одной строчкой указать размер всего экрана без лишних заморочек.

Фича относительно недавно вышла из статуса «экспериментальной», но уже сейчас работает практически во всех современных мобильных браузерах.

Решил поменять что-то в жизни — поменял тему в VS Code

До этого я почти год просидел на «Vim Deep Dark», недавно наткнулся на «Gruvbox Theme» и пока очень даже неплохо, приятные мягкие цвета. Есть 3 варианта тёмной темы, лично мне зашла «Hard» с более контрастным фоном.

У этой темы даже светлые вариации присутствуют в наборе, если вдруг этот пост читает какой-нибудь псих 😐

Вот и подходит к концу 2023 год. Было много разных ситуаций и по мне стреляли, и я в лужи падал…

Ну а если серьезно, то для меня это был, наверное, один из лучших годов за последнее время. Во-первых, я создал этот замечательный тг-канал и даже иногда публикую здесь посты. Правда пока не так часто, как хотелось бы, но начало положено!
Во-вторых, в этом году я начал ходить в спортзал, так как сидение за компьютером по 12 часов в день уже тяжеловато даётся, кости скрепят, а мышку приходится держать двумя руками. Поэтому каждую неделю стабильно 2-3 раза я отключаю голову и качаю свои бицепсы 💪
В-третьих, я первый раз побывал за границей и слетал в отпуск. От этого я получил уйму положительных эмоций. Наплавался в тёплом море и наелся вкусных, сочных, спелых фруктов.
Ну и в-четвёртых, если говорить о профильной теме (всё же от части этому и посвящён мой канал) я нехило так прокачал свой личный скилл по JS, по сравнению с прошлым годом. На своей работе я успел написать ещё одно новое приложение и полноценную админ-панель для ключевого продукта компании с различными дашбордами. Так что в целом, этот год можно заканчивать, большинство дел из плана на 2023 год выполнено, а что не успел, перенесём на следующий, не страшно. Так что всех с наступающим, а я пойду резать салатики! 🍸