Фронтенд-дайджест №442 (16 -22 ноября 2020)

Медиа

• «Новости 512» от CSSSR: Angular 11, .NET 5.0, security-релизы, Container Query в Chrome, Bloomberg переходит на TS, werf.io
• Подкаст "Сделайте мне красиво" №50 - Все дороги ведут к букингу
• Подкаст "Фронтенд Юность" #164: Мужицкий тест-suite

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

• Стандартизация select и не только: прошлое, настоящее и будущее нативных элементов форм

• 9 новых браузерных функций 2020 года, о которых вы, вероятно, не знали

• Современный стартовый HTML-шаблон

• Unit Testing: лучшие практики

• 1 бекенд, 5 фронтендов - Todo List с Rails, React, Angular, Vue, Svelte и jQuery

• Фронтенд-разработчику: 10 направлений, в которых стоит развиваться в 2021 году

• Осциллограф в браузере

• Бекенд или фронтенд, кому принадлежит слой оркестрации API?

• Производительность

  • Добро пожаловать в новый GTmetrix на базе Lighthouse
  • Google развивает новый формат изображений WebP 2
  • Google Lighthouse: ожидания vs. реальность

• Доступность

  • Моделирование недостатков цветового зрения в Blink Renderer
  • 10 надежных советов по увеличению доступности веб-сайтов
  • Недоспроектированные адаптивные таблицы

• Эффекты

  • Подборка креативных концептов "UI Interactions & Animations Roundup #12"
  • Создание эффектов WebGL с помощью CurtainsJS

CSS

• Где использовать флексы, а где гриды? Спойлер: да где хотите
• Полное руководство по градиентам в CSS
• Липкий сайдбар с динамическим размером на HTML и CSS
• Релиз Tailwind CSS v2.0
• Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал
• Языки, которые почти стали CSS
• Создание отзывчивых компонентов с прозрачностью
• Цветовая темизация с помощью кастомных свойств CSS и Tailwind
• Нестандартное мышление с помощью CSS Grid
• Что нового в Tailwind 2.0

JavaScript

• Анонс TypeScript 4.1

• Самый точный способ запланировать выполнение функции в веб-браузере

• Случаи слабых зависимостей в JS

• Как создать JavaScript PDF Viewer

• Теория

  • Три основных новых функции JavaScript ES 2021 (ES 12), которые меня будоражат
  • Внедрение зависимостей (dependency injection) через свойства-функции в JavaScript
  • JavaScript: что нас ждет в следующем году
  • В чем разница между Event Handlers и addEventListener в JS?
  • Как использовать Map, Filter и Reduce в JavaScript

• React

  • 7 особенностей JavaScript, которые нужно знать, прежде чем изучать React
  • Продуманный способ использования хука useRef() в React
  • Импортируем React сквозь века
  • REACT + JEST = TDD ❤️
  • Как React использует замыкания для избегания ошибок
  • Как тестировать React.useEffect

• Vue

  • Отладка приложений Vue в рабочей среде
  • Логирование действий и мутаций Vuex в дикой природе
  • Ionic Vue: UI библиотека для Vue 3
  • React vs Vue – быстрое сравнение (2020 Update)

• Angular

  • Совместимые компоненты: декларативный подход в Angular
  • Отрисовка динамических компонентов по имени селектора в Ivy
  • Локализация в приложениях Angular с использованием RxWeb
  • Создайте полноценный GitLab pipeline для Angular. Часть 1

• Ember

  • The Ember Times - Issue No. 168
  • Представляем ember-mirage-gen
  • Мы выбрали Ember в 2015 году, и в 2020 году это все еще хорошее решение.
  • Как работают @tracked и @cached?

• Svelte

  • Многошаговые формы со Svelte и TypeScript

• Libs & Plugins

  • Стартовый шаблон для ThreeJS приложений
  • ts-standardx - Еще один настраиваемый линтер для TypeScript и JavaScript.
  • upptime - аптайм-статус и страница состояния сайта на базе GitHub
  • Harold - CLI-инструмент, который сравнивает связанные с фронтетом файлы вашего проекта по размеру

Браузеры

• Троттлинг табов и другие улучшения производительности в Chrome M87
• Компания Mozilla передала движок Servo организации Linux Foundation
• В Firefox 83 внедрили режим «только HTTPS»
• Релиз Firefox 83
• Google представила Chrome 87 — последнее в этом году обновление браузера с «самый большим приростом быстродействия за многие годы» и новыми функциями
• С помощью бага в Firefox можно было похитить файлы cookie с Android-устройства
• Устройство современного веб-браузера Chrome (часть 1/4), (часть 2/4), (часть 3/4), (часть 4/4)