Front-end Digest № 75: реліз Angular v19, суперечність з Reset CSS та особливості локалізації

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

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

Веброзробка

• Локалізація вебзастосунків «по-людськи» або Чому ми розробили свій фреймворк
• Розв’язання проблеми узгодженості у фронтенді
• Вступ до WebSockets
• Не забудьте локалізувати свої іконки
• Як створити генератор мемів за допомогою HTML Canvas
• Створення резюме в HTML за допомогою Eleveny
• Вивчення атрибута Ping для тегу <a> в HTML5

• Інструменти
  • Функції devtools, які ви хотіли б мати, доступні в Polypane
  • Як випустити попередню версію npm-пакету
  • Nue: новий генератор статичних сайтів на основі Next.js
  

• Доступність
  • Альтернативний текст: не завжди потрібен
  • Стара порада щодо альтернативного тексту
  • Два різних типи «фокусованих» елементів інтерфейсу
  

• Ефекти
  • Від товару до кошика: додавання анімації для покращення досвіду покупок
  • Ефект розбитого скла (при натисканні, WebGL)
  • Креативний та дотепний лоадер за допомогою CSS

CSS

• Суперечність з Reset CSS
• Ви не є CSS розробником, якщо не зробили свій CSS-reset
• Створюйте креативні бордери за допомогою background-clip: border-area
• Оптимальні світлий і темний режими без зайвих зусиль
• Розваги з прапорами... За допомогою CSS
• REM? PX? Чому не обидва?
• Нова функція CSS light-dark() - найкращий спосіб зробити темний режим у 2024 році
• Tailwind CSS vs Traditional CSS:
• Вирішено за допомогою CSS: Donuts Scopes
• Ескізна версія нового логотипа CSS

JavaScript

• State of JavaScript 2024
• Анонс TypeScript 5.7
• Боротьба за звільнення JavaScript з-під контролю Oracle
• Імпорт зовнішньої бібліотеки JavaScript без системи збірки
• Рекурсія пояснюється простими словами

• React
  • Завантаження даних за допомогою TanStack Router: react-query
  • Ви неправильно використовуєте Context Providers! Ось як це виправити
  • React Scan — сканує проблеми з продуктивністю React та усуває повільні рендери у вашому застосунку
  • Створення React-форм за допомогою React Hook Form, Zod та Shadcn
  

• Vue
  • Заряджена реактивність Vue 3.0 + Pinia Stores
  • Повний посібник з оновлення Vue 3.x: поглиблене вивчення Composition API
  • Посібник із двостороннього біндінгу у Vue
  

• Angular
  • Зустрічайте Angular v19
  • Що нового в Angular 19: автономні компоненти, покращені сигнали та багато іншого!
  • Вийшов Angular 19: що нового і як це впливає на ваш процес розробки
  • Майже ідеальні параметри tsconfig.json для ваших Angular-проєктів

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