Александр Белькевич </> Frontend вдохновляет

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#ПолезныеШтуки@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

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

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

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

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

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

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

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

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

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

#frontend_usefule@front_everyday

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

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

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

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

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

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

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

#frontend_mylife

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

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

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

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

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

#frontend_mylife

Недавно мне писал подписчик, который сказал «А чё так мало лайф-контента? Я что сюда, прихожу умные посты читать?» 😃

Ну вот так как мы в отпуске - ловите немного сегодняшний день)

У жены день рождения, мы в Архызе 🙂

Утро началось с очень теплого бассейна.

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

Ну и сейчас завершаем день шашлыком 🙂

Нескучный отпуск айтишника продолжается 😄

#frontend_mylife

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

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

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

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

#frontend_mylife

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

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

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

#frontend_useful

Решил погрузиться в тему AI и в частности разобраться, как с этим работать на уровне разработки. Очень советую видео от Антона Ларичева, очень доступно объяснил что к чему

https://www.youtube.com/watch?v=pHr179iQ6rU

#frontend_useful

Все еще продолжаю пропадать, так как на носу наиважнейший релиз в нашей команде. Нужно подготовиться к этому и отполировать проект настолько, насколько это возможно 🙂 Поэтому запись курса из-за этого тоже идет вяло: вечером сил никаких не остается.

А предыдущий опрос был не просто так 🙂

Я не совсем на ТЫ с AI в редакторах кода и IDE.

Мне не сильно зашел ИИ от Jetbrains. Часто какую-то дичь предлагает.

Дальше я попробовал TRAE - совершенно бесплатный на данный момент AI IDE. В целом понравился.

Но еще больше понравился Cursor. Пока попробовал немного, бесплатной версии достаточно. Давно откладывал знакомство с ним, но ребята бэкендеры на работе уже давно с ним работают и просто в восторге: говорят, что производительность увеличилась раза в 2-3 (в качестве агента юзают Gemini-2.5-pro).

Расскажу чуть позже, как у нас с ним сложилась история 🙂

Если есть опыт в подобных IDE - делитесь фишками, как помогает или как мешает ИИ в работе)

Впервые пришлось отключить комментарии на посте) кому-то очень не понравилось сказанное, ботяры набежали)

#frontend_post

Что такое NDA?

Если простыми словами, то NDA - это соглашение о неразглашении. Оно заключается между двумя сторонами, например, между разработчиком и компанией, чтобы защитить конфиденциальную информацию. Подписывая NDA, вы обязуетесь не разглашать, не передавать и не использовать для личных целей ту информацию, которую вам доверили.

Почему это важно?

1. Защита интеллектуальной собственности
NDA помогает компании защитить свои идеи, разработки и технологии от конкурентов. Когда разработчики подписывают NDA, они обязуются не разглашать информацию, например, о новом продукте или внутренней архитектуре системы.

2. Снижение рисков
NDA помогает снизить риски утечки информации, что особенно важно в конкурентных отраслях, где любая утечка может привести к финансовым потерям или потере преимущества на рынке.

Для разработчиков, на мой взгляд, плюс в NDA один. NDA обычно четко прописывает, что можно и чего нельзя делать с информацией. Это помогает избежать недоразумений и возможных конфликтов с работодателем.

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

И исходя из своих же слов я могу сделать вывод: минусов для разработчиков больше, чем плюсов:

1. Ограничение свободы действий
NDA ограничивает вас в том, что вы можете рассказывать о своей работе. Иногда это означает, что вы не сможете добавить определенные проекты в свое портфолио или обсуждать их в публичных местах.

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

3. Юридическая ответственность
Нарушение NDA (даже если вы сделали это не специально) может привести к серьезным юридическим последствиям, включая штрафы или судебные разбирательства. Это накладывает дополнительную ответственность и требует внимательности.

В свою очередь, у компании есть тоже свои плюсы и минусы при заключении NDA.

Плюсы:

1. Защита бизнеса
NDA защищает компанию от утечек информации и интеллектуальной собственности, что позволяет сохранять конкурентные преимущества и снижать риски.

2. Укрепление репутации
Компании, которые активно защищают свою интеллектуальную собственность, часто воспринимаются как более профессиональные и надежные, что укрепляет их репутацию на рынке.

Минусы:

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

2. Сложности в найме
Некоторые разработчики могут отказаться от работы в компании из-за слишком жестких условий NDA, что усложняет поиск талантливых специалистов.

Выводы:

Стоит ли работать по NDA - решать лично вам. У меня 4 подряд проекта с NDA и я не могу показать потенциальным работодателям даже кусочки кода. Но все остальное меня не напрягает.

Но при этом я знаю ребят, которые принципиально отказывают тем компаниям, для которых NDA важен.

Что вы еще бы добавили к этому посту? Поделитесь своим опытом.

И как думаете, NDA - это круто 👍 или перебор ❤️?