myakura

Chrome Dev Summit 2020まわりの記事メモ

はじめに

書いてる人：myakura (Masataka Yakura)

このgistにあるもの

Chrome Dev Summit 2020の前後でGoogleのひとが公開した記事を、やる気の続く限り読んで書いたメモ。
主にみているのは以下のサイト。

myakura

HTML5の内容モデル

これまではインラインレベル要素とブロックレベル要素といった大まかな定義でしたが、細かくなりました。

HTML5の内容モデルは「なんとかcontent」ってついてます。

• Metadata content
• Flow content
• Sectioning content
• Heading content

myakura

// haven't tested yet

const jsdom = require('jsdom')
const url = process.argv[2]

jsdom.env(url, (err, window) => {
  const images = Array.from(window.document.querySelectorAll('img[src]'))
  const result = []
  for (let i of images) {
    result.push({

myakura

• Mozillaのレポジトリにおける https://github.com/myakura/curcuma みたいなもの
  • アセット表示とか
• Progressive AppsでTip calculatorをつくる
  • Vue.jsとかつかう？
• 日本語の資料だけ見てC++を学ぶ
• Preload Scannerを試すためのサーバ  - ストリームでHTMLを1行/秒とかで吐く    - 1秒ごとにウエイト入れる

myakura

• 画像認識で文字認識させて代替テキスト自動生成
• Webでパイプ（？）みたいなしくみ
  • 画像をクリップするサービス→シェアするサービスみたいな、Web Intentsみたいな
• オフラインでもオンラインでもうごく的な

myakura

unicode-range の調査

• 使った時と使ってないときのファイルサイズの差
  • できればUnicodeの範囲を分けて計測
    • パスが多い複雑なグリフが固まってるところのがファイルサイズ大きそうと予想
• 使ったときのHTTPリクエスト
  • 実装の中身を見てみたい

ページのテキストを取得して unicode-range を生成するコード

myakura

タッチの検出：「どう」ではなく「なぜ」

<p>原文：<a href="https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/">Detecting touch: it’s the ‘why’, not the ‘how’</a> by Patrick H. Lauke and Robert Nyman [Editor] on April 9, 2013</p>

<p>One common aspect of making a website or application “mobile friendly” is the inclusion of tweaks, additional functionality or interface elements that are particularly aimed at touchscreens. A very common question from developers is now “How can I detect a touch-capable device?”</p>

<p>Web サイトや Web アプリケーションをモバイル対応するにあたり、共通して見られるaspectのひとつに、タッチスクリーンを対象にした機能追加や対処があります。こういったこともあり、開発者から「どうやってタッチ可能なデバイスを検出するの？」という質問がよく投げられます。</p>

<h2>タッチ機能の検出
Feature detection for touch</h2>

myakura

@charset "UTF-8";
// Sass list extra functions v0.0.1 | masataka yakura | MIT License

// determines whether an argument is a list type
// @return {boolean}
@function is-list($arg) {
    @return type-of($arg) == 'list' or type-of($arg) == 'arglist';

    // ISSUE: "false negative" with a single value wrapped in parens
    // since "Sass doesn't use () as list delimiter characters."

myakura

@mixin lg-keyword($keyword, $colorstops...) {
    $prefixes: '-webkit-';
    
    // 標準のキーワード
    $standard_keywords:
        to bottom, to left, to top, to right,
        to top left, to top right, to bottom right, to bottom left,
        to left top, to right top, to right bottom, to left bottom;
        
    // 接頭辞版のキーワード

myakura

{"2":"color","3":"direction","4":"display","5":"font","6":"font-family","7":"font-size","8":"font-style","9":"font-variant","10":"font-weight","11":"text-rendering","12":"webkit-font-feature-settings","13":"webkit-font-kerning","14":"webkit-font-smoothing","15":"webkit-font-variant-ligatures","16":"webkit-locale","17":"webkit-text-orientation","18":"webkit-writing-mode","19":"zoom","20":"line-height","21":"background","22":"background-attachment","23":"background-clip","24":"background-color","25":"background-image","26":"background-origin","27":"background-position","28":"background-position-x","29":"background-position-y","30":"background-repeat","31":"background-repeat-x","32":"background-repeat-y","33":"background-size","34":"border","35":"border-bottom","36":"border-bottom-color","37":"border-bottom-left-radius","38":"border-bottom-right-radius","39":"border-bottom-style","40":"border-bottom-width","41":"border-collapse","42":"border-color","43":"border-image","44":"border-image-outset","45":"border-imag