# Понедельник 60 твитов
Всем привет! С вами Сергей Куликов (@iamkulykov). Работаю в Vaadin, последние 4 года пишу на веб-компонентах.
7:00Темы недели:
— Кастомные элементы: все еще не торт?
— Shadow DOM как средство изоляции
— Ванильные компоненты без… twitter.com/i/web/status/1…
В Vaadin занимаюсь разработкой и поддержкой нашей библиотеки компонентов на Polymer 2 и 3 (в будущем планируем пере… twitter.com/i/web/status/1…
7:06До Vaadin работал в компании OWOX, где участвовал в поэтапной миграции приложения с Polymer 0.5 на 1.0. Застал все… twitter.com/i/web/status/1…
7:08Тема первого дня — кастомные элементы. Как в узком смысле (часть стандарта HTML), так и в широком (framework-agnost… twitter.com/i/web/status/1…
7:11Опрос: знакомы ли вы с кастомными элементами?
7:15Если слышите впервые, советую эту главу в учебнике Ильи Кантора. Она небольшая, но хорошо описывает API и некоторые… twitter.com/i/web/status/1…
7:23Поддержка браузерами — кроме IE11 и старого Edge. Многих наверняка смутит “partial support” в Safari, сейчас объясн… twitter.com/i/web/status/1…
7:32Дело в том, что разработчики WebKit принципиально отказались внедрять модифицированные встроенные элементы (customi… twitter.com/i/web/status/1…
7:35Использовать браузерные API, относительно которых не достигнут консенсус, я не советую. Так что дальше речь пойдет… twitter.com/i/web/status/1…
7:40Автономные кастомные элементы сами по себе умеют немногое. По сути это те же span, у которых есть жизненный цикл и… twitter.com/i/web/status/1…
7:51Пока главный плюс — сама способность определять свои HTML-теги и назначать им поведение с помощью JS. Это только пе… twitter.com/i/web/status/1…
7:59В перспективе браузеры предоставят разработчикам контроль над рядом аспектов, доступных нативным элементам: поддерж… twitter.com/i/web/status/1…
8:07Часть этих улучшений и базовое для них API Element internals уже добавлены в стандарт WHATWG. Но в стабильных верси… twitter.com/i/web/status/1…
8:15Кстати, вы любите читать спецификации? Я обычно первым делом ищу в них разделы, отмеченные как “non-normative”. Там… twitter.com/i/web/status/1…
8:21В не нормативных разделах спецификации кастомных элементов можно найти ответы на вопросы “зачем”, “как” и “чего пок… twitter.com/i/web/status/1…
8:32Самый простой способ потестить кастомные элементы — сайт webcomponents.dev. Есть примеры разных библиотек и vanilla JS.
8:44Возможны, вы заметили, что до сих пор я избегал термина “веб-компоненты”. Думаю, тред на эту тему будет не лишним.
13:09Прежде всего, упоминания веб-компонентов ни в одном стандарте вы не найдете. Как и PWA, это "зонтичный термин", под… twitter.com/i/web/status/1…
13:11В обоих случаях речь идет о технологиях, продвигаемых Google. Благодаря их, скажем так, агрессивной политике в этой… twitter.com/i/web/status/1…
13:15Так или иначе, за последние несколько лет веб-компоненты собрали, пусть и не без оснований, слишком много негатива.… twitter.com/i/web/status/1…
13:25Одна из причин негатива — вместе с полезными API, ставившими задачу объяснить устройство HTML, активно навязывались… twitter.com/i/web/status/1…
13:28HTML Imports вместе со спорными аспектами Shadow DOM оказались камнями преткновения, по вине которых веб-компоненты… twitter.com/i/web/status/1…
13:35Недостаткам ранней реализации, существовавшей только в Chrome и впоследствии печально известной как “версия 0”, пос… twitter.com/i/web/status/1…
13:44Веб-компоненты "версии 0" были сложными, далекими от реальных проблем (таких, как стилизация select) и во всех брау… twitter.com/i/web/status/1…
13:49Вместо того, чтобы сразу признать проблемы, некоторое время команда Chrome делала хорошую мину при плохой игре. Ста… twitter.com/i/web/status/1…
13:58В разное время над DevRel в области веб-компонентов работали Addy Osmani, Eric Bidelman, Rob Dodson, Monica Dincule… twitter.com/i/web/status/1…
14:04В 2015 году разработчики браузеров смогли достичь компромисса. Основные недостатки были устранены, и в процессе обс… twitter.com/i/web/status/1…
14:09Jan Miksovsky, один из участников тех событий, написал статью с детальной хронологией и рассказал о том, как были р… twitter.com/i/web/status/1…
14:13Но фальстарт, вызванный стремлением Chrome “причинять добро” путем проталкивания сырых API, уже сыграл свою роль. В… twitter.com/i/web/status/1…
14:17В итоге до сих пор бытует мнение, что Custom Elements и Shadow DOM — детище Google, которое кроме продуктов этой ко… twitter.com/i/web/status/1…
14:22I specialized in some losers: Cold Fusion, Flash, web components.But I also got lucky and went big on React earl… twitter.com/i/web/status/1…
Некоторые вообще называют веб-компоненты мертворожденной технологией. Но особенно я был удивлен, увидев их упоминан… twitter.com/i/web/status/1…
I specialized in some losers: Cold Fusion, Flash, web components.
But I also got lucky and went big on React earl… twitter.com/i/web/status/1…
14:27
Ряд компаний, включая и те, где мне довелось поработать, в свое время все же поверили в светлое будущее с компонент… twitter.com/i/web/status/1…
14:36Но личным опытом разработки на bleeding edge я поделюсь позже. Если, конечно, веселые истории из серии “мыши плакал… twitter.com/i/web/status/1…
14:39Тред о применении кастомных элементов в 2020. С момента релиза Firefox 63 прошло почти два года, в Safari поддержка… twitter.com/i/web/status/1…
16:58На сегодняшний день кастомные элементы используют Adobe, Apple, Esri, GitHub, Firefox, IBM, ING, Internet Archive,… twitter.com/i/web/status/1…
17:03По данным Chrome Platform Status, уровень использования достигает 10% показов страниц. Их методика подсчета и прова… twitter.com/i/web/status/1…
17:10Причина роста популярности — у ряда крупных компаний есть запрос на framework-agnostic. Типичный юзкейс: библиотека… twitter.com/i/web/status/1…
17:20На самом деле, от фреймворков поддержка кастомных элементов требует определенных усилий. Набор тестов на совместимо… twitter.com/i/web/status/1…
17:28Обращаю внимание на то, что с React все не так просто. Есть надежда, что полная совместимость появится в React 18.
17:33Возможно, поэтому некоторые компании поддерживают две реализации своей дизайн-системы — на React и на кастомных эле… twitter.com/i/web/status/1…
17:37Для разработки в энтерпрайзе кастомные элементы привлекательны возможностью постепенно модернизировать существующий… twitter.com/i/web/status/1…
17:47При этом стек может быть любым: свой фреймворк (LWC от Salesforce, UI5 от SAP, FAST от Microsoft), набор библиотек… twitter.com/i/web/status/1…
18:04В Vaadin мы используем кастомные элементы как фундамент для Java-фреймворка, предыдущая версия которого была основа… twitter.com/i/web/status/1…
18:09Все вышеперечисленное — примеры использования кастомных элементов для создания компонентов интерфейса. Это наиболее… twitter.com/i/web/status/1…
18:36Интересный сценарий — инкрементальная миграция с помощью кастомных элементов. Этот подход описал Денис Мишунов в до… twitter.com/i/web/status/1…
18:41Особенность “франкенштейн-миграции” в том, что кастомные элементы и Shadow DOM в данном случае — средство, а не цел… twitter.com/i/web/status/1…
18:46К похожим юзкейсам я бы отнес микрофронтенды. Кастомные элементы упоминаются как один из элементов концепции, котор… twitter.com/i/web/status/1…
18:56Раньше точечному использованию веб-компонентов в проектах на другом стеке мешали проблемы с производительностью пол… twitter.com/i/web/status/1…
19:00Встраиваемые виджеты могли бы не засорять страницу своей разметкой, пряча ее за HTML-тегом. Также им пригодилась бы… twitter.com/i/web/status/1…
19:04Но вообще использовать Shadow DOM вместе с кастомными элементами не обязательно. Это независимые части стандарта, н… twitter.com/i/web/status/1…
19:07Разработчики GitHub следуют идее прогрессивного улучшения и используют кастомные элементы без Shadow DOM. Об этом о… twitter.com/i/web/status/1…
19:11Кастомные элементы GitHub (в частности, меню и модальный диалог) сохраняют часть функций при выключенном JavaScript… twitter.com/i/web/status/1…
19:32Но этот пример — исключение. Чаще кастомные элементы используют там, где о выключенном JS не заботятся. Это админки… twitter.com/i/web/status/1…
19:38Среди примеров могу назвать инструменты для CMS от проекта HAX (редакторы для Drupal и Wordpress) и Joomla UI custo… twitter.com/i/web/status/1…
19:40В концепцию генераторов статики кастомные элементы тоже вписываются (они же сами — часть HTML). Чаще других в этом… twitter.com/i/web/status/1…
19:45Есть еще одна область, в которой потенциал кастомных элементов, на мой взгляд, далеко не раскрыт. Я имею в виду аль… twitter.com/i/web/status/1…
19:50Плагины вроде Swiper обычно требуют HTML с определенными классами или атрибутами. Кастомный элемент с Shadow DOM мо… twitter.com/i/web/status/1…
19:57Напоследок упомяну еще и про такой феномен, как “HTML framework” (термин предложил Paul Bakaus из команды AMP). При… twitter.com/i/web/status/1…
20:04На этом на сегодня все. Завтра будет больше практических моментов из личного опыта. Еще поговорим о пока не решённы… twitter.com/i/web/status/1…
20:18# Вторник 78 твитов
Первый тред на сегодня — о том, нужны ли кастомным элементам библиотеки и в каких случаях можно обойтись vanilla JS.
6:45По моим наблюдениям, у статей о веб-компонентах есть общая проблема: библиотеки вроде lit-element и Stencil упомина… twitter.com/i/web/status/1…
6:48В итоге возникает ассоциация "кастомные элементы = библиотека” и закономерный вопрос: так ли полезен стандарт, если… twitter.com/i/web/status/1…
6:52В комментариях к статье Rob Dodson заметил, что веб-компоненты — набор низкоуровневых примитивов. Библиотеки и фрей… twitter.com/i/web/status/1…
7:03@Rich_Harris @edsilv @FabianCook @justinfagnani However we simply don't see enough value to adopt WC as the foundat… twitter.com/i/web/status/1…
Так это выглядело на бумаге. Но на сегодняшний день реальность такова, что авторы фреймворков не видят смысла испо… twitter.com/i/web/status/1…
@Rich_Harris @edsilv @FabianCook @justinfagnani However we simply don't see enough value to adopt WC as the foundat… twitter.com/i/web/status/1…
7:10
Для начала стоит определиться, какие задачи мы решаем. В моем понимании, задача фреймворков — обновление представле… twitter.com/i/web/status/1…
7:14Веб-компоненты эту задачу не решают от слова совсем. Они ничего не говорят нам о том, как и когда рендерить — они п… twitter.com/i/web/status/1…
7:17Об этом, в частности, говорит один из разделов документации React. Изложенная там позиция лишена критики в адрес ве… twitter.com/i/web/status/1…
7:23Здесь мне видится некоторое столкновение интересов: фреймворки и кастомные элементы реализуют одну и ту же абстракц… twitter.com/i/web/status/1…
7:29Отсюда и вбросы вроде “web components will replace your framework”. По-моему, от таких заголовков больше вреда, чем… twitter.com/i/web/status/1…
7:32В ответ на это сторонники фреймворков справедливо замечают, что одних только кастомных элементов в любом случае нед… twitter.com/i/web/status/1…
7:36Но значит ли это, что библиотека / фреймворк нужны всегда? Я так не думаю. Бывают случаи, где тащить лишние килобай… twitter.com/i/web/status/1…
7:38Пример: компонент рендерит DOM один раз, в дальнейшем нужно обновлять только атрибуты или CSS-свойства. Я не вижу с… twitter.com/i/web/status/1…
7:57Когда-то у Polymer был слоган “jQuery для веб-компонентов” — то есть, набор костылей, потребность в которых со врем… twitter.com/i/web/status/1…
8:04Библиотеки позволяют писать меньше бойлерплейт-кода и не думать о некоторых нюансах, но в чем-то и ограничивают. Не… twitter.com/i/web/status/1…
8:18Я бы выделил три основных типа библиотек:
— основанные на классах (lit-element, FAST),
— основанные на функциях (H… twitter.com/i/web/status/1…
В этой статье перечислены более 40 способов написать один и тот же простой веб-компонент, с бенчмарками и сравнение… twitter.com/i/web/status/1…
8:31Статья демонстрирует, что при использовании ванильных кастомных элементов размер бандла быстро разрастается, когда… twitter.com/i/web/status/1…
8:40Мне этот факт напоминает расхожую фразу: начнешь писать на чистом JS — рано или поздно напишешь свой фреймворк. Что… twitter.com/i/web/status/1…
8:52Если вы пишете на библиотеке — стоит понимать, как она работает. В этом помогает чтение исходников и особенно тесто… twitter.com/i/web/status/1…
9:01О своем опыте применения этих знаний в написании кастомных элементов без зависимостей расскажу в следующем треде.
9:05Тред про кастомные элементы без зависимостей, с примерами из личного опыта. И заодно немного о best practices.
11:03Кастомные элементы без зависимостей писали еще 5 лет назад, на “версии 0”. Вот, например, популярный в то время ком… twitter.com/i/web/status/1…
11:06Правда, долгое время была одна неявная зависимость: полифилл. Его нужно было подключать на страницу отдельным скрип… twitter.com/i/web/status/1…
11:11Кроме “официального” полифилла от разработчиков Google, был еще document-register-element от Andrea Giammarchi. Он… twitter.com/i/web/status/1…
11:19Еще один момент: кастомные элементы требуют нативных ES2015-классов. Это тоже своего рода зависимость. ES5-код, пол… twitter.com/i/web/status/1…
11:27Решается эта проблема с помощью с помощью манки-патчинга HTMLElement с добавлением вызова Reflect.construct. В сост… twitter.com/i/web/status/1…
11:28По вышеуказанной причине в сообществе веб-компонентов принято публиковать в npm исходный код кастомных элементов в… twitter.com/i/web/status/1…
11:32@mlfrg У библиотеки одна зависимость — React :)
Итак, рассказываю о двух своих недавних пет-проектах. Это “клоны” React-компонентов, написанные на ванильных кастом… twitter.com/i/web/status/1…
@mlfrg У библиотеки одна зависимость — React :)
11:46
Так появился проект vanilla-colorful, порт колор-пикера react-colorful от @Omgovich (если пропустили его неделю, об… twitter.com/i/web/status/1…
11:50@pepelsbey @mlfrg Переписал на Custom Elements. Вот теперь действительно ноль зависимостей 🙂
От идеи до реализации прошло всего несколько дней. Замечу, что опыта разработки на React у меня нет. Исходный код r… twitter.com/i/web/status/1…
@pepelsbey @mlfrg Переписал на Custom Elements. Вот теперь действительно ноль зависимостей 🙂
12:05
Подробнее можно узнать в 248 выпуске подкаста Веб-стандарты, где мы с @Omgovich обсуждали наши колор-пикеры и сравн… twitter.com/i/web/status/1…
12:07Второй мой проект — vanilla-hamburger: набор гамбургер-кнопок с разными анимациями, порт библиотеки hamburger-react… twitter.com/i/web/status/1…
12:18Оба проекта написаны на TypeScript и покрыты тестами. Об этом, пожалуй, сделаю чуть позже отдельный тред. А пока не… twitter.com/i/web/status/1…
12:25Как и стандартные HTML элементы, кастомный элемент может иметь атрибуты и свойства. По умолчанию они не связаны меж… twitter.com/i/web/status/1…
12:34В этом примере я использую Symbol, чтобы эмулировать приватное поле. Это полезно, поскольку иначе в автокомплите и… twitter.com/i/web/status/1…
12:43В сеттерах свойств принято вызывать сайд-эффекты (например, обновлять DOM). Значения по умолчанию задаются в constr… twitter.com/i/web/status/1…
13:01Свойство может быть установлено до того, как элемент связан с классом. При этом геттер и сеттер будут "затенены" (s… twitter.com/i/web/status/1…
13:10С помощью пары строк кода реализуем простейший асинхронный рендеринг. Этот подход (batch updates) позволяет обновля… twitter.com/i/web/status/1…
13:20Какой-то Angular первых версий twitter.com/jsunderhood/st…
Насчет сравнения с “Angular первых версий” — на самом деле, намного больше все это похоже на lit-element. Если точн… twitter.com/i/web/status/1…
Какой-то Angular первых версий twitter.com/jsunderhood/st…
13:26
Еще один интересный прием — встроенный метод handleEvent для обработчиков событий. Он позволяет обойтись без исполь… twitter.com/i/web/status/1…
13:35Некоторые из описанных приемов можно увидеть в проекте HowTo: Components от авторов Web Fundamentals. Он не обновля… twitter.com/i/web/status/1…
13:43Также на Web Fundamentals есть список best practices для кастомных элементов. Там достаточно подробно описаны атриб… twitter.com/i/web/status/1…
13:48В качестве более обзорного чтения советую Gold Standard Checklist от Jan Miksovky, на чьи работы я часто ссылаюсь.… twitter.com/i/web/status/1…
13:54И в завершение треда — еще один чеклист от Justin Fagnani о том, как публиковать кастомные элементы в npm. Есть пол… twitter.com/i/web/status/1…
13:59Тред о кастомных элементах на TypeScript и тестировании.
17:10Для начала о TypeScript. Прежде всего, кастомный элемент стоит добавить в интерфейс HTMLElementTagNameMap. Это сдел… twitter.com/i/web/status/1…
17:12Если вы используете React, нужно также добавить определение кастомного элемента в специальный интерфейс JSX.Intrins… twitter.com/i/web/status/1…
17:23Еще можно типизировать кастомные события, которые используются элементом, для вывода типа event.detail в addEventLi… twitter.com/i/web/status/1…
17:33Поскольку кастомные элементы используют нативные классы, общая логика в них обычно выделяется в миксины. По сути ми… twitter.com/i/web/status/1…
17:54Подробнее о том, как работают миксины в TypeScript, можно почитать в статье Николая Платонова. Кроме преимуществ, у… twitter.com/i/web/status/1…
18:05Перейдем к тестированию. Кастомные элементы можно тестировать с помощью Jest с тех пор, как была добавлена их подде… twitter.com/i/web/status/1…
18:21Пример конфига Jest с использованием TypeScript для тестирования проекта на lit-element можно найти в темплейте Hov… twitter.com/i/web/status/1…
18:24В Vaadin мы тестируем наши веб-компоненты в реальных браузерах. Это помогает обнаружить баги, которые воспроизводят… twitter.com/i/web/status/1…
18:29Раньше в экосистеме Polymer был свой тест-раннер: web-component-tester. Необходимость в нем была обусловлена исполь… twitter.com/i/web/status/1…
18:32Сейчас мы переходим на Web Test Runner, который разрабатывает Lars den Bakker из ING. Он быстрый, поддерживает ES-м… twitter.com/i/web/status/1…
18:37@jsunderhood А почему не получается использовать Mocha/Jest и другие классические инструменты?
Почему переходим не на Jest? Во-первых, нам часто приходится дебажить edge cases в конкретном браузере. Кроме того,… twitter.com/i/web/status/1…
@jsunderhood А почему не получается использовать Mocha/Jest и другие классические инструменты?
18:45
Также в Web Test Runner есть и экспериментальная поддержка тестирования скриншотами. До сих пор мы использовали Gem… twitter.com/i/web/status/1…
18:47Для тестирования компонентов на TypeScript в Web Test Runner есть плагин на базе esbuild. Компиляция в esbuild зани… twitter.com/i/web/status/1…
18:55Пример конфигурации Web Test Runner и собственно тесты для кастомных элементов можно найти в моих проектах vanilla-… twitter.com/i/web/status/1…
19:00Я обещал рассказать о не решенных проблемах кастомных элементов. В этом треде перечислю основные из них.
19:12В моем списке есть пробелы, требующие доработок и новых API в браузерах, но это еще полбеды. На мой взгляд, более с… twitter.com/i/web/status/1…
19:13Проблема № 1: кастомные элементы не работают с выключенным JS. Это заметно ограничивает область их применения. Есть… twitter.com/i/web/status/1…
19:16Проблема № 2: кастомные элементы не имеют кросс-браузерной поддержки форм. Form associated custom elements API уже… twitter.com/i/web/status/1…
19:20Проблема № 3: кастомный элемент с одним и тем же тегом можно определить только один раз. Это значит, что на страниц… twitter.com/i/web/status/1…
19:23Это одна из причин, почему Polymer долго использовал Bower: там плоское дерево и установить две версии одного пакет… twitter.com/i/web/status/1…
19:28В Vaadin мы обходим эту проблему с помощью pnpm. Там есть возможность гибкой настройки с помощью pnpmfile.js. Верси… twitter.com/i/web/status/1…
19:32Проблема № 4: поскольку переопределять кастомные элементы нельзя, hot module replacement не работает. Есть полифилл… twitter.com/i/web/status/1…
19:37Проблема № 5: кастомные элементы регистрируются глобально. В сочетании с невозможностью их переопределения это крит… twitter.com/i/web/status/1…
19:40Решить эту проблему призван черновик Scoped Custom Element Registries, над которым работают представители Google и… twitter.com/i/web/status/1…
19:43Пробная реализация в виде миксина для lit-element есть в проекте Open Web Components. Имеется ряд ограничений, в ча… twitter.com/i/web/status/1…
19:47Иногда базовые классы специально отделяют от определений кастомных элементов и выносят в отдельные файлы без сайд-э… twitter.com/i/web/status/1…
19:53@jsunderhood Я бы в список добавил еще хаотичный порядок connectedCallback, из-за которого нельзя делать нормальную… twitter.com/i/web/status/1…
Из комментариев: проблема № 6, связанная с жизненным циклом. Мне с ней сталкиваться не приходилось, но реализованно… twitter.com/i/web/status/1…
@jsunderhood Я бы в список добавил еще хаотичный порядок connectedCallback, из-за которого нельзя делать нормальную… twitter.com/i/web/status/1…
20:00
Проект HowTo: Components для решения проблем с порядком загрузки использует Promise внутри connectedCallback. Как я… twitter.com/i/web/status/1…
20:10Напоследок упомяну некоторые черновики новых API, которые в перспективе могут облегчить жизнь разработчикам кастомн… twitter.com/i/web/status/1…
20:13Второй пример — кастомные псевдо-классы, доступные за флагом в Chrome 79+. Скорее всего они, как и кастомные CSS св… twitter.com/i/web/status/1…
20:21Наконец, одно из недавних дополнений к стандарту — способность указывать ARIA-роли и поведение по умолчанию без исп… twitter.com/i/web/status/1…
20:27На сегодня все. Завтра поговорим о Shadow DOM, о том, что значит его изоляция на практике и какие ограничения она накладывает.
20:31# Среда 84 твита
Сегодняшняя тема — Shadow DOM, его возможности и ограничения. Начнем с треда о главной проблеме, которую Shadow DOM… twitter.com/i/web/status/1…
6:59Этим летом я выступал на DevParty Russia с докладом “Shadow DOM: вдали от проторенных троп”. Тред отчасти написан п… twitter.com/i/web/status/1…
7:02“Проторенной тропой” я называю способы инкапсуляции стилей, ставшие традиционными: БЭМ и другие методологии, CSS mo… twitter.com/i/web/status/1…
7:06Сразу определимся с терминами: инкапсуляция = стили компонента не протекают наружу. Изоляция = то же самое плюс отс… twitter.com/i/web/status/1…
7:12В теории изоляция кажется полезной. Но как показала практика, в качестве универсального решения этот подход не рабо… twitter.com/i/web/status/1…
7:16В статье на Web Fundamentals есть фраза “Shadow DOM fixes CSS and DOM”. Я бы сказал, все обстоит наоборот: он ломае… twitter.com/i/web/status/1…
7:20Пример: если на странице есть reset, normalize или глобальные стили для box-sizing, внутри shadow root они не приме… twitter.com/i/web/status/1…
7:28Еще один момент: обычно, вне зависимости от выбранного способа инкапсуляции стилей, его принято строго придерживать… twitter.com/i/web/status/1…
7:33Но повсеместное использование Shadow DOM чревато рядом последствий. Mattia Astorino приводит хорошую аналогию: заве… twitter.com/i/web/status/1…
7:37Это ключевой момент: изоляция Shadow DOM подобна той, которой обладают встроенные HTML-элементы. О том, как это выг… twitter.com/i/web/status/1…
7:40Кстати, заглянуть внутрь <input type=“range”> или <video> можно не только в браузерах на основе Chromium (галочка “… twitter.com/i/web/status/1…
7:50Изоляция исключает конфликты из-за имен классов, селекторов по ID и тегам. Это полезно, но в реальных проектах регу… twitter.com/i/web/status/1…
7:58Раньше в слаке Polymer регулярно звучал вопрос “как использовать Bootstrap внутри Shadow DOM” (стоп, а нужна ли тог… twitter.com/i/web/status/1…
7:59Что примечательно, такие вопросы задают не только новички. То есть, причина не в отсутствии понимания принципов изо… twitter.com/i/web/status/1…
8:03С одной стороны, Shadow DOM позволяет забыть об именовании классов. Но, устраняя одну из причин появления CSS-метод… twitter.com/i/web/status/1…
8:20В результате у Material Web Components мы можем внутри shadow DOM увидеть классы, именуемые по БЭМ (правда, это свя… twitter.com/i/web/status/1…
8:23Подытожим: изоляция Shadow DOM предлагает решение одной из важных проблем CSS, но при этом приносит новые. Иногда е… twitter.com/i/web/status/1…
8:34Hey CSS friends, does this make sense to you?@ scope (.airplane) end (.passenger_cabin, .cockpit, .luggage_compa… twitter.com/i/web/status/1…
Добавлю, что Nicole Sullivan из Google уже зондирует почву на предмет альтернативной инкапсуляции на CSS media quer… twitter.com/i/web/status/1…
Hey CSS friends, does this make sense to you?
@ scope (.airplane) end (.passenger_cabin, .cockpit, .luggage_compa… twitter.com/i/web/status/1…
8:38
@jsunderhood Я, кстати, недавно обратил внимание, что некоторые компании используют Shadow DOM для того, чтобы дела… twitter.com/i/web/status/1…
Встраиваемые виджеты — действительно один из тех случаев, где изоляция оправдана. Кстати, не знал, что Grammarly ис… twitter.com/i/web/status/1…
@jsunderhood Я, кстати, недавно обратил внимание, что некоторые компании используют Shadow DOM для того, чтобы дела… twitter.com/i/web/status/1…
9:10
Кроме изоляции стилей, Shadow DOM влияет и на то, каким образом они добавляются на страницу. Тред о том, что это зн… twitter.com/i/web/status/1…
9:16Размещать стили внутри Shadow DOM обычно рекомендуется с помощью элемента <style>. Для тех, кто придерживается стро… twitter.com/i/web/status/1…
9:19Современные браузеры кэшируют содержимое <style>, так что на производительность этот способ не влияет. Можно исполь… twitter.com/i/web/status/1…
9:21Еще есть Constructable Stylesheets — эксперимент, реализованный только в Chrome и по их замерам более производитель… twitter.com/i/web/status/1…
9:29По инициативе разработчиков WebKit идет обсуждение, каким образом устранить выявленные недостатки в этом API. В свя… twitter.com/i/web/status/1…
9:31Важен этот черновик тем, что является одной из ступенек на пути к Cascading Stylesheet Module Scripts. В перспектив… twitter.com/i/web/status/1…
9:38Рабочее название этого API — “CSS modules”. Хотя против него были возражения в связи с тем, что существует популярн… twitter.com/i/web/status/1…
9:40Но черновики — вопрос будущего, а пока мы говорим об элементах <style>, добавление которых требует JS. Стоит ли пол… twitter.com/i/web/status/1…
9:45Пример реализации для React — библиотека Cease, всего 30 строк и 500 байт без зависимостей. Советую заглянуть в ее… twitter.com/i/web/status/1…
9:47Также рекомендую пример конфигурации webpack и style-loader для работы с Shadow DOM в проектах на React и Vue, прив… twitter.com/i/web/status/1…
9:50Еще один важный аспект Shadow DOM — кастомизация стилей. При наличии изоляции это становится проблемой, поскольку н… twitter.com/i/web/status/1…
12:46Первое, о чем стоит помнить: наследуемые свойства (color, font-family и другие) на элементе с shadow root проникают… twitter.com/i/web/status/1…
12:48Кастомные свойства (CSS-переменные) являются наследуемыми по умолчанию и тоже пересекают границы Shadow DOM. Если о… twitter.com/i/web/status/1…
12:52Кастомные свойства можно комбинировать с селектором :host() и устанавливать их значения в зависимости от атрибута н… twitter.com/i/web/status/1…
13:03О селекторах :host и :host() можно почитать на MDN и в учебнике Ильи Кантора. Замечу, что :host-context() есть толь… twitter.com/i/web/status/1…
13:07Долгое время кастомные свойства были единственным способом кастомизации в библиотеках веб-компонентов. Это было не… twitter.com/i/web/status/1…
13:11Polymer и компоненты Paper Elements использовали механизм CSS-миксинов. Они так и не стали стандартом и не были реа… twitter.com/i/web/status/1…
13:18При использовании кастомных элементов можно модифицировать стили с помощью наследования: класс-потомок переопределя… twitter.com/i/web/status/1…
13:31Не так давно (Firefox 72, Safari 13.1) появились CSS Shadow Parts. На сегодняшний день это рекомендуемый способ кас… twitter.com/i/web/status/1…
13:32Вкратце, псевдоэлемент ::part() позволяет переопределять стили отдельных элементов в Shadow DOM, имеющих атрибут pa… twitter.com/i/web/status/1…
13:36Изначально вместе с ::part() предлагался также селектор ::theme() для решения проблемы темизации компонентов. На да… twitter.com/i/web/status/1…
13:44Единственным механизмом темизации пока остаются кастомные CSS свойства. Cassondra Roberts из Red Hat предложила под… twitter.com/i/web/status/1…
13:49@jsunderhood Вот здесь интересная штука получается.Vaadin предоставляет компоненты для Enterprise-компаний, котор… twitter.com/i/web/status/1…
Вопрос о Shadow DOM и CSP в Vaadin: на самом деле клиент Java-фреймворка до сих пор использует GWT и поэтому там ну… twitter.com/i/web/status/1…
@jsunderhood Вот здесь интересная штука получается.
Vaadin предоставляет компоненты для Enterprise-компаний, котор… twitter.com/i/web/status/1…
14:06
Тред про ограничения Shadow DOM и связанные с ними проблемы.
17:43Как и кастомные элементы, Shadow DOM имеет ряд ограничений, наиболее важные из которых обусловлены самим устройство… twitter.com/i/web/status/1…
17:44Проблема № 1: та же, что и для кастомных элементов — Shadow DOM не работает с выключенным JS. Этот факт делает нево… twitter.com/i/web/status/1…
17:48Кроме того, это также означает проблемы с SEO. В качестве решения в Google советуют Rendertron на базе Puppeteer, к… twitter.com/i/web/status/1…
17:50Существует черновик API декларативного Shadow DOM, над которым работает Mason Freed из Google. Реализация есть в Ch… twitter.com/i/web/status/1…
18:04Декларативный Shadow DOM для изоляции стилей на примере слайдов @shower_me! Развиваю старую идею, как имитировать п… twitter.com/i/web/status/1…
Видео с примером использования декларативного Shadow DOM для изоляции стилей недавно опубликовал Вадим Макеев.
Декларативный Shadow DOM для изоляции стилей на примере слайдов @shower_me! Развиваю старую идею, как имитировать п… twitter.com/i/web/status/1…
18:07
К стабильной версии декларативный Shadow DOM еще не готов. Идет обсуждение рисков, связанных с XSS и санитайзерами.… twitter.com/i/web/status/1…
18:11Проблема № 2: изоляция Shadow DOM создает преграду для связей по ID. В итоге ARIA-атрибуты вроде aria-labelledby не… twitter.com/i/web/status/1…
18:14О том, как эта проблема проявляется на практике, написал Devon Govett из Adobe. Он поделился выводами из своего экс… twitter.com/i/web/status/1…
18:17Решением может стать Accessibility Object Model (AOM). Это целый набор экспериментальных API, которые пока находятс… twitter.com/i/web/status/1…
18:33Одна из идей в рамках AOM — атрибут, позволяющий явно указывать ID элементов, к которым необходим доступ извне. Что… twitter.com/i/web/status/1…
18:41Проблема № 3: изоляция затрагивает также и элемент <form>. Если кнопка в форме находится внутри shadow root, отправ… twitter.com/i/web/status/1…
18:47Справедлива эта проблема и для элементов <input> внутри Shadow DOM. В прошлом Polymer предлагал компонент для сериа… twitter.com/i/web/status/1…
18:56Проблема № 4: отсутствие API для работы с выделенным текстом внутри Shadow DOM при использовании window.getSelectio… twitter.com/i/web/status/1…
18:59В Chrome этот метод реализован на shadow root, в Firefox работает глобальный метод. Но в Safari действует изоляция,… twitter.com/i/web/status/1…
19:03Sam Thorogood из Google написал экспериментальный полифилл, позволяющий обойти это ограничение в Safari. Для одного… twitter.com/i/web/status/1…
19:12Проблема № 5: проблемы с автозаполнением форм. В баг-трекере Chromium есть issue на эту тему, и ему уже больше трех… twitter.com/i/web/status/1…
19:16Затрагивает эта проблема и браузерные расширения, прежде всего менеджеры паролей. Каждому из них потребуется соотве… twitter.com/i/web/status/1…
19:25Проблема № 6: изоляция стилей не работает в случае с font-face и keyframes. Решение этой проблемы требует стандарти… twitter.com/i/web/status/1…
19:34Проблема № 7: сторонние скрипты. Google Tag Manager, A/B тесты, аналитика и все, что так любят добавлять на сайт ма… twitter.com/i/web/status/1…
19:39@jsunderhood Как тестировать страницу с ShadowDOM при помощи Selenium?Вроде был /deep/ комбинатор, но он же deprecated?
Проблема № 8: тестирование. На сегодняшний день Shadow DOM уже поддерживается в Cypress, TestCafe, WebdriverIO и Pl… twitter.com/i/web/status/1…
@jsunderhood Как тестировать страницу с ShadowDOM при помощи Selenium?
Вроде был /deep/ комбинатор, но он же deprecated?
19:45
@jsunderhood Как может быть поддержка в WebdriverIO, но не в Selenium? У них же один и тот же webdriver protocol
Насчет WebdriverIO: поддержка Shadow DOM появилась в версии 5.5.0 и реализация у них своя (поскольку в протоколе We… twitter.com/i/web/status/1…
@jsunderhood Как может быть поддержка в WebdriverIO, но не в Selenium? У них же один и тот же webdriver protocol
19:51
Есть issue на эту тему, где в том числе поделился опытом Diego Ferreiro Val из Salesforce. Согласиться на добавлени… twitter.com/i/web/status/1…
19:53Вроде бы, все основные проблемы перечислил. Есть и другие — например, в Chrome в Shadow DOM не работает перевод стр… twitter.com/i/web/status/1…
19:59Еще есть баг на iOS, связанный с кнопками быстрого перехода между полями формы в Shadow DOM. Он был исправлен совсе… twitter.com/i/web/status/1…
20:03В качестве заключения: проблем у Shadow DOM по-прежнему много, и о них желательно знать заранее (или придется город… twitter.com/i/web/status/1…
20:08@jsunderhood @vergilyush Недавно обнаружил, что порнхаб использует Shadow DOM для рекламных блоков
Да, чуть не забыл: реклама же! Мне однажды тоже довелось встретить div с shadow root в рекламном баннере Яндекс-поч… twitter.com/i/web/status/1…
@jsunderhood @vergilyush Недавно обнаружил, что порнхаб использует Shadow DOM для рекламных блоков
20:10
Так или иначе, статистика показов страниц в Chrome Platform Status говорит сама за себя: по сравнению с кастомными… twitter.com/i/web/status/1…
20:13В завершение темы Shadow DOM — небольшой тред о слотах и композиции, которые я как-то обошел стороной.
20:21Элемент <slot> является частью Shadow DOM и включен в стандарт WHATWG. Во времена “версии 0” в Chrome ему предшеств… twitter.com/i/web/status/1…
20:22Назначение <slot> — проекция контента из так называемого “light DOM” (снаружи) в определенную точку внутри Shadow D… twitter.com/i/web/status/1…
20:26Компонент с Shadow DOM может применять стили к переданным в слоты элементам с помощью псевдоэлемента ::slotted(). В… twitter.com/i/web/status/1…
20:28На практике это означает, что если внутрь слота передать элемент <ul>, то стили к самому списку с помощью ::slotted… twitter.com/i/web/status/1…
20:31При добавлении или удалении элементов на элементе <slot> возникает событие slotchange. Оно не является синхронным и… twitter.com/i/web/status/1…
20:37Кстати, лучший способ более детально ознакомиться с API, о которых я рассказываю (в том числе и слотами) — проект w… twitter.com/i/web/status/1…
20:45Интересный факт: Svelte 3 отказался от нативных слотов, потому что контент в них попадает сразу, тогда как по мнени… twitter.com/i/web/status/1…
20:49На мой взгляд, это достаточно показательный момент: фреймворки предпочитают свою модель композиции, поскольку она л… twitter.com/i/web/status/1…
20:52Vue поддерживает компиляцию в кастомные элементы, используя при этом нативные слоты (но scoped slots не поддерживаю… twitter.com/i/web/status/1…
20:56Одна из возможных перспектив применения слотов — кастомизация нативных элементов (в первую очередь, select). Этой т… twitter.com/i/web/status/1…
21:00Этот проект находится в стадии прототипирования (intent to prototype был опубликован в августе этого года). Кроме с… twitter.com/i/web/status/1…
21:05Заодно стоит упомянуть проект Open UI, в рамках которого разработчики Edge, Salesforce и Chrome обсуждают улучшения… twitter.com/i/web/status/1…
21:12На сегодня все. Завтра поговорим про элемент <template> и его перспективы, а также о разработке на ES-модулях в браузере.
21:13# Четверг 45 твитов
Сегодня начнем с треда про элемент <template>. Раньше он считался частью веб-компонентов, хотя сейчас о нем вспоминают реже.
7:27Содержимое <template> является инертным: элементы не попадают в DOM, скрипты не выполняются, стили не применяются.… twitter.com/i/web/status/1…
7:30Получить содержимое <template> можно с помощью свойства content, используя один из двух методов: content.cloneNode(… twitter.com/i/web/status/1…
7:34На первый взгляд этот элемент прост, и появился он в браузерах намного раньше Custom Elements и Shadow DOM. Тем не… twitter.com/i/web/status/1…
7:52Для IE11 есть полифилл, который имеет ограничения. Например, нельзя использовать <template> внутри элементов <table… twitter.com/i/web/status/1…
7:56Темплейты в Polymer использовались с кастомным синтаксисом для data binding. Вместе с HTML Imports это позволяло пи… twitter.com/i/web/status/1…
8:01Впрочем, создавать <template> можно и в JavaScript. Это полезно для ванильных кастомных элементов: по сравнению с и… twitter.com/i/web/status/1…
8:07Именно этот способ использует библиотека lit-html от команды Polymer, синтаксис которой основан на tagged template… twitter.com/i/web/status/1…
8:26Замечу, что lit-html в этом плане не уникальна. Более того, Andrea Giammarchi утверждает, что в hyperHTML он реализ… twitter.com/i/web/status/1…
8:30Теперь о перспективах <template>. Недостаток этого элемента в том, что он не предоставляет API для интерполяции зна… twitter.com/i/web/status/1…
8:40Наряду с AOM, это один из примеров инициативы со стороны WebKit. Из моих предыдущих твитов могло сложиться впечатле… twitter.com/i/web/status/1…
8:43Развитием идеи Template instantiation является новый черновик DOM Parts за общим авторством разработчиков WebKit и… twitter.com/i/web/status/1…
8:51В перспективе DOM Parts могут сделать манипуляции с DOM более эффективными и упростить написание библиотек вроде li… twitter.com/i/web/status/1…
8:58Напоследок упомяну еще один черновик, предложенный после удаления HTML Imports. Он называется HTML modules и в теор… twitter.com/i/web/status/1…
9:00Как и CSS-модули, которые я упоминал вчера, этот черновик долгое время был заблокирован, но теперь возобновление ра… twitter.com/i/web/status/1…
9:04Возможно, в будущем <template> станет опорой для неких новых конструкций, меняющих наши представления об HTML. Но п… twitter.com/i/web/status/1…
9:11Тред о разработке на ES-модулях в браузерах.
16:29Небольшое предисловие: Polymer всегда продвигал идею bundler-free разработки и HTML Imports в нее хорошо вписывалис… twitter.com/i/web/status/1…
16:30Polymer 1 был полностью написан на ES5, поэтому Babel тоже не требовался — достаточно было поднять nginx. Идиллию н… twitter.com/i/web/status/1…
16:39Кстати, еще команда Polymer пыталась продвигать идею HTTP/2 server push с помощью prpl-server. Популярности этот по… twitter.com/i/web/status/1…
16:44К моменту выхода Polymer 3 в 2017 году все основные браузеры реализовали поддержку ES-модулей. Переход на них был л… twitter.com/i/web/status/1…
16:46На сегодняшний день ES-модули имеют более 90% поддержки. Они реализованы везде, кроме IE11 — для него многие совету… twitter.com/i/web/status/1…
16:49Единственная проблема — отсутствие поддержки bare module specifiers, стиля импортов Node.js. Браузеры понимают толь… twitter.com/i/web/status/1…
16:54В будущем эту проблему планируется решить с помощью Import Maps. Этот черновик предложил Domenic Denicola из Google… twitter.com/i/web/status/1…
16:57Полифилл пропозала Import Maps для браузеров с поддержкой ES-модулей предоставляет пакет ES Module Shims.
17:06Две статьи о разработке на ES-модулях написал Lars Den Bakker из проекта Open Web Components. В первой из них он оп… twitter.com/i/web/status/1…
17:13Вторая часть статьи посвящена проекту es-dev-server. Это сервер для локальной разработки на Koa, который поддержива… twitter.com/i/web/status/1…
17:19es-dev-server пользуется популярностью среди разработчиков веб-компонентов на lit-element. Команда Polymer рекоменд… twitter.com/i/web/status/1…
17:25Новая версия es-dev-server получила название Web Dev Server. Он поддерживает некоторые плагины Rollup, а также пред… twitter.com/i/web/status/1…
17:44Есть и другие похожие инструменты. Пожалуй, самый известный — Snowpack, который разрабатывает Fred K. Schott. Между… twitter.com/i/web/status/1…
17:46Идея Snowpack в двух словах — запустить Rollup один раз после npm install, скомпилировать все зависимости в папку w… twitter.com/i/web/status/1…
17:52С выходом версии 2.0 Snowpack превратился в систему сборки с поддержкой TypeScript, JSX, React, Vue и Svelte и банд… twitter.com/i/web/status/1…
18:07Кроме Snowpack, Fred K. Schott также запустил Skypack — поисковую систему и CDN для пакетов, поддерживающих ES-моду… twitter.com/i/web/status/1…
18:14Опытом разработки на ES-модулях с использованием Snowpack поделился Bryan Braun. В статье описаны ряд аспектов: зав… twitter.com/i/web/status/1…
18:24As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with suppo… twitter.com/i/web/status/1…
Теперь еще об одном проекте. В апреле идеей разработки на ES-модулях загорелся Эван Ю. Отсчет можно вести с этого т… twitter.com/i/web/status/1…
As I was going to bed, I had an idea about a no-bundler dev setup (using native browser ES imports), but with suppo… twitter.com/i/web/status/1…
18:32
@youyuxi seems you got quite inspired by es-dev-server 🤗is there maybe room to collaborate? having full support f… twitter.com/i/web/status/1…
Дальше, по-видимому, Эван увидел мой ретвит, где я упомянул es-dev-server. Вскоре в его проекте появились заимствов… twitter.com/i/web/status/1…
@youyuxi seems you got quite inspired by es-dev-server 🤗
is there maybe room to collaborate? having full support f… twitter.com/i/web/status/1…
18:34
Сегодня Vite находится в стадии release candidate. Его документация содержит упоминания es-dev-server и Snowpack с… twitter.com/i/web/status/1…
18:40Кстати о HMR: авторы Vite и Snowpack при участии Jovi De Croock (Preact) работают над черновиком реализации соответ… twitter.com/i/web/status/1…
18:45Замечу, что эта спецификация HMR имеет ряд отличий от реализации Hot Module Replacement в webpack. Их сравнение при… twitter.com/i/web/status/1…
18:51Недавно экспериментальная поддержка HMR на основе этой спецификации появилась также и в Web Dev Server в качестве п… twitter.com/i/web/status/1…
18:59До сих пор я говорил об инструментах. Но есть и еще один момент: многие пакеты в npm до сих пор не имеют ESM-версии… twitter.com/i/web/status/1…
19:06В рамках esm-bundle для некоторых популярных пакетов настроена автоматическая публикация. Вот, например, версия Cha… twitter.com/i/web/status/1…
19:12Также стоит упомянуть утилиту Dual Publish от Андрея Ситника. Она помогает настроить публикацию ESM и CommonJS верс… twitter.com/i/web/status/1…
19:21Подводя итоги, скажу, что на сегодняшний день ES-модули можно использовать не только как compilation target, но и в… twitter.com/i/web/status/1…
19:33На сегодня все. Завтра поделюсь опытом поддержки библиотеки компонентов в open source. Кроме того, в честь пятницы… twitter.com/i/web/status/1…
19:43# Пятница 42 твита
@jsunderhood для всех интересующихся esm в браузерах, мы недавно создали канал на дискорде, приходите похоливарить: discord.gg/sDcJydJ
В комментариях поделились ссылкой на дискорд о ES-модулях.
@jsunderhood для всех интересующихся esm в браузерах, мы недавно создали канал на дискорде, приходите похоливарить: discord.gg/sDcJydJ
7:06
Кстати, пользуясь случаем, приглашаю в русскоязычный чат о веб-компонентах в Telegram (приходите холиварить и к нам… twitter.com/i/web/status/1…
7:08В этом треде поделюсь опытом трех лет поддержки библиотеки веб-компонентов в open source и расскажу о превозмогании трудностей.
7:56Как я уже упоминал, компоненты Vaadin написаны на Polymer. Почти весь код до сих пор на Polymer 2 и поэтому использ… twitter.com/i/web/status/1…
7:59Для конвертации в Polymer 3 у нас есть CLI-утилита. Любая версия компонента доступна в Bower и npm одновременно, но… twitter.com/i/web/status/1…
8:05Подход, где каждый компонент — отдельный npm пакет, имеет свои недостатки. Например, нужно следить за версиями, что… twitter.com/i/web/status/1…
8:11Кроме того, мы поддерживаем несколько минорных версий и иногда бэкпортим фиксы. В таких случаях важно следить за np… twitter.com/i/web/status/1…
8:16Количество репозиториев тоже создает сложности. Мажорные версии нужно релизить в правильном порядке, обновляя при э… twitter.com/i/web/status/1…
8:23Надеюсь, в будущем удастся перевести разработку библиотеки в монорепу и унифицировать версии. Для API компонентов н… twitter.com/i/web/status/1…
8:28Задача осложняется тем, что у Vaadin есть LTS-релизы и компоненты на Polymer 2 нашей команде предстоит поддерживать… twitter.com/i/web/status/1…
8:33Много репозиториев = много билдов в CI. Мы пока используем Travis, а у него лимит 5 free jobs на организацию. Отпра… twitter.com/i/web/status/1…
8:40Недавно в Travis объявили об изменении ценовой модели. Вкратце, безлимит для open source проектов заканчивается. До… twitter.com/i/web/status/1…
8:52Мы постепенно переходим с Travis на GitHub Actions. Пока общее впечатление положительное. Огорчает отсутствие возмо… twitter.com/i/web/status/1…
9:02Для тестирования мы используем SauceLabs. У них есть бесплатный план для open source по запросу. Правда, как-то раз… twitter.com/i/web/status/1…
9:07@jsunderhood Как у вас работают скриншотные тесты? Визуальный дифф в консоль не вывести.Как смотреть результаты с… twitter.com/i/web/status/1…
Насчет тестов скриншотами: с этим у нас пока все печально. Каждый раз приходится смотреть локально, что именно слом… twitter.com/i/web/status/1…
@jsunderhood Как у вас работают скриншотные тесты? Визуальный дифф в консоль не вывести.
Как смотреть результаты с… twitter.com/i/web/status/1…
9:14
При разработке на GitHub важен удобный project board. Несколько лет назад мы использовали Waffle, идеально подходив… twitter.com/i/web/status/1…
9:35После Waffle пробовали GitHub Projects, там оказалось несколько недостатков: не было возможности связать issue и PR… twitter.com/i/web/status/1…
9:55Разработка продукта в open source подразумевает коммуникацию с теми, кто его использует. Это полезно в смысле выявл… twitter.com/i/web/status/1…
11:16Иногда коммуникация с сообществом позволяет найти кандидатов, которые впоследствии присоединятся к команде. Я сам б… twitter.com/i/web/status/1…
11:21Для общения у нас есть канал в слаке Polymer Project. Там иногда появляются мейнтейнеры lit-html, в том числе Justi… twitter.com/i/web/status/1…
11:28В прошлом мы в Vaadin также использовали Gitter. На мой взгляд, он был удобен только ссылками на issue. Никаких осо… twitter.com/i/web/status/1…
11:45Немного о процессах. Раз в неделю мы просматриваем новые issue, стараемся на них отвечать и добавляем метки. Также… twitter.com/i/web/status/1…
12:09Иногда бывает и так, что доходят руки до issue, висевшего без ответа несколько месяцев. Я в таких случаях всегда ис… twitter.com/i/web/status/1…
12:12Когда issue много, они превращаются в груз, который производит угнетающее впечатление. Простой способ "решить" проб… twitter.com/i/web/status/1…
12:31Единственный способ разгрести груду тикетов — постоянство и автоматизация. Помогает даже использование меток. Еще о… twitter.com/i/web/status/1…
12:47Улучшения требуют времени. У нас в Vaadin для этого есть Community Friday: пятница в конце двухнедельного спринта.… twitter.com/i/web/status/1…
13:20@jsunderhood @intercom Похоже у вас прямо гигантский тул.
Я записываю все такие интересные штуки, но по сравнивать… twitter.com/i/web/status/1…
Отвечаю на вопрос о визуальном конструкторе Vaadin: сейчас в разработке плагин для VSCode для приложений на lit-ele… twitter.com/i/web/status/1…
@jsunderhood @intercom Похоже у вас прямо гигантский тул.
13:58
Я записываю все такие интересные штуки, но по сравнивать… twitter.com/i/web/status/1…
Тред в честь пятницы 13-го. О человеческом факторе и багах.
18:33Для начала простой факт: у фреймворка Vaadin есть версия 14.1.5. Следующая за ней имеет номер 14.1.16. К счастью, э… twitter.com/i/web/status/1…
18:35В тот раз отличился не я, но в моей карьере тоже бывало всякое. До перехода во фронтенд я больше 7 лет работал в IT… twitter.com/i/web/status/1…
18:40Работа включала в себя применение SQL-скриптов, присылаемых разработчиками по скайпу. Возможно, вы слышали шутку пр… twitter.com/i/web/status/1…
18:43@jsunderhood Не очень понятен смысл твита. В чем баг? Версия же все равно выше
Смысл в том, что это могла быть и мажорная версия. Менеджмент вряд ли бы этому обрадовался. Как известно, из npm по… twitter.com/i/web/status/1…
@jsunderhood Не очень понятен смысл твита. В чем баг? Версия же все равно выше
18:52
Более 7 лет я нажимал .bat-файлы и вводил нужные даты. Утром, под конец 12-часовой ночной смены, это требует чуть б… twitter.com/i/web/status/1…
18:58От человеческого фактора не застрахован никто. Я достаточно долго был подвержен такому риску, хотя это конечно же н… twitter.com/i/web/status/1…
19:06Благодаря человеческому фактору мне случалось ехать в офис среди ночи, чтобы помогать коллеге поднимать базу из бэк… twitter.com/i/web/status/1…
19:12Прошло почти 5 лет с тех пор, как я сменил профессию. Но и сейчас я каждый раз тщательно проверяю версии и на секун… twitter.com/i/web/status/1…
19:18В целом фронтенд намного спокойнее. Хотя тут можно, например, ошибиться в названии переменной. Однажды я так и сдел… twitter.com/i/web/status/1…
19:24По крайней мере, теперь мне не приходится чинить авралы. Хотя изредка они случаются по вине браузеров. Например, в… twitter.com/i/web/status/1…
19:30@jsunderhood Не значит ли это что больше 2х месяцев это никого не интересовало?
Разумеется. Иногда бывает и такое. Это как раз то, к чему я клоню: если уж проблему не удалось предупредить, ее нуж… twitter.com/i/web/status/1…
@jsunderhood Не значит ли это что больше 2х месяцев это никого не интересовало?
19:37
А еще о проблемах надо говорить. Я упоминал, что часть проектов мои коллеги перенесли в монорепозиторий. До этого я… twitter.com/i/web/status/1…
19:42Автоматизация занимает время, которого приходится добиваться с боем. Зато доля человеческого фактора снижается, а р… twitter.com/i/web/status/1…
19:48На этом на сегодня закончу. На выходные заготовленных тем у меня нет, но поделюсь некоторыми материалами о веб-компонентах.
20:02# Суббота 11 твитов
Как и обещал, делюсь полезными материалами о веб-компонентах.
16:18Доклад Jan Miksovsky “Creating Customizable Web Components” с описанием некоторых приемов из библиотеки компонентов… twitter.com/i/web/status/1…
16:20Доклад “Web Component Styling & Theming” от Justin Fagnani. Советую тем, кому интересно больше узнать о приемах сти… twitter.com/i/web/status/1…
16:27Shadow DOM in depth — неплохое чтиво, где некоторые моменты на мой взгляд изложены чуть более подробно и наглядно,… twitter.com/i/web/status/1…
16:35Shipping Web Components in 2020 — довольно интересная статья, в которой Joe Pettersson из Banked.js делится опытом… twitter.com/i/web/status/1…
16:49Looking back on five years of web components — еще более подробная статья от Joe Gregorio о том, как команда Skia п… twitter.com/i/web/status/1…
16:57Web Components punch list — простой чеклист доступности для кастомных контролов (в том числе, веб-компонентов) от S… twitter.com/i/web/status/1…
17:28Storybook for web components on steroids — статья от Thomas Allmer из проекта Open Web Components о создании storyb… twitter.com/i/web/status/1…
17:38Очень подробная статья от David Lorenz о проблеме реализации изоморфного рендеринга веб-компонентов на примере Vue.
18:03Статья от Jan Miksovsky о нюансах, которые нужно учитывать и о задачах, которые приходится решать, создавая свой co… twitter.com/i/web/status/1…
18:21Много статей и примеров есть в подборке Web Components the Right Way — это awesome-list, который я мейнтейню уже по… twitter.com/i/web/status/1…
18:26# Воскресенье 19 твитов
В завершение недели собираю все треды о веб-компонентах в один.
18:31Тема первого дня — кастомные элементы. Как в узком смысле (часть стандарта HTML), так и в широком (framework-agnost… twitter.com/i/web/status/1…
Кастомные элементы: знакомство.
Тема первого дня — кастомные элементы. Как в узком смысле (часть стандарта HTML), так и в широком (framework-agnost… twitter.com/i/web/status/1…
18:31
Возможны, вы заметили, что до сих пор я избегал термина “веб-компоненты”. Думаю, тред на эту тему будет не лишним.
О том, почему не взлетели веб-компоненты.
Возможны, вы заметили, что до сих пор я избегал термина “веб-компоненты”. Думаю, тред на эту тему будет не лишним.
18:33
Тред о применении кастомных элементов в 2020. С момента релиза Firefox 63 прошло почти два года, в Safari поддержка… twitter.com/i/web/status/1…
О применении кастомных элементов в 2020.
Тред о применении кастомных элементов в 2020. С момента релиза Firefox 63 прошло почти два года, в Safari поддержка… twitter.com/i/web/status/1…
18:35
Первый тред на сегодня — о том, нужны ли кастомным элементам библиотеки и в каких случаях можно обойтись vanilla JS.
Нужны ли кастомным элементам библиотеки?
Первый тред на сегодня — о том, нужны ли кастомным элементам библиотеки и в каких случаях можно обойтись vanilla JS.
18:35
Тред про кастомные элементы без зависимостей, с примерами из личного опыта. И заодно немного о best practices.
Опыт написания кастомных элементов без зависимостей.
Тред про кастомные элементы без зависимостей, с примерами из личного опыта. И заодно немного о best practices.
18:36
Тред о кастомных элементах на TypeScript и тестировании.
Немного о TypeScript и тестировании кастомных элементов.
Тред о кастомных элементах на TypeScript и тестировании.
18:37
Я обещал рассказать о не решенных проблемах кастомных элементов. В этом треде перечислю основные из них.
Проблемы кастомных элементов.
Я обещал рассказать о не решенных проблемах кастомных элементов. В этом треде перечислю основные из них.
18:38
Сегодняшняя тема — Shadow DOM, его возможности и ограничения. Начнем с треда о главной проблеме, которую Shadow DOM… twitter.com/i/web/status/1…
Изоляция стилей в Shadow DOM.
Сегодняшняя тема — Shadow DOM, его возможности и ограничения. Начнем с треда о главной проблеме, которую Shadow DOM… twitter.com/i/web/status/1…
18:41
Кроме изоляции стилей, Shadow DOM влияет и на то, каким образом они добавляются на страницу. Тред о том, что это зн… twitter.com/i/web/status/1…
Особенности подключения CSS в Shadow DOM.
Кроме изоляции стилей, Shadow DOM влияет и на то, каким образом они добавляются на страницу. Тред о том, что это зн… twitter.com/i/web/status/1…
18:44
Еще один важный аспект Shadow DOM — кастомизация стилей. При наличии изоляции это становится проблемой, поскольку н… twitter.com/i/web/status/1…
Кастомизация и CSS Shadow Parts.
Еще один важный аспект Shadow DOM — кастомизация стилей. При наличии изоляции это становится проблемой, поскольку н… twitter.com/i/web/status/1…
18:45
Тред про ограничения Shadow DOM и связанные с ними проблемы.
Ограничения и проблемы Shadow DOM.
Тред про ограничения Shadow DOM и связанные с ними проблемы.
18:46
В завершение темы Shadow DOM — небольшой тред о слотах и композиции, которые я как-то обошел стороной.
Композиция и слоты в Shadow DOM.
В завершение темы Shadow DOM — небольшой тред о слотах и композиции, которые я как-то обошел стороной.
18:46
Сегодня начнем с треда про элемент <template>. Раньше он считался частью веб-компонентов, хотя сейчас о нем вспоминают реже.
Элемент <template> и его перспективы.
Сегодня начнем с треда про элемент <template>. Раньше он считался частью веб-компонентов, хотя сейчас о нем вспоминают реже.
18:46
Тред о разработке на ES-модулях в браузерах.
Разработка на ES-модулях в браузерах.
Тред о разработке на ES-модулях в браузерах.
18:47
Как и обещал, делюсь полезными материалами о веб-компонентах.
Полезные материалы о веб-компонентах.
Как и обещал, делюсь полезными материалами о веб-компонентах.
18:48
Веб компоненты должны были упростить веб, но:
Неплохое резюме прошедшей недели андерхуда, хотя не могу сказать, что в полной мере разделяю пессимизм автора.
Веб компоненты должны были упростить веб, но:
19:08
От себя могу только добавить, что погружение в эту сферу принесло мне интересный опыт, которого я мог бы и не получ… twitter.com/i/web/status/1…
19:11С вами был @iamkulykov. Спасибо всем за внимание и комментарии. Напомню, что у меня есть и англоязычный аккаунт… twitter.com/i/web/status/1…
20:03
→