静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
JavaScriptとTypeScriptを共存させ、段階的に移行する方法
某サービスのフロントエンド開発に携わるようになってからずっと考えていることがある。 TypeScriptに移行して、型に守られたい！ ただ稼働しているサービスをいっきにTypeScriptに移行するのは危険で膨大な工数がかかるため、段階的に移行できないかと考えた。 ということでJavaScriptとTypeScriptを共存させる方法をまとめる。 環境は以下のとおり。 webpack@4.0.1 webpack-cli@2.0.9 webpack v3系の場合は不要 typescript@2.7.2 ts-loader@4.0.0 ※ あとでbabel-loaderについて追記予定です！ → 2018/03/23 追記しました 移行前の状態 極小サンプルを使って紹介する。 // src/main.js import { add } from './module' const result
Mac で Chrome のヘッドレスモードを試してみた - 世界のやまさ
Chrome がヘッドレスモードに対応したということなので試してみました。コマンドラインからchromeが扱え、URLのテキスト出力、pdf出力とpng出力が出来ます。 環境 macOS Sierra version 10.12.4 Chrome Canary 手順 次のページの手順をなぞってみました。環境に書いた通り macOS で試しています。Windows はまだ非サポートのようです。 Getting Started with Headless Chrome | Web | Google Developers Chrome Canary を取得する まず一番最初で躓きました。コマンドラインで動かすとエラーが出ました。 pink-poodle:~ nnasaki$ chrome --headless --dump-dom https://www.chromestatus.com
mov2gif - 手持ちの動画をさくっとアニメーションGIFに変換 MOONGIFT
最近、アニメーションGIFを使ってソフトウェアの操作を表現することが多くなっています。YouTubeなどに比べると簡単に、繰り返し見られる動画が作れるのが利点です。その際の素材として、動画から変換するというケースはよくあります。 今回紹介するオープンソース・ソフトウェアはmov2gif、動画をアニメーションGIFに変換してくれるコマンドです。 mov2gifの使い方 mov2gifはCLIなソフトウェアなので、引数として動画ファイルを渡すだけです。他にも幾つかのオプションがあります。 $ mov2gif --help Usage: mov2gif [options] <inputfile> オプション: --optimize Optimization level [デフォルト: 1] --output-file, -o Converted gif file --frame, -f fram
Diff to HTML - 差分をHTMLに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマーであれば差分をよく使うかと思います。基本的にCLIで実行するか、GUIの差分ソフトウェアで確認するでしょう。筆者はCLIをよく使います。 patchファイルの形式でもいいですが、Side by Sideのが見やすいこともあります。そこで使ってみたいのがDiff to HTML、GitのDiff情報をHTMLにしてくれるソフトウェアです。 Diff to HTMLの使い方 Diff to HTMLの表示です。GitHubのものに似ていますね。 変更されたファイル一覧も取れます。 1カラムだけでなく、サイドバイサイドもサポートされています。 Diff to HTMLはGitHubに近いデザインなので、見慣れた使い勝手になるでしょう。オフラインでも使えるのがいいですし、ローカ
pageres-cliで複数デバイスのスクリーンショットを一括作成 - Qiita
pageres-cliをインストールすると、コマンドラインから手軽に複数サイズのスクリーンショットを作成することができる。 レスポンシブサイト作成時の表示確認や、資料作成などに活用すると便利。 必要な環境 Node.js インストール方法 ターミナルから以下のコマンドを実行。
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
5. (それなりに) 正しい認識 'Node.js' === ‘ノンブロッキングI/Oを持つJavascript CLI実行環境' • CLI、Google V8 • シングルスレッド+イベントループ • ノンブロッキングI/O • 高い次元でのモジューラビリティ • リアルタイム (関係ない) 6. どうでもいい知識 正式名称は「Node」です When referring to the software or the project in general, it's Node.js or simply Node. It is a proper noun, so capitalize it. The .js appears with the first use, to disambiguate from other things called "Node", and Node (with
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
