Front-end Digest № 143: реліз Vite 8, відмова від Sass та як переписати код з React на Svelte

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Привіт, колеги. Мене звати Олександр, я займаюся фронтендом в компанії Zfort Group. Маю для вас свіжий дайджест з цікавими матеріалами зі світу фронтенду за останній тиждень.

Веб-розробка

• Минуле, сьогодення та майбутнє: оновлення стратегічних цілей W3C до 37-ї річниці Web proposal
• Як вкрасти токени публікації npm через відкриття issues на GitHub
• Вікіпедію вразив саморозмножуваний JavaScript-черв’як, що вандалізував сторінки.
• Як перетворити feature-based структуру на повноцінну фронтенд-архітектуру
• Form-Associated Custom Elements на практиці
• Eleventy тепер Build Awesome
• Реліз Astro 6.0

• Інструменти
  • Вийшла нова версія Vite 8
  • Коли слід використовувати WebMCP та MCP
  • Анонс Vite+ Alpha
  • Webpack оприлюднив план розвитку на 2026 рік з нативною підтримкою CSS, універсальною платформою та переходом до версії 6.

• Ефекти
  • SVG-маска: переходи при прокручуванні з використанням GSAP і ScrollTrigger
  • Представляємо view-transitions-mock: невізуальний поліфіл для Same-Document View Transition
  • Створення 3D-галереї, що реагує на прокручування, з Three.js, Velocity та фонами на основі настрою.

CSS

• Функція contrast-color() — не лише чорне та біле
• За межами border-radius: що властивість CSS corner-shape відкриває для повсякденного UI
• Забезпечення доступності елемента геолокації.
• Розробка динамічних виринаючих підказок із застосуванням anchored container queries
• Зловживання кастомізацією селектів
• Значення параметра z-index
• Відмова від Sass: Впровадження нативного CSS-вкладення.
• CSS-анімації як скінченні автомати для запам’ятовування станів фокусування та наведення, реалізовані виключно CSS.
• Визначення підтримки @-rule у CSS за допомогою @supports at-rule(@keyword)
• NoJS 3 — Світанок Flappy Bird. Створення клону Flappy Bird за допомогою чистого HTML та CSS, без JavaScript.

JavaScript

• Міграція з Moment.js до JS Temporal API
• Зустрічайте Effect TS: чому цей фреймворк змінює архітектуру TypeScript
• Посібник зі створення мікрофронтенд-застосунку на Angular з використанням Native Federation
• Як використовувати метод .map() у JavaScript
• Як ми за два тижні переписали 130 тисяч рядків коду з React на Svelte

• React
  • Розуміння пропса ’key’ у React
  • React: Singletons aren’t as evil as you think
  • TypeScript-бібліотека WebSocket на класах для React
  • Створення динамічних форм у React та Next.js

Фронтенд-меми

Подобається дайджест? Підписуйтесь на автора, щоб отримувати сповіщення про нові публікації на пошту.