WebAnimation の為のタイムラインエディタを試作してみた - mizchi's blog
ペルソナ5みたいな UI 作りたいみたいな話あって、メニュー画面の動きだけでも作れないか、と主要な動線だけ雑にReactでスケッチしてみたが、早々に限界が訪れた。 理由はいろいろあるが、(無限に気合でやれば終わるが) (そもそもどこにゴールに設定するかおいといて…) 細かいタメを作るのにフレーム単位の制御が必要。現代のHTML5には Flash Studio の代替がないという問題があり、本格的じゃなくていいからそれっぽいやつを作れないかと思って、試作してみた。 動画 ここで試せる https://5bbe44153813f06f1ff69d0c--timeline-editor.netlify.com クリックでアンカーを撃てる アンカーをカーソルキーで値とタイミングを調整できる width のみ easing も linear のみ GitHub のコード (きたない) github.
off-the-main-thread の時代 - mizchi's blog
off-the-main-thread は今フロントエンドで熱いテーマの一つです。日本語圏では今ひとつ話題になってないので紹介しておきます。 off-the-main-thread の概念の大まかな概要については、Chrome 開発者の nhiroki さんの日本語の記事があるので、こちらを参照してください。 nhiroki.jp speakerdeck.com ここまでのあらすじ 従来のウェブブラウザーでは、一つの画面につき一つ割り当てられる、UI スレッドと呼ばれる名前空間で様々な処理を行ってきました。DOMセマンティクスの評価, CSS による rendering / painting、JSのScripting…。もちろん裏側ではブラウザが様々なバックグラウンドサービスに処理を委譲し、スレッドで実行され、その非同期な結果を受け取っているわけですが、少なくともUIスレッドで走るJSから
SWSRSSR という1フレーム技 - mizchi's blog
Service Worker Side React Server Side Rendering ServiceWorker内でBabelを駆使して、JavaScriptをビルドする - ログミーTech（テック） ってスライドの中で、React の SSR を Service Worker の中でやれば、SEO は死んじゃうけど First Meaningful Paint 最適化できるよねーっていう話をしました。 というわけで実装してみました。すごく単純な React + Redux の Counter です。 ここで試せる https://epic-cray-a9cff8.netlify.com 実装コード https://github.com/mizchi-sandbox/swsrssr DevTools 見る限り、 FMP が 8ms で返ってます。TTI (JSが動くようになる時
WEB+DB PRESS Vol.106 で仮想DOMアルゴリズムについて書かせていただきました - mizchi's blog
特集書かせていただきました WEB+DB PRESS Vol.106 作者: 成田元輝,杉浦颯太,小和瀬塁,山中大輔,末田正樹,藤野真聡,竹馬光太郎,桑原仁雄,倉長拓海,牧大輔,秋山卓巳,前田雅央,星北斗,末永恭正,久保田祐史,池田拓司,はまちや2,竹原,WEB+DB PRESS編集部出版社/メーカー: 技術評論社発売日: 2018/08/24メディア: 単行本この商品を含むブログを見る ターゲットは「仮想DOMアルゴリズムそのものに興味がある人」と「Reactのキャッチアップに遅れた人」 よくあるReactについての記事ではなく、仮想DOMアルゴリズムとそれによって実現されるFluxを解説する話です。Reactのコード例は出ますが、あくまで仮想DOMアルゴリズムそのものについて書いています。Vue や Flutter にもそのまま応用できるはずです。 本特集の内容を要約すると、仮想DOM
tweetdeck のタイムライン表示を user css で夜フクロウ風にした - mizchi's blog
usersteam 止まって、tweetdeck に移ったが、あまりにTLの一覧性が悪すぎたのでやった こんな感じ 昔使ってた stylish が問題起こしてストアから削除されてたので、 stylebot を使った。 雑なCSS .column:nth-child(1) { width: 600px; } .js-stream-item-content { padding: 0; } .fullname:not(:hover) { display: none; } .item-box:not(:hover) { height: 37px; overflow-x: auto; overflow-y: hidden; } .item-box:not(:hover) .tweet-context { display: none; } 追記: ユーザータイムライン 1番目のカラム(設定によるがユー
Just Monika - mizchi's blog
前評判はチラチラ聞いていたが、ドキドキ文芸部やってみた。 …すごかった store.steampowered.com 無料。だが舐めてはいけない。これはギャルゲの皮を被った、それ以上の何か。 公式日本語版はないが、有志の日本語翻訳の出来が良いので、それで。 Steamのゲームをそこそこやってる人なら、ただのギャップによる看板詐欺なだけでは、この「圧倒的に高評」を取るのがいかに難しいか、わかってくれると思う。 タグ、「精神的恐怖」は嘘偽りない看板。ただ、それを感じるところに辿り着くまでは結構長かった。可愛らしいキャラクターが徐々に豹変していくのは、ひぐらしを思い出させる。また、おそらく OFF、 Oneshot といった海外フリーゲームのメタ言及の文脈も組んでると思われる。 怖いだけではなく、考えさせられるゲームでもあって、最後にメインテーマのボーカル版が流れる演出で泣いてしまった。 メタ言
IPFSについて勉強した - mizchi's blog
ipfs.io IPFS とは / BitTorrent とどう違うのか P2P の分散ファイルシステム BitTorrentがトラッカーファイルと呼ばれる単位でファイル共有を行うのに対し、IPFS は内部が別のオブジェクトを指し示すポインタ(ディレクトリ相当) or またはバイナリ(ファイル相当)のものがDAG構造をとっていて、それぞれにユニークなキーが振られている。 IPFSの内部構造は Git の内部オブジェクトと非常に似ている。分散ファイルシステムとしての Git との概念的な差はほとんどなくて、両者ともにコンテンツアドレッシング方式の Merkle DAG 構造ということができる。調べた感じ各種ツリーフォーマットの表現の差や、オブジェクトの圧縮方法が違うだけ、といっていってよさそう。 IPFSで配布する際は、URLのような名前空間に対して保存するのではなく、オブジェクトまたはその
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
