Macaron is an open-source UI design tool to create and maintain Web Components.
Macaron | Visual component editor for Web development
Macaron is an open-source UI design tool to create and maintain Web Components.
EngineeringHow we use Web Components at GitHubAt GitHub, we pride ourselves on delivering a first-class developer experience. A considerable part of our work is on our front end, which we strive to keep as lightweight, fast,… At GitHub, we pride ourselves on delivering a first-class developer experience. A considerable part of our work is on our front end, which we strive to keep as lightweight, f
WebComponents でログインコンポーネントをつくってサービス横断で使えるようにした話 - 一休.com Developers Blog
こんにちは。プロダクト開発部の渥美 id:atsumim です。 今回サービス横断で利用できるログインコンポーネントを WebComponents で実装したのでその紹介をします。 1. 背景 今年の2月に電話番号での会員登録及び認証機能をリリースしました。 これに伴って一休の会員基盤も刷新しました。 一休のサービスは主に、宿泊、レストラン、スパとあるのですが、 歴史的経緯により会員基盤が分散してしまっていたので、ひとつにまとめる狙いもありました。 会員基盤 Before/After その一環として、一休のサービスで横断して使えるログインコンポーネントを WebComponents で実装しました。 このコンポーネントにログインや会員登録の処理を集約し、新会員基盤へのインターフェースとするようにしました。 また、電話番号認証や2段階認証設定のモーダルも実装しました。下記が実際の画面です。
こんにちは。レシピサービス開発部のkaorun343です。クックパッドではスマートフォン向けページにおける開発者体験向上のために、レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話にて紹介したとおり、Next.jsとGraphQLを用いたモダンな環境へと移行を進めています。例えばモバイル端末からのアクセスでURLがトップページの / であれば Rails、レシピ詳細ページの /recipe/:id であれば Next.js アプリにルーティングされるようになっています。現在ではレシピ詳細ページだけではなく検索結果ページやつくれぽ詳細ページ、MYフォルダページなどもNext.jsアプリケーションに置き換わっています。今回はその移行により生じた課題と取り組み方、それから併せて実施したモノレポ環境整備について紹介します。 共通コンポーネントの導入背
@nekobatoです。メルカリDesign SystemのWeb版開発者をしています。以前の記事で新しくなったメルカリ Webの紹介がありましたが、本記事ではそこで使われている、同じく新しくなったDesign System Webの紹介をします。 Design System Webの提供 Design Systemを元にした実装の構造はプラットフォームごとに異なりますが、Design System Webはmonorepoで管理されたnpm module群で、プロダクトはモジュールを用途に合わせて利用可能です。全てを使う必要はなく、基本的にはコンポーネントモジュール（CoreまたはReact）を利用すればDesign Systemの恩恵を受けられます。現在は新しくなったデザインのメルカリ Webで実際に利用例を見ることができます。 この記事はDesign System Webの技術的な概
Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive. Principles#Get to know our foundational thinking and how we put it into action across our design system. Learn about our principles
対象読者 AngularやReactなどのフレームワークに頼らずに再利用可能なHTMLやCSSを整備したいマークアップエンジニア AngularやReactなどのフレームワークとWeb Componentsを併用する利点を学びたいJavaScriptエンジニア 前提環境 筆者の検証環境は以下の通りです。 macOS Monterey 12.4 Google Chrome 102.0.5005.115 Web Componentsを構成する3種のAPI群 前回は、再利用可能なUI部品があることの嬉しさと、ブラウザで再利用可能なUI部品を作るための技術「Web Components」について概要を解説しました。今回はもう少し解像度を高めて、どんな役割のAPIがあるのかを確認していきましょう。まずは前回の復習です。Web Componentsには大別して次の3つの技術の組み合わせによって成り立っ
「リアクティブコントローラ」導入がもたらすかもしれないウェブフロントエンド設計の変化 | フューチャー技術ブログ
フロントエンド連載2日目のエントリーです。 あまり話題になっていないような気がしますが、Web Componentsを実装するためのフレームワークのLit-Element v3がバージョンアップして、ついでにリブランディングしてLit v2.0となりました。ロゴも変わり、ウェブサイトも新しくなりました。 Introducing “Lit” for Web Components 本当はこのLitの紹介をこの連載でしようとしたのですが、上記のウェブサイトがすごく詳しいので、単に紹介するだけの記事だとあまり価値がないので、この中のコントローラ機能のみをとりあげようと思いますが、まずはWeb Componentsとは、というところを説明します。 n回目のWeb Components元年以前次のような記事を書きました。最初のPolymerというフレームワークが推進していたころよりも、ブラウザ対応も進
CSS in JSはJavaScriptのコード中にCSSを書くプログラミング手法で、styled-componentsなどがメジャーどころです。現代的な開発では、ReactやVueといったフロントエンド用のViewライブラリを使う際にCSS in JSのお世話になることがよくあります。 この記事では、次の時代のCSS in JSはWeb Componentsベースのものになるのではないかという話をします。 Web Componentsの復習 Web ComponentsはいくつかのWeb標準の総称であり、特に重要なのはCustom ElementsやShadow DOMです。いずれも、V1と呼ばれる仕様は全てのモダンブラウザでサポートされています（Safariが一歩遅れていて少し心配ですが）。 https://caniuse.com/custom-elementsv1 https://c
morishitaです。 先日、Web Componentついて書きました。 tech.actindi.net 多くのブラウザで動作できるようになってきていることは確認できました。 ただ、実装方法についてはもっと良い方法がないものかと思いました。 と思っていたら、Vue.jsが Web Components もサポートしているではないですか！ で、やってみました。 環境準備 手っ取り早く試すためにVue CLIを使います。 次のコマンドでインストールできます。 $ yarn global add @vue/cli インストールできたらプロジェクトを作ります。 このエントリではvue-web-componentsという名前で作りますが、 なんでも構いません。 次のコマンドを実行するといろいろ質問されます。 $ vue create vue-web-components 今回は次の様に答えまし
Web Design System: Migrating Web Components To React | Mercari Engineering
This post is for Day 8 of Mercari Advent Calendar 2022, brought to you by Williams Kwan from Mercari Core team and Faisal Rahman from the Mercari Architect team. Intro Mercari internal design systems power the UI in Mercari web apps. It allows Frontend engineers to implement UI changes quickly by providing UI building blocks. The design system is currently built using Web Components but we are in
Skip the boilerplate Building on top of the Web Components standards, Lit adds just what you need to be happy and productive: reactivity, declarative templates and a handful of thoughtful features to reduce boilerplate and make your job easier. Every Lit feature is carefully designed with web platform evolution in mind. Tiny footprint, instant updates Weighing in at around 5 KB (minified and compr
概要 2021/04/22に新しいWeb Componentsライブラリ、Lit(Lit 2.0)がリリースされ、同日ローンチイベントもYouTubeで生配信されました。 それに伴いPolymer ProjectがLitに改名されロゴが刷新されました。 ウェブサイトも新しく公開されました。チュートリアルとPlaygroundが刷新され、非常に便利になりました。 実装は https://github.com/lit/lit に公開されています。 LitElementとlit-htmlのおさらい 旧Polymer Project（Lit 1.0）では、lit-html(HTMLテンプレートライブラリ)とLitElement(Web Componentsを実装するためのライブラリ)の2つのライブラリが提供されていました。 LitElementにもテンプレート機能があったので、2つとも独立したライ
If not SPAs, What?
A few months ago, I wrote an article about how the SPA pattern has failed to simplify web development. The SPA pattern (Single-Page Apps), I tried to define, was about the React model, which also covers, to a large extent, the model of Vue, Angular, and other frontend frameworks. Like any critique, it begs for a prescription and I didn’t give one, other than gesturing toward server-side frameworks
ep.68 Web Standard な Modular CSS - 現場で使ってみてわかる Shadow DOM の嬉しさ | UIT INSIDE
@AlanGDavalos が Web Platform Study Group Organizer の @takanoripe, LINE 証券フロントエンドエンジニアの @uhyo_ と共に、 Shadow DOM について語りました。 ゲスト紹介 @takanoripe https://twitter.com/takanoripe UI Designer / Front-End Engineer Web Platform Study Group Organizer 言及した Shadow DOM 関連の資料 https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM https://javascript.info/shadow-dom https://qiita.com/alangdm/it
最初に この記事では普通の DOM を 「Light DOM」 と呼び 「Shadow DOM」 と明確に区別して扱います。 Shadow DOM とは？ Shadow DOM は Web Components の標準仕様の一部ではありますが実はブラウザーには結構前から実装されているものです。 <video>タグなどは Shadow DOM を使っているが Web Components の標準仕様に入るまでは自由に使うことはできませんでした。 Shadow DOM とは？ (2) そして Edge も Chromium の仲間入りをしたことで Shadow DOM も含めての全ての Web Components の標準仕様がモダーンなブラウザーで使えるようになりました！！ 🎉 Shadow DOM とは？ (3) Shadow DOM を使えば Light DOM から独立した DOM
A few weeks ago, Adobe released a web version of Photoshop that is built with the web technologies like WebAssembly, web components, P3 colors, and a lot more. Photoshop was the first professional design app that I learned when I was 14 years old. It was one of the reasons that I became a designer, and eventually a front-end developer. Because of that, I thought it would be interesting to see how
WebComponents.dev
The only online IDE for Web Components Build components, push to Git and publish to npm without all the hassle.
「東京Node学園」は、Node.js日本ユーザグループ主催のNode.js勉強会です。36時限目の今回は、オンラインで開催されました。shibu_jp氏は、Web ComponentsライブラリであるLit 2.0の概要と、Web Componentsの部品の作り方を発表しました。 10年近く前に誕生したWeb Components shibu_jp氏（以下、shibu_jp）：10分なのに、スライド30枚以上もあるので、ちょっと駆け足でいきます。 まず「お前誰？」ということですが、現在はフューチャー株式会社でコンサルタントをやっています。JavaScript、Go、Pythonをよく書いているのですが、最近はお仕事でFlutterを書いています。 フューチャーは1次請けで、2次請けにも投げないで、開発・実装・運用・設計まで全部やるコンサルタントの会社です。Vue.jsのコアメンバーがい
はじめに あまり知られていないかもしれませんが、Svelteを使ってWeb Componentsを開発することができます。 本記事ではSvelteを使ってWeb Componentsを開発するやり方を紹介したいと思います。 Web Componentsとは webcomponents.orgから引用 Web Componentsは、WebプラットフォームAPIのセットで、WebページやWebアプリケーションで使用する、新しいカスタム、再利用可能な、カプセル化されたHTMLタグを作成することを可能にします。カスタムコンポーネントとウィジェットはWeb Componentsの標準に基づいて構築され、モダンブラウザで動作し、HTMLで動作するあらゆるJavaScriptライブラリやフレームワークで使用することができます。 Web Componentsは、既存のWeb標準をベースにしています。We
Build better business applications, faster.No more juggling REST endpoints or deciphering GraphQL queries. Hilla seamlessly connects Spring Boot and React to accelerate application development. Get Started Call Java services directly from ReactUse @BrowserCallable to make a Spring @Service class available to your browser. Hilla uses Spring Security to ensure only the right people have access. @Bro
In Safari Technology Preview 162 we enabled the support for ElementInternals and the form-associated custom elements by default. Custom elements is a feature which lets web developers create reusable components by defining their own HTML elements without relying on a JavaScript framework. ElementInternals is a new addition to custom elements API, which allows developers to manage a custom element’
UI5 Web Components
Easy to consume Based on web standards - just HTML! Future-proof. Easy to add to your project. Lightweight Tiny – come with a minimal footprint. Modular – take only the parts you need. Fast - built with performance in mind. Enterprise Ready Implement the SAP Fiori design language. Feature-rich. Secure, accessible, themeable, i18n-ready.
@open-wc/semantic-dom-diff
Testing >> Semantic Dom Diff ||40 semantic-dom-diff allows diffing chunks of dom or HTML for semantic equality: whitespace and newlines are normalized tags and attributes are printed on individual lines comments are removed style, script and SVG contents are removed tags, attributes or element's light dom can be ignored through configuration Manual Setup Chai Plugin While semantic-dom-diff can be
Open Web Components
Open Web Components Open Web Components provides guides, tools and libraries for developing web components Why Open Web Components? Smart Defaults Enjoy the peace of mind that comes from having a well-known default solution for almost everything. From linting to testing to demos to publishing - have the full experience. Awesome Generators Get up and running quickly with opinionated generators, or
Say Hello to selectmenu, a Fully Style-able select Element I want to introduce you to a new, experimental form control called <selectmenu>. We’ll get deep into it, including how much easier it is to style than a traditional <select> element. But first, let’s fill in some context about why something like <selectmenu> is needed in the first place, as it’s still evolving and in development. Ask any w
Spectrum Web Components Spectrum Web Components The Spectrum Web Components project is an implementation of Spectrum, Adobe’s design system. It's designed to work with any web framework — or even without one. Accessible by default # Developed with existing and emerging browser specifications in mind, our components deliver a high quality experience whether using a screen reader, keyboard navigatio
フロントエンド開発者的週刊アスキーへの道（ならず）
あらかじめおことわり 🙇割と週刊アスキーを持ち上げるような内容となっていますが私は週刊アスキーとの関係は一切ございません。 週刊アスキー、唯一のプログラマー向け連載 「週刊アスキー」と言えば、自作PCを始め、どちらかというとハードウェアについての話題が多いイメージがある、かも知れません。私自身そう思っていたのですが、実は何年間も「JavaScriptの部屋」という連載が続いています（リンク先の記事一覧は最新の日付が2017年になっていますが、本誌ではずっと続いています。かつてはウェブサイトと本誌両方で掲載していたのでしょうか）。「JavaScriptの部屋」では、HTMLファイル一つに収まる程度の大きさの、それでもなかなか面白くて役に立ちそうなプログラムを、毎週紹介してくれます。 「昔のベーマガかよ！」なんてツッコミを待っているかのごとく、ソースコード全体をそのまま紙面に載せてくれている
Web Components and SEO
We all understand how important SEO is and how crucial it is for crawlers to be able to understand our content in our sites and apps. I work at Red Hat on the Customer Portal, our support and documentation site, and over the last 90 days, 72% of our referred traffic has come from search engines. That’s a big number. So our technology choices on how we deliver content to our users really matters. W
Framework-independent standalone HTML serializer for generating markup for Web Components. Expand any HTML element (including custom elements and web components) to HTML with defined conventions from web standards. This means that Web Components created with WebC are compatible with server-side rendering (without duplicating author-written markup). Compilation tools to aggregate component-level as
GitHub - ssleptsov/ninja-keys: Keyboard shortcuts interface for your website. Working with static HTML, Vanilla JS, Vue, React, Svelte.
A lot of applications support a common pattern where the user hits ⌘+k (or ctrl+k) and a search UI dialog appears. I've recently seen this in Notion, Slack, Linear, Vercel and Algolia, but I'm sure there are plenty more. Apple Spotlight, Alfred and the Raycast app also have a similar pattern, but with different shortcuts. There are already some libraries built for this, but they are too framework
GitHub - ficusjs/ficusjs: FicusJS is a set of lightweight functions for developing applications using web components
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
StencilでかんたんにWeb Componentsを実装する | フロントエンドBlog | ミツエーリンクス
Stencilは、Ionic Frameworkチームが開発したWeb Componentsコンパイラです。 開発環境にTypeScript、JSX、VirtualDOM、データバインディング、非同期レンダリングなどのWeb開発技術を網羅しており、ビルド後はWeb標準に準拠したWeb Componentsのソースコードを生成してくれます。 今回はStencilの導入方法を紹介します。 Stencilのインストール 適当なディレクトリで以下のコマンドを実行しましょう。 npm init stencil そうするとStencilが提供するスターターの選択肢がコマンドラインに表示されます（コマンドを実行するにはnpm v6以上が必要です）。 ? Pick a starter » - Use arrow-keys. Return to submit. ionic-pwa Everything yo
GitHub - microsoft/vscode-webview-ui-toolkit: A component library for building webview-based extensions in Visual Studio Code.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Tonic
1 file. 1 class. ~350 lines of code. No build tools required. Native web components. Ideal for JAM stacks. Identical on client & server. Composition oriented. Event delegation by default Lots of examples. Getting Started Building a component with Tonic starts by creating a function or a class. The class should have at least one method named render which returns a template literal of HTML. import T
Preact を使って作ったコンポーネントを Web Components として誰でも使えるように実装してみます。 Preact とは Preact は軽量な alternative React です。 Fast 3kB alternative to React with the same modern API React よりも軽量ながら React と同じような API で UI を作成できます。 Web Components とは Web Components は、Web のアプリケーションの中で再利用可能でカプセル化された独自の HTML タグを作成するための Web プラットフォームの API です。 Web Components は以下の 3 つの主な技術からなっているもので、それらを組み合わせることで独自の HTML タグを作成できます。 カスタム要素 Shadow DOM
morishitaです。 プログラムを部品化して再利用したい。 コードを書く人間にとってはいつも考えていることですし、永遠のテーマなのではないかと思います。 オブジェクト指向はクラスとしてパッケージしたコードを再利用する仕組みを提供します。関数型言語は関数で。 言語レベルでなくても、コードを分割し再利用する仕組みはフレームワークやビルドシステムなどいろんな形で存在します。 Web Components もそんな再利用の仕組みの1つです。 ちょっと前に、「すでにモバイルではポリフィルなしでも使える状況になってきている」と聞きかじって気になっていました。 で、ちょっと試して見ました。 なお、このエントリではPolymerなどの polyfill は使いません。 Web Componentsとは？ Web ComponentsはざっくりいうとオリジナルのHTMLタグを作るための仕組みです。JSP
1 file. 1 class. ~350 lines of code No build tools required Based on native web components Getting Started Building a component with Tonic starts by creating a Javascript Class. The class should have at least one method named render which usually returns HTML. class MyGreeting extends Tonic { // // The render function can return a template-literal of HTML, // it can also include other components.
Web Componentsとは？ - 開発者はどんな時に Web Components の利用を検討すべきか 開発者がウェブサイトの構築を行う場合、一般的には次のようなHTMLとJS、CSSを組み合わせて行うことが多いかと思います。 <div><button onclick="doSomethingFunction">Click me</button></div> + JavaScript + CSS しかし、HTMLやJSを十分に理解した上で開発を行うのは大変なことです。多くの時間、労力、コードの行数を必要とし、メンテナンスにも気を配る必要があります。 特に、データグリッドや、チャートやグラフの構築など、複雑な要件があるウェブページを作る場合はなおさらです。 そういった背景から、TypeScript（またはJavaScript）とさまざまなWebアプリケーションフレームワークが登場しま
Recently, I wrote about how to build your first Web Component, as well as some history and explanation of the basic v1 Web Component specs. But much more has happened in the world of Web Components since v1 reached full support in 2020. And even more is planned for the future. Let’s take a look at a few notable examples of what has been built with the current standards, as well as survey some of t
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How we use Web Components at GitHub
Next.js アプリケーションの共通コンポーネント開発 - クックパッド開発者ブログ
新しいメルカリDesign System Web | メルカリエンジニアリング
Spectrum, Adobe’s design system
フレームワークに頼らない！ フロントエンド技術「Web Components」のAPIを学ぼう
次の時代のCSS in JSはWeb Componentsを従える
Vue.jsでWeb Componentを作ってみた - アクトインディ開発者ブログ
Lit
Introducing "Lit" for Web Components
Shadow DOM の特性を知って、使いこなすコツ - Qiita
CSS Findings From Photoshop Web Version
React UIで人気の「Material You」がLitで実装予定 今度こそ流行って欲しいWeb Components
SvelteではじめるWeb Components開発 - Qiita
Build better business applications, faster, with Hilla
ElementInternals and Form-Associated Custom Elements
The selectmenu HTML Tag | CSS-Tricks
Spectrum Web Components - Spectrum Web Components
GitHub - 11ty/webc: Single File Web Components
Preactで作ったコンポーネントをWeb Components として公開する
Web Componentsを試してみた - アクトインディ開発者ブログ
Tonic - Component Based Architecture
Web Componentsとは？ - 開発者はどんな時に Web Components の利用を検討すべきか
2023 State of Web Components
news.livedoor.com
www.bloomberg.co.jp
www.google.com
ad2217.hatenablog.com
www.bloomberg.co.jp
tradenote.xsrv.jp