Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | JavaScript | Браузеры
Медиа
• Подкаст «Веб-стандарты» №241. Сайд-подкасты, онлайн-события, новости браузеров, main вместо master, поиски эмпатии
• Подкаст CSSSR: Тестирование Vue-компонентов, roadmap разработки Github, релизы Angular, Next.js и git
• Подкаст «Фронтенд Юность (18+)» №149: Нагибабель топит ледники
Веб-разработка
• Технологии фронтенд-разработки, на которые вы, возможно, не обратили внимания
• Профессиональное применение инструментов разработчика Chrome: 13 советов
• Руководство по веб-разработке для новичков «The no jargon guide» — Развертывание вашего первого сайта
• Релиз Emmet 2 для Sublime Text
- Производительность
• Оптимизация производительности фронтенда. Часть 1. Critical Render Path
• Вырезаем SSR и ускоряем Хабр в 10 раз
• Google рассказал подробнее об измерении Core Web Vitals
• Изучение всех основных функций вкладки «Performance» в Chrome и практика с ними на примере простого проекта на React.
• content-visibility: новое свойство CSS, повышающее производительность рендеринга.
• Алгоритм, стоящий за Performance Score (и как улучшить ваш результат)
• Техника для более быстрой предзагрузки hero-изображений
- Доступность
• Делаем Facebook.com доступным как можно большему количеству людей
• Релиз Axe-core 4.0, одного из лучших браузерных инструментов для работы над доступностью
• Обеспечение идеального контраста между светлым текстом и фоновым изображением
- Эффекты
• Подборка креативных концептов «UI Interactions & Animations Roundup #9»
• Magnetic Buttons — набор «магнитящихся» кнопок с забавной анимацией наведения.
• Анимация рукописной каллиграфии на SVG
• Подборка креативных сайтов «Inspirational Websites Roundup #17»
CSS
• CSS Grid понятно для всех
• Медиазапросы в SCSS — ещё один удобный способ использования @media screen
• 6 мощных возможностей CSS, которые позволяют обойтись без JavaScript
• Drop-Shadow: недооцененный CSS фильтр
• Computed Values: больше, чем кажется на первый взгляд
• Легкое решение для Masonry на CSS Grid c фолбеком на JavaScript
• Углубляемся в детали свойства Flex
• Современные решения на CSS grid для большинства проблем с раскладкой
• Реализация реалистичного перелистывания страниц на CSS
• Оптимизация CSS для более быстрой загрузки страницы
• Интерактивный словарь CSS
• Больше контроля над CSS Borders с помощью background-image
• font-weight: 300 может быть вредным (и возможное решение с fontconfig)
• Супергеройский леайут — объединение CSS Grid и CSS Shapes
JavaScript
• Мои любимые трюки в JavaScript
• Node Modules в состоянии войны: почему CommonJS и ES Modules не могут работать вместе
• RxJS & Firebase 101
• Анонс нового веб-сайта для TypeScript
• Сравнение моделей реактивности — React vs Vue vs Svelte vs MobX vs Solid
• 1Keys — Как я сделал пианино всего в 1 КБ JavaScript
- Теория
• Дэн Абрамов о замыканиях в JavaScript
• Почему Array.isArray(Array.prototype) возвращает true?
• Все вопросы по фронтенду c собеседований, заданные во время моего недавнего поиска работы.
- React
• Concurrent Mode в React: адаптируем веб-приложения под устройства и скорость интернета
• Как Next.js может помочь улучшить SEO
• Практическое руководство по обзору продуктов в приложениях React
• Настройка Redux для использования в реальном приложении
• Улучшения производительности React: сделайте свое React приложение эффективным.
• Наделение react-spring смыслом
- Vue
• Vue.js для начинающих, урок 9: пользовательские события
• Создание нового веб-сайта с помощью VuePress и Bulma
• React для разработчиков на Vue.js: мой опыт
- Angular
• Кастомизация сборки Angular-проекта
• Дорожная карта для Angular
• Angular — это луковица. Подборбный разбор каждого слоя
• Основные особенности Angular 10
• Angular, стратегии загрузки модулей и безопасность
• Последнее руководство по Change Detection в Angular, которое вам когда-либо понадобится
• Angular 10 — На пути к лучшему будущему для Angular
- Ember
• The Ember Times — Issue No. 159
- Svelte
• Svelte Radio, Episode 8 — Amelia Wattenberger, Svelte, D3 and other fun stuff!
• Является ли Svelte на голову выше React?
• Введение в svelte
- Libs & Plugins
• 8 JavaScript библиотек для более удобной работы с Local Storage
• jois — Небольшая библиотека для помощи в создании веб-компонентов и приложений на основе веб-компонентов.
Браузеры
• В Firefox началась активация защиты от отслеживания перемещений через редиректы
• Новый Edge всем и каждому. Microsoft заблокировала возможность деинсталляции браузера из Windows 10
• Рыночная доля Chrome и Edge продолжает расти, а Firefox теряет популярность
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: alexzfort