Workboxで始める Service Worker
The document describes how to configure a service worker to cache assets and network requests to improve performance for a web application. It shows code for registering a service worker, precaching assets using Workbox, transforming precached URLs to include cache-busting query strings, and configuring runtime caching for API requests using a network-first strategy with a 30-day cache expiration.
歴史的遺物callback interfaceの紹介 - Qiita
これはChromium Browser アドベントカレンダーの五日目の記事です。本記事ではWeb IDL規格におけるcallback interfaceとcallback functionという2つのコールバック仕様を説明します。ウェブ開発者を想定読者としていますが、ウェブ開発の役には立たない内容となっていますので、トリビアとしてご活用ください。 二つのコールバックの仕組み ウェブ開発をしている方々はなにかとコールバック関数を使う機会があると思います。一番有名なのはEventTarget.addEventListenerでしょうか。 document.body.addEventListener('click', () => { console.log("you've clicked"); }, false);
同じイベントのaddEventListenerを1つにまとめるライブラリを書いた
1つにまとめる? Reactなどのコンポーネント志向のライブラリを使っていると、各コンポーネントで同じ要素へ同じイベントを貼っていることがあります。 // Component A const handlerA = (event) => {}; window.addEventListener('scroll', handlerA); // Component B const handlerB = (event) => {}; window.addEventListener('scroll', handlerB); // singleton const eventObserver = require("ui-event-observer"); // シングルトンじゃない方法 // require("ui-event-observer").UIEventObserver // Component
iPhone Safariで動画をインライン再生する方法 - Qiita
iPhone SafariのVideoタグの制限 iPhone SafariのVideoタグには大きく2つ制限がある。 ユーザインタラクション（タップ）なしに再生できない 初期再生時必ずフルスクリーン再生になる 特に2がクセモノで、これのせいでモバイルブラウザに動画広告はほぼ無いし、モバイルブラウザゲームには動画演出がない（MotionJPEGみたいにjpegを数百枚数千枚差し替えるとか涙ぐましいことをしている例はある）。 制限は超えられる この制限が超えられないものかと調べてみると、やはり同じようなことを訊いている人が居た。 inline html5 video on iphone - Stack Overflow http://stackoverflow.com/questions/30855662/inline-html5-video-on-iphone で、そのベストアンサーが I
Tracking unhandled rejected Promises
In Promise-based asynchronous code, rejections are used for error handling. One risk is that rejections may get lost, leading to silent failures. For example: function main() { asyncFunc() .then(···) .then(() => console.log('Done!')); } If asyncFunc() rejects the Promise it returns then that rejection will never be handled anywhere. Let’s look at how you can track unhandled rejections in browsers
小さい広告的な Flash を Chrome で自動再生させちゃうアレ
重要でない Flash を Chrome は遮断する Googleは、ChromeでFlashをあからさまに遮断するわけではないが、動画などの「中心的コンテンツ」の再生のみを許可し、Flashアニメーションなどの周辺コンテンツは一時停止させる。 「Chrome」、Flash広告をデフォルトで停止に--9月1日から - CNET Japan Chrome のデフォルト設定では重要でないとされる広告的なサイズの Flash は自動再生が行われないようになっています。 業務でこの仕様について調べたところ、Flash がある一定以上のサイズで表示されていれば自動再生されますが、ある一定のサイズを下回ると自動再生されなくなることが分かりました。 Width 基準なのか Height 基準なのか、はたまた面積なのか画面サイズやウインドウサイズに対する相対値なのか、他にも条件があるかもしれません。詳細は
HTML の script タグ内にインラインで書かれた js をデバッグする方法 - Qiita
はじめに HTML の script タグ内にインラインで書かれた js をデバッグする方法を共有します 本来であれば外部ファイルとして *.js にすべきですが、ワケあって <script> タグ内に js が書かれている場合に有効です！ この方法は script タグに囲まれた js を、 あたかも外部ファイルの js として扱えるようになります やってみよう 例えば、以下のような html があるとします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Qiita</title> </head> <body> <div id="hello">Hello World!</div> <script> document.querySelector('#hello').addEventListene
US／JIS配列両方でCtrl-+ をキャッチする - Qiita
「+」という文字の入力はUS配列だと shift+=, JIS配列では shift+;になる。 問題となるのは、ctrl+shift+αという組み合わせがどういうメタキーの組み合わせとして解釈されるか、キーボードの設定次第で変わる。 US配列だとkeyCode: 187 とctrlKey。JIS配列だと186とctrlKeyとshiftKeyになっていた。 window.addEventListener "keydown", (e) => # US / JIS if (e.keyCode is 187 and e.ctrlKey) or (e.keyCode is 186 and e.shiftKey and e.ctrlKey) e.preventDefault() # exec something return false return true この挙動によって何が起こるかというと、
ChromeでW3C Push APIを使ってみた - Qiita
※ (2017/7/4: Chrome以外のブラウザとの相互運用性を考慮する場合は、Web Pushへの移行を推奨します。Web Pushについては[改訂版] Web Pushでブラウザにプッシュ通知を送ってみる[旧仕様対応版]にまとめています。(なお、AndroidやiOSへのFirebaseプッシュ通知と統合して運用する場合は、Firebase JavaScript SDKの利用を検討した方がよいかもしれません。)) ※ (2015/11/27: 関連してFetch APIの使い方を簡単ながら別記事に書いてみました。) もう既に、ググると参考記事がいくらでも出てくるような内容ではありますが、個人的にいろいろと上手く行かなかったりしたこともあるので、参考までにまとめてみました。 さて、Chrome 42 (Android版を含む(!))では、Service Workersとの組み合わせで
既存コードへの Bacon.js 導入サンプル
適当なサンプルをBacon.jsにしてみた こんな感じの、ボタンを押したらスライドが切り替わるだけのサンプルを用意して、Bacon.js に無理のない範囲での書き換えを試みてみた。ご時世柄、jQueryは未使用。 See the Pen raGLMd by Ayumu Sato (@ahomu) on CodePen. 生のJavaScriptからスタート どうせ Bacon.js で置き換えることになるので、サンプル時点でも構造化しないで手続きをダラダラと書いておいた。 document.addEventListener('DOMContentLoaded', function() { getById('prev').addEventListener('click', function() { moveSlide(-1); }); getById('next').addEventList
Firefoxはdocumentにclickイベントリスナーを登録すれば中・右クリックも捕捉できる - rikubaの日記
Firefoxのclickイベントは、イベントリスナーの登録先がdocumentか要素かによって、中・右クリックも捕捉するかどうかが変わる。 /* Firefox 3.6.13 */ document.addEventListener('click', function (e) { alert(e.button); /* 左クリック、中クリック、右クリック すべて拾う */ }, false); document.body.addEventListener('click', function (e) { alert(e.button); /* 左クリックしか拾わない */ }, false); 他のブラウザではどうなるかも調べてみたけど、Firefoxのように登録ノードによって違いがでるブラウザはなかった。 document 要素ノード 左 中 右 左 中 右 IE8 ○ ○ × ○ ○
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドエンジニアのためのSafari 9.0の予習 - Qiita