Intro Fetch API の実装が広まり、IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、Web API の中でもかなり異質な命名である XHR が、XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、Microsoft の命名規則に「
import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo
はじめに 対象イベント 読み方、使い方 Remote Code Execution(RCE) 親ディレクトリ指定によるopen_basedirのバイパス PHP-FPMのTCPソケット接続によるopen_basedirとdisable_functionsのバイパス JavaのRuntime.execでシェルを実行 Cross-Site Scripting(XSS) nginx環境でHTTPステータスコードが操作できる場合にCSPヘッダーを無効化 GoogleのClosureLibraryサニタイザーのXSS脆弱性 WebのProxy機能を介したService Workerの登録 括弧を使わないXSS /記号を使用せずに遷移先URLを指定 SOME(Same Origin Method Execution)を利用してdocument.writeを順次実行 SQL Injection MySQ
How I built a modern website in 2021September 29th, 2021 — 34 min read For over half of 2021, I worked on a complete rewrite of kentcdodds.com. You're reading this on the rewrite of this site! Are you using dark mode or light mode? Have you signed in and selected your team yet? Have you tried to call into the Call Kent Podcast? This blog post isn't about these and other features of the new site, b
JavaScript/TypeScriptの高速フォーマッター「Rome Formatter」リリース。Rust製でPrettierより約10倍高速と
JavaScript/TypeScriptの高速フォーマッター「Rome Formatter」リリース。Rust製でPrettierより約10倍高速と JavaScriptのツールチェインを統一的に提供することを目指した「Rome Tools, Inc.」（以下、Rome Tools）は、JavaScriptおよびTypeScriptのコードの書式を高速に整えるフォーマッター「Rome Formatter」をリリースしました。 Release of the Rome Formatter, a super fast formatter for JavaScript, with a focus on Prettier compatibilityhttps://t.co/2iXq5Gm5K3 — Rome Tools (@rometools) April 5, 2022 Rome Toolsは、
AIバグ発見システム「Sashiko」をJS/TS用にカスタマイズして使ってみる - プププなテクブ
ソフトウェア開発におけるコードレビューは品質保証の要です。しかし、レビューの質はレビュアーの専門知識と集中力に大きく依存し、人間のレビューでは見落としが避けられません。 この課題に対して、Linuxカーネル開発コミュニティから生まれたのがSashikoです。 sashiko.dev 本記事では、Sashikoの仕組みを詳しく解説し、それをJavaScript/TypeScriptライブラリのレビュー向けにカスタマイズしたSashiko JSについて紹介します。 Sashikoとは何か？ Sashiko（刺し子）は、Google社員のRoman Gushchin氏が開発したAIを用いたバグ発見システムです。特にLinuxカーネルのパッチをAIで自動レビューします。名前の由来は日本の伝統的な補修刺繍技法で、「布の弱い部分を補強する」という意味が、コードの脆弱な部分を見つけ出すという使命に重ねら
ブラウザで動作する地理空間データ処理ライブラリとして DuckDB-wasm を使い、 SQL を TypeScript で管理する仕組みを作る - newmo 技術ブログ
newmo では、地図データや地理情報を扱う場面が多くあります。 たとえば、タクシーやライドシェアでは、営業区域のような営業していいエリアといった地理的な定義があります。 また、乗り入れ禁止区域のようなタクシーが乗り入れてはいけないエリアといった定義も必要になります。 これらの地理に関する定義は GeoJSON のような地理情報を扱うデータ形式で管理されることが多いです。 しかし、GeoJSONなどの定義をテキストとして手書きするのは困難です。 そのため、地図上に区域を作図するエディタやその定義した区域が正しいかをチェックするような管理ツールが必要です。 管理ツールは、ウェブアプリケーションとして作った方が利用できる環境が広がります。 このような地理情報は一度に扱うデータが多かったり、空間的な計算処理が必要になるため、専用の仕組みを使うことが多いです。 このような技術を、地理情報システム（
ココピー (cocopy) というブラウザ拡張機能がある。 chromewebstore.google.com Webページを見ていて URL やページタイトルなどをコピー＆ペーストしたくなったとき、ココピーを使うと思い思いの形式でクリップボードへのコピーができて便利だ。 ココピーについてはいろいろな人が紹介記事を書いているのでそれを読んでもらうのがいいと思う。 blog.pokutuna.com motemen.hatenablog.com ココピーは任意の JavaScript コードを実行できる ココピーは現在見ているページの URL・ページタイトル・コンテンツを JavaScript コードでいい感じに整形してからクリップボードに突っ込めるツールだ。 JavaScript コードはユーザーが好き勝手に書くことができる。fetch() を使って外部 API を叩くこともできる。 とい
はじめに サーバーサイドエンジニアの mokuo です。普段はカード決済やあとばらいチャージに関連する機能の開発や運用を行っております。 本記事でお話すること 日本の住所を都道府県、市区町村、丁目番地、それ以降などに分割する方法の検討から技術選定、実際に動いているコード（ほぼそのまま）をお見せします。 想定読者 サーバーサイドエンジニアを主な読者として想定しています。 日本の住所を分割する機能の実装方法を知りたい方 Deno*1や Hono*2 の採用事例、実装例を知りたい方 はじめに 本記事でお話すること 想定読者 🤔 背景と課題 🎯 住所分割の方針検討 ✂️ 住所分割方法: normalize-japanese-addresses に決定 🧩 npm ライブラリの組み込み: Hono + Deno に決定 🏠️ インフラ構成: ECS + EFS に決定 💪 2日で実装する
Rust Is Eating JavaScript 2021 (updated 2026) – Lee Robinson Rust is a fast, reliable, and memory-efficient programming language. It’s been voted the most admired programming language for a decade1. Created by Mozilla, it’s now used at Meta, Apple, Amazon, Microsoft, and Google for systems infrastructure, encryption, virtualization, and more low-level programming. Why is Rust now being used to rep
2023 年 4 月 18 日にリリースされた Node.js v20 の主な変更点を紹介します。 nodejs.org ファイルのアクセスやプロセスの起動を制限する新しいパーミッションモデル (experimental) --allow-fs-read でファイルの読み込みを許可する --allow-fs-write によるファイル書き込み許可 --allow-child-process による child_process の許可 --allow-worker による Worker Threads の許可 Permission Model の参考記事 V8 11.3 による新しい JavaScript の機能 テストランナー（node:test）が stable に昇格 Single Executable Application JSON の config を使った Blob が必要に
REST API Design Best Practices Handbook – How to Build a REST API with JavaScript, Node.js, and Express.js
By Jean-Marc Möckel I've created and consumed many API's over the past few years. During that time, I've come across good and bad practices and have experienced nasty situations when consuming and building API's. But there also have been great moments. There are helpful articles online which present many best practices, but many of them lack some practicality in my opinion. Knowing the theory with
LLVM入門 - javascript使いがLLVM(Rust:inkwell)でjavascriptをJITコンパイルするまで
コンパイラ基盤であるLLVMについて、全く知識がない私が、 javascriptソースコードをパースしLLVMでコンパイルできるようになりました。 LLVMの記事は数多くありますが、初心者向けの記事が少なく感じたため、 本記事では、できる限り分かりやすくLLVMについて紹介できる記事を書こうと思います。 ソースコードは、こちらに置いています。 自己紹介 ふだん、javascriptやpythonなどインタプリタ言語を使うエンジニアです。 LLVMについて、全く知識がなかった人間です。 背景 過去に、おもちゃのブラウザ自作をやってみました。 HTMLとCSSを解析し、レンダリングするところを書き、基本的な動作を知ることができました。 HTMLとCSSとくれば、次はJSだと思い、JSを実行するエンジンを書いてみたくなりました。 ただし、WebブラウザのAPIとJS実行エンジンをバインディングす
前書き ESLint は JavaScript, TypeScript のための静的検証ツールです。 ESLint を活用することで、コーディング規約やベストプラクティスを機械的に強制することによりコードレビューの手間を省き、本番環境でのエラーやパフォーマンスの悪化を抑制することができます。 TypeScript を使っているプロジェクトでは、パーサーを適切に設定すれば型情報を用いたより精密な静的検証を行うこともできます。 eslint を使う際、 eslint:recommended, plugin:@typescript-eslint/eslint-recommended などの各 eslint plugin の推奨 config のみを使って済ませたり、 eslint-config-airbnb などの config のみに頼ることも多い印象ですが、 recommended conf
I often feel like javascript code in general runs much slower than it could, simply because it’s not optimized properly. Here is a summary of common optimization techniques I’ve found useful. Note that the tradeoff for performance is often readability, so the question of when to go for performance versus readability is a question left to the reader. I’ll also note that talking about optimization n
最近、よく目にするデータフォーマットに「JSONC」があります。これはJavaScriptでお馴染みのJSON形式にコメントを記述できるよう拡張したものです。Visual Studio Codeでも採用されており、設定ファイルとして利用されることが増えています。そこで、JSONCの記法やJavaScriptから使う方法を確認してみましょう。 JSONCは可読性の高いデータフォーマット JSONCとは 「JSONC(JSON with comments)」とはJSONにJavaScriptスタイルのコメントを記述できるようにしたデータフォーマットです。そのため、基本的にデータフォーマットのJSONなのですが、そこにJavaScript風のコメントである「// コメント」と「/* コメント */」を記述できるようにしたものです。 冒頭で紹介したように、プログラミング用のエディタ「Visual
実践 Node.js Native ESM — Wantedlyでのアプリケーション移行事例 | Wantedly Engineer Blog
Wantedlyではこのたび、フロントエンドアプリケーションのひとつをNative ESM化しました。本記事ではNative ESM化の必要性と、必要な作業について説明します。 この記事の概要Node.jsにはNative ESMというモードがある。Native ESMはまだ普及していないが、ライブラリ側の更新が進み、移行が必要になりつつある。Native ESMをめぐる状況は (この記事の長さからわかるように) 色々複雑で、概念をちゃんと説明するだけでも大変。Native ESMへの移行にあたってはさまざまな困難が待ち受けている。Native ESMとは歴史的経緯から、JavaScriptには複数のモジュールシステムがあります。そのうちNode.js周辺でよく使われるのはCommonJS ModulesとES Modulesです。 CommonJS Modules (CJS) は実質的に
BigQueryのアンチパターン認識ツールで独自のSQLリンターを開発しました - ZOZO TECH BLOG
こんにちは、株式会社ZOZOで25卒の内定者アルバイトをしている村井です。この記事では業務で取り組んでいる、BigQueryで使うSQLのリンターの作成方法について紹介します。 目次 目次 課題と解決策 課題 解決策 BigQueryのアンチパターン認識ツール ミニマムな使い方 日本語がSQL内に含まれている際の問題 アンチパターンを定義する リンターとしてBigQueryのアンチパターン認識ツールを使用する際に生じる課題と解決策 構成 APIサーバ化 Chrome拡張 動作例 まとめ 課題と解決策 課題 社内では様々なチームがSQLを書いており、動作はするものの良くない書き方をしている場合があります。そういった構文を検知して、前もって修正する必要があります。 解決策 BigQueryのコンソールで入力されたSQLの不正構文を検知、修正案を提示できるようにしました。 BigQueryのアン
GitHub - modelcontextprotocol/servers: Model Context Protocol Servers
Official integrations are maintained by companies building production ready MCP servers for their platforms. 21st.dev Magic - Create crafted UI components inspired by the best 21st.dev design engineers. 2slides - An MCP server that provides tools to convert content into slides/PPT/presentation or generate slides/PPT/presentation with user intention. ActionKit by Paragon - Connect to 130+ SaaS inte
Security is important. Nobody wants to be the person advocating for less security. So nobody wants to say it. But somebody has to say it. So I guess I’ll say it. The way npm audit works is broken. Its rollout as a default after every npm install was rushed, inconsiderate, and inadequate for the front-end tooling. Have you heard the story about the boy who cried wolf? Spoiler alert: the wolf eats t
900行のコードをノーミスで出力するClaude 3.5 Sonnet (New) やるなお主｜平岡憲人（ノーリー）
こんにちは！ ノーリーです。ClaudeやChatGPT、Gemini使ってますか？ 今朝リリースされた、Claude 3.5 Sonnet (New)のコード生成能力を味う記事です。 では、まったり参りましょう！ １．公式情報Claude 3.5 Sonnetは、コーディング能力において大きな進化を遂げたAIモデルだそうです。このモデルの新機能と改善点は以下の通りです。 強化されたコーディング支援: Claude 3.5 Sonnetは、JavaScriptやPythonなどの様々なプログラミング言語でコード生成する能力に優れています。簡単なコード補完から複雑な問題解決シナリオまで対応可能で、開発プロセスを大幅に効率化できます。 問題解決能力の向上: HumanEvalベンチマークで64%の問題を解決する能力を示し、前バージョンのClaude 3 Opusの38%から大幅に向上しました。
Announcing Oxlint 1.0
TL;DR: The first stable version Oxlint has been released! With a 50~100x performance improvement over ESLint, support for over 500 ESLint rules, and usage in major companies like Shopify, Airbnb, and Mercedes-Benz, you should give it a try. Get started now. Oxlint is a Rust-powered linter for JavaScript and TypeScript is designed to be fast and simple to adopt. Since its first announcement back in
Next.js 13 vs Remix: An In-depth case study — Prateek Surana
When it comes to building web applications, React has been at the forefront for a while now, and its adoption continues to grow. Among the most common approaches to building web applications with React, Next.js stands out as one of the most preferred options. Next.js has also been in the limelight since last year when they released their biggest update to the framework ever with the app router. Th
How modern browsers work
Note: For those eager to dive deep into how browsers work, an excellent resource is Browser Engineering by Pavel Panchekha and Chris Harrelson (available at browser.engineering). Please do check it out. This article is an overview of how browsers work. Web developers often treat the browser as a black box that magically transforms HTML, CSS, and JavaScript into interactive web applications. In tru
One of the most impactful things we’ve worked on in TypeScript 5.0 isn’t a feature, a bug fix, or a data structure optimization. Instead, it’s an infrastructure change. In TypeScript 5.0, we restructured our entire codebase to use ECMAScript modules, and switched to a newer emit target. What to Know Now, before we dive in, we want to set expectations. It’s good to know what this does and doesn’t m
Worker Tools
Worker Tools are a collection of TypeScript libraries for writing web servers in Worker Runtimes such as Cloudflare Workers and Deno Deploy. ToolsServicesHow to UseExamplesQuestionsWhat niche do Worker Tools fill?Tools🧭 Worker Router — Complete routing solution that works across CF Workers, Deno and Service Workers🔋 Worker Middleware — A suite of standalone HTTP server-side middleware with TypeS
Announcing Rolldown-Vite
TL;DR: Try out the Rolldown-powered Vite today by using the rolldown-vite package instead of the default vite package. It is a drop-in replacement, as Rolldown will become the default bundler for Vite in the future. Switching should reduce your build time, especially for larger projects. Reach out to discover production use cases! Over the last year, we've been working on Rolldown, a Rust-based ne
Announcing Rome Formatter
We began a full rewrite of Rome in Rust last year, and we’re excited to announce our first release as a part of this effort with the Rome Formatter, a new formatter for JavaScript and TypeScript. It perfectly expresses our goals of excellent performance, ease-of-use, and first-class IDE integration. Prettier revolutionized the JavaScript ecosystem by normalizing standards and removing formatting d
Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） - LEFログ
※この記事では「新しくRails 7 アプリを作成するときのこと」を想定していますが、Rails 6を7に上げるときにもそれなりに役立つ情報だと思います！ 結論 rails newのときにesbuildを指定してあげれば、あとはJavaScriptファイルや.jsxファイルを、.tsxにしてあげるだけでOK。 型チェックや構文チェックを導入するには少し注意が必要。 概要 現在、Rails 7を使ってフロントエンドを構築する方法には、大きく分けて３種類あります。 importmapsを使って、素のJavaScriptを使ってフロントエンドを作る esbuildを使って、JSXファイルを使ってフロントエンドを作る Rails 7をAPIモードにして、フロントエンドはNextjsで作る 自分はこの２番めの「esbuildを使ってフロントエンドを作る」を選択しました。理由は、Railsのslim上
Bun は WinterTC からの招待を無視し、標準から外れた拡張やまだプラットフォームで議論中の仕様を利便性のためだけに取り入れている。またエコシステムとして合意の取れていない実装をすることもある。 @jarredsumner: JS runtimes obsess about web standards but web standards orgs are incentivized to only care about browsers @lcasdev: @jarredsumner Just want to mention that we’ve invited you to WinterCG meetings for nearly 2 years now without any response from you - I think intentionally not partic
Today we’re excited to announce the release of TypeScript 5.1! If you’re not yet familiar with TypeScript, it’s a language that builds on JavaScript by adding constructs called types. These types can describe some details about our program, and can be checked by TypeScript before they’re compiled away in order to catch possible typos, logic bugs and more. TypeScript also uses these types to provid
We are excited to announce the release of the new version of Prettier! We have made the migration to using ECMAScript Modules for all our source code. This change has significantly improved the development experience for the Prettier team. Please rest assured that when using Prettier as a library, you can still use it as CommonJS as well. This update comes with several breaking changes. One notabl
本記事はストックマークAdvent Calendarの21日目の記事です。 はじめに こんにちは、ストックマークの谷本です。 ストックマークでは、ビジネス情報に特化したデータプラットフォームを独自に構築しています。 本記事では、そのデータプラットフォームの中核であるWebクローラーのパフォーマンスを、Rust+WASMでコスパ良く改善できたという事例を紹介したいと思います。 何が問題だったか Webクローラーは、国内外のニュースサイトや企業サイト、ブログを回覧してビジネス情報をデータ化します。 そのさい、読み込むSitemapやRSS(これらはXML形式で配信されています[1])のサイズが大きいと解析にかなり時間がかかり、想定していた処理時間を超えてタイムアウトエラーを起こすケースがありました[2]。それが少数のサイトであればまだインパクトは小さいですが、回覧するサイトは日々増えており、W
Rust + Node-APIでクロスプラットフォーム向けnpmパッケージを公開する - 別にしんどくないブログ
この記事は Node.jsのカレンダー | Advent Calendar 2021 - Qiita の2日目の記事です。 今回はnapi-rsというNode-APIを使ったNode.js add-onをRustで書けるツールを紹介します。 napi.rs 目次 目次 Node-API とは napi-rsとは napi-rsの使い方 Rust のコードを追加してみる napi-rsを使ったnpm publish 今後試したいこと 著名npmパッケージのセキュリティインシデントとpostinstallの問題点 まとめ Node-API とは napi-rsの紹介をする前にNode-APIについて説明します。 Node.jsは、Node.js自体をネイティブレベルで拡張するためのadd-onをユーザーが開発するためのNode-APIと呼ばれるAPIを提供しています。Node-APIは以前はN
つい先程、https://github.com/prettier/prettier/pull/14212 という Pull Request を next ブランチにマージした。 これは DefinitelyTyped で管理されていた Prettier の TypeScript 用の型定義を Prettier 本体のリポジトリへと移す Pull Request だ。この Pull Request によって、v3 からは @types/prettier をインストールする必要がなくなる。 JavaScript で書かれたライブラリをメンテナンスしている他の人の意思決定の参考になるように、この記事ではこの変更を行ったモチベーションや手法について説明する。 Prettier の JavaScript API の型定義の現状 Prettier は JavaScript から使える API を提供し
TL;DR: JavaScriptで使われるネイティブパーサーは、言語間の余分な作業のために常に速いとは限りません。これらのオーバーヘッドを回避し、マルチコアを使うことが性能にとって重要です。 Rustは、そのパフォーマンスと安全性の特徴から、JavaScriptエコシステムの中で急速に選択肢の一つになっています。しかし、RustをJavaScriptツールに統合することは、特に効率的で移植性の高いプラグインシステムを設計する際に、固有の課題をもたらします。 「JavaScriptツールをRustで書き直すことは、広範な外部貢献を必要としない速度重視のプロジェクトにとって有利です。」 ESLintの作者であるNicholas C. Zakas Rustは、その急な学習曲線のために難しいものになりがちで、さらにコンパイルされたバイナリを異なるプラットフォームに配布することも簡単ではありません
SWCとRelease Pleaseで始めるReact TypeScriptライブラリ開発と公開 - BASEプロダクトチームブログ
こんにちは。Pay ID Devの大木 (@roothybrid7)です。 今回外部スクリプトとして読み込み利用する外部SDKを、Reactに組み込むためのラッパーライブラリを作ったので、その開発事例を紹介します。 今回、SWC(Speedy Web Compiler)やRelease Pleaseを利用して開発したので、主にそれらをどう使ったのかを紹介いたします。 背景 去年12/16に開催しましたオンラインイベント「BASE Tech Talk #1 〜Next.jsを使ったカート大規模リプレイスPJの裏側〜」の通り、BASEカートシステムのFrontendアプリケーションは、Next.jsで動作してます。 さて、アプリケーションでは、Amazon PayやPayPalなど様々な外部の決済サービスを利用しており、それらのJavaScript SDKをいくつか利用しています。 これらのS
フロントエンドのLinterやCIを改善した話
この記事は 株式会社エス・エム・エス Advent Calendar 2023 の 21 日目の記事です。 介護事業者向けの経営支援サービス「カイポケ」のリニューアルプロジェクトでフロントエンド開発をしている @hush_in です。 今年の 4 月にエス・エム・エスに入社しました。 入社してからフロントエンドの Linter や CI を改善した話をします。 忙しい人向けまとめ ESLint の recommended 系 extends を追加 全般 eslint:recommended plugin:import/recommended TypeScript plugin:@typescript-eslint/recommended-type-checked plugin:@typescript-eslint/stylistic-type-checked plugin:import/
Announcing Rome v10
We are thrilled to announce Rome v10, the first stable release since the start of the Rust rewrite. Rome is an ambitious project aiming to unify the dozens of frontend language tools into a single easy-to-use tool built from scratch. This release includes our fast linter and formatter; they require minimal configuration, come with beautiful and descriptive diagnostics, and have built-in support fo
In this blog post, I’ll explain everything you need to know in order to use and produce native ECMAScript modules on Node.js. The GitHub repository iterable is an example of a TypeScript ESM package that works on Node.js. It still uses the "typesVersions" workaround (which isn’t needed in TypeScript 4.7 and later). (Thanks to Guy Beford and Oleg Drapeza for their feedback on this post.) TypeScript
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
XMLHttpRequest とはなんだったのか | blog.jxck.io
雑にReactアプリを作りたい時に使ってるもの
【2020年】CTF Web問題の攻撃手法まとめ - こんとろーるしーこんとろーるぶい
How I built a modern website in 2021
ココピーからChatGPTを呼んで文章生成させる - 無駄と文化
Hono + Deno で住所分割APIサーバーを2日で爆速実装する - inSmartBank
Rust Is Eating JavaScript | Lee Robinson
Node.js v20 の主な変更点 - 別にしんどくないブログ
ESLint を使い倒す（おすすめルール紹介）
Optimizing Javascript for fun and for profit
ゼロからはじめるJavaScript(18) 可読性と表現力の高いデータ形式「JSONC」を活用しよう
npm audit: Broken by Design — overreacted
TypeScript's Migration to Modules - TypeScript
Bun の非互換な拡張 API - moriken's project
Announcing TypeScript 5.1 - TypeScript
Prettier 3.0: Hello, ECMAScript Modules! · Prettier
Rust+WASMでWebクローラーのXMLパースを高速化
DefinitelyTyped がつらいので Prettier の型定義を本体のリポジトリに移すことにした
TypeScriptパーサーのベンチマーク：Rustツールの性能の謎を解く
TypeScript and native ESM on Node.js