デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA
デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッドレスブラウザのPuppeteerパペティアーを使ってデザインとのズレを検知するビジュアル校正テストの方法を紹介します。 ウェブ業界ではデザイン制作とHTML制作が分業である場合がほとんどです。ビジュアル校正テストを導入することで、HTML制作の品質向上に役立てられます。デザインとHTML実装が別の会社のようなプロジェクトでは、HTML実装時の品質保証の担保になりますし、デザイナーとフロントエンドエンジニアが近い組織でもコミュニケーション円滑化に役立つでしょう。ICS
Those HTML Attributes You Never Use — Smashing Magazine
In this article, Louis Lazaris describes and demonstrates some interesting HTML attributes that you may or may not have heard of and perhaps find useful enough to personally use in one of your projects. In January, Madison Kanna asked her Twitter followers: What are the languages/tech you’re excited to learn or learn more deeply this year? mine: typescript, next.js, react, graphql, solidity, node
Safari 15.4では「Lazy Image Loading」が正式にサポートされ画像の遅延読み込みが可能に。
Safari 15.4では画像の遅延読み込み「Lazy Image Loading」が正式にサポートされています。詳細は以下から。 Appleは現地時間2022年03月14日、MacやiPhone/iPad向けに「macOS 12.3 Monterey」や「iOS/iPadOS 15.4」をリリースし、同バージョンにではデフォルトブラウザであるSafariが「Safari v15.4」へアップデートされていますが、このSafari v15.4では画像の遅延読み込み「Lazy Image Loading」がデフォルトでサポートされています。 Let’s start with HTML. WebKit added support for lazy-loading images with the loading attribute on the element, providing web de
素のJavaScriptだけでアニメーションを実装するWeb Animations API
2022年3月17日 JavaScript Web Animations APIとは、他のライブラリーを使わずにアニメーションを実装できるJavaScriptの仕様です。CSSアニメーションと違い、様々な関数やイベントと組み合わせてより柔軟に、より豊かな表現が可能となります。今回はそんなWeb Animations APIを使ってみましょう！ ↑私が10年以上利用している会計ソフト！ Web Animations APIの基本の書き方 基本的な考え方や構造はCSSアニメーションと同じですが、アニメーションの内容やどう動かすかの指定は、配列やオブジェクトで記述していきます。基本形はこんな感じ： JavaScript 動かす要素.animate(動かす内容, 動きの詳細); 動かす内容（キーフレーム） animate() の第一引数には動かす内容、キーフレームを指定します。CSSと同じ形でプロ
Edge、Firefoxを抜く勢い - 2月ブラウザシェア
Net Applicationsから2020年2月のデスクトップブラウザのシェアが発表された。2020年2月はChromeとEdgeがシェアを増やし、Firefox、Internet Explorer、Safariがシェアを減らした。シェアの上では2位以下を引き離して強い存在感を示しているChromeだが、過去1年間の推移は横ばい傾向を示しており、デスクトップ向けのWebブラウザとしてはほとんどシェアが変わらない状況になりつつある。 一方、順位は3位だが、Microsoft Edgeは過去1年間にわたり増加傾向にある。すでにChromiumをベースに開発された新しいバージョンのMicrosoft Edgeはリリースされており、今後Windows Update経由でより多くのユーザーに行き渡ることにもなっている。現在の傾向が続いた場合、FirefoxとMicrosoft Edgeの順位は逆転
Google Fontsのファイルサイズを簡単に軽量化できる！日本語フォントにも対応
Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。 フォントファイルのサイズを劇的に軽減できる機能があります。 パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます。 タイトルや見出しのみにGoogle Fontsを使いたい時にぴったりです。 Google Fonts -Optimizing your font requests Google Chromeのエンジニア マネージャーであるAddy Osmani氏によると、CSSファイルにパラメーターを付けるだけで簡単にできる、とのことです。 日本語フォントにも対応しています！ Tip: Shave up to 90% off the size
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
クラウドと機械学習で代替テキストのない画像に説明を付与 ～「Microsoft Edge」に新しいアクセシビリティツール／スクリーンリーダーを頼りにコンテンツを閲覧するユーザーのための支援機能
