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.
Intro 前回の記事で、奇遇にも本サイトの AMP 対応を落とすことになった。しかし、そうでなくても AMP をどこかでやめることは考えていたため、きっかけの一つが SXG 対応になったのは、順当な流れだと筆者は感じている。 これは AMP がなぜ始まり、なぜトーンダウンしつつあるのか、そしてこれからどうなっていくのか、という流れをまとめるいい機会でもある。 その過程で生み出され、本サイトでも検証を続けてきた Performance Timing API, Core Web Vitals, Signed HTTP Exchange 、そして今構想されている Bento AMP などを踏まえ、一連の流れを覚えている範囲で記録としてまとめておく。 ソースは筆者の主観であり、眺めてきた体感を mozaic.fm の Monthly Web などで話してきたものがベースなので、信頼性や正確性は期
こんにちは。レシピサービス開発部のkaorun343です。クックパッドではスマートフォン向けページにおける開発者体験向上のために、レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話にて紹介したとおり、Next.jsとGraphQLを用いたモダンな環境へと移行を進めています。例えばモバイル端末からのアクセスでURLがトップページの / であれば Rails、レシピ詳細ページの /recipe/:id であれば Next.js アプリにルーティングされるようになっています。現在ではレシピ詳細ページだけではなく検索結果ページやつくれぽ詳細ページ、MYフォルダページなどもNext.jsアプリケーションに置き換わっています。今回はその移行により生じた課題と取り組み方、それから併せて実施したモノレポ環境整備について紹介します。 共通コンポーネントの導入背
glitch-image の使い方 一番シンプルに glitch-image を使う方法は <script> タグで呼び出す方法です。 <script src="https://unpkg.com/@uit/glitch-image@0.0.9/dist/glitch-image/glitch-image.js"></script> <div style="width: 200px; height: 200px;"> <glitch-image src="..."></glitch-image> </div> Web Component なので、これだけで好きな画像にグリッチエフェクトを適応することができます。 一方で、React や Vue.js などのコンポーネント内で適用したいケースも勿論あるはずです。そういった時は、 NPM パッケージ `@uit/glitch-image` をイ
GitHub - peterpeterparker/stylo: Another kind of rich text editor
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
Web Componentsは10年ほど前に提唱されたブラウザのコンポーネント技術の総称です。自分でタグを作ってHTMLを拡張していける技術なのですが、ブラウザの対応や仕様の確定などに時間がかかり、なかなか実用に至りませんでした。 私もずっと忘れていたのですが、React/Vueに疲れたなーと考えていたところ、ふと思い出し調べ直してみると、既に安定してProduction readyなのに情報が少なくすごくもったいなかったので、自分で調べつつ色々書き残すことにしてみました。 Web Componentsの誤解名前は聞いたことはあっても使ったことがある人はまだ少ないWeb Components。私も認識違いがありました。 UIコンポーネントを作る仕組みだから自分で作ることはないCSSをページをまたがって使い回すことがあるなら楽になります CSSで!important を書いてたらWebCom
For my first post on dev.to I thought I'd write about a nice, safe topic that's free of controversy: web components. I'm mostly writing this for my future self, so that I have something to point to next time someone asks why I'm a web component skeptic, and why Svelte doesn't compile to custom elements by default. (It can compile to CEs, and it can consume CEs as evidenced by its perfect score on
よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する｜masuidrive
よくある2ペインのレイアウト用コンポーネントを作りつつ、Web Componentsの仕組みを理解する Web Componentsを一言で説明すると「HTML/CSSが独立したカスタムタグを作れる仕組み」です。理解するには、まずは素のJavascriptだけでよくある部品を作ってみることが一番だと思います。 多くのサンプルではボタンやアイコンなどの部品を作りますが、今回はflexboxを使ったレイアウト定義のコンポーネントを作ってみます。この部分にはちょっとしたハマりどころがあるのでちょうど良い練習になります。 もう一つハマりやすいのはフォーム部品ですが、これはまた後日書きます。 この記事の前に 「今なら使えるWebComponents」を軽くでも読んでおいてもらえると嬉しいです。 2ペインのレイアウトを考える最初にWebアプリでよくある、左にナビゲーション、右にコンテンツを置く2ペイン
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
Why We Use Web Components
Max Lynch for Ionic Posted on Jul 8, 2019 • Updated on Apr 29, 2020 Web Components are all over Twitter (again), thanks to a great post by Rich Harris about Why [he] Doesn’t Use Web Components. Rich details a number of technical (and non-technical) issues with the raw Web Components standard, specifically the Custom Elements and Shadow DOM APIs. Rich nails the technical details about Web Component
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
本サイトの AMP 提供の停止とここまでの振り返り | blog.jxck.io
Next.js アプリケーションの共通コンポーネント開発 - クックパッド開発者ブログ
UIT 発の OSS コンポーネント glitch-image を公開しました
今なら使えるWebComponents｜masuidrive
Why I don't use web components
GitHubのWebコンポーネント - Web Component SF Meetupより