問題 現在開発しているChrome拡張において、Font Awesome のアイコンのためのフォントファイルが占める割合が大きいことがわかった。 % ls -l dist/assets | awk '{print $5"\t"$9}' | sort -n 15463 Mado-c38406e7.js 77160 fontawesome-webfont.woff2 9802…

developer.mozilla.org const 関数を受ける関数 = (func) => { console.log(func, func.length); }; 関数を受ける関数((x, y, z) => { console.log(x,y,z) }); // [Function] 3 DRYな備忘録として

問題 iPhoneのSafariにおいて、 navigator.mediaDevices.getUserMediaによって、 videoを含むMediaStreamを取得し、 HTMLのvideoタグに動画を描画しようとすると、 最初のフレームだけ描画されたのち、フリーズしてしまう。 解決 getUserMediaを呼ぶ前に、vi…

これをやりたい↓ cat ./testdata.txt | grep otiai JavaScriptで、 const cat = spawn('cat', ['./testdata.txt']); const grep = spawn('grep', ['otiai']); cat.stdout.pipe(grep.stdin); grep.stdout.on('data', (chunk) => { console.log('[grep]'); con…

目的 僕が、ElectronデスクトップアプリによるOAuthプロセスを知る うるせえ動くもん見せろ はい。 github.com ゴール 手元のElectronアプリで、ログインユーザ（この場合、僕自身）のAPIトークンで、GoogleのなんらかのAPIが叩ける ← 登録したアプリ下でわ…

追記 2018/10/29 chromeモジュールが使えなくなる、という指摘は半分正しくて半分間違ってる（いくらでもやりようがある）のでもうちょっとちゃんとした記事を書きました。 medium.com 以下原文ママ。 背景 JSのプロジェクトで、特に僕はChrome拡張を作るこ…

目的 画像がサーバ上に無いとき、こうなる。 画像がサーバ上に無いときは「見つからないよ！」という画像を出すのもかっこ悪いので、タグごと存在を消したい。こう。 参考 javascript - How to silently hide "Image not found" icon when src source image …

前回、下記のエントリでProgressive Web Appにおけるそこそこ生のWeb-Push-Protocolについておおまかな仕組みを触れました otiai10.hatenablog.com ので、今回はFirebase Cloud Messagingを使って、もっと手軽にWebブラウザにPush通知を送るのをやってみた備…

このドキュメントは 以下の２つのドキュメントをよりプリミティブに理解するためのDRYな備忘録です。 Adding Push Notifications to a Web App | Web | Google Developers The Web Push Protocol | Web | Google Developers 背景 かつて サーバからブラウザ…

まずnew Worker(“./my/worker”) というやつ Workerのコンストラクタにファイルパスを渡すやつからしてwebpackだとどう解決されるのか問題。 worker-loader - npm webpack/webpack.config.js at master · webpack/webpack · GitHub 以上を参考にして、まず np…

import React from 'react'; import ReactDOM from 'react-dom' import {Router, Routes, browserHistory} from 'react-router'; import {MyFancyLayout} from '../../layouts'; import { LoginPage, // これと HomePage, SettingPage, NotFoundPage, // こ…

ぜったいなんかやり方あるだろと思いつつなかなか見つからなくてググり続けたりして6時間ぐらいハマったのでメモ。 import React from 'react'; import {Editor, EditorState, CompositeDecorator} from 'draft-js'; const getEmojiURL = (key) => { // TODO…

とりあえず ./node_modules/.bin/jest --no-cache # package.jsonのscriptsや、-gで入れてる場合は、 "jest --no-cache" ですもちろん。 としたら通った。 DRY Learning React Native: Building Native Mobile Apps with JavaScript作者: Bonnie Eisenman出…

ゴール ブラウザのJavaScriptで、MediaStreamを動画ファイルにしてローカルに保存できるようにしたい。 参考 MediaStream Recording API - Web APIs | MDN Using the MediaStream Recording API - Web APIs | MDN tl;dr 好きな方法でMediaStreamを取得する g…

わけあってJavaScriptの環境での画像認識とか文字認識とかに若干興味あるのでやってみた。 参考 Google Cloud Vision API | Google Cloud Vision API | Google Cloud Platform Method: images.annotate | Google Cloud Vision API | Google Cloud Platform h…

以下のようなコードを書いて、electronのwindow内に作ったWebViewの中の情報を取得しようとした。 let webview = document.createElement('webview'); webview.addEventListener('did-finish-load', function() { // 第1引数に内部で実行したいJavaScript文…

background.js chrome.runtime.onMessage.addEventListener((req, sender, sendRes) => { setTimeout(() => { // ここまで来てるのに sendRes("元気でーす"); }, 100); }); contents_script.js chrome.runtime.sendMessage(null, {msg:"元気ですか？"}, (res…

ほしいもの sourc: aaaaaaabbbbbxxxxxxdddddeeezzzzzfffffffffxxxxxxxxx rule: /[x|z]+/ result: ['aaaaaaabbbbb', 'xxxxxx', 'dddddeee', 'zzzzz', 'fffffffffggggg', 'xxxxxxxxx'] こんな感じ。splitだと、'xxxxxx'とか'zzzzz'は要素としては消えちゃうけ…

なんかスコープとかの問題でunderscoreとか使えないとき、でゴルフっぽいコード書きたいとき [0,1,2,3].indexOf(3) > -1; // true [0,1,2,3].indexOf(100) > -1; // false angularのdirectiveの中とか <div data-ng-if="[0, 2, 3].indexOf(player.type) > -1"> アクセサリ一覧: </div> みたいな DRY

問題 textarea -> divの中身にする みたいなありがちなやつで、これが こうなる 改行\nして\nください ってなってる 調査 みんな困ってたっぽい https://groups.google.com/forum/#!topic/reactjs/VUJT314Gm50 （textarea内部のはなしだけど↓） http://niwar…

Emscriptend.hatena.ne.jp とりあえず使ってみるしかない kripken/emscripten · GitHub Main — Emscripten 1.29.12 documentation EmscriptenでC言語をJavaScriptに変換する - Qiita SDKインストール Download and install — Emscripten 1.29.12 documentati…

資料 Using IndexedDB - Web API Interfaces | MDN IDBDatabase.createObjectStore - Web API Interfaces | MDN 問題 objectStoreを使うにあたって、autoIncrementで一意なidっぽいものをつくりたい もちろん、参照できる形で 解決 createObjectStoreメソッ…

What is IndexedDB @see IndexedDB - Web API Interfaces | MDN Why "ingoose" it's very annoying to use indexedDB raw API simplify application code by Mongoose like API Demo anyway You can try how it works here DEMO - ingoose : mongoose like i…

WebSQL先輩… localStorageのようなシンプルなkvsじゃなくて、検索を伴うようなブラウザで永続化できるストレージあるかな、そういえばWebSQLってどうなってるんだろう？と思って調べたら、 Developer's blog | HTML5のWeb SQL DatabaseがW3Cの仕様策定の範囲…

index.html <html> <head> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body data-ng-app="foo"> <div data-ng-controller="BarController"> </div></body></html>

<input type="datetime-local" /> var val = $('input[type="datetime-local"]').val(); "2015-01-05T16:00" このままDate型のコンストラクタにぶち込む new Date("2015-01-05T16:00") Tue Jan 06 2015 01:00:00 GMT+0900 (JST) // Expected // Mon Jan 05 2015 16:00:00 GMT+0900 (JST) "T"…

問題 handlebars使ってて掲題のエラー出た "undefined is not a function" とは ご存知、未定義の変数を関数呼び出しした時に起きるエラー var my = { foo: function() { console.log("This is my.foo!"); } /* bar: function() { console.log("This is my.b…

問題 AngularJSと、Bootstrapのui.bootstrap使ってて BootstrapのModal機能とか使いたくなるけれど Angular的なControllerや$scopeの扱いが混乱したのでメモ 参考 公式: Angular directives for Bootstrap サンプル 親View。対応するControllerのメソッドを…

JSONじゃないからね var my = {}; > undefined my.fnc = function() { window.alert("This is my function"); }; > function () { window.alert("This is my function"); } my.fnc(); > undefined JSON.stringify(my.fnc); > undefined JSON.stringify(my); …

iOS iOSのWebViewインスタンスには、stringByEvaluatingJavaScriptFromStringというメソッドがある. [webView stringByEvaluatingJavaScriptFromString:@"window.alert('田井中律は俺の嫁');"]; Android AndroidのWebViewインスタンスには、「JavaScriptを実…