背景画像遅延読み込みスクリプトの無料ダウンロード
CSSで設定する背景画像(background-image)を遅延読み込みさせるスクリプトを無料でダウンロードできます。 スクリプト名はそのまま「背景画像遅延読み込みスクリプト」としておきます。 WordPressのような動的なページだけでなく、HTMLとCSSだけでできているような静的なページにも簡単に組み込めるようになっています。 現在の最新バージョンは2023年4月25日公開の1.0です。 参考ページ：プログラムをアップデートするの際の思想について 各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。 機能の概要 その他の特長 背景画像遅延読み込みスクリプトのサンプルとダウンロード 使い方の説明(動作確認方法) 既存サイトへの組み込み方法 imageフォルダとその中にある画像について 注意点 サポートに関して カスタマイズに関して
ユニウェブ - ウェブアクセシビリティをユニウェブで
ウェブアクセシビリティとは 年齢的・身体的条件に関わらず 全ての人が平等に ウェブサイトを利用できる ウェブサイトの自動解析・修正、充実したアクセシビリティ機能など ユニウェブはウェブサイト訪問者のお困り事を解決する豊富な手段を揃えています。
近年のWeb開発においてjQueryの利用をやめるべき理由 | 零弐壱蜂
jQuery が広く使われるようになった理由jQuery が広く使われるようになった理由の 1 つに、クロスブラウザの互換性問題があった。jQuery はクロスブラウザで動作するため、開発者はブラウザ毎の互換性問題を意識する必要が薄くなった。また、jQuery の構文は初心者でも使いやすいため多くの開発者が利用し、コミュニティが発展した。これによって、jQuery プラグインやドキュメントが豊富に提供されるようになった。 jQuery の登場とほぼ同時期に、Prototype.js もその役割を担っていた。しかし、jQuery は Prototype.js よりも広く採用され、トレンドが移り変わった経緯がある。 シンプルな構文 両者とも当時のプレーンな JavaScript に比べシンプルな構文を持っていたが、Prototype.js より jQuery の構文が受け入れられた。パフォーマ
jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96％のレベルに達しています（出典：caniuse.com）。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
JavaScriptで電話番号のバリデーション＆自動フォーマット - Qiita
Google様のライブラリ使いましょう 電話番号のバリデーションを行う場合、 ググると（JSの場合は特に）正規表現で一生懸命頑張ってる記事ばかりヒットしますが、 天下のGoogle様がlibphonenumberなるライブラリを提供してくださっておいでです。 https://github.com/googlei18n/libphonenumber 自分で正規表現書いても辛いだけなので、大人しくこれ使いましょう。 どんだけすごいかはこのスライドが参考になります。 電話番号を扱う技術 by Shota Iguchi Closure Toolsが分からん・・・ 大人しくこれ使いましょうと言ったけど、実はとてもとっつきにくいです。 JS版はClosure Toolsを使ってコンパイルしなければ動かないから。 https://github.com/googlei18n/libphonenumber/
Tokyo Tower Gigapixel Panorama
Copyright: Jeffrey Martin Type: Spherical Resolution: 150 Gigapixel Uploaded: September 2012 Updated: September 2012 About this Gigapixel This is a 150-gigapixel image shot from the top of the Tokyo Tower. It was shot in September 2012 with the kind assistance from the management of the Tokyo Tower. The trip to Tokyo was sponsored by Fujitsu Technology Solutions, and this panorama was rendered and
Sentryをちゃんとセットアップしたら、想像以上にできるやつだった話（フロントエンドのエラー監視） | エスマット
2020-05-29Sentryをちゃんとセットアップしたら、想像以上にできるやつだった話（フロントエンドのエラー監視） はじめにこんにちは。エンジニアリング事業本部の@1010realです。 今年初めからスマートショッピングに入社して、既存サービスの管理画面のリプレースや運用・新規機能開発におけるフロントエンド開発を全般的に行っております。 今回はWebフロントエンド開発における本番環境のエラートラッキング及びそのバグフィックスについて、Sentryを用いて効率的に行う方法を紹介しようと思います。 内容としては、Webフロントエンドに限らず、バックエンドやアプリなど、Sentryが対応しているPlatformであれば、参考にできる内容となっています。 目次はじめに目次Sentryについてなぜこの記事を書こうと思ったかちゃんとセットアップってどういうこと？導入手順 最初のエラーをトラッキン
GitHubでスターが多いWYSIWYGエディタ（2019年11月） - Qiita
はじめに 2019/11時点でGitHubにあるWYSIWYGタグでスターが多いライブラリを調べてみます。 Quill 概要 GitHub https://github.com/quilljs/quill Demo https://quilljs.com/ ・テーブルの作成はできないようです(ver2.x用にテーブル追加のプラグインはある） ・クリップボードを経由して画像のアップロードが可能です。 ・highlight.jsを使用してコードブロックのハイライトが可能のようです 対象ブラウザ IEは非推奨のようです。 ライセンス BSD 3-clause サンプル 1.3.7のサンプル <!doctype html> <html> <head> <meta charset="utf-8"> <title>Test Quill</title> <!-- highlight.js を使う場合はq
【保存版】初心者向け実務で使えるGoogle Apps Script完全マニュアル
みなさん、こんにちは！ タカハシ(@ntakahashi0505)です。 Gmail、Googleカレンダー、スプレッドシート、ドキュメント、フォーム、翻訳、などなど…Googleは仕事に役立つ数多くのサービスを提供してくれています。 もちろんGoogle検索もありますね。 Google Apps ScriptはGoogleが提供しているJavaScriptベースの開発環境。 冒頭に紹介したサービスをはじめ数多くのGoogleサービスをプログラミングにて操作をすることができる魔法のようなシロモノです。 当ブログではあれやこれやのGoogle Apps Scriptのテクニックについてお伝えしていますが、全くの初心者ではどこからどのように習得していいのか迷ってしまうかも知れません。 このページでは【初心者がGoogle Apps Scriptを使って何かしらかの便利ツールやシステムを作れるよ
GitHub - mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. Doc-Rot is a Catch-22 that Mermaid helps to solve. Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams
ローカルストレージに保存されたデータをChrome上で確認する方法
ローカルストレージに保存されたデータをChrome上で確認する方法。 JavaScriptでlocalStorage.setItemやsessionStorage.setItemなどを使って保存したデータはブラウザChrome上で確認や変更、削除などが出来ます。今回はローカルストレージにデータが保存されているものとして解説します。 まずは、サイト上で右クリックして検証を選択。 Applicationタブを選択する。 注）タブ名にElements, Console, Sourcesなどと表示されているはず。Applicationという項目は隠れている可能性があるので≫をクリックして隠れたタブを表示してApplicationを選択する。 Storageという項目にLocal StorageやSession Storageという項目があるのでクリック。階層以下にアップロード先のURLが表示されて
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
ローカルストレージに簡単な解決策はない
原文：“There is no simple solution for local storage” (on March 5, 2012 by Chris Heilmann) 要約：私たちは良いデータストアとして localStorage を推奨するのをやめなければならない。パフォーマンスがひどく損なわれるからだ。しかし残念なことに、代わりとなるものはまだ完全にサポートされておらず、また簡単に実装できるものでもない。 Web 開発において、うますぎる話に出くわすことは常々だ。そういったもののいくつかは良いもので、だからこそそれが「すべて」として目立ってしまい、開発者を使うように仕向けてしまう。しかし、多くの場合、良いと思われていたものはそこまで良いものではない。また、しばらく使ってみてはじめて「間違っていた」と気づかされるものなのだ。 そんなもののひとつに、localStorage がある
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
🍪🍺 on X: "国際犯罪の被害に遭いかけたので注意喚起です！ 海外サイト(WeWorkRemotely)で良さげな案件を探していて、出会ったクライアントとビデオ通話した後「早速今の実装見てみてほしい」という話になりました。もう遅いし明日にして今日は飲むか〜と思っていたら「すぐチェックしてほしい」という連絡が https://t.co/bRhXJkFEGX"
三井物産グローバルロジスティクス
情報学広場：情報処理学会電子図書館
Google Arts & Culture
Art Camera - Google Arts & Culture
Mermaid
[PSG] 株式会社プログラミングシステム社 - Programming Systems Group Inc.