#frontend_mylife

Знаете, что такое горящая ж*па?

Когда завтра релиз, а надо успеть:
1. Сделать последние критические фиксы
2. Разобраться с CI/CD, конфигами Docker и понять, почему env переменные подставляются не те, которые нужны
3. Одновременно разрулить несколько рабочих моментов, где нужны мои действия
4. Успеть поспать, так как завтра очень ранний релиз

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

#frontend_mylife

Родители сделали раскопки и нашли мои старые фишки 😀

Почему-то из всех мне запомнились Mortal Combat, покемоны и вот эти металлические из Cheetos. Последние вообще топовое топище 😁

Давайте устроим перекличку) Кто играл и помнит что это такое?)

❤️ - Что это за игра древних?
🔥 - я стар, я суперстар, ностальгия в глаз попала

#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
Если вы мидл, лид, или просто думаете о том, как жить эту жизнь разработчика осмысленно — точно не пожалеете.