У Symbiote.js — серьезные проблемы

На днях, я опубликовал новость о выходе новой версии UI-библиотеки Symbiote.js, с обзором ее функций и необычной концепции. Я давно пишу на Хабре (и не только) о веб-компонентах и решениях на их основе, и знаю полный набор стандартных сомнений и возражений аудитории. Сегодня, я хотел бы познакомить вас с проблемами и компромиссами, на которые пришлось пойти, но уже от лица автора либы, человека, очень хорошо знающего, что там под капотом, то есть - меня самого.

https://habr.com/ru/articles/1009550/

#webcomponents #open_source #ssr #ssg #custom_elements #symbiotejs #shadow_dom #devrel #loose_coupling #architecture

Symbiote.js — изоморфные веб-компоненты (клиент + сервер)

Привет, Хабр! Меня зовут Алекс, и я мейнтейнер Symbiote.js - библиотеки для создания UI-компонентов и изоморфных приложений на самых современных веб-стандартах. Сегодня я расскажу про наше важное мажорное обновление - версию 3.x.

https://habr.com/ru/articles/1008822/

#webcomponents #ssr #symbiotejs #frontend #backend #изоморфизм #nodejs #custom_elements #shadow_dom #open_source

Вайбкодинг: как сгенерировать код расширения для визуализации ссылок в закладках браузера с помощью ИИ

Знакомо чувство, когда читаешь документацию, а через десяток страниц уже не помнишь, что именно успел изучить? Или когда возвращаешься к старой статье и не можешь понять — ты уже видел эту ссылку или нет? В эпоху информационного перегруза даже закладки перестают быть спасением — они просто копятся где‑то на панели, а на странице по‑прежнему нет никаких намёков, что ты здесь уже был. Но что если заставить браузер самому отмечать ссылки, которые у вас уже сохранены? Чтобы слева от каждой знакомой ссылки возникала метка с названием папки из закладок — как тихий намёк: «Ты это уже сохранял, не потеряй» . Сегодня мы не просто поговорим об идее — мы сгенерируем через нейросеть готовое расширение для Chrome, которое сделает это за нас. А заодно разберёмся, как такие инструменты создавать, тестировать и даже улучшать — шаг за шагом, от первого промпта до работающего прототипа. Пристегнитесь, будет интересно!

https://habr.com/ru/companies/bothub/articles/986406/

#вайбкодинг #расширения_для_браузеров #chrome #brave #javascript #shadow_dom

Slider с использованием Web Components + Shadow Dom

Пишем Slider с Web Components В этой статье мы создали полнофункциональный слайдер, используя современные веб-стандарты. Мы не только реализовали базовую логику, но и освоили ключевые концепции: - Работу с Shadow DOM для изоляции стилей и структуры - Использование слотов для композиции контента - Реакцию на атрибуты для настройки поведения компонента - Организацию жизненного цикла через connectedCallback

https://habr.com/ru/articles/964180/

#Web_Components #Shadow_Dom #Declarative_Shadow_Dom

[Перевод] HTML мёртв, да здравствует HTML

Браузеры — это очень странный мир. Хотя WebAssembly добился успеха, в том числе и на серверах, клиент по-прежнему ощущается примерно таким же, как и десять лет назад . Энтузиасты будут говорить вам, что доступ к нативным веб-API через WASM — это решённая задача, достаточно лишь минимального клея JS . Но никто не задаёт вопрос, зачем нам вообще нужно получать доступ к DOM. Это лишь один из вариантов. В этой статье мне бы хотелось объяснить, почему уже настало время отправить DOM и всевозможные API на радугу, а также поделиться некоторыми идеями о том, как это сделать. Не буду притворяться, что знаю о браузерах всё. Сегодня уже никто не знает всего, в этом-то и проблема.

https://habr.com/ru/articles/943442/

#accessibility #dom #shadow_dom #семантический_web

[Перевод] Веб-разработка на ванильном HTML, CSS и JavaScript: стилизация и сайты

Это вторая статья из цикла переводов о веб-разработке на чистых (ванильных) технологиях — без фреймворков и сторонних инструментов, только HTML, CSS и JavaScript. В первой части мы обсудили, почему такой подход может быть разумной альтернативой современным фреймворкам и рассмотрели использование веб-компонентов в качестве базовых строительных блоков для создания более сложных примитивов. В этот раз поговорим про стилизацию, а также деплой компонентов в продакшен без использования сборщиков, фреймворков или серверной логики.

https://habr.com/ru/companies/ruvds/articles/910734/

#ruvds_переводы #вебкомпоненты #custom_elements #shadow_dom #html_шаблон

[Перевод] Веб-разработка на ванильном HTML, CSS и JavaScript

В этой серии статей мы расскажем, как выполнять веб-разработку исключительно на ванильных технологиях. Ни инструментов, ни фреймворков, лишь HTML, CSS и JavaScript. Современные фреймворки веб-разработки обладают мощными возможностями для быстрой разработки хорошо структурированных веб-приложений, поэтому они стоят изучения. Однако за эту богатую функциональность приходится расплачиваться сложностью фреймворков и инструментария, а для обеспечения безопасности и актуальности проектов часто требуется регулярная поддержка. Выбрав ванильный стиль веб-разработки, мы обмениваем кратковременное удобство на такие долговременные преимущества, как простота и практически нулевая поддержка. Такой подход возможен благодаря современному уровню развития браузеров, обеспечивающих превосходную поддержку веб-стандартов.

https://habr.com/ru/companies/ruvds/articles/909390/

#ruvds_переводы #вебкомпоненты #custom_elements #shadow_dom #html_шаблон

[Перевод] Веб-разработка на ванильном HTML, CSS и JavaScript

В этой серии статей мы расскажем, как выполнять веб-разработку исключительно на ванильных технологиях. Ни инструментов, ни фреймворков, лишь HTML, CSS и JavaScript. Современные фреймворки веб-разработки обладают мощными возможностями для быстрой разработки хорошо структурированных веб-приложений, поэтому они стоят изучения. Однако за эту богатую функциональность приходится расплачиваться сложностью фреймворков и инструментария, а для обеспечения безопасности и актуальности проектов часто требуется регулярная поддержка. Выбрав ванильный стиль веб-разработки, мы обмениваем кратковременное удобство на такие долговременные преимущества, как простота и практически нулевая поддержка. Такой подход возможен благодаря современному уровню развития браузеров, обеспечивающих превосходную поддержку веб-стандартов.

https://habr.com/ru/companies/ruvds/articles/909390/

#ruvds_переводы #вебкомпоненты #custom_elements #shadow_dom #html_шаблон

А что, так можно было?

Привет Хабр! Меня зовут Алекс, и я автор фронтенд-библиотеки для создания UI-компонентов-агностиков - Symbiote.js . Я не единственный разработчик, но главный контрибьютор и тот, кто отвечает за концепцию, развитие, документацию, деврел, DX все остальное. Мейнтейнер то есть. Всем этим я занимаюсь в свободное от другой работы время, на которой я фуллстек, R&D-инженер и техлид. Сегодня, я бы хотел рассказать о том, как появился Симбиот, и почему он вообще существует, при наличии огромного зоопарка библиотек и фреймворков для фронтенда, с куда более значительной аудиторией и поддержкой от крупных IT-компаний. Ведь мы, инженеры, очень НЕ любим, когда вокруг нас начинают плодиться лишние сущности, и сразу начинаем угрожающе размахивать бритвой Оккама. Верно? (хитро прищурился)

https://habr.com/ru/articles/846396/

#web_components #symbiotejs #javascript #custom_elements #shadow_dom #react #redux #nextjs #web_developement #frontend