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

Медиа

•

Подкаст «Веб-стандарты» №215: Перфоманс сначала или потом, воркеры, офлайн, без JS, чистый CSS и грязный результат
• podcast

Подкаст «Фронтенд Юность (18+)» №124: Истории из параллельной реальности
• podcast

UnderJS Podcast #14 — UnderHTML — пилотный выпуск
• podcast

Подкаст CSSSR: Новости 512 — Встреча TC39, архивация open source для потомков, переход с Go на Rust в Discrord
• video

Февральский митап SPB Frontend (2020)

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

•

ResizeObserver — новый мощный инструмент для отзывчивого веба
• habr

Профессия: фронтенд-разработчик
• habr

Работаем с аудио: загрузка файлов, звук, прогресс, визуализация
• habr

Node.js, Tor, Puppeteer и Cheerio: анонимный веб-скрапинг
• habr

Как переписать фронтенд нагруженного проекта и не потерять главного
• Откуда у target=”_blank” нижнее подчеркивание
•

Как стать фул-стек веб-разработчиком в 2020 году
•

11 популярных заблуждений о микрофронтендах
• video

Что изучить в 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. Бред Фрост делится своим опытом
• video

Почему веб-браузеры бесплатны

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

• Бьёрн Страуструп: что в C++ надо было сделать по-другому, зачем его учить и совет начинающим программистам
• 15 лет Картам Google: новый логотип и приложение
•

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

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

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

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