TGViewer
Channel Public Channel
FrontEndDev

FrontEndDev

@front_end_dev

🚀 Статьи, новости, туториалы по 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
Open in Telegram
Subscribers
25.8K
Photos
2.7K
Videos
25
Links
7.9K

Showing posts older than #9524 · Back to latest

Older Posts 20 shown
Post #9523 5.45K
Прекратите писать REST API вручную

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

https://blog.logrocket.com/stop-writing-rest-apis-from-scratch/
  • ❤ 10
  • 👍 7
Post #9522 5.06K
Игры для PS2 теперь можно писать на JavaScript!

Обнаружен интересный движок AthenaEnv, который использует модифицированный QuickJS для запуска JavaScript-кода на консоли. Он предоставляет мощный API для разработки 2D-игр, включая рендеринг, обработку ввода и управление ресурсами, делая процесс создания игр для PS2 более доступным.

https://jslegenddev.substack.com/p/you-can-now-make-ps2-games-in-javascript
  • 👍 16
  • 🥴 4
  • 🌚 3
  • 🔥 2
Post #9521 4.8K

Forwarded from Habr For Dev

#html #css

Коллекция полезных HTML и CSS фич, которые редко используются

Привет, Хабр!Я люблю помогать фронтендерам больше узнать о HTML и CSS. Общаясь, я составил список HTML и CSS фич, которые полезные, но почему-то о них мало кто знает. В этой статье я пришёл поделиться ими.Давайте посмотрим, что я вам подготовил.

⭐️⭐️◽️◽️◽️

📖 Читать
  • 🔥 7
  • 👍 4
  • ❤ 2
Post #9520 5.35K
Как оптимизировать Viewport для мобильных устройств для более быстрого взаимодействия

Неправильно настроенный метатег viewport может вызвать задержку отклика мобильных браузеров до 300 миллисекунд после каждого касания, делая интерфейс медленным и ухудшая пользовательский опыт. Анна Монус рассказывает, как можно определить что viewport не оптимизирован и как это исправить.

https://www.debugbear.com/blog/optimize-viewport-for-mobile?utm_campaign=Issue-622
  • ❤ 9
  • 🔥 2
  • 👏 2
  • 🥴 1
Post #9519 5.13K
Что вы должны знать о современных возможностях CSS (2025 Edition)

Много нововведений значительно упрощающих работу с анимациями, макетами и интерактивными элементами: анимация до auto, кастомные функции, продвинутые popover и select, а также улучшенный контроль типографики и форм.

https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-2025-edition/
  • 👍 10
  • 🔥 3
  • ❤ 2
Post #9518 4.75K
Туториал по React 19

Создаем проект AI Code Explainer: запускаем Express на бэкенде, настраиваем REST эндпоинты которые общаются с LLM, а на фронте React 19 + Tailwind.

https://www.youtube.com/watch?v=W4M-g9wsEC4
  • 👍 7
  • 👎 3
  • ❤ 2
  • 🤔 2
Post #9514 4.73K
Превращаем Node.js REST API в сервер в MCP

Простой туториал, который показывает как обернуть существующий Node.js REST API сервер в MCP-сервер (Model Context Protocol), чтобы сделать его понятным и удобным для AI-агентов.

https://feeds.dzone.com/link/23564/17181528/transform-nodejs-rest-api-to-mcp-server
  • 🔥 8
  • ❤ 2
  • 👍 2
Post #9513 4.73K
Создание адаптивных SVG с помощью <symbol>, <use> и медиа-запросов CSS

Энди Кларк объясняет, как создавать "адаптивные SVG", которые корректно отображаются на различных устройствах. Он использует элементы <symbol> и <use>, а также медиа-запросы CSS для адаптации графики к размеру экрана (например изменение формата изображенияс 16:9 на 3:4 ).

https://smashingmagazine.com/2025/10/smashing-animations-part-5-building-adaptive-svgs/
  • 👍 10
  • ❤ 3
Post #9512 4.51K
Для чего можно использовать if в CSS?

If заменяет сложные обходные пути на явную встроенную логику, делая стилизацию компонентов более самодостаточной и удобной для поддержки. Сравнение if с media queries и container queries.

