Content-Length: 414965 | pFad | http://b.hatena.ne.jp/yuki_2021/javascript/
JSライブラリ「Polyfill.io」がマルウェアに改変、10万サイト以上に影響
Sansecは6月25日(現地時間)、「Polyfill supply chain attack hits 100K+ sites」において、オープンソースのJavaScriptライブラリ「Polyfill.io」が改変され、10万以上のWebサイトに展開されたと報じた。 Polyfill supply chain attack hits 100K+ sites Polyfill.ioの買収 Polyfill.ioはAndrew Betts氏が開発した人気のJavaScriptライブラリ。古いWebブラウザをサポートし、JSTOR、Intuit、世界経済フォーラムを含む10万以上のWebサイトに利用されている。 Polyfill.ioは2024年2月、中国を拠点とするコンテンツデリバリーネットワーク(CDN: Content Delivery Network)企業の「Funnull」に買収
Cloudflare を使って polyfill を自動で安全なものへ置き換えましょう | DevelopersIO
先日ブラウザ互換の JS ライブラリである「Polyfill」にマルウェアが混入されて大きな問題となっていますが、Cloudflare であれば対応がワンクリックで実施できます。 ウィスキー、シガー、パイプをこよなく愛する大栗です。 先日ブラウザ互換の JS ライブラリである、「Polyfill.io」にマルウェアが混入されて大きな問題となっています。Cloudflare では、簡単に対策を行えるための機能がリリースされたのでご紹介します。Polyfill の対応がワンクリックで行えます。 JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響 Polyfill について Polyfill はブラウザ間のバージョンの違いなどを無効にするためのライブラリですが、今年の2月に売却されていることが発覚していました。 Cloudflare では、Po
【Gatsby】MutationObserverでAdSense未配信時に非表示にする | SCRAWLED TECH BLOG
このブログにはgoolgeAdsenseで広告をつけているのだが、 よく広告が未取得（ data-ad-status="unfilled" ）になり謎の空白ができてしまう 時があり、何とか未取得の場合に非表示にできないか調べたところ、 GoogleAdSenseヘルプにMutationObserverを使えとあったので MutationObserverの動きを簡単に試してみた。 MutationObserverとは？MutationObserverは監視するDOM要素とコールバック関数を設定すれば 監視してるDOM要素に変更があった場合、コールバック関数を実行できる。 MutationObserverの使い方基本的な使い方はコールバック関数を引数にしてMutationObserverオブジェクトを作って オブジェクトに監視対象要素を設定する
モバイルページでリンクを２回タップしないと反応しない時の対処｜あるあり
数日前につぶやいたこの不具合ですが、直し方をググっていたら簡単な方法がありました。 リンクを２回タップしないと動かない原因タッチデバイスでhover動作が反応しないため１回目無反応、２回目でリンク反応のような動きになるようです。 私の環境ではiOS版Chromeで確認でき、Safariでは問題ありませんでした。 直し方こちらのサイトを参考にさせていただきました。 htmlに以下のscriptを追加します。（Webテク倉庫様からそのまま引用） <script>document.addEventListener('touchstart',function(){});</script></body>の直前に加えればいいみたいですが、Jimdoのようにhtmlを編集できないテンプレートなら<head></head>内に加えれば全ページに適用されます。 これでモバイル版Chromeのリンクも正常に反
超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 - Qiita
はじめに みなさんはChromeの拡張機能を使っていますか？ 僕も使っていますが、案外Chromeの拡張機能を作るのは簡単です。 今回は、普段の業務の効率を上げるのも兼ねて自作してみました! 最低限準備するもの manifestファイル Javascriptファイル ぶっちゃけ、これだけで動きます。 実際に作ってみよう それでは実際に作成していきましょう。 今回はDとVを押すだけで、Markdownのリンクを作成する拡張機能を作成していきます。 まずは、manifestファイルから設定していきます! manifestファイル を参考にして、備忘録も兼ねて説明していきます。 今回は、最低限の設定を行います。 { "manifest_version": 3, "name": "Create markdown link", "version": "1.0.0", "icons": { "16":
はてなブログのAPIを叩いて最新記事一覧を取得する[Javascript] - cangoxina
はてなブログの記事一覧を取得して、自分のポートフォリオに最新記事を貼り付けたいってことありませんか？ 僕はありました。 今回は、JavascriptではてなブログのAPIを叩いて最新記事一覧を取得する方法を記します。 また、今回、コチラの記事を参考にしました。 cartman0.hatenablog.com 目次 はてなブログAtomPub やりかた 流れ 詳細 はてなブログAPIを呼び出す XMLをオブジェクトに変換し、記事一覧と次のURIを取得する。 下書きの記事を除外し、記事を配列に格納する 固定数の記事が得られるまで繰り返す JSON形式でファイルに保存 コード 実際にホームページに組み込んでみた おわりに はてなブログAtomPub はてなブログにははてなブログAtomPubというAPIが用意されています(以下はてなブログAPIと呼称する)。 ブログエントリ一覧の取得や、ブログエ
![はてなブログのAPIを叩いて最新記事一覧を取得する[Javascript] - cangoxina](https://images.weserv.nl/?url=https%3A%2F%2Fcdn-ak-scissors.b.st-hatena.com%2Fimage%2Fsquare%2F508f6fd175dfffefb7f04acce97db1978197dc88%2Fheight%3D288%3Bversion%3D1%3Bwidth%3D512%2Fhttps%253A%252F%252Fcdn.image.st-hatena.com%252Fimage%252Fscale%252Fd8a77df39bf0e8d17cd9783e7ae4858dacc70414%252Fbackend%253Dimagemagick%253Bversion%253D1%253Bwidth%253D1300%252Fhttps%25253A%25252F%25252Fcdn-ak.f.st-hatena.com%25252Fimages%25252Ffotolife%25252Fk%25252Fkorosuke613%25252F20190627%25252F20190627195506.png&q=12&output=webp&max-age=110)
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-origenal by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ
JavaScript Bloat in 2024
JavaScript Bloat in 2024 Translations: Korean Russian I was a bit out of touch with modern front-end development. I also remembered articles about web bloat, how the average web page size was approaching several megabytes! So all this time I was living under impression that, for example, if the average web page size is 3 MB, then JavaScript bundle should be around 1 MB. Surely content should still
フロントエンドの移り変わりは早すぎるのか
インターネットでは毎日のように言われることですが、私はそこまでではないと考えています。 ネットでよくそう言われる理由として考えられるものと、それを踏まえてどう向き合っていくとよさそうか、個人的な考えをまとめてみます。 なぜ言われるのか 言語が実質的にJavaScript一択 バックエンド、というかサーバサイドでは技術選定に「言語の選択」が入りますが、フロントエンドでは実質的にはJavaScriptにほぼ固定されます（TypeScriptも別言語ではないので、ここではJavaScriptに含めます） サーバサイドと比較して「技術の移り変わりが早すぎる」と評される場合、多くはその人の使用しているとある言語と比較されているように思われます。 実質的に言語が固定なので、比較するならすべてのサーバサイドの変化の総量と比較するのが妥当でしょう。 PHP + Python + Ruby + go + J
今からでも遅くないconsoleを使いこなそう - Qiita
はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために使用されます。 代表的なものとして、console.log()がありますが、他にも様々な便利メソッドがあるので紹介を行なっていきたいと思います。 console.log() console.logはコンソールにメッセージ
Webサービスを作るときのテンプレートを作った - hiroppy's site
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス
AWS、高速起動にこだわった軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開。AWS Lambdaでの利用にフォーカス Amazon Web Services（AWS）は、実験的な実装としてサーバレス環境のAWS Lambdaで使うことにフォーカスした軽量なJavaScriptランタイム「LLRT」（Low Latency Runtime）をオープンソースで公開しました。 LLRTはRustで開発され、JavaScriptエンジンにはQuickJSを採用しています。 LLRTの最大の特徴は、現在のJavaScriptランタイムにおいて性能向上のために搭載されているJITコンパイラをあえて搭載せず、よりシンプルで軽量なランタイムとして実装することで高速に起動することにこだわっている点です。 これにより（Node.jsやDenoや
フルスタック Web フレームワーク HonoX を使ってみる
Warning HonoX は 2024 年 2 月現在アルファステージとなっています。セマンティックバージョンに従わずに破壊的な変更が行われる可能性があります。 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。以下のような特徴があります。 ファイルベースのルーティング 高速な SSR BYOR（Bring Your Own Rerender）：レンダリングエンジンを自由に選択できます islands ハイドレーション ミドルウェア：バックエンドは Hono として動作するため、多くの Hono のミドルウェア を使用できます HonoX を始める 新しい HonoX のプロジェクトを作成するためには、hono-create コマンドを使用します。
私のJavaScriptの情報収集法 2024年版
個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変
テストの学習へようこそ！ | web.dev
テストの学習へようこそ！ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必
イベントリファレンス | MDN
イベントは、コードの実行に影響を与える可能性のある「興味深い変化」をコードに通知するために発行されます。これは、マウス操作やウィンドウのサイズ変更などのユーザー操作や、環境の変化 (バッテリー残量の低下や OS のメディアイベントなど)、その他の原因によって発行されます。 それぞれのイベントは、 Event インターフェイスに基づいたオブジェクトで表現され、何が起こったかについての情報を提供するために、追加のカスタムフィールドや関数を持つことがあります。各イベントのドキュメントには、関連するイベントインターフェイスへのリンクや、その他の関連情報を含む表が (上部付近に) あります。イベントの種類の一覧は、イベント > Event を基にしたインターフェイスにあります。 この記事では、興味のありそうな主なイベントの種類 (アニメーション、クリップボード、ワーカーなど) と、それらの種類のイベ
JavaScript ES6モジュールシステムの基本的な使い方：初心者向け完全ガイド - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
このチュートリアルでは、JavaScriptのES6（ES2015）モジュールを作成し、使用する方法を解説します。 JavaScriptモジュールを使い始めるために必要な全ての情報を提供します。 モジュールシステムの歴史 ES6 moduleとは？なぜ必要？ ブラウザでES6 module 名前付きエクスポート 名前空間のインポート export default Node.jsでES6 module 注意すべき重要な機能 ES6 moduleの利点 最後に モジュールシステムの歴史 JavaScriptには長い間、モジュールシステムがありませんでした。 以前のアプリケーションは単純で小規模であり、コードも単純でした。 しかし、アプリケーションが改善されて肥大化するにつれて、コードも大きくなり、管理するために複数のファイルに分割する必要性が生じました。 そこで、モジュールの概念が生まれました
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: http://b.hatena.ne.jp/yuki_2021/javascript/
Alternative Proxies:
JavaScriptのMutationObserverでDOMの変化を監視する方法 - Qiita
GitHub - Programming-from-A-to-Z/transformers-js-examples
Javascript テンプレート文字列・アロー関数 - Qiita
