Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。
WebdriverIOで始めるビジュアルリグレッションテスト
大規模なWebサイトの運用を長期間行っていると、ちょっとしたCSSの修正が思いもよらぬところに影響を与えてしまうことは少なくありません。しかし、更新するたびに全てのページを確認するのはとても大変ですよね。そんなときは「ビジュアルリグレッションテスト」が有効です。
「WebdriverIOで始めるビジュアルリグレッションテスト」の全文を読む
Promise.allSettled()がStage4になりました
みなさんこんにちは！UI開発者の宇賀です🍣🍵
先日はJapan Accessibility Conference vol.2へ一般参加してきたので、アクセシビリティ的なお話をしようかと思ったのですが、別途参加レポートがアクセシビリティBlogにて公開されておりますので気になる方はそちらをご覧ください😉✨
今回はPromise周りで新しいニュースが飛び込んできましたので、それに関するお話です🤝。
「Promise.allSettled()がStage4になりました」の全文を読む
MJMLのv4.4.0がリリース！mj-buttonコンポーネントなどが強化されました
先週ひっそりと、MJMLのv4.4.0がリリースされていました！
今回のリリースでは主に以下のアップデートがありました。
- mj-buttonコンポーネントのクリック範囲が全範囲になった（Outlookを除く）
- mj-imageコンポーネントの代替テキストの修正、font-sizeおよびmax-height属性が使用可能になった
- CSSのインライン展開時にタグがJuiceによって変更される不具合が修正された
- マイグレーションの警告を無効にするオプションが追加された
- cliでmj-includeのベースパスを指定できるようになった
- minify時にコンテンツを無視するようにした
- ドキュメントが更新された
その他、詳細な情報はリリースノートをご確認ください。
個人的にはmj-buttonコンポーネントのアップデートがとても熱く感じました。
以前までのバージョンでは、ボタンのクリック範囲がボタン内部のテキストのみだったのですが、v4.4.0ではでボタンの全範囲でクリックが可能になり、HTMLメールでよりWebサイトに近い体験ができるようになりました。
文字だけではわかりにくいので、以下のデモから挙動の違いをご確認ください。
Webサイト基準で考えると何のことはない話ですが、HTMLメールではさまざまなメーラーで同じ挙動をするリンクボタンを作るのは手間のかかることなのでとても助かりますね。
GatsbyJSで静的サイトジェネレートをはじめよう！
パフォーマンスが重視される昨今、サーバサイドレンダリングを採用したり、静的サイトジェネレーターを使用して必要なファイルをあらかじめ生成してからホスティングするサイトが増えてきています。
「GatsbyJSで静的サイトジェネレートをはじめよう！」の全文を読む
Request.destinationでリソースの種類別にキャッシュ戦略
Request.destinationはRequestインターフェイスのプロパティで、リクエストしているコンテンツの種類を文字列で返します。これをService Workerのfetchイベント時に用いると、リソースの種類別にキャッシュ戦略を切り替えることができます。