https://blog.logrocket.com/css-if-function-conditional-styling-2025/
  • 👍 4
  • 🔥 3
  • 🤔 2
Post #9510 4.76K
Исследуем малоизвестные CSS медиазапросы

Помимо базовых @media(min-width), существует множество мощных дескрипторов, таких как hover, forced-colors или prefers-reduced-motion, позволяющих тонко настраивать интерфейс под возможности устройств и предпочтения пользователей. Их использование помогает создавать более гибкие веб-решения и улучшать UX.

https://frontendmasters.com/blog/learn-media-queries/
  • 🔥 8
  • 👍 3
  • ❤ 2
Post #9509 5.09K
Создаем fullstack приложение для стриминга на Golang + React + MongoDB

Подробный (и долгий) туториал по созданию приложения для стриминга фильмов с AI-рекомендациями: настройка роутинга с react-router-dom, реализация аутентификации и встраивание видео с помощью react-player. Плюс бэкенд на Go, работа с MongoDB и деплой готового React-приложения на Vercel

https://www.youtube.com/watch?v=jBf7of9JTV8
  • 👍 10
  • 🤯 7
  • ❤ 3
  • 🥴 1
  • 😐 1
Post #9508 4.85K
TravelsJS: быстрая framework-agnostic библиотека для функционала undo/redo

Библиотека использует JSON Patch для эффективного хранения изменений состояния и позволяет легко создавать функции "путешествия во времени" для любых JavaScript-приложений.

https://github.com/mutativejs/travels
  • ❤ 14
  • ❤‍🔥 4
  • 🔥 4
  • 🤡 1
Post #9507 5.21K
Как использовать TanStack DB для разработки реактивных offline-ready приложений на React

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

https://blog.logrocket.com/tanstack-db-ux/
  • ❤ 16
  • 👍 3
Post #9505 4.94K
Where It’s at:// — как работает протокол AT и at:// URI

Дэн Абрамов подробно разбирает, как устроен протокол AT (Atmosphere) и как at:// URI соотносятся с реальными JSON-данными в сети. Он шаг за шагом объясняет, как разрешается такой URI к физическому JSON-объекту.

https://overreacted.io/where-its-at/
  • 👍 8
  • 😱 3
  • ❤ 2
  • 🔥 2
Post #9503 4.76K
Обновление Safari 26.0

75 новых функций и 171 улучшение, среди которых поддержка якорного позиционирования и анимаций, управляемых прокруткой. Продвинутая функция progress(), улучшенная расстановка текста с text-wrap: pretty и упрощенное выравнивание элементов в абсолютном позиционировании.

https://css-tricks.com/touring-new-css-features-in-safari-26/
  • 👍 6
  • 😁 5
  • 👀 3
Post #9502 4.92K
Релиз React 19.2 — что нового?

Ключевые нововведения: компонент <Activity /> для гибкого управления видимостью частей приложения, хук useEffectEvent для более чистой реализации эффектов. Частичный пререндеринг, новые треки производительности в DevTools и улучшения в SSR.

https://react.dev/blog/2025/10/01/react-19-2
  • ❤ 15
  • 🤔 5
  • 👍 3
  • 🔥 3
Post #9501 4.74K
Веб — Стандарты: Выпуск 494

Новые возможности Chrome 140, включая Scoped View Transitions, улучшения масштабирования текста, Temporal API, Chrome DevTools MCP.

https://web-standards.ru/podcast/494/
  • 🔥 7
  • ❤ 3
  • 👍 3
Post #9499 4.34K
Ваши изображения (возможно) слишком большие

Часто мы загружаем на сайт изображения гораздо крупнее, чем необходимо для просмотра, что приводит к лишнему расходу трафика и долгой загрузке. Многие думают, что компонент <Image/> из NextJS автоматически решит эту проблему, однако без правильного атрибута sizes изображения всё равно могут быть избыточными для меньших экранов. Как это исправить — в статье.

https://reasonunderpressure.com/blog/posts/your-images-are-probably-oversized
  • ❤ 6
  • 👍 4
  • 🔥 2
  • 👎 1
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →