FrontEndDev
25.7K subscribers
2.71K photos
30 videos
7.94K 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
Проект от подписчика для тех, кто пилит свой сервис

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

Люди могут не только оставить комментарий или лайк, но и отметить, готовы ли пользоваться, платить, присоединиться или инвестировать в проект.

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

https://votby.ru/
👍9
Forwarded from Vibe and AI
Media is too big
VIEW IN TELEGRAM
Chromium прямо в терминале

Carbonyl запускает Chromium в терминале и открывает обычные сайты без окна браузера, даже по SSH.

Для старта есть Docker
docker run --rm -ti fathyb/carbonyl https://youtube.com
или установка через npm install --global carbonyl

после чего запускается carbonyl https://github.com.

https://github.com/fathyb/carbonyl
🤯5🌚4🔥3⚡1😁1
Плавная типографика в CSS: что выбрать вместо брейкпоинтов

Плавную типографику в CSS удобнее собирать через clamp() и viewport units: размер шрифта можно задать одной формулой без переключения на фиксированные значения по брейкпоинтам. Для доступности лучше не полагаться только на vw, а добавлять фиксированную величину, чтобы масштабирование страницы не ломало ожидаемое поведение.

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

https://blog.damato.design/posts/fluid-typography/
🔥7🐳2❤1
Как ускорили веб-приложение Claude

Разбор того, как в веб-приложении Claude сократили время до первого ввода у 75-го перцентиля с 3,1 до 0,55 секунды. Для этого нашли несколько скрытых тормозов: мелкие сдвиги верстки, которые не попадали в CLS, дорогой селектор :root:has(), добавлявший 24 мс на каждое изменение DOM, и проблему с предрендерингом Chrome, который строил страницу с неверной высотой.

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

https://claude.dev/blog/how-we-made-claude-ai-faster/
⚡6👌2❤1
React Forms и React.memo: что на самом деле перерисовывается

Формы в React помогают понять, где живут данные и почему компонент рендерится снова. Контролируемые поля удобны, когда значение влияет на интерфейс прямо во время ввода, а uncontrolled-подход и FormData подходят, когда нужен только итоговый результат. Это напрямую связано с оптимизацией через React.memo: чтобы не ререндерить лишнее, важно понимать, какие изменения действительно затрагивают компонент.

https://reactdevelopment.substack.com/p/react-forms-and-reactmemo-understanding
❤9👍3
Шпаргалка по интерфейсам: мелочи, которые делают UI заметно лучше

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

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

https://interfaces.dev/cheat-sheet
❤6⚡5
Самый дорогой способ проверить идею — полгода её разрабатывать

Сначала проверьте спрос. Так сделали эти ребята:

— Юра выбрал нишу, которую все считают скучной, но там уже платят. Начал с $100 в месяц, через год вышел примерно на $10K.
— Денис один собрал AI-игру в Telegram. За первые полтора месяца ~$1 500.
— Аня не пишет код, но запустила AI-бота для английского. Первые ~$200 пришли в первый же месяц.

Масштабы разные, схема одна:
1. Найти, за что люди уже платят.
2. Быстро собрать MVP.
3. Проверить спрос на живых пользователях.
4. Только потом докручивать продукт.

Это не рецепт «как точно сделать $10K». Гарантий вообще нет.
Но так вы узнаете ответ за недели, а не за год.

В @its_capitan разбирают такие запуски по шагам: что сделали, сколько получили, где облажались.

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

Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2Vtzqw8XNmT
💩4❤3
Next.js 16.4: Cache Components стали рекомендуемым способом разработки

Next.js 16.4 закрепляет Cache Components как основную модель для App Router: она помогает быстрее загружать персонализированные страницы, делать клиентские переходы почти мгновенными и управлять кешированием явно, на уровне компонентов. Для новых проектов это уже включено по умолчанию, а для старых добавили инструменты миграции и проверки статичности маршрутов, чтобы не тащить лишний динамический рендер туда, где он не нужен.

https://habr.com/ru/articles/1091748/
❤3👍3👎1💩1
WebMCP как слой для агентного веба

