Frontend BRO

Придумал для рабочих проектов одно улучшение, которое автоматически меняет переменную окружения в зависимости от запущенного npm-скрипта. Но в node.js не силён. Позвал на помощь Chat-GPT. Пока одни говорят, что нейронки вытеснят программистов, другие юзают нейронки себе на пользу 🔥

🔍Как узнать, в каких модулях JS есть нужная нам зависимость? Сегодня была задача проанализировать, какие модули зависят от модуля с конкретным названием. Можно было заходить в папку каждого модуля и смотреть содержимое его package.json 😬 💡Но нашел решение получше: ‘’’npm ls имя_модуля’’’ Изи 🤟 Пример работы команды прикрепил в скриншоте.

Сейчас подбирал анимацию для постов в свой второй канал @animate_css И нашёл кайфовые варианты для бургер-кнопки 😍 Кому нужно, забирайте ссылку на codepen с готовым кодом: https://codepen.io/ainalem/pen/LJYRxz

🚀 500 — небольшая круглая цифра на YouTube Больше всего просмотров и подписчиков принесло видео про вёрстку контейнера. Видимо, общие основы вёрстки пользуются популярностью больше, чем какие-то узкие решения задач по сайтам. Буду продолжать эксперименты с видео-контентом. Спасибо за поддержку 🔥

💣 У меня бомбит от... Программисты, верстальщики, веб-дизайнеры, есть к вам серьёзный вопрос. Что или какие ситуации в работе вас бесят больше всего? 👇 Го в комментарии, напишем свой топ 5

🔔 Новое видео на YouTube Как и обещал, записал видео по прелоадерам. В нём показал, как добавить анимацию на время загрузки всей страницы и части контента на ней. Приятного просмотра ⚡️ https://youtu.be/arywfqaS9nI

🤨 transition-duration и его суммирование Тот, кто плотно работает с вёрсткой, скорее всего сталкивался с такой проблемой: 😬 Задаю transition: 0.3s, а элемент анимируется явно дольше, чем 0.3 секунды Как правило такое происходит из-за лени того, что вместо указания конкретного свойства в значении transition просто указали: 0.3s Когда мы задаём transition: 0.3s, то плавность длительностью 0.3 секунды добавляется добавляется для всех свойств, которые можно анимировать. Если внутри элемента с таким transition есть другой элемент, для которого тоже задан transition, то они будут суммироваться для совпадающих свойств. Пример: .submenu { transition: 0.3s; visibility: hidden } — меню второго уровня. При наведении курсора должен становиться visibility: visible; .submenu-item { transition: 0.3s, color: black } — пункт меню второго уровня. При наведении курсора меняет цвет текста. 🤡 Готово! Теперь если убрать курсор с пункта второго меню, то меню второго уровня станет visibility: hidden не через 0.3 секунды, а только через 0.6 секунд. 💡 Как избежать: Задать transition с указанием свойств, которые нужно анимировать:

 .submenu { transition: visibility 0.3s; visibility: hidden }

.submenu-item { transition: color 0.3s, color: black }

Прилетела необычная задача. Такая, на закрепление знаний CSS. Нужно было преобразить форму квиза. Но т.к. квиз — это просто скрипт от стороннего разработчика, то не было возможности залезть в HTML и поменять разметку, как захочется. Через JS как-то менять HTML-код слишком муторно. Поэтому выезжал силами стилей, хотя бы их можно было свободно добавлять через панель управления квизами 🫠 Недостающие элементы пришлось лепить с помощью псевдо-элементов before и after (храни их, W3C 🙏🏼 ) На скриншотах показал, что было — светлая форма, и что стало — тёмная форма 👌🏻

🍪 Простая установка Cookie на JS Сегодня понадобилось устанавливать куки по истечении нескольких секунд. Поэтому вспоминал, как это делается на JS. На чистом JS ставить куки оказалось уныло, поэтому нашёл популярную библиотеку js-cookie. Всё-таки, почти 7 🍋 установок за неделю о чём-то говорят )) Обращаться с куки стало реально удобнее: if (Cookies.get('order_modal_shown') !== 'Y') { Cookies.set('order_modal_shown', 'Y', { expires: 1 }) }

❤️‍🔥 "Программирование — для души" Иногда такое можно услышать от человека, который прям горит программированием. Он по приколу пишет какой-то сайт/приложение/игру в свободное время, просто для себя. А работает вообще в другой сфере. Или в IT, но не программистом. Возникает логичный вопрос: может убрать эту прокладку в виде не программерской работы и начать зарабатывать программированием? Причём пофиг, на фрилансе или в офисе. И тут кто-то возразит: — нет! Моё хобби превратится в работу и от этой работы меня будет тошнить 🤮 Спойлер: тошнить не будет, если не творить херню: * не устраиваться на работу, где ты наполовину программист, наполовину — заправщик принтеров; * не брать на фрилансе однообразные "конвейерные" проекты. Такие проекты убьют развитие, а вместе с ним — удовольствие от работы; * не работать за копейки. Делать на фрилансе интернет-магазин за дошик или работать в офисе за 30к в месяц на протяжении нескольких лет — такое себе решение; ... здесь может быть ваше продолжение списка Вместо этого: * качать свои навыки: бросать себе вызовы, делать необычные задачи; * вместе с этим: на фрилансе — повышать стоимость своей работы, на работе — получать повышение. Не дают повышение? Валить; * отдыхать. Хотя бы раз в полгода откладывать работу в сторону и перезагружаться. Иначе быть беде.