簡単にシームレスな遷移を実装！View Transitions APIでページ遷移を進化させる
こんにちは！令和トラベルのフロントエンドエンジニアの福田です。 異なるDOM状態間のアニメーション遷移を可能にするView Transitions APIを使えば、驚くほど簡単にシームレスなアニメーションを追加できます。それにより、視覚的な一貫性を保つことができ、異なるページやコンテンツ間でも文脈を失わずに操作を行えることで、自然に受け入れやすいUXを提供できます。 今回の記事では、そんなView Transitions APIの仕組みや導入手順を、実装を交えてざっくり解説します！ View Transitions API とは？ View Transitions APIは、異なるDOM要素間のアニメーションを簡単に実装するためのAPIです。このAPIを使用することで、ウェブページの遷移を滑らかにし、UXを向上させることができます。特に、ページ間のトランジションをアニメーション化することで
第109回 連載10年目突入、MySQLのJavaScriptでのストアド・プログラム、PostgreSQL 17ベータ3と既存バージョンのアップデート、劔“Tsurugi”遂に正式リリース | gihyo.jp
OSSデータベース取り取り時報 第109回連載10年目突入、MySQLのJavaScriptでのストアド・プログラム、PostgreSQL 17ベータ3と既存バージョンのアップデート、劔“Tsurugi”遂に正式リリース この連載はOSSコンソーシアム データベース部会のメンバーがオープンソースデータベースの毎月の出来事をお伝えしています。今回から連載開始後10年目に入りました。引き続きご愛読をよろしくお願いいたします。 ［MySQL］2024年8月の主な出来事 8月はMySQLのバージョンアップはありませんでした。8月7日よりMySQLのクラウドサービスであるHeatWave MySQLが、期間の制限なく無料で利用できるOCIのAlways Freeクラウド・サービスの一部となりました。Always Freeの対象となるのは以下の仕様となります。 MySQLのイノベーショ
Web標準のバックエンドアプリのテスト
ここで言う「Web標準のバックエンドアプリ」とはCloudflare Workers、Deno、BunなどのWeb標準をサポートするランタイム上で動くWebアプリです。もしくは、Node.jsでもWeb標準のAPIをサポートしているので、これから紹介するアプリとテストコード自体はNode.js上も動きます。 これらのテストを書く、実行するのは実にシンプルで、拍子抜けしてしまうほどです。ですが、現在、20,000行あるHonoのテストコードは、これらのやり方と全く同じ方法を取っています。注目すべき点は、実際のサーバーを立ち上げることがなく、抽象化されたリクエストとレスポンスのやり取りを試験するだけで、品質が保たれる点です。Honoのテストでは、ランタイムによっては一部実サーバーを立ち上げますが、コアの20,000行ではサーバーを立ち上げていません。この抽象化はPythonのWSGI、Ruby
JavaScriptでロックを実装する
もともとの話は、私がDartでロックを実装したことが始まりでした。それまではsynchronizedパッケージを利用していましたが、なぜそんなことをしたかと言えば、このくらいの処理であれば、誰にでも仕組みを解説できるように、よくも悪くも中身を把握しておきたかったのです。 そのあとで、もっと大勢の方にとって分かりやすく、試しやすいようにJavaScriptに移植することにしました。DartはJavaScriptの置き換えを狙って作られた言語なので、少し癖はありますが、同じように書けば同じように動作するので、この作業は簡単でした。つまり、私がDartで実装したロックと同じものをJavaScriptで実装したことになります。 本稿ではJavaScriptによるロックの実装を解説しますが、独特で少し理解しにくいところもあるので、なるべく具体的かつ難しくなりすぎないように解説し、その仕組みに対する理
BunはNodeより速いのか？ Misskeyで検証 | gihyo.jp
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回はNode.js互換のJavaScriptランタイム、Bunのパフォーマンスについて、Misskeyのコードベースを用いて検証を行います。 Bunとは Bunは、Node.js（以下Node）互換である後発のJavaScriptランタイムです。 JavaScriptエンジンにNodeで採用されているV8ではなくJavaScriptCoreを採用しているほか、TypeScriptを事前コンパイルなしに実行することもできます。 肉まんのようなマスコットキャラクターが特徴です。 モチベーション そんなBunの公式サイトではNodeよりも大幅に性能上のアドバンテージがあるように紹介されていますが、こうした競合ソフトウェアとの一方的な比較は得てして限られた条件での有利な
リッチテキストエディター（RTE）のJSライブラリ色々試してみた
リッチテキストエディタ(RTE)って？ リッチテキストエディタ（以下RTE）とは、文字を入力できるだけでなく、文字に装飾を加えたり、段落を設定できたりと複雑な機能を持つエディタのことです。 弊社プロダクトであるkintone内にも以下のようなエディタが存在します。 また、似たものを指すWYSIWYG(読み方:ウィジウィグ)という用語もありますが、これはWhat You See Is What You Get（見たままが得られる）の略であり、編集時と出力時の見た目が同じエディタのことを指します。 Zennやesaのように、Markdown記法で編集したものが変換されて表示されるようなエディタは含みません。 このようにWYSIWYGはRTEより狭義の意味になっています。 WYSIWYGエディタ(Google Docs) WYSIWYGではないエディタ（esa） 独自データモデル VS DOMツ
Javascript Playground (Sandbox, Repl)
The #1 JavaScript playground and sandbox to write, run and repl it. JavaScript playground is perfect for learning and prototyping javascript sandboxes. Fast. Easy to use. Start javascript playground project using ready to use templates.
ブラウザの履歴を操作して「戻る」ボタンで広告を出すやつについて - コーヒーサーバは香炉である
2023年後半頃から、ブラウザの「戻る」ボタンを押すと、訪問したおぼえのないページが表示されることが増えた。そういうページは大抵、記事風の広告やサイト内の記事へのリンクが大量に並ぶという構成になっている。こんなレイアウトになってることが多い。 この手法はブラウザバック広告とかブラウザバックレコメンド (あるいはレコメンデーション) とか呼ばれており、国内外の複数のWeb広告会社がこれを提供しているようだ。 たとえば、こちらはGMOアドマーケティングの “TAXEL” が提供しているブラウザバックレコメンド。 【新たな収益・回遊源が誕生！】ブラウザバックレコメンド サイトから離れてしまうユーザーに対し、広告やレコメンド記事を表示させることで、収益化や内部回遊に繋げることを目的としているフォーマットになります。 ……というのがセールスポイントらしいのだが、サイトから離れる人は、サイトから離れた
GitHub - moonrepo/moon: A build system and monorepo management tool for the web ecosystem, written in Rust.
Working in a developer ecosystem can be very involved, especially when it comes to managing a repository effectively. Which package manager to use? Which language version to use? How to import packages? How to build code? So on and so forth. moon aims to streamline this entire process and provide a first-class developer experience. Increased productivity - With Rust as our foundation, we can ensur
Porffor
An ahead-of-time JavaScript compiler Porffor compiles JavaScript ahead-of-time to WebAssembly and native binaries. It is currently in pre-alpha with usability beginning in 2025. JS -> Wasm Porffor's WebAssembly output is 10-30x smaller and faster compared to existing JS -> Wasm projects as Porffor compiles JS instead of bundling an interpreter in the Wasm output. JS as Wasm allows for sandboxed ex
Pannellum
A Lightweight Panorama Viewer for the Web Pannellum is a lightweight, free, and open source panorama viewer for the web. Built using HTML5, CSS3, JavaScript, and WebGL, it is plug-in free.
Misconceptions about view transitions | Blog | Chrome for Developers
::view-transition └─ ::view-transition-group(root) | └─ ::view-transition-image-pair(root) | ├─ ::view-transition-old(root) | └─ ::view-transition-new(root) └─ ::view-transition-group(box) └─ ::view-transition-image-pair(box) ├─ ::view-transition-old(box) └─ ::view-transition-new(box) While this tree contains multiple snapshot pairs only a single view transition is run. Currently, Chrome is limite
Zero-JavaScript View Transitions | Astro
This is Part 1 of our series on “The Future of Astro” covering three major new features we have planned for Astro in 2024. This post introduces an update to the View Transitions API that Astro can now leverage for native, app-like page navigation without a single line of JavaScript required. The View Transitions API is a set of new platform APIs that unlock native browser transitions between pages
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - bramus/style-observer: MutationObserver for CSS. Get notified when the computed value of a CSS property changes.
GitHub - nodejs/llnode: An lldb plugin for Node.js and V8, which enables inspection of JavaScript states for insights into Node.js processes and their core dumps.
GitHub - bytecodealliance/StarlingMonkey: The StarlingMonkey JS runtime
GitHub - bevren/simple-chat-pdf
GitHub - azu/multi-stage-sourcemap: multi-level source map processing library.
GitHub - gezilinll/TextMagic: TextMagic - A Next Generation of Text Input based on Skia and Canvas
【JavaScript】ネイティブで集合演算できるようになった - Qiita
