Дайджест свежих материалов из мира фронтенда за последнюю неделю №438 (19 — 25 октября 2020)

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

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

Медиа

• Подкаст «Сделайте мне красиво», Выпуск №46: Typescript и вёрстка решили все свои проблемы (а ты — нет)
• Подкаст «Фронтенд Юность (18+)» #160: Чёрные кардиналы фронтенда Pro Unlimited
• Подкаст CSSSR: MobX or Redux, Flexbox or CSS Grid, Angular DI, Lighthouse, Declarative Shadow DOM, MDN Web DNA 2020 Pro Unlimited
• Подкаст IT Way: Про фронтенд для начинающих, как работает (и работают в) Aviasales. Episode 46 от 24.10.2020

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

• Веб-компоненты: руководство для начинающих
• Порядок выполнения скриптов в HTML. Тег script и атрибуты async, defer, module, nomodule и src
• Руководство по различным типам хранилища в браузере
• Атрибут lang: браузеры лгут, сладко лгут.
• Более разумные способы создания HTML-структуры с глубокой вложенностью

• Инструменты
  • Настройка Webpack 5 с нуля
  • Что нового в DevTools (Microsoft Edge 87)
  • Добавление PWA (прогрессивных веб-приложений) Chromium Edge в Microsoft Store
  

• Доступность
  • Руководство по обеспечению доступности веб-контента (WCAG) 2.1 переведено на русский язык
  • Самые полезные инструменты и методы тестирования доступности
  • Управление фокусом и inert
  

• Эффекты
  • Подборка креативных сайтов «Inspirational Websites Roundup #19»
  • Концепт слайдера с помощью clip-path анимации
  

CSS

• State of CSS 2020. Ежегодный опрос о текущем состоянии CSS с воможностью оценить свой уровень знаний по итогам его заполнения
• Как я структурирую CSS
• Выбор CSS макета — Grid или Flexbox?
• Создание CSS Shapes с помощью эмодзи
• Нестандартное мышление с помощью CSS Grid
• CSS в 3D: учимся думать кубами, а не прямоугольниками
• «Универсальный селектор CSS работает медленно, и его следует избегать» — еще одна ложь!
• Переменные в Sass, в CSS, и семантические переменные темы
• Дизайн отзывчивой высоты

JavaScript

• Использование «глобального» await в JavaScript
• Варианты объектно-ориентированного программирования (на JavaScript)
• Client-Side Rendering vs Server-Side Rendering vs Static-Site Generation
• Решение глупой проблемы с JavaScript
• Observer API в JavaScript — часть II
• 6 передовых функций JavaScript, которые вы можете использовать сегодня
• Как создать прогрессивно улучшенный компонент аккордеона с помощью vanilla JS

• Релизы
  • Выпуск серверной JavaScript-платформы Node.js 15.0
  • Релиз Create React App 4.0
  • Релиз Babel 7.12.0 TypeScript 4.1, strings as import/export names, и class static blocks
  

• React
  • Базовый формат моков React компонентов
  • Rockpack — комплексное решение, позволяющее создавать каркас React приложения в стиле create-react-app и существенно сокращающее время настройки проекта
  • Начало работы со Styled-Components в React
  • Что нового в Create React App 4
  • React v17.0
  • Начало работы с Next.js
  

• Vue
  • Как реализовать динамическую диаграмму для Vue на основе SVG
  • 10 быстрых вопросов для собеседования по Vue
  • Что Vue.js делает лучше, чем React
  

• Angular
  • Как получить максимальную отдачу от компилятора TypeScript — Angular
  • Angular — обмен данными между шаблонами с помощью function-like сегментов HTML
  • Понимание @ngrx/component-store selector debouncing
  

• Ember
  • The Ember Times — Issue No. 166
  • Релиз Ember 3.22
  • Развертывание проекта на стейджинге с помощью ember-cli-deploy
  • React Hooks и Ember.js
  

• Svelte
  • Раскрытие возможностей Svelte Actions
  • Интернационализируйте свое приложение на Svelte с помощью реактивных хранилищ
  

• Libs & Plugins
  • Прекратите использовать Moment.js для дат и времен в JavaScript
  • nsfwjs — Простая JavaScript библиотека, которая поможет вам быстро идентифицировать непристойные изображения на клиентской стороне
  • Lucia — крошечная JS библиотека (совместимая с UMD), которая может заменить jQuery и приложения на ванильном JavaScript.
  • fingerprintjs — Создает идентификатор посетителя веб-сайта по цифровому отпечатку браузера
  

Браузеры

• Релиз Firefox 82
• Microsoft Edge для Linux — бета-версия браузера стала доступна всем желающим
• В браузере Chrome появилась функция поиска по открытым вкладкам
• Теперь JScript в Internet Explorer можно отключить

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

• Photoshop получил множество ИИ-функций: умная замена неба, продвинутые фильтры и прочее
• Всюду синие гиперссылки и колонки: как выглядели сайты Apple, Google и Amazon в 1999 году
• Как в Cloudflare генерируют криптоключи с помощью «стены энтропии» из 100 лава-ламп
• Facebook создала ИИ, который сможет переводить тексты между 100 языками напрямую


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