Node.jsにworkerが入った - hiroppy's site
Node@10.5.0で入った worker の話です。 この記事は、Roppongi.js #4の登壇資料です。 5min で話しきれないので記事にまとめました。 実は、自分が Node.js に関わって、最初から最後(今現在)までずっと追っている珍しいモジュールです。 worker_threads とは？ worker: initial implementation by addaleax · Pull Request #20876 · nodejs/node Hi everyone! 👋 This PR adds threading support for to Node.js. I realize that this is not exactly a ... 実装著者は Anna (この PR は io.js 時代に petkaantonov が実装したのをベースに現環境へ移した
Node.js 8: `util.promisify()`
Node.js 8 has a new utility function: util.promisify(). It converts a callback-based function to a Promise-based one. util.promisify() in action # If you hand the path of a file to the following script, it prints its contents. // echo.js const {promisify} = require('util'); const fs = require('fs'); const readFileAsync = promisify(fs.readFile); // (A) const filePath = process.argv[2]; readFileAsy
Promise が resolve されてるかチェックする - Humanity
ってこれでいいんじゃないか？ と遅延した電車内でふと気が付いた。 コードは全部スマホで打ったので syntax error 等あるかもしれませんが… 追記（2017/2/15 21:50）：案の定 delay() 関数が間違ってたので修正。あと例を追記。 追記（2017/2/19 21:50）ブクマされてるみたいなのでさらに追記。 チェックするまでの間にタイムラグがあるので、コードの一番下の方でも示したように、 delay(1) (1ms) の Promise はチェックするまでに resolve されてしまうため resolved と判定されることに注意。 なので本当はこういうコードが必要ない書き方にするのが一番いいんだろうと思う。 ただ以前 resolve されてるか判定したいことがあったような？とふと思い出してやってみたという程度なので、参考程度に。 追記（2017/2/19 22:
react-storybookを用いたReactコンポーネント開発 - Hatena Developer Blog
こんにちは！Webアプリケーションエンジニアの id:amagitakayosi です。 今日はReactコンポーネントを手軽に開発するためのツールを紹介します。 前回のあらすじ react-storybookとは 導入してみる 初期設定 storyを作成する 起動 イベントを監視する Hot Module Reloadingの仕組み メリットとデメリット リアルタイム確認できる 導入が簡単 ストーリー駆動開発できる デメリット: Webpackの機能で動いてる まとめ 前回のあらすじ developer.hatenastaff.com 前回の記事では、Reactコンポーネントをnpmパッケージとして開発する方法を紹介しました。 対象としたのはこちらの無限スクロール用のReactコンポーネント。 http://www.npmjs.org/package/@fand/react-infini
React.js Best Practices for 2016 | @RisingStack
Join 150K+ monthly readers. In-depth articles on Node.js, Microservices, Kubernetes and DevOps. 2015 was the year of React with tons of new releases and developer conferences dedicated to the topic all over the world. For a detailed list of the most important milestones of last year, check out our React in 2015 wrap up. The most interesting question for 2016: How should we write an application and
Firefox のイベントリスナで drop イベントを受け取るには dragover をpreventDefault する - Qiita
Firefox のイベントリスナで drop イベントを受け取るには dragover をpreventDefault するJavaScript <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="container" style="height: 200px; width: 200px; background-color: red;"></div> <script> const container = document.querySelector(".container"); container.addEventListener("dragover", (ev) => { ev.preventDefault(); // これがないと drop が発火
JavaScriptを劇的に教えやすくするWebサーバ作りました - Qiita
近年、JavaScriptでコードを書こうとすると、お膳立て7割、コード書き3割みたいな事態がざらにあります。「お膳立て」の例としては、Gulp, Babel, Sass, PostCSS, WebPack, Rollup, Browserifyほか数限りなく。 たしかに、一旦フロントエンド開発に慣れてしまえば、お膳立てにかける時間は短縮することが可能です。でも、これを初学者に強いるのはツラすぎる...! 覚える方はともかく、 教える側がツライ。 今回、未来なJavaScriptやCSSの文法で書いても、よしなにとりなしてくれるWebサーバ「Felt」を作ったので、ご査収ください。 (2016/7/19 関連ツールとの比較を追記しました) GitHub: https://github.com/cognitom/felt npm: https://www.npmjs.com/package/
Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io
Intro スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。 この API の使い方と、本サイトへの適用について記す。 要素交差(intersection)の検出 ページをスクロールしていく過程で、特定の DOM が画面に出現したことをフックしたいケースがある。 代表例は 画像の遅延読み込み であり、初期ロードでは画像の取得を行わずスクロールしていく過程で順次取得する手法である。 特に画像の多いページでは表示に必要なリソース取得のみに最適化でき、初期画面表示などでは効果が大きいとされる。 これを実装するのに必要なのは、「 <img> 要素が出現しているかどうか」であるが、本質的には「画面外にあった <img> が viewport と交差したか」を取得することになる。 つまり、 要素出現の取得
JavaScript Plugin Architectureというプラグイン設計について学ぶ無料の電子書籍を書いた
JavaScript Plugin ArchitectureというJavaScriptのプラグイン設計についての電子書籍を書きました。 この書籍はJavaScriptのライブラリやツールにおけるプラグインアーキテクチャについて見ていく事を目的としたものです。 以下の形式で読むことができます。 Web版 PDF形式 ePub形式 Mobi形式 GitHub上にソースコードも公開されているでので直接Markdownファイルを読むこともできます。 MarkdownよりはWeb版の方が見やすいのでそちらをオススメします。 Twitterのハッシュタグは#js_plugin_book 更新情報はRSSやリリースノートから見ることができます。 v1.0.0 最初に書くと決めたプラグインアーキテクチャが揃ったので1.0.0としてリリースしました。 JavaScript Promiseの本の時と同じく、継
D3.jsとOpen Data〜その１地図を描画する - Qiita
この記事はD3.js Advent Calendar 2013の9日目です。Open Dataと大きなことを言いましたが、今回は行政データの基本のキであるところの地図を描画してみます。なわけで地図を描画するところがゴールです。 今回の完成図は下記です。国土交通省から神奈川県の行政区域データを取得しD3.jsで描画します。ついでにホームタウンとしているJリーグチーム毎に色塗りしてみました。(マリノスの最終節については触れるべからず！) サンプルページはこちら D3 Geo Projection D3.jsには地理描画機能がデフォルトで含まれており、さまざまな投影法によって地形データを描画することができます。 https://github.com/mbostock/d3/wiki/Geo-Projections この機能を使って地図を描画します データの入手 まずは国土交通省のページから行政区
JavaScript で Y コンビネーターを理解する - Qiita
ベンチャーキャピタルの Y コンビネーターはラムダ計算の Y コンビネーターから名付けられている。その Y コンビネーターについて JavaScript での説明をメモっとく。 階乗の再帰的な関数定義 JavaScript で階乗を再帰的に定義して、5の階乗を求めるとこうなる。 function factorial(n) { return n == 0 ? 1 : n * factorial(n - 1); } factorial(5); // => 120 この場合 factorial という名前で関数を定義しているので再帰的に関数呼び出しができている。しかし Y コンビネーターを使うと無名関数での再帰的な関数呼び出しが実現できてしまう。まあ、JavaScript だと arguments.callee で下記のように実現できてしまうのだけど、arguments.callee を使わなく
Falcor入門 1日目 Falcorとは何者か - Qiita
はじめに 最近、ある程度の時間を割いてFalcorを触っています。 まだ日本語での情報は豊富とは言えない状況ですし、自分の理解を整理する意味も含め、何回かに分けてFalcorについて書いていきます。 1日目の今日は「Falcorとはどのような目的のために生まれ、どのような仕組みに依存しているのか」を説明します。 概念的な話ばかりでコードは殆ど出てきません。実装寄りの話は次回以降に書きますが、行ったり来たりしながら読むのも有りじゃないかなと思います。 ちなみに次回以降の目次はこちら： Falcor入門 2日目 FalcorのJSON Graphに触れてみる Falcor入門 3日目 Falcor Routerでサーバサイドを実装してみる Falcor入門 4日目 FalcorとReactを組み合わせる 昨今、Webアプリケーションの大半は、ReactやAngularなどのMVCフレームワーク
JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside [archive]
「ピクシブ株式会社 Advent Calendar 2015」の24日目の記事です。こんにちは、今年8月からピクシブに入社した新米の@_furoshikiです。入社直後は、古くなって大変なことになっているJavaScriptのコードを、そーっと触る系エンジニアをやっていました！ 私はピクシブに入る前から、オフィスの一部を借りて「東京Webパフォーマンス」という趣味丸出しなイベントを開催しています。その中で扱ったテーマのひとつである「requestIdleCallback」が、古いJavaScriptのコードにUIをブロックされ、荒んでいた私の心を救ってくれました！ 今回、このrequestIdleCallbackというブラウザの新機能について、pixiv insideのブランド力を信じて、日本に多く広まるよう宣伝してみようかとおもいます！ そもそも、ブラウザのなにが問題なのか？ Windo
![JSがブラウザを固めてつらいので、新しいAPI「requestIdleCallback」を使うことにした - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b5c5c67bdd44dcf1b4cc991ccabb9ad1c20ca0bb/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20151217%2F20151217010303.jpg)
npmパッケージをExampleテストしよう
自分がそう呼んでいるだけなので、正式名称があるのかよくわかりませんが、 あるライブラリを公開する際に、exampleディレクトリにそのライブラリを使って実際に動くサンプルコードを作って、それを実行するテスト というのを示しています。 Go言語のExampleと近いような気がします。 testing - The Go Programming Language 以下のスライドでも簡単に解説してますが、この記事はExampleテストのメリットやNodeモジュールでのやり方について書いていきます。 ロジック、E2E、描画、音、動画、Example、文章 - 色々なJSテスト Exampleテストの利点 以下は思いついたExampleテストの良いところですが、これについて簡単に解説します。 始めるのが簡単 実際に動くサンプルコードが作成できる ドキュメントの一部になる package.jsonの設定
globalオブジェクトを取得する - Qiita
JavaScriptでスコープの一番外側であるグローバルオブジェクトの取得方法について。ブラウザではwindowオブジェクトのことだが、サーバーサイドでは名前が異なるので環境に依存しないやり方をまとめる。 globalスコープ上でthis
使うだけでハイになれるJavaScript Decorators
こんにちは。 今日は使うだけでハイになれるJavaScriptのDecoratorsという機能を紹介したいと思います。 Requirements Node.js 0.12.x Babel >=5.0.0 Decorators Decoratorsは、ECMAScript7で提案予定の言語仕様。クラス及びプロパティにアノテーションを付与することで、クラスの中身を汚すことなく、宣言的なシンタックスを保ったまま様々に挙動を変更することができます。 百聞は一見にしかず。サンプルコードを見てみましょう。 $ babel --stage=1 deco.js | node Method: hello Class: Klass DecoratorsはまだNode 0.12.4 (v8 3.28.71.19)の段階では実装されていません。なので、一旦Babelでコンパイルしてから実行する必要があります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
非推奨になった Mutation events を Mutation Observers に置き換えよう
Service Worker で横取りしたリクエストをネットワークにフォールバックさせたい時はただ return するべき - Qiita
Introduction to Redux
http://www.alprosys.com/es6/es6_features_ol.html