[B! JavaScript] sugarteのブックマーク

sugarte id:sugarte

JavaScriptに関するsugarteのブックマーク (51)

コーポレートサイトでの htmx 実装をデモサイトで試してみよう | htmx | ブログ | a-blog cms developer
2024年2月、JavaScriptライブラリ htmx の発見から始まり、短期間でその可能性に引き込まれ、以下の3つの記事を書きました。 JavaScript ライブラリ htmx と a-blog cms は相性が良さそうだ | kazumich.log kazumich.log htmx という JavaScript のライブラリが、2023 JavaScript Rising Stars : Front-end Frameworks で 2位になっているが、日本ではあまり聞かない。私自身も最近知ったばかりだが面白そうな... Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社アップルップル appleple htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページ
sugarte 2024/05/13
htmx

ajax

JavaScript

CMS

HTML
リンク
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, 3]
sugarte 2024/04/11
ESLint

JavaScript
リンク
modal-video.js - 動画をモーダルウィンドウで表示する jQueryプラグインをリリースしました | JavaScript | ブログ | 名古屋のCMS構築・Web制作会社アップルップル
modal-video.js は、弊社が2017年2月にリリースしたビデオコンテンツ再生用のJavaScriptライブラリです。このライブラリは、コンテンツ内に設置された YouTube、Vimeo、mp4 などをモーダルウィンドウを開き、より大きく動画を再生できるようにするために作られました。誰でも自由に利用いただけるように MIT license で GitHub で公開しています。
sugarte 2024/03/12
JavaScript

モーダルウィンドウ
リンク
Ajax 通信を簡単にする htmx の基本と実践 | フロントエンド | スタッフブログ | 名古屋のCMS構築・Web制作会社アップルップル
htmx は、JavaScript のコードを書かずにサーバーとの非同期通信を実現し、ページの一部を更新することを可能にする JavaScriptライブラリです。HTML属性の拡張により簡単に使用できるようにし、結果として、コードの可読性が向上し、将来のメンテナンスも容易になります。これらの特徴から、htmx はウェブサイト制作の現場での活用が期待されます。簡潔さとアクセシビリティ: htmx は、複雑な JavaScriptコードを書かずに、HTML 内で直接動的な振る舞いを宣言することを可能にします。これにより、Web開発がよりアクセスしやすく、より理解しやすくなることを意味します。非同期リクエストの簡易化 : htmx は、Ajaxリクエストを簡単に実装するための属性を提供します。これにより、サーバーへの非同期リクエストを簡単に行い、ページの一部を更新できます。導入の容易さ :
sugarte 2024/02/27
htmx

ajax

HTML

JavaScript
リンク
【JavaScript】時間操作ライブラリ比較(Dateオブジェクト、Moment、Luxon、js-Joda、day.js、date-fns、Temporal) | プログラミングマガジン
sugarte 2023/05/23
momentの後継として date-fns を使ってる人が多い。

JavaScript

ライブラリ
リンク
lazyloadとsmoothscrollを併用するシンプルな方法 | FE-Designer
さまざまなページでユーザー体験を改善するために使えるテクニックとしてレイジーロード（lazyload）とスムーススクロール（smoothscroll）があります。
sugarte 2023/05/23
スムーススクロール

JavaScript
リンク
Debounce と Throttle（JavaScript）
Debounce と Throttle（JavaScript） Debounce と Throttle は一定期間に関数が呼び出される回数を制限することで、パフォーマンスや UX を改善するための手法です。以下は JavaScript の Debounce と Throttle の使い方に関する覚書です。関連ページ：JavaScript デコレータ関数 Decorator Function Debounce や Throttle とはリサイズやスクロールイベントなど高い頻度で発生するイベントで、イベントが発生する度にコールバック関数を呼び出して実行するとブラウザに負担がかかったり、UX 上好ましくない場合があります。 Debounce や Throttle は、一定期間に（コールバック）関数が呼び出される回数を制限するための手法で、不必要な関数の実行を制御することができます。例えば
sugarte 2023/02/15
JavaScript

