Как React 18 повышает производительность приложений

В React появились новые конкурентные фичи (Transitions, Suspense и React Server Components), которые значительно повышают производительность приложений. Читайте подробнее обо всем по порядку👇

Читать

🎙Подкаст «Веб-стандарты»: Никита Дубко, Вадим Макеев, Алексей Симоненко, Андрей Мелихов про Chrome 115, шрифты, Safari TP, позиции по стандартам, постмортем AI в MDN и возвращение к DOM API.

00:01:31 Chrome 115
00:16:04 Технологии шрифтов
00:30:02 Safari TP
00:39:08 Позиции по стандартам
00:56:02 Постмортем AI в MDN
01:17:35 Назад к DOM API
01:30:04 Ответы на вопросы

🔗 Слушайте на Ютубе
🔗 Ссылки на сайте

#podcast

📌 A?.Frontend MeetUp #2
📺 Добро пожаловать в Storybook Community | Никита Дукин, фронтенд-разработчик в Альфа-Банке
📺 Оптимизируем графику для веба like a boss | Евгений Полосухин, ведущий разработчик сайта в Selectel

📌 A?.Frontend MeetUp #3
📺 File API — работа с файлами глазами браузера | Азат Загитов, фронтенд-разработчик в Альфа-Банке
📺 Как расширять свой круг знакомств, если ты интроверт | Тимур Гафиулин, Frontend-разработчик в Учи.ру
📺 View на Vue: личный опыт вхождения в IT | Вероника Филиппова, Frontend-фрилансер

📌 A?.Frontend MeetUp #4 про опыт разработчиков в онлайн-курсах через призму разных взглядов: студент, преподаватель, компания
📺 Вячеслав Завьялов, фронтенд-разработчик в Газпромнефть «Цифровые решения»
📺 Александр Мокшин, фронтенд-разработчик в Альфа-Банке и выпускник Alfa Campus
📺 Сергей Попов, директор образовательного продукта направления программирование в Skillbox

#матчасть

pkg-size: найдите истинный текущий размер npm-пакета, не выходя из браузера

Цель pkg-size — облегчить любопытным разработчикам изучение экосистемы npm. Он позволяет просматривать проекты в дереве зависимостей, находить новые пакеты и узнавать об их создателях. В конечном счете, он направлен на то, чтобы способствовать более глубокому пониманию экосистемы npm.

🤖 4 сферы применения ChatGPT, Bing, Bard и Claude 2

В этой статье мы разберём различные способы применения популярных ИИ с учётом инструментов, доступных на лето 2023 года.

🔗 Основной сайт
🔗 Зеркало

Усовершенствованный стиль управления формой с помощью Selectmenu и Anchoring API

Благодаря рабочей группе сообщества Open UI на горизонте появился новый элемент <selectmenu>, который значительно улучшит стилизацию этого типа управления формой.

Под катом — разбор ранней реализации этого экспериментального элемента на примере шаблона, который вы никогда бы не подумали сделать с помощью одного только CSS — radial selection menu.

Простой способ определения шрифта, используемого для любого текста веб-страницы.

#devtool #tip by Shripal Soni

⚡Material Web Components (MWC) теперь находятся в стадии бета-тестирования, а версия 1.0 выйдет уже совсем скоро

Почему этот анонс был удивительным? Потому что первоначальный публичный релиз MWC состоялся в мае 2018 года. С тех пор мы почти ничего не слышали о MWC, так что вот краткий обзор👇

Как следует из названия, MWC — это реализация веб-компонентов Material, системы дизайна Google с открытым исходным кодом, которая призвана помочь каждому веб-сайту «внедрить лучшие практики UI».

Это немного сбивает с толку, потому что самой популярной реализацией Material на сегодняшний день была сторонняя UI-библиотека React под названием Material UI, которая вообще не имеет официальных связей с Google.

Но кто знает, может быть, рост MUI помог мотивировать команду Material наконец-то выпустить стабильную версию собственной UI-библиотеки. И ее реализация с помощью веб-компонентов имеет огромный смысл, потому что 1) это Google, и 2) это позволяет использовать компоненты библиотеки с широким спектром фреймворков и проектов.

📌 Что мы можем ожидать от версии 1.0?

✔️Стабильность 22 основных компонентов
✔️Улучшенная доступность
✔️Динамические цвета и Material токены
✔️Поддержка встроенной HTML-формы

Кто знает, станет ли когда-либо Material Web массовой библиотекой, но если это произойдет, это станет еще одной движущей силой для более масштабного ренессанса веб-компонентов, который мы наблюдаем последние пару лет.

