Front-end Digest № 33: Figma Dev Mode, CSS-анімації, ювілей VueJs та психологія продуктивності

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

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

Веброзробка

• Нове на вебплатформі в січні
• Історія успіху вебкомпонентів
• JavaScript чи WebAssembly: Що енергоефективніше та швидше

• Інструменти
  • Що нового в DevTools (Chrome 122)
  • Що далі в Figma Dev Mode: анотації, порівняння змін, плагіни та багато іншого
  

• Продуктивність
  • Interaction to Next Paint стане Core Web Vital 12 березня
  • Психологія вебпродуктивності
  • Психологія швидкості сайту та людського щастя
  • Витискання останнього біта продуктивності JavaScript для моєї автоматизованої гри

CSS

• Чи вбʼє StyleX Tailwind CSS? Огляд нової системи створення CSS від FaceBook
• Увага, кастомні смуги прокрутки. Chrome тепер підтримує стандарт, який замінює старі псевдоелементи
• Анімація палітри шрифту
• Вихід за межі пікселів і ^®ems у CSS — Одиниці відносної довжини на основі шрифту
• Що таке CSS Motion Path
• Field-sizing просто працює!
• Селектори nth-child() та nth-of-type() в CSS — в чому різниця
• Використання глобальних стилів у Shadow DOM
• Компонент перемикача, що легко налаштовується за допомогою сучасних технологій CSS
• CSS-анімації з прокруткою за допомогою Style Queries

JavaScript

• Який фронтенд-фреймворк найактивніше розвиватиметься у 2024 році — React vs Angular vs Vue vs Svelte vs Ember
• Порівняння дат в JavaScript: Як правильно це робити
• JavaScript Trim String: Як видалити непотрібні пробіли
• JavaScript Game Dev Tutorial — створення гри про горил за допомогою HTML Canvas + JavaScript

• React
  • Здається, що останнім часом React отримує невеликий поштовх
  • Чотири помилки useState, яких варто уникати в React
  • Міграція Next.js App Router: добре, погано і потворно
  • Створення власного композиційного API за допомогою React Aria
  • Реалізація автентифікації користувачів у React-застосунках за допомогою Appwrite
  • Використання React та Strada для розробки гібридних веб- та мобільних застосунків
  • Як створити мобільний свайп-компонент у React
  

• Vue
  • 10 років тому Vue вперше був представлений публіці на HackerNews
  • Розуміння різних ref у Vue3: toRef, toRefs, isRef, unref...
  • Розуміння хуків у Vue3 (Навіщо використовувати хуки)
  • Як використовувати розпізнавання об’єктів за допомогою TensorFlow.js та Vue 3
  

• Angular
  • Тестування DOM компонентів в Angular
  • Що нового в Angular 17
  

• TypeScript
  • Як використовувати forwardRef з Generic Components
  • Порівняння рішень для керування станом в TypeScript
  • Анонс бета-версії TypeScript 5.4
  • Modern JavaScript library starter: про публиковання TypeScript-пакету, тестування, GitHub Actions та автопублікацію в NPM