FrontEndDev
26.4K subscribers
2.57K photos
24 videos
7.79K 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
Out Loud — open-source ИИ для озвучивания текста

Out Loud делает AI text-to-speech полностью офлайн. Поддерживается 50+ естественных голосов на 8 языках, а также есть расширение для Chrome, чтобы озвучивать страницы в один клик. Код под MIT-лицензией — репозиторий можно форкать, проверять и улучшать под свои задачи.

https://www.out-loud.io/
👍72🔥1
Geometric.js — библиотека для геометрии в JavaScript.

Работайте с точками, отрезками, полигонами, углами и пересечениями, выполняя измерения и преобразования. Удобно использовать для задач визуализации, расчётов и логики в веб‑приложениях, где нужна геометрия на лету.

https://www.harryjstevens.com/geometric/
👍72
Отладка WASM в Chrome DevTools

Chrome DevTools умеет полноценно дебажить скомпилированный WASM: ставьте брейкпоинты в Sources, смотрите локальные значения и стек вызовов, а для ref.cast и похожих ошибок включайте Pause on exceptions чтобы сразу ловить источник проблемы.

https://eli.thegreenplace.net/2026/debugging-wasm-in-chrome-devtools/
1🥰5👍2🔥2
Архитектура local-first для веб разработки

Разбираем, как строить приложения с приоритетом локальных данных в 2026 году: синхронизация, конфликтные сценарии и практичные решения для надежной работы офлайн и онлайн. Подойдет тем, кто уже пробовал local-first и хочет понять, где реальные риски и как их закрывать.

https://smashingmagazine.com/2026/05/architecture-local-first-web-development/
👍53
Навыки для AI кодинг агентов: как вернуть спецификации, тесты и review в процесс

AI coding agents часто идут по кратчайшему пути к готовому коду и пропускают спецификации, тесты и проверку, из за чего качество падает на масштабе. Проект предлагает оформлять best practices не как эссе, а как пошаговые skills с чекпоинтами и критериями выхода, чтобы агент следовал жизненному циклу разработки как у зрелой инженерной команды.

https://addyosmani.com/blog/agent-skills/
6🔥4
Считаем скидку и показываем итоговую цену прямо в CSS

Можно хранить базовую цену и процент скидки в data-* атрибутах, а затем через attr() и CSS math вычислять итоговую стоимость и сразу рисовать зачеркнутую цену плюс новую. Для прода в крупных компаниях так себе вариант, но для своего магазина можно попробовать 😊

https://css-tricks.com/computing-and-displaying-discounted-prices-in-css/
👍7🤡4🔥2😁1
Идём на AI Hardcore Day в офис Авито на Лесной 11 июля! 🤩

Будем слушать доклады о Spec-Driven Development, разработке и тестировании MCP, атаках на GenAI-агентов.
А после — нетворкать на террасе.

Регистрация и подробности — по ссылке.

Кстати, доклады будут не под запись — советуем не пропускать!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🤡3💩21
Граница между CSS-состояниями и событиями JavaScript сдвигается

Псевдоклассы вроде :hover, :active, :focus-visible, :focus-within, :checked, :valid/:invalid позволяют описывать реакцию интерфейса без обработчиков в JS.
Отдельный вектор — будущий event-trigger, который должен запускать анимации по событиям (например, по click) прямо в CSS, делая анимации более декларативными.

https://css-tricks.com/css-states-and-javascript-events/
3🔥2
Как запустить GTA San Andreas на своём движке в браузере

История о том, как с нуля собрали браузерный рантайм OpenSA, который умеет читать форматы RenderWare и запускать игру через вашу легальную копию, без распространения ассетов. Ключевые фишки — in-game map debugger/редактор, адаптерная архитектура, физика и управление через Rapier, а также оптимизация загрузки чанками с CDN и VFS.

Сложно, сложно, оч сложно)

https://habr.com/ru/articles/1051828/
👍12😁3🔥1
Минимальная одностраничная фотогалерея для Astro

Адаптивная сетка собирается чистым CSS без JS-логики позиционирования и перерасчётов. Для просмотра предусмотрен lightbox на Fancybox: полноэкранный режим с свайпом, перетаскиванием, pinch-to-zoom и настраиваемой панелью. Картинки оптимизируются через Astro <Image />, а элементы за пределами первого экрана подгружаются лениво.

https://github.com/kydecker/astro-photo-grid
6🔥41
Компиляция Zod-схем в оптимизированные валидаторы на этапе сборки

Сохраняете обычные Zod-схемы и получаете ускорение валидации без правок в коде: parse/safeParse/parseAsync остаются теми же, плюс появляется быстрый guard .is(). Поддерживаются разные режимы подключения: автоматическая компиляция всех экспортов или явная, а также CLI-генерация файлов и режим compact

https://github.com/gajus/zod-compiler
👍42