Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Видеоблог Вадима Макеева, выпуск №25. Свежий взгляд на Gulp: функции и ES-модули
•
Подкаст «Pro Conf» #66: Я Фронтенд — Все про картиночки | Фронтенд как у сына маминой подруги | ApolloClient 3
•
Подкаст CSSSR: Microfrontends, Vue 3 development, any и unknown в TypeScript, почему CSS такой, Vue и тесты
•
Что должен уметь верстальщик, чтобы его все хотели
•
Анонсирован новый раздел в MDN Web Docs — путь обучения для фронтенд разработчиков
•
Новые возможности Node.js 14 — AI, IoT, Assembly и многое другое
•
Достижение баланса между нативными и кастомными селектами
•
Поддержка темного режима на вашем сайте
•
5 мифов о Jamstack
•
Создание прогрессивного веб-приложения и его развертывание
•
Цвета в CSS
•
Как использовать grid-template-area CSS Grid для изменения порядка элементов html в зависимости от размера вьюпорта
•
Изучение Z-Index, используя инструмент визуализации
•
CSS: is () и: where () приходят в браузеры
•
Клевые маленькие хитрости CSS Grid для вашего блога
•
Как обратить порядок пользовательских счетчиков в CSS
•
Grid для разметки, Flexbox для компонентов
•
Эффект складывания журнала на CSS
•
Удивительные вещи, которые CSS может анимировать
•
CSS Houdini
•
CSS Viewport Units: Быстрый старт
•
Очень странные дела: JavaScript
•
Минифицируем приватные поля в TypeScript. Доклад Яндекса
•
10 полезных приёмов для JavaScript-программистов
• JS/ES2020: Optional Chaining and Nullish Coalescing
•
Event listeners and garbage collection
•
Как получить все пользовательские свойства на странице в JavaScript
•
Список из 156 (продвинутых) вопросов о JavaScript, а также ответы на них
•
Понимание ES-модулей в JavaScript
•
Как сравнивать объекты в JavaScript
• Microsoft Edge Canary и Dev теперь позволяют использовать кастомное фоновое изображение для страницы новой вкладки
• В браузере Brave выявлена подстановка реферального кода при открытии некоторых сайтов
• В сборках Google Chrome Canary уже можно активировать функцию Live Caption для преобразования речи в текст
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript | Браузеры
Медиа
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
Веб-разработка
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- Инструменты
• (Очень простое) Руководство для начинающих по WEBPACK
•µcdn: a live, bundlerless, alternative
•starred_search — поиск по ключевым словам в отмеченных GitHub-репозиториях
- Доступность
•Оптимизация навигации с помощью клавиатуры с помощью tabindex и ARIA
•Устаревшие приложения и Accessibility
- Эффекты
•Airplanes. Клевая демонстрация скролл-анимации с помощью ScrollTrigger, нового плагина от GreenSock
•Как создать эффект движения фоновой сетки изображений при наведении
•Визуализация списка женщин-лауреатов Нобелевской премии в виде кристаллов в 3d с использованием Vue, WebGL, three.js
•TitleRun — игра, которая существует только в строке заголовка вкладки браузера
CSS
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
JavaScript
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• JS/ES2020: Optional Chaining and Nullish Coalescing
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- React
•useSWR – моя новая любимая библиотека React
•Уязвимости безопасности в React, которые вы никогда не должны игнорировать
•Компоненты высшего порядка в React
•Recoil.js — новая, лучшая библиотека управления состоянием для React
•Создания генератор случайных цитат на React
•Оптимизация производительности React: часть I , часть II
•Как настроить Redux с React (2020)
•Что такое Storybook и как его использовать для создания библиотеки компонентов в React?
•Практическое руководство по интеграции Google Maps в React
•Как создать ecommerce сайт с помощью React
•5 альтернатив React Redux в 2020 году
- Vue
•Работа с данными на границе Vue.js-приложения
• EVAN YOU: Создание Vue 3
•Почему я бросил Vue ради React?
•Создание Instagram с использованием TypeScript, Node, Express и Vue — Часть 1
•Awesome Vue 3 — курируемая подборка ресурсов, посвященных Vue 3
•Изучение Vue-Multiselect
- Angular
•Автоматические адаптивные изображения в приложениях Angular
•10+ лучших статей для изучения Angular в 2020 году
•Пре-рендеринг в Angular 9
- Ember
•The Ember Times — Issue No. 152
•Как улучшить доступность вашего существующего приложения на Ember
- Libs & Plugins
•jsgrids — подборка JavaScript библиотек для работы с таблицами данных
•Josh.js — JS библиотека для анимации содержимого при прокрутке страницы.
•johnny-five — JavaScript фреймворк для робототехники и IoT
Браузеры
• Microsoft Edge Canary и Dev теперь позволяют использовать кастомное фоновое изображение для страницы новой вкладки
• В браузере Brave выявлена подстановка реферального кода при открытии некоторых сайтов
• В сборках Google Chrome Canary уже можно активировать функцию Live Caption для преобразования речи в текст
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.