#frontend_mylife

Залетаю в последний поезд хайпа по сгенерированным куклам в ChatGPT)

Я б купил такую фигурку себе 😁

А вы тоже можете попробовать и поделиться результатом)

Даю промт, найденный во всемирной паутине)

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

#frontend_usefule@front_everyday

Знаю, вы не любите рекламу, но это позволяет мне покрывать некоторые расходы на ведение блога 🙂

Ну теперь рекомендация по небольшой работе лично от меня 🙂

Необходимо сверстать пару страниц (дизайн Figma, самые нижние 2 страницы).

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

Еще необходимо сделать адаптив (на свой вкус, отдельного дизайна под это нет).

Все вопросы можно написать сюда. Ну и по оплате/предоплате и срокам тоже договориться там же 🙂

Большая просьба: когда будете предлагать свои услуги - приложите пару-тройку своих работ 🤝

Попробую новые хештеги в блоге, а то старые приелись 😁

#БезКода@front_everyday

Как не перегореть во фронте и кайфовать от процесса

Если вы хоть раз закатывали глаза от фразы "всё работает, только в Safari нет" — вы наверняка фронтендер 😁

К сожалению, перегореть — не баг, а фича нашего ритма. Особенно, когда вы и фичи клепаете, и блог ведёте, и курсы запускаете (угу, это я сейчас себя подловил 😅).

Вот 3 штуки, которые реально помогают кайфовать от фронта, а не сгорать:

✅ Маленькие победы — каждый день
Пофиксили баг, который бесил 2 недели? Запишите себе в заметки, похвалите себя. Ваша голова — не CI/CD, ей нужен фидбэк.

✅ Работайте не за задачки, а за смысл
Вы не просто “верстаете компонент”, вы делаете интерфейс, который поможет юзеру не сломать мозг. Это сильно меняет восприятие рутины.

✅ Делайте "ничего" — но по-честному
Переключение — это не Telegram с новостями по Vue, это вообще без экрана. Прогулка, игра с ребёнком, кофе на балконе. Без совести, с удовольствием.

Я понял, что фронт (да на самом деле любая разработка) перестаёт выжигать, когда вы перестаёте от него всё время "бежать вперёд". И начинаете иногда просто наслаждаться процессом.

А как вы справляетесь с выгоранием? Есть свои фишки?

#ПолезныеШтуки@front_everyday

Responsively
Открываешь проект и сразу видишь, как он выглядит на всех экранах. Не нужно 10 девайсов или 100 вкладок — всё в одном окне. Работает быстро, кастомизируется. Устанавливается как приложение Mac/Windows/Linux.

codepen.io
Онлайн-песочница для HTML/CSS/JS. Быстрая, с поддержкой фреймворков. Удобна, когда хочется протестировать идею или поделиться сниппетом без создания нового проекта.

VisBug
Расширение для Chrome от Google. Прямо на живом сайте можно:
- двигать элементы, менять отступы и стили
- подсвечивать сетки, контейнеры, z-index
- "на лету" редактировать текст, шрифты и цвета
Подходит для быстрой проверки верстки, подгонки UI и даже для обсуждений с дизайнером — без открытия кода.

Can I Use
Уверен, почти все знают про этот сервис, но все же. Вбиваете любую CSS/JS-фичу и сразу видно: где она поддерживается, а где сломается. Мастхев.

Animasta
Готовые CSS-анимации: fade, slide, rotate, bounce и десятки других. Настраиваете визуально, жмете — и получаете чистый CSS-код. Помогает, если надо быстро оживить интерфейс или протестировать идею.

А у вас есть полезный список расширений и сервисов, которым часто пользуетесь?

И если было полезно и хочется еще подобного - ставьте 🔥. У меня на несколько постов вперед заготовлено всяких вкусностей)

#ФронтМысли@front_everyday

Красивый сайт — это тот, который не развалится от одного странного имени

Когда мы верстаем макеты, всё выглядит идеально:

🤩 Имена короткие (“Иван Иванов”)
🤩 Цены аккуратные (“1 999 ₽”)
🤩 Кнопки стройные, тексты влезают в один ряд.

Но реальный мир не читает ваши макеты
(к сожалению 😢)

На продакшн прилетает:

Супердлинное имя: Максимилиан Александрович Достоевский-Перепискин

Ошибка сервера: UNKNOWN ERROR: CODE 17xB980C9901A

Немеряные числа: 9 999 999 999,99₽

