1 - 38 件 / 38件
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
こんにちは。レシピサービス開発部のkaorun343です。クックパッドではスマートフォン向けページにおける開発者体験向上のために、レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話にて紹介したとおり、Next.jsとGraphQLを用いたモダンな環境へと移行を進めています。例えばモバイル端末からのアクセスでURLがトップページの / であれば Rails、レシピ詳細ページの /recipe/:id であれば Next.js アプリにルーティングされるようになっています。現在ではレシピ詳細ページだけではなく検索結果ページやつくれぽ詳細ページ、MYフォルダページなどもNext.jsアプリケーションに置き換わっています。今回はその移行により生じた課題と取り組み方、それから併せて実施したモノレポ環境整備について紹介します。 共通コンポーネントの導入背
こんにちは。プロダクト開発部の渥美 id:atsumim です。 今回サービス横断で利用できるログインコンポーネントを WebComponents で実装したのでその紹介をします。 1. 背景 今年の2月に電話番号での会員登録及び認証機能をリリースしました。 これに伴って一休の会員基盤も刷新しました。 一休のサービスは主に、宿泊、レストラン、スパとあるのですが、 歴史的経緯により会員基盤が分散してしまっていたので、ひとつにまとめる狙いもありました。 会員基盤 Before/After その一環として、一休のサービスで横断して使えるログインコンポーネントを WebComponents で実装しました。 このコンポーネントにログインや会員登録の処理を集約し、新会員基盤へのインターフェースとするようにしました。 また、電話番号認証や2段階認証設定のモーダルも実装しました。下記が実際の画面です。
@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の技術的な概
対象読者 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というフレームワークが推進していたころよりも、ブラウザ対応も進
@r2wc/react-to-web-component は React コンポーネントを Web Components に変換するためのライブラリです。このライブラリを使用することで、React コンポーネントを任意の HTML 要素として使用することが可能になります。 @r2wc/react-to-web-component は React コンポーネントを カスタム要素 に変換するためのライブラリです。このライブラリを使用することで、React コンポーネントを任意の HTML 要素として使用することが可能になります。 使い方 例として、以下のような React コンポーネントがあるとします。 import React from "react"; export const HelloWorld = () => { return <p>Hello, World!</p>; }; @r2
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
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
lib/Counter.svelteのファイル先頭に<svelte:options tag="my-counter" />を追加してコンポーネントをカスタム要素としてコンパイルするようにします。 tagで指定した文字列が、Web Componentsの名前となります。 <svelte:options tag="my-counter" /> <script lang="ts"> let count: number = 0 const increment = () => { count += 1 } </script> <button on:click={increment}> Clicks: {count} </button> <style> button { font-family: inherit; font-size: inherit; padding: 1em 2em; color:
概要 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つとも独立したライ
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
@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
Do you want to master CSS layouts? I'm building a new course. Learn more 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
Zenn が Web Components を使って tweet を表示するようにしていたので、見習ってこのサイトにも取り入れてみた。 Web Components を利用した Zenn マークダウン部分の改善について 🔗 zenn.dev ZennEditor 内のコード 🔗 github.com 比較 何が良いのか? 埋め込みコードの良くないところ <blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ほぼだいたい完全に理解した</p>— miyaoka / STUDIO (@miyaoka) <a href="https://twitter.com/miyaoka/status/1346720500387438593?ref_src=twsrc%5Etfw">January 6, 2021</a></bloc
10年近く前に誕生したWeb Componentsshibu_jp氏(以下、shibu_jp):10分なのに、スライド30枚以上もあるので、ちょっと駆け足でいきます。 まず「お前誰?」ということですが、現在はフューチャー株式会社でコンサルタントをやっています。JavaScript、Go、Pythonをよく書いているのですが、最近はお仕事でFlutterを書いています。 フューチャーは1次請けで、2次請けにも投げないで、開発・実装・運用・設計まで全部やるコンサルタントの会社です。Vue.jsのコアメンバーがいたりもします。今日も会社のチャットで、イベントの裏でワイワイチャットしていたりもします。 ほかには『エキスパートPythonプログラミング 改訂3版』が出るので、今日のイベントを聞かれている方には関係ないかもしれませんが、買っていただけるとうれしいです。 本題に入ります。Web Comp
はじめに あまり知られていないかもしれませんが、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
Getting startedUsageComponentsExtending componentsRenderersState machinesApplication stateEvent busInternationalizationModulesRouterScript loaderDeprecated FicusJS documentationBrowsers have improved greatly. Many of the reasons to reach for a big framework like React or Angular have gone away. You don't have to rely on a complex build system, bundlers, or other tooling to ship your Javascript to
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’
1 から Design System を作る場合にも、色々参考にするのが手っ取り早い。 Web Components にも色々問題は依然あれど、既に先人によるオープンソースなレポジトリがあるので、代表的なものを一覧にしてみる。 @ionic/core https://github.com/ionic-team/ionic-framework/tree/master/core ionic core は ionic チームが ionic frmework で使うコンポーネントを Web Component で実装した Design System。ionic は基本的に � モバイルアプリケーションを作るためのツールなのでそれ用に機能が最適化されているきらいはあるが、汎用的な部分の実装手段など参考になる部分は多い。 Stencil という Web Components 技術でコンポーネントを作る
Easy to UseBased on web standards - just HTML! Future-proof. Easy to add to your project. LightweightTiny - come with a minimal footprint. Modular - take only the parts you need. Fast - built with performance in mind.
</placeholders>はダミーの画像やテキストを提供するweb componentsです。SVGで生成され、動作も高速です。 使い方もシンプル。勿論ReactやSvelte、VueなどのJSフレームワーク等でも利用可能です。 <script type="module" src="https://unpkg.com/@placeholders/core@0.0.2/dist/esm/placeholders.js"></script> スクリプトを読み込んで <placeholder-image></placeholder-image> このようなタグを使えば良いだけ。 <placeholder-image width="400" height="200" text="Hello World"></placeholder-image> 従来のダミー画像生成サービス同様、サイズ指定や任
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
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
あらかじめおことわり 🙇割と週刊アスキーを持ち上げるような内容となっていますが私は週刊アスキーとの関係は一切ございません。 週刊アスキー、唯一のプログラマー向け連載 「週刊アスキー」と言えば、自作PCを始め、どちらかというとハードウェアについての話題が多いイメージがある、かも知れません。私自身そう思っていたのですが、実は何年間も「JavaScriptの部屋」という連載が続いています(リンク先の記事一覧は最新の日付が2017年になっていますが、本誌ではずっと続いています。かつてはウェブサイトと本誌両方で掲載していたのでしょうか)。「JavaScriptの部屋」では、HTMLファイル一つに収まる程度の大きさの、それでもなかなか面白くて役に立ちそうなプログラムを、毎週紹介してくれます。 「昔のベーマガかよ!」なんてツッコミを待っているかのごとく、ソースコード全体をそのまま紙面に載せてくれている
Disclaimer: This post expresses my opinions, which do not necessarily reflect consensus by the whole Web Components community. A blog post by Ryan Carniato titled "Web Components Are Not the Future" has recently stirred a lot of controversy. A few other JS framework authors pitched in, expressing frustration and disillusionment around Web Components. Some Web Components folks wrote rebuttals, whil
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は、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
csv-mapタグをベースに簡易化して、ウェブサイトにアクセス情報としての地図埋め込みに使う拡張タグ「map-viewタグ」を作りました。 「map-view tag demo」 name、緯度経度、zoomレベルを設定するだけでOK! <script type="module" src="https://code4fukui.github.io/map-view/map-view.js"></script> <map-view name="Hana道場" latlng="35.944571,136.186228" zoom="10"></map-view> サイトの表示優先なので、スクロールで地図が拡大縮小してしまうことがないように設定済み。 クリックするとGoogleマップのナビへリンクしています。 地図は日本国内を網羅する国土交通省、国土地理院の地理院地図。 APIはオープンソースの
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
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
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
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
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
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ページを開く