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

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

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

Медиа

• «Новости 512» от CSSSR: WebStorm 2020.3, minmax(), Math.random() в JS, fwdays 2020, Advent of Code, Octoverse и State of CSS, плюс текстовая версия
• Подкаст «Сделайте мне красиво» №51 — Вас взломают, но хотя бы не хомячок
• Подкаст Фронтенд Юность (18+) #165: Сайт, чтобы посрать
• Подкаст «proConf» #80: TSConf 2020
• The Undefined Podcast №29: Vue vs. Svelte с Evan You и Rich Harris

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

• Монолит vs. Микро-фронтенды
• Как правильно создавать HTML-формы: безопасность
• Как Lyft мигрирует более 100 фронтенд микросервисов на Next.js
• Создание сайтов с prefers-reduced-data
• От Jekyll к 11ty
• PWA и AMP: берем лучшее из обоих миров
• PWAdvent — идеальный адвент-календарь для всех, кто увлечен веб-платформой.

• Инструменты
  • WebStorm 2020.3: обновленный интерфейс, поддержка Tailwind CSS и другие улучшения
  • Представляем WMR: Крошечный универсальный инструмент для разработки современных веб-приложений. Все, что вам нужно для создания быстрого сайта Preact, от разработки до прода. TSX, HMR, CSS Modules, модули npm без установки, никаких зависимостей
  • Релиз Snowpack v3.0. Streaming NPM Imports, встроенные аптимизации, роутинг, новый JavaScript API
  • Puppeteer vs Selenium vs Playwright — сравнение скорости
  

• Производительность
  • Безжалостное избавление от Layout Shift на netlify.com
  • Настройка отображения шрифта для медленных подключений
  • Пора попрощаться с Google Fonts
  • Мифическая «быстрая» веб-страница
  • Как BBC World Service перевела 31 миллион еженедельных читателей на изоморфное react приложение и повысила производительность страницы на 83%
  

• Доступность
  • Ваша первая попытка сделать что-либо доступным будет ужасной
  • A11y Advent Calendar
  

• Эффекты
  • Как анимировать SVG с border-image
  • Создание слайдера с эффектом параллакса
  • Создание статичного веб-сайта на Svelte с плавными креативными переходами между страницами
  

CSS

• DRY CSS: Как использовать каждое объявление только один раз
• Подробности об использовании CSS-функции minmax() в Grid-макетах
• Результаты опроса по State Of CSS 2020
• Недостающие браузерные инструменты разработки для Tailwind CSS
• Как сделать так, чтобы sticky-элементы липкие и полноэкранные блоки хорошо работали месте
• Календарь с помощью трех строк CSS
• Как создать диаграмму с помощью CSS
• Как добавить текст в border с помощью базовых элементов HTML
• Нативные соотношения сторон в CSS с помощью aspect-ratio

JavaScript

• ТайпСкрип: Ох уж эта весёлая система типов
• JavaScript исполняется 25 лет: краткая история языка и скидка 50% на WebStorm
• Вот что люди в сфере технологий говорили о JavaScript, когда он дебютировал в 1995 году.
• Старт ежегодного опроса State of JavaScript 2020
• Устали от глупых шуток? Напишите свою собственную JS библиотеку с арифметикой произвольной точности
• Руководство по интеграции Apple Music JavaScript
• js25.org: сайт с историей JS, посвященный его 25-летию

• Теория
  • 5 советов по написанию качественных переменных в JavaScript
  • Множество способов использования Math.random() в JavaScript
  • Освойте навыки современного JavaScript с помощью этого замечательного руководства
  • Incremental vs Virtual DOM
  

• React
  • SEO-оптимизация сайта на React или как добиться конверсии от поисковиков если у вас Single Page Application
  • Все ли вы знаете о useCallback
  • Шпаргалка для интервью по React
  • Новый уровень производительности в React
  • Анонс React Hooks в ретроспективе: 2 года спустя
  • Опасности использования объектов в useState и useEffect ReactJS Hooks
  • Создание приложения для голосования в реальном времени с использованием ReactJS и Ably
  

• Vue
  • Ionic & Vue.js — полное руководство (создание полноценного приложения)
  • Nuxt.js Single Page Application Boilerplate
  • Переведите любое приложение Vue.js всего за 1 час
  

• Angular
  • ngTemplateOutlet: секрет кастомизации
  • Интегрируйте Jest в приложение на Angular и библиотеку
  • Angular 10 Transclusion: когда и зачем оно вам понадобится
  • Преобразование сайта на Ionic/Angular в прогрессивное веб-приложение
  

• Ember
  • The Ember Times — Issue No. 169
  • Ember.js 2020 Tech Talk | coloradoSprings.js Meetup
  • Рок-н-ролл с бандой Ember — Aad Versteden
  

• Libs & Plugins
  • List.js — Идеальная библиотека для добавления поиска, сортировки и фильтров в таблицы, списки и различные элементы HTML.
  • EasyGrid — адаптивная сетка на элементов VanillaJS
  • React-Tensorflow — библиотека React хуков, написанная на Typescript для использования моделей Tensorflow в вашем приложении
  

Браузеры

• Пользуемся офлайн-браузингом, как будто сейчас 1995 год
• Internet Explorer больше не поддерживает Microsoft Teams
• Представлен браузер Beaker 1.0 с P2P-платформой для децентрализованных сайтов
• Chrome 88: цифровые товары, оценка освещения в дополненной реальности и многое другое

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