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

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

Медиа

• Подкаст «Девшахта/Ночной фронтенд» №111: Смешиваем CJS и ESM. Гексагональная архитектура
• «UnderJS Podcast» №15: Плантации, озера и Node.js c Николаем Матвиенко
• Подкаст «Веб-стандарты» №216: Ручной SVG, Puppeteer 2.1 с Firefox, снова Yarn 2, что такое TeamCity, компоненты в Storybook
• Подкаст CSSSR: Новости 512 — Как работают браузеры, новинки GitHub и правила написания тестов
• Repozitorro #36 — Портфолио, или сайт тур-агенства?

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

• Новый фронтенд Одноклассников: запуск React в Java. Часть II
• Исчерпывающий путеводитель по тегу iframe
• SEO 2020: актуальные тренды и подходы
• Инклюзивные компоненты: слайдер
• Как подключать полифилы, только когда они нужны
• Один день из жизни Frontend Product Engineer в Slack
• Что подразумевает разработка Progressive Web Apps (PWA)?
• Angular 9, Ionic 5, React Navigation 5 — Web Dev Update за февраль 2020

• Инструменты
  • Webpack 5 — Asset Modules
  • 11 полезных онлайн-инструментов для разработчиков фронтенда
  

• Производительность
  • Представляем Page Speed ??Benchmarks — новый ресурс для сообщества, занимающегося производительностью
  • Производительная фронтенд архитектура
  • Лучшие практики JavaScript — Производительность
  

• Эффекты
  • Создание галереи изображений с использованием PixiJS и WebGL
  • Где все анимированные SVG?
  • Как создать физическую модель 3D-ткани с помощью Cannon.js и Three.js
  • Очередная подборка креативных интерфейсов «UI Interactions & Animations Roundup #3»
  

CSS

• Понимание CSS Grid: Создание Grid-контейнера
• На пути к отзывчивым элементам
• Google увеличил лимит на пользовательский CSS для AMP
• Понимание CSS Grid: Grid Template Areas
• Styled Components vs. CSS Stylesheets
• Один HTML, разный CSS
• На встречу к отзывчивым элементам. Немного информации о текущем состоянии «Container Queries»
• Chameleonic Header
• Что такое CSS4?
• Как создать более читаемый CSS
• Пока вы не смотрели, CSS-градиенты стали лучше
• CSS свойства object-fit и object-position: Обрезка изображений, встроенных в HTML

JavaScript

• Работаем с двухмерной физикой в JavaScript
• console.log — не часть языка JavaScript
• Новые функции JavaScript в ES2019 (ES10)
• Почему JavaScript съедает HTML
• Анонс Ionic 5!
• UniversalModel — унифицированное управление состоянием для Angular, React, Svelte и Vue

• Теория
  • 5 рекомендаций по написанию качественных стрелочных функций
  • 7 рекомендаций по повышению надёжности JavaScript-кода
  • 4 метода поиска по массивам в JavaScript
  • Как JavaScript реализует объектно-ориентированное программирование
  • Понимание быстрой сортировки в JavaScript
  

• React
  • Погружаемся в работу с children на React
  • Как сделать мобильное приложение с помощью JS. Путь React Native
  • Частые ошибки в React и JavaScript. Алексей Ладыга на канале FrontSpot
  • Хуки React Router
  • Как создавать формы с помощью React легким способом
  • Создать кастомные хуки в React для ваших веб-компонентов
  

• Vue
  • Разработка более быстрых приложений на Vue.js
  • Предварительный просмотр загружаемых файлов с помощью Axios и VueJS
  • Реализация Drag & Drop при загрузке файлов на VueJS
  • Понимание и разработка фильтров в Vue.js
  • Настройка mocking API с помощью Mirage JS и Vue.js
  

• Angular
  • Создание управляемых сервером удаленных тем для вашего приложения на Angular
  • Как использовать *ngIf else в ваших Angular приложениях
  

• Svelte
  • Использование REST API в Svelte
  • Компилятор Svelte: под капотом
  

• Ember
  • The Ember Times — Выпуск 134
  • The Ember Times — Выпуск 135
  • Что такое реактивность?
  • Как переусложнить статическую страницу
  • Что делает хорошую реактивную систему?
  • Три причины для перехода на синтаксис Angle Bracket в Ember Octane
  • JS Party – Episode #114: Octane двигает Ember к подходу HTML-first
  

• Libs & Plugins
  • DotMatrx.js — небольшая js библиотека, которая использует SVG вместо canvas для повышения производительности и удобства
  • esbuild — крайне быстрый JavaScript-бандлер и минификатор
  • plink-plonk.js: вы услышите изменения вашего DOM как различные частоты звука.
  

Браузеры

• Релиз Firefox 73
• Firefox 73, обзор технических деталей от Марата Таналина
• Как я создал свой собственный браузер
• Демистификация браузеров
• Mozilla проиграла браузерные войны. Она все еще думает, что может спасти интернет.

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

• Разбираемся с управлением памятью в современных языках программирования
• GitHub начал тестирование интерфейса командной строки
• Новый проект для удаления артефактов из JPEG
• Три рабочих фреймворка для развития soft skills в ИТ и не только
• 15 трендов 2020 года в дизайне
• 82% уязвимостей в веб-приложениях содержатся в исходном коде

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

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