Front-end Digest № 2: новини вебплатформи, секрети DevTools, рефакторинг CSS та особливості деяких API в JS

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

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

Веброзробка

• Нове на вебплатформі в червні
• Прощання з SVG-in-JS у 2023 році
• Чи вже не запізно розв’язувати проблему засилля AI в Інтернеті?
• Що таке JSON LD?
• WebContainers: загальний огляд, приклади застосування, актуальні проблеми

• Інструменти
  • Корисні поради та підказки для DevTools
  • Представляємо MDN Playground: Оживіть свій код!
  • Масштабна помилка в серці екосистеми npm

• Продуктивність
  • Як CDN допомагають пришвидшити роботу шляхом зменшення затримок
  • Покращуйте продуктивність за допомогою динамічного «Content-Visibility»

• Ефекти
  • Створення ефекту випуклості за допомогою WebGL
  • Огляд сайтів, що надихають #47

CSS

• Імітація селектора :snapped за допомогою анімації, керованої прокруткою
• Створення висококонтрастної системи дизайну за допомогою CSS Custom Properties
• Cascade Layers марні*.
• Стилі, керовані положенням (Position-Driven Styles)
• Хитре вирівнювання плаваючих (floating) зображень
• Методи рефакторингу CSS
• Виходячи за межі констант з custom properties
• Посібник з обертання тексту в CSS

JavaScript

• CommonJS шкодить JavaScript
• Демістифікація операторів JavaScript: що означає цей Symbol?
• Вивчаємо можливості Node.js v20 в дії

• API

• Вступ до View Transitions API
• Як використовувати paginated API за допомогою JavaScript async generators
• Керівництво по Drag and Drop API в JavaScript

• React
  • Створення форми коментарів з React-Mentions
  • 3 способи реалізувати анімацію набору тексту в React
  • Використання CORS в Next.js для обробки cross-origin запитів
  • Блог GitHub: Створення кращого та швидшого компонента перегляду коду (Code View)
  • Телепортація в React: позиціонування, Stacking Context та портали

• Vue
  • Покращуйте свій код за допомогою VueMacros
  • Посібник із застосування Vue Placeholder Loading

• Angular
  • Angular отримує новий синтаксис шаблонів
  • Корисні функції Chrome DevTools для виявлення змін в Angular
  • Як створити intercepting систему в Angular (наприклад, WebSockets)
  • Зв’язування даних з урахуванням стану: Освоєння двостороннього зв’язку та управління станом в Angular