Front-end Digest № 20: альтернатива jQuery, WebSockets в React та нові функції CSS

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

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

Веброзробка

• Продуктивність
  • Ефективні стратегії для оптимізації продуктивності
  • Відповіді на поширені запитання про інтерпретацію звітів щодо швидкості сторінки
  • Рендеринг на стороні сервера еволюціонував: розблокування швидших TTFB і TTI за допомогою потокового SSR

• Доступність
  • Доступне закреслювання
  • Не використовуйте фіксовану висоту або ширину CSS для кнопок, посилань та інших текстових контейнерів
  • Не перетворюйте таблицю на сітку ARIA Grid лише заради клікабельних рядків

• Ефекти
  • Tilt-Shift Blur Effect
  • Анімація шарів зображення за допомогою Clip-Path

CSS

До речі, щодо «сучасного» CSS. Ось декілька прикладів того, що вже працює, або буде імплементовано в браузерах в найближчому майбутньому.

JavaScript

• Як використовувати Fetch API в Node.js, Deno та Bun
• Прискорення екосистеми JavaScript — Tailwind CSS
• Анонсуємо WinterJS — сервер JavaScript Service Workers, написаний на Rust, який використовує SpiderMonkey для виконання JavaScript.
• Анонс TypeScript 5.3 RC

• React
  • Повний посібник з WebSockets в React
  • Путівник по React Suspense: Від розділення коду до отримання даних
  • React Server Components: Вичерпний посібник
  • Використання Crystalize.js із React для динамічного керування станом
  • Створіть full-stack AI App у React за допомогою Elegance SDK
  • Як докеризувати React-застосунок та легко його задеплоїти
  • Підсумки конференції Next.js Conf 2023 та релізу v14
  • Чи може Next.js обробляти 5000 сторінок?

• Angular
  • Нова функція Angular 17: новий синтаксис control flow
  • Вивчення рекурсії в Angular Components: Практичний посібник з прикладами
  • Глибоке занурення в Angular @Attribute Decorator: Реальне застосування та поради

• Інші фреймворки
  • Представляємо Nue JS, альтернативу Svelte
  • Повний посібник з LangChain в JavaScript
  • Svelte Flow — бібліотека для рендерингу інтерактивних вузлових інтерфейсів
  • Розуміння інтеграцій Astro та життєвого циклу хуків

• Libs & Plugins
  • jessquery — легка обгортка навколо DOM API, яка пропонує інтуїтивно зрозумілу елегантність jQuery, але оптимізовану для сучасного інтернету.
  • data-guardian — крихітний, з нульовими залежностями, пакет, який намагається замаскувати конфіденційні дані в arbitrary collections (map, set), errors, objects та strings.
  • Посібник з переходу на SolidJS: Огляд, приклади та альтернативи
  • Чотири закони RxJS Observables