fragmentary[B!]新着記事・評価 - はてなブックマーク (original) (raw)

391 users
myakura.hatenablog.com
週明けに出回った、Microsoft EdgeがChromiumベースになるという話について、Microsoftからアナウンスがあった。 Microsoft Edge: Making the web better through more open source collaboration - Windows Experience Blog For the past few years, Microsoft has meaningfully increased participation in the open source software (OSS) community, becoming one of the world’s largest supporters of OSS projects. Today we’re announcing that we intend to ado

78 users
myakura.hatenablog.com
Jxckが以前、SafariのUA文字列が固定されたというのを書いていた。 Safari による User-Agent 固定化と Web における Feature Detection | blog.jxck.io Safari Technology Preview 46で入った変更だ。 Release Notes for Safari Technology Preview 46 | WebKit Froze the user-agent string to reduce web compatibility risk and to prevent its use for fingerprinting TwitterでもAppleのRicky Mondelloがそれを伝えていて、ちょっと騒ぎになっていた。「それは困る」的な反応が結構多かったのと、中には「やっぱりSafariは新たなIE6だ」み

29 users
myakura.hatenablog.com
geckotangが「Chromeでボタンをマウスでクリックしたときにフォーカスリングが出たり出なかったりするのなんで」と言っていて、なんかお前調べろよ的な感じだったので調べることにした。 使うのはcs.chromium.org。なので"HTMLButtonElement"で検索して、それっぽいファイルを探す。あった。 html_button_element.h "focus"で検索するとSupportsAutoFocus()というメソッドが見つかる……がこれはautofocus属性の対象になるかとかそういう感じがするのでこれではない。というかそっか、autofocus指定できるんだ……にしか使ったことなかったからなんか使えないって思ってしまってた。 HTMLButtonElementにはなさそうなので、参照しているHTMLFormControlElement

12 users
myakura.hatenablog.com
さっきAutoprefixerの設定でいろいろ阿呆なことをして、まあそれは解決して、ついでにリリースノートを見ていたら6.6.0でこんな機能が入っていたのを知る。 With Autoprefixer 6.6 you can specify browsers in package.json to reduce config files: { "private": true, "devDependencies": { "autoprefixer": "^6.6.0", "postcss": "^5.2.6" }, "browserslist": [ "last 2 versions", "ie 9" ] } Note that we highly recommend specifying browsers in browserslist config or in package.json in

19 users
myakura.hatenablog.com
サイボウズ採用情報のアニメーションがするするしてないので調べた件、今回は雑記。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる 描画領域とPaint Flashing その1でPaint flashingを見たときにはアイコンの周りに枠がついていたのに、その2で描画領域を見たら文書全体で起こっていたたのをふしぎに思ったひとがいるかもしれない。 これはPaint flashingの説明 Hightlights areas of the page that need to be repainted というのをよく読むといいかも。緑色になったところは「再描画が必要になったところ」、paint invalidationを指している。なので変化していない箇所は緑色にならなかったわけだ。 Chrome

54 users
myakura.hatenablog.com
サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。 今回はするするさせられないか、がんばってみる。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションを止める まず、いまのjQueryベースなアニメーションを止める。 コンソールに以下をぶっこめばアニメーションが止まって、背景も初期位置に戻る。 jQuery('.icon').stop().css('backgroundPosition', '') チェーンもできるしjQueryべんりだね。 CSSアニメーションにしてみる jQueryのアニメーションを別の方法に書き換えるわけだけど、今は2010年代も後半だ。使うならCSSアニメーションしかない。とくに右から左へ一方向って

118 users
myakura.hatenablog.com
サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、

という要素がハイライトされる。div

55 users
myakura.hatenablog.com
Chrome Dev Summitに来ている。 今年のChrome Dev Summitは日ごとにテーマが分かれていて、初日がProgressive Web Apps、2日目がRAILらしい。RAILはGooglerがちまちまと話してるけど、前者についてはまだそんな離されてない気がする。 というわけでセッション聞きながらなんとなく書いてみよう（なのでセッションまとめではないよ）。 アプリに「なっていく」「Web」 Progressive Web Appsは、Alex Russell先生が6月にブログで提唱して、そこからプロモートしているもの。“progressive”を訳すと「漸進的」やら「進行性」とかになるけれど、そのまま訳すより「アプリになっていくWeb」と砕いて解釈するとわかりやすそう。 アプリに「なっていく」とは何かなんだけど、Webアプリが「使ってるうちにネイティブアプリと同じよ

