Intro 前回の記事で、奇遇にも本サイトの AMP 対応を落とすことになった。しかし、そうでなくても AMP をどこかでやめることは考えていたため、きっかけの一つが SXG 対応になったのは、順当な流れだと筆者は感じている。 これは AMP がなぜ始まり、なぜトーンダウンしつつあるのか、そしてこれからどうなっていくのか、という流れをまとめるいい機会でもある。 その過程で生み出され、本サイトでも検証を続けてきた Performance Timing API, Core Web Vitals, Signed HTTP Exchange 、そして今構想されている Bento AMP などを踏まえ、一連の流れを覚えている範囲で記録としてまとめておく。 ソースは筆者の主観であり、眺めてきた体感を mozaic.fm の Monthly Web などで話してきたものがベースなので、信頼性や正確性は期
なにこれ クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。 📝私はWeb開発の経験はありますが、Ionicの経験があるわけではなく、これからやってみようという段階です。 そのため本記事はあくまでも調査結果をまとめたもので、実際の開発の経験に基づくものではありません。 Ionic概要 クロスプラットフォームアプリをWebの技術（HTML/CSS/JS）を使って作るためのフレームワークです。 iOS・Android・Electron・Web(PWA)などの複数の環境で動作させ、ネイティブ機能にアクセスするためのCapacitorと、 WebComponentベースのネイティブ風なUI Componentから構成されます。 U
電通デジタル エンジニアの おのきです。前回の記事は「SQLスクリプト上でのテーブルや共通テーブル式の依存関係を可視化する」でした。 今回はDentsu Digital Tech Advent Calendar 17 日目の記事になります。 私たちの開発チームでは、社内向け業務システム「EASI」においてデジタル広告のプランニングツールや過去実績のレポーティングツールを日々開発、運用しています。 「EASI」では MicroServices アーキテクチャーを採用し開発を進めており、バックエンドだけでなくフロントエンドについても Micro Frontends という仕組みを取り入れてサービス提供を行っています。 私たちのチームで Micro Frontends を導入してからちょうど一年になるので、ここで改めて導入の目的や選択した技術、導入手順、運用上の注意点や課題と対策をこの記事で覚書
textlint editor - ブラウザでも動くPrivacy Firstの文章校正ツールを作る話 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info テーマ textlint Privacy Firstな校正ツールを作る サーバにデータを送らずに、ローカルで文章のチェックをする textlintとは? textlint textlintJavaScriptで書かれた文章のLintツール ESLintの文章版 Markdown、Re:View、HTMLなど文章構造をパースしてからチェックする 一般的なスペルチェッカーは構造を見ないので誤検知する 200弱ぐらいのルールがある Collection of textlint rule · textlint/textlint Wiki 日本語、英語、言語に依存しな
Intro WebBundle を用いてサブリソースのみを Bundle する、 Subresource Bundle の策定と実装が進んでいる。 これを用いると、複数サブリソースの取得を一回の fetch で行うことができ、 RTT を減らしつつも個別に取得したかのようにキャッシュを制御できる。 現時点での仕様と実装を解説する。 Intent to Prototype: Subresource loading with Web Bundles Subresource Bundling WebBundle の初期の仕様は、 HTML を頂点としたページ全体をまとめる方向で始まった。 WebBundle によるコンテンツの結合と WebPackaging | blog.jxck.io これをサブリソース(JS, CSS, Img etc)に対して利用できるようにする仕様だ。 HTML 自体は
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 今回は次の様に答えまし
ANDPAD のデザインシステム 「Tsukuri」 の Web 向け実装について - 方針と全体像の紹介 - ANDPAD Tech Blog
この記事の概要 デザインシステム 『Tsukuri』の Web 向け実装『Tsukuri for Web』を開発中です 変更しやすくするために構成要素の依存関係を考慮した構造を検討しました コンポーネントの実装は Web Component を利用し、Vue.js と React にも対応します アイコンやデザイントークンに対応する実装は Figma から取得したリソースを元に生成します 1. はじめに 2022/08/16 に入社しました、Web フロントエンド開発を中心に行っている寺島です。 私は入社してから現在に至るまで、アンドパッドのデザインシステム 『Tsukuri』 の Web 向け実装である 『Tsukuri for Web』を開発しています。 この記事では以下について紹介します。 Tsukuri および Tsukuri for Web の背景 現在行っている開発のベースとな
Photo by hue12 photography on Unsplash All the Ways to Make a Web Component - Feb 2022 Update Introduction The same <my-counter/> Web Component has been written in 61 variants. The complete collection is available in the WebComponents.dev Studio Editor. In this new release, we fixed performance computation support for librairies missing from the previous editions: you can now compare both sizes an
Railsの技: "プログレッシブエンハンスメント"でHotwire的思考を身につける（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Thinking in Hotwire: Progressive Enhancement | Boring Rails: Skip the bullshit and ship fast 原文公開日: 2022/08/16 原著者: Matt Swanson サイト: Boring Rails 日本語タイトルは内容に即したものにしました。 Turboについては以下の記事もどうぞ。 参考: 猫でもわかるHotwire入門 Turbo編 Hotwireを始める方法や個別のパーツの利用法を学べるチュートリアルはたくさんあります。しかし私は「Hotwireで考える」コツを会得するのにしばらく時間がかかりました。 Hotwireそのものは「HTML-over-the-wire」という包括的なコンセプトに過ぎず、以下のような部品をいつどのように
※こちらの記事は過去に個人のブログで投稿したものになります。 最近、マイクロフロントエンドという技術を知っていろいろ調べていたら以下のような記事を見つけました。 マイクロフロントエンドとは何か、非常に分かりやすくまとまっています。 なので日本語で要約・加筆して後で読み返しやすくしていこうと思います。 マイクロフロントエンドとは マイクロフロントエンドとは、 単体で実行可能な、サイトから切り出された特定のUI領域 であり、Webフロントエンドの新たなアーキテクチャです。 この特徴から以下のようなメリットがあります。 インクリメンタルアップグレード シンプルで分離されたコードベース 独立したデプロイ 自立したチーム インクリメンタルアップグレード マイクロフロントエンドは単体で実行可能にするため、使用するフレームワーク、ライブラリが他のマイクロフロントエンドと共通ではありません。 このため、他
JSer.info #564 - Babel 7.16.0がリリースされました。 7.16.0 Released: ESLint 8 and TypeScript 4.5 · Babel Babel 7.16.0ではClass static blocksが@babel/preset-envに含まれるようになっています。 また、TypeScript 4.5 Betaへの対応、Stage 2であるPipe Operatorへのオプションの追加などが行われています。 また、@babel/eslint-parserがESLint 8へ対応しています。 Node.js向けのTest RunnerであるAVA 4 RC1がリリースされました。 Release AVA 4 Release Candidate 1 · avajs/ava AVA 4 RC1の破壊的な変更としてNode 10のサポート終了、
AtroposAtropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects. Available for JavaScript, React and as WebComponent (for use with Angular, Vue, Svelte, Solid and other frameworks)
マイクロフロントエンドの実現方法 - Qiita
はじめに マイクロフロントエンドという言葉が流行っているものの、なんとなく具体的な実現方法がわかっていないので、勉強した結果をまとめます。 マイクロフロントエンドとは 「翻訳記事 マイクロフロントエンド」には、以下のように書いてあります。 それはマイクロサービスの考え方をフロントエンドに拡張したものです。 (中略) 開発をすすめていくと、特に複数のチームで管理している場合 フロントエンド層が肥大化して管理が難しくなりがちです。 これを「モノリシックなフロントエンド」と呼びます。 マイクロフロントエンドの背景には ページを独立したチームによって管理された機能の集合体と捉える考え方があります。 それぞれのチームは特定の領域やミッションに特化しています。 チームは組織横断的な作りになっていて、その機能を end-to-end つまりデータベースから UI に至るまでをすべて実装します。 つまり、
2015年にも同じ趣旨の記事を書いていた。このときはこんな感じで毎年20個くらいはなんか作るんだろうなとかイノセントに考えていたけど、そうは問屋が卸さず、大して生み出せてない年が続いてきたが、今年はそれなりに作ったんじゃない？ と思えたので、振り返ってみる。オシャレにハッシュタグっぽく使った技術を書いてるぜ！ 漢字ル #React ウェブ薄氷 #CloudflareWorkers DevTools で esbuild する Chrome 拡張 #Chrome sbx: Scrapbox のコマンドラインクライアント #Go ターミナルから TickTick のタスクを確認するツール #AppleScript letterknife: コマンドラインで使えるメール向けの jq のようなもの #Go oauth2util: OAuth2 の認可フローを簡略化 #Go Vnodroid: 話を聞
マイクロフロントエンドとはフロントエンドアプリケーションを、機能単位の集まりと解釈しそれぞれの機能を異なるチームが保有・開発できる状態を作ることを目指すフロントエンドの開発手法です。これはコード規約やフレームワークの選定といったコードレベルの話にとどまらず、ビルド・デプロイフローやサーバー構築といったインフラの領域にまで及びます。それぞれが独自にフレームワークやライブラリ技術選定などもチームごとに柔軟に行うことができるという特徴を持っています。 すでにバックエンドの領域ではマイクロサービスというアーキテクチャが提案・実践されていますが、結局フロントエンド側がモノリスな構成を取ることがほとんどであるため、完全な機能単位でのチームの分割はなされていないことがほとんどだと思います。フロントエンドにおける開発でも類似の概念を導入することで、プロダクト全体で俯瞰したときに機能単位で垂直に分離されたチ
EC事業部でエンジニアをしているがっちゃんといいます。より良いショップ運営体験を提供するために、これまでモダンなフロントエンド開発環境の整備が遅れていた「管理画面」に薄くVue.jsを導入している話をします。 管理画面の現状と解決したいこと カラーミーショップでは、ショップの運営や管理をサポートするための「管理画面」を提供しています。商品を追加したり、ショップのデザインをしたり、カラーミーショップの契約を管理したり…と、多岐にわたる機能があります。 ショップオーナーさまに快適にショップ運営を行っていただくために日々改善を行っている、カラーミーショップの中では歴史の長いプロダクトの一つです。 管理画面の開発の様子は概ね以下のとおりです。 コードのベースはPHPで、画面の主なレンダリングはPHPのテンプレートエンジンによって行われている 開発に関係するチームが多く、様々なエンジニア・デザイナー
【WebAR】model-viewerとは？iOS / Android開発方法 - WebAR Lab - WebARの最新情報がわかるメディア
model-viewerとは model-viewerとはgoogleが開発するプロジェクトで、Webでより簡単にインタラクティブな3Dモデルを表示するWebComponentです。 正確にいうと、<model-viewer>を利用したコンテンツは、AndroidではScene Viewer、iOSではAR Quick Lookという機能を用いて表示されます。 Document github AR Quick Look / Scene Viewer model-viewerを表示する機能は、iOS・AndroidのOS別に分かれており、iOSではAR Quick Look、AndroidではScene Viewerという名称です。 つまりややこしいのですが、【実装上のコンポーネント：model-viewer】 【表示する機能：Scene Viewer / AR Quick Look】と呼ぶ
Angularのレンダリングメカニズムを学ぶときの歩き方
この記事の目的 Angularのドキュメントは、How to useはそれなりにありますが、conceptsが少ないよなあと昔から思っていました。使い方はわかってもアーキテクチャーがよくわからないのです。 どんなコンセプトなのか？、背景にある考え方は何なのか？、どんな仕組みになっているのか？などは、ウェブで幅広く探すしかありませんでした。そこで、私がこれまで参考にしてきたもののうち、特にレンダリングメカニズムに関して設計思想や仕組みがわかるものを集めました。なるべく一次情報のものをリストアップしています。 最近はangular.ioのコンテンツも充実してきましたが、設計思想的なものは相変わらず少なかったりします。Angularを使うことではなくて、Angularそのものに興味を持ったときのガイドになればと思います。他にもこれはというものがあったらぜひコメントなどで教えてください。 なお、A
自ブログからの引用です。 出典: https://seeklogo.com/ 自ブログからの転載です。 初めに 以前から存在し、ネーミングからモダンフロントの近未来を感じさせるWebComponentsに関して、基本的な技術の概観と2021年現在に考えて何を解決してくれる技術なのかを調査してみました。 概要 WebComponentsとはでよくある定義が、Web標準技術を利用して再利用可能なUIコンポーネントを作成する技術で、以下の3つの技術から構成されます。 カスタム要素 Shadow DOM HTML テンプレート イメージとして WebComponents=カスタム要素 と思っている方も多いと思いますが、単なる要素としてではなく、コンポーネントとして再利用可能なUIを定義するために必要な機能が補完される物と考えています。 要素技術の解説 3つの要素技術に関して、それぞれ概要をみていき
JSer.info #626 - Remix v1.10.0がリリースされました。 Release v1.10.0 · remix-run/remix @remix-run/routerというReact Routerとの共通基盤となるパッケージを使い再構築されています。 shouldRevalidate関数のサポート、useNavigation/useRevalidator/useRouteLoaderData Hook APIの追加などが追加されています。 React Native 0.71がリリースされました。 React Native 0.71: TypeScript by Default, Flexbox Gap, and more... · React Native Road to 0.71.0 · Discussion #41 · reactwg/react-native-re
JSer.info #629 - Astro 2.0がリリースされました。 Astro 2.0 | Astro MDXからtype-safeにコンテンツを扱えるContent Collections APIの追加されています。 また、SSGとSSRを組み合わせられるように、エラー表示の改善、HMRの改善、Vite 4.0へのアップデートなどが含まれています。 Deno 1.30がリリースされました。 Deno 1.30: Built-in Node modules node: prefixのサポート、deno.jsonにImport Mapsを定義できるように、Deno.env.has(name)などが追加されています。 また、deno fmtにセミコロンの設定を追加なども含まれています。 TypeScript 5.0 Betaがリリースされました。 Announcing TypeScri
まだリリースはされていませんが、jQueryのコードベースがAMDからECMAScript Modulesを使ったコードに変更されています。 Core: Migrate from AMD to ES modules 🎉 by mgol · Pull Request #4541 · jquery/jquery 最終的なjquery.jsはrollup.jsを使ってbundleしたものを配布する予定となっています。 The @jquery source is now authored in ES6 modules![1] You can import from `src/jquery.js` directly from the browser without any build process.[2]@RollupJS is used to create the final jquery.j
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
本サイトの AMP 提供の停止とここまでの振り返り | blog.jxck.io
Ionicの全体像、React Native・Flutterとの比較 2020年5月 | Takumon Blog
Micro Frontends導入の覚書｜Dentsu Digital Tech Blog
textlint editor - ブラウザでも動くPrivacy Firstの文章校正ツールを作る話
Webbundle によるサブリソース取得の最適化 | blog.jxck.io
Vue.jsでWeb Componentを作ってみた - アクトインディ開発者ブログ
All the Ways to Make a Web Component - Feb 2022 Update
『Micro Frontends』という記事を読んだのでまとめる
2021-11-02のJS: Babel 7.16.0、AVA 4 RC1、ウェブサイトのセキュリティヘッダー
Atropos - Stunning touch-friendly 3D parallax hover effects
2022年に作ったもの16（セルフレビューあり） - 詩と創作・思索のひろば
マイクロフロントエンド(Microfrontends)とその周辺技術
ショップ運営を支えるプロダクトにフロントエンド開発環境を薄く導入している - Pepabo Tech Portal
WebComponentsとは何だったのか？基礎から再入門する - Qiita
2023-01-13のJS: Remix 1.10.0、React Native 0.71、State of JS 2022
2023-01-31のJS: Astro 2.0、Deno 1.30、TypeScript 5.0 Beta
2019-11-26のJS: Node.js 13.2.0(ES Modules)、jQueryがAMDからES Modulesへ