多くのウェブサイトではリンクを入れ子にしたカード UI が利用されています。入れ子されたリンクとは以下のようなものです。 このような UI ではカード全体をクリックした場合にはカードのリンク先に遷移し、カード内のタグをクリックした場合にはタグのリンク先に遷移するという挙動が期待されます。この挙動を簡単に HTML で実装すると、以下のように <a> 要素が入れ子になります。 <a href="/new-product" 　class="card"> <a class="tag" href="/tag/tech">Tech</a> <div> <h2>New Product</h2> <p>...</p> </div> </a> しかし、このようにインタラクティブな要素（<a> や <button> など）の子要素にインタラクティブな要素を配置することは HTML 仕様上許可されていません1

なんか、みんな自分の好きなジャンルのランキングつけてて楽しそうなので俺もやってみる。 会社がリモートになってから、がっつりサウナにハマって（今は身体考えてほどほどにしてる）、 銭湯で仕事するのがめちゃくちゃ楽しいと気づいてしまった。 あんまり出社しなくて良い＆社外秘とかのセキュリティに関係がほぼない仕事ってのもあって、 今は週２くらいでは都内のどっかの銭湯で風呂入って仕事してる。 そんなわけで、俺の個人的なコワーキング銭湯ランキングをつけてみる。 ここに上がってないのでオススメあったら、マジで教えて欲しい。新しいところ開拓したい！ 第5位　花景の湯（よみうりランド） よみうりランド併設の温浴施設。最近できたばっかりなのでめちゃくちゃ綺麗。 ここの売りは山に向かって広がる絶景の露天風呂。もうとにかく最高に気持ち良い。 露天風呂ランキングだったら、圧勝でここが一番。コワーキングスペースは横並び

タイトルのように「来月からエンジニアリングマネージャーやってくれませんか」と言われた経験が私にもあります。もう3〜4年くらい前のことです。おそらく多くのエンジニアと同じように当時の私はマネジメント業に興味がなく、マネージャーになってみたものの何から手を付ければ良いかも分からず、とりあえずチームメンバーとの1on1をセッティングしてみたりしました。 まさしく”レベル1”だった私ですが、いくらか経験を積み、今では見える景色や解像度が変わるくらいにはレベルアップした実感があります。 当時に戻れるならこんなふうにマネジメント業務に取り掛かろう、というイメージが具体的に持てるようになったので、今回はそれを言語化してみようと思います。少しレベルアップした自分から、レベル1だった当時の自分へのアドバイスのつもりで書いてみます。 ※ちなみに数人のエンジニアで構成されるチームのエンジニアリングマネージャーを

