Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
«Новости 512» от CSSSR: Angular 11, .NET 5.0, security-релизы, Container Query в Chrome, Bloomberg переходит на TS, werf.io
•
Подкаст «Сделайте мне красиво» №50 — Все дороги ведут к букингу
•
Подкаст «Фронтенд Юность» #164: Мужицкий тест-suite
•
Современный стартовый HTML-шаблон
•
Фронтенд-разработчику: 10 направлений, в которых стоит развиваться в 2021 году
•
Осциллограф в браузере
•
Стандартизация <select> и не только: прошлое, настоящее и будущее нативных элементов форм
•
9 новых браузерных функций 2020 года, о которых вы, вероятно, не знали
•
Unit Testing: лучшие практики
•
1 бекенд, 5 фронтендов — Todo List с Rails, React, Angular, Vue, Svelte и jQuery
•
Бекенд или фронтенд, кому принадлежит слой оркестрации API?
•
Полное визуальное руководство-шпаргалка по Flexbox и Grid + туториал
•
Языки, которые почти стали CSS
•
Где использовать флексы, а где гриды? Спойлер: да где хотите
•
Релиз Tailwind CSS v2.0
•
Цветовая темизация с помощью кастомных свойств CSS и Tailwind
•
Что нового в Tailwind 2.0
•
Полное руководство по градиентам в CSS
•
Липкий сайдбар с динамическим размером на HTML и CSS
•
Создание отзывчивых компонентов с прозрачностью
•
Нестандартное мышление с помощью CSS Grid
•
Анонс TypeScript 4.1
•
Самый точный способ запланировать выполнение функции в веб-браузере
•
Случаи слабых зависимостей в JS
•
Как создать JavaScript PDF Viewer
•
Устройство современного веб-браузера Chrome: (часть 1/4), (часть 2/4), (часть 3/4), (часть 4/4)
•
В Firefox 83 внедрили режим «только HTTPS»
• Релиз Firefox 83
• Компания Mozilla передала движок Servo организации Linux Foundation
• Google представила Chrome 87 — последнее в этом году обновление браузера с «самый большим приростом быстродействия за многие годы» и новыми функциями
• С помощью бага в Firefox можно было похитить файлы cookie с Android-устройства
•
Троттлинг табов и другие улучшения производительности в Chrome M87
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript | Браузеры
Медиа
•

•

•

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

•

•

•

•

•

•

•

- Производительность
• Google развивает новый формат изображений WebP 2
•Добро пожаловать в новый GTmetrix на базе Lighthouse
•Google Lighthouse: ожидания vs. реальность
- Доступность
•Моделирование недостатков цветового зрения в Blink Renderer
•10 надежных советов по увеличению доступности веб-сайтов
•Недоспроектированные адаптивные таблицы
- Эффекты
•Подборка креативных концептов «UI Interactions & Animations Roundup #12»
•Создание эффектов WebGL с помощью CurtainsJS
CSS
•

•

•

•

•

•

•

•

•

•

JavaScript
•

•

•

•

- Теория
•Внедрение зависимостей (dependency injection) через свойства-функции в JavaScript
•JavaScript: что нас ждет в следующем году
•Три основных новых особенности JavaScript ES 2021 (ES 12), которые меня будоражат
•В чем разница между Event Handlers и addEventListener в JS?
•Как использовать Map, Filter и Reduce в JavaScript
- React
•REACT + JEST = TDD ?
•7 особенностей JavaScript, которые нужно знать, прежде чем изучать React
•Продуманный способ использования хука useRef() в React
•Импортируем React сквозь века
•Как 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?
- Libs & Plugins
•Стартовый шаблон для ThreeJS приложений
•ts-standardx — Еще один настраиваемый линтер для TypeScript и JavaScript.
•upptime — аптайм-статус и страница состояния сайта на базе GitHub
•Harold — CLI-инструмент, который сравнивает связанные с фронтендом файлы вашего проекта по размеру
Браузеры
•

•

• Релиз Firefox 83
• Компания Mozilla передала движок Servo организации Linux Foundation
• Google представила Chrome 87 — последнее в этом году обновление браузера с «самый большим приростом быстродействия за многие годы» и новыми функциями
• С помощью бага в Firefox можно было похитить файлы cookie с Android-устройства
•

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