HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。 21日追記 ちょっと誤解が生じているために書き足しますが、Reactのパフォーマンス(及びそれ以外のこと)への批判というのはHTMX固有のものではありません。SvelteやSolidJSといった新興JSフレームワークやRails等の非JS WEBフレームワーク、SSG開発者たち、それからReact開発者たち自身といった多様なWEB開発者たちに共有されている見方です。この記事の最後の方でReact批判記事のリンク集を引用していますが、そういった多様なバックボーンの人た
スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。 スクロール駆動アニメーションを1回だけ実行し、アニメーションの終了フレームに留まらせる実装方法を紹介します。 Run a Scroll-Driven Animation only once by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロール駆動アニメーションを1回だけ実行するコード コードの使い方 なぜ機能するのか デモ はじめに スクロール駆動アニメーション（Scroll-Driven Animations）は、スクロールによって制御されます。上下にスクロールすると、アニメーショ
粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。 こんな悩みがある方に、便利なJavaScriptライブラリを紹介します！ 当記事ではJavaScriptのライブラリYubinBango.jsを利用して郵便番号を入力したら自動で住所を表示するフォームの作り方を解説します。 基本的な使い方からカスタマイズ方法を画像やコードを用いて詳しく解説するので、JavaScriptが苦手な方もこの記事を読めば郵便番号を入力したら自動で住所を表示するフォームを作れるようになります！
はじめに Slickでスライダーを作成した際に、URLパラメータの操作を行いました。スライダー以外のURLパラメータに配慮しながら作成したため、多少ハマりました。Slickの使用方法についてはこちらをご参考に。 サンプルコード <div class="slider-container"> <div class="slider"> <div class="slick-slide"> <img class="slide-img" src="https://hogehoge.jp/images/20190101/xxxxxx.jpg" alt="hogehoge"> </div> <div class="slick-slide"> <img class="slide-img" src="https://hogehoge.jp/images/20190102/xxxxxx.jpg" alt="ho
仕組みとしては、対象外のアイテムに「d-none」というクラスを追加して非表示にしています。このクラス名は自由に変えられます。 既存のソースコードに組み込むときの注意点 絞り込み選択selectタグのname=”ABC”：絞り込み対象data-ABC 絞り込み選択optionタグのvalue=”XYZ”：絞り込み対象data-ABC=”XYZ” 全表示用のvalue値はallで統一する 例）地域で絞り込みたいとき <select class="js-filter" name="area"> <option value="all">全ての地域</option> <option value="東京">東京</option> </select> <div class="js-filter-item" data-area="東京">...</div> 関数呼び出しの最初の引数は「.」不要です。 m
お問い合わせフォームには、レイアウトによって「名前」と「ふりがな」の２つ入力する場合がありますよね。 この場合、漢字を入力したさいに、ふりがなを自動入力したほうがユーザー的に手間がかかりません。 下記みたいに↓ 実はこれ簡単に実装できちゃいます。 それは「jquery.autokana.js」というJavaScriptライブラリを使うこと。 「jquery.autokana.js」とは、ふりがなを自動入力してくれるプラグインです。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ
CSSのスクロール駆動アニメーションを1回だけ実行し、終了フレームに留まらせる実装方法 -runOnce
【超便利】YubinBango.jsを使った住所自動入力フォームの作り方解説 - 株式会社PENGIN
スライダーライブラリーSlickを使って、URLパラメータを操作する - Qiita
バニラなJavaScriptで複数項目対応の絞り込み検索スクリプトを書いてみた
【簡単】jquery.autokana.jsの使い方【ふりがなを自動入力】