Комментарии без пробелов: нутипонастолкочтослипаетсявсёвместе

И если не подумать об этом заранее — ваш красивый интерфейс превращается в поле битвы и месиво из пикселей:
- текст вылезает за границы блока
- кнопки растягиваются на весь экран
- сетка ломается в самый неподходящий момент

Почему важно проверять такое поведение именно нам, фронтам?

Как показывает практика, такие баги тестировщик ловит не так часто, как хотелось бы (если у вас иначе - вам супер повезло).
А вот пользователь ловит всегда.
И судит о качестве работы не по тому, сколько усилий вы вложили, а по тому, как выглядит его личный сценарий использования.

Сайт должен быть устойчив к реальности. Даже если реальность странная.

Как защитить проект от переполнения:
😌 Ставьте overflow-wrap: break-word на динамический текст
😌 Ограничивайте размеры блоков через min-width, max-width
😌 Проверяйте вёрстку на фейковых данных: длинных именах, больших числах, ошибочных текстах
😌 Заложите запас в дизайне (не верьте макетам с идеальными строками)

Фронтенд — это не про пиксель-перфект. Это про готовность встретить реальный мир и не развалиться.

Если пост откликается - ставьте 🔥 и делитесь своими историями, когда у вас все развалилось из-за не предусмотренного длинного контента!

#ФронтОпыт@front_everyday

Cursor божественен!

Серьезно. К AI инструментам я относился довольно скептически (в плане написания кода). Но при должной настройке редактора он превращается в мощный инструмент, который действительно убирает рутину и дает сосредоточиться на более сложных задачах.

За 2 недели плотного использования я не стал vibe-кодером (фух, а так боялся). Таким в работе с AI надо отказывать с пометкой в личном деле, так как наговнокодить легче легкого.

Но этот пост, на самом деле, вообще не про это все. А про саму команду Cursor, точнее про саппорт.

Купил 6 апреля подписочку на Pro версию. Радовался, кодил, почувствовал себя смузи-разрабом (ну а что - сиди, промты пиши и смотри, как твой компонент из Options API в Composition API превращается).

И тут ровно через 2 недели вижу, что я стал пользователем обычной (то есть free) версии.

Я птица не гордая, бесплатным не брезгую. Но я то заплатил 20$ за услугу.

Пишу в саппорт с вопросом "Where is мой pro аккаунт"?. Мне в ответ "У вас оплата до 6 мая, все должно быть ок" и советы по типу "перезагрузите роутер".

Ясное дело, что ничего не помогло. Ребята мне пишут "Sorry. Пойдем копать глубже, ответим as soon as possible".

Проходит неделя - тишина. Пишу им - игнор. Пишу сегодня опять - игнор. На форуме пишу - так же игнор.

А подписка то платная идет, деньги уплочены. Не то, чтобы я умер за 20$, но оплачивать новую подписку, пока не решится с предыдущей - такое себе. А с учетом того, что я думал сразу на год взять...

В общем, буду держать в курсе ситуации. Продукт - мощь. Но саппорт - грусть.

Канал, который я сам читаю и вам советую — @ulshinblog

Если вам близка тема не просто писать код, а делать это осознанно — вам к Никите Ульшину.

Он тимлид в Т-Банк, провёл сотни собесов, собрал не одну команду, а ещё пишет так, что сложные вещи становятся понятными.

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

Вот несколько постов, с которых можно начать:
1. Как принимать обратную связь — бурное обсуждение, много инсайтов.
2. Как меньше уставать — без банальщины.
3. Про отказоустойчивость и BFF — доклад, который хочется переслушать.
4. Зачем мне это вообще? — пост, который попадает в точку каждому, кто учится.

Подписывайтесь: @ulshinblog
Если вы мидл, лид, или просто думаете о том, как жить эту жизнь разработчика осмысленно — точно не пожалеете.

#ПолезныеШтуки@front_everyday

В выходной день не буду сильно грузить и просто дам полезность 😃

https://www.freepublicapis.com

Подборка из более чем 350 бесплатных API

Можно юзать в своих pet-проектах. Особенно понравилась статистика, которая показывает количество ошибок по выбранному API. Можно сразу понять, стоит ли тратить на него время 🙂

#ФронтМысли@front_everyday

Почему фронтендеру важно уметь верстать?

— “Да зачем мне эта верстка, я же фронтендер! Пусть дизайнеры рисуют, верстальщики верстают, а я буду писать логику.”

Ошибочка! Если вы хотите быть полноценным фронтенд-разработчиком, а не просто “кто-то там, кто кидает JSON в компонент”, то умение верстать — это базовый навык.

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

Вот 5 причин, почему верстка — это ключевой навык фронтендера:

1️⃣ Вы понимаете, как правильно работать с UI

Фронтенд — это не только JavaScript. Вы создаёте интерфейс, а не просто логику.

Если вы не умеете верстать, то:
- Вы будете полагаться на готовые UI-библиотеки и ограничивать себя их возможностями.
- Вы не сможете грамотно адаптировать макет под разные экраны.
- Вы будете писать костыли, потому что не знаете, как работают flex, grid, position, z-index.

✅ Как должно быть:
Вы получаете макет → разбиваете его на компоненты → верстаете так, чтобы всё было адаптивно, удобно и легко расширяемо.

2️⃣ Вы быстрее и качественнее работаете с дизайнерами

Если вы понимаете верстку, вам не нужно по 10 раз спрашивать у дизайнера:
— “А тут margin какой?”
— “А что делать, если заголовок длинный?”
— “А если тут картинка больше обычного?”

❌ Без верстки:
Вы видите макет и теряетесь, потому что не знаете, как его правильно сверстать.

✅ С версткой:
Вы понимаете, где grid, где flex, какие отступы важны, а где можно адаптировать.

Фронтендер, который разбирается в верстке, экономит своё время и не грузит команду лишними вопросами.

3️⃣ Вы делаете адаптив, который реально работает

❌ Без верстки:
Вы берёте чьи-то готовые медиазапросы, не понимая, как они работают.

✅ С версткой:
Вы сразу пишете адаптив правильно:
- Mobile First или Desktop First, в зависимости от задачи.
- Делаете элементы гибкими, а не “задаёте в пикселях и молитесь, чтобы не поехало”.

4️⃣ Вы меньше страдаете от багов

Вы же видели этот ад, когда на одном экране всё норм, а на другом — верстка сломалась?

Это происходит, когда разработчик не учитывает особенности браузеров:
- overflow: hidden где не нужно.
- z-index: 999999999 вместо нормальной иерархии.
- position: absolute вместо flex или grid.

✅ Как должно быть:
- Вы понимаете специфику браузеров.
- Вы знаете, как верстать так, чтобы не появлялись странные баги.
- Вы можете быстро фиксить проблемы, не переколачивая весь код.

5️⃣ Вы цените время (и деньги)

Не умеете верстать? Тогда готовьтесь:

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

Будете зависеть от других, потому что даже небольшие правки в UI вам придётся ждать от верстальщика.

Ваши шансы на оффер снизятся, потому что компании ищут фронтендеров, которые могут делать интерфейсы сами, а не просто “лепить компоненты”.

✅ Как должно быть:
- Вы можете сами сверстать любой макет, не тратя время на поиски готовых решений.
- Ваши интерфейсы выглядят так, как задумано, а не “примерно похоже”.
- Вы быстрее растёте как специалист, потому что умеете и писать логику, и работать с UI.

Вывод

Фронтенд — это не просто “писать код”. Это создавать удобные, красивые и работающие интерфейсы.

И если вы до сих пор считаете, что верстка — это “несерьёзно”, попробуйте объяснить это работодателю, который ищет специалиста, а не человека, который “умеет, но не хочет”.

Кстати, на курсах я смотрю визуал и верстку не меньше, чем логику и правильно написанные JS/Vue компоненты.

И да, есть исключения в компаниях, где отдельно верстальщик делает свою магию, а фронт пишет только логику. Но так далеко не везде и рассчитывать на попадание именно в такую компанию - такое себе.

Буду рад, если среди вас нет тех, кто не умеет верстать, но как показывается практика и собеседование — среди нас таких много 🙈

#ФронтОпыт@front_everyday

Продолжение истории… 😌

А ее нет так таковой. Пошла третья неделя молчания. Написал с другой почты - ответили. В итоге опять началось «Зайдите/выйдите из аккаунта, станцуйте румбу с бубном и ждите, когда-нибудь разберемся».

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

По итогу перешел на Windsurf. Чуть подешевле, но лимиты, агенты, разные варианты ИИ и так далее здесь тоже есть. Большой разницы не заметил в работе. По крайней из того, что мне нужно - все есть 🙃

Ну а Cursor, думаю, соберет ещё отрицательных отзывов. Ладно я потерял 20$, но люди покупают годовые подписки, и их так же игнорят. Кидалово? Вряд-ли. Несерьезное отношение к делу? Однозначно.

#ФронтОпыт@front_everyday

Несмотря на приколы с Cursor лично у меня, у вас есть возможность с ним поработать в течении года совершенно бесплатно, если вы студент. Даже если вы из стран СНГ.

Подробности здесь 😌 Бесплатно точно нужно попробовать, это даже не обсуждается 🧐

#РабочийЛайф@front_everyday

Так как я провожу время от времени технические собеседования, мне и другим ребятам на работе провели онлайн-треннинг по найму.

Узнал немало нового. Где-то заметил свои ошибки, а где-то понял, что действовал максимально верно и корректно по отношению к кандидатам.

Еще понравилось, что структура собеседования, которую предлагают HR, у меня была выдержана почти минута в минуту. Получилось само собой, опытным путем 🙂

В конце от каждого просили фидбэк к треннингу. Было круто, но меня выбили из колеи следующие слова и словосочетания (часть составленного мной списка):

no-decision воронки
cultural fit
Job-knowledge
дип-дайв
Ice-breaker
мотивационный «fit»

Либо я слишком стар для этого, либо это HR-слова, которые от меня далеки 😁 Попросил в следующий раз попроще 😁

А в целом было очень интересно) Как говорится, ни дня без получения новой информации ❤️

#ITЮмор@front_everyday

С рабочего чата 😃

#НемногоКода@front_everyday

Разбираемся с конфликтом событий в Vue.js

Недавно я столкнулся с интересной проблемой в рабочем Vue.js приложении. При попытке скопировать текст из определенного компонента (выделив его мышью и нажав Ctrl+C или используя контекстное меню), в буфер обмена вместо выделенного текста попадала строка [object ClipboardEvent]. При этом в других компонентах копирование работало нормально.

Причина проблемы

После долгих исследований я обнаружил истинную причину проблемы: конфликт имен между нативным событием браузера и пользовательским событием Vue.

В моем компоненте был метод copy , который эмитил событие с именем "copy" в родительский компонент:

copy(value) {
 this.$emit("copy", value);
}

А в родительском компоненте был обработчик этого события:

<order-info-lines :info="orderInfo" @copy="copy" />
...
copy(value) {
 navigator.clipboard.writeText(value);
}

Проблема возникала из-за того, что браузер также имеет нативное событие "copy". Vue перехватывал это нативное событие и пытался передать его в обработчик, который ожидал получить значение для копирования, а не объект события.

Решение

Решение оказалось простым: нужно было избежать конфликта имен, переименовав пользовательское событие Vue.

// переименовать copy на copyValue
copy(value) {
 this.$emit("copyValue", value);
}

И так же обновить все места в родительском компоненте

<order-info-lines :info="orderInfo" @copyValue="copy" />

После этих изменений копирование текста стало работать корректно.

Выводы

1. Избегайте использования имен нативных событий браузера для пользовательских событий Vue. Вот некоторые распространенные нативные события, которые лучше не использовать для пользовательских событий: click, copy, paste, cut, focus, blur, input, change, submit, keydown, keyup, mousedown, mouseup, mousemove.

2. Используйте префиксы для пользовательских событий. Хорошей практикой является добавление префикса к именам пользовательских событий, например: on-copy, handle-copy, custom-copy или, как в моем случае, copyValue.

#МойЛайф@front_everyday

Иногда под постами вы спрашиваете "Че Саня, когда новый видеокурс. Обещал давно, но никак не выложишь".

Есть такой грешок, но на самом деле у меня есть отмазки))

1. Это самый большой курс, который я когда-либо готовил. Много полезной и важной инфы. И как всегда - основано на практике. План курса писал здесь.

2. Не так много времени на запись. Работа никуда не делась, Блог и курсы - это круто, но не основная деятельность (к счастью или к сожалению - еще не определился))

3. Когда время доходит до записи - хоть в депрессию впадай 😁 2 часа свободного времени, а записан всего один десятиминутный урок. Потому что здесь причмокнул, там фигню сказал, еще где-то стул заскрипел, а иногда просто звук отвалился. Короче, кошмар)

4. Монтаж. Да, он относительно быстрый. Но там вырежи лишнее, здесь склей и время тоже уходит немало.

Так что те, кто ожидает - ждите ❤️ Записал где-то 1/3 курса. Дальше пойдет полегче. Самое сложное - это начало.