Front-end Digest № 31: стек AHA, огляд npm, ілюстрований CSS та бібліотеки React

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

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

Веброзробка

• Зимове оновлення вебкомпонентів 2024
• Робота з IndexedDB
• У Safari з’явився новий елемент HTML Control
• Нативні елементи Color Input та Color Picker
• Вивчіть SVG, намалювавши стрілку
• Стек AHA: поєднуйте Astro, htmx та Alpine.js для створення сучасних вебзастосунків, що замінюють важкий підхід SPA JS набагато простішим набором ментальних моделей та робочих процесів.

• Інструменти
  • Огляд npm: ретроспектива 2023 року про зростання, безпеку та дивні факти
  • 67 дивних прийомів дебагінгу, про які ваш браузер не хоче, щоб ви знали
  • console.delight. Детальна стаття про цікаві можливости браузерної консолі
  • Що таке ШI-інструмент V0.dev від Vercel і як ним користуватися?
  

• Доступність
  • Гроші говорять! Форматування валют у вебконтенті
  • Доступні сповіщення з ARIA Live Regions (Частина 1)
  • Доступні сповіщення з ARIA Live Regions (частина 2)
  

CSS

• Ілюстрований CSS: Значення та одиниці CSS
• Ілюстрований CSS: CSS Box Model
• Складна, але чудова властивість CSS border-image
• Стилізація скролбару
• Чому рефлоу негативно впливає на продуктивність?
• Практичний вступ до анімації, керованої прокруткою, за допомогою функцій CSS scroll() та view()
• Легке створення CSS-переходів з Velvette
• Моя техніка для додавання ефекту зникаючого контенту за допомогою прозорих градієнтів у CSS

JavaScript

• 10 print chr$(205.5 + rnd(1));:goto 10 в JavaScript
• WebSockets Unlocked: оволодіння мистецтвом комунікації в режимі реального часу
• Посібник з переходу на D3.js: огляд, приклади та альтернативи
• Вивчаємо Effect, meta-state RxJS-подібний фреймворк
• Компіляція незалежного виконуваного файлу на основі сучасних рантаймів JavaScript/TypeScript

• React
  • Бібліотеки React на 2024 рік
  • Трохи роздратований Реактом
  • React, куди ти йдеш?
  • Frontend Masters: принципи Solid в React / React Native
  • П’ять просунутих технік отримання даних у React для покращення користувацького досвіду
  • Як створити високопродуктивний таб-компонент в React
  • Як скопіювати в буфер обміну в React
  • Стрими та React Server Components
  • Вивчення Redux Toolkit 2.0 та другого покоління Redux
  

• Vue
  • Складові застосунку Vue з нуля у 2024 році
  • Сучасна розробка Vue.js з Vite: найкращі практики та поради
  

• Angular
  • Безпечний доступ до DOM за допомогою Angular SSR
  • Приклади нових signal inputs в Angular
  • Signals — це значення, а не події