Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Веб-стандарты» #318: Safari, сабгриды, Vue 3, оверрайды в npm, border-image, спеки, старые браузеры, TS и Девшахта
•
«Новости 512» от CSSSR: Конспект о микрофронтендах, Remix vs. Next.js, Parcel CSS, Node.js 17.4.0, Deno 1.18, курс по Linux
•
Подкаст «Сделайте мне красиво» №68 — Даже по меркам HTML это адок
•
Frontend Weekend №117, в гостях Ольга Кобец, недавно покинувшая компанию Яндекс: об организации moscowjs, сообществе BeerJS и выгорании после Яндекса
• Как читать W3C-спецификации
• 5 важных SEO-трендов в 2022 году: от нейронного поиска до фиджитала
•
Контекстно-зависимые веб-компоненты проще, чем вы думаете
•
Фронтенд-прогнозы на 2022
•
Реализация 3D сцен в вебе
•
Ускоренное руководство по Fullstack Web3 с ASS (Anchor, Solana и Svelte)
•
Адаптивное свойство одной строкой
• «Родительскому селектору» :has(), скорее всего, запретят быть вложенным
• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами
• Первый публичный черновик CSS-каскада 5 уровня
•
Современная гибкая типографика с использованием CSS Clamp
•
Создание UI компонентов с помощью SVG и CSS
•
Что появилось в CSS после «CSS3»?
•
NoJS — Создание калькулятора с использованием только чистого HTML и CSS. No Javascript!
•
Будущее CSS: определяйте поддержку at-rule с помощью @supports at-rule(@keyword)
•
Сравнение значений специфичности CSS
•
Как использовать CSS ::before и ::after для создания пользовательских анимаций и переходов
•
Создание адаптивного мобильного меню с помощью CSS без JavaScript
•
Расширенное руководство по настройке цветов в CSS
•
JavaScript: захват медиапотока из DOM элементов
• Тренды JavaScript в 2022 году
•
Как работает метод bind? 30 вопросов собеседования JavaScript
•
Remix vs Next.js
•
Использование особенностей JavaScript для развлечения и получения прибыли
•
SaasFrontends — шаблоны Vue2, Vue3, React и Svelte
•
StructuredClone(): глубокое копирование объектов в JavaScript
•
Я создал блог на RemixJS, так что можно это не делать (пожалуйста)
•
Firefox остался один
• Opera выпустила открытую бета-версию браузера со встроенным криптокошельком
•
История интернет-браузеров — война за пользователя
Дайджест за прошлую неделю.
Материал подготовили 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)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
Веб-разработка
• Как читать W3C-спецификации
• 5 важных SEO-трендов в 2022 году: от нейронного поиска до фиджитала
•
![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)
-
Инструменты
• Пришло время попрощаться с Webpack?
•Представляем fuite: инструмент для поиска утечек памяти в веб-приложениях
•Полное руководство для начинающих по npm
-
Производительность
•Быстрый, резкий, как пуля, дерзкий. Как работать над перфомансом сайта, чтобы нравиться пользователям и Гуглу
•Как мы отказались от JPEG, JSON, TCP и ускорили ВКонтакте в два раза
•Повысьте производительность с помощью Web Workers: подробное руководство
-
Эффекты
•7 + 1 способ анимировать спиннер
•Анимируйте что угодно вдоль SVG Path
•Подборка креативных сайтов «Inspirational Websites Roundup» #33
•Эффект спокойных пятен света на CSS
CSS
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• «Родительскому селектору» :has(), скорее всего, запретят быть вложенным
• Тёмная сторона CSS: выходим за рамки и взрываем звезды с border-image и градиентами
• Первый публичный черновик CSS-каскада 5 уровня
•
![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)
• Тренды JavaScript в 2022 году
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.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)
-
React
•Улучшаем дизайн React приложения с помощью Compound components
• «Запашки» кода React-компонентов
•Шесть лучших библиотек управления состоянием React на 2022 год
•Enterprise React в 2022
•Все о нашей миграции с ReactJS на NextJS
•Хороший совет по условным выражениям JSX
•Rockpack — современный инструмент который позволит быстро создать React приложение с поддержкой Server Side Rendering, настроенным Webpack 5, Jest, Eslint, Typescript.
•Чистка типов в React компонентах
•Изучение трех новых API React 18
-
Vue
•Vue 3 как новый стандарт
•Модуль ленивой загрузки для Nuxt 3
•Программный дизайн компонентов Vue 3
-
Angular
•Итоги 2021 года для Angular и предварительный обзор 2022
•Поддержка типизации Angular Form, которая нужна каждому разработчику
•Component-First State Management для автономных компонентов Angular
•Как создать прогрессивное веб-приложение с помощью Angular
-
Svelte
•Svelte: все прелести фреймворка — без фреймворка
•Создание микроинтерфейсов Svelte с помощью Podium
-
Libs & Plugins
•Замена jQuery (110 КБ) на Umbrella JS (8 КБ)
•Как заставить сайт работать в автономном режиме с помощью плагина VitePWA
Браузеры
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Opera выпустила открытую бета-версию браузера со встроенным криптокошельком
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.