Релиз React 19.2 — что нового?
Ключевые нововведения: компонент
https://react.dev/blog/2025/10/01/react-19-2
Ключевые нововведения: компонент
<Activity /> для гибкого управления видимостью частей приложения, хук useEffectEvent для более чистой реализации эффектов. Частичный пререндеринг, новые треки производительности в DevTools и улучшения в SSR.https://react.dev/blog/2025/10/01/react-19-2
❤14🤔4👍2🔥1
Обновление Safari 26.0
75 новых функций и 171 улучшение, среди которых поддержка якорного позиционирования и анимаций, управляемых прокруткой. Продвинутая функция
https://css-tricks.com/touring-new-css-features-in-safari-26/
75 новых функций и 171 улучшение, среди которых поддержка якорного позиционирования и анимаций, управляемых прокруткой. Продвинутая функция
progress(), улучшенная расстановка текста с text-wrap: pretty и упрощенное выравнивание элементов в абсолютном позиционировании.https://css-tricks.com/touring-new-css-features-in-safari-26/
👍6😁4👀2
Развлекаемся с кастомными курсорами
Райан Финни показывает 2 способа изменения дефолтного курсора.
https://www.letsbuildui.dev/articles/fun-with-custom-cursors/
Райан Финни показывает 2 способа изменения дефолтного курсора.
https://www.letsbuildui.dev/articles/fun-with-custom-cursors/
👍6❤3🤯1🥴1
Where It’s at:// — как работает протокол AT и at:// URI
Дэн Абрамов подробно разбирает, как устроен протокол AT (Atmosphere) и как at:// URI соотносятся с реальными JSON-данными в сети. Он шаг за шагом объясняет, как разрешается такой URI к физическому JSON-объекту.
https://overreacted.io/where-its-at/
Дэн Абрамов подробно разбирает, как устроен протокол AT (Atmosphere) и как at:// URI соотносятся с реальными JSON-данными в сети. Он шаг за шагом объясняет, как разрешается такой URI к физическому JSON-объекту.
https://overreacted.io/where-its-at/
👍8😱3🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Учебники и туториалы — это хорошо. Но реальный фронтенд часто работает иначе.
В канале Frontend VK Hub инженеры из VK делятся практическим опытом: что взлетает, какие нестандартные вызовы случаются и что помогает делать интерфейсы лучше. Подписывайтесь.
В канале Frontend VK Hub инженеры из VK делятся практическим опытом: что взлетает, какие нестандартные вызовы случаются и что помогает делать интерфейсы лучше. Подписывайтесь.
💩9👍4❤2🔥1
Как использовать TanStack DB для разработки реактивных offline-ready приложений на React
Туториал по созданию таск менеджера с оптимистичными обновлениями, поддержкой оффлайн режима и другими полезными фичами на основе минимального бойлерплейта.
https://blog.logrocket.com/tanstack-db-ux/
Туториал по созданию таск менеджера с оптимистичными обновлениями, поддержкой оффлайн режима и другими полезными фичами на основе минимального бойлерплейта.
https://blog.logrocket.com/tanstack-db-ux/
❤15👍3
TravelsJS: быстрая framework-agnostic библиотека для функционала undo/redo
Библиотека использует JSON Patch для эффективного хранения изменений состояния и позволяет легко создавать функции "путешествия во времени" для любых JavaScript-приложений.
https://github.com/mutativejs/travels
Библиотека использует JSON Patch для эффективного хранения изменений состояния и позволяет легко создавать функции "путешествия во времени" для любых JavaScript-приложений.
https://github.com/mutativejs/travels
❤14❤🔥3🔥3🤡1
Создаем fullstack приложение для стриминга на Golang + React + MongoDB
Подробный (и долгий) туториал по созданию приложения для стриминга фильмов с AI-рекомендациями: настройка роутинга с react-router-dom, реализация аутентификации и встраивание видео с помощью react-player. Плюс бэкенд на Go, работа с MongoDB и деплой готового React-приложения на Vercel
https://www.youtube.com/watch?v=jBf7of9JTV8
Подробный (и долгий) туториал по созданию приложения для стриминга фильмов с AI-рекомендациями: настройка роутинга с react-router-dom, реализация аутентификации и встраивание видео с помощью react-player. Плюс бэкенд на Go, работа с MongoDB и деплой готового React-приложения на Vercel
https://www.youtube.com/watch?v=jBf7of9JTV8
👍10🤯6❤1🥴1😐1
Исследуем малоизвестные CSS медиазапросы
Помимо базовых
https://frontendmasters.com/blog/learn-media-queries/
Помимо базовых
@media(min-width), существует множество мощных дескрипторов, таких как hover, forced-colors или prefers-reduced-motion, позволяющих тонко настраивать интерфейс под возможности устройств и предпочтения пользователей. Их использование помогает создавать более гибкие веб-решения и улучшать UX.https://frontendmasters.com/blog/learn-media-queries/
🔥7👍3❤1
Для чего можно использовать if в CSS?
If заменяет сложные обходные пути на явную встроенную логику, делая стилизацию компонентов более самодостаточной и удобной для поддержки. Сравнение if с media queries и container queries.
https://blog.logrocket.com/css-if-function-conditional-styling-2025/
If заменяет сложные обходные пути на явную встроенную логику, делая стилизацию компонентов более самодостаточной и удобной для поддержки. Сравнение if с media queries и container queries.
https://blog.logrocket.com/css-if-function-conditional-styling-2025/
👍4🔥2🤔1
Создание адаптивных SVG с помощью <symbol>, <use> и медиа-запросов CSS
Энди Кларк объясняет, как создавать "адаптивные SVG", которые корректно отображаются на различных устройствах. Он использует элементы <symbol> и <use>, а также медиа-запросы CSS для адаптации графики к размеру экрана (например изменение формата изображенияс 16:9 на 3:4 ).
https://smashingmagazine.com/2025/10/smashing-animations-part-5-building-adaptive-svgs/
Энди Кларк объясняет, как создавать "адаптивные SVG", которые корректно отображаются на различных устройствах. Он использует элементы <symbol> и <use>, а также медиа-запросы CSS для адаптации графики к размеру экрана (например изменение формата изображенияс 16:9 на 3:4 ).
https://smashingmagazine.com/2025/10/smashing-animations-part-5-building-adaptive-svgs/
👍9❤3
Превращаем 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
Простой туториал, который показывает как обернуть существующий Node.js REST API сервер в MCP-сервер (Model Context Protocol), чтобы сделать его понятным и удобным для AI-агентов.
https://feeds.dzone.com/link/23564/17181528/transform-nodejs-rest-api-to-mcp-server
🔥7❤1👍1
Не фича, а баг — пора фиксить. Это мы про страхи.
На связи команда международной IT-компании Garage Eight. Мы считаем, что настоящие прорывы случаются там, где нам страшно.
В этот раз ребята из нашей команды устроили себе челлендж — бросить вызов своим страхам: высоты, крови и публичных выступлений! Но им нужна ваша поддержка.
Голосуйте, кто из героев должен встретиться со своей фобией и преодолеть её!
➡ Поддержите наш челлендж на сайте
На связи команда международной IT-компании Garage Eight. Мы считаем, что настоящие прорывы случаются там, где нам страшно.
В этот раз ребята из нашей команды устроили себе челлендж — бросить вызов своим страхам: высоты, крови и публичных выступлений! Но им нужна ваша поддержка.
Голосуйте, кто из героев должен встретиться со своей фобией и преодолеть её!
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🤮2👻2❤1🤯1🤡1
Группируем данные с помощью методов Object.groupBy() и Map.groupBy().
Избавляемся от классического и объемного метода с использованием reduce.
https://allthingssmitty.com/2025/10/06/grouping-arrays-in-modern-javascript-object-groupby-and-map-groupby/
Избавляемся от классического и объемного метода с использованием reduce.
https://allthingssmitty.com/2025/10/06/grouping-arrays-in-modern-javascript-object-groupby-and-map-groupby/
❤13👍5🔥3
Туториал по React 19
Создаем проект AI Code Explainer: запускаем Express на бэкенде, настраиваем REST эндпоинты которые общаются с LLM, а на фронте React 19 + Tailwind.
https://www.youtube.com/watch?v=W4M-g9wsEC4
Создаем проект AI Code Explainer: запускаем Express на бэкенде, настраиваем REST эндпоинты которые общаются с LLM, а на фронте React 19 + Tailwind.
https://www.youtube.com/watch?v=W4M-g9wsEC4
👍7👎3❤1🤔1
Что вы должны знать о современных возможностях CSS (2025 Edition)
Много нововведений значительно упрощающих работу с анимациями, макетами и интерактивными элементами: анимация до
https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-2025-edition/
Много нововведений значительно упрощающих работу с анимациями, макетами и интерактивными элементами: анимация до
auto, кастомные функции, продвинутые popover и select, а также улучшенный контроль типографики и форм.https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-2025-edition/
👍10🔥2❤1
Как оптимизировать Viewport для мобильных устройств для более быстрого взаимодействия
Неправильно настроенный метатег viewport может вызвать задержку отклика мобильных браузеров до 300 миллисекунд после каждого касания, делая интерфейс медленным и ухудшая пользовательский опыт. Анна Монус рассказывает, как можно определить что viewport не оптимизирован и как это исправить.
https://www.debugbear.com/blog/optimize-viewport-for-mobile?utm_campaign=Issue-622
Неправильно настроенный метатег viewport может вызвать задержку отклика мобильных браузеров до 300 миллисекунд после каждого касания, делая интерфейс медленным и ухудшая пользовательский опыт. Анна Монус рассказывает, как можно определить что viewport не оптимизирован и как это исправить.
https://www.debugbear.com/blog/optimize-viewport-for-mobile?utm_campaign=Issue-622
❤8🔥1👏1🥴1
Forwarded from Habr For Dev
#html #css
Коллекция полезных HTML и CSS фич, которые редко используются
Привет, Хабр!Я люблю помогать фронтендерам больше узнать о HTML и CSS. Общаясь, я составил список HTML и CSS фич, которые полезные, но почему-то о них мало кто знает. В этой статье я пришёл поделиться ими.Давайте посмотрим, что я вам подготовил.
⭐️⭐️◽️◽️◽️
📖 Читать
Коллекция полезных HTML и CSS фич, которые редко используются
Привет, Хабр!Я люблю помогать фронтендерам больше узнать о HTML и CSS. Общаясь, я составил список HTML и CSS фич, которые полезные, но почему-то о них мало кто знает. В этой статье я пришёл поделиться ими.Давайте посмотрим, что я вам подготовил.
⭐️⭐️◽️◽️◽️
📖 Читать
🔥7👍2❤1
Игры для PS2 теперь можно писать на JavaScript!
Обнаружен интересный движок AthenaEnv, который использует модифицированный QuickJS для запуска JavaScript-кода на консоли. Он предоставляет мощный API для разработки 2D-игр, включая рендеринг, обработку ввода и управление ресурсами, делая процесс создания игр для PS2 более доступным.
https://jslegenddev.substack.com/p/you-can-now-make-ps2-games-in-javascript
Обнаружен интересный движок AthenaEnv, который использует модифицированный QuickJS для запуска JavaScript-кода на консоли. Он предоставляет мощный API для разработки 2D-игр, включая рендеринг, обработку ввода и управление ресурсами, делая процесс создания игр для PS2 более доступным.
https://jslegenddev.substack.com/p/you-can-now-make-ps2-games-in-javascript
1👍16🥴4🌚2🔥1