#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$, но люди покупают годовые подписки, и их так же игнорят. Кидалово? Вряд-ли. Несерьезное отношение к делу? Однозначно.