🎙Подкаст «Веб-стандарты»: Никита Дубко, Юля Миоцен, Алексей Симоненко про бету Chrome 116, функцию linear(), PNG v3, Firefox ESR, перфоманс, альтернативу GitHub и эмоджи в вебе.

00:01:39 Бета Chrome 116
00:15:49 Функция linear()
00:33:37 PNG v3
00:43:16 Firefox ESR
00:44:54 Перфоманс
00:56:52 Альтернатива GitHub
01:10:57 Эмоджи в вебе
01:23:52 Ответы на вопросы

🔗 Слушайте на Ютубе
🔗 Ссылки на сайте

🏃Репозиторий, в котором сравниваются качество и скорость последних версий популярных минификаторов JavaScript:

🔸babel-minify
🔸bun
🔸esbuild
🔸google-closure-compiler
🔸JShrink
🔸minify-js
🔸swc
🔸tdewolff/minify
🔸terser
🔸uglify-js

Вы спокойны, сдержаны, имеете малый круг друзей, но довольно близких, а также вы не любите шумные компании, предпочитаете проводить время наедине с собой и сконцентрированы на своем внутреннем мире. Поздравляем — вы интроверт 👐

Несмотря на свою необщительность, интроверты могут быть очень приятными и интересными собеседниками, если с ними правильно общаться на интересующие их темы.

📌 Как расширить свой круг знакомств в таком случае? Если вы смотрели нашу подборку, наверняка обратили внимание на доклад интроверта Тимура Гафиулина из Учи.ру. У него там есть несколько рабочих кейсов.

💭 Кчтати, вы интроверт?

💯 — да, и у меня все отлично
🥱 — нет, у меня нет проблем с социализацией
🤔 — фигня все это, пойду кодить дальше

#холивар

📌 Подборка еженедельных подкастов о веб-разработке и не только: сохраняй в закладки, чтобы не пропустить ничего интересного

🎙 Веб-стандарты: обсуждение последних новостей и самых ярких событий из мира фронтенд-разработки за прошлую неделю, а также других фронтенд-тем.
🎙 Про код: обсуждение самых интересных новостей из мира веб-разработки простым языком.
🎙 Подлодка: аудио-шоу про IT и всё, что с ним связано.
🎙 Frontend Weekend: самые честные интервью с известными людьми из мира веб-разработки.
🎙 Радио-Т: субботний Hi-Tech-подкаст, который стал одним из первых русскоязычных IT-подкастов.
🎙 JS Party: популярный подкаст о JavaScript, CSS и веб-разработке на английском.

#podcast

❓💭 Объясните делегирование событий в JavaScript

Делегирование событий — прием, который состоит в добавлении обработчиков событий к родительскому элементу, а не к дочерним. Обработчик будет срабатывать всякий раз, когда событие будет запущено на дочерних элементах благодаря всплытию событий в DOM. Преимущества этой техники очевидны:

➕Экономит объем используемой памяти, ведь для родительского элемента требуется только один обработчик.
➕Не требуется привязывать или убирать обработчики при добавлении и удалении элементов.

📌 А теперь пример

1️⃣ Самый простой пример: у вас есть HTML-страница, на которой расположена таблица с несколькими ячейками; ваша задача — реализовать подсветку ячейки при клике.

Вместо того, чтобы назначать обработчик onclick для каждой ячейки — можно повесить один обработчик на элемент. Он будет использовать event.target, чтобы получить элемент, на котором произошло событие, и подсветить его. В данном случае нет никакой разницы, сколько ячеек в таблице.

2️⃣ У делегирования есть и другое применение — действия в разметке. Например, вам требуется сделать меню с разными кнопками, а также у вас есть объект с соответствующими методами. Как их состыковать?

Вы можете добавить один обработчик для всего меню и атрибуты data-action для каждой кнопки в соответствии с методами, которые они вызывают.

3️⃣ Делегирование событий можно использовать для добавления элементам «поведения», декларативно задавая обработчики установкой специальных HTML-атрибутов и классов.

Приём проектирования «поведение» состоит из двух частей:
▫️Элементу ставится пользовательский атрибут, описывающий его поведение.
▫️При помощи делегирования ставится обработчик на документ, который ловит все клики (или другие события) и, если элемент имеет нужный атрибут, производит соответствующее действие.

#вопросы_с_собесов #easy

🔍Все самое полезное для айтишников в одном канале: анализ рынка труда, советы по Git, подкасты про разработку, новости и просто мемы.

Подписываемся на «Библиотеку программиста» (если еще не) — источник действительно качественного технического контента.

👉Подписаться👈