shingo-sasaki-0529のブックマーク (1,398)

  • SQL滅ぶべし | ドクセル

    SQL • リレーショナルデータベースシステムと会話するための言語 • 1970年 Codd が RDB モデルと同時に提案 (Alpha言語) • 1974年 Chamberlin と Boyce が改良 • 元々は SEQUEL (Structured English Query Language) だったが、商標登録されていた • 読み方は エスキューエル とそのまま読む (Glliespie 2012)

    SQL滅ぶべし | ドクセル
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/05/06
    ActiveRecord や Prisma に慣れてるせいで素の SQL 読み書き全然できなくなってきてるけど、やっぱこのメンタルモデルの違いが辛いんだよなぁ。
  • Yahoo! 知恵袋フロントエンドをリアーキテクトしている話

    Yahoo! 知恵袋のフロントエンドには26000行を超えるユニットテスト(1つのcontrollerのユニットテスト)や、多くのロジックを含むcontrollerがあります。これらによって追加実装・保守が難しい状況です。この問題を解決するために、リアーキテクトを行いました。以下について主に話そうと思っています。 ・リアーキテクトで取り組んだこと ・リアーキテクトの結果・学び・反省点

    Yahoo! 知恵袋フロントエンドをリアーキテクトしている話
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/05/05
    20年も続く誰もが知るサービスを継続的に改善し続けるのは凄いなぁ。これフロントエンドの話なのかってのはちょっと思ったけど。
  • 自社サービスのバックエンドを Go から TypeScript へ切り替えるための整理

    切り替える理由 自社の主力製品で利用している技術(WebRTC / WebTransport)がブラウザベースのため TypeScript を利用する Go を採用したのは sqlc が使いたかったという理由 sqlc-gen-typescript が出てきたのでもう Go を使う理由がなくなった 自社サービスチーム全員が Go にまったく興味が無い sqlc 自体は便利 そもそも自社に Go への興味がある人がいない 自社サービスの規模ではボトルネックになるのはデータベースであって言語ではない もしアプリでスケールが必要なときは Rust や Erlang/OTP に切り替えれば良い コネクションプールは PgBouncer を利用すればいい TypeScript からは 1 コネクション 1 接続で問題無い どうせフロントエンドでは TypeScript を書く 自社では React

    自社サービスのバックエンドを Go から TypeScript へ切り替えるための整理
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/05/05
    “そもそも自社に Go への興味がある人がいない” つれえ
  • 詳細度 - CSS: カスケーディングスタイルシート | MDN

    CSS チュートリアル CSS の基 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

    詳細度 - CSS: カスケーディングスタイルシート | MDN
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/05/01
    詳細度、たまに見ないと真ん中(Class 列) になに入るのか忘れる。属性セレクタも真ん中だったか。
  • Kindle Oasisが好きすぎる - n0te

    Kindle Oasisが好きすぎる僕たちは、次世代Oasisの登場をずっとずっと待っている。 しかし、なかなか次世代機が登場しないうちに、手持ちのKindle Oasisは壊れ、交換や買い替えを重ねること数回。気がつけば手元のKindle Oasisは5台目となっていた。 第11世代のKindle Oasisは未だ発表される気配がないけれど、5台目のKindle Oasisにも不調が見え始めたのを契機として、これまでの愛機たちの記録をここに残しておこうと思う。 一代目 Kindle Oasis「進撃の」 進撃の巨人の表紙を映したまま、動かなくなってしまったKindle Oasis。厳密にいうと、何度か動かそうとするものの、画面に線が増えるばかりで、最終的には線が増えることすらなくなってしまった。原型を残しつつも無機質な線に覆われたその佇まいは、硬質化した巨人のようでもある。 二代目 Ki

    Kindle Oasisが好きすぎる - n0te
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/30
    ジップロック使おう
  • インプットのすゝめ | 外道父の匠

    絶賛成長期にあるだろう若手エンジニアは、どういう流れで自身の成長を促したら良いのだろうか、とふと思いつつ口頭で説明してみたけどよくわからんくなったので整理してみたいお気持ちです。 当ブログではアウトプットの効用みたいなものは書いてきましたが、インプットそのものについてはお初なので、自身を振り返る良い機会にもなりそうです。 はじめに これは私が二十数年間、プログラマー・インフラ・SRE といったエンジニアとして通ってきた中で、どのようにインプットをしてきたかを整理してみるチラ裏です。 自分は一般(?)と比べれば少々特殊な経歴で、情報学を学んだことも、新卒研修を受けたことも、IT系資格も、転職したこともない…… ほぼ独学による野良エンジニアとして生息してきましたので、あまり参考にはならないかもしれません。 それでも一応長く生き抜いてきたエンジニアの経験として、インターネットに数多くある参考例の

    インプットのすゝめ | 外道父の匠
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/30
    “ただ動くだけではない、早く・速く・安く・安定して・堅牢で・運用しやすく・手間も少ない、高品質なシステムとするために、一見は余計・過剰とも思える範囲の情報にまで手を出す価値がそこにあります。”
  • E2EテストのAPIリクエストを全てモックした話 | PR TIMES 開発者ブログ

    こんにちは。開発部でインターンをしている桐澤(@kiririLee)です。今回、「PR TIMES Webクリッピングβ版」 というプロジェクトフロントエンドで実装されていたE2Eテストに対して、APIリクエストを全てモックするように修正を行ったためその取り組みを紹介したいと思います。 Webクリッピングβ版 について Webクリッピングβ版とは、WEB上の記事を調査してくれる機能です。キーワードを指定するだけで調査結果を報告をしてくれるため自社の記事掲載状況や社会動向の分析に役立てられます。 フロントエンドで行われていたテスト Webクリッピングβ版はReactによるSPAで構築されており、主に2種類のテストがあります。関数やReactのコンポーネント単位で行うUnitテストと主要な機能単位で行うE2Eテストです。 今回修正したのは後者の主要な機能単位で書かれたテストです。このテスト

    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/30
    良さそうだけど、現代だともう少し目的に沿ったインテグレーションテストの気軽な手法があるかもしれない。
  • PR TIMESにおけるPlaywrightを用いたVisual Regression Test | PR TIMES 開発者ブログ

    { "scripts": { "_docker": "docker run --rm --ipc=host -v $(pwd):/workspace mcr.microsoft.com/playwright:v$(node -e 'console.log(require(\"./package.json\").devDependencies[\"@playwright/test\"])')-jammy", "_test": "playwright test", "_test:ci": "CI=1 playwright test", "_test:u": "playwright test --update-snapshots", "serve": "ts-node -r tsconfig-paths/register server.ts", "test": "pnpm run _docker

    PR TIMESにおけるPlaywrightを用いたVisual Regression Test | PR TIMES 開発者ブログ
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/30
    Playwright の VRT ほんと便利よなぁ。 ローカルでスナップショットの更新をしなければならないってフローがちょっと大変そう。CI で差分出たら PRに通知して Accept するか選ぶだけだと尚良いな。
  • Next.js 型安全なルーティングを使う

    Next.js 型安全なルーティングを使う 2024.04.28 Next.js では実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 この記事における「型安全」とは、静的な型検査によりランタイムで起こり得るエラーを事前に検知することを指します。 Next.js では Next.js 13.2 より実験的な機能として、型安全なルーティングを利用できます。この機能を使うことでリンク先のパス名を静的に検査できるため、typo などのエラーを事前に防ぐことができます。 なお、型安全なルーティングを利用するためには App Router と TypeScript を使用している必要があります。 型安全なルーティングの利用方法 型安全なルーティングを有効にするためには、experim

    Next.js 型安全なルーティングを使う
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/30
    ほえ〜、なんの手作業もなく型定義生成してくれるんだ。すごい。
  • Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary) - Qiita

    経緯 もともとMouseoverDictionaryという素晴らしいFirefox用辞書があったのですが、Quantumの登場とXULの廃止とともに使えなくなってしまったため、自分用にChrome拡張をつくった次第です。 ソースコード 実装に関わる技術寄りの用語: React, esbuild, chrome.storage.local, chrome.storage.sync, Cross-extension messaging, Hogan, debounce, resizable/draggable, intl.v8BreakIterator, deinja, クロスブラウザ, など。 ※詳細は「Mouse Dictionaryの技術的な話」をご参照ください https://qiita.com/wtetsu/items/2a5568cb0b5a38c003fb 使い方 インストール

    Chrome拡張の高速な英語辞書ツールをつくりました(Mouse Dictionary) - Qiita
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/29
    翻訳系の拡張機能、色々漁ってきたけど一周回ってこれに帰ってきた。
  • LT資料作成の基礎 / Basics of LT Slide Preparation

    「広報・人事さん集まれ!LT初心者の会!!」にて登壇 https://connpass.com/event/315746/

    LT資料作成の基礎 / Basics of LT Slide Preparation
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/29
    良い。LTって言葉がバズワード化して Lightning とは一体ってなってきてるけど、こういうので良いんだよ感ある。
  • ActiveStorage の attach → download を同トランザクション内で行なう時に起こりうる現象と対応 - SmartHR Tech Blog

    SmartHRプロダクトエンジニアgongo(@gongoZ)です。 年末調整機能を担当しています。 最近の週末の過ごし方は醤油ラーメン(中華そば)をべることです。 今回は Ruby on Rails が提供する ActiveStorage に関連した「こういうことをやりたいけど困ったこと」と、「それをどのように解消したのか」を紹介します。 記事で紹介する現象 再現させるための最小コードです。Ruby on Rails 6 以降であれば再現できます。 # # 全文 https://gist.github.com/gongo/f3bcff91a1773b1640ca97f9320600f4 # class User < ActiveRecord::Base has_one_attached :profile end user = User.create! ActiveRecord::B

    ActiveStorage の attach → download を同トランザクション内で行なう時に起こりうる現象と対応 - SmartHR Tech Blog
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/27
    トランザクションはコミット完了まではロールバック可能でないといけないから、外部ストレージへの副作用は後回しにされるってことかぁ。
  • アニメーションをスムーズに見せるためのテクニック「指数平滑法」とはどんなものなのか?

    グラフィック系の開発者であるニキータ・リシッツァ氏が、「自身のプロダクトのあらゆる場所で使用している」と述べるお気に入りのテクニックである「指数平滑法」について解説を投稿しました。 My favourite animation trick: exponential smoothing | lisyarus blog https://lisyarus.github.io/blog/programming/2023/02/21/exponential-smoothing.html リシッツァ氏は下図のようなトグルボタンを例に解説を行っています。クリックすると「オン」「オフ」が切り替わります。まだアニメーションを何も設置しておらず、トグルボタンは左端と右端を瞬間移動しています。 機能的にはアニメーションが設定されていなくとも問題はないのですが、アニメーションを設定することでユーザーは何が起こって

    アニメーションをスムーズに見せるためのテクニック「指数平滑法」とはどんなものなのか?
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/27
    UI のアニメーションって基本的に不要だよなぁって考えるようになってきた。
  • HashiCorp創業者、ミッチェル・ハシモト氏に聞く(後編)~ハシモト氏と日本の関係、そしてファウンダーとしての役割とは

    HashiCorp創業者、ミッチェル・ハシモト氏に聞く(後編)~ハシモト氏と日の関係、そしてファウンダーとしての役割とは VagrantやTerraformなど、オープンソースのインフラ自動化ツールで知られるHashiCorp。同社は今年、日法人を設立し、国内での格的な活動をスタートさせました。 同社を創業したミッチェル・ハシモト氏に、創業の経緯やエンタープライズへフォーカスする理由、今後の方向性などとともに、ハシモト氏と日との関係などについても聞きました。 (記事は「HashiCorp創業者、ミッチェル・ハシモト氏に聞く(前編)」の続きです) HashiCorpの将来像について ──── 会社の将来像についても聞かせてください。引き続きエンタープライズに積極的にフォーカスをしていくということですね。 ハシモト氏 はい。そうして成功を実現することで、より多くのオープンソースソフト

    HashiCorp創業者、ミッチェル・ハシモト氏に聞く(後編)~ハシモト氏と日本の関係、そしてファウンダーとしての役割とは
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/26
    HashiCorp ってハシモトの Hashi だったんだ
  • Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers

    はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日 弊社で E2E テスト実行するために Playwright を導入したため紹介させてください。 E2Eテストとは E2Eテスト(エンドツーエンドテスト)とは、ソフトウェア開発におけるテスト手法の一つで、アプリケーションが実際の運用環境と同様の条件下で正しく動作することを確認するためのテストです。 システムの開始点から終了点までを通じて、ユーザーの視点でアプリケーションのフローを追い、機能全体が連携して期待通りに動くかを検証します。具体的には、ユーザーが行うであろう一連の操作をシミュレートして、データがシステムを通じて適切に流れるかや、最終的なアウトプットが正しいかどうかを確認します。E2Eテストにより、部分的な単体テストや統合テストでは見逃されがちな問題を発見することができます。

    Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/26
    Cypress, だいたい並列実行の弱さで選ばれないの惜しいよなぁ。Cypress Cloud でマネタイズしなきゃならないっていう都合があるんだろうけど…。
  • 📈 Tracking: ESLint v9 support · Issue #18391 · eslint/eslint

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    📈 Tracking: ESLint v9 support · Issue #18391 · eslint/eslint
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/25
    ESLint v9 へのエコシステムの追従状況を公式がサマってくれてる。 やっぱ typescript-eslint と plugin-react だなぁ。がんばえー。
  • Node.js v22 で変わること

    2024/04/24 令和トラベルで発表した Node.js v22 で変わることの話です。

    Node.js v22 で変わること
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/25
    え、CJS から ESM が読めるようになるのか!? CJS は同期的で ESM は非同期的だから仕組み上できないって説明で納得してたけど、制限付きでどうにかなったのか。
  • アクセシブルでdisabledなButtonコンポーネントを作成

    button要素を非活性にする場合にdisabled属性がよく利用されます。 ただしdisabled属性には問題があってボタンにフォーカスが当たらなくなります。 フォーカスが当たらないとUI要素として認識がされにくいですのでフォーカスを当てた上で非活性であることを明示しようというのが記事の意図です。 aria-disabledを利用する 基的な対応は参照した記事に書かれている通りaria-disabled属性を利用するです。 ただ、以下のように普通に利用するだけではクリックイベントが実行されてしまいます。 <button aria-disabled onClick={() => console.log('click')}> ボタン </button> これを回避するためにButtonコンポーネントを作成してaria-disabled属性を受け入れる準備をしていきましょう。 クリックイベ

    アクセシブルでdisabledなButtonコンポーネントを作成
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/25
    フォーカスを当てさせるために再実装しなきゃならない仕組みが多すぎて大変だなぁ。UIライブラリ側で吸収すれば良い話なんだろうけど、操作できない要素にフォーカスがあたることが必ずしも良いかもわからない。
  • PRマージのあらゆるブロッキングを回避する技術 / trunk-based development tips

    https://gotanda-rb.connpass.com/event/315058/ 2024/04/024「gotanda.rb #57」の資料です。 発表では、トランクベース開発における基的な考え方とプラクティスを紹介しました。

    PRマージのあらゆるブロッキングを回避する技術 / trunk-based development tips
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/25
    トランクベースリリース、スピード間があって良いけど、リリース作業そのもののコストが一定あると小さすぎる変更でリリースするの億劫になるよなぁ。そこをいかに安全に自動化出来るかが DevOps の醍醐味だろうけど
  • マジでどうでもいいWebKitのバグを修正した(Function.prototype.toString編)

    インターナルなDiscordで人に説明したやつをそのままコピーしたものです。 https://webkit.org/blog/15375/release-notes-for-safari-technology-preview-193/ の JavaScript の Resolved Issues にあるやつです。コミットは https://github.com/WebKit/WebKit/commit/1ff045b365bb63494783062033d5ef8a0c629cb7 です。 Function.prototype.toString という関数はthisの関数を文字列化して返します。そしてビルトイン関数に対してどういう文字列を返すべきか、というのは仕様に定められています。[1] たとえば Function.prototype.toString.call(Array.protot

    マジでどうでもいいWebKitのバグを修正した(Function.prototype.toString編)
    shingo-sasaki-0529
    shingo-sasaki-0529 2024/04/25
    どうでもいいとは言わないけど、 Function を文字列化したときの挙動が仕様通りに実装されてるかで困る人なんて存在するんだろうか…。