Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Фронтенд Юность (18+)» #148: Vue, React, Svelte, Typescript, PWA
•
Подкаст CSSSR: Vue 3 RC, релизы NodeJS, Svelte + TS, TSDX, V8 8.5, JS будущего, результаты опроса от JetBrains
•
Подкаст «Сделайте мне красиво», Выпуск №39: Привет, Svelte! Пока, moment.js!
•
Хватить это верстать дважды или 2-х сторонняя связь между дизайном и кодом
•
Локальное хранилище или куки? Безопасное хранение JWT на клиенте
•
О роли фронтенд-разработчика
• Предстоящие изменения в WordPress 5.5, про которые должны знать разработчики тем
• Подготовка к mobile-first-индексации — с учетом дополнительного времени
•
Ренессанс No-Code для веб-разработчиков
•
this vs that: объяснение разницы между похожими понятиями в веб-разработке
•
Визуализация работы CORS
•
Нововведения CSS – Июль 2020 (Gap, Aspect ratio, Masonry, Subgrid)
•
CSS и множественный фон
•
Визуальное сравнение 13 CSS-фреймворков
• Генератор цветовых тем
•
Получение максимальной выгоды от вариативных шрифтов в Google Fonts
•
Анализ CSS с помощью CSS OM: Получение поддерживаемых свойств, сокращений и других деталей
•
PostCSS плагин для исправления бага с 100vh в iOS
•
Что означает 100% в CSS?
•
Несколько CSS комиксов
•
Использование CSS для обнаружения и переключения тем сайта в соответствии с системными настройками
•
Хотите стать лучше в написании кода? Научите кого-нибудь CSS.
•
Жирный текст при наведении… без сдвигов контента
•
Почему CSS Grid Layout не заменит сетку фреймворка
•
Пишем свой dependency free WebSocket сервер на Node.js
•
style9: компилятор CSS-in-JS, основанный на идеях stylex от Facebook
•
Внедрение современного JavaScript в библиотеки
•
Хватит дублировать константы в JS и CSS
•
Разработка и развертывание микро-фронтендов с Single-Spa
•
Chrome (чуть не) снёс расширение, над которым мы работали три года, и не хочет говорить за что
• Релиз Firefox 79, подробности для веб-разработчиков от Марата Таналина
• Защищённые браузеры: выбираем лучший
• Новый браузер Microsoft Edge аварийно завершал работу, если поисковиком по умолчанию в нём был установлен Google
• Android-версия Chrome позволит подтверждать платежи с помощью биометрической аутентификации
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.

Медиа | Веб-разработка | CSS | JavaScript
Медиа
•
Подкаст «Фронтенд Юность (18+)» #148: Vue, React, Svelte, Typescript, PWA•
Подкаст CSSSR: Vue 3 RC, релизы NodeJS, Svelte + TS, TSDX, V8 8.5, JS будущего, результаты опроса от JetBrains•
Подкаст «Сделайте мне красиво», Выпуск №39: Привет, Svelte! Пока, moment.js!
Веб-разработка
•
Хватить это верстать дважды или 2-х сторонняя связь между дизайном и кодом•
Локальное хранилище или куки? Безопасное хранение JWT на клиенте•
О роли фронтенд-разработчика• Предстоящие изменения в WordPress 5.5, про которые должны знать разработчики тем
• Подготовка к mobile-first-индексации — с учетом дополнительного времени
•
Ренессанс No-Code для веб-разработчиков •
this vs that: объяснение разницы между похожими понятиями в веб-разработке •
Визуализация работы CORS- PWA
•
Создание PWA было нашей лучшей идеей
•
Создание PWA в Google, часть 1
•
Мы сдаемся, прогрессивные веб-приложения могут отследить вас, говорит W3C: через 5 лет вопрос с приватностью разрешился
- Инструменты
•
Lock-файлы npm
•
Взгляд на новые возможности Chrome DevTools в 2020 году
•
Webpack: плавное введение
- Производительность
•
Бесконечный скролл без сдвига макета
•
Изучение проблемы с повторяющимися HTML-запросами при загрузке страницы
CSS
•
Нововведения CSS – Июль 2020 (Gap, Aspect ratio, Masonry, Subgrid)•
CSS и множественный фон•
Визуальное сравнение 13 CSS-фреймворков• Генератор цветовых тем
•
Получение максимальной выгоды от вариативных шрифтов в Google Fonts •
Анализ CSS с помощью CSS OM: Получение поддерживаемых свойств, сокращений и других деталей•
PostCSS плагин для исправления бага с 100vh в iOS•
Что означает 100% в CSS? •
Несколько CSS комиксов •
Использование CSS для обнаружения и переключения тем сайта в соответствии с системными настройками•
Хотите стать лучше в написании кода? Научите кого-нибудь CSS. •
Жирный текст при наведении… без сдвигов контента•
Почему CSS Grid Layout не заменит сетку фреймворка JavaScript
•
Пишем свой dependency free WebSocket сервер на Node.js•
style9: компилятор CSS-in-JS, основанный на идеях stylex от Facebook •
Внедрение современного JavaScript в библиотеки •
Хватит дублировать константы в JS и CSS •
Разработка и развертывание микро-фронтендов с Single-Spa - Теория
•
Простое объяснение делегирования событий
• Выбор зависимостей JavaScript
•
Что такое композиция? Объяснение от Дена Абрамова
•
Ответы на самые популярные Javascript вопросы на собеседованиях для начинающих Часть 1 , Часть 2
- React
•
React: 50 оттенков состояния
•
Современное тестирование React, часть 4: Cypress и Cypress Testing Library
•
Как и почему вы должны использовать React Query
•
React Guitar — Красивый и гибкий гитарный компонент для React.
•
reactivue — Используйте API Vue Composition в компонентах React
- Vue
•
Vue.js для начинающих, урок 7: вычисляемые свойства
•
Vue.js для начинающих, урок 8: компоненты
• Vue 3 теперь в RC!
•
Я создал одинаковое приложение на React и Vue. Вот различия. [Версия 2020 года]
- Angular
•
Как писать хорошие библиотеки под Angular
•
Angular Language Service для Visual Studio
•
Blogit — блог на AngularJS + Github в роли хостинга
•
10 лучших советов по Angular, отобранных сообществом
•
15 примеров удивительной статистики об Angular
•
11 причин, по которым вам следует использовать NGXS в качестве управления состоянием в ваших Angular приложениях
- Ember
•
Релиз Ember 3.20
•
The Ember Times — Issue No. 158
•
ember-csz: решение CSS-in-JS для стилизации в Ember
•
Ember Octane: краткий обзор реактивности
- Libs & Plugins
•
tinykeys — Небольшая (~ 400 B) и современная библиотека для регистрации клавиатурных нажатий
•
moment-guess — Пакет утилит для угадывания формата даты
•
svelthree — компонент Svelte для использования three.js
Браузеры
•
Chrome (чуть не) снёс расширение, над которым мы работали три года, и не хочет говорить за что• Релиз Firefox 79, подробности для веб-разработчиков от Марата Таналина
• Защищённые браузеры: выбираем лучший
• Новый браузер Microsoft Edge аварийно завершал работу, если поисковиком по умолчанию в нём был установлен Google
• Android-версия Chrome позволит подтверждать платежи с помощью биометрической аутентификации
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
AfterGen
Визуализация работы CORS (в ней же ссылка на описание работы HTTP 1.1) — очень круто написано, давно не встречал такой легкой подачи о чем то более менее сложном