久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ

Signals – Preact Guide 端的にいってしまうと、Solidのソレとほぼ同様の体験でコードが書けるようになる・・・！ まずはコード // store.js import { signal } from "@preact/signals"; export const count = signal(0); export const add = () => count.value++; // Counter.jsx import { count, add } from "./store.js"; const Counter = () => ( <div> <p>Count: {count.value}</p> <button onClick={add}>click me</button> </div> ); さすがにこの時代になるといろいろ既視感もあって、すんなり読めるコードか

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の特徴 遅いモバイル環境だとしても、

Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel.— Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第。

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

https://www.netlify.com/pdf/oreilly-modern-web-development-on-the-jamstack.pdf Netlify社が2019年に公開した本？PDFです。 せっかくJamstackの会社に入ったので、読んでおかないといけない気がして。 あとJamstackは人によって解釈が違ったりするとし、Jamstackの真髄について知っておきたいですよね？と思い。 ただこれなんと127ページもあるんですよね〜。 全編もちろん英語なので、読むのも中々に大変ですよね〜。 てなわけで、ざっくり訳してまとめまておきました。（それでも長いけど） はじめに ここ最近のWebの進化はすさまじい ブラウザもJavaScriptもパワフルになった その分ユーザーの要求も増える やることが増えると処理は遅くなる 遅いページは見向きもされないモバイル当たり前の世界だ

GitHub - mweststrate/immer: Create the next immutable state by mutating the current one （MobXの作者による）イミュータブルに状態を操作するユーティリティライブラリ。 ちなみに、この世で最初にスターしたのは俺ですｗ immerとは 読んだのは`v0.8.2`。 ImmutableJSみたく独特なAPIを覚えなくてもいい、今まで通り配列やオブジェクトを変更すればいい。 それなのにイミュータブルにデータを扱える！素敵！というやつ。 // いわゆるreducerが const byId = (state, action) => { switch (action.type) { case RECEIVE_PRODUCTS: return { ...state, ...action.products.reduc

知ってることを自分の中で整理するためのメモです。 知ってることしか知らないしそこまで使い込んでないので、間違ってる可能性は多いにありです。 動画配信とライブ配信 Webで動画を配信するには2つのパターンがある 完成した動画ファイルをまるっと取得して再生するか 動画ファイルの一部を「逐次」取得して再生する（ストリーミング）か クライアントサイドとしては、サーバーにあるメディアを逐次取得するだけなので、そういう意味での違いはない 今回の記事は後者の方法について Web = HTTPベースのストリーミング用にいくつかプロトコルがある HDS(= HTTP Dynamic Streaming) HLS SS(= Smooth Streaming) MPEG-DASH このうち、HLS / MPEG-DASHが最近の主流の2つ だいたい似たような仕組みになってて、ざっくりAdaptive Strea

どうも、中のイカです。 昨日の15時頃に晴れてリリースしたコレですが、正直想定してなかったレベルで反響があって驚いてます。 leader22.github.io さてさて、というわけで恒例の裏側紹介記事です。 近況 今のところの瞬間最大風速です。 とりあえずこんなん pic.twitter.com/65cIbl2N1e— りぃ (@leader22) 2016年1月21日 初めて見たわこんな数字ｗ ホッテントリ入りもしたしredditでもスレ立ったり。 トレンド入りしてるΣ(ﾟДﾟ；≡；ﾟдﾟ) pic.twitter.com/yDBVSf2ciE— そめ・そるめ (@jenga_ink) 2016年1月21日 まさかのポストすしざんまい！すごいなーイカ・・。 ほんと、サーバー落ちないかどうかだけが心配でした。 そもそもどの程度で落ちるかの想定もできないくらいの素人ですけど！ フロントエン

petehunt/react-howto · GitHub これの、2016/01/07時点での日本語訳です。 更新は追わないと思うので、流し読みにどうぞ。 react-howto もしあなたがReactをはじめたばかりで(もしかしたらフロントエンド自体もはじめてで)、React周辺のエコシステムに困惑してるとしたら、そこにはこういう理由がある。 そもそもReactはアーリーアダプターやエキスパート向けに作られた経緯がある Facebookが唯一実際に使われてる例であり、Facebookより小規模なプロジェクト向けの使い方にフォーカスしてない Reactのガイドを装った間違った情報も多い このドキュメントは、HTML・CSS・JavaScriptでWebページを作ったことがある人を想定読者にしてる。 これを書いたワケ Reactに関する情報が山ほど交錯してるから。 自分はReactを作った

事の発端。 jQueryの使わない機能があまりに多いのでカスタムビルドすることにした Sizzleも外せることを知る(容量がgzipで20KB分くらい減る) 外すと何が変わるか気になる <- いまここ ってなモチベーションで調べた一連の内容です。 jQueryとSizzleの関係 あらためて一応。 「jQueryといえば」な以下のようなコード。 var $hoge = $('#hoge'); // こういうのとか var $fuga = $('.fuga'); // こういうのとか $hoge.find('.foo'); // こういうのとか $hoge.text(); // 実はこういうのも そう、いわゆるこのセレクタの実態がSizzleなのです。 正確にはもう少し他のメソッドにも関係があります。 jquery/sizzle で、そのSizzleがjQueryの中でどういう動きをしてるか

なんか流行りにのってる感があります。 参考：vue.js なんかわからんけどはてブの上位に出てた、気象庁のAPIとあわせて使ってみました。 以下、サンプルのURLです。 ソース見た方がはやいかも。 気象庁APIの仕様変更？の影響か、レスポンスが取得できなくなったので、現在動作してません。 使用感なんて語れるほど大した身分ではないのですが、まあこういう風にも見えてるよ、ということでココはひとつ。 20140712追記 いまだぽつぽつブクマされるので追記です。 このサンプルで使ってるVue.jsはバージョンがかなり古いので、そこを念頭に置いた上で読んでください！ 最近のバージョンアップでループまわりは記述方法変わってた気もするので。 さわるまえ ドキュメントを読んでる感じ、Angular.jsの時と同じような印象。 「え、コードこんだけでいいの？うわ動いてるすげー！」っていう感じ。 コードのス