GitHub - hotwired/stimulus: A modest JavaScript framework for the HTML you already haveYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
正規表現にdotAllフラグが追加された - JS.next
概要 正規表現でドット「.」を改行文字にもマッチさせることができるようになった。 説明 正規表現でドット「.」は殆どの文字にマッチするが、改行文字にはマッチしないという性質がある。 ES2018ではs（dotAll）フラグを付けることで、ドットを改行文字にもマッチさせることができるようになった。 例： var text = ` JavaScriptは【プロトタイプベ ース】のオブジェクト指向言語 である` // 【】の中身が欲しいとき、改行文字が含まれるためドットを使うと上手くいかない text.match( /【.+】/ ) // null // ES2017以前は改行文字にもマッチさせるためにしばしば/[\s\S]/や/[^]/が使われてきた text.match( /【[\s\S]+】/ ) // "【プロトタイプベ↵ース】" text.match( /【[^]+】/ ) // "【
正規表現の名前付きキャプチャが実装された - JS.next
概要 正規表現内の好きな部分に名前を付け、その名前を使ってマッチ結果を参照できるようになった。 共通 あるパターン「pattern」に名前「name」を付けたい時は(?<name>pattern)と記述する。 例：日付文字列にマッチする正規表現の、「年」「月」「日」の部分にそれぞれ「year」「month」「day」という名前を付ける // ES2018以降 re2018 = /(?<year>\d{4})年(?<month>\d{1,2})月(?<day>\d{1,2})日/u // ES2017以前 re2017 = /(\d{4})年(\d{1,2})月(\d{1,2})日/ （※名前付きキャプチャを使うには正規表現にユニコードフラグ/regexp/uを付ける必要がある） マッチについて 正規表現オブジェクトのmatchやexecメソッドを呼ぶと、返り値のオブジェクトのgroupsプ
JSONが対応していない値(NaN/Infinity/Date等)をJSONに保存する方法
extendJSON.md JSONが対応していない値をJSONに保存する方法 JSONは NaN / Infinity / -Infinity や Date 型等に対応していない。 しかし、JavaScriptのJSONは、これらを解消する仕組みを持っている。 それは JSON.parse の第二引数の reviver とJSON.stringify の第二引数の replacer だ。 注意が必要なのは、 Date 型は toJSON メソッドを持つため replacer に値が渡る前に文字列になってしまうこと。 これに対応するには toJSON メソッドを一時退避してしまえば良い。 これらを上手く駆使すれば、JSONに型を保ったまま値を保存し復元することができる。 こんな感じ。 var original = { 'nan': NaN, '+inf': Number.POSITIVE_
Promise.prototype.finallyが実装された - JS.next
概要 プロミスの成功・失敗に関わらず継続して処理を行うためのPromise.prototype.finallyメソッドが実装された 参考記事 Promiseについて - JS.next イメージ 従来、処理が成功しても失敗しても最後に行いたい処理を記述するためには、thenメソッドの２つの引数両方に指定するなどするしかなかった。 showMessage( '読込中……' ) fetchData( 'hoge' ) .then( data => showData( data ) ) .catch( ( ) => showData( null ) ) .then( ( ) => showMessage( '読込完了！' ), ( ) => showMessage( '読込完了！' ) ) それがfinallyメソッドを使うとこう書ける。 showMessage( '読込中……' ) fetch
Spread/Restプロパティが実装された - JS.next
概要 配列のSpread/Rest構文のように、オブジェクト内に別のオブジェクトを展開する構文が実装された。 比較例 Spread ES2017以前こう書いていたのが // オブジェクト o1 と o2 を合成し、プロパティ c を加えたものを o3 としたい o1 = { a: 1 } o2 = { b: 2 } o3 = Object.assign( { }, o1, o2, { c: 3 } ) ES2018以降こう書ける // オブジェクト o1 と o2 を合成し、プロパティ c を加えたものを o3 としたい o1 = { a: 1 } o2 = { b: 2 } o3 = { ...o1, ...o2, c: 3 } オブジェクトの合成が簡単にできるようになる。 Rest ES2017以前こう書いていたのが // プロパティ a, b と残りをまとめたものを r として取り出
Object.getOwnPropertyDescriptorsが実装された - JS.next
概要 対象のオブジェクトがもつ全てのPropertyDescriptorsを得られる関数が実装された。 例 以下の時 obj = { name: 42, [ Symbol( 'foo' ) ]: 56 } これまでは Object.getOwnPropertyDescriptor( obj, 'name' ) のように１つずつしか得られなかったが これからはgetOwnPropertyDescriptorsの方を呼ぶことで Object.getOwnPropertyDescriptors( obj ) // -> { name1: { value: 42, writable: true, enumerable: true, configurable: true }, Symbol( foo ): { value: 56, writable: true, enumerable: true,
GitHub - copy/v86: x86 PC emulator and x86-to-wasm JIT, running in the browser
or #v86 on irc.libera.chat v86 emulates an x86-compatible CPU and hardware. Machine code is translated to WebAssembly modules at runtime in order to achieve decent performance. Here's a list of emulated hardware: An x86-compatible CPU. The instruction set is around Pentium 4 level, including full SSE3 support. Some features are missing, in particular: Task gates, far calls in protected mode Some 1
Electron: Context Isolationの欠如を利用した任意コード実行 / Electron: Abusing the lack of context isolation - CureCon(ja)
ベルリンで開催されたCure53のイベント、CureConの資料です。
静的サイトをとにかく高速化する話
自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h
<script> タグに async / defer を付けた場合のタイミング - Qiita
HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
performance-handbook
try-catch構文で例外を受け取る変数の指定を省略できるようになった - JS.next
GitHub - Rich-Harris/shimport: Use JavaScript modules in all browsers, including dynamic imports
GitHub - future-architect/cheetah-grid: The fastest open-source data table for web.
The Definitive TypeScript Guide - Blog | SitePen
GitHub - aws/jsii: jsii allows code in any language to naturally interact with JavaScript classes. It is the technology that enables the AWS Cloud Development Kit to deliver polyglot libraries from a single codebase!
1233809 - Daylight Savings Time Displays the Wrong Date in JavaScript on Windows
thedaviddias/Front-End-Performance-Checklist: 🎮 The only Front-End Performance Checklist that runs faster than the others
