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

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

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

https://www.freepublicapis.com

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

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