25 users
myakura.hatenablog.com
8月末のことなんだけれど、WHATWG HTMLの仕様書がGitHubに移った。 [whatwg] HTML spec now on GitHub (from Ian Hickson on 2015-08-27) 体制も少し変わって、HixieがひとりでやっていたHTML仕様の作業にAnneやDomenicなども直接関わるようになった。Issuesでの議論やPull Requestの受け付けも始まり、だいぶモダンな策定環境になった。 これまでのWHATWG HTMLとHTML5仕様書 これまでのWHATWG HTMLは長らくSubversionサーバで運用されていた（もしかするとCVS時代もあったかも）。 HTML仕様書は基本的に1枚のHTMLファイルに書かれていて、それをツールで切り出しmultipage版やPDF版、Web Developer Editionなどを生成していた（あ、<p

8 users
myakura.hatenablog.com
追記（2015-10-16）：WebExtensionsの発表 これを書いた数ヶ月後の8月21日、Mozillaが今後のアドオンをWebExtensionsというChrome拡張APIベースなものに移行していく計画を発表した。 The Future of Developing Firefox Add-ons | Mozilla Add-ons Blog WebExtensionsが正式発表 XUL／XPCOMベースのアドオンは将来的に非推奨へ - Mozilla Flux なので、今後のことを考えたりもともとの「Chrome拡張をFirefoxでも動かしたい」というのを考えるとWebExtensionsベースなものにしたほうが良さそう。実際に試したところ、Chrome拡張のmanifest.jsonにWebExtensionsで必要なメンバを足しただけでふつうに動いたので、Content

4 users
myakura.hatenablog.com
追記（2016-09-23）：-webkit-接頭辞のサポートを一部のサイトのみ対象とする方針はその後方針転換し、すべてのサイトを対象とすべく必要な機能やエイリアスの実装が行われ、Firefox 49でリリースされた。 Webkit! RESOLVED FIXED - otsukare Firefox 49 fixes sites designed with WebKit in mind, and more ★ Mozilla Hacks – the Web developer blog 標準での対応については、もととなる機能を標準化したうえでCompatibility Standardでエイリアスを定義している。ただwebkitMatchesSelector()やCSS Animationsのイベントなどは、DOM仕様に組み込まれていたりも。 というわけで、ここで取り上げたlayout.

42 users
myakura.hatenablog.com
Firefox 1.0のリリースから10年経った。おめでとうございます。 リリース前のことだけど、WikipediaのFirefoxの記事をちょこちょこいじっていて、FirebirdからFirefoxに名前が変わった件について「Firebirdプロジェクト側から攻撃を受け〜」というふうな感じで書いたら、誰かに表現がきついと言われたことを思い出した。ちぇっ。 Firefox Developer Edition さてそんな記念日にFirefox Developer Editionがリリースされた。 Mozilla Introduces the First Browser Built For Developers: Firefox Developer Edition Aurora channelというBetaより一段階前のもののリブランディングなので、いまのところそんな違いはない気がする。ただM

36 users
myakura.hatenablog.com
Chrome 38が出てが有効になったので、いくつか記事を訳した。 レスポンシブイメージのネイティブサポート - HTML5 Rocks Dev.Opera — ネイティブサポートされたレスポンシブ・イメージ Dev.Opera — レスポンシブ・イメージ：ユースケースと入門用のコードサンプル HTML5 Rocksのはの簡単な使い方をざっと紹介。Dev.Operaのネイティブうんぬんはと, を細かく説明。もひとつのDev.Operaのサンプルのやつはユースケースごとに組み合わせをいろいろ書いたサンプル。それぞれ少しずつ違っている。おすすめは2つ目。ちょっと長いけど、書いているのがBlink, WebKitでとかを実装しているYoavなので。 以下いろいろ。 だいたい<im