Front-end Digest № 34: jQuery 4, вебкомпоненти, 3D у вебі та Remix vs Next.js

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

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

Веброзробка

• Веброзробка стає надто складною, і це може бути нашою виною
• Вивчаємо Interaction to Next Paint, новий Core Web Vital
• Starlight vs. Docusaurus для створення документації
• Найкращі практики для API Authorization
• Робимо те, що потрібно: вказуємо обов’язкові поля в доступній формі

• Новини
  • У спільноті Node.js активізувалися дебати щодо ввімкнення Corepack за замовчуванням та потенційного розділення npm
  • Покинутий проєкт Mozilla «Servo» — вебрушій «Серво» — отримає заслужене перезавантаження у 2024 році
  

• Вебкомпоненти
  • Знайомство з вебкомпонентами — вступ
  • Вступ до вебкомпонентів та як почати їх використовувати
  

• Візуал
  • Креативне розкриття зображень за допомогою WebGL під час прокрутки
  • Як малювати радарні діаграми в вебі
  • Як вбудовувати 3D-моделі в веб
  • Створення анімованого 3D-ефекту зоряного поля в JavaScript

CSS

• Вихід за межі пікселів та ^®ems у CSS — відносні одиниці на основі вьюпорту
• Правда™ про кодування SVG в data URI
• Цікавий випадок із селекторами
• CSS scroll-driven scroll-snapping animations
• Як створити закруглені градієнтні бордери з будь-яким фоном в CSS
• Створення невидимості: посібник з 10 основних технік приховування в CSS
• CSSformalize — революційний CSS фреймворк, розроблений виключно для легкої кастомізації нативних HTML форм.

JavaScript

• Оновлення незмінних масивів за допомогою Array.prototype.with
• Реактивний інтерфейс у 10 рядках коду
• Створення універсального рішення з IntersectionObserver для додавання скол-анімацій
• Від багатьох до одного: перенесення нашого JavaScript-коду в монорепо
• Незмінний JavaScript — як підвищити продуктивність ваших JS-застосунків
• Порівняння п’яти JavaScript API для мапування
• Намагаєтесь вивчити React або будь-який інший JavaScript фреймворк? Ось сім помилок, які вас стримують (і що робити натомість)

• Релізи
  • Випущено ESLint v9.0.0-beta.0
  • jQuery 4.0.0 BETA!
  

• React
  • Створення інтерактивних візуалізацій даних за допомогою D3.js та React
  • Remix перемагає Next.js у битві фреймворків React
  • Анонс Million 3 — оптимізаційного компілятора для React
  • Докеризація застосунків Next.js за допомогою GitHub Actions
  • Як виявити кліки будь-де на сторінці в React
  • Як оптимізувати розмір DOM в React JS?
  

• Angular
  • Deferred Components vs Dynamic Components в Angular
  • Представляємо MiniRx Signal Store
  • Код в Angular, що пахне — Глибоке занурення — Частина I
  • Angular: підписуватись чи не підписуватись
  • Створення багаторазових API Router Signals в Angular ️