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

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

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

Медиа

• Подкаст «Веб-стандарты» №231: MS Build, Chrome 83, Lighthouse 6, быстрый Google Fonts, перфоманс Notion, Angular по-русски
• Подкаст CSSSR: Deno 1.0, TypeScript 3.9, React Europe online, browser storages, Web Vitals, Regex, проблемы SPA
• Подкаст CSSSR: Remote Talk #13 — Павел Малышев, Нижний Новгород, Svelte, Smart TV, IT-сообщества Нижнего Новгорода

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

• Миф семантического веба
• О хранении JWT токенов в браузерах
• Что нового в Lighthouse 6.0
• Онлайн-шпагалка по SEO

• Производительность
  • Анализ производительности CSS-анимаций
  • Case study: анализ производительности приложения Notion
  • Как сделать производительность видимой с помощью GitLab CI и магии GitLab Artifacts
  • Самый быстрый способ подключения Google Fonts
  

• Доступность
  • Disclosure Widgets: элементы для скрытия/отображения контента
  • Искусственный интеллект и доступность — GAAD 2020 — Hello A11y
  • 5 шагов к более доступному сайту
  

• Эффекты
  • Подборка креативных сайтов «Inspirational Websites Roundup #15»
  • Давайте сделаем одну из тех модных скролл-анимаций, используемых на страницах продуктов Apple
  • Создание эффекта сияющих звезд в React
  

CSS

• Интересные CSS-находки в дизайне Twitter
• Прокачиваем свои CSS-анимации
• CSUN 2020: свойства CSS Display vs семантика HTML
• Что такое Tailwind CSS и как я могу добавить его на свой веб-сайт или в приложение на React?
• Размышления о промежуточных состояниях в адаптивных трансформациях
• Бесконечно прокручиваемое вертикальное меню
• Безопасное/небезопасное выравнивание с CSS flexbox
• Использование calc для определения оптимальной высоты строки
• Первые шаги в возможной реализации Masonry Layout в CSS
• stylemug — Быстрая css-in-js библиотека, которая извлекает atomic CSS в .css файл

JavaScript

• Хватит импортировать JavaScript-пакеты целиком
• Гексагональная архитектура для Node.js-приложения, или Как сделать код более поддерживаемым
• JavaScript Map получает upsert!
• Третья эпоха JavaScript
• Избегайте тяжелых Babel-преобразований, не используя (иногда) современный JavaScript
• Deno vs. Node.js — самые важные отличия
• Работа над ES2020 завершена. И вот почему я возбужден
• Создание файлов на JavaScript в вашем браузере
• Обнаружение неактивных пользователей с помощью Idle Detection API
• Блог dropbox: Великая миграция с CoffeeScript на Typescript 2017-го года

• Релизы
  • Релиз Electron 9.0.0, платформы создания приложений на базе движка Chromium
  • Node v14.3.0 (Current)
  

• Теория
  • Лучшие практики итерации массивов в JavaScript
  • DOM diffing с помощью ванильного JS
  • Понимание Machines: открытый стандарт для JavaScript функций
  • Понимание ленивой загрузки в популярных фронтенд фреймворках
  • Вот что вы должны изучить после JavaScript
  • Разбор Javascript-стайлгайда от Google (часть 2)
  

• React
  • Я просмотрел все 27 докладов с React Europe, так что вам уже не нужно это делать
  • ️ Reparenting теперь возможен в React
  • Реализация разделения кода в React
  • Модульное тестирование компонентов React с Cypress
  

• Vue
  • Управление состоянием (state) с помощью Composition API
  • Простые директивы Vue, которые сэкономят ваше время
  • Расширьте возможности приложения на NuxtJS с помощью модуля @nuxtjs/content: пишем в content / и извлекаем файлы Markdown, JSON, YAML и CSV через API в стиле MongoDB, выступающего в качестве Git-based Headless CMS
  • Стоит ли изучать Vue 2 или просто подождать выхода Vue 3?
  • Руководство по обновлению Vue 3
  • Представляем Vue Formulate — Самый простой способ создания форм с помощью Vue
  • Vue Class Store — универсальное хранилище Vue, куда вы записываете один раз и используете везде
  • Разбираемся с аутентификацией с помощью Vue, используя RESTful API
  

• Angular
  • Как вызвать утечку памяти в Angular-приложении?
  • 6 способов динамической стилизации Angular компонентов
  • Мне пришлось выучить Angular 8 за 24 часа, и вот как
  • DOM Манипуляции в Angular
  

• Ember
  • The Ember Times — Issue No. 149
  

• Svelte
  • Краткое введение в Svelte 3
  • Drag and drop с помощью Svelte, используя svelte-dnd-action
  • Svelte, почему столько хайпа?
  

• Libs & Plugins
  • Alpine.js — продолжаем знакомство
  • Revealjs, популярный движок для создания презентаций, обновился до версии 4.0
  • ts_ci — Настройка CI для TypeScript проектов с помощью GitHub Actions.
  • ac-colors — реактивная JavaScript библиотека, которая может свободно конвертировать между RGB, HSL, HEX, XYZ, LAB и LCHab, а также обрабатывать генерацию случайных цветов и вычислять коэффициент контрастности
  

Браузеры

• Состоялся релиз стабильной версии Microsoft Edge 83.0
• 70% проблем с безопасностью в Chromium вызваны ошибками при работе с памятью
• Релиз Chrome 83
• Google Chrome вскоре получит крупное обновление безопасности с переработанным разделом и ворохом новых инструментов
• Браузер Microsoft Edge получит контекстный поиск и интеграцию с Pinterest
• Основной жизненный цикл IE11 окончится в октябре 2020

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

• Викторина «Почему это так называется?»: проверьте, знаете ли вы, как появились известные айтишные названия
• Microsoft официально запустила новый Windows Terminal
• Вкратце: приложение Microsoft Lists, контекстный поиск в Edge и другие анонсы Microsoft 365 на конференции Build 2020
• GitLab проверила своих сотрудников: на фишинговые уловки попался каждый пятый

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

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