Front-end Digest № 100: ергономіка генераторів, React is cool та секрети висоти в CSS

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

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

Веброзробка

• Як створити новий елемент форми
• GitHub для початківців: cтворення React-застосунку за допомогою GitHub Copilot
• Використання аудитів Lighthouse для оптимізації вебпродуктивності
• ESLint тепер працює з HTML
• Rslib: створення бібліотек за допомогою Rspack

• Доступність
  • HTML emails Accessibility Report 2025
  • Створення доступних застосунків за допомогою Next.js та axe DevTools
  • The Art of Accessibility. Сучасний спосіб вивчити найкращі практики доступності для ваших React, Angular та Vue-застосунків
  • 3 інструменти, які допоможуть виправити найпоширеніші помилки WCAG 2.2
  

• Ефекти
  • Від SplitText до MorphSVG: 5 творчих демонстрацій з використанням безкоштовних плагінів GSAP
  • React three fiber — 3D для вебу
  • 3d CSS галерея з нескінченною прокруткою

CSS

• The Height Enigma: розкриваємо секрети висоти на основі відсотків у CSS
• Container Query для «чи достатньо місця за межами цього елемента?»
• SVG to CSS Shape Converter
• Створення квіткових фігур за допомогою clip-path: shape()
• Анімація, керована прокруткою, всередині каруселі CSS
• View Transitions: плавна анімація border-radius за допомогою View Transition
• Smashing Animations, частина 2: як CSS Masking може додати додатковий вимір
• Як змусити браузер вибрати контрастний колір в CSS
• Перші пригоди в View Transitions

JavaScript

• Я думаю, що ергономіка генераторів мені подобається
• Повний посібник з регексів у JavaScript
• Підказки компіляції JavaScript: що це таке і коли їх використовувати

• React
  • Інтеграція Rive у React-проєкт: за лаштунками Valley Adventures
  • React Is Fucking Cool, You Dumbass (відповідь на jsx.lol)
  • Межі RSC: подорож практикуючого фахівця
  • Як створити власний React-рендер
  • GitHub for Beginners: Building a React App with GitHub Copilot
  • React Context не є причиною надмірної кількості рендерингу
  

• Angular
  • Розбираємо standalone-компоненти у Angular
  • Angular Can I Use: Перевірка сумісності функцій Angular у різних версіях

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