Хочу поделиться с вами одной очень годной 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

Я сменил работу

Начну с того, что поиск новой работы — это всегда для меня стресс. Я больше месяца активно отслеживал вакансии, проходил собеседования, готовился, решал задачки на leetcode. И за всё это время, я успел пособеседоваться в различные компании — от малых до крупных. В большинстве случаев, каждое техническое собеседование оставляло послевкусие тильта и духоты. Часто теоретическая часть была просто душным квизом по терминам JavaScript, а практика — это задачи, которые в 99% случаев ты не встретишь в реальной жизни и решение которых (очень желательно) должно совпадать с виденьем решения интервьюера.

Из всех компаний куда я пробовался, только в нескольких мне посчастливилось приятно пообщаться, без лишнего пафоса и нагнетания. Одна из таких компаний — это 😀Иви (по итогу в которую я и попал). Собеседование проходило достаточно органично и ощущалось скорее как беседа о фронтенд-разработке, о моём опыте и личном мнении касательно различных технологий, а практическая часть состояла из небольших задачек, которые (о чудо!) имели непосредственное отношение к тому, с чем часто приходится сталкиваться в своей работе.

Именно такой подход мне кажется наиболее правильным при поиске кандидата, ведь термины и популярные алгоритмические задачки можно, при желании, просто заучить (необязательно даже вникать в суть) и в таком случае уже тяжело оценить реальный скилл и опыт кандидата. Поэтому я считаю, что очень важно именно РАЗГОВАРИВАТЬ, а не заполнять опросник по методичке. Это даст больше понимания о том, насколько человек погружён в практические аспекты фронтенд-разработки.

Не знаю, что ждёт впереди, но мнение о новой работе начинает складываться именно с собеседования и пока что, оно очень положительное 🤔