Light-ModeClassicNewspaperMintyDark-ModeNeon NoirMintyHN StartUps
Light-ModeClassicNewspaperMintyDark-ModeNeon NoirMintyHN StartUps
レスポンシブデザインのために resize イベントを使うのはやめて matchMedia メソッドを使おう - ひだまりソケットは壊れない
レスポンシブデザインのために CSS メディアクエリを使うことが多いと思います。 CSS 側だけで完結したらいいのですが、JavaScript 側でも画面サイズの変更を検知したかったり、画面サイズ以外のメディアクエリ相当のことをしたくなったりすることはありますよね。 画面サイズの変更自体は window に発生する resize イベント (window.onresize イベントハンドラ) で検知できますが、CSS メディアクエリとこれを組み合わせてレスポンシブ対応しようとすると以下の問題がでてきます。 ウィンドウサイズ変更時に resize イベントが高頻度で発生するので、resize イベントのリスナでコストのかかる処理を行うのはよくないとされる。 (Throttling することが推奨される。) 参考 : resize | MDN CSS メディアクエリと完全に対応するものではない
requestAnimationFrame とタイマーの今更な比較とデモ
フレーム描画のタイミング制御モデル 今更 requestAnimationFrame() だなんて Can I use を見ても IE 10 ですら実装していて、世界の 9 割以上で動作しうるカバレッジなわけですが改めて setTimeout() との違いを表現しうるサンプルをこさえてました。 それぞれの仕様の詳細や挙動についてはそれこそ今更なのでググっていただくとして、この記事ではサンプルについて曖昧な説明を添えていきます。 CodePen - setTimeout vs requestAnimationFrame (with CSS Transitions) See the Pen setTimeout vs requestAnimationFrame (with CSS Transitions) by Ayumu Sato (@ahomu) on CodePen. 比較のポイントとシ
ES proposal: `global`
Warning: This blog post is outdated. Instead, read section “globalThis” in “Exploring JavaScript”. The ECMAScript proposal “global” by Jordan Harband is currently at stage 3. It provides a new standard way of accessing the global object. Referring to the global object # The following are a few popular ways of referring to the global object: Global variables: Global variable window: is the classic
ES2018: Rest/Spread Properties
Update 2018-01-25: This proposal has reached stage 4 and will be part of ECMAScript 2018. The ECMAScript proposal “Rest/Spread Properties” by Sebastian Markbåge enables: The rest operator (...) in object destructuring. At the moment, this operator only works for Array destructuring and in parameter definitions. The spread operator (...) in object literals. At the moment, this operator only works i
RE:DOM is now 1.0!
HistoryAlmost two years ago, March 10 2015, I released the first version of FRZR, a tiny view library. The API has changed a lot since that and even the name changed to RE:DOM. It has been a long journey, I’ve learned a lot and it’s awesome to finally be at the version 1.0! RE:DOM is definitely more than ready for production with 100 % test coverage. PerformanceRE:DOM is one of the fastest view li
フロントエンドエンジニアのための動画ストリーミング技術基礎
動画はデータ容量が大きい 画像と違い、動画コンテンツはデータ容量がとても大きいため、データをダウンロードして再生するまでに待ち時間が発生します。 動画のデータ容量が大きい理由はとても単純で、動画は画像データが集合したものだからです。静止画像を人間の目が滑らかに感じられる速さで切り替えて表示することで絵を動かすという表現を実現しています（よくパラパラマンガに例えられますが、そんな感じです）。この人間の目が滑らかに感じる速さというのが 1 秒間に 30 枚だったり 24 枚を切り替えることになります。29.97 (≒30) fps とか 24 fps とかの数字を耳にしたことがあるかと思いますが、24 fps の場合は 1 秒間（s）の間（p）に 24 フレーム（f）を切り替えることを意味します。 データを全て自分の端末にダウンロードしてから再生しようとすると、かなり長い待ち時間が発生してしま
Secure Contextsに関する localhost と、IETFでの新提案 - ASnoKaze blog
Secure Contexts Service Workers、Web BluetoothといったAPIは、安全に使用するためにセキュリティ上の条件があります。 その条件がSecure Contextと呼ばれるコンテキストであり、W3CのSecure Contexts(URL)というドキュメントで定義されています。 このSecure Contextsの仕様上で localhost. の扱いがどうなっているかというと次のようになっている。RFC6761の定義では「ローカルのリゾルバはlocalhost. 及び .localhost. の内側のドメインを特殊扱いしてもよい、すべき(MAY/SHOULD)」と書かれており、その不確実性のためlocalhostではなく127.0.0.1の場合に特別扱いするとしている。 つまり、localhostのドメインをローカルネットワークのDNSに問い合わせて
Intervening against document.write() | Web Updates - Google Developers
(index):34 A Parser-blocking, cross-origin script, https://paul.kinlan.me/ad-inject.js, is invoked via document.write(). This may be blocked by the browser if the device has poor network connectivity. Composability is one of the great powers of the web, allowing us to easily integrate with services built by third parties to build great new products! One of the downsides of composability is that it
Vue 2.0 is Here!
Today I am thrilled to announce the official release of Vue.js 2.0: Ghost in the Shell. After 8 alphas, 8 betas and 8 rcs (a total coincidence!), Vue.js 2.0 is ready for production! The official guide has been fully updated and is available at vuejs.org/guide. Ever since the work on 2.0 started back in April, the core team has made significant contributions to API design, bug fixes, documentation
Gitのコミットグラフを可視化できるGitGraph.jsがおもしろい - Qiita
プレゼン資料を作っている時に「このコミットグラフをMarkdownかテキストで書けたらな」と思ったことがある人、結構いるのではないでしょうか。 GitGraph.js を使うと、JavaScriptで記述したコミットログをcanvasを使って可視化できることを知りました。なかなかおもしろいです。 準備 まず GitGraph.js の JavaScript と CSS ファイルを読み込みます。GitHub からソースをcloneするなり、bowerを使うなり、CDNを使うなり、お好みで。ここではコミットグラフを定義するコードも別ファイル index.js に書くことにします。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GitGraph.js</title> <link rel="stylesheet" type=
Loading Polyfills Only When Needed — Philip Walton
New JavaScript and HTML features are being introduced all the time that make our lives as developers easier. In many cases, these new features are so helpful we choose to use them on production websites before they’re fully implemented in all browsers. To not break the experience for users on older browsers, we of course include polyfills for any not-fully-supported features. The problem with this
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - instructure/pdf-annotate.js: Annotation layer for pdf.js (no longer maintained)
optimize-js を使って JavaScript コードを最適化してみる - Qiita
GitHub - azu/map-like: ES2015 Map like object. Tiny `Map` shim.
styleguide/javascript-on-rails.md at master · moneyforward/styleguide
GitHub - adventure-yunfei/package-size-analyzer: Size analyzer for npm package, webpack bundle ...
GitHub - mkwtys/bundle-size: Show bundle file size of npm packages
Add import() as a stage 2 proposal · tc39/proposals@0a134c8
GitHub - RubaXa/wormhole: Wormhole — it's better EventEmitter for communication between tabs with supporting Master/Slave.
