PWA/WebUI

Photo by Matthew Guay

Litのコード構成
Litは、WebComponents標準に準拠したクラスコンポーネントを実装するフレームワークです。……
Selenium Python
SeleniumはWebアプリケーションをE2Eテストするフレームワークです。 ブラウザをスクリプト操……
Litの特徴
LitはWebのUIコンポーネント開発向けライブラリで、React.jsやVue.jsなどのオルタナ……
HTMLフォームからAPIコールするイディオム
HTMLフォームには主にPOSTのリクエストを投稿する機能があります。 onSubmitイベントにハン……
SVG画像にCSS変数を適用する
SVG画像はベクター画像標準としてWebで広く利用されています。 またSVGはXMLでもあり、加工する……
mwc-ripple
Material Web Componentsの mwc-rippleはインク・リップル効果を提供するWebComponen……
ReactコンポーネントのAPIコール実装
ブラウザアプリケーションは多くの場合、何らかのWebAPIクライアント機能を実装します。 API呼び出……
esbuildからpreact/compatを利用する
preactを単体で利用する場合には、 tsconfig.jsonにjsxFactoryを適切に指定す……
Jestのモック関数実装
Javascriptのモジュール形式はESMに移行しつつありますが、テストツールのJestはESMの……
JestからPostgresを操作する方法
特定のセットアップデータに依存するテストを実行したい場合、テストランナーから直接データベースを操作す……
Denoによるブラウザ向けバンドル
denoでブラウザ向けのプロジェクトをビルドする場合、nodeとの最大の違いはパッケージの依存解決で……
gRPC WebクライアントをESMにビルドする
gRPC WebのクライアントはNode向けのcommonJS形式で出力されますが、commonJSはレガシ……
Preactのprops
PreactはReactとほぼ互換のコンポーネント軽量ライブラリで、propsの基本的な使い方もRe……
コンポーネント内リンクの描画ズレの修正
Javascriptのクライアントサイド・ルーティングを使用している場合、リンク先への遷移時にスクロ……
右端の余白を除去する
CSSのレスポンシブ調整が不調な場合、モバイル表示の右端に原因不明の余白が表示されるケースがあります……
Reselectの使い方
ReduxなどのステートコンテナはReactクライアントのデータフロー整備に不可欠です。しかし、素朴……
Storybookの使い方
StorybookはReactなどのUIコンポーネントをリスト表示して動作確認するツールです。add……
Rollupでwasm-bindgenの出力をバンドル
RustでWeb向けのWebAssemblyを開発するためのデファクトツールはwasm-bindge……
TypeDocの使い方
TypeScriptのドキュメント生成ツールに、 TypeDocがあります。コードの型情報から基礎的な……
Rollupの使い方
ブラウザ向けのJavascriptアプリやライブラリをビルドするためのバンドラーツールとして、web……
ShadowDOMのCSSスタイリング
ShadowDOMはWebComponentsの基礎技術でもあり、Javascriptを活用したコン……
Ramda.jsでカリー化する
Ramda.jsには任意の関数をカリー化する curry()があります。 curried_func = R.curry( (arg) => { some_codes(); } ) といった書式……
Material Web Components リスト
Web向けのマテリアルデザインフレームワークのMaterial Components for Web(MDC)をWeb Compo……
customElementsのアップグレード待ち処理
customElements技術を用いてWebComponentsを作成した場合、利用するHTMLか……
Polymer 3の使い方
WebComponentsを先導してきた PolymerがGoogle I/O 2018でPolymer3.0……
lernaでmonorepo管理
lernaはnpmベースのJavascriptプロジェクトでモノリシックなレポジトリを構築するツール……
dom-repeat: Polymerの階層データ処理
Polymerの dom-repeatを活用することで階層データのテンプレートを構造的に記述できます。……
paper-menu-button
paper-menu-buttonは、Material Designに沿ったWebComponents……
vim8でコード補完（TypeScript）
vim-lspプラグインを利用することで、vim 8でもLanguage Server Protocol経由でコード……
D3.js向けSVG情報
SVGフォーマットの画像は、画像ファイルであると同時にXMLドキュメントでもあり、プログラムで生成す……
Material Components WebのSnackbar
Webアプリケーションの操作完了時には、flash（一時的なメッセージ変数）を通じて通知をフィードバ……
Material Components Webのダイアログ
Material Components Webで拡充されたウィジェットに、ダイアログがあります。ダイアログを活用することで、画面遷移を減……
MJMLでレスポンシブHTMLメール作成
MJMLはHTMLメールを生成する言語＆ツールです。Outlookなど、普及しているメールソフト間で……
React.jsをビルドしてexternals利用
React.jsプロジェクトでは、webpackによるビルド時のデフォルト挙動がReact.jsライ……
ES2015で静的なライブラリ塊をバンドルする
複数のJavascriptモジュール（ファイル）から、単一のライブラリを作りたい場合向けに、webp……
webpackで共有ライブラリを使う&作るビルド設定
webpackをシンプルに導入すると、SPAのようにモノリシックなファイルにバンドルされますが、設定……
React.js / ES2015向けwebpackビルド設定
ES2015やReact.jsでWebアプリ開発する場合、Babelやwebpack（またはbrow……
npm / yarn のライブラリ管理手順
各プロジェクト用ライブラリの一括更新フロー npm package.jsonを置いたディレクトリでnpm ou……
es2015をairbnb流にESLintするための設定
ブラウザをターゲットとするUI開発では、Javascriptの開発ツールが重要になります。 機械的なバ……
SCSSファイルに日本語UTF8
SCSSファイルをcompassでコンパイルする際、日本語が含まれていると、 error scss/app.scss (Line 91 of scss/_settings.scss: Invalid US-ASCII character "xE6") のよ……