Tag: attribute

讓手機上瀏覽器自動帶出數字鍵盤的方式

在「HTML attributes to improve your users' two factor authentication experience」這邊看到關於讓使用者輸入 2FA (通常是數字) 比較流暢的設定。

原始是上面這張這樣，目標是希望下面這張這樣，當透過 SMS 2FA 時可以提供選項直接貼上，而且也自動帶出數字鍵盤：

給出的幾個重點在於 inputmode、pattern 以及 autocomplete：

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>

查了一下 caniuse.com 上面的支援度，pattern 基本上都支援了，autocomplete 在這邊用到的 one-time-code 基本上也沒問題，只有 inputmode 這邊支援度比較差，IE11 (基本上不會更新了)、Firefox 與 Safari 沒支援。

Linux 版的 Dropbox 在十一月後將只支援 ext4...

有人收到 Dropbox 在十一月後不支援的訊息，在官方論壇上問起：「Dropbox client warns me that it'll stop syncing in Nov, why?」。

不過下面的人提到了很多 filesystem 都支援：(引用自維基百科的「Extended file attributes」)

In Linux, the ext2, ext3, ext4, JFS, Squashfs, Yaffs2, ReiserFS, Reiser4, XFS, Btrfs, OrangeFS, Lustre, OCFS2 1.6 and F2FS filesystems support extended attributes (abbreviated xattr) when enabled in the kernel configuration.

然後就吵起來了... 翻了一下，目前看起來還是沒打算支援 :o

好像是個換到 Syncthing 的機會，先前只丟了音樂在上面。來研究一下 Syncthing 上面要怎麼疊 encrypted filesystem 來放其他資料...

Google Analytics 推出 Autotrack 工具幫助整合

Google Analytics 推出了 Autotrack 工具，讓開發者更容易整合：「Introducing Autotrack for analytics.js」。

可以看到有些地方是將 Unobtrusive JavaScript 的概念拿出來用，像是 Declarative event tracking 這邊用 data attribute：

<button data-event-category="Video" data-event-action="play">Play</button>

對於還沒有針對 Google Analytics 客製化整合的人都會有幫助：

While anyone could use and benefit from autotrack, the library is primarily geared toward sites that do not customize their current analytics implementation and would like to take advantage of the features described in this article.

GitHub 上的說明可以看到預設了非常多常用的功能，像是 socialTracker 預設就有提供 Facebook 與 Twitter (咦，你們自己家的 Google Plus 呢？)

不過這個軟體有免責條款，不屬於 GA 的正式產品：

The autotrack library is not an official Google Analytics product and is not covered by Google Analytics Premium support. Developers that choose to use this library are responsible for ensuring that their implementation meets the requirements of the Google Analytics Terms of Service and the legal obligations of their respective country.

看起來先進很多，之後自己開發東西拿出來用用...

利用 data attribute 與 attr() 的 Pure CSS Responsive Table

查了 MDN 的說明，原來 attr() 在 IE8 就可以用了...

在這篇文章看到純 CSS 的 Responsive Table 技巧：「Responsive Tables in Pure CSS」，目標是把這樣的表格：

在寬度較小時自動變成這樣的形式：

用了 data attribute 與 attr()，再加上 before pseudo element。

PostgreSQL 對 NoSQL 的看法...

二月的時候 PostgreSQL 的人在 FOSDEM PGDay 2013 上發表了對 NoSQL 的看法 (PDF 投影片)：「PostgreSQL as a Schemaless Database.」。

先說明，這投影片相當酸 XD

不過這份投影片說明了大多數人的問題：

  • 其實大多用 NoSQL 的人不知道在用什麼...
  • 就算你知道你在用什麼，你用得很爽的功能其實在「傳統的」「SQL 架構」下效能通常都會更好...

另外我建議可以看看維基百科上的 Entity-attribute-value model，大多數你想用 NoSQL 的情況在這個 case 下就可以解決，而且效能相當好。

用 Net::OpenID::Consumer 取得 Google 的帳戶資料

Google 的 OpenID 服務有提供 OpenID Attribute Exchange 1.0 (參考「Federated Login for Google Account Users」這個網頁)， 測了一陣子才知道要怎麼透過 Perl 的 Net::OpenID::Consumer 取得資料：

my $csr = Net::OpenID::Consumer->new(
    ua => LWPx::ParanoidAgent->new,
    args => {},
    consumer_secret => 'secret',
    required_root => 'http://.../',
    minimum_version => 2
);

my $claimed_identity = $csr->claimed_identity('https://www.google.com/accounts/o8/id');

$claimed_identity->set_extension_args(
    'http://openid.net/srv/ax/1.0',
    {
        mode => 'fetch_request',
        required => 'email',
        'type.email' => 'http://axschema.org/contact/email',
    }
);

my $check_url = $claimed_identity->check_url(
    delayed_return => 1,
    return_to => 'http://.../...',
    trust_root => 'http://.../'
);

say $check_url;

之前會試不出來，主要是卡在 type.email 忘記加，加上去的時候又打成 email...