前から気になっていた Litestream を Cloud Run で使ってみたので、そのメモです。 Litestream とは？ サンプルコード 手順 動作確認してみる 制限事項 おまけ まとめ 参考 Litestream とは？ Litestream は、 SQLite のデータベースファイルを Amazon S3 や Google Cloud Storage などのオブジェクトストレージにリアルタイムでレプリケートすることができるオープンソースのツールです。 例えば通常 Cloud Run で DB エンジンとして SQLite を使用しようとしても、コンテナが破棄されると同時に毎回 SQLite のデータベースファイルも消えてしまうため、データを永続化することができません。 しかし Litestream を使用すれば、 SQLite のデータベースファイルをオブジェクトストレージに
DHH氏によるコンテナデプロイ自動化ツール「Kamal 1.0」正式リリース。ベアメタルや仮想マシンに自動デプロイ、ゼロダウンタイムのアプリ更新も可能
DHH氏によるコンテナデプロイ自動化ツール「Kamal 1.0」正式リリース。ベアメタルや仮想マシンに自動デプロイ、ゼロダウンタイムのアプリ更新も可能 Ruby on Railsの作者として知られるDavid Heinemeier Hasson（DHH）氏は、Dockerコンテナに対応したアプリケーションのデプロイ自動化ツール「Kamal 1.0」をリリースしました。 Kamalはアプリケーション（群）の構成とデプロイ先のサーバ（群）のIPアドレスなどの基本的な情報を設定すると、あとは仮想マシンやベアメタルサーバ、クラウドのサーバインスタンスなどにDocker環境の構築からアプリのデプロイ、トラフィックの切り替えまでを自動的に行ってくれる、デプロイ自動化ツールです。 Kamal 1.0 has shipped. Deploy your web apps anywhere from bare
こちらは 「本番環境などでやらかしちゃった人 Advent Calendar 2023」 22 日目の記事になります。 はじめに Happy Coding!🤶 みなさん年末いかがお過ごしでしょうか。 私は卒論の抄録執筆が終わらないし、今年体調崩しまくってるしで泣きそうです😭 この記事では「Docker が俺の Postgres を勝手に全世界に公開しやがって色々怒られた話」について述べていきたいと思います。 ※所属団体の関係で、技術的な話以外のところの一部で詳しく話せないところはぼかしたり、デタラメなことで置き換えたりしています。ご了承ください。 背景 私は大学 4 年で、働いているという訳でもなく、 個人やちょっとした団体で Web アプリや API サーバなどを作って、みんなが使えるようにしています。 今回は数年前に起こった、とある団体でのお話です。 サービス構成 そこではオンプレ
TypeScript Origins: The DocumentaryはTypeScriptの誕生に関わった関係者たちへのインタビューで構成されたドキュメンタリー動画。 www.youtube.com 製作元はOfferZenというアムステルダムの求人プラットームの会社で、以前にはSvelte OriginsやLaravel Originsも公開している。 本作ではReact.js: The Documentaryの次世代フロントエンドフレームワーク開発競争と時期を同じくして起っていたAltJS戦争の中でどうTypeScriptが現在の地位を獲得していったのかに迫る。 laiso.hatenablog.com 私はTypeScriptについては片手間業務プログラマーという感じで全然詳しくないんですけど、TypeScript Originsのゆりかご からRemove TypeScriptの
Leaner Technologies の @corocn です。 最近フォームを作っていて、意図しないタイミングで 1Password のオートコンプリートが表示されてしまい困っていたので解決法を残しておきます。 画像はshadcn/ui - dialogから拝借 結論 input に data-1p-ignore 属性を付与する autocomplete="off" しても空気読んで無効化してくれないので注意。
HTML First
HTML First is a set of principles that aims to make building web software easier, faster, more inclusive, and more maintainable by... Leveraging the default capabilities of modern web browsers. Leveraging the extreme simplicity of HTML's attribute syntax. Leveraging the web's ViewSource affordance. Goals The main goal of HTML First is to substantially widen the pool of people who can work on web s
Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約
Next.js に対する Kent C. Dodds の批判と、Lee Robinson のアンサーの要約 はじめに 10 月 26 日に Next.js Conf が開催されましたが、それと前後して Kent C. Dodds (以下 kentcdodds と呼びます) と Lee Robinson (以下 leerob と呼びます) がそれぞれ という記事を公開しました。前者はタイトルの通り、Testing Library の作者であり、Remix の共同創業者の一人でもある開発者兼教育者 kentcdodds が、Next.js を使わない理由について述べたものです。そして後者は、Vercel の VP of Developer Experience である leerob が、主に前者に対する反論を述べたものです。筆者は両方の記事を公開後すぐに面白く読み、そしてどちらにも頷けるところ
タイトル通り、JavaScriptツール群「UnJS」にどんなライブラリが存在するのかをひたすら見てみよう！ という記事です。 本当は全て紹介しようと思ったのですが、全75個あり、1つの記事に入れるとあまりにも多すぎるので、この記事では2023年11月4日時点のStar数の順に沿って上位30個を紹介していきます。 UnJS とは UnJSは、Nuxt 開発チームが中心となって開発・メンテナンスされている、あらゆるJavaScriptフレームワーク上で統一的に動作するユーティリティーツール・ライブラリ群です。 UnJSというプロジェクトが何であるかについては、2022年11月に公開された講演映像「UnJS: Nuxt 3 behind the scenes by Pooya Parsa」を観て頂くのが最もわかりやすいと思います。Nuxt 3 正式リリース直後ということもあって、かなり詳細な背
いまさら聞けないgRPCの基礎 - Qiita
はじめに この記事では、gRPCのgもRPCも何もわからないという方でもgRPCを理解できようにと思い書きました。できる限り丁寧な解説を目指したいと思うので、ここら辺がわかりにくかったなどがあればぜひコメントで教えてください！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 gRPCの概要 gRPCはオープンソースのRPCフレームワーク(後述）です。Googleによって開発され、2015年にオープンソースとして公開されました。gRPCは一般的にマイクロサービス間での通信や、モバイルアプリとバックエンドサーバー間の通信で用いられます。 マイクロサービスとは、機能ごとにサービスとして独立させることを指します。マイクロサービス
2023年11月19日開催された JSConf JP 2023 で発表した「書いたJavaScriptがそのままブラウザで動く未来へ」のスピーカーノートです（スライドに対した情報がないので、スピーカーノートをそのまま公開します）。
デジタル庁のサイト、その後… - Qiita
はじめに 第1弾で多くの評価と批判をいただきました。 そして、第2弾もそこそこの評価をいただきました。 第3弾は全くの不発でした。 そして2023年11月1日、正式にリニューアルがされました。 今回第４弾はリニューアルされたデジタル庁のサイトについて書いていきます。 Next.jsからDrupalへ まず、試作版のデジタル庁のサイトがこちらです。 今現在は試作版のサイトが閉鎖されていて、手元にスクショがなかったので、webarchiveから取得しました。 こちらがデジタル庁のサイトです。 最初見た時、「そのまま試作版のサイトを本番サイトにしたのねん」と思いました。 しかし、よくよく調査すると、大きく変わっていることに気づきました。 なんと、Next.jsからDrupalに変わっているではないですか！！！ これはびっくりしました。第一弾の記事で、デジタル庁のサイトにNext.jsが使われてい
Playwrightを使ったE2Eテストを導入した話 - インフラ編 Playwright × Allure Report × AWS - Uzabase for Engineers
はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日は Playwright を使ったE2Eテストの導入について、紹介させていただきました。 今回は作成したテストをAWS 基盤上で動かす方法を紹介させていただきます。 前回の記事 tech.uzabase.com E2Eテスト実行のタイミング NewsPicksでは 下記のタイミングで E2Eテストを実行させています。 ①リリース時のカナリーデプロイ後 NewsPicks ではカナリーリリースを採用していてカナリーへのデプロイが完了した後、カナリーに向けてE2Eテストが動きます。 ②開発環境デプロイ後 動作確認をしたい場合に feature ブランチなどでデプロイ後 E2Eテストを実行できるようにしています。 本記事では主に 「②開発環境デプロイ後」 を例に紹介します。 実行方法 具
本稿はNext.js v15.0.0-rc.0時点の情報を元に執筆しており、PPRはさらにexperimentalな機能です。v15.0.0のリリース時や、PPRがstableな機能として提供される際には機能の一部が変更されてる可能性がありますので、ご注意下さい。 Partial Pre-Rendering(以降PPR)はNext.js v14.0で発表された、SSRやSSGにならぶ新たなレンダリングモデルです。 PPRは前述の通り開発中の機能で、v15のRC版にてexperimentalフラグを有効にすることで利用することができます。ppr: trueとすれば全部のページが対象となり、ppr: "incremental"とすればexport const experimental_ppr = trueを設定したRouteのみがPPRの対象となります。 // next.config.mjs
mytweetsという自分の Twitter/Bluesky の自己ポストの全部検索サービスをNext.js App Router(RSC)で書きなおしました。 mytweets は Twitter のアーカイブや Bluesky の API を使って自分のポストを S3 に保存しておき、 S3 Selectを使って全文検索ができる自分専用の Twilog のようなサービスです。 自分の Tweets をインクリメンタル検索できるサービス作成キット と Tweets をまとめて削除するツールを書いた | Web Scratch 過去の Tweets を全文検索できる mytweets を Bluesky に対応した。自分用 Twilog みたいなもの | Web Scratch 最初は CloudFront + Lambda@Edge + Next.js Pages Router で動かし
ドラえも⚫︎で理解するCSRF はじめに ※コメントにて徳丸浩先生(@ockeghem)に間違いをいくつかご指摘頂き修正中です。 また、@rudorufu1981様よりブラウザの同一オリジンポリシーについての補足を頂いております。 ぜひ記事の下部、コメント欄までご覧頂きますようお願いいたします。 ご指摘や補足、本当に有難うございます。 【追記2023.12.2】 同一オリジンポリシーの補足についても徳丸先生のご見解コメントを頂いております。ぜひそちらもご確認下さい。 【追記2023.12.5】 ご指摘を受けて同一オリジンポリシーはCSRFと直接の関連はない事から、取り消し線にて削除致しました。 対象読者 ・HTTPの特性 ・セッション管理 ・ブラウザの同一オリジンポリシー ・CSRF(Cross-Site Request Forgeries) ⚫︎上記の言葉を聞いてイメージができない人 ⚫
Kaigi on Rails 2023での「Hotwire的な設計を追求して「Web紙芝居」に行き着いた話」のトーク資料です。
nginx news
The freenginx.org project. The goal of the project is to keep nginx development free from arbitrary corporate actions. To contribute, subscribe to mailing lists.
CDN業者にやられた話 - Qiita
A社の営業 某Webサービスを運用していた時の話。 そのサービスでは広告が主な収入源で、そのためSEOはめちゃめちゃ重要で、SEOの順位と売り上げが比例するような感じでした。 なので、SEOコンサルにずっとアドバイスをしてもらっている状態でした。 そんな時、世界的に有名なCDN業者から営業を受けました。ここでは仮に A社 としましょう。 A社が言うには「パフォーマンス改善で御社の売り上げを倍増される自信があります！」とのこと。 確かにサイトの表示スピードはSEOにもめちゃめちゃ重要ですし、SEO関係なくても、サイトスピードと顧客の購買意欲は比例するとよく言われています。 そうは言っても かなり高額な利用料を 提示されたので、簡単には契約は決断できません。 一旦2週間だけ無償でトライアルさせてもらうことになりました。 トライアルするも トライアルするも、正直体感的にも早くなった感じはなく、ア
個人開発してるWebサービスの API のシナリオテストに runn を使ってみたけど、とてもよかった - えいのうにっき
「個人開発してるWebサービス」というのは Pixela のことで、runn とは @k1loW さんが開発しているオペレーション自動化ツール/パッケージです。 pixe.la github.com Pixela は、そのユーザーインターフェースとして基本的に Web API のみを提供しているサービスで（サービスを利用するための各種操作は基本的にすべて Web API に対する HTTP リクエストによって行う必要がある）、現在そのローンチから6年目を迎えるサービスです。 blog.a-know.me ありがたいことに、世界中のユーザー（特に、プログラミング初学者の方によくご利用いただいているようです）に継続的に使っていただけているサービスになっており、登録ユーザー数はもうすぐ7万人に到達しようとしているところです。開発・メンテナンスに係る私の人件費を除けば、黒字運営を続けることもできて
Vue Fes Japan 2023 で発表したスライドです。 発表概要: .vue でエディタの補完機能などを効かせるために、Vue Language Server というツールがあります。実はこのコアは Volar.js という OSS に切り出されています。Volar.js は "あらゆる組み込み言語" のためのフレームワークであり、Vue.js 以外にも利用できる汎用性を備えています。このセッションでは Volar.js が一体どういうものなのか、そしてその汎用性がどのような可能性を秘めているのかについてお話します。
Intro IETF の httpbis で、 Reverse HTTP Transport という仕様が提案されている。 Reverse HTTP Transport https://www.ietf.org/archive/id/draft-bt-httpbis-reverse-http-01.html この仕様は、 Origin サーバの前に何かしら Intermediaries (Loadbalancer, Reverse Proxy, CDN etc)があるのが一般的な現代の Web サービス構成において、非常に革新的なアイデアを取り入れたプロトコルと言える。 まだ v01 という初期段階ではあるが、発想が非常に面白かったので、読書メモを残す。 登場人物 ベースとして HTTP の話にはなるが、登場人物が多いため Client/Server という「相対的な役割」で話をすると、紛
目的 QBハウスがもたらす「省時間」効果を最大限に享受するには、QBハウスでの「待ち時間」を最小限にする必要があります。 QB HOUSEとは? | QB Lab | QBハウス "10分の身だしなみ" QB HOUSE が考える「省時間」とは、同じ社会的・経済的効果や便益を、 より少ない時間で得られるヘアカットサービスを提供することです。 このクオリティを高めていくために、私たちは多様な取り組みをスタートしています。 そのため、公式サイトでは店舗ごとの待ち人数を確認することができます。 ご利用案内 | QBハウス "10分の身だしなみ" 渋谷南口店 | 店舗検索結果 | QBハウス "10分の身だしなみ" ただ、もったいないのは「現在の」待ち人数しか確認できません。 QB PREMIUM では、アプリ予約ができるようですが、始まったばかりのサービスのため、QBハウスで待ち時間なく対応して
概要 当時数ヶ月間誰も原因がわからなかった一時的にRDSの負荷（CPU使用率）がスパイクする現象の原因を調査できる環境を整えて、原因分析〜改善まで実施したときの話です。 1つ1つの取り組み自体は大きなことはやっていませんが、一連の動きで得られたものも多かったのでアウトプットしようと思い記事にまとめました。 取り組んだ課題 原因を特定するためのツールがない そもそも何が原因でRDSのCPU負荷が高まっているのかを調べるための情報がCPU使用率以外に全くない状況でした。 そこでRDSの負荷原因を探る方法を調べると、Performance InsightsやCloudWatch Logsへのスロークエリログ出力を使う記事をいくつか見つけたのでこの2つについて調べることにしました。 Performance Insights データベース負荷をSQLなどの単位で時系列で可視化したり、トップSQLやD
TL;DR RDS の メジャーバージョンアップグレード を行なった PostgreSQL 11.6 -> 15.5 MySQL 5.7.44 -> 8.0.36 PostgreSQL は AWS CDK を利用した、自前での手動切り替えをベースにした Blue/Green デプロイによるアップグレードを行なった MySQL は AWS コンソールから AWSが提供している機能である RDS Blue/Green Deployments による MySQL のアップグレードを行なった nginx の ngx_http_proxy_module を活用してサービスのダウンタイムを防止した はじめに 初めまして。株式会社ジーニーの GENIEE CHAT開発チームのマネージャーを担当しています。 今回は、データベースのメジャーアップグレードを行った際の手順やポイントなどを書いていこうと思います
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説しています。 今回はMisskeyのWebクライアント（Misskey Web）におけるUIデザインの工夫や各種コンポーネントについて紹介します。 なお、「デザイン」という語は設計という意味と、見た目・意匠という意味がありますが、この記事ではどちらも含みます。 Misskey Webの設計思想 Misskey Webの設計思想として、「デスクトップでもモバイルデバイスでも同じように使えるようにする」というのがあります。 “同じように使える”とは、機能や使い勝手といった面でもそうなのですが、コンポーネント（UIを構成する個々のパーツ）レベルの話も含んでいます。 現在はこのような設計思想で開発していますが、Misskey初期の頃は、デスクトップ版Webクライアントとモバイルデバイス
2023年はエッジコンピューティングとデータベース接続の分野において、Cloudflare Workers(以下CFWorkers)が中心となり多くの進歩が見られました。本記事では、この1年間の重要なトピックと、それがどのように開発体験を変えたかを振り返ります。特に、CFWorkersのエコシステムの成長、機能拡張、およびDB接続の課題と解決策に焦点を当てています。 エコシステムの進化とCFWorkers上からのDB接続需要の増加 2021年頃から2022年にかけて、いくつかのWebアプリケーションのフレームワークやエコシステムが、CFWorkers上での動作やデプロイをサポートしたことがきっかけとなり、エッジランタイム・コンピューティングの注目を集めるようになりました。 Remix Remixは、フロントエンドのフレームワークであり、エッジランタイムへのデプロイをサポートしています。 2
( 2022年、仕事中であった事例からいろいろまとめた資料を Qiita に記載 ) 私は自社開発の会社に勤めるサーバーサイドエンジニア。 去年(2022年)、フロントエンドエンジニアが書いてたHTMLを見てたら以下のようなコードを見つけた。
You don't need Node.js
Node.jsはいらない場合がある、むしろいらない場合の方が多いかもしれない、 そしてDenoとBunを使い分けて代替する方法を説明するという記事です。 Post Node.js ランタイムの登場 Node.js のあとにできたランタイムがいくつも登場しています。 Deno Bun WinterJS LLRT この中でも、人気であるDenoとBunを中心に考えていきます。 DenoやBunに変えるメリット これがなければNode.jsから変える必要はないと思います。 私は、以下の3つが、2ランタイムに共通して言える大きなメリットだと思います: ネイティブTypeScriptサポート 高速 Web標準 ネイティブTypeScriptサポート 現在、JavaScriptを記述するときは、TypeScriptを利用することが多いと思います。 Node.jsでTypeScriptを使うとき。tsc
Xこと旧Twitterが今後どうなるのか全く分からない状況ですが、2、3カ月ぐらい前にニコニコ動画の代表の人がこんなことを言いました。要は「ツイッターみたいなSNSを作りたくない」という話です。 一応、SNSを作って閉鎖させたことがあるのですが、この発言は本当です。 で、何故作ってと言われたら断りたくなるほど面倒くさい仕組みなのか解説していきます。 (最も、「何故作りたくないのか」と分かったとしても、この発言は批判されるでしょうし、私自身批判的な目で見てますが、そこは横に置いておくとします。） 実はツイッターのタイムラインの仕組みは非常にサーバー負担が大きい。 SNSを実際に作って分かったのですが、実はツイッターのタイムラインの仕組みは非常にサーバー負担が大きいのです。 というのも、ネット掲示板で例えるなら「ユーザー一人につき一回の書き込みを平均して千個ぐらいの掲示板に一度に書き込む」とい
当サイトをFediverseに対応させました。 @songmu.jp@songmu.jp でMastodonなどでリモートフォローできます。 やったことは、 このブログがFediverseに対応しました というtyageさんのエントリーをそのままなぞっただけです。このエントリーはh-cardのサイトトップへの掲出に関する説明が書き漏れていそうでしたが、それも実施しました。 当サイトは静的サイトであり、付随機能は外部サービスに頼りたいと考えている。例えば、コメント機能はDisqusを使っている。Fediverseに関しても何かそういうサービスがないかと思っていたが、Bridge Fedというサービスがあり、上記のエントリー内で懇切丁寧に解説されていたので導入は比較的簡単で、作業時間は小一時間でできた。大まかな手順は以下。 Bridgy Fed というサービスを利用してサイトをFedivers
エッジは誰のもの？ - ゆーすけべー日記
CDNの文脈でいうエッジコンピューティングはフロントエンドのものとされることが多い気がするけど、そうじゃない。フロントエンドの技術を使ったバックエンドである。 フロントエンド？ ユーザーに近いところで実行されるという意味ではフロントエンドかもしれない。あと、VercelのNext.jsのように、フロントエンドフレームワークのファンクションがエッジで動くからフロントエンドでしょというのはある。そしてエッジのファンクションはたいていフロントエンドで使われているJavaScriptもしくはTypeScriptで書く。そうするとツールチェーンも、例えば「Vite」と聞いてそれが何であるか？を答えられる人はフロントエンドやってる人の方が多いだろう。 2つのユースケース エッジには2つのユースケースがある。 CDNの機能を拡張する。オリジンありき。 サーバーレスコンピュート。オリジンそのものになる。
なぜHTTP/3は急速に普及していったのか、その利点とは？
2022年にインターネット技術の標準を策定する団体のIETFがHTTPの新しいバージョンとして「HTTP/3」を標準化して以降、HTTP/3の利用はウェブの世界で急速に普及していきました。HTTP/3にどのような利点があり、なぜ急速に普及したのかについてウェブに関するエキスパートエンジニアのロビン・マークスさんがAPNICのブログに投稿しています。 Why HTTP/3 is eating the world | APNIC Blog https://blog.apnic.net/2023/09/25/why-http-3-is-eating-the-world/ GoogleやMetaなどの大企業がHTTP/3を採用しているため、GIGAZINEやAPNICのブログ記事の読み込みも含めて多くの通信でHTTP/3が利用されています。通信に利用されているHTTPのバージョンごとの推移を調査し
Cloudflare、分散SQLiteデータベース「Cloudflare D1」のオープンベータを開始 CloudflareはCDNエッジでSQLiteのマネージドサービスを提供する「Cloudflare D1」のオープンベータを発表しました。 We’re unlocking the ability for developers to build production-scale applications on D1! Now in open beta, D1 now offers higher per-database storage limits and the ability to create more databases! Read our blog to learn morehttps://t.co/gFAgMLPEtx — Cloudflare Developers (@Cl
Ruby on Browser
ruby.wasm で作ったページの紹介と ruby.wasm の使い方 スライド内のリンク - 文字化けを復元するよ https://tmtms.net/mojibake/ - シャッフル https://tmtms.net/shuffle.html?list=Ruby,Perl,Pytho…
swaggerとは 古の時代、API仕様書はwordやexcelで表現され、各所に共有されるというのが一般的でした。 ですが近年、API仕様を表現する際にはswaggerを利用するのが最も効率的で、保守性が高く、世間一般で仕様化され、見やすいというのもあり、一般化されてきたのではないのでしょうか 今回はそんなswaggerの書き方について、まずは書くために覚えておきたいポイントを解説していこうかと思います！ どう書いてくか swagger editorで書く 公式がWeb上に提供しているツールを利用し、すぐにでもswaggerの執筆が可能となっています！ なにをインストールする必要もなく開始1秒で利用できるので、私も重宝してます なお、ページを開くとサンプルAPI仕様がすでにある状態でのスタートとなり、記法の参考などにもなります vscodeで書く 必要なプラグインをインストールし、vsc
開発の流れとして、デザイン決定後にデザイン（Figma）が開発部隊に渡ってくることは多いと思います。 開発着手前にデザインについて確認しておいた方が良いことの備忘です。 サンプル画像はWebで作っていますが、内容としてはWebに限らず、iOS/Android Nativeなアプリも対象としています。 また、記載順をどうしようか迷ったのですが、特に体系だった説明もできないので思いついた順で書いています。 アイコン/画像について 画像の形式を確認しましょう 画像の形式はベクター画像（SVG）なのか、ラスター画像（PNGなど）か確認します。 アイコン系は基本的にベクターだと思いますので、SVGでExportできない場合はデザイン提供元に確認しましょう。 ラスター画像は要件上こだわりがなければ、開発側でWebP/JPEG/PNGなどの特性や稼働環境を鑑みて決定するで問題ないと思います。 スマホでは
Node.js 21では --experimental-default-type=module フラグで、JavaScriptファイルのデフォルトの解釈をCJS(CommonJS)からESM(ECMAScript Modules)に変更できるようになっています。 Node.js 21 is now available! | Node.js これは、Node.jsにおいてJavaScriptファイル(.js)のデフォルトをESMに変更するための第一歩です。 今回のDeep Diveでは、Node.jsのESMデフォルト化に向けたIssueや実装について紹介します。 Node.jsのESMデフォルト化 Discussion: New “ESM by default” mode · Issue #49432 · nodejs/node このIssueは、Node.jsにおけるambiguous
はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？ この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。 aria-disabl
CSSの大きな問題点のひとつとして、スタイルが影響する範囲を指定することができませんでした。 そのため一か所だけ書き替えたと思ったら全然関係ないところが崩れたりして、その欠陥をどうにかすべくBEMやらScoped CSSやらStyled Componentsやら解決策が乱立してどうにもならなくなりました。 とりあえずStyled Componentsとかの乱数スタイルシートはユーザスタイルシート適用が困難なのでさっさと滅びろ。 さて先日リリースされたGoogle Chrome 118でCSSが@scopeに対応しました。 なんと、素のCSSで適用範囲を制限できるようになります。 <div class="out"> <span>ここはfooの外</span> <div class="foo"> <span>ここはfooの中、barの外</span> <div class="bar"> <sp
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cloud Run + Litestream で RDB を使いつつ費用を格安に抑える
Docker が俺の Postgres を勝手に全世界に公開しやがって色々怒られた話 - Qiita
TypeScript Origins: The Documentaryを観た - laiso
1Password のオートコンプリート機能をサービス提供側で無効化する
UnJS にどんなツールがあるのか、上位30件すべて紹介してみた
「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
PPR - pre-rendering新時代の到来とSSR/SSG論争の終焉
Twitter/Blueskyの自己ポストの全文検索サービスをNext.js App Router(RSC)で書きなおした方法/設計/感想
ドラえも⚫︎で理解するCSRF - Qiita
Hotwire的な設計を追求して「Web紙芝居」に行き着いた話
Vue Language Server から生まれた Volar.js と、それが秘める可能性
Reverse HTTP Transport が描く新しい Web サービスデプロイ構成 | blog.jxck.io
Cloudflare スタックを駆使してQBハウスの待ち人数推移を眺める - Qiita
原因不明だったRDS負荷のスパイクを改善できた話 - Qiita
Blue/Green デプロイを使用した、RDS MySQL/PostgreSQLのアップグレード
MisskeyのUI設計 | gihyo.jp
2023年振返り: Cloudflare Workersとデータベース接続の進歩
imgタグの変化 - 気づいたら時代遅れなHTMLを書いてた - Qiita
ニコニコ動画代表の「ツイッターのようなＳＮＳは作りたくない」発言を調べたら本当だった話 - Qiita
静的サイトをFediverseに対応させる | おそらくはそれさえも平凡な日々
Cloudflare、分散SQLiteデータベース「Cloudflare D1」のオープンベータを開始
今日から始めるswagger入門（最低限書けるようになる） - Qiita
エンジニアがデザインについて確認した方が良いこと - Qiita
Deep Dive: Node.jsのESMデフォルト化への道
【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？ - Qiita
【CSS】スタイルが適用される範囲を限定する@scopeが非常に便利で有能 - Qiita