Front-end Digest № 118: MCP для фронтендерів, 100 способів центрувати елемент та як useEffect зламав інтернет

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

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

Веброзробка

• Як Cloudflare через React useEffect hook ненароком спричинив DDoS-атаку на свою мережу
• Відмова від TypeScript
• Як розробити інтелектуальніші фронтенд чат-боти з RAG та LangChain.js
• Вебстандарти та падіння дому Ямуса. Стаття демістифікує процес вебстандартизації, пояснюючи, що у стандартах немає «пророків» чи «оракулів», є лише інженери, які розв’язують реальні проблеми

• Інструменти
  • Функції WebKit у Safari 26.0
  • 10 MCP-серверів для фронтенд-розробників
  • Чому використання Bun у продакшені (можливо) не найкраща ідея
  

• Демо
  • Створення імерсивної 3D-візуалізації погоди за допомогою React Three Fiber
  • Створення еластичних ефектів та ефектів відбиття з Expressive Animator
  • Замініть анімовані GIF-файли на SVG-файли

CSS

• Висновок щодо State of CSS 2025: це вже не той CSS, який ми знали раніше (і це добре)
• Що потрібно знати про сучасний CSS (видання 2025 року)
• Сучасний CSS для подолання подвійного контуру фокусування.
• 100 способів центрувати елемент горизонтально та вертикально
• Запобігання артефактам на сфокусованих елементах з overflow
• Плаваючий фокус за допомогою CSS з anchor positioning
• CSS в голос: альтернативний текст для контенту, згенерованого CSS
• CSS offset і animation-composition у контексті меню з обертанням
• OKLCH в CSS: чому ми перейшли від RGB і HSL
• «Найбільш ненависна» функція CSS: cos() і sin()
• Чи вже час відмовлятися від Sass?
• Стилізація :headings
• Apple має приватну CSS-властивість для додавання ефектів рідкого скла до вебконтенту

JavaScript

• Fetch-потоки — це добре, але не для відстеження прогресу завантаження/вивантаження
• JavaScript: актуалізація знань. ES6, методи масивів, Async/Await та Import/Export у 2025
• Початок роботи з Elixir і Phoenix, альтернативою JS
• Візуалізація бульбашкового сортування 41 строками коду на чистому JS

• React
  • React переміг автоматично — і це нищить інновації у фронтенді
  • Різні способи стилізувати ваш React-застосунок
  • Як створити систему автентифікації React за допомогою Supabase
  • Middleware у React Router
  • React Server Components зламали мій застосунок, і я досі не знаю чому
  • Чи можу я використовувати React Server Components (RSC) вже сьогодні?
  

• Vue
  • MCP Server для Nuxt UI
  • Основи Vue: опановуємо хуки життєвого циклу Vue
  

• Angular
  • По той бік обрію: Angular та інтеграція штучного інтелекту в застосунки нового покоління
  • afterRenderEffect, afterNextRender, afterEveryRender & Renderer2
  • Angular Signals Form: валідація та логіка

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