アクセストークンをWebWorkerで扱う - console.lealog();
というアプローチを紹介してる記事があって、なるほど？と思ったのでまとめてみる。 元記事はこちら。 Leveraging Web Workers to Safely Store Access Tokens – The New Stack 毎度のことながら、今にはじまったことではない。 元記事いわく WebWorkerであれば、メインスレッドで実行されるであろうXSSや3rdのコードから触れないので安全！ 設計としては、 メイン: まず`Worker`をロード メイン: 初期化のメッセージを`postMessage()` クレデンシャルがあるならそれを渡す ワーカー: アクセストークンの準備 受け取ったやつ or そこで`fetch()`して、オンメモリに保存 （これで準備OK） メイン: APIにリクエストしてほしいと`postMessage()` ワーカー: APIに向けてアクセストークン
Workboxで画像をランタイムでキャッシュする - console.lealog();
アクセスするとメガ単位でたくさんの画像を読み込むサービスがありまして・・。 リファクタによって、動的に必要な画像だけを読み込むように改修はしたけど、それでも回遊するとサイズがすごいことになる。 これをなんとかするならServiceWorkerしかない！というわけで。 Workbox 最初は0から手書きしようかと思ったけど、ちょっとやり始めただけであれこれ面倒なことがわかったので、先人に頼ることにした。 Workbox | Google Developers ご丁寧に、こういうことがやりたいんじゃろ？っていうのがガイドの中にあって、そうそうこれこれ〜って感じだった。 事前キャッシュではなく、あくまでランタイムでのキャッシュがしたかったので、これ。 import { CacheableResponsePlugin } from "workbox-cacheable-response"; i
WebRTCやるのに最低限必要なJavaScriptのAPIについて - console.lealog();
JavaScriptでWebRTCやるための基礎知識 - console.lealog(); 春なので書きました。 言うなれば、これの2019年度版です。 はじめに 最低限のJavaScriptでWebRTCを扱うにあたり、どういうクラスがあって、どういうAPIを、どう使うのかについての記事です。 いわゆるフロントエンドのエンジニアがWebRTCを使ったサービスを作るなどの場合は、だいたい何かしらのSDKを使うと思います。 その場合はそのSDKのDocsを読めばそれで十分で、その先の仕組みを知る必要はないかなーと思います。 ただし、 SDKの中で何が行われてるか知っておきたい WebRTCのSDKを作る側である みたいな場合は、一読の価値ありかもです。 ようするに、弊社の新入社員のような人材のための記事です！ 基本的なWebRTCの仕組みみたいなパートはざっくり軽めにして、JavaScri
React HooksとMobXをあわせて使う - console.lealog();
最近はもっぱらWebRTCの世界にどっぷりでしたが、フロントエンドのこともちゃんとやってます！ SkyWayにはショーケースとしてWeb会議アプリがあるんですが、それをこの度リライトしてました。 リライトする理由としては・・・、 当時の設計ままでは改修が面倒なバグが見つかった 単にUIがダサい WebRTCフロントエンドをしばらくやって得たノウハウも反映したい などなど、まあ理由つけて書き直した感じです。 で、どうせ書き直すならってことで、ReactのHooksも使い込みつつ、MobXと混ぜた場合にどうなるか？ってのを味見しました。 ということを、将来の自分が見返せるようにするためのメモ。 最近のMobXについて MobXの本体は最新がv5で、これはしばらく変わってないです。 今のところv6の気配もない・・？ Reactバインディングである`mobx-react`は、もうすぐv6が出そうで
JavaScriptの値渡しとか参照渡しとか、プリミティブとかイミュータブルだとか - console.lealog();
なんてタイトルにしたら良いのかまったくわからんｗ とはいえ、最近のハッとした事例。 var arr1, arr2; arr1 = arr2 = []; for (var i = 0; i < 3; i++) { arr1[i] = 1; } arr1 = []; console.log(arr1.length); // 0 console.log(arr2.length); // 3 わかってる人にはなんてことないこのコード。 でも、いわゆる「プログラミング」初心者にはこう見える・・。 誤解してる例 // arr1, arr2 という変数を2つ用意し、空の配列をいれる var arr1, arr2; arr1 = arr2 = []; // arr1に値をいれる // 3回繰り返す for (var i = 0; i < 3; i++) { arr1[i] = 1; } // arr1を空
テストでモックできなくて困るNode.jsのモジュールの書き方 - console.lealog();
こういう書き方にしてしまったせいで、テストの時にうまくモックできず困ったよというメモ。 問題のコード こういうやつ。 function foo(id) { bar(id); // ... } function bar(id) { // some heavy logics... } module.exports = { foo, bar, }; モジュール内が関数だけで構成されてるのは○。 ただし、テスト的には都合が悪い。 何に困るか テストでこの関数をモックしたい・・って時に困る。 さっきのコード例で、`foo()`をテストするときに、`bar()`をモックしたいとする。 jestだとこんな風にするはず。 const mod = require('../mod'); describe('foo test', () => { let barSpy; beforeEach(() => { ba
Node学園 24時限目 に行ってきたメモ #tng24 - console.lealog();
東京は東京でも有楽町だった回。 Node学園 24時限目 - connpass 「Node.js x WebAssembly」 by yosuke_furukawa Node.js x WebAssembly // Speaker Deck WebAssemblyとは ポータブルで効率のいいバイナリ Nativeと同等の速度を目指す ユースケース ネイティブモジュールをWebで使いたい `vim`とか <- 誰がやるん https://rhysd.github.io/react-vimjs/ ゲーム ブラウザ外でも使えるけどそんなにターゲットではなさそう 全部を置き換えるのではなく、CとかC++で書いてあるものを動かすところから Node.js x Native Module 現時点で、どうやってNative Moduleを使うか NAN https://github.com/nodejs
フロントの奥深さに触れる〜Frontend Meetup Tokyo vol.1 #frontendmt に行ってきたメモ - console.lealog();
いってきたよ！ small画面でも、BIG画面でも、今すぐ使えるレスポンシブ活用術 by @ourmaninjapan オニール(O'NEILL)のサイトをレスポンシブにしたらコンバージョンがUPした例 モバイル対応はモバイルのためだけではない PCでもウィンドウせばめて見たりするよね モバイル専用にするか、レスポンシブにするか もはやモバイル = iPhoneではない 画面解像度もユーザー層によって違う ギークな人たちの画面解像度はw1200↑がほぼ そうでない人たちはw1200以下が多く、w400あたりが最も多い そしてモバイル = 小さい画面でもない 表示を最適化することが真のレスポンシブ レスポンシブで気をつける点 入力デバイスを考慮 タップできる領域・余白 ロールオーバーとか おすすめレスポンシブ実装10 meta[name=viewport] scalable=noはだめ！ぜっ
JavaScriptにおける数値⇔文字列の型変換あれこれ - console.lealog();
気になったら即調べるが吉、ということで。 数値→文字列 var num = 123; // わかりやすい String(num); // "123" num.toString(10); // "123" // この用途では使ったこと無い num.toFixed() // "123" // なるほど num + ''; // "123" 文字列→数値 var str = '123'; // わかりやすい Number(str); // 123 parseInt(str, 10); // 123 parseFloat(str); // 123 // なるほど str - 0; // 123 str * 1; // 123 str / 1; // 123 // すっきりやけど知らん人は読めない +str; // 123 -(-str); // 123 ~~str; // 123 str&-1;
petehunt/react-howto の日本語訳 - console.lealog();
petehunt/react-howto · GitHub これの、2016/01/07時点での日本語訳です。 更新は追わないと思うので、流し読みにどうぞ。 react-howto もしあなたがReactをはじめたばかりで(もしかしたらフロントエンド自体もはじめてで)、React周辺のエコシステムに困惑してるとしたら、そこにはこういう理由がある。 そもそもReactはアーリーアダプターやエキスパート向けに作られた経緯がある Facebookが唯一実際に使われてる例であり、Facebookより小規模なプロジェクト向けの使い方にフォーカスしてない Reactのガイドを装った間違った情報も多い このドキュメントは、HTML・CSS・JavaScriptでWebページを作ったことがある人を想定読者にしてる。 これを書いたワケ Reactに関する情報が山ほど交錯してるから。 自分はReactを作った
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
