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

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

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

Медиа

• Подкаст «Веб-стандарты» №215: Перфоманс сначала или потом, воркеры, офлайн, без JS, чистый CSS и грязный результат
• Подкаст «Фронтенд Юность (18+)» №124: Истории из параллельной реальности
• UnderJS Podcast #14 — UnderHTML — пилотный выпуск
• Подкаст CSSSR: Новости 512 — Встреча TC39, архивация open source для потомков, переход с Go на Rust в Discrord
• Февральский митап SPB Frontend (2020)

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

• ResizeObserver — новый мощный инструмент для отзывчивого веба
• Профессия: фронтенд-разработчик
• Работаем с аудио: загрузка файлов, звук, прогресс, визуализация
• Node.js, Tor, Puppeteer и Cheerio: анонимный веб-скрапинг
• Как переписать фронтенд нагруженного проекта и не потерять главного
• Откуда у target=”_blank” нижнее подчеркивание
• Как стать фул-стек веб-разработчиком в 2020 году
• 11 популярных заблуждений о микрофронтендах
• Что изучить в 2020 году разработчику? Отвечает Илья Климов

• Инструменты
  • Средства консоли Chrome, которыми вы, возможно, никогда не пользовались
  • Playwright — драматургия от Microsoft и новый инструмент для тестирования
  • Хоткеи для VS Code: гифки с демонстрацией и шпаргалка
  • 5 полезных функций в Chrome DevTools
  • Релиз новой версии PWABuilder
  

• Доступность
  • Чему меня научил год изучения и преподавания доступности
  • Быстрые практики доступности для мобильных и веб-приложений
  • Создание доступного контрола автозаполнения
  • Могут ли браузеры автоматически решить проблемы с доступностью?
  

• Эффекты
  • Эффекты перетаскивания изображений
  • Подборка креативных веб-демо «Awesome Demos Roundup #13»
  

CSS

• CSS-2020: очередной «снимок состояния» или спецификация №1 современного CSS?
• Старый CSS, новый CSS
• CSS4 — плохая идея
• Learn CSS Positioning. Интерактивное руководство по позиционированию в CSS
• Создание макета коллажа с помощью CSS Grid и Clip-path
• Выборка элемента с не пустым атрибутом
• Магические флип-карты: решение известной проблемы с размерами
• Использование CSS-свойства line-height для улучшения читабельности
• Перемещение (или нет) с помощью CSS Motion Path
• Быстрый и легкое внедрение темного режима с помощью пользовательских свойств CSS
• Реализация темного режима с TailwindCSS
• Пользовательские стили для инпутов с помощью современных функций CSS
• Neumorphism.io — генератор CSS кода для теней
• Почему вы должны использовать HSL цвета в CSS?
• Как я воссоздал камеру Polaroid с помощью одних CSS-градиентов
• Светлая и темная фав-иконка на SVG с использованием медиа-функции CSS prefers-color-layout
• Создание треугольника Серпинского одним div-ом

JavaScript

• 70 вопросов по JavaScript для подготовки к собеседованию
• Что может индексировать Google? SEO JavaScript тесты
• 20+ веб-проектов на Vanilla JavaScript
• Форматирование дат в JavaScript с помощью Intl.DateTimeFormat
• Electron 8.0.0 вышел в релиз
• Небольшие функции ECMAScript, которые очень помогают
• Понимание спецификации ECMAScript, часть 1

• Svelte
  • Svelte: знакомимся с Действиями
  • Создание редактируемой веб-страницы с помощью электронных таблиц Google и Tabletop.js
  • Знакомимся с Svelte, новым фреймворком на районе
  • Elm vs. Svelte
  • Svelte с точки зрения разработчика React: Основы
  

• React
  • 12 лучших и простых практик в React, которых стоит придерживаться в 2020 году
  • Как создавать карты с помощью React и Leaflet
  • Создавайте потрясающие анимации в React
  • Постепенное использование TypeScript в вашем проекте на React
  • В React неправильная абстракция убивает эффективность
  • Подводные камни чрезмерного использования React Context
  • Советы по повышению уровня ваших навыков в JavaScript и React
  

• Vue
  • Индикатор хода загрузки файла с Axios и VueJS
  • Создание более быстрых приложений с помощью Vue
  • Лучшие 10 книг по Vue JS, которые вы должны прочитать
  • Создание устойчивых энтерпрайз приложений с помощью Vue
  

• Angular
  • Angular 9 теперь доступен — Ivy прибыл
  • 10 полезных функций Angular, которые вы упускали
  • Как сделать пошаговый гайд вашего приложения (если ваш проект на Angular)
  • Angular: Интеграционное тестирование (Shallow testing)
  • Главные причины медленной работы Angular-приложений
  • 9 вещей, которые я узнал, создавая одно приложение на Angular и React
  • Обновление до Angular 9 — в течение 10 минут
  • Angular 9 — Что нового? Что изменилось? Обзор от Maximilian Schwarzmüller
  

• Ember
  • Прототипирование приложений с Ember Octane: за кулисами
  • Предупреждение о потере несохраненных изменений в Ember Octane
  • The Ember Times — Issue No. 134
  

• Libs & Plugins
  • Sharect — легкая JS библиотека, позволяющая пользователям делиться выделенным текстом в социальных сетях и браузерах (как на Medium)
  • Вам не нужен Moment.js. Список функций, которые вы можете использовать для замены moment.js + ESLint Plugin
  • Baretest — Чрезвычайно минималистичная альтернатива Jest
  

Браузеры

• Вышел браузер Chrome 80 с новшествами в обработке куки, которые могут нарушить работу сайтов
• Скоро Chrome будет блокировать навязчивую видеорекламу и загрузки через HTTP
• В мобильный браузер Firefox Preview добавлена поддержка дополнений
• 8 браузеров на базе Chromium: не Google Chrome единым
• Переход на Firefox. Бред Фрост делится своим опытом
• Почему веб-браузеры бесплатны

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

• Бьёрн Страуструп: что в C++ надо было сделать по-другому, зачем его учить и совет начинающим программистам
• 15 лет Картам Google: новый логотип и приложение
• Как коронавирус повлиял на скорость интернета в Китае
• Что такое мини-аппы в WeChat и как с их помощью вырастить свой ecommerce-проект
• Робохроники ИИ: чат-бот от Google, фильм братьев Люмьер в 4К и алгоритмы на страже Дня сурка
• Полный провал: 10 эпических аварий и отключений дата-центров

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

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