サイボウズの採用情報ページにあるアニメーションがするするしていない。ので前回は何がおこってるのか見てみた。 今回はするするさせられないか、がんばってみる。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションを止める まず、いまのjQueryベースなアニメーションを止める。 コンソールに以下をぶっこめばアニメーションが止まって、背景も初期位置に戻る。 jQuery('.icon').stop().css('backgroundPosition', '') チェーンもできるしjQueryべんりだね。 CSSアニメーションにしてみる jQueryのアニメーションを別の方法に書き換えるわけだけど、今は2010年代も後半だ。使うならCSSアニメーションしかない。とくに右から左へ一方向って

サイボウズの採用情報ページを見ていた。 サイボウズ | 採用情報（新卒・キャリア） といっても受けるとかではなく、ただ性格悪いことを思っていただけなんだけど。 Kintoneのセクションでアプリっぽいアイコンたちが右から左へと流れているんだけど、それがガタガタとしている。するするしていない。するするさせたい。 というわけで、何が起こっているのかを調べてみようかと。何回かにわけて書くよ。 その1 ― 何が起こっているのか調べる その2 ― 調べながら直しながらするするさせる その3 ― ちょっとしたことや他のブラウザでもするするさせる アニメーションの実装を調べる あとのことを考えて、Chrome DevToolsを使う。 まず、該当の流れるアイコンのところで右クリックしてinspectする。Elementsパネルで、<div class="icon"> という要素がハイライトされる。div

組織にとって新人は期待の風です。しかしその期待の振り幅が大きい分、逆にイラついてしまうこともあります。 「何回も同じこと注意するの嫌だなぁ」とか「もっと考えてきてほしいなぁ」というのがよくある話ですが、ふとした時につい強く言ってしまうことがあるんですね。で、あとでいつも後悔するわけです。イラつきというのはそれ自体で何かがよくなるわけではないし、無駄に疲れるし、自分にとっては害でしかないです。 あとで自分で見返せるように、新人にイラついてしまった後に後悔しながら考えていることをまとめておこうと思います。先に言っておくと、ほとんどマインドセットの話なので万人に共通するような話ではないです。 期待を共有する 「なんでこんな完成度で出してきたんだ。。全然ダメじゃん」とイラついた時は、アウトプットに対する期待が相手の考えるレベルと食い違っているのかもしれません。その場合、「ちゃんとやれよ」という注意

Hoxy: Introduction Hoxy is a completely free, open source HTTP hacking API for Node.js. It operates in the same ballpark as Charles or Fiddler. A few key features: Intercept requests and/or responses. Observe and alter all aspects of requests/responses. Simulate network slowness and latency. Supports both direct and reverse proxying. Built-in helpers for replacing remote files with local ones. Req

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

概要 JSで大きな処理を効率良く捌きたい時、今までもWorker等でスレッド立てて処理を分割する事はできたが、 スレッド間のやり取りの方法は制限されたものしかなく、バッファを共有することもできなかった。 そこで新しく導入されたSharedArrayBufferを用いると、スレッド間で共同利用できるバッファを作る事ができる。 記事更新履歴 ※この記事はV8が仕様の新しいバージョンを実装するのに合わせて断続的に更新していきます。 [2016/07/19]　V8の半年ぶりの新仕様追従に対応 [2015/09/30]　公開 通常のArrayBufferとの比較 前準備： // メッセージを受け取ると渡された型付配列のインデックス0を123にするWorker w = new Worker(URL.createObjectURL(new Blob([` self.onmessage = e => {

WebAssemblyが動くブラウザが来た 2016/03/16 とうとうWebAssemblyが動くブラウザが出てきました。 今回はChrome Canary版で、実際にCで書いたコードをWebAssemblyに変換して実行して見るところまでやってみます。 なお環境はChromebookでビルド諸々をして、Windows上のChromeで動作確認しました。 実行に関してはブラウザを入れれば良いとして、ビルドに関してはLinuxやMac系のOSでだいたい同じ手順でできるはずです。 準備 コンパイルの手順 次のような流れでコンパイルします。 Cのコードをclangを用いてLLVM IRにコンパイル LLVM IRをアセンブリを経由してWebAssemblyのテキスト形式までコンパイル テキスト形式のWebAssemblyをバイナリにコンパイル この3つでそれぞれ使うものを順番に導入していきま

フロントエンドとしては絶対に避けて通れないWASM、そろそろエッジ環境なら試せるツールが揃ってきたということで、手を出してみた。 自分がどうしてもローレベルに弱いので、たぶん色々間違ってるんだけど、識者各位は指摘お願いします。 現在の仕様はここ https://github.com/WebAssembly/spec Chrome Canary と Firefox Beta で動作可能 WASMのゴール asm.jsに比べてサイズが小さく高速にデコード可能なバイナリフォーマット 将来的な目標として、DOMアクセスとそのGCインテグレーション これが達成されれば、ブラウザにおいて JS がファーストプライオリティな言語という状態ではなくなる とはいえ既存の資産が多いのでなくなることはないだろうが wasmのスペック自体は小さいのでおそらくブレようがないが、DOMの実装とGCは各ベンダごとに別々

この記事は 2016 年 1 月 22 日にポストされた “WebGL Off the Main Thread” の抄訳です。 Firefox 44 以降で、WebGL を Web Workers で利用出来るようになりました！OffscreenCanvas API を利用することで、メインスレッド以外で利用可能な WebGL コンテキストを作成できるようになります。 以下の例を実行するためには、Firefox 44 以降が必要です。現在のところ Firefox Developer Edition もしくは Firefox Nightly が該当します（訳注：記事執筆当時。現在はリリース版の Firefox でも利用可能です）。また API は利用するためには about:config から gfx.offscreencanvas.enabled の値を true に設定する必要があります