こんにちは！ Magic Moment フロントエンドエンジニアの @morishin です。 この記事は、Magic Moment Advent Calendar 2024 4 日目の記事です。 はじめに 開発あるある 皆さん開発をしていて、コマンドの "待ち" が長いとき、こんな経験はありませんか。 「ビルドに時間がかかるなぁ」 (別の作業をする) 「もう終わったかな (ﾀｰﾐﾅﾙﾁﾗｰ」 「まだかー」 (以降無限ループ) 作業に集中できない！ 逆に 「このインストール時間かかるなぁ」 「終わるまでちょっと休憩しようかな (ｽﾔｧ」 〜3 時間後〜 「...あっ、いつの間にか終わってた！」 処理の完了に気付かずついつい休憩しすぎた！ ありませんか？ありますよね？ まあ休憩しすぎたっていうのはないにしても、実はエラーで処理が中断していたのに気付かなかった、というのはあるあるな気がします。

以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス

はじめに具体と抽象を行き来することの重要性は、いろいろな方が述べられていて、筆者も本当にそうだと感じています。それがうまくできる人とできない人とで、年収が数百万円のレンジで変わってくると言っても過言ではないのではと思います。 拙書『アーキテクトの教科書』でも第1章に以下の記述があります。 抽象と具象を自由自在に行ったり来たりする能力があると、とても重宝します。 『アーキテクトの教科書』第1章よりただ「具体と抽象を行き来する」という表現そのものが極めて抽象度が高いため、ピンとこない人もいるでしょうし、人によってその解釈が異なる可能性もあるでしょう。この記事では、「具体と抽象を行き来する」という行為を具体例を通じて確認し、理解度を深めたいと思います。 言葉の整理まずは言葉の意味を確認しておきます。 【抽象】 (abstraction)事物または表象の或る側面・性質を抽き離して把握する心的作用。

tl;dr 焼肉

Lodash is dead. Long live Radash. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Lodashの何が問題なのか？ 関数の詳細分析 Lodashの_.get関数 Lodashの_.filter関数 Lodashの_.map関数 コード品質 でも、そのコミュニティは... では、どうするか？ try関数 parallel関数 retry関数 counting関数 range関数 list関数 Lodashの何が問題なのか？ JavaScriptの動的な能力が欠点ではなく特徴として捉えられていた時代に、Lodashは異なる入力に対して異なる振る舞いをする関数を提供することで、できる限り役立つように作られました。現在では、私たちはより良い方法を知っています。純粋関数、決定論的な振る舞い、関数合成といった関数型のコ

成人発達理論というジャンルがある。ここ半年くらいハマって調べていた。ここ数年の自分の変遷にピタリと当てはまっていてずいぶんと面白かった。 この「発達段階」というものがいわゆる「視座」にかなり近い概念なのではないかと思い、今日は紹介してみる。スライドも作ったのでスライドが好きな人はコチラもどうぞ 視野・視座・視点ずっといまいち意味がわからなかったのだが、成人発達理論を学んだ結果、「視座」という単語の意味が自然と理解できるようになった。 学んだ結果として得られた言葉の意味は「自身の価値観から離れ、より広い対象を主語にして見る俯瞰的な観点」という非常にメタなものであった。視座が上がるとは ✕ : 「見えるものが広がる」というシンプルな変化 ◯: 不可逆な思考パラダイムの遷移 であり、「前の自分を失う」ような要素を含むのではないかと思う。抽象的すぎるので詳しく見ていこう。 成人発達理論とは簡単にい

最近、個人情報が漏洩する事件が相次いでいる中で、クレジットカードの「セキュリティコード」まで漏洩していることに驚きの声が上がっています。 本来、セキュリティコードはシステム上に保存していないはずですが、なぜそれが漏洩してしまうのでしょうか。を解説します。 攻撃されたのはデータベースではなく入力フォームか最近のオンラインストアでは、3桁または4桁のセキュリティコードはもちろん、クレジットカード情報自体を自社で取り扱わない仕組みを導入するところが増えています。 しかし、今回9万件超の流出が話題となっているタリーズは、セキュリティコードを含む5万件超のクレジットカード情報が漏洩した可能性があると説明しています。 (3)クレジットカード情報漏洩の可能性があるお客様 2021年7月20日～2024年5月20日の期間中に「タリーズ オンラインストア」においてクレジットカード決済をされたお客様52,95

2024/09/28「XP祭り2024」登壇資料 https://confengine.com/conferences/xp2024

こんにちは、ダイニーの Feature team でソフトウェアエンジニアをしている @ta21cos です。 最近は新規事業である決済関連の機能の開発をメインに行なっています。 ダイニーにおける Feature team は機能にフォーカスした開発・運用を行っているチームです。最近は複数の事業毎に Unit として分かれて開発を進めています。 本日は、普段の開発で実際にあった Pull Request のレビューコメントから得た学びについて紹介します。 Dialog を実装しよう React を使ってある Dialog を作成するため、以下のようなコードを書きました（コードは簡略化しています）。 // useSample ファイル // 内部でロジックと Dialog を同時に定義している hook const Dialog = memo<{ progress: number, ...

チームのパフォーマンスを高めるために、日々試行錯誤している方も多いと思います。私自身も、プロセス改善にこだわり続け、うまくいった部分もあれば、失敗を経験した部分もあります。今回は私のチームリーダーとしての失敗談と学びを共有したいと思います。 チームリーダーとしての責任Tebiki株式会社 エンジニアの二瓶と申します。私は Tebiki株式会社の Web アプリケーションエンジニアとして入社し、現在は tebiki現場分析 の開発を担当しています。また、チーム内では「チームリーダー」という役割 を担っています。弊社のチームリーダーのミッションはざっくりいうと「生産性とプロダクトの品質を最高の状態に保ち、プロダクトの価値を最大化できるような『チームの状態』をつくること」です。ここでいうチームとはプロダクトマネージャー、デザイナー、エンジニアを含む開発チームことです。これまで一人の開発者として手

An IDE built on top of a canvas, Haystack takes care of the tedious and confusing parts of coding for you

背景 Next.js に App Router が導入されてから1年近くが経ちました。しかし、未だに App Router を前提として設計のベストプラクティスが定まっておらず、身近なフロントエンドエンジニアはみな「まだプロダクトに取り入れるには考えることが多いよね」という共通認識のまま止まっているような気がしています。 また、App Router が導入されるまでは、技術選定の無難な選択肢として Next.js が最有力でした。しかし、現在は App Router の設計のプラクティスが未発達なことや、オーバースペックであるという見方が出てきており、検討しなければならないことが多くなったように感じます。 そうした中で、ではその懸念というのはどのようなものがあり、導入しずらい要因に何があるのか、というところが、今回執筆を行う上での背景になります。 App Router導入で考えないといけな

こんにちは！いつも有益な情報をご教授頂きありがとうございます。 プログラミング完全未経験からインターン獲得まで、熊崎さんだったらどのような学習をするか教えて頂けますでしょうか？具体的にはメルカリやサイバーエージェントなどでインターンすることが目標です。応募要件を見てみると経験者を求めている企業が多いと感じています(経験が必要項目になっていなくても、経験者と比較されると圧倒的に不利だと思います。) そもそもインターンが目標というのが少し立ち止まって考えて欲しい所です。ここで僕の好きな記事を一つ紹介します。Joel on Softwareという有名なブログの「Finding Great Developers」です。英文に抵抗があるならページごと機械翻訳に投げ込んでも構いませんが、僕の文脈でピックアップして伝えたい部分だけ掻い摘んで伝えます、僕によるバイアスを含むので興味を持ったら是非原文も読ん

2024/07/13 大吉祥寺.pm 20分レギュラートーク 登壇資料

「state 更新 反映されない」を検索するまで Reactにまだ慣れていない段階で開発をしているとuseStateの問題に詰まってこのような検索をする方は多いかなと思います。 私もその一人で、公式のチュートリアルを一通りやったにも関わらずこの問題に詰まってしまったのは忸怩たる思いでございます。 「useStateで定義した値はset関数で更新できて、useStateはフックなので実行すると画面が更新される」というのはまずReactを勉強する最初の段階で理解するでしょう。 そこで、言われた通りにuseStateで値を定義し、ユーザーの操作によって画面を更新させるコードを書きます。 import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState

こんにちは！ファインディ CTOの佐藤(@ma3tk)です。 表題の通り、約1年半ほどの期間をかけて「エンジニア組織を強くする 開発生産性の教科書 ～事例から学ぶ、生産性向上への取り組み方～」(以降、開発生産性の教科書)という本を執筆しました。 本日(2024年7月11日)発売となりましたので、改めて「開発生産性」に対する思いをお伝えしたり、本の内容の一部をご紹介したいと思います。 「開発生産性の教科書」のご紹介 エンジニア組織を強くする 開発生産性の教科書 本の概要は次のとおりです。 項目 詳細 タイトル エンジニア組織を強くする 開発生産性の教科書 ～事例から学ぶ、生産性向上への取り組み方～ 著者 佐藤 将高、Findy Inc. 発行 技術評論社 定価 2,860円（税込） 発売日 2024年7月11日 ISBN 978-4297142490 購入 Amazon / 楽天ブックス 全