ブラウザで長いループや、重い処理をともなうループを回したいとき、同期的にJavaScriptを実行するとメインスレッドがブロックしてしまうので、ちょっとずつ細切れに分割して実行したい、ということがある。 昨日久しぶりに書いたら新たなパターンと出会ったので、これまでにどう書いてて今回どうなったかメモ。 setTimeoutする 以前(10年前とか)はこんなのをよく書いていた。 itemsがでかいArrayで、console.logがすごく重い処理だとして読んでください。 function iterateHeavyTask(items) { const startAt = new Date(); while (items.length > 0 && new Date().getTime() - startAt < 10) { console.log(items.shift()); } if (
［注意喚起］ブラウザ互換ライブラリ「Polyfill.io」がドメイン名ごと中国企業に売却、CloudflareとFastlyが代替となる配信を開始
［注意喚起］ブラウザ互換ライブラリ「Polyfill.io」がドメイン名ごと中国企業に売却、CloudflareとFastlyが代替となる配信を開始 開発者がブラウザの互換性を気にすることなくWebアプリケーションを開発するためのJavaScriptライブラリ「Polyfill.io」が、ドメイン名ごと中国企業に売却されたことを受けて、CloudflareとFastlyが急きょライブラリをフォークし、安全が確認されているコードの配信を開始しました（Cloudflareの発表、Fastlyの発表）。 Polyfill.ioをドメインごと中国企業に売却 Polyfill.ioはAndrew Betts氏が開発したオープンソースのJavaScriptライブラリです。Polyfill.ioを組み込むことで、ブラウザのバージョンを気にすることなくWebアプリケーションの開発を行うことができる便利なラ
先日の記事（2022年、注目しておきたいCSSの新機能のまとめ）の中でもすぐに使えたら便利な機能の一つが、コンテナクエリです。 コンテナクエリがすべてのモダンブラウザで動作するポリフィルがGoogleからリリースされたので、紹介します。 A New Container Query Polyfill That Just Works by Chris Coyier 今まではメディアクエリを使用していましたが、ビューポートベースのメディアクエリでは限界が見えてきました。そこでコンテナクエリの登場です。コンテナクエリは、親コンテナのサイズに応じて要素のスタイルを設定できます。 たとえば、コンポーネントを1カラムに配置する時と2カラムに配置する時、そしてサイドバーに配置する時それぞれに適したスタイルを与えることができます。詳しくは、以前の記事をご覧ください。 CSS コンテナクエリの基礎知識と便利な
修正(2021/06/17) ツイッターでご指摘をいただき、一部修正を加えました🙇 はじめに 2021/06/16 未明に Next.js の新メジャーバージョン v11 がリリースされました。 ほぼ同じタイミングで Next.js Conf (Next.js のカンファレンス)が開催されており、Zenn ユーザの中にはリアルタイムで見ていた人も多いのではないでしょうか。 Core Web Vitals をはじめとした 、パフォーマンス改善に関する話題や新機能が多く、Google のチームが Next.js で最適化のトライを行いながら、Nuxt や Angular に反映していくというのが印象的でした。最先端の取り組みが、普段メインで使用している Next.js で行われているということで、非常に嬉しい限りです。 Next.jd 11 全体のまとめは今後誰かが書いてくれると思いますので
ウェブブラウザのバージョン間の違いを無効化するJavaScriptライブラリ「Polyfill.io」が、2024年2月のプロジェクトオーナー変更後、マルウェアが混入されてサプライチェーン攻撃に利用され、10万以上のサイトに影響が出ています。 Polyfill supply chain attack hits 100K+ sites https://sansec.io/research/polyfill-supply-chain-attack 「Polyfill.io(polyfill.js)」はアンドリュー・ベッツ氏が開発したJavaScriptライブラリです。ウェブブラウザのバージョン間で機能の違いがあると開発時に苦労しますが、Polyfill.ioを利用すれば、新しいバージョンにしかない機能を古いバージョンで利用できるようになるため、バージョンの違いを気にすることなく開発を進めること
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
core-jsとは core-jsをみなさんご存知だろうか。直接は知らなくてもbabelでpolyfillを当てているなら間接的にお世話になっているはずだ。 メンテされない そのcore-jsは当分メンテされないらしい。というか2020/01/14を最後にパタッと活動が途絶えている。 なんとこの巨大projectはzloirockというたった一人によってメンテされてきた。 ここで彼のコメントをいくつか引っ張っておこう。 https://github.com/zloirock/core-js/issues/548#issuecomment-494112872 2019年5月21日 4:06 JST Dear @jpike88! Almost 5 years almost every day I spend some hour for maintenance core-js. It's not
by Sansec Forensics Team Published in Threat Research − June 25, 2024 The new Chinese owner of the popular Polyfill JS project injects malware into more than 100 thousand sites. Update June 28th: We are flagging more domains that have been used by the same actor to spread malware since at least June 2023: bootcdn.net, bootcss.com, staticfile.net, staticfile.org, unionadjs.com, xhsbpza.com, union.m
この記事ははてなエンジニア Advent Calendar 2020 5日目の記事です。4日目は id:syou6162 さんで、数字のバラ付きを考慮して意思決定する技術でした。 qiita.com developer.hatenastaff.com こんにちは、id:mizdra です。今年新卒としてはてなに入社し、WebアプリケーションエンジニアとしてGigaViewerというマンガビューワーを作っています。 最近のはてな社内では「tech-future」という、様々な技術を見つめ直すワーキンググループを運営しています。この会では、ある技術についての要点をまとめるだけでなく、その技術にまつわる歴史を紐解いて整理し、その上で全体を俯瞰して将来その技術がどういう方向に向かうのかを議論し、未来を予測する手がかりを作る、といった挑戦的な取り組みをしています。既に弊社のエンジニアから「tech-
ABEMA Web で Polyfill のコードをモダンブラウザ向けに 99% 削減した話 | CyberAgent Developers Blog
これらを踏まえて polyfill-library を使って Polyfill の出し分けをすることが最適解だと確信しました。 Polyfill の出し分けの実装方法 最初に実装したコードの全体像を見せると次の通りになります。それぞれの変数や関数についての説明は後ほどおこないます。 import crypto from "crypto"; import { Response, Request } from "express"; import { getPolyfillString } from "polyfill-library"; import polyfillLibraryPackageJson from "polyfill-library/package.json"; const FEATURES_OPTION = { flags: ["gated"] }; const FEATUR
どのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリ・「DFlex」 - かちびと.net
DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。 他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要素が多い程、累積レイアウトシフト(CLS)が多くなり、結果としてレイアウトのズレを発生させ、UXに影響が出る、というものをGoogleがCore Web Vitals(コア・ウェブ・バイタル)の3つの指標の1つとして提唱しました。 CLS CLSは上のようにテキストを確認してボタンを押そうとしたら、遅れて表示されたコンテンツによりボタンの位置がズレ、本来押すつもりのなかったボタンを押してしまう、といったもので、GoogleのPageSpeed Insightsでも数値化され評価の対象として位置づけられています。 そのレイアウトシフトを最小限に抑える事が出来るD&Dライブラリとし
core-js/docs/2023-02-14-so-whats-next.md at master · zloirock/core-js
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
TL;DR 2024/06/26 実害が出ているようです、polyfill.ioを利用している場合は直ちに利用を止めましょう。 GIGAZINE: JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響 Codebook: Polyfill.io使ったサプライチェーン攻撃でサイト10万件以上に影響 polyfill.ioから配信されるスクリプトが汚染される環境下にあり、危険な可能性があります。利用している方がいらっしゃいましたら外しておくことをおすすめします。または安全なバージョンのものがCloudflareとFastlyから利用できるので、ドメインをpolyfill-fastly.netやpolyfill-fastly.ioに変更して利用しましょう。 背景 自社で使用しているマーケティングプラットフォームサービスで作成したWebページをGo
よくある質問でよく利用するアコーディオン機能をCSSアニメーションとHTMLで実装する方法です。JavaScriptは不要。IEのみ非対応なのですがPolyfillを使って機能させることができます。
Web開発者たちにとって、ブラウザー間の互換性問題は長年にわたり頭痛の種となっています。そんな中、Polyfill.ioは多くの開発者にとって救世主のような存在でした。 しかし、この度Polyfill.ioは中国企業のFunnullに売却されたことが明らかになり、開発者コミュニティーに波紋を広げています。 この記事では、Polyfill.ioの売却について、またWeb開発者が取るべき対策について詳しく解説します。 Polyfill.ioとは？ 画像：Polyfill.ioの公式サイト Polyfill.ioは、ブラウザー間の互換性問題を解決するためのサービスです。 具体的には、各リクエストのUser-Agentヘッダーを読み取り、リクエストを送信しているブラウザーに適したポリフィルを提供します。 ポリフィルとは、古いブラウザーで新しいブラウザーの機能をエミュレートするためのコードのことです
ライブラリ作者におすすめしたいBabelの新機能 babel-plugin-polyfill-corejs3 | Wantedly Engineer Blog
Babelの新しいpolyfill用プラグインであるbabel-polyfillsが2022年4月に脱experimentalを果たしていました。そこで本稿では、Babelにおいてpolyfillがどのように扱われていたかを振り返りながら新しいpolyfill pluginを紹介します。 注意: Babel 7.4で非推奨化された@babel/polyfillとは別物です。 何が問題だったのか?babel-polyfillsのREADMEと元issueにも説明がありますが、本記事ではあらためて日本語で説明したいと思います。端的に言うと今までは以下の要件を両立できませんでした。 ソースコード中で使われている機能のpolyfillだけを注入する。ターゲットブラウザを指定して、必要なpolyfillだけを注入する。副作用のない形でpolyfillを注入する。babel-polyfillsはこれら
ECMAScript Record & Tuple polyfill はどのようにして実装されているのか | Wantedly Engineer Blog
Record & Tuple とはRecord & Tuple は ECMAScript (JavaScript) に対する提案段階の機能で、構造化データのためのプリミティブ型を提供するというものです。RecordはObjectのプリミティブ版、TupleはArrayのプリミティブ版にあたります。 プリミティブとオブジェクトJavaScriptにおける値はプリミティブとオブジェクトの2種類に分けられます。 プリミティブはイミュータブルで、値の同等性にもとづいて比較されます。既存のプリミティブとして、null, undefined, number, string, boolean, bigint, symbol が存在しています。オブジェクトはデフォルトでは書き換え可能で、参照の同一性にもとづいて比較されます。これまで、複数のスカラー値をまとめて構造化データとして扱うには、オブジェクト (主
はじめに この記事は 個人的なアドベントカレンダー2021 の1日目です。 次回： postcss-preset-env PostCSS のプラグイン postcss-preset-env は、未来の機能候補として実際に議論されている記法や機能を Polyfill するプラグインをまとめたものです。 postcss-preset-env では、 custom property (var(--some-value)) や nesting rules (ネストしたセレクタ) といった Sass などのプリプロセッサでお馴染みの機能から、ニッチだが便利な機能まで、さまざまな策定中の機能を取り入れることができます。 また、いずれも策定中の機能であるため、将来、CSSの機能として組み込まれる可能性がある機能も含まれており、より標準に近い形で新機能を使えます。 （策定中のため、書き方が変わったり、機能
これでSafariにも実装できる！ スクロールをトリガーにしたアニメーションのポリフィル -Scroll-timeline Polyfill
先日の記事で、CSSでの実装が大きく変わる！ Scroll-driven Animations スクロールをトリガーにしたアニメーションを実装する方法を紹介しました。Chrome 115から実装された新機能ですが、ネックはSafariのサポートだと思います。 Scroll-driven Animationsの仕様で定義されているScrollTimelineとViewTimelineのポリフィルがリリースされ、これでSafariでも動作します。 Scroll-timeline Polyfill -GitHub まずは、Scroll-driven Animationsの簡単な紹介を。 スクロールをトリガーにしたアニメーションは、最近のWebサイトでよく見かけます。Appleの新製品ページもスクロールをトリガーに要素をアニメーションで表示しますね。 実装にはJavaScriptを使用したり、かな
Polyfill is a popular tool for enhancing browser capabilities. Many users access it by linking to the polyfill.io service, which has recently changed ownership to a new party. In order to ensure that everyone can maintain reliable and trusted access to Polyfill features, we have identified a few alternatives: First, Fastly is offering polyfill-fastly.net and polyfill-fastly.io as a free, drop-in r
Webpack 5 Headache
Webpack no longer automatically polyfills Node.js APIs. This is a huge breaking change and will inconvenience both users and package maintainers. Most packages on npm are mainly made with Node.js in mind. However, thanks to automatic polyfilling, most of them have for years worked fine in the browser too. The problem is that Webpack created convenience by automatically polyfilling and then now sud
polyfill.io now available on cdnjs: reduce your supply chain risk | The Cloudflare Blog
polyfill.io now available on cdnjs: reduce your supply chain risk2024-02-29 Polyfill.io is a popular JavaScript library that nullifies differences across old browser versions. These differences often take up substantial development time. It does this by adding support for modern functions (via polyfilling), ultimately letting developers work against a uniform environment simplifying development. T
GitHub - niksy/node-stdlib-browser: Node standard library for browser.
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
GitHub - evanw/polywasm
This polyfill is used as a fallback WebAssembly implementation for esbuild's online playground. You can use these links below to compare the playground with this polyfill enabled vs. disabled: Try esbuild playground's with this polyfill enabled Try esbuild playground's with this polyfill disabled The playground shows off esbuild, which is a JavaScript code transformation tool (among other things).
JS で新しく提案されている日付計算の API である temporal。 プロポーザルとしてはまだ stage 2 だが、先日の TC39 のスライドですでに仕様やポリフィルは stable と言っていい状況（？）という文言が見えたので、使ってみる 実は筆者はすでに一度（2020年8月） temporal にフィードバックのアンケートを送ったことがあるが、そのときは新規プロジェクトでの使用を想定したもので、既存のを移行するとどのくらいつらいかはあまり考えていなかった。 また、今 temporal-polyfill を見たら当時からさらに API が変わっていた。 具体的には、現在時刻をタイムゾーン指定で生成するためのメソッドである Temporal.now.zonedDateTimeISO() は私がアンケートを送った頃にはなかったし、Duration に負の値を取れるというのも当時は確
モーダルは、ウェブアプリケーションでよく使われる機能であり、実装する事が多い。 便利だし、利用者にとっても見慣れた UI なので導入しやすい。 だが、ブラウザや HTML には、モーダルという要素は用意されていない。 似て非なるものとしてalertがあるが、これはモーダルとして開発者が求めているものとは、多くの面で異なる。 そのためなのか、モーダルを実現するためのライブラリは多数公開されている。 だが個人的な方針として、依存ライブラリはあまり増やしたくない。 かといって自分で開発するのもそれなりに手間がかかる。 そこで、HTML 5.2 で標準化されたdialog要素を使うことにした。 標準化された機能なら、知識やノウハウが陳腐化しにくく、第三者が作ったライブラリより採用しやすい。 そう考え、React アプリのモーダルをdialog要素で実装することにした。 だが、DOM を操作するため
State and governance of the project? · Issue #767 · zloirock/core-js
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
babel 環境における Polyfill のビルド最適化と async-await の扱い - blog.euxn.me
リポジトリ euxn23/babel-and-polyfill-sample 想定読者 Babel を使っているが、 Polyfill がいまいちわからない方 Polyfill は使えるが、より最適なビルドを生成したい方 @babel/polyfill が非推奨になったことを受け現在の推奨実装を知りたい方 Polyfill とは 例として、以下の Promise を使ったコードを、 @babel/preset-env を使用して IE11 向けにビルドします。 input const main = () => { Promise.resolve().then(() => console.log('then')); } main(); output "use strict"; var main = function main() { Promise.resolve().then(functi
GitHub - nuxodin/dialog-polyfill: "insert and thats it"-dialog-polyfill
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
Explicit Resource Management: Exploring JavaScript's and TypeScript's new feature | iliazeus
Explicit Resource Management: Exploring JavaScript's and TypeScript's new feature 2023-11-13 en CC BY-SA 4.0 read in russian One of my favorite new features of JavaScript and TypeScript is explicit resource management. It brings new syntax, using foobar = ..., that enables RAII, reducing boilerplate when managing the lifecycle of various resources. In this article, I will explore this feature as i
JSer.info #683 - Parcel v2.12.0がリリースされました。 Parcel v2.12.0 Bunと同様の仕組みとして、Import Attributesを使ったmacroに対応しています。 JavaScript Macros in Bun | Bun Blog ブラウザ上で動作するREPLを公開、bundleにもLightning CSSを使うように変更されています。 その他にはメモリ使用量を52%改善、書き込みのパフォーマンスの改善なども行われています。 先週の記事で polyfill.io がFunnull CDN(方能CDN)を運営するFunnull(南京妙彩文化传播有限公司)に買収されたことをお伝えしました。 その後、FastlyやCloudflare(cdnjs)が polyfill.io の代用サービスとして、https://polyfill-fast
A New Container Query Polyfill That Just Works | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There is now a polyfill for Container Queries that behaves as perfectly as a polyfill should: You conditionally load it when you detect the browser doesn’t support Container Queries.You write CSS as you normally would, including current-spec-compliant Container Queries syntax code.It just wo
GitHub - jsxtools/cqfill: Polyfill for CSS Container Queries
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
Automatically replacing polyfill.io links with Cloudflare’s mirror for a safer Internet
Automatically replacing polyfill.io links with Cloudflare’s mirror for a safer Internet2024-06-26 polyfill.io, a popular JavaScript library service, can no longer be trusted and should be removed from websites. Multiple reports, corroborated with data seen by our own client-side security system, Page Shield, have shown that the polyfill service was being used, and could be used again, to inject ma
lugeは高速かつシンプルで使いやすいJavaScriptアニメーションライブラリです。プラグインを追加して拡張する事も可能です。 読み込むだけでhtmlタグに自動でデバイスやブラウザのclassも付与されるので異なる環境での挙動の微調整等もしやすくなっています。 <link rel="stylesheet" href="luge.css"> <script src="luge.js"></script> 使い方も簡単です。上記のようにファイルを読み込んで指定されたカスタムデータ属性を付与する、といった流れで実装出来ます。ただし、CSSは組み込みのアニメーションが不要なら読み込む必要はないそうです。 サイトプリローダー、スクロールに応じたアニメーション表示、ページ遷移のエフェクトなど、よく見かけるアニメーションのあれこれを管理できるのでアニメーションに時間を取られたくない開発者の方にお勧め
この解決策を教えてくれた @about_hiroppyさん、ありがとうございます。 起きていた問題 少し前に Zenn にこういう質問を立てました。（こいつ質問サービスとして使ってやがる・・・） preset-env 経由で polyfill を入れると react が import されなくなる この質問は、IE 対応をするために @babel/preset-env と useBuiltin を使うと、ビルド時に react, react-dom の依存解決ができなくなってしまうものです。 IE 対応のための polyfill は babel を使うと簡単に導入できそうですが、 module.exports = { presets: [ [ "@babel/preset-env", { useBuiltIns: "usage", corejs: 3, }, ], [ "@babel/pr
GitHub - jimmywarting/native-file-system-adapter: File system, based on the spec reference implementation
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
Supply chain threats are growing. Most concerningly, it seems more and more like we’re dealing with nation level threats taking over small unmaintained open source projects. Once again, I’ve got to start by talking about Tidelift being the only company focusing on the real problem here - helping companies treat maintainers like the contractors/vendors they are. If maintainers had any financial ben
GitHub - WICG/inert: Polyfill for the inert attribute and property.
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
GitHub - SukkaW/nolyfill: Speed up your package installation process, reduce your disk usage, and extend the lifespan of your precious SSD.
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript 長いループ 分割 - hitode909の日記
CSSの新機能コンテナクエリのポリフィルがこれほど使いやすく、Googleから提供されたことは素晴らしい
【Next.js 11】next/script には JavaScript の基本がつまっていた
JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響
Web Speed Hackathon Online 出題のねらいと解説
core-jsがメンテされていない理由→プロジェクトは継続する - Qiita
Polyfill supply chain attack hits 100K+ sites
polyfill を深堀りする - mizdra's blog
polyfill.ioを使うのは危険かもしれない(危険だった) - Qiita
アコーディオンをCSSアニメーションとHTMLで実装する | Pulp Note
Polyfill .ioが中国企業に売却 背景と対応策は？ - ろぼいんブログ
PostCSS で先取りする、未来の CSS 7選
New options for Polyfill.io users
moment.js を temporal に移植するのはどのくらいラクか or 大変か
React アプリのモーダルを dialog 要素で実装する - 30歳からのプログラミング
2024-03-05のJS: Parcel v2.12.0、`polyfill.io`の代用、express 4.18.3
高速かつシンプルで使いやすいJavaScriptアニメーションライブラリ・「luge」 - かちびと.net
babel/preset-env で polyfill するとビルドに失敗する問題の解決
Understanding the Polyfill Attack (Polykill)
media.monex.co.jp
diamond.jp
yui2.px.ebb.jp
gentosha-go.com
gentosha-go.com
yuri5.ht.gob.jp