Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
• Подкаст «Фронтенд Юность (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) — очень круто написано, давно не встречал такой легкой подачи о чем то более менее сложном