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

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

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

Медиа

• Подкаст «CSSSR» — Telegram разблокирован, WWDC 2020, DX, фичи NodeJS 14, Webpack 5 beta 18, VPN от Mozilla
• Подкаст «Веб-стандарты» №235: Евангелист Safari, Bootstrap 5, content-visibility, гриды, чекбоксы, forms, API для PWA
• Подкаст «Фронтенд Юность (18+)» №143: Жизни разработчиков важны

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

• Как верстать веб-интерфейсы быстро, качественно и интересно
• Как заработать на веб-скрапинге
• Как стать тимлидом фронтендеров и как жить после этого — расшифровка эфира
• Оглядываясь назад на пять лет существования AMP
• Обзор техник прокрутки страниц

• Инструменты
  • Что нового в DevTools (Chrome 85)
  • Как организовывать и внедрять стандарты написания кода
  • npm v7 — Зачем хранить `package-lock.json`?
  

• Производительность
  • Клиентский мониторинг производительности
  • Синтетический мониторинг производительности
  • Что нужно знать о метриках Core веб Vitals в Google
  • WebP действительно лучше, чем JPEG?
  • Как установить бюджет производительности для вашего сайта
  • Как увеличить скорость вашего сайта и набрать 100 баллов на Google PageSpeed ​​Insights
  

• Доступность
  • Доступность для некоторых
  • Доступное и удобное для клавиатуры гамбургер-меню + выдвижная навигация
  

• Эффекты
  • Подборка креативных концептов «Awesome Demos Roundup #16»
  • A Glitchy Grid Layout Slideshow
  • Подборка креативных сайтов «Inspirational Websites Roundup #16»
  • Custom Shape Dividers — инструмент для генерации разделителей страниц нестандартной формы на SVG
  

CSS

• Эмуляция различных медиа выражений в Chrome и отладка темного режима
• Несоответствия рендеринга шрифтов в браузерах
• Стилизация Layout Wrappers в CSS
• Эффект смятого постера на CSS
• Проверка поддержки анимации с помощью “prefers-reduced-motion”
• Основы CSS: анимация
• Отладка HTML с помощью продвинутых селекторов CSS
• Использование пользовательского свойства «Stacks» для укрощения каскада

JavaScript

• Что JavaScript-разработчику следует знать о Curl
• Обход капч с помощью Headless Chrome
• Симуляция роста кристаллов: ограниченная диффузией агрегация на Javascript
• Память в JavaScript — без утечек
• Туториал. Список задач с drag & drop
• Как получить размеры экрана, окна и веб-страницы в JavaScript
• Новые функции в TypeScript 3.9
• Концепты JavaScript, которые нужно освоить перед изучением React

• React
  • Создаем прогрессивное веб-приложение на ReactJS и размещаем его в Netlify и PWA Store
  • 15 вопросов для интервью по React с решениями
  • Визуальные редакторы React в 2020 году
  • Введение в SWR: Хуки React для удаленной выборки данных
  • Практическое руководство по тестированию React-приложений с помощью Jest
  • Проблемы и возможности создания приложений на React и React Native — обсуждение с Wix.com
  • Создание документов с помощью MDX: Markdown для эпохи компонентов
  • Как скопировать интерфейс Zelda BOTW с React, Tailwind и Framer-motion: Часть 1
  • Что нового в Next JS 9.4
  • Релиз React Query 2.0
  

• Vue
  • Vue.js: The Documentary (Русская Версия)
  • Установка вашего PWA на Vue.js
  • Как сделать localStorage реактивным во Vue
  

• Angular
  • Используем DI в Angular по максимуму — концепция частных провайдеров
  • Что нового в Angular 10
  • Стал доступен Angular 10
  • RxJS: неожиданное
  • Вот что вы должны знать при создании гибких и повторно используемых компонентов в Angular
  

• Ember
  • The Ember Times — Issue No. 154
  • Работа с кодовой базой Ember с точки зрения дизайнера
  • Ускорение производительности Ember: поисковая оптимизация
  • Как интегрировать Netlify-CMS с Empress-блогом
  

• Libs & Plugins
  • keen-slider — легкий слайдер без зависимостей с отличной производительностью, поддержкой typescript, мультитач и совместимостью по всеми браузерами, включая IE 10.
  • Checkboxland — JavaScript библиотека для рендеринга всего что угодно в виде HTML-чекбоксов.
  • SolidJS: реактивный рендеринг интерфейсов
  • tragopan — минималистичная библиотека без зависимостей для реализации pan/zoom
  • Rando.js — простая и мощная функция для вывода случайного значения
  • Noact — минимальная библиотека для отрисовки Virtual DOM
  

Браузеры

• В Chrome предложен новый интерфейс PDF-просмотрщика и добавлена поддержка AVIF
• Chrome, Firefox и Safari ограничат время жизни TLS-сертификатов 13 месяцами
• Приветствуем Safari в сообществе WebExtensions
• Safari, Web, и Authentication

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

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