Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | JavaScript | Браузеры
Медиа
• Девшахта-подкаст #112: Артём Кобзарь про собственную альтернативу TS и многое другое
• Подкаст «Веб-стандарты» №217: Firefox 73, Angular 9, Container Queries, Web We Want, CSS4, JS поедает HTML, DOM Reflow
• Подкаст «Фронтенд Юность» (18+) #126: Лавка для фронтендера
• 9 видео с WebAssembly Summit 2020
• 4 видео с MoscowJS 47
• Материалы с казанского митапа по фронтенду: Phoenix LiveView, фронтопс, JSON:API
Веб-разработка
• Отключенные контролы в формах и как с ними работать
• Полное руководство по дата-атрибутам
• Сделайте это, чтобы улучшить загрузку изображений на вашем сайте
- Инструменты
• Современная сборка 2020 для frontend. Gulp4
• Мои любимые инструменты разработчика Chrome
• jest vs jasmine: основные отличия
• Большое руководство по командам консоли
• destiny — Prettier для файловой структуры
- Веб-компоненты
• Опыт интеграции веб-компонентов на сайт Леруа Мерлен
• Все способы создания веб-компонентов
• Веб-компонент для блока кода
- Производительность
• Что такое производительность веб-приложений?
• Устранение утечек памяти в веб-приложениях - JAMstack
• JAMstack — это в основном брендинг?
• J в JAMstack не означает React (или Angular, Vue, Svelte и т.д.)
- Доступность
• Понимание правил и соотношений цветового контраста в вебе
• Основные ошибки доступности в веб-разработке
CSS
• Разбираемся с переменными в CSS на реальном примере
• Фиксированные заголовки с якорными ссылками перехода? Решение — scroll-margin-top
• Анимация изменений SVG Path в CSS
• Стилизация старого доброго элемента Button
• Добавление цветов фона в SVG с помощью элемента «rect»
• Let’s Define CSS 4. Обсуждение в csswg-drafts на github, где народ пытается определить, что же такое CSS 4
• Создаем диагональные раскладки по версии 2020 года
• Эффект частиц пыли на CSS
JavaScript
• Молчание вентиляторов. Google Colab, Javascript и TensorflowJS
• Создайте полнофункциональную карусель в стиле Tinder на ванильном JavaScript
• Python и JavaScript: радости утиной типизации
- Теория
• 7 трюков с Rest и Spread операторами при работе c JS объектами
• Новые функции в ES2020
• 5 cекретных функций JSON.stringify ()
• 4 способа обмениваться переменными в JavaScript
• Полное руководство по советам, хитростям и функциям JavaScript, которые вы должны знать
- Svelte
• Пришло ли время забыть о React и перейти на Svelte?
• Svelte-grid — draggable and resizable grid layout с отзывчивыми брейкпоинтами для Svelte.
• Медленный код ненавидит его! Оптимизация веб-приложения от 1 до 60 кадров в секунду
• Разблокировка реактивности с Svelte и RxJS
• Если бы у Svelte и RxJS был ребенок
• Не пора ли нам забыть о React и запрыгнуть в вагон со Svelte?
- React
• 10 React-компонентов на все случаи жизни
• Используем localStorage в React
• Максимизация переиспользования кода в React
• Как использовать HTML Drag-and-Drop API в React
• Отладка проблем с производительностью в React
• Полное руководство для начинающих по React Router (включая Router Hooks)
- Vue
• Vue.js Templates — модификаторы и сокращения
• The Mindset of Component Composition в Vue
• Как создавать компоненты Vue в WordPress теме
• Переход от Vanilla JavaScript к переиспользуемым компонентам Vue
• Когда использовать новый Vue Composition API (а когда нет)
• Визуализация данных с Vue и D3
• Реактивность: Vue 2 vs Vue 3
- Angular
• Практическое руководство по Angular: маршрутизация и обработка событий
• Angular a11y: 11 советов, как сделать ваши приложения более доступными
• Производительность селекторов NgRx
• Angular 9: Lazy Loading Components
- Ember
• Что делает реактивную систему хорошей?
• Переход от React к Ember в 2020
• The Ember Times — Issue No. 136
• Использование WebAssembly в Ember.js (Rust + wasm-pack)
• Эволюция Ember в Intercom
• 2020 Ember.js Community Survey, ежегодный опрос
- Libs & Plugins
• Удаление людей из сложных фонов в режиме реального времени с помощью TensorFlow.js в браузере
• Удобное TensorFlow.js API для работы с ML на клиенте
Браузеры
• Mozilla проиграла в войне браузеров, но всё ещё считает, что может спасти интернет
• 2019-й по версии Chrome
• Дорожная карта по разработке Edge обещает синхронизацию истории и добавление поддержки Linux
• Chrome 81 принесёт глобальную поддержку платформ WebXR и Web NFC
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: alexzfort