Node.js における設計ミス By Ryan Dahl - from scratch
Ryan Dahl は Node.js の original author ですが、彼の作ったプロダクト deno に関するトークが jsconf.eu 2018 でありました。 Node.js にずっと関わってきた僕が見て非常に興奮するような話だったので、しばらくぶりにブログに書き起こすことにしました。 背景 Ryan Dahl は2009年に Node.js の話を初めて公の場に公開しました。その時の「公の場」というのが「jsconf.eu 2009」です。 www.youtube.com Video: Node.js by Ryan Dahl - JSConf.eu - 2009 この発表から Node.js が広まり、今やサーバのみならず、IoTデバイス、デスクトップアプリなど、様々なところで動作しています。 で、今回はその発表から9年の歳月が経過し、Node.jsに対しての設計不
JavaScriptのクロージャはメモリーリークをちゃんと理解して使おう - Qiita
はじめに 前にブログで書いた記事なのですが、せっかくなのでQiitaにも投稿します。 脱初級者の壁として君臨しているクロージャ。クロージャの使い方はわかったけど、いろんな記事を見るとクロージャは問題点もあるみたい。それに、そもそもクロージャの使い所がいまいちわかんないと思ってクロージャに再度立ち向かおうと思った次第です。同じような悩みを抱えているデザイナーさん、コーダーさん、フロントエンドエンジニアさんの参考になれば嬉しいです。 クロージャとは とりあえずおさらい & 補足をします。 よく見かけるクロージャの見本がこちら。 function closure(initVal){ var count = initVal; var innerFunc = function() { return ++count; } return innerFunc; } var myClosure = clos
JavaScript Markdown Editor - SimpleMDE
SimpleMDE Markdown Editor SimpleMDE is a simple, embeddable, and beautiful JS markdown editor View on GitHub Download .zip Download .tar.gz Demo # Intro Go ahead, play around with the editor! Be sure to check out **bold** and *italic* styling, or even [links](https://google.com). You can type the Markdown syntax, use the toolbar, or use shortcuts like `cmd-b` or `ctrl-b`. ## Lists Unordered lists
[JavaScript]イベントにもasync/awaitを使おう - TES Blog
はじめに ECMAScriptが2015年から毎年バージョンアップするようになり、JavaScriptの仕様は大きく変わりました。 特に非同期処理まわりは、Promise(ECMAScript2015~)、async/await(ECMAScript2017~)が導入されたことで、 コールバック地獄の回避や可読性の向上などを実現できるようになりました。 また、JavaScriptではクリックやマウスホバーなどのイベントを検知する機能があります。 通常、イベント登録時に、イベント発火時に実行される処理をコールバックとして渡します。 実は、この従来の書き方をasync/awaitに置き換えると、一見すると同期処理的に書けるようにできます。 本記事では、以下の例のように、async/awaitへ置き換える話を説明します。 // いままでの書き方 const target = document.q
![[JavaScript]イベントにもasync/awaitを使おう - TES Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/22fb741118876e9b490a9dba2775634052544852/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F8599973812330537278%2F17391345971624909468%2F1521023761)
Rough.js
Create graphics with a hand-drawn, sketchy, appearance Rough.js is a small (<9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG. Install Install from npm: npm install --save roughjs And use it in
[OpenCV][WebAssembly]ブラウザで2画像の特徴量比較してみる - Qiita
はじめに このエントリは、画像解析ライブラリであるOpenCVをWeb Assemblyとしてビルドしてブラウザで動かす、というのを一通りやってみたメモです。 主なコンテンツとして下記を含みます。 OpenCVのwasmビルド方法、.wasmのカスタマイズ方法 性能改善(モジュールのキャッシュ、Web Workersなど) 動作はここから確認できます。 お題 主な主眼は「ブラウザでOpenCV動かす」部分で、build筋鍛えること自体が目的なので、題材は正直なんでもいいのですが、ここでは2枚の特徴点を抽出してマッチングする、というのをJavaScriptでやってみることにしました。インターネッツに山のようにサンプルが転がっていますが、Pythonで書くと下記です。 import cv2 img1 = cv2.imread('img1.png') img2 = cv2.imread('img
![[OpenCV][WebAssembly]ブラウザで2画像の特徴量比較してみる - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/f6b80ae4f663ef43091ec4ad8c2632bc56d60d73/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCT3BlbkNWJTVEJTVCV2ViQXNzZW1ibHklNUQlRTMlODMlOTYlRTMlODMlQTklRTMlODIlQTYlRTMlODIlQjYlRTMlODElQTcyJUU3JTk0JUJCJUU1JTgzJThGJUUzJTgxJUFFJUU3JTg5JUI5JUU1JUJFJUI0JUU5JTg3JThGJUU2JUFGJTk0JUU4JUJDJTgzJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgyJThCJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05NmEyYjlhZWNiZjkwZWYzZmI1YjhlYWEzZGJkZjk2NQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwUXVyYW15JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lNTlmZDcyODNlN2E4ZjljNjRjNTRkNjM5YzY4NzQyOA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D6fa959acf18e313cd8faee0a58b51aea)
GPLなJavaScriptのコードは、非フリーなソフトウェアに使えるのか ― ありえるえりあ
Recent entries Apache2.4のリリース予定は来年(2011年)初め(あくまで予定) inoue 2010-12-23 Herokuの発音 inoue 2010-12-20 雑誌記事「ソフトウェア・テストPRESS Vol.9」の原稿公開 inoue 2010-12-18 IPA未踏のニュース inoue 2010-12-15 労基法とチキンゲーム inoue 2010-12-06 フロントエンドエンジニア inoue 2010-12-03 ASCII.technologies誌にMapReduceの記事を書きました inoue 2010-11-25 技術評論社パーフェクトシリーズ絶賛発売中 inoue 2010-11-24 雑誌連載「Emacsのトラノマキ」の原稿(part8)公開 inoue 2010-11-22 RESTの当惑 inoue 2010-11-22 「プ
Vue.js のリストレンダリング( Virtual DOM 実装 )と相性の悪いデータの変更 - kitak blog
この間、現場で直面したやつの個人的なメモです。対象のバージョンはこの記事を書いている時の最新バージョン v2.3.0。 以下のようなリストレンダリングをおこなうコンポーネントがあるとして、 <script> export default { name: 'list', data() { return { items: [1, 2, 3, 4, 5] }; } } </script> <template> <ul v-for="item in items" :key="item"> <li>{{ item }}</li> </ul> </template> items のサイズの上限を 5 として、新しいデータを追加したい場合は古いデータを削除することとする。 例えば、items [1, 2, 3, 4, 5] に 6 と 7 を追加する場合、items は [3, 4, 5, 6, 7]
Redux Patterns and Anti-Patterns
(Korean, Japanese) Redux is a surprisingly simple library for managing application state with a Flux-like architecture. Here at Affirm, we are particularly interested in Redux’s time-travel capabilities. Our core business is offering transparent consumer loans, so it’s incredibly valuable to be able to replay the entire loan application process from the user’s perspective. Redux is more of a set o
JavaScript の Number() は副作用がある可能性がある - Qiita
たまたまTwitterを見てたら以下のようなツイートを見かけました。 つまり、 isNumber っていう関数を作るなら一旦Numberでキャストした値と同一かどうかを比較すれば良いと。おそらく NaN を省いた number 型を true にしたいのかなという感じがする (NaN === NaN は必ず false)。 ただこれには問題があるらしく、 V8 のOptimizerリーダーである bmeurer から下記のようなレスが付いてました。 「 Number() では意図しない副作用があるかもしれない」という意味のレス。最初意味がわからなくて、「おや？」と思ったんですけど、その後で補足が。 「ToPrimitive関数が呼ばれてしまい、意図しないJSの動きをするかも。」とのこと。 つまり、 var a = { x: 1, [Symbol.toPrimitive]: function
webpack で moment.js の無駄なロケールファイルを除去する - Qiita
と書いて webpack でビルドすると、生成される bundle ファイルのサイズが非常に大きくなってしまいます。これは、moment.js が持つすべてのロケールファイルが bundle ファイルに含まれてしまうためです。ファイルサイズにシビアなフロントエンドではかなり大きな問題です。 (上図は source-map-explorer を使って生成しました） 解決策 webpack の IgnorePlugin か ContextReplacementPlugin を使えば、この問題を回避することが出来ます。 IgnorePlugin を使う場合 「デフォルトの en 以外にロケールファイルは必要ない」という場合は、IgnorePlugin が使えます。 const webpack = require('webpack'); module.exports = { //... plugi
Reduxのパターンとアンチパターン | POSTD
Redux は、 Flux のようなアーキテクチャを使用してアプリケーションの状態を管理できる非常にシンプルなライブラリです。私たち Affirm では今、 Reduxのタイムトラベル機能 に注目しています。Affirmの主要事業は、透明性の高い消費者ローンを提供することなので、ローン申し込み時の全過程をユーザ視点で再現できると非常に有用なのです。 Reduxはフレームワークというよりも、パターンの適用に役立つ関数セットです。よって、適切なパターンを慎重に適用しないと、Reduxを使ったことを後悔する結果になりかねません。この記事では、Affirmで確立したReduxのベストプラクティスや、ミスを犯しやすいポイントについて説明します。 ImmutableJS ImmutableJS は、不変の永続データ構造を扱うためのライブラリです。私たちがこのライブラリを好んで使う理由は2つあります。
ServiceWorkerとCache APIを使ってオフラインでも動くWebアプリを作る - Qiita
はじめに Thetaの360°画像にぼかしを入れるWebアプリSphereBlur.comを作った際に、オフラインでも動くようにするために、HTML5の新しい技術Service Workerを使った。なお、下の動画でホーム画面からネイティブアプリっぽく起動しているのはWeb App Manifestのおかげである。 Service Worker Service Workerは、通常のページの環境とは別に、バックグラウンドで実行されるJavaScript実行環境で、ページからのネットワークリクエストを横取りしたり、ウェブサイトからのPush通知を受けとって表示するといった、今まではできなかった処理をすることができる。Push通知の方は、去年Facebookが使い始めたので有名になったが、今回はPush通知ではなく、ネットワークリクエストを横取りする機能を使ってオフライン対応をした。 ネットワ
Web開発の未来 – React、FalcorおよびES6 | POSTD
この記事でWeb開発の未来を垣間見ることができるでしょう。UIの構築やサーバ、データ・エンドポイントの新しい見解を得ることができると思います。ここで、ブラウザとサーバコードの両側を含めたフルスタックな話をしていきます。これを読めば、 完全に機能するGitHubリポジトリ で紹介されたすべてのコードの検証や実行ができるようになります。皆さまが開発者として次の資質を持っていることを前提に話を進めていきます。 JavaScript中級者 HTML中級者 クライアント/サーバ間通信の基礎知識 JSONの基礎知識 Node.jsの基礎知識 上の知識がなくても、 おそらく この記事の進行についていけるでしょう。しかし、知識がないと私の紹介するコードを現実的なシナリオあるいは重要なシナリオに応用するのは難しいでしょう。インターネットは情報の宝庫なので、理解に必要な概念などをたくさん提供してくれます。必要
Node.js Piping the same readable stream into multiple (writable) targets
I need to run two commands in series that need to read data from the same stream. After piping a stream into another the buffer is emptied so i can't read data from that stream again so this doesn't work: var spawn = require('child_process').spawn; var fs = require('fs'); var request = require('request'); var inputStream = request('http://placehold.it/640x360'); var identify = spawn('identify',['-
John Resig - Node.js Stream Playground
This summer I had the opportunity to attend NodeConf and it was a fantastic experience. I really appreciated how every session was a hands-on coding session: I felt like I walked away knowing how to put a bunch of advice directly into practice. One of my favorite sessions was the one run by James Halliday and Max Ogden exploring Node streams. Specifically they sat us down and had us run through th
mongooseのconnectの接続エラー（node.js)のハンドリング - motsatのブログ
mongooseのconnect実行時、mongodが上がっていなくてもthrowされないので、そのあたりのハンドリングがしたくてmongooseのソースを呼んでみました。（非同期IOだから当たり前ですが・・） たぶん、コールバックを指定すれば良いとかそのくらいの事なんだろうなーと思いつつも、せっかくなのでちゃんとソースを呼んでみる。 mongooseのconnect connectが定義されているのは、 mongoソースの「index.js」です。 （場所：自分はnpmインストールなので/usr/local/lib/node/.npm/mongoose/1.3.7/package/lib/mongoose） まずはcocnnect定義の大元から。 index.js 103〜106行目 Mongoose.prototype.connect = function (){ this.conne
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js 2.0 Server Side Rendering
Nodeへの コード貢献の仕方
NameBright - Coming Soon