Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Веб-стандарты» №241. Сайд-подкасты, онлайн-события, новости браузеров, main вместо master, поиски эмпатии
•
Подкаст CSSSR: Тестирование Vue-компонентов, roadmap разработки Github, релизы Angular, Next.js и git
•
Подкаст «Фронтенд Юность (18+)» №149: Нагибабель топит ледники
•
Технологии фронтенд-разработки, на которые вы, возможно, не обратили внимания
•
Профессиональное применение инструментов разработчика Chrome: 13 советов
•
Руководство по веб-разработке для новичков «The no jargon guide» — Развертывание вашего первого сайта
•
Релиз Emmet 2 для Sublime Text
•
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
•
Node Modules в состоянии войны: почему CommonJS и ES Modules не могут работать вместе
•
RxJS & Firebase 101
•
Анонс нового веб-сайта для TypeScript
•
Сравнение моделей реактивности — React vs Vue vs Svelte vs MobX vs Solid
•
1Keys — Как я сделал пианино всего в 1 КБ JavaScript
• В Firefox началась активация защиты от отслеживания перемещений через редиректы
• Новый Edge всем и каждому. Microsoft заблокировала возможность деинсталляции браузера из Windows 10
• Рыночная доля Chrome и Edge продолжает расти, а 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)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.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)
- Производительность
•Оптимизация производительности фронтенда. Часть 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
•
![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)
•
![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)
•
![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
•Почему 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.