Front-end Digest № 150: SVG з нуля, нелюбов до Tailwind та про `this` в JS людською мовою

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

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

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

• SVG з нуля — інтерактивний туторіал
• Три принципи стоїцизму для поліпшення вебдоступності
• Проєктування стабільних інтерфейсів для потокового контенту.
• Як зберегти зміни DOM при гарячому перезавантаженні.
• Канвасування вебу
• Більше, ніж портфоліо: Створення 3D-світу, керованого прокручуванням.
• Серверно-орієнтований інтерфейс: реалізація у 22 рядки коду TypeScript
• NPM-пакет Intercom під загрозою через триваючу атаку черв’я міні-«Шаї-Хулуд»

• Інструменти
  • Автоматизуйте роботу браузера з терміналу за допомогою Chrome DevTools MCP CLI
  • Реліз pnpm 11.0
  • Ще про те, як JSDoc став у пригоді: ESLint вступає в гру.

CSS

• Прокручування як драйвер анімації: досліджуємо дивовижний новий API animation-timeline
• Попередження: прорив каскаду в cascade layer!
• hypot() в CSS
• Важливість нативної випадковості в CSS
• Давайте зараз скористаємося неіснуючим селектором ::nth-letter
• Нативні CSS-анімації зі зміщенням за допомогою sibling-index()
• Я не люблю Tailwind. Вибачте, але ні.

JavaScript

• Раз і назавжди про `this` в JS людською мовою
• React Compiler через півтора року: Arc, дискусії та подальші перспективи
• Доступність у React: типові помилки та способи їх усунення
• Next.js: посилання у вигляді кнопки
• Браузер вирішує, як рендерити, а не JavaScript.
• Як React транслює UI потоком хаотично, але зберігає порядок.

Меми