Interactive audiovisual app using webaudio
![touch:waves](https://cdn-ak-scissors.b.st-hatena.com/image/square/56b1f40a4221529c8b14558bd40904989be67a46/height=288;version=1;width=512/https%3A%2F%2Fsascacci.com%2Ftouchwaves%2Fthumbnail.png)
Offers を運営している株式会社 overflow の あほむ でございます。 本記事は Chrome Platform Status からなんとなく Proposed/In Development etc なステータスのフィーチャーを取り上げて、そのプロポーザルを眺めてみるシリーズです。前回は form-sizing field-sizing CSS property でした。 SPA 的な画面遷移を性能計測したい 今回は Soft Navigations Performance Entry を眺めてみます。本当に眺めるだけで深入りしないので概要のみのライトな記事とご認識ください。 SPA 的な画面遷移とはつまり History.pushState や History.replaceState を用いた JavaScript 駆動なナビゲーションを指します。このような遷移を指してここ
「Trusted Web」とは、インターネットを使ってデータをやり取りする際、そのデータの信頼性に関する情報をあらかじめ埋め込むことを基本とする、次世代のインターネットインフラ構想。一般にインターネットを使ったデータのやり取りでは、真正性の担保や改ざんがないことなどの確認に多大なコストがかかる。Trusted Webによりデータの改ざんやなりすましなどの懸念を軽減することにより、事業者をまたいだ価値創造や、紙書類の残る業界におけるDX(デジタルトランスフォーメーション)の推進、ヘルスケアやデジタル広告といったデータの活用などにつながり得るとして注目を浴びている。 構想を進めるのは政府の内閣官房デジタル市場競争本部の有識者会議「Trusted Web推進協議会」である。2020年から議論を開始し、2030年のインターネット全体での実装を目標とし、検討を進めてきた。2022年8月には「Trus
Mac で Safari Web アプリを使うmacOS Sonoma から、Safari で Web ページを Web アプリとして保存できるようになりました。Web アプリは、Safari とは切り離して使うことができます。Web アプリは、通常のアプリさながらに使い勝手がよく、Dock から簡単にアクセスできます。 Web アプリと Web ページの違い Web ページから Web アプリを作成する方法 Web アプリの設定を変更する方法 Web アプリで通知を使用する方法 Web アプリを削除する方法 Web アプリと Web ページの違い Web ページを Web アプリとして使う場合、見た目と動作は Safari の中で使うときと変わりません。それでも、Web アプリの使い勝手は若干異なります。 Web アプリは、Safari とは別に機能します。閲覧履歴、Cookie、Web
次世代 Web カンファレンス 2023 開催告知 About 名称: 次世代 Web カンファレンス 日時: 2023/12/16(土) 12:00-20:00 場所: サイボウズ 参加費: 無料 ハッシュタグ(全体): #nwc_all 配信: 未定 懇親会: なし Schedule [x] 10/23: 日程告知 [x] 11/01: 詳細公開 [ ] 11/16: 募集開始 [ ] 11/30: 抽選終了 [ ] 12/16: 本番当日 Motivation 「Web について話す場」 というか「Web そのものをテーマにした場」というのが、意外と少ないなとずっと思っていました。 (もちろん、結果として Web について話しているカンファレンスや勉強会はたくさんありますが。) そして、スライドなどを用いて何かを「発表する」のではなく、進化の早い Web で「今何が起こっているか?」
Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど Photoshopは画像の作成や加工といった専門的な用途を目的に、長年にわたって作り込まれた代表的なデスクトップソフトウェアの1つと言えます。 プロフェッショナルな用途を満たす膨大な画像処理の機能を細かく作り込まれたユーザーインターフェイスから操作し、画像の変形や加工、フィルタリングなどの大量の複雑な演算処理が実行されるなど、Webアプリケーションへの移植を難しくする要素が満載です。 それらの困難を克服し、Photoshop Webではデスクトップ版Photoshopでよく使われる一般的な機能を、類似のユーザーインターフェイスでWebに実装し、商用サービスとして提供することに成功しました。 Photosho
Introducing Astro 3.0! Astro 3.0 is the first major web framework to support the View Transitions API. Fade, slide, morph, and even persist stateful elements across page navigation with ease. Until recently this had only been possible inside of JavaScript Single Page Applications (SPAs). But thanks to advances in the web platform, these features are now available for everyone in Astro 3.0. Other r
Intro タイトルを見て「Cookie の新しい仕様か、キャッチアップしよう」と思って開いたのなら、以降を読む必要はない。 Cookie History 2000 年に発行された Cookie の仕様である RFC 2965 では、仕様中に Set-Cookie2/Cookie2 (以下 Cookie2) という 2 つのヘッダが定義されている。しかし 2011 年に改定された現行の RFC 6265 ではそれらヘッダは deprecate されており、実際の Web でこれらのヘッダが交換される場面を、少なくとも筆者は見たことがない。存在すら知らない開発者も多いだろう。 筆者はずっと、この仕様がどのように出てきて、どうして消えていったのかが気になっていた。 Web 上にも情報が少なく、「歴史上の理由で」とか分かったようなことを言ってる人がたまにいるくらいだ。四半世紀前のことなので経緯を
メルカリでやっていたこと 自分がメルカリに入社したのは2017年12月で、SET(Software Engineer in Test)というポジションに応募して採用されました。 SETはその名の通りテストに対する課題を解決するための役割なのですが、当時のSETチームはテストの実装を行うわけではなく、開発環境や検証環境の運用やCI/CDツールの導入・サポートなどを主な役割としていました。 自分がSETとして応募したのは、前職までの経験で機能開発にやや飽きており、エンジニアとして品質の改善をテーマとして扱っていきたいと考えていたためでした。通常の機能開発ではプロジェクトの要件や期日に沿って開発することが求められますが、SETの業務には要件や期日はなく、何をいつどのように解決するかを自分で判断する必要がありました。チームメンバーやプロジェクトメンバーと話し合い、コードを見ながら現在の開発・運用状
Custom metrics Stay organized with collections Save and categorize content based on your preferences. Having universal, user-centric metrics that you can measure on any website can be very helpful in understanding how your users experience the web, and in comparing your site to competitors'. However, in many cases, you need to measure more than just the universal metrics to capture the full experi
Web3開発テクを片っ端から紹介します。 30以上のWeb3プロジェクトの開発を牽引する中で会得しました。 多種多様な要件を求められてきましたが、ここで紹介するテクを組み合わせることで全て対応できました。 2022年9月24日追記 20選改め50選になりました この記事はこんな方にお勧め👇 🐶「Web3プロジェクトの開発リーダー」 🦉「Web3プロダクトの機能追加を担当するエンジニア」 前提 主にNFT領域等のアプリケーションレイヤーの開発を想定しています(dAppsの中でもエンドユーザーに近いポジション) ブロックチェーンそのものの開発や、複雑なDeFiプロトコルの開発は対象としていません 主にスタートアップによる開発を想定しています Web3開発テクニック一覧 ✅ リレートランザクション ✅ メタトランザクション ✅ オラクル ✅ スマホからウォレット接続(WalletConne
すでに知られているように、Webページの表示速度は重要です。利用者はいつでもどこでも素早くページが表示されて欲しいと思うでしょう。Core Web Vitalsの指標でも表されているように、表示速度は一時的に速いだけでなく、安定していることが求められます。 本記事では、安定した表示速度を実現する手段の一つとして考えられるPrerenderingをオリジン・トライアルで試してみた結果をご紹介します。 Prerenderingとは Prerendering実装前に注意すること Quicklinkを使ったPrerenderingの実装 Prerenderingのヒット率を計算する Prerenderingの結果 Prerenderingとは Prerenderingは次に表示されると思われるページを事前にレンダリングします。レンダリングが完了している場合には、利用者がそのページに遷移するリンクを
ウェブサイト制作には、常に新しいアイデアやインスピレーションが必要ですが、決まらずに悩んでしまうことも。 そんな状況を打開するには、たくさんの優れたデザインの実例を見ることで、次のアイデアを生み出してみましょう。 ここでは、最新ウェブデザインをいち早くチェックできるオススメWebギャラリーサイトを厳選してご紹介。 インスピレーションとしてはもちろん、クライアントの打ち合わせやイメージの共有にも活用できます。 積極的にインプットを増やし、デザインの引き出しを増やしてみましょう。 このリストは2年ぶりにまとめ直したアップグレード版となります。 コンテンツ目次 【2024追加分】最新Webギャラリーサイト landing.love Design Spells Godly BentoGrids 404s Footer Navbar Gallery 国内Webギャラリーサイト SANKOU! URA
web-sys: A requestAnimationFrame Loop View full source code or view the compiled example online This is an example of a requestAnimationFrame loop using the web-sys crate! It renders a count of how many times a requestAnimationFrame callback has been invoked and then it breaks out of the requestAnimationFrame loop after 300 iterations. Cargo.toml You can see here how we depend on web-sys and activ
= appConfig.MaxRequests"> Upgrade to a Webhook.site account to unlock unlimited requests This URL received the maximum of {{ appConfig.MaxRequests }} requests and can't accept more requests, emails or DNSHooks. New requests sent to this URL will return HTTP status code 410 Gone or 429 Too Many Requests and won't be logged. Also note that it is against our terms of service to use Webhook.site for a
この記事では、Webデザイン制作がグッと楽になる最新オンラインツール50個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行ってくれたりと、より快適にプロジェクトを進めることができる便利ツールが揃います。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール 2. Web制作便利ツール 3. デザインツール 4. アイコンツール 6. クリエイティブ・面白ツール Web制作の効率、生産性アップ!話題の最新オンラインツールまとめ
dioxus は Rust のGUIアプリケーションフレームワーク。 React を模した仮想DOM の APIで、 desktop アプリや wasm 吐き出しができる。 公式チュートリアルは desktop 版だったのでブラウザ版を探したら、たどり辛いところにあった。 Setup # rust や cargo のセットアップは略 $ cargo install trunk $ rustup target add wasm32-unknown-unknown # 公式ドキュメントになにもないが、 cargo add コマンドは cargo-edit が必要 # rust ユーザーなら常識かもだが、久しぶりなので知らなかった… $ cargo install cargo-edit # bundler として trunk というビルダーをインストール $ cargo install --lo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く