Google Lighthouseについて調べてみた vol.2 #lighthouse - ユアマイスター株式会社エンジニアブログ
こんにちは。ユアマイスター 星（@inase17000）です。 vol.1 に引き続き、前回語りきれなかったことをvol.2でお届けです。 Lighthouseとは？ Lighthouse は、ウェブページの品質向上に役立つよう開発された、オープンソースの自動化されたツールです。詳細は前回記事に書いてますのであわせてご覧ください。 yourmystar-engineer.hatenablog.jp 今回は差分のみ記載します。 Audit References - 診断 ①Performance - パフォーマンス Diagnostics Minimize main-thread work JS の解析、コンパイル、実行にかかる時間の短縮をご検討ください。配信する JS ペイロードのサイズを抑えると効果が見込めます。詳細" 必要なJSコードだけを読み込み、実行する JSコードをMinifyす
HTML5 Canvas Cheat Sheet
This cheat sheet summarizes the complete HTML5 Canvas API for the 2D context, based on to the W3C HTML5 Canvas Spec. It also provides techniques for handling common proceedures. HTML5 Canvas Element Html5 canvas element <canvas id="myCanvas" width="500" height="300"> Html5 canvas element with fallback content <canvas id="myCanvas" width="500" height="300"> your browser doesn't support canvas! </ca
<input type="color"> - HTML: HyperText Markup Language | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
canvas のタイポグラフィ効果 - HTML5 Rocks
Typographic effects in canvas Stay organized with collections Save and categorize content based on your preferences. My Background <canvas> entered my awareness in 2006 when Firefox v2.0 was released. An article on Ajaxian, describing the transformation matrix, inspired me to create my first <canvas> web-app; Color Sphere (2007). Which immersed me into the world of colors, and graphic primitives;
HTMLCanvasElement: toBlob() メソッド - Web API | MDN
HTMLCanvasElement.toBlob() メソッドは、 キャンバスに含まれる画像を表す Blob オブジェクトを生成します。 このファイルは、ユーザーエージェントの裁量によって、ディスクにキャッシュされるか、メモリーに保存されたりすることがあります。 希望するファイル形式や画像品質を指定することができます。 ファイル形式を指定しない場合、または指定された形式に対応していない場合、データは image/png としてエクスポートされます。 ブラウザーは image/png に対応している必要があります。多くのブラウザーは image/jpeg や image/webp を含む他の形式にも対応しています。 作成する画像の解像度は、解像度メタデータのエンコーダーに対応しているファイル形式では 96dpi となります。
HTML5 Canvasで角丸四角を描いて、グラーデーションで塗り潰してみた
Canvasでチャートを作成していた時に、背景やらグラフの帯やらで角丸四角をたくさん描画する必要があったので、共通化して１つの関数にまとめましたので紹介していきます。 サンプル 作ろうとしているものがこちらになります。 「サイズ」「色」等のパラメータを変更すると、角丸四角が生成されるので試してみてください。 これより、このサンプルの実装方法について紹介していきます。 各種ファイルを準備 以下のようにファイルを準備します。 ┣ index.html ┗ js ┗ main.js index.htmlの記述 index.htmlは以下のように記述しておきます。 【index.html】 <html> <head> <meta charset="utf-8"> <script src="js/main.js"></script> </head> <body> <div> <canvas id="
中国SNSを席巻する"遊べる"広告「H5」って何だ？ - 中国メディアビジネス日記
中国はまもなく春節を迎え、各社ともサービス普及の為のPRに奔走している。中国モバイルペイの二大巨頭の一つ、WeChatPayがお正月の「お年玉キャンペーン」で普及を成功させたように、お正月は中国IT企業にとって最も重要なマーケティングシーズンだと言っても過言ではない。 そんな中、ここ数年中国のSNSを賑わせているのが、「H5広告」というインタラクティブな「遊べる」広告だ。「楽しくて」「シェアしたい」という、SNS時代ならではの特徴を持った新しい広告フォーマットは、中国のみならず、日本でもブレイクする可能性を秘めている。 このH5広告がどんな広告なのか、まずはこちらの例をご覧いただきたい。 H5広告①「PUPUPULAの家族写真」 （リンク先から直接開けます） pupupula.net ユーザーが広告を開くと、すぐにゲーム画面が出てくる。ユーザーはそこで様々なアイテムを使って自分だけの家族写
フロントエンドでバイナリファイルを扱うためのBlobオブジェクトとFileオブジェクト - 30歳からのプログラミング
このエントリで紹介するBlobやFile、FileReaderはHTML5で利用可能になったAPIで、ECMAScriptで定義されているわけではない。 そのため、Node.jsには存在せず、ブラウザ環境でのみ利用できる。 Blob Blobは、バイナリデータを表すimmutableなオブジェクト。 const blob = new Blob(['<xml>foo</xml>'], {type: 'text/xml'}); console.log(blob); // Blob(14) {size: 14, type: "text/xml"} 第二引数で設定しているtypeで、MIMEを設定できる。 何も設定しなかった場合は空の文字列になる。 File Fileはその名の通りファイルを表すオブジェクトで、Blobを継承している。 const file = new File(['<xml>fo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
<sup>: 上付き文字要素 - HTML: ハイパーテキストマークアップ言語 | MDN
qrg0009 (HTML5).pub
XHTML HTML CSS Reference Book
HTML5 Canvas Cheat Sheet
GitHub - goldfire/howler.js: Javascript audio library for the modern web.
HTML5 Forms: SpellCheck Type Attribute | Wufoo
How to disable Chrome spell check on INPUT with HTML or jQuery code?
Prompting user to save file using a 'Save-as' dialog?
CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]![CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b4bb8a4a33a630fad5b2f5407193da0266fb2eb/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1466210908981s.jpg)
Paul Irish on Twitter: "<video autoplay muted> works across mobile browsers now. 📽️ No more need to ship an 8MB gif to your mobile users. 😢 https://t.co/7nJOm3Ga48"