Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Веб-стандарты» №237: Firefox 78, новинки V8 8.4, интересное с Web.Dev Live, сравнение WebP и JPEG, небезопасные API
•
Подкаст CSSSR: web.dev LIVE, React Testing Library, тёмные века веба, производительность, релизы NodeJS и RoR
•
Видеоблог Вадима Макеева: 28. Автотесты и деплой на GitHub Actions: npm-скрипты, EditorConfig и настройка ssh-ключа
•
Я.Субботник по разработке интерфейсов 2020
•
Numl – Альтернативный язык разметки и стилизации для веб
•
Советы и хитрости NPM
•
Сделайте свои сайты быстрыми, доступными и безопасными с помощью Google
•
Обнаружение мобильных браузеров без анализа строки user agent: Client Hints
•
ARIA Grid как анти-паттерн
•
Вашему SPA не нужен роутер
•
Что нового в инструментах для работы со скоростью загрузки
•
Motion Path: введение в современные анимации
•
Малоизвестные CSS-свойства
•
Выравнивание логотипов средствами CSS
•
Atomizer vs Minimalist Notation (MN)
•
Принцип цикады, пересмотренный с переменными CSS
•
Порядок отрисовки в CSS
•
Десять современных однострочных CSS-разметок
•
Новости CSS за июль 2020
•
Отображение текущего шага с помощью CSS Counters
•
Что такое специфичность CSS?
•
Сила адаптивных суффиксов в именах классов
•
Глубокое погружение в веб-шрифты
•
Как определить почтовый клиент стилями
•
Управление зависимостями JavaScript
• Реализуем идеальную аутентификацию в вашем JS-приложении
• Изучаем и используем Composition в JavaScript и TypeScript
•
Готовы ли мы заменить Lodash?
•
Как парсить URL в JavaScript: hostname, pathname, query, hash
•
Полное руководство по оператору нулевого слияния в ES2020
•
Объяснение Debounce — Как заставить ваш JavaScript ждать, пока пользователь закончит набирать текст
•
Отладка SEO проблем в JavaScript
•
Магия WebPush в Mozilla Firefox. Взгляд изнутри
• В Firefox 80 реализована настройка для перенаправления с HTTP на HTTPS
• Google Chrome будет загружать страницы быстрее и эффективнее расходовать заряд батареи
•
Тестирование Firefox более эффективно с машинным обучением
< Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
Медиа | Веб-разработка | CSS | JavaScript | Браузеры
Медиа
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
Веб-разработка
•
![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)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
CSS
•
![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)
•
![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)
JavaScript
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Реализуем идеальную аутентификацию в вашем JS-приложении
• Изучаем и используем Composition в JavaScript и TypeScript
•
![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)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
- React
•React-разработка: 6 путей к профессиональному росту
• Типичные ошибки джунов, использующих React
•Создание блога с помощью Next.js
•4 способа рендера больших списков в React
•Next.js: Server-side Rendering vs. Static Generation
•Четыре способа получения данных в React
- Vue
•Vue.js для начинающих, урок 1: экземпляр Vue
•Vue.js для начинающих, урок 2: привязка атрибутов
•Модульность во Vue.js и Vuex
• Создание компонента Vue с использованием TDD: краткое введение
•Создание небольших десктопных приложений с Tauri и Vue.js
•CSS-переходы в Vuejs и Nuxtjs
- Angular
•Правильное использование Angular: Template Syntax
•Формы (Angular Reactive)
•Ng v8 to v9
- Ember
•Переиспользование поведение DOM в React vs Ember
•The Ember Times — Issue No. 155
•Дорожная карта Ember 2020
- Svelte
•Динамические CSS-классы в Svelte
- Libs & Plugins
•Financial — финансовая TypeScript / JavaScript библиотека без зависимостей
•Лучшие 21 JavaScript библиотек и фреймворков для работы с 3D
•shareon — легкие и стильные кнопки для шаринга в социальных сетях
•Malina.js: создание веб-приложения без фреймворка на клиентской части
Браузеры
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• В Firefox 80 реализована настройка для перенаправления с HTTP на HTTPS
• Google Chrome будет загружать страницы быстрее и эффективнее расходовать заряд батареи
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
< Дайджест за прошлую неделю
Материал подготовили dersmoll и alekskorovin
aio350
Спасибо за подборку