AST に変換して HTML の構造を変形する

ast 小ネタ html

小ネタです。例えば以下のような HTML の <h3> ではじまるコンテンツを <section> で囲みたい時、正規表現だとちょっとやりづらかったりします。 <h2>H2</h2> <p>...</p> <h3>H3</h3> <p>...</p> <h3>H3</h3> <p>...</p> <h2>H2</h2> <p>...</p> <section> <h3>H3</h3> <p>...</p> </section> <section> <h3>H3</h3> <p>...</p> </section> そんな時は AST に変換する Parser を利用すると簡単に構造変形をするこ…</section></h3>

2020-06-13

シンプルな Web サイト用の webpack スターターキット

webpack lint css html typescript testing

これは何使い方メモ webpack で複数 HTML ページコミット時に Lint チェックしたい Babel + TypeScript の設定 browserslist ESLint + prettier の設定 stylelint の設定 Jest の設定 CSS 読み込みビルド時のファイル名をどうするかパスの解決環境変…

2018-11-11

10月メモ・リンク集

javascript nuxt vue regexp unicode html svg jira project_management メモ集

10月に調べたことのメモです。 Vue, Nuxt 関連 Migrate to Nuxt 2.0 Nuxt の options.ignore を利用して pages 内にコンテナやストアを配置ページ遷移時に権限確認不要なビルド処理を削減文字コード・正規表現 Unicode Property Escapes 文字コードの変換…

2018-03-03

2月メモ・リンク集

angular javascript html react ruby rails css メモ集 typescript

2月に調べたことのメモです。リサイザー Show More/Less コンポーネントドラッグアンドドロップ（dnd） Googleスプレッドシート的なスクロール AngularのDIに関して Ruby, Rails関連 VS CodeでRubyを書くその他リサイザー angular-resizer - StackBlitz …

2017-07-18

ブロック要素にリンク(a tag)をつける

html css

ブロック要素内のaタグを、要素いっぱいに広げる text-indent: -999px; などでテキストを非表示にする必要があるシンプルにaタグでブロック要素を包むブロック要素内のテキストがリンクテキストと同じスタイルにならないように調整する（必要ならば） a { …

2017-06-26

MouseEvent, KeyboardEventを利用してHTMLElementを操作

html typescript

Event - Web APIs | MDN MouseEvent - Web APIs | MDN KeyboardEvent - Web APIs | MDN HTMLElement - Web APIs | MDN EventTarget <- Node <- Element <- HTMLElement /** * ボタンのdisabled属性を変更 */ public onMouseEvent($event: MouseEvent) { cons…

2017-05-17

z-indexとスタック文脈

css html

重なり順の制御をしているときに、スタック文脈というものを理解していなかったことに気づきました。以下の記事がわかりやすかったです。MDNにはいつもお世話になります。ありがたい。 CSS の z-index の理解 - CSS | MDN z-index なしのスタック : デフォ…