SCRIPTY#5 〜フロントエンド紳士・淑女のための勉強会〜で話したスライドです
ぼくらのCONST戦争 SCRIPTY #5
SCRIPTY#5 〜フロントエンド紳士・淑女のための勉強会〜で話したスライドです
DraftJS Plugins - High quality plugins with great UX
The documentation currently represents the 4.0.0 release. For troubleshooting please checkout theFAQ Slack-like emoji autocompletion, Facebook-like stickers & mentions, and many more features out of the box to enhance your web application. Wait, but why?Facebook's rich-text editor framework DraftJS built on top of React allows you to create powerful editors. We're building a plugin architecture on
Coffee, jQueryで書いていたElectronアプリをES6, React, Reduxで書き直した - k0kubun's blog
ElectronベースのTwitterクライアント: Nocturn ElectronでYoruFukurou風のTwitterクライアントを作った - k0kubun's blog の時にCoffeeScriptとjQueryで作っていたNocturnというTwitterクライアントがあり、これをES6, React, Reduxを使って書き直した。この記事ではその時に得た知見、感じた事を書いておく。 移行したスタックと移行時に感じたこと あらかじめお断りしておくと、僕は普段はRubyでサーバサイドの実装や運用をやっている人であり、JavaScriptに関してはほぼ素人の意見なので、以下はReactとかRedux興味あるけどまだ触ったことないですみたいな人向けの内容になると思う。 CoffeeScript → ES6 移行 参考: 春からはじめるモダンJavaScript / ES201
Promises in JavaScript Unit Tests: the Definitive Guide — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. Despite making asynchronous code simpler, dealing with promises in unit tests is a hassle. You need to wire your test’s assertions into the callbacks of the promise, which adds extra code into the test. In this
Promiseで逐次実行する時のテスト - tohashi's blog
var Promise = require('es6-promise').Promise; var tasks = { first: function(value) { return new Promise(function(resolve, reject) { if (value < 2) { resolve(value + 1); } else { reject(new Error('failed at first')); } }); }, second: function(value) { return new Promise(function(resolve, reject) { if (value % 2) { resolve(value + 1); } else { reject(new Error('failed at second')); } }); }, third: f
How to stub promises using Sinon.JS
Promises are a great way of doing async programming. But testing with promises can be a bit cumbersome, even with the use of the arrow functions syntax. Recently I've found a small and nice package to help to stub tests using Sinon, and the library is sinon-stub-promise. function fetchMovieData() { return fetch("/movies") .then(res => { return res.json(); }) .then(movies => { return movies; }); }
JavaScriptのPromiseオブジェクトについて調べた事 | QUARTETCOM TECH BLOG
JavaScriptのPromiseオブジェクトについて調べた事を紹介します。 目次 同期処理と非同期処理 Promiseとは何か ES6 Promiseのコンストラクタ関数 コンストラクタに渡した関数内で発生したエラー Thenable Static Method 並列処理 逐次処理 アンチパターン JasmineによるPromiseオブジェクトのテスト Promiseオブジェクトのライブラリ「Q」の紹介 Deferred AngularJSの$q ひとこと 私が敢えて書かずともPromise/Deferredについての解説サイトは溢れるほど存在します。なぜそこに重ねるように同じ記事を書いたのか？ 1ヶ月ほど前の私の意識は「Promiseオブジェクト？あー、then()て呼ぶやつね」という程度でした。よく知らずに使っているとアンチパターンに出てきたような使い方をしているところも多々あり、
Reactを使ったプロダクトのパフォーマンスを改善した話 | GMOメディア エンジニアブログ
技術推進室の色川です。 ここ一年くらいランキングシェアというキュレーションメディアのフロントエンドを担当しています。その記事作成画面をReactで実装しており、先日アイテムの移動をDrag&Dropで行えるようにしたのですが、動きはガクガク、ブラウザは途中で固まる、という有様で、パフォーマンスチューニングを余儀なくされたのでその内容を紹介します。 ［ランキングシェアの記事作成画面］ ※画面は開発中のものです。（動画にしたら？との意見があったのですが、Windowsで画面を録画する方法が分からず…） Reactのパフォーマンス改善の基本Reactはコンポーネントをツリーとして管理していて、あるコンポーネントの更新が必要になるとそのコンポーネントをルートとするサブツリー全体を更新します。 引用元：Reactive, Component-based UIs with React | Consta
JSおくのほそ道 #000 [IndexPage] - Qiita
ご挨拶 じぇいえすや 嗚呼じぇいえすや じぇいえすや 初めまして！ JavaScript街道600里を歩きながら、その中で生まれた発見や探求を詠み上げます。 テーマはとしては 「JavaScript基礎のその奥へ！」 を掲げてやって参ります。 単なる概要紹介と手順ではなく、一歩掘り下げた検証や考察を入れつつ 裏側(ソース)はなるべく見て周り、 「どのようなアーキテクチャによりそのモノが動いているのか」 もチェックしながら進めていきたいと思います。 Index 1つのトピックで1~10位の投稿を予定しています 順不同に書き進めます もはや常識！？NodeJSの基本 非同期型イベント駆動とは イベントループの仕組みを探る モジュール＆npmのキホン Webサーバ＋アプリ構築が速すぎる件 Socket.ioで双方向通信チャットアプリを構築 ビルドツールの骨身に迫る Gruntとの上手な付き合い方
![JSおくのほそ道 #000 [IndexPage] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a4713c5210f2a6e2414808ad3ec8b45ca5f6127/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzkzMzAlMkZwcm9maWxlLWltYWdlcyUyRjE1MjY4ODU0NDY_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZWJkYzFhZTg1MDg3M2QwOTZmMzExNDA0MDhlZjA4Yjc%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D5126823b99606645c55a20cd5c84b61e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9SlMlRTMlODElOEElRTMlODElOEYlRTMlODElQUUlRTMlODElQkIlRTMlODElOUQlRTklODElOTMlMjAlMjMwMDAlMjAlNUJJbmRleFBhZ2UlNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz05NDdiZTM3ZTQzZTE3OWE1YzA2YjFjOWVlOWY4NGFhMQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBob3NvbWljaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1jZDVlMGZjYWRlYjFlZWZkOTc3ZDg1NjBkOTFmYTM4Nw%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4gVW5pcG9z5qCq5byP5Lya56S-%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3D0a9a5485b6e7fd976b6dd89a90400cdb)
Functional Reactive Programming with Elm: An Introduction — SitePoint
Stay Relevant and Grow Your Career in TechPremium ResultsPublish articles on SitePointDaily curated jobsLearning PathsDiscounts to dev toolsStart Free Trial7 Day Free Trial. Cancel Anytime. Key Takeaways Elm is a functional programming language that compiles to JavaScript, focusing on making front-end development simpler and more robust. It uses type inference, is reactive, and incorporates functi
2016-03-17のJS: React.js v15.0 RC、WebAssembly、最近のJavaScriptツール/ライブラリ
JSer.info #270 - React v15.0 RC2がリリースされています。 RC2はRC1で見つかったバグやSVGに関する変更がrevertされています。 RC1を含め変更点については下記の記事にまとまっているので、Reactを使っている人は見ておくといいかと思います。 React.js v15.0 changes - blog.koba04.com MSEdge(ChakraCore)、Firefox、Chrome(V8)からそれぞれWebAssemblyを試験的にサポートしたというアナウンスがされています。 V8 JavaScript Engine: Experimental support for WebAssembly in V8 A WebAssembly Milestone: Experimental Support in Multiple Browsers ★
エキスパートたちが語り尽くす、WebRTCの「つらみ」ーWebRTC Conferenceパネルディスカッションレポート
エキスパートたちが語り尽くす、WebRTCの「つらみ」ーWebRTC Conferenceパネルディスカッションレポート がねこまさし（インフォコム株式会社） こんにちは、がねこです。この記事では先日開催された「WebRTC Conference Japan 2016」から、2日目に行われたパネル・ディスカッション「ここがつらいよWebRTC – WebRTC開発の落とし穴」の内容をご紹介します。 パネラー紹介 パネラーとして、次の3名にご登壇いただきました。モデレータは私が担当させていただきました。 源 拓洋さん ソフトバンク株式会社所属。社内、グループ会社間で利用するビデオ会議システムを、WebRTCを使って構築、運用されています。主にAndroidのネイティブアプリを担当されていますが、MCU/SFUといったメディアサーバーにも詳しいです。 吾郷 郷さん ChatWork株式会社所属
Navigation Timing APIでブラウザの処理時間を可視化するツール作った - ( ꒪⌓꒪) ゆるよろ日記
最近のブラウザでは、 Navigation Timing API ってのがサポートされていて、これを利用すればブラウザがページをロードするのに要した処理時間の内訳を知ることができる。 例えば、"DNSのlookupに要した時間"や"DOMの構築処理時間"、"onloadイベントの処理時間"などを見ることができるので、クライアントサイドのパフォーマンス計測に役立てることができる。 Navigation Timing Navigation Timing APIの仕様 #JavaScript - Qiita HTML5で Speed Test, Navigation Timing APIによる性能データ収集 - ぼちぼち日記 Navigation TimingでWebアプリの読み込み時間ログ取得 - l4l このAPIは、 window.performance.navigationオブジェクトや
春からはじめるモダンJavaScript / ES2015 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 春ですね！人の配置がリファクタリングされ、コードもリファクタリングの季節です。 では僕がここでモダンなJavaScriptとES2015の利点を語る役をやるので、みなさんはチームを説得する役をやってください。 JavaScriptの歴史 まず最初にJavaScriptの歴史を踏まえることで、今学ぶべきものとその理由を確認しましょう。 なぜ2016年の記事でES2016ではなく、ES2015なのか、と疑問に思った方もいるかもしれません。それは、ES2015がただの年次アップデートではなく、これから始まる毎年のメジャーバージョンアップの起点
ui.dev | JavaScript, but fun.
You’ve come to the right place. We make learning the JavaScript ecosystem fun, approachable, and easy... “I was lost in the React ecosystem until I took this course. It really helped connect the pieces I already knew. The pacing with each topic is great. I actually feel like I’ve accomplished something. Highly recommend for anyone who wants to take a deep dive in React!” “Mind blown. Every other m
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Javascriptで正規分布の実装まとめ（乱数、累積分布関数など）
Javascriptで正規分布の 乱数発生（rnorm）、確率密度関数（dnorm）、累積分布関数（pnorm）、累積分布の逆関数（qnorm） を実装する（逆関数は参照で）。すべて標準正規分布を想定。 Javascriptに限らず使えるアルゴリズムだが、日本語でまとまっている情報があまりないのと、ブラウザ上でA/Bテストなど有意性をみる検定などできたら面白いということでJSでやってみる。 正規乱数の生成（rnorm） 1行でBox-Muller法で。 Box-Muller法とは？
Reduxのmiddlewareを積極的に使っていく - Qiita
最初はちょっととっつきにくいけど、責務がはっきり分かれていて比較的コードがごちゃごちゃになりにくい（と思っている）Reduxですが、やはり実戦投入するとどうにも扱いにくい部分が出てきます。 特にそう感じるのは通信系の処理、ユーザーとのインタラクションです。これってつまるところ非同期処理なんですが、処理を依頼する側、つまりActionを投げる側としては「あとのことはまかせた！」と言いたい。Actionを投げる部分ってのはだいたい何かのイベントハンドラだったりしますが、そういう場所に通信やインタラクションの処理をダラダラと書きたくない。 本稿ではそれらの面倒な部分を責務が分離されたメンテナンスのしやすいコードになるようにmiddlewareを活用する例をいくつか紹介します。 その前にmiddlewareについて Reduxの公式ドキュメントではログ出力を例に取り、アプリケーション本体から分離し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://gist.github.com/Phoenixmatrix/c1f552d5ed919def5994.js
stevescodingblog.co.uk