イベントハンドラの関数名についての雑記 - Qiita
今日のXでは、イベントハンドラの関数名についての話題を見ました。元の投稿はこちらです。要するに、次のhandleClickのようなhandleイベント名という命名は良くないということです。 const handleClick = () => { ... }; <button type="button" onClick={handleClick} /> これについて少し考えたので、せっかくなのでアウトプットしておくことにしました。 この記事の目的 考えたことを頭の中に残しておくのがもったいないので、文章の形にしておく。 色々な意見が出る問題であり、ベストな答えは無いので各々好きにすれば良いということを、読者に理解してもらう。 とはいえ、筆者の考えに納得して同じ考えの人が多いと嬉しいので、なるべく納得してもらう。 筆者の考え 自分の考えとしては、むしろhandleClickいいじゃん！ どんど
単体テストの考え方/使い方 まとめ
著者は古典学派のスタイルを好んでいて、本書では古典学派の定義を採用している テスト対象の焦点をクラスに当てるのは間違っていて、1単位の振る舞いに焦点を当てなければいけない。 また、ロンドン学派のスタイルだと単体テストがテスト対象の内部的なコードと密接に結びつく傾向があるため、賛同できない。 3章 単体テストの構造的解析 AAAパターンという単体テストの構造を用いることで、全てのテストケースに対して簡潔で統一された構造を持たせることができる。また、この構造に慣れることで読みやすさが向上し、保守コストを下げることにつながる。 準備フェーズ(Arrange)フェーズ...ケースの事前条件を満たすように、テスト対象システムとその依存の状態を設定するフェーズ 実行(Act)フェーズ...テスト対象の振る舞いを実行するフェーズ 確認(Assert)フェーズ...実行した結果が想定した結果であることを確
うひょさん、よしこさんと改めて考えるReactコンポーネント設計 | Offers Magazine
はじめに 佐藤：佐藤歩です。現職では開発からしばらく離れていたんですが、最近またまとまった量のリプレイス開発に携わってるので、モデレーターとして、よしこさん、うひょさんからいろいろお話を伺っていきたいなと思っております。 よしこ：こんばんは。よしこです。株式会社ナレッジワークに創業期に入社し、フロントエンドエンジニアをしています。プロダクトの0→1のところから、今の1→10のフェーズに入るまで、SPAのアプリケーション設計や運用をしてきました。 うひょ：うひょです。株式会社バベルに在籍しています。これまでずっとTypeScriptとReactでフロントエンドのアプリ開発に携わってきました。昨年はTypeScriptに関する本も出版しています。 佐藤：今回は、Reactのコンポーネント設計におけるこちらの5つのテーマごとに、よしこさんとうひょさんに順番に簡単にお話をしていただきつつ、都度ディ
コンテキスト - GitHub Docs
コンテキストについて コンテキストは、ワークフローの実行、変数、ランナーの環境、ジョブ、ステップに関する情報にアクセスする方法です。 各コンテキストは、プロパティを含むオブジェクトであり、文字列またはその他のオブジェクトにすることができます。 コンテキスト、オブジェクト、プロパティは、ワークフローの実行条件によって大きく異なります。 たとえば、matrix コンテキストはマトリックス内のジョブに対してのみ設定されます。 式構文を使用してコンテキストにアクセスできます。 詳しくは、「式」を参照してください。 ${{ <context> }} 警告: ワークフローとアクションを作成するときは、コードが攻撃者からの信頼されていない入力を実行する可能性があるかどうかを常に考慮する必要があります。 攻撃者が悪意あるコンテンツを挿入してくるかもしれないので、特定のコンテキストは信頼できない入力として扱
htmxとは何なのか？ その背景にある思想について - Qiita
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
GitHub - pi0/tired-maintainer: 🗒️ Notes from a tired maintainer
Hi. You might have come across this text either because you found it somehow or with a link, perhaps in a closed Pull-Request (PR) Issue or a chat. If you are coming from a closed issue or PR, before everything THANK YOU for your contributions and help, i do appreciate that ❤️ The thing is, maintaining multiple open-source projects is not as easy as you might imagine. As a full-time open-source ma
エンジニアやデザイナーがやっているポッドキャスト更新まとめ
はい！第402回は，自分が今後登壇する勉強会のテーマのために最近調査し直している話の一つとして，JavaScript のフレームワークの変遷について軽くお話してみました💁♂ではでは(=ﾟωﾟ)ﾉーーーーー🔗 LINKSObject-Oriented Conference 2024https://ooc.dev/2024/設計カンファレンス extends OOChttps://yumemi.connpass.com/event/310541/♪ BGM騒音のない世界「天晴」https://soundcloud.com/baron1_3/appareSee Privacy Policy at https://art19.com/privacy and California Privacy Notice at https://art19.com/privacy#do-not-sell-m
PostgreSQLでは識別子に大文字を使ってはいけない - Qiita
タイトルの通り、PostgreSQLではテーブル名、カラム名など識別子に英大文字を使うべきではありません。 PostgreSQLは命令中の識別子を読み取るとき、二重引用符でくくられていなければ大文字を小文字に正規化します。その上で大文字小文字を区別して認識します。 その結果、 PgAdminでUsersテーブルを作る ツールはちゃんと二重引用符でくくるのでそのままの名前でテーブルができる コード内でselect id, name from Usersなどと書くと、select id, name from usersと解釈されてしまいテーブルが見つからない などという馬鹿馬鹿しい事故が起こることになります。 手書きでSQLを書くならまだしも、O/Rマッパーが絡んだりするとや闇要素でてきますね。 （本人のブログ記事 http://cs.hatenablog.jp/entry/2014/05/3
Difference between getElementByID and querySelector
Assume you have a valid HTML element in DOM. I assumed the following snippets to be the same. let id = "037e3778-e157-4715-bff5-e466230fe7a3" const byId = document.getElementById(id) console.log(byId) // works const bySelectorConcat = document.querySelector("#" + id) console.log(bySelectorConcat) // Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#037e3778-e157-4715-bff5-e
すべてのフロントエンド デベロッパーが知っておくべき 5 つの CSS スニペット（2024 年） | Articles | web.dev
すべてのフロントエンド デベロッパーが知っておくべき 5 つの CSS スニペット（2024 年） コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 すべてのフロントエンド デベロッパーは、:has() が「親セレクタ」以上のものであること、subgrid の仕組みと理由、組み込みの CSS 構文でネストする方法、ブラウザで見出しテキストの折り返しのバランスを取る方法、コンテナクエリ ユニットの使用方法について知っておくべきだと思います。 この投稿は、すべてのフロントエンド デベロッパーが知っておくべき昨年 2023 年の 6 つの CSS スニペットの続きです。 CSS:has(.potential-beyond-being-a-parent-selector) :has() は 2023 年末に、すべての主要なブラウザでリリースされました。この新しいセレ
The Golden Rule of Assertions
What if I told you there was a single rule that can reliably tell apart a good test from a bad one? This is not a trick, not a sales pitch. It’s a rule I’ve been using for years to help me refine my tests, make them less flaky and more valuable countless times. In fact, it’s such an indispensable rule in practice that I hereby coin it The Golden Rule of Assertions: A test must fail if, and only if
What PWA Can Do Today
A showcase of what is possible with Progressive Web Apps today. A Progressive Web App (PWA) is a website that can be installed on your device and provide an app-like experience read more How to use this app This app is itself a Progressive Web App which means it can be installed to the home screen of your mobile device or to your desktop. After installing you can check the demos of the features be
React Libraries for 2024
Follow on FacebookReact has been around for a while. Since then, a well-rounded yet overwhelming ecosystem of libraries evolved around the component driven library. Developers coming from other programming languages or libraries/frameworks often have a hard time figuring out all the libraries for creating web applications with React. At its core, React enables one to create component-driven user i
プログラミング言語 HTML 入門
はじめに 以前 uhyo さんにより「HTML はプログラミング言語である」と示されたことは記憶に新しいところですが、昨年末の HTML, The Programming Language の登場により、その主張はより強固なものとなりました。現代ではもはや、HTML は立派なプログラミング言語であるということは疑いようがありません。 この記事では、プログラミング言語 HTML, The Programming Language について、その概要と基本的な文法について説明します。そして最後に、HTML プログラミングの応用例として FizzBuzz やフィボナッチ数列の実装例を見ていきます。 HTML, The Programming Language HTML, The Programming Language (以下 HTML と略します) は、HTMX を開発していることで有名な B
GitHub Actionsで連続pushした時に止めるアレ
大分時間が経ってしまいましたが、2022/8/31 に開催された stand.fm 主催の TECH STAND #9 GitHub イベントに参加しました。 その際に呟いたやつが今回の記事の内容です 有り難いことに直ぐにフォロー頂きました。 あまり纏まった記事が見当たらなかったので、自分用のメモとしてまとめます。 他のCIにはあったアレ GitHub Actionsを利用する前は、TravisCIやCircleCIを利用していました。 移行してから随分使ってないので、記憶が定かではないのですが という機能が標準であった気がします。 この機能の名前は何と呼ぶのでしょうか？地味だけれども、ないと困るアレですｗ GitHub Actionsのリリース直後にこちらの機能と [ci skip] が使えずに後発なサービスなのにーと不満を覚えていました。 その後にアレの機能を実装したカスタムアクション
控えめな App Router と持続可能な開発 - PWA Night vol.59
PWA Night vol.59 ～フロントエンド設計の振り返り〜 (2024.01.17) https://pwanight.connpass.com/event/306410/ で使用したスライドです。本編 20 分。 ===== ▼ 元データで参考リンクとして張っていた URL たち ※ SpeakerDeck でダウンロードできる PDF はスライド中のリンクが有効です Offers「オファーズ」 - エンジニア、PM、デザイナーの副業・転職採用サービス プロダクト開発組織/エンジニアリング組織のマネジメント・パフォーマンス最大化 | Offers MGR（オファーズマネージャー） turbo/examples/basic at main · vercel/turbo Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RemixでWeb標準を学んだ1年間 / First year with Remix
Designing better target sizes
Compiling a standalone executable using modern JavaScript/TypeScript runtimes
Confusing Suffixes -ize and -ify (How and When to Use Them)