PokiPoki’s blog on game development, culture, and engineering

Intro XHR から fetch() に積極的に移行しづらかった最大のミッシングピースとして、中断できないという問題があった。 これは、fetch() が選んだ Promise ベースのインタフェースにおいて、キャンセルをどうするかという議論と絡み、長く決着が付かずにいた問題である。 最近、やっと話が前進したので、ここまでの経過を解説する。 Fetch のミッシングピース fetch() は、ブラウザが発行するリクエストと、取得するレスポンスを扱う低レベルなインタフェースとして策定が始まった。 DOM の API が Promise ベースに移行しつつある流れを汲み、fetch() もまた Promise を返す関数一発スタイルになった。 クラスからインスタンスを生成しメソッドを呼ぶ XHR スタイルでは、インスタンスを再利用した場合の挙動などを含め、オブジェクトのライフサイクルを考慮
If your JavaScript is a mess, frameworks can only do so much to help. No matter what framework, "compiles-to-JS" language, or library you use, bugs and performance concerns will always be an issue if the underlying quality of your JavaScript is poor. With this hands-on guide, you’ll learn how test and refactor your existing code to help reduce complexity, improve readability, and gain confidence i
ES modules are now available in browsers! They're in… Safari 10.1. Chrome 61. Firefox 60. Edge 16. <script type="module"> import { addTextToBody } from './utils.mjs'; addTextToBody('Modules are pretty cool.'); </script> // utils.mjs export function addTextToBody(text) { const div = document.createElement('div'); div.textContent = text; document.body.appendChild(div); } Live demo. All you need is t
(注:2017/07/19、いただいたフィードバックを元に翻訳を修正いたしました。) ESM、CJS、UMD、AMD — どれを使うべき? 最近、 Twitter では、 ESモジュール の現状、特に、 *.mjs をファイル拡張子として導入すると決めた Node.js の現状について大騒ぎになっています。この話題は複雑で、かなりの労力を費やしてそれに専念しないと議論について行けないので、 皆が恐れと不安を抱く のも無理はありません。 古き恐れ フロントエンド開発者なら、 JavaScriptの依存関係の管理に悩まされた日々 を憶えている人も多いでしょう。あの頃は、ライブラリをベンダーフォルダにコピー&ペーストし、グローバル変数に依存し、あらゆる物を正しい順序でconcatしようとしてもネームスペースの問題に対処する必要がありました。 何年もかかって、私たちは共通モジュール形式と中央集権
10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use
Click the button to start the demo. The demo will immediately preload a 40MB file containing the Java Class Library. Start the Demo OS Resources Contains support for a variety of UNIX-like operating system resources, including: Thread Pool: Emulates multiple concurrent threads, letting DoppioJVM support multithreaded JVM programs. File System: Maps files and directories to browser storage, cloud s
[You can also read this post in Russian.] Those of you upgrading npm to its latest version, npm@5.2.0, might notice that it installs a new binary alongside the usual npm: npx. npx is a tool intended to help round out the experience of using packages from the npm registry — the same way npm makes it super easy to install and manage dependencies hosted on the registry, npx makes it easy to use CLI t
There are a set of rules to keep in mind: Perform work in a feature branch. Why: Because this way all work is done in isolation on a dedicated branch rather than the main branch. It allows you to submit multiple pull requests without confusion. You can iterate without polluting the master branch with potentially unstable, unfinished code. read more... Branch out from develop Why: This way, you can
#teppeis_sushiというイベントで、Faao - ドメイン駆動設計で作るGitHub Issue Client -という話をしました。 Electronやブラウザなどで動くfaaoというGitHubクライアントを書いていてそれの技術的な話です。 クライアントサイドでDDDを取り入れた設計になっていて、その設計や規約の作り方やそれを守る方法についての話をしました。 azu/faao: Faao is a GitHub issue/pull-request client on Electron. Living Documentation by design, with Domain-Driven Design by Cyrille Martraire [PDF/iPad/Kindle]という無料から買える書籍では、ドキュメントとコードを同じ速度で成長させていくためにはドキュメントに対
TL;DR; flow 0.19.0 から .js.flow 拡張子がついたファイルがあればそれを見るようになった npm パッケージでは型情報を消した .js ファイルと、型情報を持った .js.flow ファイルを一緒に配布する 将来的に flow に特大の後方非互換な変更が入らない限り動くはず npmパッケージも型情報を使いたい 開発時に型情報を書いても、いざ配布するときにはそれを取り外してから配布する。取り外さないと、 flow を使っていないプロジェクトで require することが困難になってしまうためだ。 しかし、そのパッケージを使うときには flow を使いたい。flowtype/flow-typed に自分のライブラリの情報を載せるのが一つの手だが、開発段階で実装が流動的だと更新が面倒なのに加えて、そもそも DRY ではない。 せっかく開発時に書いた型情報を、 npm パ
Promise Error Handling 約束されたエラー Promiseとエラーの基本 Promise内で起きた例外は自動でキャッチされる エラー処理は.catch(fn)で行う var promise = new Promise(function(){ throw new Error("例外"); }); promise.catch(function(error){ // 例外をキャッチできる }); よくある問題 .catch(fn) をしないとエラーログも出せない .catch(fn) をしわすれてエラーの握りつぶしが起きる = unhandled rejection (.catchをしてないpromise) 4.6. Promise.prototype.done とは何か? 現状のunhandled rejectionへの対応 unhandled rejectionが発生した
いわゆる SPA + サーバーサイドレンダリングがダルい 唐突ですがおさらいです。 なぜサーバーサイドレンダリング(SSR)が嬉しいかと言えば 初期表示の Critical Rendering Path を短縮できる SEO における保守信仰にやさしい() 古いブラウザ・低性能マシンにやさしい yahoo/fluxible による SPA + Server Rendering の概観 ::ハブろぐ であり、特に SPA + SSR の文脈においては Universal Architecture による SPA + SSR は、技術的には過渡期の歪なキメラっぽさが拭いきれませんが、昨今の Web フロントエンドにしては珍しくビジネス的な説得力があります。 SSR なのでSNSや検索からの流入による初期表示が速い SPA なので回遊時のページ遷移も速い SSR なので古いブラウザでも CSS
さて、 #MobX に出会ってはや半年が経ちました。 相変わらずTwitterとか見てる限り、俺くらいしか使ってないのでは感を感じてたりはするんですけど・・。 2016年の海外では割と話題になってた(と個人的には)思ってて、2017年になれば国内でもぼちぼち取り上げられ始めるのでは・・?ということで。 そしてそのときになって「Redux vs MobX」とかいうしょーもない切り口ばっかり出てこないように、今のうちに釘を。 興味を持ってもらえた場合は、0からはじめるMobXシリーズもあるのであわせてどうぞ。 MobX カテゴリーの記事一覧 - console.lealog(); MobXについて Introduction | MobX 詳しいことは過去に記事もいろいろ書いてるし、ドキュメントも充実してるので各位で調べてもらうとして。 ざーっくりいうと、 `Object.observe`のちゃ
このドキュメントの目的 自分は趣味でFlowをずっと使っていて、またプロダクションでも今まで3プロジェクトほどにFlowを導入した。その知見。 「Flow は便利そうだけど、怖い」「いれてみたら色々ハマったからクソ」「わからん、なにもかも…」という人に対し、自分がいままで出くわしたパターンや、聞かれた疑問について、メジャーな解法を提示する。 なぜFlowを導入するか Babel から段階的に導入することが出来る React の JSX にも推論を入れることができる 部分的に適用できる ASTがES準拠であり、ESLintなどがツールが使える(TSは独自AST) それ自身ランタイムに全く影響はないので落とすのも簡単 実際にはReactと一緒に使うのが、エコシステムもユースケースも揃っていて、一番効果を発揮するだろう。それか、小さい npm モジュールを自分で書くとき。 型のメリット/デメリッ
JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です! 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く