VanJS - A 1.0kB No-JSX Framework Based on Vanilla JavaScript
VanJS: A 1.0kB Grab 'n Go Reactive UI Framework without React/JSX Enable everyone to build useful UI apps with a few lines of code, anywhere, any time, on any device.VanJS (abbreviated Vanilla JavaScript) is an ultra-lightweight, zero-dependency, and unopinionated Reactive UI framework based on pure vanilla JavaScript and DOM. Programming with VanJS feels like building React apps in a scripting la
skruv
skruv No-dependency, no-build, small JS view-library/framework-ish-thing. Features • Examples • Docs Github • NPM Features No dependencies Small: Smallest framework in krausest benchmarks ~200 LOC ~1kb minified and compressed (1145b with brotli, 1308b with gzip, 2801b uncompressed) Usable without bundling/compilation/transpilation Supports HTML, SVG, MathML, Atom feeds and sitemaps. Types to valid
VanJS で素のDOM操作をリファクタしてみた
VanJSを試してみたら開発体験が良かったので紹介します。 🍦 VanJSとは？ VanJSは、数ヶ月前にメジャーバージョンがリリースされた比較的新しいReactive UIフレームワークです。軽量、非依存、トランスパイル不要、シンプルなAPIという特徴があります。 gzip圧縮後で0.9kbと非常に軽量で、バンドルサイズの肥大化を気にすることなく手軽に導入できます。 他のUIフレームワークと比較しても圧倒的に軽量 UIもJSXを使わず、関数ベースのAPIで宣言的に構築できます。 VanJSの開発秘話はとても考えさせられるものだったので、機会があればぜひ読んでみてください。 🛠️ リファクタリング対象 Sky Follower BridgeというX(Twitter)のFollower一覧からBlueskyのユーザーを検索するChrome拡張を個人開発しています。今回はその拡張機能のco
ボタンには常にtype="button"をつけよう
結論 ボタンを実装する際には、フォームのサブミットボタンでなければtype="button"をつけた方が良いです。 なぜか HTMLのボタン要素は3つのtype属性を持つことができます。 submit type="submit"のボタンはフォームのデータをサーバーへ送信します。 button type="button"のボタンは規定の動作がなく、イベントハンドラーを渡して使うのが一般的となります。 reset type="reset"のボタンは すべてのコントロールを初期値の初期化します。<input type="reset"> と同様です。 そしてデフォルトのtype属性の値はsubmitです。 つまりtype属性を指定せずにボタンを置くとtype="submit"として動作します。 起こった問題 予想外の挙動をするパターン1 以下は郵便番号と住所を入力するシンプルなフォームです。 郵便
悪名高きスワイプ広告を解析する - Qiita
この記事の概要 ユーザーから嫌われている広告の1つに「スワイプ広告」というものがある。 誤タップをしやすいことが理由だが、あまりにもこの広告だけ誤タップするため調べたところ 実は誤タップしたように見せかけて意図的に広告先に遷移させる広告であるということがわかった。 スワイプ広告とは、左右にスワイプすると画像がついてくるタイプの広告である。 スワイプ広告とは スワイプ広告とは、主にアフィリエイトサイトで見られる広告形式の一つである。 ユーザーは指で画面上の広告を左右にスワイプすることで、広告画像を切り替えることができる。 スワイプによるインタラクティブ性を活かし、複数のメッセージやメディアを使い、魅力的な広告体験を提供することが特徴である。 なぜ悪名高いのか しかし、スワイプ広告はユーザーから嫌われている。その理由は、誤タップを誘発しやすいからである。 誤って広告をタップして画面が遷移してし
Compression Dictionary Transport (Shared Brotli) によるコンテンツ圧縮の最適化 | blog.jxck.io
Intro Chrome で Compression Dictionary Transport の Experiment が行われている。 Intent to Experiment: Compression dictionary transport with Shared Brotli https://groups.google.com/a/chromium.org/g/blink-dev/c/NgH-BeYO72E この提案の仕様および本サイトへの適用について解説する。 brotli の Dictionary 圧縮方式は、基本的に「同じ値が出てきたら、それらをまとめて小さく表現する」という方式が中心となる。 # 繰り返しを数値で表現する場合 from: aaaabbbbb to: a4b5 この方式は、対象としたデータの中で、如何に効率よく「同じ値」を見つけるかが肝となる。例えば以下の例
ServiceWorkerの落とし穴8選 - Repro Tech Blog
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
【React】useIdの使い方を調べていたらアクセシビリティの世界に片足突っ込んだ話
概要 普段同じようなhooksを使っていてマンネリ化してきているため、今一度、Reactにはどんなhooksがあるのか調べているとReact v18から導入されたuseId()というものを見つけた。 コンポーネントごとに一意のIdを生成できるhooksらしいが、イマイチ使い所がわからなかったので、調べていくとアクセシビリティの世界に踏み入ることになりました。 深くて軽く溺れかけたので、ざっくりメモがてらまとめます。 useIdの構文について 構文 引数はなく、戻り値は一意のID文字列である。 注意事項として、useId()はコンポーネントレベルで一意のIdを生成するため、mapなどのリスト表示の際のキーの生成には使えない。 公式にも、キーはデータから生成される必要があると記述されている。 ❌ const Test = () => { const id = useId(); return (
Welcoming Javy: A new hosted project
We’re happy to announce the inclusion of Javy as a hosted project under the Bytecode Alliance. This post will delve into what Javy is, the motivation behind its adoption, and the process that led to its integration into the Bytecode Alliance. Javy Javy is a JavaScript-to-WebAssembly toolchain originally developed by Shopify to bring JavaScript support to Shopify Functions. It is based on the Quick
CommonJSからES Modulesへの移行する方法。トップダウンかボトムアップか
Secretlint v7でCommonJS からES Modulesへの移行を行いました。 Secretlint v7.0.0をリリースしました。Pure ESMへの書き直し この記事では、CommonJS(CJS)からES Modules(ESM)への移行を行った経緯と、移行する方法について紹介します。 CJSからESMへの移行は、率直に言えば単調な作業で、メリットが見えにくい作業です。 しかし、将来的にCJSよりもESMが主流になることは間違いないので、移行することは必要です。 移行の作業は、移行方法が決まれば大部分は機械的な書き換えが可能です。 では、実際にどうやって移行したのかを紹介します。 ESMへの移行の影響は依存元へと連鎖する Secretlintのリポジトリはmonorepoになっていて、だいたい40コぐらいのパッケージが含まれています。 そしてパッケージ間で依存関係があ
Popover API さわってみた
Chrome 114からPopover APIがサポートされました。 Popover APIは「トースター」などのコンテンツ上に別のコンテンツを表示しユーザーをサポートするようなコンポーネントをjavascriptを使うことなく実装できる便利な機能です。 基本的な使い方からdialogとの使い分けまで調べたのでまとめたいと思います。 基本的な使い方 Popoverを表示する方法は2つあります。 popover属性とpopovertarget属性を使用する方法 以下のように、ポップオーバーで表示したい要素に対して popoverとidを指定、トリガーとする<button>(もしくは<input>)に対して、popovertargetでpopoverで指定したid指定します。 これでボタンを押せば表示できます。 <div id="popover" popover>contents</div>
Speculation in JavaScriptCore
This post is all about speculative compilation, or just speculation for short, in the context of the JavaScriptCore virtual machine. Speculative compilation is ideal for making dynamic languages, or any language with enough dynamic features, run faster. In this post, we will look at speculation for JavaScript. Historically, this technique or closely related variants has been applied successfully t
Webアプリのパフォーマンス改善にも使える！Deopt Explorer について解説
Deopt Explorer とは Deopt Explorer は、V8 JavaScript エンジンのトレースログをもとに、インラインキャッシングに適していないプログラムを発見・可視化してくれる VSCode 拡張です。 本記事では Deopt Explorer 及びその周辺知識、Web アプリケーションのパフォーマンス改善への活用の仕方を解説します。 前提知識のインプットが不要な方は Deopt Explorer で Node.js の計測をしてみる の項目までスキップしてください。 Hidden Class とインラインキャッシング インラインキャッシングに適していないプログラムを発見・可視化してくれる はじめにこのような説明をしたと思いますが、日常の Web アプリケーションの開発でインラインキャッシングなんて言葉はあまり耳にする機会はあまりないと思います。 インラインキャッシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - azu/ejs-injection: ejs is not for user defined template
JavaScript UI Components - Build Better Apps Faster - Progress Kendo UI
GitHub - cloudflare/voprf-ts: A TypeScript library for Oblivious Pseudorandom Functions
ArrowJS
GitHub - webpro-nl/knip: ✂️ Find unused files, dependencies and exports in your JavaScript and TypeScript projects. Knip it before you ship it!
JavaScript Macros in Bun | Bun Blog
Bun Releases Native Bundler and Introduces Macros