Frontend вдохновляет </> Александр Белькевич
#frontend_news Насыплю вам кринжатины 🙈 РКН решила выпускать ШОУ, где будут рассказывать про заблокированные ресурсы и т.п. Странно, что в выпуске они не сказали, что уже недели 3 шатают интернет так, что многие ресурсы без трех запрещенных букв не работают…
Впервые пришлось отключить комментарии на посте) кому-то очень не понравилось сказанное, ботяры набежали)
😁5🔥2
А пока опрос! Используете ли AI в работе?
Anonymous Poll
76%
Да, подсказки кода
29%
Да, другие инструменты (напишу в комментах)
12%
Нет
#frontend_useful
Все еще продолжаю пропадать, так как на носу наиважнейший релиз в нашей команде. Нужно подготовиться к этому и отполировать проект настолько, насколько это возможно 🙂 Поэтому запись курса из-за этого тоже идет вяло: вечером сил никаких не остается.
А предыдущий опрос был не просто так 🙂
Я не совсем на ТЫ с AI в редакторах кода и IDE.
Мне не сильно зашел ИИ от Jetbrains. Часто какую-то дичь предлагает.
Дальше я попробовал TRAE - совершенно бесплатный на данный момент AI IDE. В целом понравился.
Но еще больше понравился Cursor. Пока попробовал немного, бесплатной версии достаточно. Давно откладывал знакомство с ним, но ребята бэкендеры на работе уже давно с ним работают и просто в восторге: говорят, что производительность увеличилась раза в 2-3 (в качестве агента юзают Gemini-2.5-pro).
Расскажу чуть позже, как у нас с ним сложилась история 🙂
Если есть опыт в подобных IDE - делитесь фишками, как помогает или как мешает ИИ в работе)
Все еще продолжаю пропадать, так как на носу наиважнейший релиз в нашей команде. Нужно подготовиться к этому и отполировать проект настолько, насколько это возможно 🙂 Поэтому запись курса из-за этого тоже идет вяло: вечером сил никаких не остается.
А предыдущий опрос был не просто так 🙂
Я не совсем на ТЫ с AI в редакторах кода и IDE.
Мне не сильно зашел ИИ от Jetbrains. Часто какую-то дичь предлагает.
Дальше я попробовал TRAE - совершенно бесплатный на данный момент AI IDE. В целом понравился.
Но еще больше понравился Cursor. Пока попробовал немного, бесплатной версии достаточно. Давно откладывал знакомство с ним, но ребята бэкендеры на работе уже давно с ним работают и просто в восторге: говорят, что производительность увеличилась раза в 2-3 (в качестве агента юзают Gemini-2.5-pro).
Расскажу чуть позже, как у нас с ним сложилась история 🙂
Если есть опыт в подобных IDE - делитесь фишками, как помогает или как мешает ИИ в работе)
👍11❤1🔥1
#frontend_useful
Решил погрузиться в тему AI и в частности разобраться, как с этим работать на уровне разработки. Очень советую видео от Антона Ларичева, очень доступно объяснил что к чему
https://www.youtube.com/watch?v=pHr179iQ6rU
Решил погрузиться в тему AI и в частности разобраться, как с этим работать на уровне разработки. Очень советую видео от Антона Ларичева, очень доступно объяснил что к чему
https://www.youtube.com/watch?v=pHr179iQ6rU
YouTube
Cursor AI на максималках! | 7 фичей, о которых вы не знали [rules, directory, MCP, docs, commit]
Cursor — на данный момент самая продвинутая AI-ориентированная IDE. В своей практике часто использую ее, когда нужно быстро собрать функционал. За это время накопил большой набор фичей, который помогает точно преднастроить пространство, модель под конкретный…
🔥19👍2❤1
#frontend_mylife
Знаете, что такое горящая ж*па?
Когда завтра релиз, а надо успеть:
1. Сделать последние критические фиксы
2. Разобраться с CI/CD, конфигами Docker и понять, почему env переменные подставляются не те, которые нужны
3. Одновременно разрулить несколько рабочих моментов, где нужны мои действия
4. Успеть поспать, так как завтра очень ранний релиз
Делитесь своим опытом появления вулкана на рабочем стуле 😁
Знаете, что такое горящая ж*па?
Когда завтра релиз, а надо успеть:
1. Сделать последние критические фиксы
2. Разобраться с CI/CD, конфигами Docker и понять, почему env переменные подставляются не те, которые нужны
3. Одновременно разрулить несколько рабочих моментов, где нужны мои действия
4. Успеть поспать, так как завтра очень ранний релиз
Делитесь своим опытом появления вулкана на рабочем стуле 😁
😁19🔥6
#frontend_mylife
Родители сделали раскопки и нашли мои старые фишки 😀
Почему-то из всех мне запомнились Mortal Combat, покемоны и вот эти металлические из Cheetos. Последние вообще топовое топище 😁
Давайте устроим перекличку) Кто играл и помнит что это такое?)
❤️ - Что это за игра древних?
🔥 - я стар, я суперстар, ностальгия в глаз попала
Родители сделали раскопки и нашли мои старые фишки 😀
Почему-то из всех мне запомнились Mortal Combat, покемоны и вот эти металлические из Cheetos. Последние вообще топовое топище 😁
Давайте устроим перекличку) Кто играл и помнит что это такое?)
❤️ - Что это за игра древних?
🔥 - я стар, я суперстар, ностальгия в глаз попала
🔥65❤5👎1
This media is not supported in your browser
VIEW IN TELEGRAM
🔥18👏9
#frontend_mylife
Недавно мне писал подписчик, который сказал «А чё так мало лайф-контента? Я что сюда, прихожу умные посты читать?» 😃
Ну вот так как мы в отпуске - ловите немного сегодняшний день)
У жены день рождения, мы в Архызе 🙂
Утро началось с очень теплого бассейна.
Продолжилось 3х часовым катанием на болотоходе: дикий восторг. По полям, по горам, по горным рекам. Начинали в жару, заканчивали снегом.
Ну и сейчас завершаем день шашлыком 🙂
Нескучный отпуск айтишника продолжается 😄
Недавно мне писал подписчик, который сказал «А чё так мало лайф-контента? Я что сюда, прихожу умные посты читать?» 😃
Ну вот так как мы в отпуске - ловите немного сегодняшний день)
У жены день рождения, мы в Архызе 🙂
Утро началось с очень теплого бассейна.
Продолжилось 3х часовым катанием на болотоходе: дикий восторг. По полям, по горам, по горным рекам. Начинали в жару, заканчивали снегом.
Ну и сейчас завершаем день шашлыком 🙂
Нескучный отпуск айтишника продолжается 😄
🔥26❤9👍4
#frontend_mylife
Залетаю в последний поезд хайпа по сгенерированным куклам в ChatGPT)
Я б купил такую фигурку себе 😁
А вы тоже можете попробовать и поделиться результатом)
Даю промт, найденный во всемирной паутине)
Создай персонализированную экшн-фигурку с человеком на фотографии в прозрачной пластиковой блистерной упаковке. Фигурка должна быть в полный рост.
Коробка должны быть [жёлтого] цвета.
В коробке рядом с фигуркой должны быть её аксессуары: [стаканчик кофе, ноутбук, книга «Мастер и Маргарита»].
На верху коробки добавь надпись [имя человека или название бренда в кавычках], а под ней — [должность или любая другая подпись в кавычках, если нужна].
Залетаю в последний поезд хайпа по сгенерированным куклам в ChatGPT)
Я б купил такую фигурку себе 😁
А вы тоже можете попробовать и поделиться результатом)
Даю промт, найденный во всемирной паутине)
Создай персонализированную экшн-фигурку с человеком на фотографии в прозрачной пластиковой блистерной упаковке. Фигурка должна быть в полный рост.
Коробка должны быть [жёлтого] цвета.
В коробке рядом с фигуркой должны быть её аксессуары: [стаканчик кофе, ноутбук, книга «Мастер и Маргарита»].
На верху коробки добавь надпись [имя человека или название бренда в кавычках], а под ней — [должность или любая другая подпись в кавычках, если нужна].
🔥13👍1
#frontend_usefule@front_everyday
Знаю, вы не любите рекламу, но это позволяет мне покрывать некоторые расходы на ведение блога 🙂
Ну теперь рекомендация по небольшой работе лично от меня 🙂
Необходимо сверстать пару страниц (дизайн Figma, самые нижние 2 страницы).
В дальнейшем, если все сложится хорошо, можно будет взять весь остальной макет.
Еще необходимо сделать адаптив (на свой вкус, отдельного дизайна под это нет).
Все вопросы можно написать сюда. Ну и по оплате/предоплате и срокам тоже договориться там же 🙂
Большая просьба: когда будете предлагать свои услуги - приложите пару-тройку своих работ 🤝
Знаю, вы не любите рекламу, но это позволяет мне покрывать некоторые расходы на ведение блога 🙂
Ну теперь рекомендация по небольшой работе лично от меня 🙂
Необходимо сверстать пару страниц (дизайн Figma, самые нижние 2 страницы).
В дальнейшем, если все сложится хорошо, можно будет взять весь остальной макет.
Еще необходимо сделать адаптив (на свой вкус, отдельного дизайна под это нет).
Все вопросы можно написать сюда. Ну и по оплате/предоплате и срокам тоже договориться там же 🙂
Большая просьба: когда будете предлагать свои услуги - приложите пару-тройку своих работ 🤝
❤5🔥2
Попробую новые хештеги в блоге, а то старые приелись 😁
#БезКода@front_everyday
Как не перегореть во фронте и кайфовать от процесса
Если вы хоть раз закатывали глаза от фразы "всё работает, только в Safari нет" — вы наверняка фронтендер 😁
К сожалению, перегореть — не баг, а фича нашего ритма. Особенно, когда вы и фичи клепаете, и блог ведёте, и курсы запускаете (угу, это я сейчас себя подловил 😅).
Вот 3 штуки, которые реально помогают кайфовать от фронта, а не сгорать:
✅ Маленькие победы — каждый день
Пофиксили баг, который бесил 2 недели? Запишите себе в заметки, похвалите себя. Ваша голова — не CI/CD, ей нужен фидбэк.
✅ Работайте не за задачки, а за смысл
Вы не просто “верстаете компонент”, вы делаете интерфейс, который поможет юзеру не сломать мозг. Это сильно меняет восприятие рутины.
✅ Делайте "ничего" — но по-честному
Переключение — это не Telegram с новостями по Vue, это вообще без экрана. Прогулка, игра с ребёнком, кофе на балконе. Без совести, с удовольствием.
Я понял, что фронт (да на самом деле любая разработка) перестаёт выжигать, когда вы перестаёте от него всё время "бежать вперёд". И начинаете иногда просто наслаждаться процессом.
А как вы справляетесь с выгоранием? Есть свои фишки?
#БезКода@front_everyday
Как не перегореть во фронте и кайфовать от процесса
Если вы хоть раз закатывали глаза от фразы "всё работает, только в Safari нет" — вы наверняка фронтендер 😁
К сожалению, перегореть — не баг, а фича нашего ритма. Особенно, когда вы и фичи клепаете, и блог ведёте, и курсы запускаете (угу, это я сейчас себя подловил 😅).
Вот 3 штуки, которые реально помогают кайфовать от фронта, а не сгорать:
✅ Маленькие победы — каждый день
Пофиксили баг, который бесил 2 недели? Запишите себе в заметки, похвалите себя. Ваша голова — не CI/CD, ей нужен фидбэк.
✅ Работайте не за задачки, а за смысл
Вы не просто “верстаете компонент”, вы делаете интерфейс, который поможет юзеру не сломать мозг. Это сильно меняет восприятие рутины.
✅ Делайте "ничего" — но по-честному
Переключение — это не Telegram с новостями по Vue, это вообще без экрана. Прогулка, игра с ребёнком, кофе на балконе. Без совести, с удовольствием.
Я понял, что фронт (да на самом деле любая разработка) перестаёт выжигать, когда вы перестаёте от него всё время "бежать вперёд". И начинаете иногда просто наслаждаться процессом.
А как вы справляетесь с выгоранием? Есть свои фишки?
❤13🔥5
#ПолезныеШтуки@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-код. Помогает, если надо быстро оживить интерфейс или протестировать идею.
А у вас есть полезный список расширений и сервисов, которым часто пользуетесь?
И если было полезно и хочется еще подобного - ставьте 🔥. У меня на несколько постов вперед заготовлено всяких вкусностей)
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-код. Помогает, если надо быстро оживить интерфейс или протестировать идею.
А у вас есть полезный список расширений и сервисов, которым часто пользуетесь?
И если было полезно и хочется еще подобного - ставьте 🔥. У меня на несколько постов вперед заготовлено всяких вкусностей)
🔥32❤2
#ФронтМысли@front_everyday
Красивый сайт — это тот, который не развалится от одного странного имени
Когда мы верстаем макеты, всё выглядит идеально:
🤩 Имена короткие (“Иван Иванов”)
🤩 Цены аккуратные (“1 999 ₽”)
🤩 Кнопки стройные, тексты влезают в один ряд.
Но реальный мир не читает ваши макеты
(к сожалению 😢)
На продакшн прилетает:
Супердлинное имя: Максимилиан Александрович Достоевский-Перепискин
Ошибка сервера: UNKNOWN ERROR: CODE 17xB980C9901A
Немеряные числа: 9 999 999 999,99₽
Комментарии без пробелов: нутипонастолкочтослипаетсявсёвместе
И если не подумать об этом заранее — ваш красивый интерфейс превращается в поле битвы и месиво из пикселей:
- текст вылезает за границы блока
- кнопки растягиваются на весь экран
- сетка ломается в самый неподходящий момент
Почему важно проверять такое поведение именно нам, фронтам?
Как показывает практика, такие баги тестировщик ловит не так часто, как хотелось бы (если у вас иначе - вам супер повезло).
А вот пользователь ловит всегда.
И судит о качестве работы не по тому, сколько усилий вы вложили, а по тому, как выглядит его личный сценарий использования.
Сайт должен быть устойчив к реальности. Даже если реальность странная.
Как защитить проект от переполнения:
😌 Ставьте overflow-wrap: break-word на динамический текст
😌 Ограничивайте размеры блоков через min-width, max-width
😌 Проверяйте вёрстку на фейковых данных: длинных именах, больших числах, ошибочных текстах
😌 Заложите запас в дизайне (не верьте макетам с идеальными строками)
Фронтенд — это не про пиксель-перфект. Это про готовность встретить реальный мир и не развалиться.
Если пост откликается - ставьте 🔥 и делитесь своими историями, когда у вас все развалилось из-за не предусмотренного длинного контента!
Красивый сайт — это тот, который не развалится от одного странного имени
Когда мы верстаем макеты, всё выглядит идеально:
🤩 Имена короткие (“Иван Иванов”)
🤩 Цены аккуратные (“1 999 ₽”)
🤩 Кнопки стройные, тексты влезают в один ряд.
Но реальный мир не читает ваши макеты
(к сожалению 😢)
На продакшн прилетает:
Супердлинное имя: Максимилиан Александрович Достоевский-Перепискин
Ошибка сервера: UNKNOWN ERROR: CODE 17xB980C9901A
Немеряные числа: 9 999 999 999,99₽
Комментарии без пробелов: нутипонастолкочтослипаетсявсёвместе
И если не подумать об этом заранее — ваш красивый интерфейс превращается в поле битвы и месиво из пикселей:
- текст вылезает за границы блока
- кнопки растягиваются на весь экран
- сетка ломается в самый неподходящий момент
Почему важно проверять такое поведение именно нам, фронтам?
Как показывает практика, такие баги тестировщик ловит не так часто, как хотелось бы (если у вас иначе - вам супер повезло).
А вот пользователь ловит всегда.
И судит о качестве работы не по тому, сколько усилий вы вложили, а по тому, как выглядит его личный сценарий использования.
Сайт должен быть устойчив к реальности. Даже если реальность странная.
Как защитить проект от переполнения:
😌 Ставьте overflow-wrap: break-word на динамический текст
😌 Ограничивайте размеры блоков через min-width, max-width
😌 Проверяйте вёрстку на фейковых данных: длинных именах, больших числах, ошибочных текстах
😌 Заложите запас в дизайне (не верьте макетам с идеальными строками)
Фронтенд — это не про пиксель-перфект. Это про готовность встретить реальный мир и не развалиться.
Если пост откликается - ставьте 🔥 и делитесь своими историями, когда у вас все развалилось из-за не предусмотренного длинного контента!
🔥68❤5👍2
#ВашиПетПроекты@front_everyday
Добавляю новую рубрику, где вы можете делиться СВОИМИ проектами.
Дисклеймер: не на правах рекламы. Бесплатно!
Идея пришла после того, как мне один из подписчиков прислал телеграм-бота, которого делал сам. Чуть ниже расскажу подробнее, а вы можете прислать свои пет-проекты в эту форму и если проект реально интересный - я расскажу о нем здесь! 🙂
А теперь подробнее про сегодняшний кейс🙂
Федор прислал ссылку на Telegram-бота. Суть его в том, что он умеет:
- Обрабатывать фотографии в поддерживаемых стилях (к примеру Pixar, Lego, Миядзаки и т.п.).
- Делать из получившегося изображения видео без звука.
- Озвучивать фотографию при помощи голосового сообщения или аудиофайла.
Лично я попробовал несколько генераций и мне понравилось)
Первую фотографию я решил стилизовать под Lego.
Вторую - под Pixar и оживил с помощью промта
Мое мнение - очень интересно. Здесь море возможностей и для монетизации, и для расширения функционала 👍
А вот здесь можно почитать, так сказать, будни разработчика и то, как развивается бот. И еще статейка на VC.ru есть о том, как бот делался)
Пробуйте бота (бесплатные токены для генерации есть, так что платить ничего не надо с самого начала) и скидывайте свои результаты в комменты)
А если есть вопросы к разработчику, он ответит в комментариях)
Ну а если формат такой нравится и стоит его продолжать - накидайте реакций)
Добавляю новую рубрику, где вы можете делиться СВОИМИ проектами.
Дисклеймер: не на правах рекламы. Бесплатно!
Идея пришла после того, как мне один из подписчиков прислал телеграм-бота, которого делал сам. Чуть ниже расскажу подробнее, а вы можете прислать свои пет-проекты в эту форму и если проект реально интересный - я расскажу о нем здесь! 🙂
А теперь подробнее про сегодняшний кейс
Федор прислал ссылку на Telegram-бота. Суть его в том, что он умеет:
- Обрабатывать фотографии в поддерживаемых стилях (к примеру Pixar, Lego, Миядзаки и т.п.).
- Делать из получившегося изображения видео без звука.
- Озвучивать фотографию при помощи голосового сообщения или аудиофайла.
Лично я попробовал несколько генераций и мне понравилось)
Первую фотографию я решил стилизовать под Lego.
Вторую - под Pixar и оживил с помощью промта
Человечек рассказывает очень увлеченно, сидящие люди поднимают руки, чтобы задать вопросы
Мое мнение - очень интересно. Здесь море возможностей и для монетизации, и для расширения функционала 👍
А вот здесь можно почитать, так сказать, будни разработчика и то, как развивается бот. И еще статейка на VC.ru есть о том, как бот делался)
Пробуйте бота (бесплатные токены для генерации есть, так что платить ничего не надо с самого начала) и скидывайте свои результаты в комменты)
А если есть вопросы к разработчику, он ответит в комментариях)
Ну а если формат такой нравится и стоит его продолжать - накидайте реакций)
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥28👍3