ウェブブラウザのバージョン間の違いを無効化する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を利用すれば、新しいバージョンにしかない機能を古いバージョンで利用できるようになるため、バージョンの違いを気にすることなく開発を進めること
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
GitHub - dotenvx/dotenvx: a better dotenv–from the creator of `dotenv`
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
← back to blog Mot June 24, 2024 From dotenv to dotenvx: Next Generation Config Management The day after July 4th 🇺🇸, I wrote dotenv’s first commit and released version 0.0.1 on npm. It looked like this. In the 11 years since, it’s become one of the most depended-upon packages worldwide 🌎 – adjacent ubiquitous software like TypeScript and ESLint. It’s an example of “big things have small beginn
javascript オブジェクトからURLパラメーターを生成する
javascriptで、オブジェクトからURLパラメーターを生成するサンプルコードを記述してます。「URLSearchParams」を使用すれば簡単に生成することが可能です。オブジェクトだけではなく配列からも生成することが可能です。
「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方を紹介しました。そして、実装編の前編となる記事では、HTMLメインで実装できるお手軽な実装方法を紹介しました。 実装編の後編となる本記事では、JavaScriptメインに実装する方法の基本事項、およびパフォーマンス考慮についてのポイントを紹介します。 「Lottie=軽い」と思っていませんか？ 一般的にウェブサイトの「軽い」「重い」には、読み込みデータ量の大小を指す場合と、動作負荷でのもたつきを指す場合の2つの意味があります。確かにデータ量的にはLottieは軽いといえますが、実はLottieのアニメーションは表示や動作の負荷的に重くなりがちです。
こんな要望のある方に、必見の情報をご紹介します！ 動的なUIであればjQueryを使うのがカンタンですが、サイト全体のファイルサイズや保守・メンテナンスのことを考えると、脱jQueryしたいなあと思っている方も多いのではないでしょうか？ そこでオススメなのが当記事で紹介する「Luminous」。LuminousはLightboxをカンタンに実装できるJavaScriptライブラリです。 jQueryは使いませんが仕組みが理解できればカンタンにカスタマイズできますので、特にWebサイト制作に使えるかと思います。 フロントエンドエンジニアでもある筆者が実際のコードとともに解説していきますので、最後までお付き合いいただけると幸いです！ Lightboxとは？ Lightboxとは、選択した要素をポップアップで拡大表示できる機能のこと。 一般的なWebサイトやサービスであれば、画像を拡大表示させる
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
New JavaScript Set methods are arriving! Since Firefox 127, these methods are available in most major browser engines, which means you won't need a polyfill to make them work everywhere. This article is a good read for people who are new to Set in JavaScript and are looking to find out how to use these new JavaScript methods. I'll highlight some advantages of using these methods with basic example
新たな関数型プログラミング言語「Gleam」が話題 ー 型安全、並行システムに最適化、ErlangとJavaScriptにコンパイル可能
「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者2万3540人が回答したアンケートの結果をまとめた「State of JavaScript 2023」が公開されました。 回答者の国別分布を見ると米国が16％、フランスが7％、ドイツも7％、イギリス（UK）が5％、ポーランドが4％、ロシアが3％、カナダが3％などで、日本は2％（回答者280人）でした。 ここでは発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドフレームワークはReactが1位、2位にVue.js フロントエンドフレームワークの利用率ランキングはReactで、2位以下を引き離して8年連続1位、しかも利用率を伸ばしています。2位にはAngularを抜いてVue.jsが初めて入り、3位は昨年よりランクも利用率も落としたAngularとなりました
HTMX入門【はじめからそうやって教えてくれればいいのに！】
JavaScriptで小数点付きの計算をしよう
はじめに 記事の修正や追加等はコメントまたはGitHubの編集リクエストをお待ちしております。 また、この記事の内容は私が個人的に開発しているモジュールのコードを抜き出した物です。 特別な処理がいる理由 JavaScriptは計算の際暗黙的に2進数で計算しています。 例えば0.1を2進数にすると0.000110011001100…となります。
Phoenix | Phoenix
A lightweight macOS window and app manager scriptable with JavaScript. You can also easily use languages which compile to JavaScript such as TypeScript. Phoenix aims for efficiency and a very small footprint. If you like the idea of scripting your own window or app management toolkit with JavaScript, Phoenix is probably going to give you the things you want. With Phoenix you can bind keyboard shor
JSer.info #697 - Nuxt 2は2024年6月30日でEnd-of-Life (EOL)となることが発表されました。 Nuxt 2 End-of-Life (EOL) · Nuxt Blog Nuxt 2.xの最終版となる2.18.0が6月末にリリースされる予定となっていて、それ以降はセキュリティアップデートも公式には提供されなくなります。 TypeScript 5.5がリリースされました。 Announcing TypeScript 5.5 - TypeScript TypeScript 5.5では、関数からtype predicatesを推論できるようになり、Array.prototype.filterなどでの絞り込みが簡潔に書けるようになっています。 また、Stage 3のSet Methodsをサポート、JSDocで@import {foo} from "foo"を
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
Luminousが上手く動かない件 - Qiita
ウェブサイトの復旧作業の中で、ギャラリーのページをカスタマイズする作業の中で、jQuery不要なLightboxスクリプトLuminousを知りました。 jQueryを使わないので、小規模のHTMLを手入力で作ったようなウェブサイトのギャラリーページのカスタマイズに最適だと思いました。 でも、下記のコードを設置しても、動かないです。 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/luminous-lightbox@2.3.2/dist/luminous-basic.min.css"> <script src="https://cdn.jsdelivr.net/npm/luminous-lightbox@2.3.2/dist/luminous.min.js"></script> <script> new LuminousG
まじめに Flat Config の移行をするととっても時間かかりますよね？いくつもリポジトリ持ってるとどんどん時間が溶けていきます。 それでも ESLint v9 の新機能は使いたいんだよなーとか、ESLint v9 にしないと dependabot や renovate がうるさくてかなわんとか、という人（それはつまり僕のこと）のための選択肢をいくつか書いてみようと思います。 @eslint/migrate-config使う 物はこれです。 この方法は次のドキュメントに書いてあります。 以下のコマンドでとりあえず Flat Config で動きそうなeslint.config.*が生成されます。 npx @eslint/migrate-config .eslintrc.js # .eslintrc.json 使っている場合 # npx @eslint/migrate-config .e
【Gatsby】MutationObserverでAdSense未配信時に非表示にする | SCRAWLED TECH BLOG
Join our community of software engineering leaders and aspirational developers. Always stay in-the-know by getting the most important news and exclusive content delivered fresh to your inbox to learn more about at-scale software development.
JSON.parseはなぜanyを返すのか
State of JavaScript 2023
It should be clear by now that, for better or for worse, JavaScript is not slowing down. Between server components, server actions, signals, compilers, and more, we're seeing new innovations pop up faster than most of us can handle. The trick to avoiding the dreaded JavaScript fatigue is remembering that you can pick your lane: sure, you can live life on the cutting edge with the early adopters; b
Turborepo 2.0リリースなど: Cybozu Frontend Weekly (2024-06-18号)
こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/6/18 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 feat: Add support for TypeScript config files ESLint の設定ファイルを TS でかけるようにする RFC がマージされました。 TS で設定ファイルを書く場合は読み込む際にトランスパイルする必要があり、これには UnJS のパッケージの１つである jiti が利用される予定のようです。(2024/06/18 現在は draft PR なので今後変更される可能性がありま
State of JavaScript 2023
It should be clear by now that, for better or for worse, JavaScript is not slowing down. Between server components, server actions, signals, compilers, and more, we're seeing new innovations pop up faster than most of us can handle. The trick to avoiding the dreaded JavaScript fatigue is remembering that you can pick your lane: sure, you can live life on the cutting edge with the early adopters; b
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
はじめに こんにちは！ 今回は、自作のライブラリ「Limo」を紹介します！ このライブラリは、テキスト、JSON、JSONC、TOML、YAMLなどのファイル形式を手軽に読み書きできる小さなツールです。 ファイルの読み書きをusing構文を使って簡単に行えるのが特徴です。 以下はREADMEを翻訳したものをベースにしています。 「Limo」って何？ こんな特徴があります！ 簡単なファイル読み書き：わずかなコードでファイルの読み書きを実現 変更の自動書き込み：using 構文を用いてブロックスコープを抜けると、自動的にファイルに変更を書き込む 多様なファイル形式のサポート：JSON、JSONC、TOML、YAMLなど、さまざまなファイル形式に対応 データ検証：カスタムバリデータ関数を用いてデータの妥当性をチェック可能 using構文とは？ using構文は、TypeScript 5.2で導入
6月19日、The New Stackに「Top 10 JavaScript Libraries To Use in 2024」と題した記事が公開された。この記事では、2024年に利用すべきJavaScriptライブラリのトップ10について紹介されている。 以下に、その内容を簡潔に紹介する。 React 強力なコンポーネントベースのアーキテクチャにより、複雑なユーザーインターフェースの開発が容易。 仮想DOMの実装により、パフォーマンスが向上。 豊富なエコシステムとコミュニティのサポートがあり、継続的な改善が期待できる。 Redux 予測可能な状態コンテナで、アプリケーションの一貫性を確保。 一方向のデータフローにより、状態管理がシンプルになり、デバッグが容易。 大規模なアプリケーションでのスケーラビリティとメンテナンス性を向上。 D3.js データをDOMにバインドし、データ駆動の変換を
誰でも簡単に理解できる！JavaScriptでの配列と連想配列の初期化方法をマスターしよう｜DAD UNION – エンジニア同盟
JavaScriptでオブジェクトの配列(普通の配列でもOK)に対し、あるプロパティの値をキーとして、条件を満たす要素のみを抽出したいときは、array.filter() メソッドを使う。(ソートしたい場合は、ここを参照。) 例えば、以下のような配列があるとする。 // JavaScript gLines = [ { ln_file: "T1301451.json" ln_key: "1301451" ln_name: "[ＪＲ]岩泉線 (茂市～岩泉) " }, { ln_file: "T1301541.json" ln_key: "1301541" ln_name: "[ＪＲ]北上線 (北上～横手) " }, { ln_file: "T1301671.json" ln_key: "1301671" ln_name: "[ＪＲ]磐越東線(ゆうゆうあぶくまライン) (いわき～郡山) " }]
【入門】Reactとは？特徴やインストール方法をわかりやすく解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
想定 例えば以下のような配列があったとして、コレをcreatedAtの値で並び替えたい。 const array = [ {name: '名前1', price: 100, createdAt: '2020-08-11'}, {name: '名前2', price: 200, createdAt: '2020-08-03'}, {name: '名前3', price: 400, createdAt: '2020-08-24'}, {name: '名前4', price: 130, createdAt: '2020-08-31'}, {name: '名前5', price: 200, createdAt: '2020-08-19'}, {name: '名前6', price: 800, createdAt: '2020-08-22'}, ];
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
プログラミング言語ごとのコミュニティの最大規模はJavaScriptの約2520万人、続いてPythonが1820万人、Javaが1770万人など。SlashDataの調査
プログラミング言語ごとのコミュニティの最大規模はJavaScriptの約2520万人、続いてPythonが1820万人、Javaが1770万人など。SlashDataの調査 ソフトウェアデベロッパーを中心とした調査会社のSlashDataは6月15日、2024年第1四半期時点のプログラミング言語ごとのコミュニティの大きさについてのレポートを発表しました。 これは同社が行った世界135カ国から1万人以上の回答者を集めたアンケート結果などを基に同社が推測しレポートとして発表する予定の内容の一部を公開したものです。 下記は同社が発表したプログラミング言語別のコミュニティを大きさ順に示した図の一部を切り取ったものです。 これによると、最大のコミュニティを持つプログラミング言語はJavaScriptで2520万人。もっともポピュラーな用途はWeb開発となっています。ただしこの人数にはTypeScri
今回のブログでは皆さんにモーダルウィンドウのデザインのポイントや実装方法などを解説いたします。 モーダルが表示されている間は他の操作をすることができないため、しっかりとポイントを押さえないとユーザーに嫌われてしまう可能性もあります。 実際のサイトでの使用例も挙げながらポイントを解説していきますので、ぜひ最後までチェックいただき効果的なモーダルウィンドウを目指しましょう！ それではどうぞ！ モーダルウィンドウとは？モーダルウィンドウとは特定の操作を完了もしくはキャンセルするまで他の操作ができなくなるウィンドウのことです。 他にも似たような機能で、「ポップアップ」「ダイアログ」というものがあります。 それぞれの違いとしては、意味の焦点が異なります。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptで100行で作る！数式言語のインタプリタ
JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響
Bun の非互換な拡張 API - moriken's project
Polyfill supply chain attack hits 100K+ sites
From dotenv to dotenvx: Next Generation Config Management
JSでLottieを配置する方法 - パフォーマンスの最適化方法も紹介！ - ICS MEDIA
「Luminous」の使い方解説！Lightboxをカンタン実装 （jQuery非依存） - PENGIN BLOG
polyfill.ioを使うのは危険かもしれない(危険だった) - Qiita
New JavaScript Set methods | MDN Blog
MDN のローカライズにおける課題へのアプローチを考える - Qiita
配列操作をもっと簡単に！JavaScriptのfilter関数の魅力とは？｜DAD UNION – エンジニア同盟
2024-06-22のJS: Nuxt 2 EOL、TypeScript 5.5、State of JavaScript 2023の結果
Vite ってよく聞くけど何なんですか？ あれは
とにかく軽いLightbox系スクリプト「Luminous」の使用方法
【ESLint】Flat Configの移行が面倒！だけどESLint v9を使用したいあなたへ
TypeScript 5.5 で追加された正規表現構文チェックを理解する
How JavaScript Is Finally Improving the Module Experience
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
Limo：using構文を用いたファイル読み書きライブラリ
【海外記事紹介】2024年に使うべきJavaScriptライブラリ10選
JavaScriptでオブジェクトの配列を filter() を使ってフィルタリングする | Try Lifelog
【JavaScript】オブジェクト配列を特定のキーでソートする方法 | ramble - ランブル -
【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み
モーダルウィンドウのおすすめデザインや実装方法をご紹介（デモサンプル付き） | 東京のホームページ制作 / WEB制作会社 BRISK