FrontEndDev
26.3K subscribers
2.58K photos
24 videos
7.81K links
🚀 Статьи, новости, туториалы по frontend разработке.

http://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m
AI и вайбкод @vibe_and_ai

Читать на парковке: https://max.ru/front_end_dev

Реклама: http://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Download Telegram
HTTP получил метод QUERY: зачем понадобился безопасный запрос с телом

В HTTP стандартизировали QUERY — безопасный и идемпотентный метод чтения, где сложные параметры передаются в теле запроса, а не в URI.

https://habr.com/ru/articles/1055310/
👍1711
Проверка вакансий и рекрутеров на мошенничество с помощью OSINT для Claude.

JobVerify помогает за секунды отличать реальные предложения от скама: вы вставляете сообщение рекрутера, название компании, ссылку на вакансию или email, а инструмент собирает публичные сигналы и выдает понятный вердикт. Он сверяет регистрацию компании, домены и возраст сайтов, подозрительные паттерны (предоплата, “задачи”, крипта, перевод в Telegram/WhatsApp), проверяет ссылки, почту/телефон и даже историю через Internet Archive — без API-ключей и без хранения ваших данных.

https://github.com/yessGlory17/job-verify
15👍2💩1
Как протестировать более 40 UI-компонентов за минуту: ускоряем скриншот-тесты

Как вместо сапёра с визуальными багами внедрили визуальные регрессионные тесты на связке Storybook + Playwright + Jest, которые прогоняют десятки сценариев и сравнивают скриншоты пиксель-в-пиксель. Чтобы стабилизировать диффы, в тестах отключают загрузку реальных картинок в галереях, делают снимок строго элемента [data-test="product-snippet"], и задают допуски к микро-шуму рендеринга (threshold/blur/failureThreshold).

https://habr.com/ru/companies/domclick/articles/1050424
👍63🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Редактор дизайна для Claude Code и Cursor: «Figma Comments» прямо в браузере

Drawbridge — это Chrome-расширение, которое позволяет кликать по интерфейсу в запущенном приложении, оставлять Figma-style комментарии и заметки с прямоугольниками, а затем превращать их в локальные task-файлы для AI-инструментов.

https://github.com/breschio/drawbridge
6🔥4
Декорирование gap в CSS: играем линиями между элементами

Gap Decorations позволяет украшать промежутки между элементами в grid, flex и multi-column, используя gap + rule. Псевдоэлементы внутри контейнера превращают gap в полотно для подчеркиваний, горизонтальных/вертикальных разделителей и даже паттернов с разной толщиной/цветом через rule-width, rule-color и repeat().

https://master.dev/blog/lets-play-with-gap-decorations/
🔥8
Нужен ли здесь `useEffect`? 12 сценариев из React-код-ревью — от производного состояния до React 19.2

На code review я регулярно встречаю один и тот же вопрос, только записанный разным кодом: «Как правильно синхронизировать эти значения через useEffect?» Со временем я понял, что чаще полезнее спросить иначе: а эффект здесь вообще нужен? В статье разбираю 12 типичных сценариев из React-код-ревью.

https://habr.com/ru/articles/1055486/
10🤔2😁1
Построение скролл-зависимой 3D-галереи по пути камеры из Blender с Three.js и GSAP

Рисуем кривую в Blender, экспортируем точки в JSON с учётом различий координат, а затем в Three.js восстанавливаем путь через THREE.CatmullRomCurve3 и раскладываем вдоль него сотни plane-картинок с рандомными смещениями.

Демо | Github

https://tympanus.net/codrops/2026/07/07/building-a-scroll-driven-3d-gallery-using-a-blender-camera-path-with-three-js-and-gsap/
9❤‍🔥4👍1
Стили в CSS с учетом границ

Функция view() позволяет привязывать прогресс анимации к видимости элемента в ближайшем scroll-контейнере: цвет/размер/поворот меняются, когда объект приближается к краям или уходит за них. На практике так раскрашивают элементы в сетке по горизонтальному положению, меняют тон при перетаскивании и подсвечивают ползунки по мере движения.

https://master.dev/blog/boundary-aware-styling-in-css/
🔥5👍1
Как сделать интерактивный элемент невидимым, но доступным

Используйте hidden="until-found" для скрытия контента с сохранением доступности (поиск по странице и навигация по фрагментам работают, элемент остаётся фокусируемым), а затем компенсируйте отсутствие ховера/видимости через contain-intrinsic-size: auto none, чтобы не было layout shift.

https://master.dev/blog/how-to-make-an-interactive-element-invisible-but-accessible/
104🔥1
Как внедрять ИИ в разработку и маркетинг , чтобы он приносил прибыль

Навайбкодить приложение - дело часа. Но что дальше? Продукт готов - пользователей 0

Все потому что маркетинг как был, так и остался узким местом в развитии продукта:

— трафик льётся, окупаемость падает
— площадок больше, чем рук: Reels, TikTok, Shorts, Telegram — везде нужен контент
— продакшн контента стоит как отдел
— все говорят про ИИ, но как это реально приносит деньги — непонятно


Прибыль появляется, когда ИИ становится системой: ресерч → продукт → креативы → реклама → контент → конверсия → удержание 👋

Меня зовут Давид, я 8 лет в маркетинге приложений и за последний год вырастил 3 приложения с 0 до $300к MRR

Я пересобрал свой опыт в собственный AI-стек и на вебинаре покажу как выглядит инфраструктура, которая приносит прибыль и действительно экономит время и деньги

🗓 14 июля
🕗 20:00 МСК
📌 Регистрация по ссылке (тык)

👉 Что в программе:

1. Поиск идей и точек роста — ресерч ниш, конкурентов и болей аудитории через ИИ → список точек роста существующего бизнеса, ниши для новых продуктов и понимание как в них строить маркетинг

2. AI-продакшн и закупка — генерация баннеров и видео + автоматизация кампаний в Meta, Google, Яндексе → сотни креативов в день без дизайнера

3. Виральный контент-продакшн для соц.сетей — контент-планы, анализ конкурентов, AI-аватары, монтаж, авто-карусели → ежедневный постинг в одиночку

4. Персонализация — AI-сегментация, офферы и воронки под каждый сегмент → выше конверсия из тех же лидов

🎁 Зарегистрированным - бесплатные уроки по Claude

До встречи на вебинаре!
Please open Telegram to view this post
VIEW IN TELEGRAM
💩61
Как мы во фронтенд-команде ПСБ прокачали релизный цикл npm-пакетов.

Внутренние библиотеки и микрофронты собрали в пакетный процесс с SemVer, обязательным migration guide для breaking changes и публикацией через CI, чтобы исключить разъезд окружений и человеческий фактор. Более подробно - в статье.

https://habr.com/ru/companies/psb/articles/1055888/
🔥5💩3👍2🥱1
Как проектировать интерфейсы для уязвимых пользователей: почему ментальным health-приложениям нельзя гнаться за любыми UI-трендами

Трендовые решения часто повышают когнитивную нагрузку и делают навигацию непредсказуемой — в итоге человек в стрессе просто не находит нужную помощь и быстро уходит. Важно проверять каждый модный паттерн по пяти критериям: нагрузка, эмоциональное соответствие, надежность навигации, доступность и корректность механик вовлечения без давления/стыда.

https://smashingmagazine.com/2026/07/designing-distressed-users-mental-health-apps-ui/
🔥32