All slide content and descriptions are owned by their creators.
![大型フロントエンド開発におけるTypeScriptとDDD // Speaker Deck](https://cdn-ak-scissors.b.st-hatena.com/image/square/c75049282afebd882604345ad2f5e917fd08593b/height=288;version=1;width=512/https%3A%2F%2Fspeakerd.s3.amazonaws.com%2Fpresentations%2F3eae91c01aab43dd995a21cc023d640b%2Fslide_0.jpg)
All slide content and descriptions are owned by their creators.
Timer APIs(Date.getTime, Date.now, performance.now, setTimeout, setInterval, requestAnimationFrame, setImmediate) with Canvas AnimationanimationcanvasrequestAnimationFrameDate.nowperformance.now このエントリでは、「ブラウザ上で Canvas アニメーションを効率的に動かすコードを書こうとした場合に、どういった API を利用すれば良いか?」をテーマに、Timer API について説明します。 このエントリに登場する Time API は、Date.getTime, Date.now, performance.now, setTimeout, setInterval, requestAnimatio
Canvas や SVG などを用いて、アニメーションを行う場合の描画繰り返しについて考えます。 描画の繰り返しアニメーションには requestAnimationFrame や setTimeout など利用し、そのタイミングで再描画を繰り返すという手法が一般的です。 これまで、 setTimeout を利用することが主流で、60 FPS のアニメーションの場合は例えば以下の様なコードで実現することも多かったかと思います。 var x = 0; ( function loop(){ setTimeout( loop, 1000 / 60 ); x += 1; console.log( x ); } )(); ただし、setTimeout や setInterval は、ブラウザー側で再描画の準備が整っているか否かにかかわらず、必ず実行されてしまいます。また、ブラウザーのタブが非表示 (バ
WindowインスタンスプロパティcachesclosedconsolecookieStorecredentiallesscrossOriginIsolatedcryptocustomElementsdevicePixelRatiodocumentdocumentPictureInPictureeventexternalfence Experimental frameElementframesfullScreenhistoryindexedDBinnerHeightinnerWidthisSecureContextlaunchQueue Experimental lengthlocalStoragelocationlocationbarmenubarmozInnerScreenXmozInnerScreenYnamenavigation Experimental navigatoropen
npmにモジュールを公開することは多くなってると思いますが、今までのnpmだと名前は早い者勝ちでした。 最近npm Private Modulesというprivateで扱えるモジュールを有料でサポートしましたが、これはscoped modulesをprivateで扱う時だけ有料でpublicで公開する時は無料で行えます。 scoped modulesというのは、@username/project-name という感じで、@ユーザー名がパッケージ名に入るので異なるユーザー間では重複しません。 The npm Blog — solving npm’s hard problem: naming packages 公開手順 実際にscoped modulesをpublicに公開する手順としては、 npm init --scope=<npmユーザ名> パッケージの名前が@<npmユーザ名>/パッケー
こんにちは、王です。 みなさん、「RxJS」をご存知でしょうか? すごく大雑把に言うと、RxJSとは非同期処理(マウスクリックなどのイベントベースの処理も含める)をするときに超絶便利なライブラリです! イメージしやすいように「便利」とは言いましたが、決して「便利」という言葉ではおさまらないくらいのインパクトがあると思います。ちょっとした「イノベーション」に近い感覚です。 今回は、RxJSを全く知らない初心者でもとっつきやすいように説明してみたいと思います。少し記事が長くなりますが、最後までお読みいただければ幸いです! 目次 ReactiveXについて 非同期処理の問題点 RXと「Observerパターン」 ウォーミングアップ イベントを配列のように操る? Stream(ストリーム) ストリームを操作する「オペレーター」 オペレーションチェーン ObserverとObservable Col
「3分でできるnpmモジュール」に、公開のための手順がまとめられていて分かりやすかったので(感謝)、実際に3時間でモジュールを作ってみました。そのときにやったことのメモ。 (ちなみに、作ったのはPhantomJSをgulpから使いやすくするプラグインgulp-phantomです。よかったら使ってください〜) なにするの? モジュールのお膳立て 実装 GitHubにソースコードを置く npmに公開する 1時間目 まずはお膳立てから。最低限、必要なファイルはこのあたりです。1時間目に、太字のファイルからやっつけます。 package.json .npmignore .gitignore .travis.yml index.js test/ LICENSE README.md package.json こんな感じのやつですね。公開しないプロジェクトだと、dependencies以外、省略している
まずあれです、タイトルは盛りました。 実装は3分じゃおわらないよ!! でも公開のための作業は3分くらいで行けるんじゃないかと思います。 作ったものを、公開したくてうずうずしている方は、ぜひ読んでみてください。 [1分目] npmアカウントを作ろう npmの公式ページから なにはともあれ、npmの開発者として登録しましょう。 https://npmjs.org/signup から、「Make it so.」しましょう。 特筆するようなことはないですが、すぐに使うので username password email address は、ちゃんとメモしておきましょう。 npm adduser 登録ができたら、ターミナルからnpm adduserを実行します。 すると、username・password・email addressを聞かれるので、 先ほど作ったアカウントのものを入力します。 これで
JavaScriptのオブジェクトは参照渡しなので複製したい時は自分で同じオブジェクトを作らないといけない。そこでオブジェクトをディープコピーするclone関数を作ってみた。コードは以下。GitHubにもある。 See the Pen PqRWmw by shigure (@webkatu) on CodePen. 使い方と引数の説明 var cloneObject = clone(object, homogeneity, excludedPrototypes, excludedObjects); 第一引数「object」 第一引数はコピーしたいオブジェクトを指定する。ただ単にディープコピーしたいのであれば第一引数だけ使えばいい。 var a = {a: function() {}, b: [], c: {}}; var b = clone(a); //参照渡しではなく全てコピーされている
Checks if the given value type is arguments. var getArguments = function() { return arguments; }; var arguments = getArguments(); is.arguments(arguments); => true is.not.arguments({foo: 'bar'}); => true is.all.arguments(arguments, 'bar'); => false is.any.arguments(['foo'], arguments); => true // 'all' and 'any' interfaces can also take array parameter is.all.arguments([arguments, 'foo', 'bar']); =
現在の主要ブラウザのうち、ChromeとFirefoxでは「GamePadAPI」が実装されており、USBゲームパッドの情報を取得することが出来る。 しかし、各ゲームパッドによってボタンの数や値が違うため、ユーザーの使っているゲームパッド毎に設定を行う必要がある。 それではユーザーが持っているゲームパッドを指してすぐゲームをすることが出来ないので、ほとんどのコントローラーで同じ値が返ってくるボタンに限り共通の値が返ってくるライブラリ「GamePadProcedure」を作ってみた。 このライブラリを使うと、ファミコンコントローラーのようなUSBコントローラーと、XBOX360コントローラーを認識出来ていればアナログスティックの情報も取得出来るようになる。 情報の取り方はgithubに書いてあるのでそちらを参照。 2015.01.05 追記 nexus5にUSB変換ケーブルを使いPS3 DU
A very simple way to wait for asynchronius processes. @uupaa - 2014-02-14 JavaScript, Async, Idiom JavaScript は非同期処理の塊 XHR onload setTimeout postMessage addEventListener DOMContentLoaded 非同期プログラミングを支援するイディオムには、 Deferred, Promises, async, await, DOM Promise, Flow.js などがありますが… Task.js を導入すると、非同期処理やブラウザのサポート状況に悩まされず、 ロジックのコーディングに集中できます 非同期処理へのNeedsとWants 複数の非同期処理の完了を待ちたい ダウンロードの完了を待ちつつアニメーションしたい いくつか
A very simple way to wait for asynchronius processes. @uupaa - 2014-08-14 (rev 3) JavaScript, Async, Idiom 非同期プログラミングを支援する ライブラリやイディオムには、 Deferred, Promises, Async/Await などがありますが… Task.js も、 非同期プログラミングを 強力に支援するライブラリの1つです このようなコードを毎回書いていませんか? Webページの読み込み完了を待ちつつ サーバからのレスポンスを待ちつつ アセットをダウンロードしつつ アニメーションカーソルを表示 var progress = 0, tasks = 3; // 非同期処理は合計で3つ var cursor = new WaitCursor().show(); // アニメーション
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
The web frontend scene is witness to many new frameworks and ways of working. It can be quite annoying when software becomes legacy quicker than ever. But actually, it's just good old innovation happening as it should, because the opportunities for improvement are there. Frameworks come and go, but what remains are the good ideas that they brought to the world. We're going to talk about the good i
Kefir also available on jsDelivr. ExamplesLet's start from a quick little example to get you a feel of what is it like to program with Kefir. First we create a stream of events that will produce three numbers with interval of 100 milliseconds: var numbers = Kefir.sequentially(100, [1, 2, 3]); Now let's create another stream based on the first one. As you might guess, it will produce 2, 4, and 6. v
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く