libpngをemscriptenでコンパイルしてJSから使う - Qiita
動機 現状のブラウザ環境では、 pngからピクセル情報を得るためには 一旦canvasに書き込んでおいてからgetImageDataする必要がある。 このときpngをデコードするためにUIスレッドでdeflateが呼ばれるため、 大量の画像ファイルのピクセル情報にアクセスしようとすると非常に時間がかかる。 WebWorkerスレッドで並列的にpngをデコードしてピクセル処理したいが、 WebWorkerではcanvasが使えない(CanvasProxyというのが策定中のようだ？)(OffscreenCanvasというのもあるらしい) そこで、WebWorker上でpng.jsなどのJSライブラリでデコードする必要があるのだが、ネイティブのデコードに比べれば遅い。 wasmが実用化すればlibpngをwasm化してデコードできるようになるので、 今回はとりあえずlibpngをemscript
GitHub - webusb/arduino: WebUSB demos running on Arduino (and compatible) hardware.
This repository contains an Arduino library for WebUSB-enabling your sketches. Example sketches and JavaScript code are available in the demos directory. The WebUSB object is a copy of the Arduino SDK's built-in USB serial library. It creates a WebUSB-compatible vendor-specific interface rather than one marked as USB CDC-ACM. This prevents operating system drivers from claiming the device and maki
jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita
俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな
JavaScript(ES2015)でvarやletを使う必要はほぼ無い - id:anatooのブログ
ES2015でvarやletを使う場面はほとんど無いので、まずconstを使う。constだとダメな場合にはletを使う。 背景 ES2015では、変数を宣言するための文法としてconstとletが導入された。 const foo = 'foo'; let bar = 'bar'; constは再代入できない変数を宣言できる。letは再代入できる変数を宣言できる。 const foo = 'foo'; foo = 'hoge'; // ERROR let bar = 'bar'; bar = 'hoge'; // OK あれ、じゃあvarとletは同じなの？っていうとそうではなく、letやconstはvarとは違って、関数スコープよりも細かなブロック単位のスコープを提供する。例えばconstやletを使うと、if文やfor文などのブロック中でのみ有効な変数を宣言できる。 で、プロジェクトに
Reactコンポーネントをnpmパッケージとして開発する - Hatena Developer Blog
こんにちは！ブログチームの id:amagitakayosi です。 今回は、業務で書いた小さなReactコンポーネントをnpmパッケージとして分離した話をします。 今回公開するパッケージ 実装方針 なぜnpmパッケージにするのか 他のコンポーネントの影響で壊れることを防げる アドホックな修正の積み重ねで複雑になることを防げる 本体プロジェクトのコードを削減できる デメリット Babelなパッケージのディレクトリ構成 実装 npmの注意点 reactはpeerDependenciesに入れる npm link を用いてローカル開発する場合、npmはpeerDependenciesを解決できない browserify-shimを利用する場合 npm publish 次回予告 追記 今回公開するパッケージ www.npmjs.com 今回は「無限スクロール」のためのReactコンポーネントを作
SPAで動画を使って大ヤケドした話 - Qiita
tl;dr 気軽に removeChild するもんじゃない。 フレームワーク（Riot.js）は悪くない 概要 動画メインの小規模サイト（厳密にはSPAと言わないかも） スペック 動画は YouTube IFrame API と一部に video要素 を使用 フロントのフレームワークは Riot.js URL制御はRiot.jsのルータを使う バックエンドはSinatra（この記事には関係ない） YouTube IFrame APIで起こった問題 iframeをDOMツリーから切り離すとYouTubeのエラー頻発 <youtube> <iframe if={ page == 'hoge' } id="player" src="~" /> <script> routing (path) { this.page = path } riot.route(this.routing) onRead
JavaScriptの文化とleftpadの話とpadStartについて - from scratch
無駄にラノベみたいに長いタイトル書いちゃったんですが、まぁやっぱり一言くらいは残しておくかと思ったので書きます。長いのでまとめだけでも見てもらえると良いかもしれません。 leftpadの話はかなり大事になっていて、Node.js界隈を中心としてその他のOSSをやっている全体的に話が波及しています。幾つかの記事を読みました。今回はJSの文化と歴史についてちょっとずつ書いていこうかなと思います。 本の虫: npmからkikとその他諸々が消されたまとめ 江添さんの話はすごくよくまとまっていて、ネタも含めた上で一番面白い話になっていました、ここで言われている下記の疑問に答えていこうと思います。 もっと憂うべきパッケージがある。isArrayだ。このパッケージは一日88万回もダウンロードされていて、2016年2月だけの一ヶ月間に1800万回もダウンロードされていて、72個ものNPMパッケージが依存し
Node.js on Google App Engine goes beta | Google Cloud Blog
Justin BeckwithProduct Manager, Google Cloud Platform We’re excited to announce that the Node.js runtime on Google App Engine is going beta. Node.js makes it easy for developers to build performant web applications and mobile backends with JavaScript. App Engine provides an easy to use platform for developers to build, deploy, manage and automatically scale services on Google’s infrastructure. Com
Micorosoft Edge(プレビュー)の拡張を作ってみる - ぷろじぇくと、みすじら。
Created at: 2016-03-21 Microsoft Edgeのブラウザーに対する拡張がついにWindows 10 Insider Preview build 14291からサポートされました。 サポートされたのですが現状は拡張機能のプレビューということで開発者には特に情報は開示されていません。 この辺りはBuild 2016で発表されるのではないかと思います。 せっかくサポートされたので開発情報はないものの試行錯誤で作ってみます。 作り方も「Google Chrome向け拡張を少しの変更で動かせるようになる」という話は出ていて、 公開されているプレビューの拡張機能も適当なところにぶちまけられたパッケージ化されていないものを読み込む感じなので作れそうです。 というわけで以前から「選択した文字列をGoogleで検索する」機能が欲しいと思っていたのでそれを作ることにします。Goog
An Introduction to jQuery's Deferred Objects — 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. For a long time, JavaScript developers have used callback functions to perform several tasks. A very common example is to add a callback via the addEventListener() function to execute various operations when an
小さいReactアプリケーションのためのライブラリ書いた - Qiita
EventEmitterバケツリレースタイル/フレームワークなしで小さくFluxする - Qiita これ見て最近は大体自分も同じような感じのことをしているので共通化できる最小限のコードをライブラリにしてみた。 元記事でも言ってるようにやることはとても少ないのでライブラリ使わないでもいいんだけどそのへんは好み。 Usage まず普通のステートレスなReactコンポーネントを作る。dispatchというpropsを受け取ってそれを通してイベントを発火するというのが唯一の規約。 import React from 'react'; // Stateless component export default class Counter extends React.Component { render() { return ( <div> <div>{this.props.count}</div>
Node.js ES2015/ES6, ES2016 and ES2017 support
"use strict"; function f(n){ if (n <= 0) { return "foo"; } return g(n - 1); } function g(n){ if (n <= 0) { return "bar"; } return f(n - 1); } return f(1e6) === "foo" && f(1e6+1) === "bar";
André Staltz - All JS libraries should be authored in TypeScript
André Staltz All JS libraries should be authored in TypeScript 16 Mar 2016 I am a JavaScript programmer, and I make some libraries. Recently, however, I’ve been writing TypeScript for RxJS version 5 (used in Angular 2 which is also authored in TypeScript), and I’m in the process of rewriting Cycle.js in TypeScript. Typed vs dynamic is a rather controversial topic, so I’m not trying to spark that d
André Staltz - Unidirectional User Interface Architectures
This post is a non-exhaustive quick overview of the so-called “unidirectional data flow” architectures. Not meant to be taken as a beginner tutorial, but rather as an overview of their differences and peculiarities. At the end, I’ll introduce a new architecture which deviates significantly from the others. This post assumes client-side Web UI frameworks only. TERMINOLOGY It would be confusing to t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cal-Heatmap | Cal-Heatmap
I’ve Just Liberated My Modules
GitHub - searchkit/searchkit: React + Vue Search UI for Elasticsearch & Opensearch. Compatible with Algolia's Instantsearch and Autocomplete components.
GitHub - Experience-Monks/hihat: :tophat: local Node/Browser development with Chrome DevTools
GitHub - DKirwan/calendar-heatmap: A d3 heatmap for representing time series data similar to github's contribution chart
GitHub - gotwarlost/istanbul: Yet another JS code coverage tool that computes statement, line, function and branch coverage with module loader hooks to transparently add coverage when running tests. Supports all JS coverage use cases including unit tests,
