yamanoku's avatar

yamanoku

@yamanoku@hollo.yamanoku.net · 103 following · 128 followers

一児の父です。会社員。

TwitterPronounsHome

https://x.com/yamanoku

he/him

https://yamanoku.net

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

BaselineのMCPサーバー作ったのでAccessibility Compat DataのMCPサーバー作れないかなって思ってる

kazuhito's avatar
kazuhito

@kazuhito@vivaldi.net

書きました / Accessibility Compat Dataというアイデア | アクセシビリティBlog | ミツエーリンクス mitsue.co.jp/knowledge/blog/a1

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

フロントエンドエンジニアの基本はWeb標準から始まる。 | Tech Blog | uga.dev

https://uga.dev/articles/tech-blog/2025/07-08-web-standards/

kazuhito's avatar
kazuhito

@kazuhito@vivaldi.net

書きました / 欧州アクセシビリティ法の完全施行 | コラム | ミツエーリンクス mitsue.co.jp/knowledge/column/

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

カレーピラフ食べたいなーと思ったけどお昼はカレーライスでした

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

万一のための代替機って必要やなぁと

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

理由あって1日半ほどXperia生活に…

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

バーンアウトしない社内生活の技術

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

自分の10年越えTwitterログが超記憶として対話可能に!Twilog専用MCPサーバーが使えるようになりました。|Togetter(トゥギャッター )

https://note.com/togetter/n/n084819ff6502

神楽坂 凪@人力焼きそば検知Bot's avatar
神楽坂 凪@人力焼きそば検知Bot

@Nadja_tirol@calc.aloneroid.one

ジャック・ドーシー氏、またなんか作ってる

Twitter創業者のジャック・ドーシーがBluetoothでP2P通信するチャットアプリ「bitchat」を開発中、アカウント作成不要でWi-Fiやモバイル回線に接続せずに通信可能 - GIGAZINE
https://gigazine.net/news/20250707-jack-dorsey-bluetooth-p2p-bitchat/

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net · Reply to yamanoku's post

満足というか、多忙につき外を見渡す余裕がないというのがオチだと思っていますが… 意図的に外に出ない人もいたりするけども

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net · Reply to yamanoku's post

社内で満足してたら外に顔出さないもんなのかな。あんまりよくわかんない

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

外に顔出しておかないと何者でもなくなるみたいな焦燥に駆られてるところはあるかもしれない 無理して顔出さないとってことはないと思ってるんだけど…

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net · Reply to yamanoku's post

話す時は突っ込みやすい余白を残すのも大事なのかもしれない。あとは話すだけ話して「何か質問ありますか?」にならないようにするというか。

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

チームでやるなら説明ではなく対話することは大事なんだけど、では何故対話ができない(できなくなってる)のか?を考えて行動に移してみるところが次のフェーズになる

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

Googleが新収益化ツール「Offerwall」を一般提供開始 - メディア収益の多様化を支援 | Media Innovation / デジタルメディアのイノベーションを加速させる

https://media-innovation.jp/article/2025/07/01/142605.html

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

昔は誰かしらとFFの関係があることがその人のステータスだと思ってたけど、今は繋がってなくとも反応もらえるだけでもありがたいなと思えるようになってきた

matsuu's avatar
matsuu

@matsuu@fedibird.com

彼自身はコミュニティから賛同が得られると思っていたが、そうはならず多少後悔している、といったところだろうか。
---
Automatticのマット・マレンウェッグCEOがWordPressをめぐって争った理由を語るインタビュー
gigazine.net/news/20250701-wor

まっつー's avatar
まっつー

@ryo_manba@mstdn.anqou.net

GritQL 触ってみた。寝る

GritQL を使って Biome の Plugin を書いてみる
zenn.dev/ryo_manba/scraps/3f3e

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

Vibe Codingと人間の成長あるいは単に最近思ったこと - Write and Run

https://diary.hatenablog.jp/entry/2025/07/06/214907

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

書斎が蒸し風呂になっててやばい

ゆふしろ🍅's avatar
ゆふしろ🍅

@yufushiro@m.yufushiro.dev

ピピーッ!! コントラスト比警察です

