Tailwind CSSを使っているなら使いたいTailwind Variants
#TailwindCSS #CSS #Web制作 前回の動画「Tailwind CSS初心者が絶対ハマる落とし穴」の最後にちょっとだけ紹介したTailwind Variantsというライブラリについて話します。今までなぜこれを使っていなかったのか…と公開するほどの便利さ。ぜひ皆さんにも体験してみてほしいです！ Tailwind Variants公式サイト https://www.tailwind-variants.org/ 🛎️ 宣伝 : 本を書きました！ 「コードが動かないので帰れません!」 新人プログラマーのためのエラーが怖くなくなる本です。エラーログの読み方やデバッグの考え方、デバッガを使ったブレイクポイントの活用法を解説しています。 📖 https://www.amazon.co.jp/dp/479818067X ぜひ購入をお願いします！！！！！！！！！！！ 🧵 Z
【jQuery不要】スクロールで画面内・外の要素を制御するJSライブラリ in-view.js | Cntlog
ページスクロールをして、特定の要素がウインドウ内で表示されたタイミングを検知してアニメーションをさせたり、classをつけるといった要望はよくありますね。 以前はjquery.inviewを使っていたのですが、jQueryに依存（1系に）してることもあって、使えるシーンがすくなっていました。 そこで、jQueryに依存しないライブラリで、画面内の要素検知ができるものがあったので紹介します。 in-view.jsはすべてのモダンブラウザとIE9+をサポートしており、現環境ほとんどで利用できます。 in-viewのinstall npmでinstallする方法とダウンロードしたものを読み込む2パターンがあります。 npm install --save in-view 公式サイトには書いてなかったのですが、CDN版もありました。 <script src="https://cdn.jsdelivr
コーポレートサイトでの htmx 実装をデモサイトで試してみよう | htmx | ブログ | a-blog cms developer
2024年2月、JavaScriptライブラリ htmx の発見から始まり、短期間でその可能性に引き込まれ、以下の3つの記事を書きました。
anonymous default export はやめたほうがいいかもね
`anonymous default export` とは名前の通り匿名でデフォルトエクスポートを宣言することです。必ず名前を付与しなければいけない名前付きエクスポートと異なり、以下はすべて有効な構文です。 anonymous default export? anonymous default export とは名前のとおり匿名でデフォルトエクスポートを宣言することです。必ず名前を付与しなければいけない名前付きエクスポートと異なり、以下はすべて有効な構文です。 export default class { constructor(options) { this.options = options; } } export default function () { } export default 1 export default { a: 1 } export default [1, 2,
modal-video.js - 動画をモーダルウィンドウで表示する jQueryプラグインをリリースしました | JavaScript | ブログ | 名古屋のCMS構築・Web制作会社 アップルップル
modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTube、Vimeo、mp4 などを モーダルウィンドウ を開き、より大きく動画を再生できるようにするために作られました。 誰でも自由に利用いただけるように MIT license で GitHub で公開しています。
Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社 アップルップル
htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページの一部を更新することを可能にする JavaScriptライブラリです。HTML属性の拡張により簡単に使用できるようにし、結果として、コードの可読性が向上し、将来のメンテナンスも容易になります。これらの特徴から、htmx はウェブサイト制作の現場での活用が期待されます。 簡潔さとアクセシビリティ: htmx は、複雑な JavaScriptコードを書かずに、HTML 内で直接動的な振る舞いを宣言することを可能にします。これにより、Web開発がよりアクセスしやすく、より理解しやすくなることを意味します。 非同期リクエストの簡易化 : htmx は、Ajaxリクエストを簡単に実装するための属性を提供します。これにより、サーバーへの非同期リクエストを簡単に行い、ページの一部を更新できます。 導入の容易さ :
lazyloadとsmoothscrollを併用するシンプルな方法 | FE-Designer
さまざまなページでユーザー体験を改善するために使えるテクニックとしてレイジーロード（lazyload）とスムーススクロール（smoothscroll）があります。
Debounce と Throttle（JavaScript）
Debounce と Throttle（JavaScript） Debounce と Throttle は一定期間に関数が呼び出される回数を制限することで、パフォーマンスや UX を改善するための手法です。 以下は JavaScript の Debounce と Throttle の使い方に関する覚書です。 関連ページ：JavaScript デコレータ関数 Decorator Function Debounce や Throttle とは リサイズやスクロールイベントなど高い頻度で発生するイベントで、イベントが発生する度にコールバック関数を呼び出して実行するとブラウザに負担がかかったり、UX 上好ましくない場合があります。 Debounce や Throttle は、一定期間に（コールバック）関数が呼び出される回数を制限するための手法で、不必要な関数の実行を制御することができます。 例えば
スクロールを制御しよう | JavaScriptレシピ集 | CookBook
スクロールバーとは スクロールとは、表示領域より大きなコンテンツを表示する際にコンテンツを移動（スクロール）しながら全体を閲覧させるためのツールの総称です。 HTMLの場合、ドキュメント全体に対するスクロールバーと特定要素におけるスクロールバーの２種類が存在します。 下記例では上下のみですが、左右に対するスクロールバーも有ります。 スクロールバーの表示条件は？ Webページでスクロールバーが表示されるためには、いくつかの条件があります。 表示領域より表示するコンテンツの大きさが大きいこと。cssのoverflowプロパティがscrollまたはautoに設定されていることです。 また、overflowの設定が有効になるためには、親要素（ブロックレベル要素）に高さ (height または max-height) を設定（縦スクロールの場合）するか、 white-space を nowrap に
imagesLoaded
imagesLoaded JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded. imagesLoaded on GitHub 4,500 Edit this demo or vanilla JS demo on CodePen. Just to keep things interesting, there’s a 10% chance of adding a broken image. Install Download imagesloaded.pkgd.min.js minified imagesloaded.pkgd.js un-minified CDN <script src="https://unpkg.
【ajaxzip3】郵便番号入力後にフォーカスを自由に移動させる方法 - Qiita
ajaxzip3とは 郵便番号から住所を引っ張ってきてくれる便利なライブラリです。 使い方などはこちらの記事にまとまっていましたので、実際に使ってみたい方はこちらを参考にすると良いと思います。 https://qiita.com/macer_fkm/items/2fbeceb0e1d93ad4a1f1 ちなみに、現在はyubinbangoというライブラリを推奨しているようです。 https://github.com/yubinbango/yubinbango 背景 ajaxzip3で郵便番号を入力した後のフォーカスを市区町村の入力場所ではなく、番地の入力場所に移動させたいという状況になりました。 ソースコードはこんな感じです。 <!DOCTYPE html> <html> <head> <script src="https://ajaxzip3.github.io/ajaxzip3.js"
Anime.js | JavaScript Animation Engine
All-in-one animation engine. A fast and versatile JavaScript library to animate the web.
Introduction | 中上級者になるためのJavaScript
Share on Twitter Share on Google Share on Facebook Share on Weibo Share on Instapaper 中上級者になるためのJavaScript この記事は、敷居が低いもののなかなか中上級に進めず困っているJavaScript学習者の方を対象としています。よりJavaScriptに対する理解を深める際に気を付けるべき事柄、知っておくべきキーワードの提供をゴールとします。 「クロージャーについてもっと知りたい！」「カリー化なるものがあるのか、知らなかった！」といったきっかけになれば幸いです。 JavaScriptは書ける人が多く、ベストプラクティスが整ってあるものの、逆に間口が広すぎてコピペで済ませてしまったり（場合によってはしょうがないことですが）基礎を学ぶ機会がなくなんとなく現場に出てしまったりすることがありますので、ぜ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【JavaScript】時間操作ライブラリ比較(Dateオブジェクト、Moment、Luxon、js-Joda、day.js、date-fns、Temporal) | プログラミングマガジン
セレクトをリッチにするJSライブラリ「Tom Select」 | KumaTechLab
Chart.js
Paper.js
GitHub - cferdinandi/smooth-scroll: A lightweight script to animate scrolling to anchor links.
Popper - Tooltip & Popover Positioning Engine
Feature-Policy: fullscreen - HTTP | MDN