CSS メディアクエリのブレイクポイントに CSS 変数は使えない - かもメモ
タイトルのままです。 CSS 変数はメディアクエリ (@media) のブレイクポイントの値には使うことができないようです。 CSS 変数をブレイクポイントにしても動作しない :root { --breakpoint-md: 48em; } @media (min-width: var(--breakpoint-md)) { body { color: #F00; } } これは動作しない。 (window が 48em 以上になっても color: #F00; にはならない) This may seem confusing at first. If our variables are available at the :root of the page, why can't a media query access them? Well, it comes down to what th
React マークダウンを HTML 変換するライブラリ試してみた - かもメモ
マークダウンテキストを HTML 表示するライブラリ試してみたのでメモ 結論 React で使うなら React-markdown がシンプルで良さそう 調査経緯 ライブラリとしては marked >>> markdown-it > remark の順で使われている remark の内部で使われている remark-parse が圧倒的に多く使われている 最終更新は markdown-it > remark (remark-parse) > marked の順 marked は利用数は多いのですが最終アップデートが 11 年前なので、Markdown-it と Remark で検討することにしました Markdown-it Remark Project JavaScript TypeScript Star 14.5k 5.8k Last publish 7 months ago a yea
Vite + React で path alias を使いたい！ - かもメモ
前回までのあらすじ npm create vite コマンドでサクッと Vite + React (TypeScript) のプロジェクトが作れました！ SPA はファイルがたくさんになるので import の際に ../../../ HELL になりがちです。これを回避するためにパスエイリアス(path alias)を設定しておきたいお気持ちに溢れます。 結論: vite-tsconfig-paths を使えば楽ちん vite-tsconfig-pathsを使えば tsconfig.json にパスエイリアス設定を作成するだけで済む。 $ npm i -D vite-tsconfig-paths vite.config.ts import { defineConfig } from 'vite' + import tsconfigPaths from 'vite-tsconfig-pat
TypeScript Event.target, Event.currentTarget の型がむずい！ - かもメモ
TypeScript で addEventListener のコールバック関数で Event.target, Event.currentTarget を使おうとしたら結構めんどかったのでメモ Event.target と Event.currentTarget の違い これはそもそも JavaScript の違いですが、Event.target はイベントが発生した要素を返すので必ずしもイベントリスナーを付けた対象になるとは限りません。 The read-only target property of the Event interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget when the event hand
TypeScript CDN の jQuery を使いたい - かもメモ
テンプレートエンジンで直接 script を呼ぶ古代の環境の開発をしています。 前回 TypeScript を babel + webpack でトランスパイルできるようにしたのですが、なんとこのプロジェクトでは古の jQuery が使われていました！！！！ CDN から読み込まれている jQuery を使用している箇所で TypeError になってしまうので TypeScript で CDN で読み込まれている jQuery を扱えるようにしたメモ (レガシー環境過ぎて誰得なんだ…) Webpack で bundle しないための設定 Externals The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the cre
CSS Fixedしたコンテンツでスクロールさせたい - かもメモ
モバイルのメニューとかposition: fixedでデザインしたけど、メニューが長かったりデバイス回転させたりしたらメニューが見切れるからfixedしたモーダル内でスクロールを表示させたい時の実装方法のメモ top, left, right, bottom と overflow を利用する .modalNav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; } position: fixedと一緒に top: 0, bottom: 0, left: 0, right: 0 を使用するとコンテンツがエリア全体に伸びるので、そこにoverflowの指定があればfixedしたコンテンツであってもスクロールを表示させることができるようです。 縦方向のスクロールを発生させるだけならtop: 0;と
JavaScript 今更の async / await - かもメモ
async function は Promose を返す returnすると返される値がPromise.resolveされる throwすると値や例外がPromise.rejectされる 何も返さないと関数終了時にundefinedがreturn(resolove)される // return = Promise.resolve() async function resolveFunc() { return 'this resolve'; } resolveFunc() .then((res) => console.log(res)) .catch((err)=> console.log(`ERROR ${err}`)); // => this resolve // throw = Promise.reject() async function rejectErrorFunc() { thr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
