本記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 「Module Harmonyについて」ということで発表を始めさせていただきます。「フロントエンドアーキテクチャーの現状と未来」というイベントタイトルからは少し外れますが、モジュールと言われるJavaScriptの1つの仕様の中で、こういうことが起きてるんだよという、少し角度を変えた話をさせていただければと思います。
Misconceptions about view transitions | Blog | Chrome for Developers
The View Transition API is a web development game changer. Whether your website is single or multi-page, this powerful API lets you create seamless transitions between views, resulting in native-like experiences that captivate users. Currently available in Chrome, with same document view transitions soon to be available in Safari. With more and more people starting to look into the View Transition
Rails: HotwireとSPAを比較するなら実装コストの違いに注意（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The popover drama 原文公開日: 2024/06/02 原著者: Jorge Manrubia 日本語タイトルは内容に即したものにしました。 インターネット接続が遅い環境でHEYカレンダーのポップオーバーの読み込みが遅くなる様子が以下でツイートされたことがきっかけで、ポップオーバーのドラマが幕を開けました。その後、無慈悲で辛辣な書き込みやプロの荒らしの出現など、最もSNSらしい形で議論がヒートアップしました。 If you want to know why an app *needs* JavaScript on the client and can’t just do it all on the server, just look at Hey or any other Hotwrite app pic.twit
雑誌の殿堂「大宅文庫」が“グーグルを先取りした”と称される理由…なぜ大宅壮一は「つまらない記事」の所蔵にこだわったのか | デイリー新潮
「週刊新潮」の発売前日に速報が届く！ メールマガジン登録 デイリー新潮とは？ 広告掲載について お問い合わせ 著作権・リンクについて ご購入について 免責事項 プライバシーポリシー データポリシー 運営：株式会社新潮社 Copyright © SHINCHOSHA All Rights Reserved. すべての画像・データについて無断転用・無断転載を禁じます。
はじめに はじめまして、セキュリティエンジニアのSatoki (@satoki00) です。今回はブラウザの開発者ツールのネットワークタブから隠れて、Webサイト内の情報を送信する手法をまとめます。所謂Exfiltrationというやつです。中にはCSPの制限をBypassするために用いられるテクニックもあります。CTFなどで安全に使ってください。 前提 発端はWeb上でテキストの文字数をカウントできるサイトが閉鎖する際の話です。カウント対象のテキストデータがサイト運営 (やサイトを改竄した攻撃者) に盗み取られていないかという議論が巻き起こっていました。「盗み取られていない」側の主張は、ブラウザの開発者ツールのネットワークタブにリクエストを送信した形跡がないというものでした。ここで ブラウザの開発者ツールのネットワークタブに表示がなければ外部へデータを送信していないのか？ といった疑問が
GitHub - laiso/site2pdf: Generate comprehensive PDFs of entire websites, ideal for RAG.
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
es-toolkit
Best performancees-toolkit delivers 2-3× better performance in modern JavaScript runtimes compared to other libraries. Small bundle footprintes-toolkit ships up to 97% less JavaScript code compared to other alternative libraries. Modern implementationes-toolkit fully leverages modern JavaScript APIs for straightforward and error-free implementation.
国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書 -モダンWebサイト制作入門
※本ページは、アフィリエイト広告を利用しています。 国産ヘッドレスCMSとして注目されている「microCMS」とJavaScriptフレームワーク「Next.js」を使ったモダンWebサイトの制作について初心者でも分かりやすく解説した入門書を紹介します。 当ブログはWordPressですが、ここ数年ヘッドレスCMSに注目が集まってきています。ヘッドレスCMSって何？という人からNext.jsは使ったことがないという人でも本書でしっかりと学ぶことができます。 著者陣は非常に豪華で、microCMSの開発陣です。開発者と聞くと開発側の目線なのでは？と心配になるかもしれませんが、実装者目線のステップバイステップで架空のコーポーレートサイトを実装しながらmicroCMSとNext.jsを用いたWebサイトのモダンな制作方法を学べます。 WordPressは使ったことがあるけどヘッドレスCMSは初
「Web開発における近年最も重要な進歩の1つ」 ー JavaScriptを使わないビュー遷移を実現するView Transition APIをAstroがサポート
6月12日、The Astro Blogで「JavaScript を使わないビュー遷移(Zero-JavaScript View Transitions)」と題した記事が公開された。この記事では、JavaScriptを使用せずに、ネイティブアプリライクなビュー遷移を実現するための新しいプラットフォームAPIについて詳しく紹介されている。 Zero-JavaScript View Transitions View Transitions APIは、ページ間のネイティブなブラウザ遷移を可能にするAPIのセットである。歴史的には、これが可能だったのはJavaScriptを多用するシングルページアプリケーション(SPA)だけだったが、最近の進歩により、ネイティブなページ遷移がウェブプラットフォームに導入されている。 AstroユーザーはAstro 2.9以来、ビュー遷移への早期アクセスが可能となっ
ESLintがJavaScript以外にも対応言語を広げるとの方針を説明。まずはJSON、Markdownへの対応プラグインを開発
ESLintがJavaScript以外にも対応言語を広げるとの方針を説明。まずはJSON、Markdownへの対応プラグインを開発 JavaScriptコードの構文やスタイルをチェックできる「ESLint」の開発者であるNicholas C. Zakas氏は、ESLintのブログに投稿した記事「What's coming next for ESLint」で、今後ESLintをJavaScriptだけでなく他の言語にも対応させていく方針を説明しました。 We're excited to share our plans for the future of ESLint:https://t.co/4joAwfRqkR — ESLint (@geteslint) July 5, 2024 ESLintはJavaScriptの構文やスタイルなどをチェック ESLintはその名前にあるように、いわゆる
GitHub - toss/es-toolkit: A modern JavaScript utility library that's 2-3 times faster and up to 97% smaller—a major upgrade to lodash.
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
JSer.info #699 - esbuild v0.22.0 がリリースされました。 Release v0.22.0 · evanw/esbuild Release v0.23.0 · evanw/esbuild v0.22 では--platform=nodeを指定した時に--package=externalをデフォルトにする変更を行いましたが、AWS CDK などが0.xの最新をインストールする仕組みなっていて問題が起きたため 0.23.0 では元の挙動へと revert されています。(AWS CDK 側も修正されています) また、Windows7,8 など古い OS のサポート終了、es2024のサポート、@esbuild/wasi-preview1パッケージの公開など Node.js v22.4.0 がリリースされました。 Release 2024-07-02, Version
結局 useEffect はいつ使えばいいのか
useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数あることを仮定しています。 Reactは、あなたが書くすべてのコンポーネントが純関数であると仮定しています。 参照：https://ja.react.dev/learn/keeping-components-pure#
CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。
Node.js 本体で TypeScript ファイルを実行できるようにするプロポーザルが出されているという話が先週あたりから話題になっている。しかしそれほど嬉しいかといわれると、正直いらんなあと思っている。 TypeScriptで簡単なスクリプトを書くときは、長らくtsxを使って実行している。tsxを使い始めるより前は ts-node を使っていたが、tsxを使ってからは何の不満もなく使い続けている。 tsxは内部的にはesbuildでTypeScriptをトランスパイルしていて、型チェックは行わない。tsxのありがたい点は、すべての node コマンドのオプションを tsx コマンドでサポートしていることだ。単純にコマンドを置き換えるだけでいいので、何も新しく覚えることがない。 構造的にはNode.jsの中でswcでJavaScriptに変換されるか、外でesbuildで変換されるかの
米セキュリティ企業のPhylumは7月3日（現地時間）、JavasScriptライブラリ「jQuery」の特定バージョンがトロイの木馬化され、GitHubなどで拡散していると警告した。 同社は5月26日、パッケージ管理システム「npm」でトロイの木馬化されたjQueryを確認。少なくとも1カ月にわたって、数十のパッケージで“汚染”されたバージョンが公開されているのを確かめた。さらに、GitHubやCDNサービス「jsDelivr」でも拡散していることが分かったとしている。 対象のパッケージには、悪意あるコードが追加されたjQueryのコピーが含まれていた。汚染されたバージョンはWebサイトのフォームデータを抽出し、外部に送信するという。 Phylumは「マルウェアを作動させるために必要な条件は限られているが、パッケージが広く配布されていることから、潜在的な影響は広く、多くの開発者に影響を与
海外のセキュリティ企業「Phylum」はトロイの木馬化された「jQuery」がnpmやGitHub、jsDelivr のCDNホストで拡散している事を指摘しました。 「jQuery」を悪用したサプライチェーン攻撃の概要 Phylumは 2024 年 5 月 26 日以来、トロイの木馬化された jQuery のバージョンを悪用する執拗なサプライ チェーン攻撃者を監視しており、最初に npm でこのjQuery を悪用する亜種を発見しました。 そこでは、1 か月にわたって数十のパッケージで侵害されたバージョンが公開されていました。 調査の結果、GitHubや、jsDelivr の CDN ホスト リソースでも、トロイの木馬化された jQuery のインスタンスを発見しました。 なお、今回解説されている内容は正規の「jQuery」へ今回のトロイの木馬が紛れ込んでいるのではなく、 悪意のあるユーザ
pnpm 9.5 Introduces Catalogs: Shareable Dependency Version Specifiers - Socket
Security News pnpm 9.5 Introduces Catalogs: Shareable Dependency Version Specifiers pnpm 9.5 introduces a Catalogs feature, enabling shareable dependency version specifiers, reducing merge conflicts and improving support for monorepos. pnpm is eight years into its unique approach to package management, and continues to gain traction, especially among those who need efficiency and support for monor
Since May 26, 2024, Phylum has been monitoring a persistent supply chain attacker involving a trojanized version of jQuery. We initially discovered the malicious variant on npm, where we saw the compromised version published in dozens of packages over a month. After investigating, we found instances of the trojanized jQuery on other platforms, such as GitHub, and even as a CDN-hosted resource on j
jQuery Attack Hits NPM and GitHub; Can Extract Web Form Data
jQuery Attack Hits NPM and GitHub; Can Extract Web Form Data The trojanized jQuery attack has been spread on npm, GitHub and elsewhere since May. A trojanized version of jQuery has been spreading on the npm JavaScript package manager, GitHub and elsewhere, for use in a jQuery attack, security researchers have discovered. Phylum researchers said they have been monitoring the “persistent supply chai
TypeScript 5.5で導入されたisolatedDeclarationsは、JavaScriptエコシステムを大きく変えるゲームチェンジャーかもしれない
7月7日、Denoの開発者マーヴィン・H氏が「JavaScriptエコシステムを加速する（Speeding up the JavaScript ecosystem）」と題した記事を公開した。この記事では、TypeScriptの新機能「isolatedDeclaration」が、JavaScript / TypeScriptエコシステムを変革する可能性について詳細に紹介されている。本記事ではその内容を簡単に紹介する。 本記事は、以下のエキスパートの皆様に監修していただきました: 古川陽介さん（Japan Node.js Association代表理事） うひょさん（株式会社カオナビ フロントエンドエンジニア） npmパッケージングの問題点 現在npmでのパッケージングプロセスは相当に複雑である。モジュールをnpmに公開しようとする開発者は、CommonJS対ESMの問題や、多くの設定調整を行
module: add --experimental-strip-types by marco-ippolito · Pull Request #53725 · nodejs/node It is possible to execute TypeScript files by setting the experimental flag --experimental-strip-typ... 💁♀️ まだマージされてない点に注意してください --experimental-strip-typesというフラグを実行時に付けることにより、Node.jsでTypeScriptのコードを実行できるようになるPRが出てきました。 背景 TC39でも型注釈の話題(議事録を読むとブラウザとの兼ね合いもあり道のりは長そう)が存在するほどJSのコードにおいて、型は当たり前となっています。 Node.jsと同
生成AIに疑似コードで指示すると自然言語よりも効率的にプログラムが生成できるというアイデアから生まれた、生成AI用の疑似言語「SudoLang」
生成AIに疑似コードで指示すると自然言語よりも効率的にプログラムが生成できるというアイデアから生まれた、生成AI用の疑似言語「SudoLang」 ChatGPTやCopilotなどの生成AIを用いてコードを生成しようとすると、多くの場合プロンプトを自然言語で書くことになるでしょう。 しかし自然言語で的確にプログラムの内容を表現するのは、ときに面倒だったり、あいまいさを排除することが難しかったりします。 一方で、プログラマが自分でコードを書こうとするとき、あるいは他のプログラマとコードの内容を議論するときに、自然言語をプログラミング言語のような構文で書く、いわゆる「擬似コード」を使うことがよくあります。 例えばこんな風に自然言語をコードっぽくホワイトボードに書いたことのあるプログラマの方は多いのではないでしょうか？ 入力値を処理するための関数（A、B）{ Aは数字かどうか確認する Bは日付か
オラクルはリレーショナルデータベース「MySQL」の新バージョンとなる「MySQL 9.0」をリリースしました。 MySQLは現在、数カ月ごとにリリースされ積極的に新機能が追加されるイノベーションリリース（Innovation Release）と、長期で安定して利用されることを想定して2年ごとにリリースされる長期サポート（LTS：Long Term Support）版の2つに分かれてリリースされています。 現在のLTS版は今年（2024年）4月に登場したMySQL 8.4です。 そして今回リリースされたMySQL 9.0はイノベーションリリースに該当します。最新機能をいちはやく試したい開発者やユーザーのためのリリースです。 MySQL 9.0の主な新機能 MySQL 9.0のドキュメント「What Is New in MySQL 9.0」から、新機能「JavaScriptストアドプログラム
What's coming next for ESLint - ESLint - Pluggable JavaScript Linter
When we released ESLint v9.0.0 in April, it was the first major release in 30 months and formally introduced the new configuration system. ESLint v9.0.0 also made some rule API changes to prepare the core for what’s coming next. After the release, we spent a lot of time creating compatibility utilities, a configuration migration tool, and a rule API transform utility to help the ecosystem move to
チュートリアル: Yjs, valtio, React で実現する共同編集アプリケーション - ROUTE06 Tech Blog
Yjsは、リアルタイム共同編集を実現するためのアルゴリズムとデータ構造を提供するフレームワークです。Notion や Figma のように、1 つのコンテンツを複数人で同時に更新する体験を提供することができます。 Y.Map, Y.Array, Y.Text といった共有データ型を提供し、それらは JavaScript の Map や Array のように利用できます。さらにそのデータに対する変更は他のクライアントに自動的に配布・同期されます。 Yjs は Conflict-free Replicated Data Types (CRDT) と呼ばれるアルゴリズムの実装であり、複数人が同時にデータを操作してもコンフリクトが発生せず、最終的に全てのクライアントが同じ状態に到達するように設計されています。 クイックスタート Y.Map がクライアント間で自動的に同期されるコード例を見てみましょ
Google、Google Sheetsの計算エンジンをWebAssemblyに最適化し、2倍の性能を実現したと発表
Google、Google Sheetsの計算エンジンをWebAssemblyに最適化し、2倍の性能を実現したと発表 GoogleはWebブラウザ上でスプレッドシート機能を提供する「Google Sheets」の計算エンジンの性能をWebAssembyで実装し、従来のJavaScriptによる実装と比較して性能を2倍に向上させたことを明らかにしました。 これにより単純なSUM計算から複雑なクエリまで、シート上でのあらゆる計算を始め、ピボットテーブルの作成、条件付きフォーマットなどさまざまな処理が高速になるとのことです。 この性能向上は、JavaScriptで構築されていた計算エンジンをWebAssemblyに最適化したことで実現していると説明されており、そのためにWebAssemby GC（ガベージコレクション）機能を用いたとのことです。 そのため現時点ではChromeとMicrosoft
Blog: Enabling Trusted Types in a Complex Web Application: A Case Study of AppSheet
Want to know more about adopting Trusted Types to improve the security posture of an application? Take a look at our case study describing how we rolled out Trusted Types in AppSheet, a Google product.
YouTube Embeds are Bananas Heavy and it’s Fixable – Frontend Masters Boost
YouTube Embeds are Bananas Heavy and it’s Fixable July 1, 2024 TL;DR: YouTube Embeds are like 1.3MB in size with no shared resources between multiple embeds. Using a <lite-youtube> Web Component is more like 100k, does share resources, and sacrifices no functionality. You can put a YouTube video on any website. They help you do it. Under the Share menu right on youtube.com there is an option to <>
How to use container queries now Stay organized with collections Save and categorize content based on your preferences. Recently, Chris Coyier wrote a blog post posing the question: Now that container queries are supported in all browser engines, why aren't more developers using them? Chris's post lists a number of potential reasons (for example, lack of awareness, old habits die hard), but there'
An extremely fast, production-grade web bundler based on Rust. Mako is a new web bundler for Web App, Library, and Framework. It's designed to be fast, reliable, and easy to use. It has been used in hundreds of projects in production by Ant Group, and other companies. If you are looking for a modern web bundler, Mako is the right choice. Getting Started $ npm create mako Why Mako Mako has a lot of
自分だけの ESLint Config を作る
これはなに 自身のプロジェクトに適合した ESLint Config の設計および実装方法についてまとめたものです。 業務や趣味プロに関わらず、 JavaScript / TypeScript でコーディングする際に ESLint は非常に有用なツールであり、広く使われています。ほとんどの場合において ESLint 基盤はプロジェクトごとに必要なパッケージをインストールして設定ファイルを作成し、構築されます。しかしその設定内容がプロジェクト間で重複することは珍しくなく、プロジェクトの数が増えるにつれ冗長となりがちです。そこで、複数プロジェクト間で共通のルールセットを定義して単一の ESLint Config として再利用することで、メンテナンス性や再利用性の向上が期待できます。本稿では、そのような用途で使える自分だけの ESLint Config を設計・実装する方法を紹介します。 前提
JavaScriptにはだいぶ前からSetオブジェクトがありましたが、何故か集合演算は全く定義されておらず自力で実装しなければなりませんでした。 その後、まあ不便だねってことでSet Methods for JavaScriptというproposalが提出されました。 実装は珍しくSafariが最も早く、2023/09/18のSafari17から対応しました。 その後2024/02/21にChrome122、そして2024/06/11にFirefox127で実装されたことにより、主要全ブラウザで集合演算が使用可能になりました。 複数環境で実装されたことから、無事ES2025としてStage4、つまり上がりになりました。 ということで使い方を紹介するよ。 Set.prototype.intersection() 要素と引数の、両方に含まれる値を返します。 new Set([1, 2, 3,
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack - Socket
Security News Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China. More than 110K websites using the Polyfill.io service have been impacted by a supply chain attack after a Chinese company bought the service earlier this year. The C
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「ES Modules仕様、わけわからんくなってる」を整理する「Module Harmony」とは？
Poku
ブラウザ開発者ツールのネットワークタブに表示されない情報送信手法 - Qiita
2024-07-11のJS: esbuild v0.22/0.23、Node.js 22.4.0、pnpm 9.5 Catalogs
CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
.tsファイルを直接実行するのにtsxで特に困っていない | Marginalia
トロイの木馬化したjQueryがGitHubやCDN経由で拡散 米セキュリティ企業が警告
ブラウザ上で可愛いフィルターを実現！TensorFlow.jsを使ったリアルタイム顔認識 - ICS MEDIA
トロイの木馬化された「jQuery」がnpmやGitHubで拡散
Persistent npm Campaign Shipping Trojanized jQuery
ESModules プラットフォームとエコシステムの狭間で | poteboy
Node.jsでTypeScriptのコードを実行できるようになるかも - hiroppy's site
MySQL 9.0登場。 JavaScriptストアドプログラムが利用可能に、ベクトル型もサポート
jQueryは時代遅れなのか？ - Qiita
How to use container queries now | Blog | web.dev
Mako - Extremely fast, Production-grade web bundler
2024-07-01のJS: ES2024、Playwright v1.45.0、e18e(Ecosystem Performance)
【JavaScript】ネイティブで集合演算できるようになった - Qiita
メニューがエンジニアなカフェ好き→「varはちょっと」「無名関数使ったりと結構粋なコード書いてる」