タグ

ブックマーク / lealog.hateblo.jp (12)

  • Solidの特徴と、その裏側 - console.lealog();

    https://www.solidjs.com ずっと調べたいものリストにはあったやつで、Astro熱がちょっと収まったのでこのタイミング。 めちゃめちゃ雑にまとめると、React + MobX feat. Svelteって感じのUIフレームワークです。(つまり好みは分かれるであろう) Solidとは 基Reactライクな書き味 JSXでコンポーネントを書く、Propsでデータを単方向に流す もちろん細かい挙動に差異はあるし、互換性はない `Suspense`とか`Portal`とか`ErrorBoundary`とかもある MobXライクなリアクティブの仕組みがビルトインされてる Propsが自動でProxyされてるイメージ 依存配列なしに、状態を読み取ったコンポーネント・関数だけが更新できたり ストア(ちょっと大きめの状態用)関連のコードもある Svelteと同様に、コンパイルして最

    Solidの特徴と、その裏側 - console.lealog();
  • vercel/edge-runtime のコードを読む - console.lealog();

    初手からREPLがついてたりと、なかなか洗練されてそう・・ってのが第一印象。 What is Edge Runtime | Edge Runtime あとは`cloudflare/miniflare`のコードを読んだ身として、どういう実装になってるんやろ?ってのも気になったので。やはりNode.jsの`vm`を使ってるのか、はたまた未知のテクノロジーか・・・! 読んだのは最新の・・というか、いま時点ではまだ1コミットしかなかった。 https://github.com/vercel/edge-runtime/commit/0b11a95e2f470d278db27982e4905febc6ac9bb7 リポジトリの構成 モノレポ。 . └── packages ├── format ├── jest-environment ├── primitives ├── runtime ├── ty

    vercel/edge-runtime のコードを読む - console.lealog();
  • html-rewriter-wasmでHTMLをパースする - console.lealog();

    HTMLファイルをパースして、 特定の文字列を抜き出したり 特定の属性を書き換えたものを書き出したり ってことをやりたい時、今までは`cheerio`を使うことが個人的には多かった。 GitHub - cheeriojs/cheerio: Fast, flexible, and lean implementation of core jQuery designed specifically for the server. 懐かしい`jQuery`的な記法で操作できる・・とはいえ、もはや`jQuery`のことぜんぜん覚えてなくて、生DOMのAPIばっか使っちゃったり。 かといって、`cheerio`が内部で使ってるHTMLのASTパーサーである`parse5`や`htmlparser2`をそのまま使うのは、ローレベルすぎて乗り気じゃなかったり。 というところで、なんか代用できるものはないかな

    html-rewriter-wasmでHTMLをパースする - console.lealog();
  • JavaScriptのTypedArrayについて - console.lealog();

    調べたのでメモ。 TypedArray TypedArray - JavaScript | MDN いわゆる型付き配列。 通常の配列と違って型が固定できる分、内部的に最適化がしやすいとか諸々で住み分けられてる。 そういう意味で一般的なフロントエンドJavaScriptコードで出てくることはそうそうない。 たとえばWebAudioとか、CanvasとかWebGLとか、いわゆるバイナリに近い処理をブラウザでやる場合に必要になるAPIたち。 Node.jsだと、`Buffer`っていうそれ用のクラスがあったりする。 種類 Int8Array Uint8Array Uint8ClampedArray Int16Array Uint16Array Int32Array Uint32Array Float32Array Float64Array BigInt64Array BigUint64Arra

    JavaScriptのTypedArrayについて - console.lealog();
  • CloudflareのPlatform Weekの発表まとめ - console.lealog();

    Platform Week - The Cloudflare Blog この中から、個人的に気になったものたちをさっくりまとめ。つまりWorkersとかPagesとかに関連するものが多く、それ以外のStreamingとかWeb3系はスルーしてる。 The next chapter for Cloudflare Workers: open source The next chapter for Cloudflare Workers: open source CFWのランタイムのソースコードをオープンソースにするっていう発表 現時点でコードが見れるわけではなさそう これで`miniflare`と実環境の境界もなくせるねって言ってた https://twitter.com/_mrbbot/status/1523652262115278848 がんばれ〜 コードとして公開されたとして、誰しもが簡単

    CloudflareのPlatform Weekの発表まとめ - console.lealog();
  • Qwikというフレームワークについて - console.lealog();

    GitHub - BuilderIO/qwik: An Open-Source framework designed for best possible time to interactive, by focusing on resumability of server-side-rendering of HTML, and fine-grained lazy-loading of code. 去年から気になってて、調べたいなーと思ってたやつ。 昨今の覇権を握ってる系のJavaScript-firstなフレームワークたちとは違い、HTML-firstを謳うユニークなアプローチをしてるのが一番の特徴。 中の人による一連のシリーズもあって、そこも読んでまとめてみた記事です。 Qwik Series' Articles - DEV Community Qwikの特徴 遅いモバイル環境だとしても、

    Qwikというフレームワークについて - console.lealog();
  • CloudflareのWeb3の記事を読んで、ざっくり調べたメモ - console.lealog();

    我らがCloudflare社が、先日のブログで"Web3"なるものに言及してた。しかも3記事も続けざまに。 不勉強な身としては、ざっと読んだだけではふわっとしか理解できなかったので、もう少しちゃんと理解したいなーと思った。 というわけで、概要を訳しつつあれこれ調べてみたというメモです。 これは単に自分の視野が狭かったことに気付いたんですが、そもそも"Web3"という単語やそれを表すトレンドみたいなものは、2018年くらいのブロックチェーンな頃から既にあったんですね。 そういうわけなので、知ってる人にとっては何をいまさら?って話かもしれんし、それをこのタイミングでCloudflareが言及したことに、特別な意味を感じるのかも?とか。 Web 3.0とは Web3 — A vision for a decentralized web まずこの最初の記事をざっくり。 Web3とは、Web 3.0

    CloudflareのWeb3の記事を読んで、ざっくり調べたメモ - console.lealog();
  • アクセストークンを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に向けてアクセストークン

    アクセストークンをWebWorkerで扱う - console.lealog();
  • 達人プログラマー(第2版) 読んだ - console.lealog();

    久しぶりに物理を読んだけど、やっぱ物理はええな・・かさばるとこ以外。 せっかくなので読書感想文と、特に印象に残った部分を、章ごとに書いておく。 第1章: 達人の哲学 このを読んでいくにあたって、そもそも達人とはなんぞやという話がメイン。 プログラマーというより、いわゆる社会人としてこうあれみたいなテーマで書かれてて、なんかみんな読んだらいいのではと思いました。 物事をうまく進捗させるために、 まず何を言いたくて その結果どうしたいのかまで考えて 相手の状況やタイミングを見計らって コミュニケーションを実行する・されると、あれこれスムーズにいきますよっていう。 このテクは中々に便利で、日常生活でもそれこそ夫婦間とかのコミュニケーションでも使える話かなーと思ってて。 ただ自分の場合はこれをやりすぎて、質問してるはずが誘導尋問みたいになっちゃうときがたまにある・・。 第2章: 達人のアプロー

    達人プログラマー(第2版) 読んだ - console.lealog();
  • フロントエンド x RTC界隈の最近とこれから - console.lealog();

    フロントエンドエンジニアからみる、この界隈で今どんなIssueが話題になってるのかと、この先どういう動きがありそうかについて。 そこまで自分に先見の明があるとも思ってないけど、アウトプットしておかないと忘れてしまいそうなので・・。 ちなみにここでいうフロントエンドは、いわゆるブラウザとかJavaScriptAPIのことです。 プロトコル的な側面はそこまで詳しくないのであまり触れません。 WebRTC 1.0 GitHub - w3c/webrtc-pc: WebRTC 1.0 API まず、RTCといえばズバリのWebRTCから。 昨年末にWDからCRへ格上げということで、もうAPIが激変したりはしない・・はず。 実際のところ、ここ半年くらい大きな対応した覚えがないです。(WebRTCそのものを実装してる人は、地味にいろいろ対応してると思うけど) ガワのAPIという観点でいうと、最近はも

    フロントエンド x RTC界隈の最近とこれから - console.lealog();
  • 動画切り出しアプリをElectronで作った - console.lealog();

    in 弊社の開発合宿。 発表資料こちら。 動画切り出しアプリをElectronで作った ここに載せてない細かいことを、忘れないようにメモっておきます。 作ったもの GitHub - leader22/movie-slicer: Slice your favorite scenes from movie file. 動画ファイルから、任意の秒数を切り出して、新たに動画ファイルを作成するアプリです。 別途インストールされてる前提の`ffmpeg`をElectronから呼び出してるので、いわば豪華な`ffmpeg`ラッパーです。 完全に自分用で作ったので、用途としてはいわゆる`mp4`を`mp4`に切り出すだけに限定してます。 他のフォーマットも`ffmpeg`が対応してれば対応できると思うけど、手元に素材もなかったのでやってません。 Electronを使っててパッケージングもちゃんとやったので

    動画切り出しアプリをElectronで作った - console.lealog();
  • JavaScriptでWebRTCやるための基礎知識 - console.lealog();

    未来の自分のためのメモです。 仕事でやってないせいですぐ忘れるし、都度思い出すの大変なので・・。 ただまぁだいたいの人はSkyWayとかEasyRTCとか何かしらのライブラリを使うはずで、そういう人たちにはあまり関係ない内容かも。 生のjsでWebRTCを書くときに、先に知っておきたかった系のメモです。 素人ではないがベテランでもない、そんな微妙な知識レベルだと思います。 まだ枯れた仕様ではないので、記事を読む時は日付に注意してください... WebRTC is 何 WebでRealTimeCommunicationできる仕様 もといクライアントどうしでP2Pで通信できる仕様やそのAPI群 See WebRTC Home | WebRTC 仕様まわり WebRTC 1.0: Real-time Communication Between Browsers Identifiers for W

    JavaScriptでWebRTCやるための基礎知識 - console.lealog();
  • 1