Front-end Digest № 9: оптимізація файлів JavaScript, генеративний ШІ в Angular та нові методи анімації CSS

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

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

Веброзробка

• Створіть чат-бот, навчений на власних даних, за допомогою OpenAI API
• Створіть швидкий Next.js-застосунок за допомогою Bun
• Ми попросили ШІ уявити вебфреймворки як супергероїв
• Анімація стовпців і рядків при прокручуванні

• Доступність
  • aria-haspopup та скрин-рідери
  • Посібник для початківців про списки та як зробити їх доступними
  • Новий спосіб відображення посилань на новини у The Verge — жахлива ідея

CSS

• Чотири нові функції CSS для плавної анімації
• Селектори CSS: Візуальний посібник
• Як використовувати властивість CSS gap
• Прокрутка тіней за допомогою animation-timeline
• Корисні фільтри для SVG
• Цікава техніка для анімації тексту з прокруткою на CSS [Chrome 115+]

JavaScript

• Dropbox.Tech: як ми зменшили розмір наших JavaScript-бандлів на 33%
• Посібник з оптимізації JavaScript файлів
• Поступово вдосконалена валідація форм, частина 2: багаторівнева перевірка в JavaScript

• React
  • Фантастичні замикання та як їх знайти в React
  • React Hook: useGlobalState
  • Створення Two-Way Data Binding Hook для інпутів форм у React

• Vue
  • Від Vue 2 до Vue 3: довга подорож

• Angular
  • Розбираємо таємницю Angular Dependency Injection
  • Золота середина між signals та observables
  • Початок роботи з генеративним ШІ в Angular
  • Angular Signals: збереження потягу реактивності

• Svelte
  • Посібник для початківців у SvelteKit
  • OAuth такий складний... або 90 рядків коду з Svelte

Бонус

• Шрифтова абетка української ідентичності