Суть
WebMCP — это не способ дать AI-агентам сканировать сайт как человек через DOM, скриншоты и клики, а вызывать прямые JS-инструменты, которые сам сайт явно публикует. Проблема, которую он решает, проста: браузерная автоматизация для агентов медленная, хрупкая и дорогая, а web-интерфейс при этом должен оставаться управляемым и для пользователя, и для разработчика.

Как это работает
Сайт регистрирует tools с явной input-схемой, скоро — и с output-схемой, плюс с описанием, что именно делает инструмент и когда его вызывать. Агент получает не абстрактную страницу, а набор операций вроде «найди подходящий товар», «проверь детали заказа», «заполни шаг формы». Важный момент: это не замена UI, а более быстрый путь к тем же действиям, когда задача уже понятна.

Почему это лучше автоматизации браузера
Идея в том, что агент не должен играть в человека, тыкаясь по интерфейсу вслепую. По замерам nekuda.ai, WebMCP оказался в 2.5-7.5x быстрее и до 47x дешевле, чем другие direct interaction подходы. У Shopify Checkout эксперимент дал 2.7x ускорение, 58% экономии и 60/60 успешных попыток против 56/60 у browser automation. То есть выигрыш не только в скорости, но и в надежности.

Почему это важно для веба
Здесь ключевая ставка на co-browsing: агент работает рядом с браузерной сессией, а не вместо нее. Это единая модель, где пользователь сохраняет контроль, может вмешаться в любой момент, а сайт не превращается в черный ящик для отдельного агента. Для коммерции это особенно заметно: агент может помочь подобрать товар по сложным критериям, собрать проект или провести пользователя через многошаговую задачу без того, чтобы он наблюдал все промежуточные шаги.

Ограничения и риски
У подхода много открытых вопросов: кто вообще может регистрировать tools, какие агенты поддерживать, как тестировать поведение на реальных агентах, как защищаться от malicious tools. Для контроля доступа обсуждается Permissions Policy, чтобы сайт сам решал, каким iframe разрешать регистрацию tools. Отдельная боль — сигнал для сервера, что перед ним человек или trusted agent: без него сайты могут ошибочно принять агентный трафик за бота и заблокировать его.

Что не решает HTML semantics
Есть идея сделать все декларативно через формы и семантику, но этого недостаточно для сложных сценариев. Декларативный подход хорош для одношаговых действий, но не покрывает многошаговые задачи, где инструмент возвращает промежуточный контекст для следующего шага агента. Если пытаться всё свести к HTML, часто получится хуже UX: агенту придется вести пользователя через лишние промежуточные экраны и формы, хотя ему нужен только итог.

WebMCP стоит рассматривать там, где сайт хочет быть удобным для AI-агентов без потери контроля над UX: e-commerce, подбор товаров, FAQ, сложные сценарии с несколькими шагами. Но внедрять его нужно аккуратно: продумать permissions, security, сигналы доверия, тестирование на реальных агентах и не полагаться только на декларативные формы. Идея сильная именно как слой над вебом, а не как замена обычному интерфейсу.

https://blog.yoav.ws/posts/why_webmcp_matters/
❤4❤‍🔥2👍1
DOCX 9.8: генерация Word .docx файлов из JavaScript

Библиотека для создания .docx документов прямо из JavaScript. В версии 9.8 добавили поддержку диаграмм, фигур, водяных знаков и расширили работу с математическими формулами. Это полезно, когда нужно собирать Word-файлы на лету без ручной верстки в редакторе.

https://github.com/dolanmiu/docx/releases/tag/9.8.0
👍8❤1🥰1
Transitions.dev: готовые UI-анимации для AI-агентов

Коллекция из 43+ готовых UI-переходов для веб-приложений, которые можно вставить в проект вручную или использовать через coding agent. Инструмент помогает быстро улучшать motion в интерфейсе, а также умеет оценивать кодовую базу по motion score и вносить правки через pull request.

https://transitions.dev/
👍3❤1
Как убрать зум при двойном тапе по кнопке на мобильных

Если на мобильном при быстром тапе по кнопке страница начинает зумиться, это часто не проблема viewport, а реакция браузера на double tap. Для кнопок достаточно добавить touch-action: manipulation; это отключает двойной тап для зума, но сохраняет обычный pinch zoom и не ломает доступность.

https://piccalil.li/blog/stop-buttons-triggering-zoom-when-theyre-double-tapped/
❤3👍3