https://habr.com/ru/post/475262/

• Разработка веб-сайтов
• CSS
• JavaScript
• HTML

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

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

Медиа

• Подкаст «Фронтенд Юность»: #114 Тёплый выпуск с Дэном Абрамовым
• Подкаст «CSSSR»: Новости 512 — TypeScript 3.7, React Concurrent Mode, GraphQL API, Gitlab и геополитика
• Repozitorro #33 — Самое полное ревью вёрстки

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

• Почему использовать сторонний CSS и JS на своем сайте опасно
• Превращение вашего существующего приложения в прогрессивное веб-приложение
• Первые 5 советов по созданию безопасных (веб) приложений
• Apple пытается убить веб-технологии
• GraphQL: The Documentary (Русская версия)

• Инструменты
  • Лицемерие google. PageSpeed Insights
  • Prettier 1.19: долгожданная опция Vue, TypeScript 3.7 и новые функции JavaScript
  • Как полностью оптимизировать Webpack 4 Tree Shaking
  

• Производительность
  • «Шакал»: сжимаем фронтенд
  • Современная загрузка скриптов
  • Почему нагрузочное тестирование и тестирование производительности должны выходить за рамки проверки времени отклика
  • Оптимизация изображений для пользователей с низкой скоростью сети
  

• Доступность
  • Оформляйте стили наведения, фокуса и активного состояния по-разному
  • Помимо автоматизированного тестирования доступности: шесть вещей, которые я проверяю на каждом своём сайте
  • Что я узнал о доступности в SPA
  • aria-label не переводится
  • Как доступность становится все более важной в веб-разработке
  

CSS

• А есть ли случайные числа в CSS?
• Улучшите свой CSS с помощью этих 5 принципов
• Не усложняйте масштабируемый CSS
• Переменные CSS с инлайновыми стилями
• Некоторые вещи, которые вы должны знать при работе с viewport-единицами
• Показываем кнопку поиска, когда поле поиска не пусто
• Учебное пособие по CSS grid: 13 советов и приемов, которые следует знать веб-разработчику
• Сила CSS-процессоров в разработке веб-приложений
• Синтаксис с двумя значениями display (и иногда с тремя)
• Трюк с анимацией точки на букве “i”
• 8 CSS-фильтров для изображений с примерами кода
• PureCSS Lace: воссоздание портрета на чистом CSS

JavaScript

• Типизация REST API для фронтенд разработчика
• Axios vs Fetch — что использовать в 2019
• Лучшие практики Node.js
• Грядущие новые функции JavaScript, о которых вы должны знать, если вы используете JavaScript каждый день

• Теория
  • Функциональное программирование с точки зрения EcmaScript. Чистые функции, лямбды, имутабельность
  • Лексическое окружение (LexicalEnvironment) и Замыкание (Closures) в EcmaScript
  • Поймут даже дети: простое объяснение async/await и промисов в JavaScript
  • Чем прототипное наследование отличается от классического?
  • Что такое Генераторы в JavaScript
  • Что такое super() в JavaScript?
  • Разрываем цепочки с пайплайнами в современном JavaScript
  • Атрибуты свойств объекта в JavaScript
  

• React
  • Использование i18n с Next.js & React context API
  • React Query — Хуки для извлечения, кэширования и обновления асинхронных данных в React
  • Методы жизненного цикла, хуки, ожидания: что лучше всего выбрать в React?
  • 3 способа создать свою собственную библиотеку компонентов в React
  • Экспериментируем с новым режимом Concurrent в React
  • 39 продвинутых ответов на вопросы собеседования по React, которые вам следует сегодня уточнить
  

• Vue
  • Готовый к продакшену Vue SSR: 5 простых шагов
  • Автоматический рутинг в приложениях на Vue.js
  • Обработка форм во Vue.js
  

• Angular
  • Полная информация об атрибутах и структурных директивах в Angular
  • Google Maps теперь является компонентом Angular
  • 26 лучших вопросов на собеседовании по Angular 8 в 2020
  

• Ember
  • Вызов Angle Bracket для вложенных компонентов (3.10)
  • EmberFest 2019
  

• Libs & Plugins
  • hybrids.js — декларативные и функциональные веб-компоненты
  • tenko — 100% совместимый со спецификацией парсер JavaScript ES2020, написанный на JS
  • Proton: легкая JS-библиотека для анимации частиц
  • cashify: библиотека для конвертации валюты, наследник money.js
  

Браузеры

• В ночных сборках Firefox появилась поддержка HTTP/3
• Релизная версия Microsoft Edge на Chromium будет поставляться без поддержки ARM64, синхронизации истории и расширений
• В следующем году Firefox и Chrome начнут скрывать всплывающие уведомления
• Подготовка ваших сайтов к новому Microsoft Edge

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

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