Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | 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.
Автор: alexzfort
