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

В последнее время, я чувствовал, что сильно измотан. Моя голова каждый вечер дико кипела после работы, а когда я закрывал ноутбук, мне хотелось просто лечь на диван и ничего не делать. Поэтому я решил, что пора ребутить мозги и взял себе отпуск на 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 год выполнено, а что не успел, перенесём на следующий, не страшно. Так что всех с наступающим, а я пойду резать салатики! 🍸

Система иконок в React-приложениях

Существуют разные способы работы с иконками в проектах, я хочу поделиться с вами именно тем, которым сам пользуюсь при разработке. В своей первой статье я решил рассказать о том, как автоматизировать работу с иконками, в качестве React-компонентов, что позволяет вставлять исходный svg-код прямо в разметку страницы.

Это что мой первый пост в этом году?👀

Что-то я упустил момент, а когда это фигмой стало невозможно пользоваться?

На днях я решил начать собирать небольшой пет-проект, нашёл бесплатные ui-компоненты в figma-community, перенёс к себе в макет, начинаю верстать и понимаю, что мои привычные ctrl+c — ctrl+v паттерны для свойств текста, градиентов, обводок и т.д. не работают. Более того, вкладка Properties вообще пропала с панели. Я, конечно, слышал краем уха, что DevMode в фигме стал платным. Но они к нему решили отнести и те фичи, что были бесплатными и супер-удобными со старта. Теперь каждое свойство объекта разработчику нужно вручную прописывать и рассчитывать относительные единицы. Короче, сгорел я знатно. Зато узнал, что на рабочих проектах у нас платная версия 🍷

История из жизни

Ещё пару месяцев назад, всё своё свободное время я залипал в телефоне. Шорсты, рилсы, новости. Я потреблял фастфуд-контент, когда подворачивалась любая «свободная» минутка. Перерыв, обед, ожидание лифта, пока идёшь куда-то. Дошло до автоматизма. Я вставал с рабочего места и рука сразу же запускала шортсы на ютубе или новостной паблик в телеге, а я ведь просто иду заваривать себе чай…

И вот я решился посмотреть статистику использования этих приложений на телефоне и оказалось, что суммарно я тратил на это 4 часа в день. То есть из 24 часов, где 8 — это работа, другие 8 — это сон, 4 часа — это скролл коротких видосиков. Сказать, что я ох**л, ничего не сказать. А ведь я не стал учитывать сюда телеграм с ежедневным скроллом новостей, так как, помимо этого, я активно использую его в качестве основного мессенджера.

В итоге, в марте я решил провести над собой эксперимент и отказаться на месяц от просмотра вертикальных видео. Спустя буквально несколько дней, я заметил, что я стал меньше уставать. Как будто стало не только больше времени, но и сил. Я начал читать книгу, материалы по давно интересующим меня профильным темам, ВНЕЗАПНО нашёл время для своих пет. проектов.

И вот март прошёл, мой «эксперимент» считается оконченным, можно возвращаться к просмотру быстрого контента, но есть нюанс… Как-то уже не хочется. Нет, безусловно, я могу периодически зайти и поскроллить шортсы/рилсы, но это стали короткие сессии 2-3 раза в неделю по минут 10 максимум.

Так и что по итогу? А по итогу, я теперь нашёл силы и время на поглощение полезной для меня информации и на разработку пет. проектов. Возможно, кстати, одним из наиболее интересных для меня я в скором времени с вами поделюсь. Поэтому, хотелось бы вам сказать «Цените время, его так мало», но кто я такой, чтобы что-то вам советовать. 🪑

Я тут завершил свой небольшой пет-проект на Node.js

📱 discord-singer-bot — это бот для голосовых каналов в Discord, который воспроизводит музыку из Youtube. Реализовано базовое управление очередью треков + возможность воспроизводить плейлисты.

Доступные функции:
- воспроизведение плейлистов и видео по ссылке;
- пауза/стоп/повтор/скип.

Проект можно масштабировать, но мне лень, поэтому решил оставить так. 👋

P.S. Если кому-то пригодится, то инструкция по запуску расписана в репозитории.

Опубликовал библиотеку — получил в этот же день issue 🎉

Наверняка многие из вас встречали сайты и приложения, где в качестве аватарки пользователя использовался первый символ имени на цветном фоне. Далеко ходить не надо, как пример — Телеграм. Как-то давно я написал себе небольшую js-функцию для этого, которую периодически тяну в свои проекты. Так вот, я решил её слегка обновить и опубликовать в качестве npm-пакета, чтобы можно было удобно её устанавливать и использовать.

letter-avatar-generator — библиотека, которая позволяет сгенерировать картинку из первого символа строки. За каждым символом закреплён определенный цвет фона. Поддерживается как латиница, так и кириллица. Можно задать кастомные настройки фона, текста и размер изображения. На выходе функция вернёт строку в формате base64, которую можно сразу использовать в качестве src для <img />.

Опубликовал пакет днём, но уже вечером получил первый issue с позитивным фидбеком и просьбой добавить возможность задавать кастомный размер символа. Это мой первый опыт в "open source". Приятно, что кто-то пользуется тем, что ты создал. Так что скоро подъедет апдейт. 😎

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

Как правило, у фронтенд-разработчиков, это достаточно понятная структура, состоящая из нескольких этапов собеседований: интервью, теоретическая часть и техническая часть. В зависимости от ситуаций и предпочтений компаний, эти этапы могут по разному комбинироваться, чередоваться и дополняться. Но если с интервью и теорией в целом всё стандартно и понятно, то с техническим этапом у нанимателя открывается возможность выбора — лайвкодинг или тестовое задание.

Лайвкодинг на мой взгляд имеет ряд преимуществ перед тестовыми заданиями и является более эффективным.

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

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

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

А как вы считаете, какой способ проверки тех. навыков лучше? 🤓

Хочу поделиться с вами интересным докладом про работу с иконками в проекте

Не так давно я публиковал свою первую статью, где описывал один из вариантов создания системы иконок в React-приложениях. Так вот, я нашёл ещё один вариант, который на мой взгляд, кажется достаточно интересным. Суть в том, чтобы создать один компонент иконки и использовать внутри него css-свойство mask-image.

Плюсы такого подхода:
• Не нужно плодить dom-узлы с svg-разметкой;
• Остаётся возможность задавать любой цвет и даже градиент через свойство background;
• Свойство mask-image достаточно старое и имеет хорошую поддержку в разных браузерах;
• Иконка кэшируется как обычное изображение при первом запросе.

📱 Ссылка на видео: https://youtu.be/7P99kvUDVdU?si=FPcNGD55EpINo1Uy