温泉むすめ公式Webサイトのキャラクターマップで新キャラクター「蒲郡海詩」が掲載されている箇所のスクショ。背景色のキャラクターカラー (#376dcd) に対してテキストの黒色のコントラスト比が 2.58 となっており、Firefox の開発ツールでコントラスト比不足の警告が表示されている
ALT text details温泉むすめ公式Webサイトのキャラクターマップで新キャラクター「蒲郡海詩」が掲載されている箇所のスクショ。背景色のキャラクターカラー (#376dcd) に対してテキストの黒色のコントラスト比が 2.58 となっており、Firefox の開発ツールでコントラスト比不足の警告が表示されている
tkdn's avatar
tkdn

@tkdn@fedibird.com

flux はそもそも Smalltalk MVC では?おじさん
zenn.dev/tkdn/books/rebuild-me

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net · Reply to yamanoku's post

ReactというかReduxかもという話をしてた

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net · Reply to yamanoku's post

ReactはMVCアーキテクチャへの反骨というか、jQueryによる手続き型への反骨なのかなというのが自分の理解でした

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

反骨精神のスタック礼賛

https://hackers.pub/@hongminhee/2025/contrarian-stack/ja

洪 民憙 (Hong Minhee)'s avatar
洪 民憙 (Hong Minhee)

@hongminhee@hackers.pub


예전부터 기술 스택을 정할 때는 꼭 청개구리 같은 기술을 고르곤 했다. 2000년대 말에 Ruby로 웹 개발을 할 때에는 Rails 대신 SinatraDataMapper와 함께 썼다. JavaScript 프레임워크를 쓸 때도 Prototype 대신 MooTools를 썼다. 2010년대 초반에 Python으로 웹 개발을 할 때는 Django를 안 쓰고 WerkzeugSQLAlchemy와 함께 썼다. 요즘에는 ReactNext.js를 안 쓰고 SolidSolidStart를 쓴다. 나는 요즘 이렇게 남들 쓰는 기술을 안 쓰고 꼭 삐딱하게 대안 기술만 골라서 쓰는 것을 두고 청개구리 스택이라고 부르고 있다. 아마도 반댓말은 정석 스택 정도가 될 것이다.

청개구리 스택의 가장 큰 특징은 역시 쓰는 사람이 상대적으로 적다는 것이다. 그렇기 때문에 문제를 만날 일이 좀 더 많고, 트러블슈팅을 할 때도 다른 사람이 이미 찾은 해결책을 쓰지 못하고 직접 해결해야 할 때도 많다. 하지만 이것이 곧 그 기술, 그리고 그 기술을 너머서 그 분야에 대한 좀 더 깊은 이해를 갖추게 하는 기회가 되기도 한다. 이를테면,. Werkzeug의 추상화 수준이 높지 않아서 그 위에서 사실상 인하우스 웹 프레임워크를 만들어서 써야 했다. 물론, 이를 누군가는 삽질이라고 생각할 수 있겠지만, 그런 “삽질”이 나를 성장시킨 것도 사실이다. Stack Overflow에 답이 없을 때, 소스 코드를 직접 읽어야 했고, 그 과정에서 HTTP 프로토콜의 세세한 부분까지 이해하게 되었다. 그리고 그 기술이 오픈 소스라면, 실제로 그 기술에 기여할 기회도 많이 얻는다. 내가 제출한 풀 리퀘스트가 머지되는 순간의 희열은 정석 스택에서는 느끼기 힘든 것이다.

청개구리 스택의 또 다른 특징은 대체로 후발주자라는 것이다. 즉, 정석 스택에서 불만스러운 부분을 인식한 사람들이 참지 못하고 만든 경우가 많다. 그렇다 보니 대안적인 설계를 하게 된다. Solid가 React의 가상 DOM 오버헤드를 피하기 위해 정밀한 반응성(fine-grained reactivity)을 구현한 것처럼 말이다. 그리고 항상 그런 건 아니지만, 그러한 대안적인 설계가 정석 스택의 설계보다 더 나을 때도 많다. 정석 스택의 잘못된 선택들을 보고 배운 다음 그것들을 피해서 만드는 경우가 많기 때문이다. 이로 인해 청개구리 스택을 선택한 사람은 정석 스택을 선택한 사람보다 그 분야에 대해 조금 더 나은 이해, 좀 더 정돈된 이해를 갖출 기회가 더 많다.

한편, 정석 스택은 많은 경우 종합 선물 세트의 형태를 갖는 경우가 많다. Rails의 “설정보다 관행”(convention over configuration), Django의 “배터리 포함”(batteries included), Next.js의 풀 스택 솔루션을 생각해 보면 내부적으로는 여러 기술들을 품고 있더라도 사용자 입장에서는 그 경계를 느끼지 못할 만큼 잘 통합되어 있는 편이다. 반면 청개구리 스택은 많은 경우 여러 부품을 사용자가 직접 고른 다음 조립까지 해야 하는 경우가 많은데, 이 과정에서 시간이 많이 들긴 하지만 각 부품에 대해 최선을 고를 수 있다는 장점과 함께, 조립하는 과정에서도 각 기술에 대해 좀 더 깊게 이해할 기회가 된다.

이 조립 과정은 때로는 지난하다. Sinatra + DataMapper + Haml + Sass를 조합하면서 각각의 설정을 맞추고, 미들웨어를 연결하고, 오류를 디버깅하는 시간. 하지만 이 과정에서 나는 웹 프레임워크가 실제로 어떻게 작동하는지, 각 계층이 어떻게 연결되는지를 더 깊게 이해하게 되었다. 그리고 그 이해는 나중에 어떤 스택을 쓰든 큰 자산이 되었다.

그러나 한 가지 명심해야 할 것은, 오늘의 정석 스택도 과거에는 청개구리 스택으로 시작했을 수 있으며, 오늘의 청개구리 스택도 미래에는 정석 스택이 될 수 있다는 점이다. Ruby on Rails도 처음에는 Java 웹 개발의 대안으로 부상했고, React도 Backbone.js 같은 과거의 MVC 웹 프런트엔드 프레임워크의 대안으로 주목 받지 않았던가? 즉, 각 기술이 중요하다기 보다는 언제나 새로운 대안에 눈길을 주는 호기심과 기술적인 의사 결정을 할 때 기술 선택의 근거를 그저 대중의 선택에 위임하는 것이 아니라 직접 주체적으로 판단한다는 것이 중요하다고 생각한다.

학습과 추론이 분리되어 있는 LLM의 한계 탓에 앞으로 정석 스택은 더욱 더 정석이 되고, 청개구리 스택의 불리함은 커질 것이다. Claude Code는 Next.js 코드는 술술 짜주지만 SolidStart 코드는 헤맨다. 그럼에도 불구하고 청개구리 스택만이 줄 수 있는 배움의 기회는 여전할 것이라고 생각한다.

LLM 시대에도 나는 계속 청개구리의 길을 걸을 것이다. 왜냐하면 청개구리 스택이 주는 배움의 기회는 단순한 지식 습득을 넘어서, 기술에 대한 좀 더 깊은 이해를 함양하기 때문이다. 그러니 이 글을 읽는 여러분도, 가끔은 Stack Overflow에 답이 없는 길을 걸어보길 권한다. 그 끝에서 만나는 깨달음은 온전히 자신의 것이 될 것이다.

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

昔は日本共産党に投票していたことが俺にもありましたよ

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

幸福とは何か:中国ディストピア漫画で知る底辺層のリアル|上海在住のえいちゃん

https://note.com/eichan_sh/n/nfec4d1d38b7a

yamanoku's avatar
yamanoku

@yamanoku@hollo.yamanoku.net

アイドルプリキュアの新EDいいな…

keithamus's avatar
keithamus

@keithamus@indieweb.social

Hot off the presses! Firefox Nightly (mozilla.org/en-GB/firefox/all/) adds the new :heading pseudo! Easily style all headings, or use nth-child-like AnB syntax to select a range of headings! Needs `layout.css.heading-selector.enabled` flag enabled. Try it out and let me know your thoughts.

A screenshot of Firefox Nightly, with the Codepen https://codepen.io/keithamus/pen/wBaZVaX open. The page showing 6 heading levels, showing the CSS, HTML and the rendered page. Each heading is styled differently using the provided CSS selectors, `:heading` (which styles all headers), `:heading(-2n+3)` (styles h1 and h3 elements), `:heading(5, 6)` (styles the h5 and h6 elements). Another Firefox Nightly window is open, showing the `layout.css.heading-selector.enabled` flag is set to `true`, making the rendered page styled using the new selectors.
ALT text detailsA screenshot of Firefox Nightly, with the Codepen https://codepen.io/keithamus/pen/wBaZVaX open. The page showing 6 heading levels, showing the CSS, HTML and the rendered page. Each heading is styled differently using the provided CSS selectors, `:heading` (which styles all headers), `:heading(-2n+3)` (styles h1 and h3 elements), `:heading(5, 6)` (styles the h5 and h6 elements). Another Firefox Nightly window is open, showing the `layout.css.heading-selector.enabled` flag is set to `true`, making the rendered page styled using the new selectors.
Older →