⚡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, подкасты про разработку, новости и просто мемы.

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

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

🕹 Rx Playground — интерактивная площадка, которая позволяет наглядно изучить основные концепции и операции реактивного программирования с использованием возможностей RxJS и three.js.

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

Думайте об этой демонстрационной игровой площадке как о своей собственной фабрике игрушек, где вы можете дать волю своему творчеству. И да, это очень красиво!

Одной из самых интересных грядущих новинок JavaScript и TypeScript является явное управление ресурсами. Новый синтаксис using foobar = … реализует идиому RAII, позволяя писать намного менее многословный код, управляющий какими-либо ресурсами.

Автор статьи на примерах разбирает эту фичу — в том виде, в котором она сейчас доступна в TypeScript 5.2.0-beta с полифиллом disposablestack. Кроме того:

🔸Рассматривает синхронные и асинхронные ресурсы, DisposableStack/AsyncDisposableStack
🔸Приводит пример неочевидного бага и несколько других нововведений Node.js, про которые, возможно, ещё знают не все.

Читать

💭 В комментариях новички часто спрашивают про ресурсы/книги для начинающего фронтенд-разработчика.

Давайте саккумулируем в комментариях свой опыт и поделимся источниками, с которых эффективнее всего начать изучение! И вообще, с какого стека лучше начинать? Поделитесь опытом👇

#холивар

Наглядно о том, как взаимодействуют фронтенд- и бэкенд-разработчики

#юмор #жиза

The Concise TypeScript Book

Перед вами книга, которая содержит исчерпывающий и краткий обзор возможностей TypeScript.

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

Являетесь ли вы новичком или опытным разработчиком, эта книга станет бесценным ресурсом для улучшения вашего понимания и повышения квалификации в TypeScript.

🔗 Онлайн версия