えにしテック15周年記念カンファレンスの発表資料です。 https://enishi-tech-15th-anniv-conf.peatix.com/ 資料中で参照しているURLは以下です: https://github.com/rails/rails/milestone/87 https:…
Uniting Web And Native Apps With 4 Unknown JavaScript APIs — Smashing Magazine
Have you heard of the Screen Orientation API? What about the Device Orientation API, Vibration API, or the Contact Picker API? Juan Diego Rodriguez is interested in these under-the-radar web features and discusses how they can be used to create more usable and robust progressive web apps if and when they gain broader support. A couple of years ago, four JavaScript APIs that landed at the bottom of
GitHub - e18e/e18e
The e18e (Ecosystem Performance) project is an initiative to bring together the groups and individuals who are passionate about improving performance of the JavaScript ecosystem. Many ongoing efforts are already happening in this space, from dependency tree cleanups to performance optimizations, and much more. Our aim is to provide a space for contributions, ideas and knowledge sharing around the
Welcome to e18e! e18e (Ecosystem Performance) is an initiative to connect the folks and projects working to improve JS packages performance. We'd also like to provide visibility to the efforts of countless Open Source developers working to cleanup, levelup, and speedup our dependencies. We invite you to get involved in the different projects linked from these pages, and to connect with others lik
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」に買収
プログラミングの条件式で、>= や <= の比較演算子がロジックに含まれる時にロジックのテストで「値が等しいケース」を書かない人には、重要な設計を任せられない話
Unlocking the Power of Geolocation API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 今日のデジタル時代において、位置情報サービスは多くのアプリケーションや産業において広く普及し、ユーザー体験を豊かにしています。パーソナライズされたおすすめ情報からリアルタイムの追跡まで、Geolocation APIは開発者に地理情報を活用してユーザーのニーズに合わせた革新的なソリューションを提供する力を与えます。この記事では、Geolocation APIの多様な使用例を探り、IPベースの位置情報追跡の限界をどのように超えるかについて詳しく見ていきます。 Geolocation APIとは？ IPベースの位置情報追跡の限界を克服する 基本的な実装： 使用例 位置情報サービス ソーシャルネットワーキングとジオタグ：
そんなあなたに、おすすめのローディング画面の作り方の記事です。 ウェブサイトの読み込みが遅くて、コンテンツを見てもらう前に、ユーザーが離脱していませんか。だからといって読み込みに時間がかかるとしても、外せないコンテンツもあるので困ってしまいますよね。ウェブサイトに来た瞬間0.1秒でも目に入る画面は、ユーザーがすぐに離脱しないようするために、とても重要なものです。 そんな重要な瞬間に表示させる画面を、ユーザーがすぐに離脱しないようにできる方法があります。少しの工夫でウェブサイトの直帰率を下げることができるのなら、やっておきたいですよね。 実際に何をするかというと、コンテンツを表示する前にローディング画面を作り表示させます。ウェブサイトに限らずアプリなどでも、ローディング画面を表示させてるサービスを見たことあるのではないでしょうか。 ローディング画面作り方を覚えて、ローディング画面を表示させる
Cloudflare を使って polyfill を自動で安全なものへ置き換えましょう | DevelopersIO
先日ブラウザ互換の JS ライブラリである「Polyfill」にマルウェアが混入されて大きな問題となっていますが、Cloudflare であれば対応がワンクリックで実施できます。 ウィスキー、シガー、パイプをこよなく愛する大栗です。 先日ブラウザ互換の JS ライブラリである、「Polyfill.io」にマルウェアが混入されて大きな問題となっています。Cloudflare では、簡単に対策を行えるための機能がリリースされたのでご紹介します。Polyfill の対応がワンクリックで行えます。 JavaScriptライブラリ「Polyfill.io」にマルウェアが混入され10万以上のサイトに影響 Polyfill について Polyfill はブラウザ間のバージョンの違いなどを無効にするためのライブラリですが、今年の2月に売却されていることが発覚していました。 Cloudflare では、Po
Polyfill.io使ったサプライチェーン攻撃でサイト10万件以上に影響 | Codebook｜Security News
BleepingComputer – June 25, 2024 Polyfill.ioを使ったサプライチェーン攻撃で、10万件以上のサイトが影響を受けていることが判明した。サイバーセキュリティ企業のSansecが25日に発した警告によれば、今年初めに中国企業「Funnull」がPolyfill.ioのドメインとGitHubアカウントを購入後、ユーザーを有害なサイトへリダイレクトするようスクリプトが変更されたという。Sansecはこのインシデントを、典型的なサプライチェーン攻撃事例であると評している。 このスクリプト変更の結果、cdn.polyfill.io内のコードを使用しているあらゆるサイトを通じて、モバイルデバイスにマルウェアが注入されているという。このうち、あるマルウェアに関しては、偽のGoogleアナリティクスドメインを使用してユーザーを詐欺サイトへリダイレクトすることがわかって
こんにちは！ 最近、雨が多くてレイニーブルーなGlobal Web Designの福田です(笑) 前回の記事で「レスポンシブデザイン」のご紹介をしました。 その「レスポンシブデザイン」でスマートフォンなどでよく使われる「ハンバーガーメニュー」。 「ハンガーガーメニューを実装したいけどやり方がわからない…」 という方にむけて「ハンバーガーメニュー」のつくり方をご紹介します！ ハンバーガーメニューとは？ まず「ハンバーガーメニュー」についてご紹介します。 「ハンバーガーメニュー」はスマートフォンのWebサイトによく使われるメニューです。 名前の通りハンバーガーに似ているため「ハンバーガーメニュー」と呼ばれます。 スマートフォンなどの横幅が少ない端末では、メニューを横並びで表示できないため、「ハンバーガーメニュー」 が使われます。 「ハンバーガーメニュー」を押すとメニューが「×」に変わり、右から
皆さんはプログラミング言語を作ったことがあるでしょうか？ おそらく大抵の方は「ない」というのが正直なところなのではないかと思います。背景には、おそらく「プログラミング言語を作るって難しそう」という先入観があるのではと筆者は踏んでいます。 プログラミング言語とは、コンピューターに指示を与えるための特別な言語です。私たちが日常で使う言語と同じように、プログラミング言語にも文法やルールがあります。そして、この言語を理解し実行するのが「処理系」と呼ばれるプログラムです。 しかし、実はプログラミング言語の処理系（インタプリタ）を作ることは非常に簡単なことです。小さなOSを作ることに比べても、ちゃんと動くWebサービスを作ることに比べても本当に簡単です。 というわけで、この記事では「プログラミング言語」を作るための導入として「数式言語」のインタプリタを作ってみます。数式言語とは、数学の式を扱う非常にシ
ウェブブラウザのバージョン間の違いを無効化する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
日本語記事の見出し ID が日本語になってしまっています！ を思い出してください。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#specifications こんな URL があったとき、en-US の部分を ja にするだけで目的の箇所にページ内リンクして欲しいですよね。しかし、現状の設計だとそれが不可能になってしまっているのです。ID が翻訳されてしまっているがために。 見出し語のローカライズ問題 ローカライズ版では、見出しはベタ書きで訳語を記述しています。前述の通り Specifications に対応する見出しとして 仕様書 と書いています。しかし、これが 仕様 になっていたりするページもあるのです。 そう、辞書ファイルを用意して翻訳するというアプローチを採っていないがために、
JavaScriptのfilter関数は、配列操作において非常に便利なメソッドの一つです。特に、特定の条件に基づいて配列から要素を抽出する際に使用されます。 この記事では、filter関数の基本的な使い方から、実際の使用例までを分かりやすく解説します。 filter関数とは filter関数は、配列の各要素に対して指定した条件をチェックし、条件に合致する要素のみを抽出して新しい配列を作成するメソッドです。この関数は、元の配列を変更せず、新しい配列を返します。 基本的な構文は以下の通りです。 const newArray = originalArray.filter(callback(element[, index[, array]])); callbackは、各要素に対して実行される関数であり、以下の引数を取ります。 element: 現在の配列要素 index (オプション): 現在の要
新たな関数型プログラミング言語「Gleam」が話題 ー 型安全、並行システムに最適化、ErlangとJavaScriptにコンパイル可能
6月23日、海外のエンジニア向けメディア「The New Stack」に「Introduction to Gleam, a New Functional Programming Language」と題した記事が公開された。この記事では、新しい関数型プログラミング言語であるGleamについて詳しく紹介されている。 以下に、その内容を簡潔にまとめて紹介する。 Gleamはスケーラブルな並行システムを構築するための型安全な関数型プログラミング言語である。ErlangとJavaScriptにコンパイルされるため、ErlangやElixirなどの他の「BEAM」言語との相互運用性がある。Erlangは初期の通信業界で使用された言語であり、その並行性とフォールトトレランスの特性が今でも尊重されている。 以下にGleamの特徴をまとめる。 シンプルな構文 Gleamの構文は非常にシンプルであり、初心者で
「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
【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を返すのか
はじめに TypeScriptを始めた頃からanyは悪だと教わってきましたが、それなのになぜanyを返すんだ！？ なぜJSON.parseがanyを返すのか気になったので、原因を調べたり推測しました。 anyを使うのは本当に適切？ なぜanyを返すかを調査する前に、TypeScriptのanyとunknownについておさらいしましょう。 any どのような値でも代入を許す型、コンパイラーが型チェックを行わない型 私は後者の意味が重要だと考えています。 unknown TypeScript 3.0から導入された対象の値の型が何かわからないときに使用する型 unknownの値を絞り込むことによって型安全に使用することができます。 kyのresponse.json 少し話が逸れてしまいますが、ここでkyというFetchをより使いやすくしたライブラリの話をします。 kyでは、レスポンスのコンテンツ
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
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
知っておくと仕事が捗る便利ツール17選 - Qiita
2024年のRailsと自由について考える
知らないとあぶない、Next.js セキュリティばなし
e18e
JSライブラリ「Polyfill.io」がマルウェアに改変、10万サイト以上に影響
位置情報が価値になる？Geolocation APIの使い方と応用例 - コハム
ローディング画面の簡単な作り方！JavaScriptをコピペするだけで実装できる方法
CSSとJavascriptでハンバーガーメニューを実装しよう! - Global Web Design
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」の使用方法
TypeScript 5.5 で追加された正規表現構文チェックを理解する
How JavaScript Is Finally Improving the Module Experience