イベントフロー | JavaScript プログラミング解説
イベントフローとは DOM0のイベントモデルでは、イベント発生時にはイベント ターゲット (イベントが発生した要素) のハンドラのみが実行されます。一方でDOM2では、DOM階層における上位の要素のハンドラにも、実行の機会が与えられます。 イベントフェーズ (event phase) イベントは、次の3つの段階 (フェーズ) を経て伝播されます。 キャプチャフェーズ … DefaultView (Window) からドキュメント ツリーを下って、ターゲット ノードまでイベントが伝播する段階です。 ターゲットフェーズ …ターゲット ノードでイベントが呼ばれる段階です。(DOM0のイベントモデルに相当します) バブルフェーズ … ターゲット ノードからドキュメント ツリーを上って、DefaultViewまでイベントが伝播する段階です。 イベントを捕捉したハンドラはEvent.stopPropa
マウスイベントでのドラッグ&ドロップ
ドラッグ&ドロップは素晴らしいインタフェースソリューションです。何かを掴み、ドラッグとドロップをすることは、コピーや移動(ファイルマネージャを参照)から注文(カートにドロップする)まで、多くのことをするための明白かつ簡単な方法です。 現在の HTML 標準では ドラッグイベントに関するセクション があります。 それらはシンプルなタスクを簡単に解決したり、“外部” ファイルのドラッグ＆ドロップをブラウザで扱うことができたりと、興味深いです。したがって、OSのファイルマネージャでファイルを取り、ブラウザウィンドウへドロップすることができます。その後、JavaScript はそのコンテンツへアクセスできます。 しかし、ネイティブのドラッグイベントにも制限があります。例えば、特定の領域でドラッグを制限することができます。また、ドラッグを “水平” または “垂直” のみにすることはできません。その
npmとyarnの脆弱性とpostinstall - Cybozu Inside Out | サイボウズエンジニアのブログ
フロントエンドエキスパートチームの小林(@koba04)です。 先日、npmから脆弱性についての発表がありました。 調べていく中でいくつか思うところがあったので解説も兼ねて書いていきたいと思います。 The npm Blog — Binary Planting with the npm CLI npmの利用者としてやるべきことは、 npmのバージョンを6.13.4以上にあげる yarnのバージョンを1.21.1以上にあげる です。 npmのバージョンが6.13.4になったNodeもv8, v10, v12, v13系でそれぞれリリースされたので、そちらを利用することも可能です （yarnのバージョンは別途あげる必要があります）。 nodejs.org npmによる発表では、今回発表された脆弱性は2件あるため、それぞれ個別に考えます。 binに任意のパスを指定出来る件 npmパッケージはpa
The State of JavaScript 2019
We were pretty sure 2018 would be the last time we did this survey. After all, the JavaScript ecosystem can’t very well keep changing again, can it? But what do you know, turns out JavaScript isn’t quite done changing just yet! And so after over 21,717 respondents took this year's survey we had to dig up our components and charts, curse us-from-a-year-ago for writing such crappy code, and get to w
JavaScript で UUID (Ver4) - Qiita
なるべく衝突しないIDを用意したい 時刻やMACアドレスなどの固有の値を使わず、なるべく衝突しない一意のIDを生成したい。それでは、UUIDを作りましょう。 バージョン4 乱数によるUUID。16進表記ではRRRRRRRR-RRRR-4RRR-rRRR-RRRRRRRRRRRRとなり、バリアント(10)とバージョン(0100)を除くすべてのビットを乱数（R:122ビット）で生成する。 UUID - Wikipedia RFC4122 でも確認できます。 他ライブラリではどのように生成しているのか Chrome Platform Analytics の実装 (Apache License v2.0) /** @private {string} */ analytics.internal.Identifier.UUID_FMT_ = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxx
Heroku Node.js Support Reference | Heroku Dev Center
While older versions of Node.js are always available to install on the platform, only use them to incrementally upgrade an application to a supported version. We recommend: Using only Active LTS or Maintenance LTS releases in production Always running the latest patch release of supported Node.js versions Upgrading before a Node.js release is End-of-life (EOL) Specifying a Node.js Version Always s
Vue.js Responsive Image Lazy Loading - Markus Oberlehner
In today’s article, we take a closer look at how we can build our own custom lazy loading image component with Vue.js. We use the fast and lightweight Lozad.js package for handling the lazy loading logic for us, and we’ll enhance it with the ability to display the dominant color of the image as a fallback color, which is shown while the original image is loading. Additionally, the lazy loading com
はてなブックマークのタグを一括置換するコマンドラインツールを書いた
追記(2020-12-16): 公式で再実装されたようです。 「タグの一括編集機能」をPCのブラウザで再提供いたします - はてなブックマーク開発ブログ はてなブックマークで自分のブックマークの既存のタグ名を変更した時に一括置換したいことがあります。 以前は公式のタグの一括置換/削除機能の追加がありましたが、ブックマーク一覧ページのリニューアル時に消えてしまったようです。 ユーザーのブックマーク一覧ページのシステムリニューアルを行いました - はてなブックマーク開発ブログ Firefoxのアドオン版でも同様の機能がありましたが、もう動かなくなっているので、はてなブックマークのタグを一括置換するコマンドラインツールを書きました。 azu/hatenabookmark-rename-tags: A CLI that replace all hatena bookmark tags. haten
router プロパティ
router プロパティ router プロパティを使って Nuxt ルーター (vue-router )をカスタマイズできます。 base 型: String デフォルト: '/' アプリケーションのベースの URL です。例えば、単一ページアプリケーション全体が /app/ 下に配置される場合、base の値は '/app/' を指定します。 これは、より大きな Web サイト内から、Nuxt を別のコンテキストルートとして提供する必要がある場合に役立ちます。フロントプロキシウェブサーバーを設定する場合としない場合があることに注意してください。 router.base にリダイレクトしたい場合、Hook を使ってリダイレクトすることができます。ルートでない場合 router.base にリダイレクトさせるを参照してください 。 Nuxt v2.15 以降では、実行時にこのプロパティの値
window.postMessage APIの使い方を調べた - takapiのブログ
postMessageとは HTML5で拡張された機能 任意のウィンドウへクロスオリジン通信が可能 セキュアである 双方向の通信チャンネルが確立されてから通信を行う 悪意あるWebサイトから知らないうちにされないようにしているため 使い方（送信） win.postMessage("メッセージ", "http://www.example.com"); メッセージを受け取りたい対象に対してpostMessageを呼びます。 コードで示している win は以下を指します。 自分のドキュメントウィンドウ内に生成されたiframe JavaScriptで開いたポップアップウィンドウ 自分のドキュメントウィンドウを含むウィンドウ 自分のドキュメントを開いたウィンドウ 第一引数に渡したいメッセージ（文字列）、第二引数に宛先のオリジンを指定します。 受け取り方(受信) addEventListenerを使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - bnb/bitandbang: My npm card 🤗
Docs • Sapper
scroll-depth/jquery.scrolldepth.js at master · robflaherty/scroll-depth
W3Schools.com
node-upload-s3
Images Native Lazy Loading and Its Polyfill | Blue Turtle Blog
Lazy Loading Images in VueJs - Digital Fortress
Githubにあげた個人のnpmパッケージをインストールする方法
Example of SVG sprites
Front End Checklist - DEV Community