Front-end Digest № 69: як Microsoft замінює React, продуктивність JavaScript та вкладеність CSS

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

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

Веброзробка

• Зникнення інтернет-домену. Як геополітика може змінити цифрову інфраструктуру
• GOV.UK. Створення надійного фронтенду з використанням прогресивних удосконалень
• Popover API. Ваш новий найкращий друг для Tooltips
• Розуміння та підтримка поведінки масштабування сторінки в браузерах
• iOS404: що досі не вміє iOS (та Safari)

• Інструменти
  • Deno помер, хай живе Deno 2
  • Одночасно з анонсом з’явилося доволі кумедне відео «Programming should be simple», де автор NodeJS розповідає про складність поточної екосистеми JS та як Deno може це виправити.
  • Node vs Bun: ніякої різниці в продуктивності бекенду
  • Як підвищити продуктивність за допомогою кросбраузерних функцій DevTools
  
• Case Study
  • Case Study: Treize Grammes — 2024
  • Створення ідеальної смужки з логотипами
  • Створення SPA за допомогою htmx
  • Створення грайливої контекстно-залежної анімації для нерухомих елементів

CSS

• Зміни в успадкуванні стилів CSS :selection
• Tailwind Grid Builder
• Вкладеність CSS покращується за допомогою CSSNestedDeclarations
• Логічні властивості CSS, простіше з Sass
• Пошук нового логотипу CSS
• 2024. Більше CSS At-Rules, ніж за останнє десятиліття
• Рецепти для виявлення підтримки CSS At-Rules

• Ефекти
  • Анімація розкриття блоку з елементами за допомогою Grid та @property в CSS
  • CSS :has() слайд-підказки при наведенні
  • CSS-трюки, які використовують лише один градієнт
  • Таблиці з фіксованими заголовками та горизонтальною прокруткою
  • Анімований стек карток, керований прокруткою за допомогою scroll snap events

JavaScript

• Покращуємо якість коду. Як я створив тестовий фреймворк для JavaScript і TypeScript
• Обробка подій вставки в JavaScript
• Розв’язання проблем з продуктивністю JavaScript
• Анонс бета-версії TypeScript 5.7
• Створіть класичну гру «Змійка» з нуля за допомогою чистого JavaScript

• Нове в JS
  • Новий оператор JavaScript, що повністю змінює правила гри
  • TC39 Просуває 10+ ECMAScript Proposals. Ключові особливості, на які слід звернути увагу
  • JavaScript отримає новий час, дату та набір функцій наступного року
  

• React
  • Посібник по useReducer Hook в React
  • Як Microsoft Edge замінює React на вебкомпоненти
  • Як Dependency Arrays працюють за лаштунками в React
  

• Vue
  • Як додати поле зворотного зв’язку до вашого Vue.js-додатку (і отримувати сповіщення у Slack)
  • Надійне тестування компонентів за допомогою браузерного режиму Vitest та Playwright
  

• Angular
  • Останні оновлення до effect() в Angular
  • Глибоке занурення в реалізацію Angular Pipes

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