Дайджест свежих материалов из мира фронтенда за последнюю неделю №425 (20 — 26 июля 2020)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Медиа    |    Веб-разработка    |    CSS    |    JavaScript

Медиа

• Подкаст «Веб-стандарты» №240: MoscowJS, бета Chrome 85, TypeScript в Svelte, типизация и сбросы в CSS, что такое Numl
• Подкаст «Фронтенд Юность (18+)» №147: Jenkins забирает код у Медиазоны
• Подкаст CSSSR: Chrome 84, Safari 14 Beta, Ember Roadmap 2020, Yandex UI Kit, Open Prioritization, Oracle Update
• Подкаст «Сделайте мне красиво», Выпуск №38: Кортежи в js, преоптимизация useCallbacks и яма с SPA

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

• Пришло время ленивой загрузки закадровых <iframe>
• Правосторонний интерфейс: адаптируем контролы к right-to-left языкам
• Yaml для веб разработчиков
• Авторизация и аутентификация для всех
• Google отложил переход на mobile-first индексацию до марта 2021 года
• Полноценный HTML в GitHub README с помощью SVG foreignObject
• Введение в Jamstack: создание безопасных, высокопроизводительных сайтов
• Используйте Chrome DevTools как Senior Frontend Developer
• 5 стратегий Service Worker кэширования для вашего следующего PWA приложения

• Доступность
  • Перевод прототипов в доступный HTML/CSS код
  • Как действовать и понять доступность уже сейчас
  • Руководство для начинающих по ADA Website Accessibility Compliance
  

CSS

• Современные решения старых CSS-задач: Удержание футера внизу страницы, Элементы одинаковой высоты: Flexbox vs Grid, Масштабирование изображений на CSS
• Нативный способ покрасить SVG-иконки
• О конфликтах Sass и сравнительно новых возможностей CSS
• Объ­яс­не­ние клю­че­вых слов initial, inherit, unset и revert в CSS
• @property: наделяем суперспособностями CSS переменные
• Современные методы CSS для улучшения читабельности
• keyframes.app — визуальный онлайн инструмент, облегчающий создание CSS для анимаций
• Использование Flexbox с text ellipsis
• Анимированное подчеркивание на CSS
• О том, как использовать множественные фоны в CSS
• Когда вы используете inline-block?
• Онлайн-генератор изображений трехмерных книг на CSS
• css-media-vars — Новый способ написания адаптивного CSS. Именованные точки останова, DRY селекторы, без скриптов, без сборок, ванильный CSS.
• За пределами размеров экрана: отзывчивый дизайн в 2020 году
• Реалистичные капли на CSS

JavaScript

• Выбор зависимостей JavaScript
• Путь к пониманию шаблонных литералов в JavaScript
• Реактивный jQuery для спагетти-кода
• Импорт не-ESM-библиотек в ES-модули с ванильным JS

• Теория
  • Двоичное дерево поиска на JavaScript
  • Практика функционального программирования на JavaScript — методы составления данных
  • Работаем с датами на VanillaJS
  • Что такое мемоизация?
  

• React
  • Debouncing с помощью React Hooks: хук для функций
  • Подробно о React Router. Часть 3— редиректы, передача props компоненту роута и вложенные роуты +бонус
  • Давайте поговорим о SVG и его асинхронной загрузке в React
  • Как реализовать React-миграцию и повысить производительность в 3 раза?
  • Как использовать Styled-Components в React
  • Юнит тестирование в React — Что нужно знать
  • Тестирование в React, часть 2: библиотека React Testing
  • 4 популярных способа стилизации ваших React компонентов
  

• Vue
  • Вам возможно не нужен Vuex с Vue 3
  • Создание десктоп приложений с помощью Electron и Vue
  • Как я использую Vue Slots на моем сайте
  • Vue 3.0 вступил в стадию релиз-кандидата!
  • Как создать доступное фронтенд приложение с помощью Chakra UI и Nuxt.js
  • Code Coverage для приложений на Vue
  • Шрифтовая иконочная система с SVG иконками для Vue
  

• Angular
  • Ленивая подгрузка переводов с Angular
  • Упрощение Change Detection в Angular
  • Максимальное использование Angular DI: концепт приватных провайдеров
  • 5 советов, чтобы улучшить свои навыки в Angular
  • Angular + CSS Modules
  

• Ember
  • The Ember Times — Issue No. 157
  • Магия, стоящая за модификаторами ember
  • Обнаружение компонентов Ember.js, входящих или выходящих из области просмотра
  

• Svelte
  • Svelte <3 TypeScript
  • Svelte и TypeScript — наконец-то вместе!
  

• Libs & Plugins
  • doom-scroller.js — забавная JavaScript библиотека, которая поможет вам избавиться от бесконечного скроллинга путем добавления элементов из Doom
  • mailgo — новый концепт модальных окон для ссылок mailto и tel
  • Perfect Arrows — Набор функций для рисования идеальных стрелок между точками и фигурами.
  

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.