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

Медиа    |    Веб-разработка    |    CSS    |    JavaScript    |    Браузеры    |    Занимательное

Медиа

• Подкаст «Веб-стандарты» №248. Safari 14, миссия PostCSS 8, Moment.js всё, React и веб-компоненты, история двух колор-пикеров
• UnderJS Podcast #26 — Балдежный выпуск (React 18, GraphQL, RN 0.63)
• Фронтенд Юность (18+) #155: TypeScript за лимон
• Подкаст «Сделайте мне красиво», Выпуск №44: Не переживайте, это безопасно
• Подкаст «Веб-стандарты» 247. Edge, браузеры, AVIF, генераторы статики, математика для фронтендера, Хабр, чтение, переводы
• Подкаст CSSSR: Security-релизы NodeJS, Ruby 3, разбор AVIF, JIT-компилятор Erlang, Web Skills, Laravel 8
• Видеоблог Вадима Макеева №34. Type.Today, base64, шрифты и сабсеттинг

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

• Web Cryptography API: пример использования
• Факторы ранжирования Google, которые повлияют на поиск в 2021 году: Core Web Vitals, E-A-T или AMP?
• Подборка креативных сайтов «Inspirational Websites Roundup #18»

• Инструменты
  • Релиз PostCSS 8.0 “President Ose”: новый plugin API, уменьшение размера node_modules, улучшенная поддержка source map и улучшения парсера CSS.
  • PostCSS 8.0: Руководство по миграции плагина
  • BGJar — Бесплатный генератор svg-фонов для ваших сайтов
  • Скрытые возможности Chrome DevTools
  • Инструменты должны быть не только для экспертов — они должны превращать нас в них
  

• Производительность
  • Перфоманс фронтенда как современное искусство: графики, код, кулстори
  • Моментальная загрузка с instant.page
  • Обеспечение бюджета производительности с помощью webpack
  

• Доступность
  • HTML и CSS ошибки, которые я встречаю как человек без ограничений по здоровью
  • Делаем модальные окна для сайта. Заботимся об удобстве и доступности
  • 5 самых неприятных фич для слепого человека на сайтах
  

CSS

• Центрирование в CSS
• Как использовать маски в CSS
• Как использовать CSS clipping
• Изучение CSS 3D Transforms и Perspective
• Введение в CSS-анимацию
• Min, Max и Clamp
• Interaction Media Features и их потенциал
• “CSS селекторы/комбинаторы медленные, классы — быстрые” — Они врали вам!

JavaScript

• Работаем с медиа-запросами через JavaScript
• Картинка, которая одновременно является кодом на Javascript
• Drag and Drop с помощью линейной интерполяции в JavaScript
• Практическое реактивное программирование с помощью RxJS
• Шпаргалка HTML5 Node: 21 API, которые вы должны знать в 2020 году
• Как мы написали самый быстрый JavaScript UI Framework, опять

• Теория
  • JavaScript и TypeScript: 11 компактных конструкций, о которых стоит знать
  • Секреты JavaScript-функций
  • JavaScript: область видимости простыми словами
  • Как использовать Fetch с async / await
  • Освоение JavaScript ES6 Symbols
  

• React
  • React 17: Ничего нового?
  • Интегрируем React приложение в Microsoft Office
  • Прогрессивное улучшение с помощью WebGL и React
  • React Query — недооцененный инструмент управления состоянием
  • Лучшие практики React Components и методы оптимизации производительности
  • Создание сложных анимаций с помощью React и Framer Motion
  • Введение в Wouter: альтернативу React Router
  • Сравнение методов стилизации в Next.js
  • Почему Next.js — мой лучший выбор вместо Gatsby, Gridsome и Nuxt?
  • 6 причин использовать React Hooks вместо классов
  

• Vue
  • Официальный релиз Vue.js 3.0 «One Piece
  • Eleventy и Vue — идеальная пара для Netlify.com
  • Nuxt: Offline First PWA Tutorial
  • Vue Flow Form — генератор форм с открытым исходным кодом, созданный на Vue.js
  • Погружение в Virtual DOM
  • Советы по оптимизации Nuxt SSR
  • Vue.js Global Live Online 2020
  

• Angular
  • 5 советов для прокачки своих навыков в Angular
  • Работа с GraphQL в Angular: мутация и аутентификация
  • Пишите лучшие автоматизированные тесты с Cypress в Angular
  • Тестирование Angular route guards с помощью RouterTestingModule
  

• Ember
  • Создание надежных пользовательских интерфейсов на Ember.js с помощью Statecharts
  • Прогрессивное веб-приложение с использованием Ember
  

• Svelte
  • Svelte <3 TypeScript
  • Переиспользуемый компонент Svelte для лейаутов ваших страниц
  

• Libs & Plugins
  • Прекращение разработки библиотеки Moment.js, имеющей 12 млн загрузок в неделю
  • Изучите date-fns: легкую библиотеку для работы c датами в JavaScript
  

Браузеры

• Вышла новая версия браузера Safari 14 с улучшенной работой вкладок
• Уязвимость в Firefox для Android, позволяющая управлять браузером через общий Wi-Fi

Занимательное

• Mozilla прекращает разработку Firefox Send и Firefox Notes
• Mozilla запустила сервис для отслеживания «оскорбительного контента» в рекомендациях YouTube
• Хакерская атака впервые стала причиной смерти человека
• Почему «громкий стартап» Slack стал скучным — и это нормально
• Семь мифов о программировании
• Microsoft рассказала об итогах эксперимента с подводными серверами
• Чем программирование сегодня отличается от программирования 20 лет назад?
• Факторы ранжирования в локальном поиске Google в 2020 году

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