Front-end Digest № 170: як ШІ порушує закони UX, оптимальне вирівнювання іконок в CSS та TypeScript-хитрощі

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

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

Веб-розробка

• За межами фронтенду та бекенду: Agent Layer
• Чи мають фреймворки значення зараз?
• Де код і дизайн, згенерований ШІ, порушують закони UX
• Зупиніть зміщення макета: додайте ширину та висоту до ваших зображень
• FP Jargon — інтерактивна мапа жаргону зі світу функціонального програмування
• Побудова масштабованої системи SVG-іконок для вебзастосунку
• Як розробити інструмент для збирання даних
• Створення інтерактивного ефекту зім’ятого паперу за допомогою Houdini VAT та Three.js
• Калейдоскоп — це ілюзія, створена за допомогою дзеркал. Створення калейдоскопу в canvas

CSS

• Оптимальне вирівнювання іконок та підписів
• 12 CSS-фіч, які можна використовувати вже сьогодні без збірки
• Не ставтеся до CSS Container Queries як до звичайних Media Queries
• Кастомні світлові кільця для підсвітки в середині елементів
• Примітки на полях за допомогою CSS anchor positioning
• Витягнення інформації про Grid-сітку за допомогою CSS
• Порівняння значень за допомогою CSS `progress()`
• Видаляємо start/end margins за допомогою властивості margin-trim
• Пристойний шаблон для кастомного чекбокса, доки ::checkmark не готовий
• Чому ваші цифри здаються неправильними

JavaScript

• 10 браузерних API, що замінили бібліотеки, які я встановлював
• Як створити браузерний інструмент для перевірки цілісності файлів за допомогою JavaScript
• TypeScript-хитрощі, які справді використовують фронтенд-інженери: satisfies, Branded Types, та Exhaustive Unions

• React
  • React Server Functions — це більше, ніж мутації
  • Від 1256 мс до 96 мс: Виправлення INP у масивному React-дропдауні
  • React Activity: коли рендер більше не гарантує ефекту

• Angular
  • Angular State Management: Від Local Signals до NgRx SignalStore
  • Angular Zoneless Change Detection: Angular без Zone.js
  • Angular Resource APIs: Пояснення генерації проксі-сервісів на основі сигналів

Меми