Front-end Digest № 88: WebLLM, особливості Tailwind v4 та майбутнє Next.js

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

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

Веброзробка

• Що таке WebLLM
• Статичний чи динамічний контент: чому віддавати перевагу розробникам
• Color Input, який також показує значення
• Дотримання стандартів Європейського закону про доступність (ЄАА): контрольний список для розробника

• Інструменти
  • ESLint тепер офіційно підтримує лінтінг CSS
  • Deno 2.2: OpenTelemetry, Lint Plugins, node:sqlite
  

• Продуктивність
  • Як Preply покращив INP у Next.js-застосунку (без React Server Components та App Router)
  • Як боротьба за пропускну здатність позначається на швидкості сторінки
  • Неправдиві обіцянки щодо підтримки WebP
  • Ліниве завантаження прихованих зображень
  

• Ефекти
  • Створення креативних бекграундів за допомогою LLM та React
  • Візуалізація теорії симуляції: дослідження фракталів, GLSL та природи реальності

CSS

• CSS @function + CSS if() = 🤯 🤯
• Декодування селекторів CSS: :has(:not) vs :not(:has)
• Особливості Tailwind v4, від яких я в захваті
• Трансформації CSS: властивість transform та окремі трансформації сумуються
• Нескінченна орбітальна анімація з використанням тригонометрії CSS
• Перші кроки у View Transitions
• Стилізація за допомогою CSS властивості box-shadow
• New Sass proposal: Attr Type

JavaScript

• Створення власного Promise: глибоке занурення в асинхронний JavaScript
• Як писати ефективні та чисті модульні тести на JavaScript
• Як використовувати тернарний оператор в JavaScript
• TypeScript vs JavaScript: що обрати у 2025 році
• Оптимізація продуктивності Vue.js за допомогою `shallowRef`: поглиблений посібник

• React
  • Мені подобається майбутнє Next.js
  • Прощавай, Create React App, привіт, TanStack Create React App
  • Як використовувати React-компоненти вищого порядку
  • Три способи реалізації нескінченної прокрутки в React (з прикладами коду)
  • Створення React-анімації в Motion

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