解説系
リンク
スクロールを制御しよう | JavaScriptレシピ集 | CookBook
スクロールバーとはスクロールとは、表示領域より大きなコンテンツを表示する際にコンテンツを移動（スクロール）しながら全体を閲覧させるためのツールの総称です。 HTMLの場合、ドキュメント全体に対するスクロールバーと特定要素におけるスクロールバーの２種類が存在します。下記例では上下のみですが、左右に対するスクロールバーも有ります。スクロールバーの表示条件は？ Webページでスクロールバーが表示されるためには、いくつかの条件があります。表示領域より表示するコンテンツの大きさが大きいこと。cssのoverflowプロパティがscrollまたはautoに設定されていることです。また、overflowの設定が有効になるためには、親要素（ブロックレベル要素）に高さ (height または max-height) を設定（縦スクロールの場合）するか、 white-space を nowrap に
sugarte 2023/02/15
JavaScript

スクロール
リンク
セレクトをリッチにするJSライブラリ「Tom Select」 | KumaTechLab
sugarte 2023/01/27
JavaScript

ライブラリ
リンク
Chart.js
New in 4.0 Colors plugin Default palette of Chart.js brand colors is available as a built-in time-saving zero-configuration plugin.
sugarte 2023/01/24
ライブラリ

JavaScript
リンク
Paper.js
Source
sugarte 2022/12/01
]

ライブラリ

JavaScript

Canvas

アニメーション
リンク
GitHub - cferdinandi/smooth-scroll: A lightweight script to animate scrolling to anchor links.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
sugarte 2022/12/01
JavaScript

ライブラリ

スムーススクロール
リンク
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.
sugarte 2022/12/01
画像読み込み後に実行

JavaScript

ライブラリ
リンク
Popper - Tooltip & Popover Positioning Engine
Don't mind tech-related ads? Consider disabling your ad-blocker to help us! They are small and unobtrusive. Alternatively, support us on Open Collective!
sugarte 2022/12/01
JavaScript

ライブラリ

tooltip
リンク
【ajaxzip3】郵便番号入力後にフォーカスを自由に移動させる方法 - Qiita
ajaxzip3とは郵便番号から住所を引っ張ってきてくれる便利なライブラリです。使い方などはこちらの記事にまとまっていましたので、実際に使ってみたい方はこちらを参考にすると良いと思います。 https://qiita.com/macer_fkm/it ems/2fbeceb0e1d93ad4a1f1 ちなみに、現在はyubinban goというライブラリを推奨しているようです。 https://github.com/yubinban go/yubinban go 背景 ajaxzip3で郵便番号を入力した後のフォーカスを市区町村の入力場所ではなく、番地の入力場所に移動させたいという状況になりました。ソースコードはこんな感じです。 <!DOCTYPE html> <html> <head> <script src="https://ajaxzip3.github.io/ajaxzip3.js"
sugarte 2022/12/01
JavaScript

ライブラリ

フォーム
リンク
anime.js
Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. Getting started
sugarte 2022/12/01
ライブラリ

JavaScript

アニメーション
リンク
Introduction | 中上級者になるためのJavaScript
Share on Twitter Share on Google Share on Facebook Share on Weibo Share on Instapaper 中上級者になるためのJavaScript この記事は、敷居が低いもののなかなか中上級に進めず困っているJavaScript学習者の方を対象としています。よりJavaScriptに対する理解を深める際に気を付けるべき事柄、知っておくべきキーワードの提供をゴールとします。「クロージャーについてもっと知りたい！」「カリー化なるものがあるのか、知らなかった！」といったきっかけになれば幸いです。 JavaScriptは書ける人が多く、ベストプラクティスが整ってあるものの、逆に間口が広すぎてコピペで済ませてしまったり（場合によってはしょうがないことですが）基礎を学ぶ機会がなくなんとなく現場に出てしまったりすることがありますので、ぜ
sugarte 2022/10/12
JavaScript
リンク
Feature-Policy: fullscreen - HTTP | MDN
sugarte 2022/06/13
Chromeエラー「Feature policy 'Fullscreen' check failed for iframe with origin 'https://www.google.com' and allow attribute ''.」には、該当箇所のgooglemapのiframeタグに「allow="fullscreen"」をつけたらえらーなくなる。

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
sugarte 2022/06/13
.mjs Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec. というエラーには htaccess で AddType application/javascript .mjs 指定する

JavaScript
リンク
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は機能をコントロールする。開発者側で機能を明示的に制御することで、大規模サービスでの長期にわたる開発運用や、サードパー
sugarte 2022/06/13
JavaScript
リンク
1 2 3 次のページ