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"
Introduction | 中上級者になるためのJavaScript
Share on Twitter Share on Google Share on Facebook Share on Weibo Share on Instapaper 中上級者になるためのJavaScript この記事は、敷居が低いもののなかなか中上級に進めず困っているJavaScript学習者の方を対象としています。よりJavaScriptに対する理解を深める際に気を付けるべき事柄、知っておくべきキーワードの提供をゴールとします。 「クロージャーについてもっと知りたい！」「カリー化なるものがあるのか、知らなかった！」といったきっかけになれば幸いです。 JavaScriptは書ける人が多く、ベストプラクティスが整ってあるものの、逆に間口が広すぎてコピペで済ませてしまったり（場合によってはしょうがないことですが）基礎を学ぶ機会がなくなんとなく現場に出てしまったりすることがありますので、ぜ
JavaScript開発はjsからmjsへ、ES6のモジュールを使って 'use strict' にさよならしよう
TypeScriptもいいですが、試行錯誤の速さ優先で、素のJavaScript好きです。 サーバープログラムをNode.jsで作る書くことが増え、ブラウザ側とも共有したくなった際、モジュール化の手法が異なるのがネックでした。 Node.jsのver13では、ES6のimport/exportが使え、ブラウザもES6(ECMAScript6)対応なので、移行する良い機会。 結論 - 拡張子 js → mjs - HTTPサーバーでの mjs の Content-Type は application/javascript - ブラウザ内のscriptタグには type=module - CLIでの単体テストは process.argv をチェック - "use strict" がデフォルトになったので記述不要！ - ローカル開発時でもwebサーバー必須 ということで、今後の開発は .mjs
Feature PolicyおよびFeature unsized-mediaの導入ガイド - 銀色うつ時間
個人的に注目している Feature Policy というWeb標準の技術と、Feature Policyの中で課せられるルールのうちの1つ、 unsized-media について。 Feature-Policy Feature Policyは、ブラウザ内の機能やAPIの使用可否を開発者に提供する機能。AMPはHTMLのサブセットとして強制的にパフォーマンスの劣化を起こす機能にアクセスできないようにするプラットフォームだが、Feature Policyはそれを通常のウェブサイトで、細やかに制御ができるように設計されている。Cntent Security Policy (CSP)と構文は似ているが、CSPはセキュリティをコントロールするのに対して、Feature Policyは機能をコントロールする。開発者側で機能を明示的に制御することで、大規模サービスでの長期にわたる開発運用や、サードパー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anonymous default export はやめたほうがいいかもね
【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
anime.js
Feature-Policy: fullscreen - HTTP | MDN
Lottie Docs