HTML/CSS/JavaScript

デモページ（ソース） 上から順に、以下のとおりです。 grid-template-columns: repeat(3, minmax(250px, 1fr)); 絶対に3カラムになる。　 grid-template-...

たとえば、以下のような構成のモノレポがあるとします。 └📁backend（たとえばNestJS） 　└🔵user.type.ts 　└📝tsconfig.json └📁frontend（たとえばNext.js） 　└🟣hoge.ts 　└📝...

「あんまり分かってないけどこう書いたらなぜか動いた」くらいの理解度なので ベストプラクティスではない可能性があるので注意してください。 tunnel-sshというnpmパッケージを使おうと思いました。 でも型定義ファイルが提供されていませ...

リアルタイム通信を実現する方法として ポーリング ロングポーリング SSE WebSocket の4つがあるらしい。 その違いをメモ。 違い ポーリング： クライアント側が定期的に「更新されてない？」と尋ねて、それに対し...

一言でいうと ページを読み込んだ際に「最初に見える部分」のCSSだけをHTMLファイルにインラインCSSとして書き込んでおいて、「最初に見える部分以外」のCSSは外部ファイルとして非同期で読み込んで高速化しようぜ！なテクニック のこ...

テンプレート文字列とは？ テンプレート文字列は、文字列の中に変数を埋め込むことができる機能です。 以下のように書きます。 const name = "山田"; console.log(`こんにちは。私は${name}です。`); //こ...

家のゴキブリを駆逐したい。 なので「まずはゴキブリの生態について調べたほうが良いのでは？」と思った。 ただ、ゴキブリのことを調べるとゴキブリの画像を載せているサイトに出くわすのが怖い。とても怖い😱 というかもう、ゴキブリに限らず虫...

以下のようなHTMLがあったとして、 <p class="A B">山田太郎です。</p><p class="A">山田太郎です。</p> 以下のCSSを適用すると、 .A {color: red;} .B {background-c...

プログラミングのドキュメントは、ほとんどが英語です。 なので、大多数のプログラマは 分からない英語が出てきたら･･･ ⇒ページ上で右クリック → 日本語に翻訳するを選択して、日本語に変換する という風にして、ドキュメントを読み...

結論からいうと、以下のように違います。 srcset属性･･･”異なるサイズの同じ画像”を表示したい場合に使う pictureタグ･･･”異なる画像”を表示したい場合に使う 図解すると以下のような感じです🤗 srcset属性...

Babelのことを調べていると「トランスコンパイル」「Polyfill」という言葉がよく出てきます。 これらの違いについて調べたメモ。 トランスコンパイル：別の言語に変換すること。 polyfill：古いコードを使って新しいコ...

追記： この記事で書いてるスクリプトは使えなくなりました。 Udemyのアカウントを妻と共有して、割り勘でいろいろ教材を買ってるんですが 私が見た後に妻が見る 妻が見た後に私が見る みたいなことがあるため、後から見るほうは既にチェ...

Sass： 「CSSって使いにくいよねー」と思った人たちが作った言語。 Syntactically Awesome Stylesheets（構造的に イケてる スタイルシート）の略。 Sassで書かれたものをCSSにコ...