rundezv

半年後に役立つ｢Web制作メモ｣を発信｡最新仕様を多く取り扱うため､現時点では全ブラウザで使えないことが多いです｡投稿は断片的なアイデア段階の内容で完全版はnoteにまとめています｡

[rundezv @takamosooo]

忘れたころにやってくるWordPressの保守案件。モダンな技術スタックもWordPress保守も両方やっていかないと。

[rundezv @takamosooo]

✍️ Web制作の小技

03. CSSで取得するスクロールバーの横幅

コンテナクエリを活用してスクロールバーの横幅を取得しています。変数として定義しているので、どこからでもvar()で呼び出せます。

仕様が変わってhtml要素にコンテナクエリを指定しても包含ブロック扱いにならないため、子要素でposition: absolute;やposition: fixed;を問題なく使えるようになりました。

[rundezv @rundezv]

✍️ Web Development Tips:

03. CSS Get the Scrollbar Width

The scrollbar width is obtained using container queries. Since it is defined as a variable, it can be accessed from anywhere using var().

[rundezv @takamosooo]

✍️ Web制作の小技

02. CSSで単位つき文字列から数値に型変換

remやem、vwなどの単位つき文字列から単位を取り除いたpx数値へ変換できます。数値型になるので変数として定義しておけば使いまわせたりするので便利です。

[rundezv @takamosooo]

✍️ Web制作の小技

02. CSSで単位つき文字列から数値に型変換

remやem、vwなどの単位つき文字列から単位を取り除いたpx数値へ変換できます。数値型になるので変数として定義しておけば使いまわせたりするので便利です。

[rundezv @rundezv]

✍️ Web Development Tips:

02. CSS Converting Unit-Based Strings to Numbers

You can convert unit-based strings such as rem, em, or vw into numeric px values by stripping the unit.

[rundezv @takamosooo]

✍️Web制作の小技

01. ルート要素セレクタの省略記法

CSSで入れ子構文で使われる&を単体で使うと、ルート要素を指すようになります。

[rundezv @takamosooo]

✍️Web制作の小技

01. ルート要素セレクタの省略記法

CSSで入れ子構文で使われる&を単体で使うと、ルート要素を指すようになります。

[rundezv @rundezv]

✍️Web Development Tips:

01. CSS Shorthand for the Root Element Selector

When the & symbol, which is normally used in nested CSS syntax, is used on its own, it refers to the root element.

[rundezv @takamosooo]

📦 brianvoe/slim-select

依存なしで動作する軽量な JavaScript用ドロップダウン拡張ライブラリで、シングル／マルチセレクト、検索機能、オプションの動的追加、HTMLオプション対応など多機能を備えています。ARIA対応でアクセシビリティにも配慮されており、VueやReactとの統合にも対応。スタイリングを自分で制御したいWeb開発に便利です。

https://t.co/sNHapX9u0k

[rundezv @takamosooo]

【脱jQuery】JavaScriptへの書き換え Selectors編｜rundezv https://t.co/01nd3rBYb7

[rundezv @takamosooo]

WordPressをヘッドレスではなくそのまま使って、フロントのみAstroで実装するのってありなのかな。もちろんセキュリティ対策はするとして。複数人使うとなるとコスト面でもWordPressが提案しやすい。

[rundezv @takamosooo]

▼ sindresorhus/p-map

配列内の非同期処理を 並列実行しつつ、実行数を指定できる軽量なユーティリティライブラリです。Promise.all()と異なり、concurrencyオプションで並列数を制御でき、エラー時の挙動も柔軟に設定可能です。

https://t.co/PMb8caikMo

[rundezv @takamosooo]

▼ AsyncBanana/microdiff

超軽量（minified 約1 kB）、依存なしのオブジェクト＆配列比較ライブラリで、深い差分検出を高速・高性能に実現します。diff()関数一つで CREATE／REMOVE／CHANGE を追跡し、DateやRegExpといった特殊型にも対応しています。

https://t.co/vOu1ViIgLU

[rundezv @takamosooo]

▼ codex-team/editor.js

ブロックスタイルのリッチテキストエディタで、文章を「段落」「見出し」「リスト」などの独立ブロック単位で編集でき、HTMLではなくクリーンなJSON出力を生成します。APIプラグインベースで柔軟に拡張可能、モダンなUIとシンプルな設計です。

https://t.co/eCibwNeIYi

[rundezv @takamosooo]

▼ yassinebenaid/bunster

シェルスクリプトをGo言語に変換してスタンドアロンの静的バイナリにコンパイルするツールです。bash互換性、.envサポート、フラグ解析、静的アセット埋め込みなど多機能です。

https://t.co/KqBIf3adZ9

[rundezv @takamosooo]

▼ kentcdodds/match-sorter

配列をユーザー入力に基づいて「わかりやすく」「予測可能な」順序でフィルタ・ソートする軽量ライブラリです。依存なしで動作し、大規模な配列でも高速に処理可能です。先頭一致、部分一致などのルールに基づいて安定した順序を生成します。

https://t.co/U4yBuDVIM6

[rundezv @takamosooo]

▼ krisk/Fuse

非常に軽量なファジー検索（あいまい検索）ライブラリで、依存なしで使えます。柔軟かつ高速な検索機能を提供し、クライアントサイドやバックエンドの簡易検索に適しています。

https://t.co/01nKTsQJl0

[rundezv @takamosooo]

▼ jmaister/excellentexport

HTMLテーブルからブラウザ上で直接Excel（XLS/XLSX）やCSVを生成できるJavaScriptライブラリです。サーバー不要で動作し、バージョン3以降はXLSX形式にも対応しています。

https://t.co/gkr6ulmIFb

[rundezv @takamosooo]

▼ dsherret/dax

DenoやNode.js用のクロスプラットフォーム シェルツールで、zxに触発されつつもWindows対応や環境変数エクスポート機能を強化。Windowsでも対応し、グローバル設定なしで使えるシンプルかつ強力なシェルラッパーです。

https://t.co/bcIoRWKqs9

[rundezv @takamosooo]

▼ merakiuilabs/merakiui

Tailwind CSSをベースにした美しいUIコンポーネント集で、レスポンシブ対応やダークモード、RTL対応を備えています。カードやフォーム、ナビゲーションなど多彩な要素が用意されており、ピクセル単位で洗練されたデザインが特長です。

https://t.co/MQOiJkUJA5

[rundezv @takamosooo]

▼ ueberdosis/tiptap

ProseMirrorをベースにしたヘッドレスなWYSIWYGエディタで、Vue・React・Svelteなど複数フレームワークに対応しています。TypeScriptで記述され、Markdownショートカット・コラボ編集・画像埋め込み・テーブルなど豊富な拡張機能を提供しています。

https://t.co/NgGVCm5zFo

[rundezv @takamosooo]

▼ gitbrent/PptxGenJS

JavaScriptで標準準拠のPowerPointプレゼンテーションを生成するライブラリです。Node.js、React、Vite、Electron、ブラウザ全般に対応し、テキスト・画像・表・チャート・図形・SVG・アニメーションGIF・YouTube埋め込みなど多彩なスライド要素をプログラムから扱えます。Microsoft PowerPoint、Keynote、LibreOffice、Googleスライド（インポート対応）と互換性があります。

https://t.co/UuNJzKoDu2