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.
同じイベントの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 で、そのベストアンサ
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
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
既存コードへの 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ページを開く
歴史的遺物callback interfaceの紹介 - Qiita