DirectX is coming to the Windows Subsystem for Linux At //build 2020 we announced that GPU hardware acceleration is coming to the Windows Subsystem for Linux 2 (WSL 2). What is WSL? WSL is an environment in which users can run their Linux applications from the comfort of their Windows PC. If you are a developer working on containerized workload that will be deployed in the cloud inside of Linux co
For React Native users, React 18 will ship in React Native with the New React Native Architecture. For more information, see the React Conf keynote here. What is Concurrent React? The most important addition in React 18 is something we hope you never have to think about: concurrency. We think this is largely true for application developers, though the story may be a bit more complicated for librar
C#でテキストエディタエンジンをフルスクラッチで実装してWebAssemblyで動かした話 - Qiita
デモ 以下のリンクから試せます。 https://crash.jp/apps/crash-editor/ 未圧縮版（5MB） https://crash.jp/apps/crash-editor-br/ Brotli圧縮版（2.1MB） 環境によっては表示まで数秒かかります。二回目以降はキャッシュから読み込まれるので、表示に時間はかかりません。 キャッシュはブラウザの開発ツールから削除可能です。以下はChromeの場合。 開発ツール > Applicationタブ > Cache > Cache Storage ※デモを何度か上げなおしているので、エラーになる場合にはキャッシュを削除してみてください 動作環境 WebAssemblyに対応したブラウザが必要ですが、最近のブラウザであればまず問題ないです。 自分で確認した環境 Windows 10 Pro, Chrome/新Edge/Fire
React 18 alpha版発表まとめ
先日、The Plan for React 18という記事が React チームから発表されました。これは React の次期メジャーバージョンである React 18 で予定されている変更や新機能を紹介するとともに、React 18 の alpha 版の公開を知らせるものです。この記事自体に技術的なトピックは載っておらず、それらはReact 18 Working Groupという新設されたリポジトリに Discussion としてまとめられています。 本記事では、今回あった発表のポイントを厳選してお伝えします。ポイントを絞ってお伝えするため載せる情報は取捨選択しています。隅々まで理解したいという方は原文か他の記事を参照しましょう。 アップグレードの簡単さ React 17 の際もそうでしたが、最近の React は「簡単にアップデートできる」ことをたいへん重要視しており、React 18
WebKit Features in Safari 16.4
Mar 27, 2023 by Patrick Angle, Marcos Caceres, Razvan Caliman, Jon Davis, Brady Eidson, Timothy Hatcher, Ryosuke Niwa, and Jen Simmons ContentsWeb Push on iOS and iPadOSImprovements for Web AppsWeb ComponentsCSSHTMLJavaScript and WebAssemblyWeb APIImages, Video, and AudioWKWebViewDeveloper ToolingWeb InspectorSafari Web ExtensionsSafari Content BlockersNew Restrictions in Lockdown ModeMore Improve
The Plan for React 18 のブログで React v18 の計画が発表され、アルファもリリースされました。当初の計画からは色々と変わりましたが、順調に進めば今年中に v18 がリリースされそうです。 このアルファリリースは、React 関連のライブラリ作者に試してもらってフィードバックもらうことを目的にしているため、現時点でプロダクトのコードに導入することは推奨していません。 アルファリリースなのでまだまだ破壊的な API も予想されます。 reactwg/react-18 フィードバックをもらう場所として、reactwg/react-18 という GitHub Discussions のためのリポジトリが作成されています。この Discussions は誰でも見ることはできますが書き込めるのは Collaborators になっている人のみです。そのため比較的議論の内容
content-visibility: the new CSS property that boosts your rendering performance | Articles | web.dev
The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS properties for improving page load performance. content-visibility enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility proper
What we will be working onWe will be working on optimizing the website of the company I work for coatconnect.com. PageSpeed Insights is a very powerful tool by Google. It allows us to analyze our website’s performance and figure out ways we can improve it. The problem with SPAs (Single-Page Applications) is that they show content after loading JavaScript chunks first, so it takes a little while on
Building a sidenav component Stay organized with collections Save and categorize content based on your preferences. In this post I want to share with you how I prototyped a Sidenav component for the web that is responsive, stateful, supports keyboard navigation, works with and without JavaScript, and works across browsers. Try the demo. If you prefer video, here's a YouTube version of this post: O
Googleは拡張機能の仕様であるManifest V2を2024年6月に終了し、最新版であるManifest V3に移行すると発表しています。この移行プロセスは批判の声を受けて2022年12月に一時停止されましたが、Manifest V3に改善を加えてManifest V2の非推奨化が再開されることが2023年11月16日に公式ブログで発表されました。 Resuming the transition to Manifest V3 - Chrome for Developers https://developer.chrome.com/blog/resuming-the-transition-to-mv3/ Google Chrome will limit ad blockers starting June 2024 | Ars Technica https://arstechnica.c
In React Labs posts, we write about projects in active research and development. We’ve made significant progress since our last update, and we’d like to share our progress. React Conf 2024 is scheduled for May 15–16 in Henderson, Nevada! If you’re interested in attending React Conf in person, you can sign up for the ticket lottery until February 28th. For more info on tickets, free streaming, spon
Optimize Cumulative Layout Shift Stay organized with collections Save and categorize content based on your preferences. Cumulative Layout Shift (CLS) is one of the three Core Web Vitals metrics. It measures the instability of content by combining how much visible content has shifted in the viewport with the distance the affected elements moved. Layout shifts can be distracting to users. Imagine yo
Rust製ブラウザエンジンの「Servo」がElectron代替を目指す「Tauri」への組み込みに対応、プロトタイプとして実装
Rust製ブラウザエンジンの「Servo」がElectron代替を目指す「Tauri」への組み込みに対応、プロトタイプとして実装 Linux Foundation傘下でRust製のWebブラウザエンジンとして開発が進められている「Servo」は、Electron代替を目指すフレームワーク「Tauri」への組み込みサポートを、プロトタイプとして実装したことを明らかにしました。 Servo can now be used in an experimental build of WRY, the webview library behind Tauri! More on offscreen rendering, multiple webviews, and other embedding improvements ↓ pic.twitter.com/jElJUusZZU — Servo (@Se
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
RenderingNG is a next-generation rendering architecture, that greatly outperforms what came before. RenderingNG was built over more than eight years and represents the collective work of many dedicated Chromium developers. It unlocks a huge amount of potential for fast, fluid, reliable, responsive and interactive web content. RenderingNG Here, you'll learn what we built, why we built it, and how i
Historical expertise provided by Jerry Beck, Amelia Cook, Jason DeMarco, Maureen Furniss, Monique Henry-Hudson, Willow Catelyn Maclay, Linda Simensky, Koji Yamamura Entries by Rebecca Alter, Elly Belle, Kambole Campbell, Jen Chaney, Amelia Cook, Alex Costello, Marley Crusch, Toussaint Egan, Christopher L. Inoa, Genevieve Koski, Willow Catelyn Maclay, Rafael Motamayor, Sammy Nickalls, Joshua Rivera
The Humble <img> Element And Core Web Vitals — Smashing Magazine
Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from Addy’s new book (also, check a free PDF preview). The humble <img> element has gained some superpowers over the years. G
Private Browsing 2.0
When we invented Private Browsing back in 2005, our aim was to provide users with an easy way to keep their browsing private from anyone who shared the same device. We created a mode where users do not leave any local, persistent traces of their browsing. Eventually all other browsers shipped the same feature. At times, this is called “ephemeral browsing.” We baked in cross-site tracking preventio
React 18 was years in the making, and with it brought valuable lessons for the React team. Its release was the result of many years of research and exploring many paths. Some of those paths were successful; many more were dead-ends that led to new insights. One lesson we’ve learned is that it’s frustrating for the community to wait for new features without having insight into these paths that we’r
Next-generation web styling Stay organized with collections Save and categorize content based on your preferences. There are a ton of exciting things happening in CSS right now—and many of them are already supported in today's browsers! Our talk at CDS 2019, which you can watch below, covers several new and upcoming features we thought should get some attention. This post focuses on the features y
本記事は 【unityプロ技】 Advent Calendar 2019 16日目の記事です。 本記事で記載されたソースコードはすべてパブリックドメインです。 修正履歴 ・12/18 インスタンシングの説明を修正 はじめに Unityアプリを安定化させるために試行錯誤を繰り返しているyoship1639です。 社内ではフロント側の開発基盤構成選定や共通基盤開発、ロジック、物理シミュレーション、ビジュアル周り(カメラワーク、シェーダ、演出)、最適化等様々なタスクを担当しています。 Unityはゲーム開発を大幅に効率化できる素晴らしいツールですが、そのすべての最適化が自動で行われる訳ではない事はご存じかと思います。詰まるところ、開発者側が最適化の手法を知っていなければUnityアプリの安定した動作を確保することはできません。しかし、参考文献が散見されどこを見直せばいいのか分からなかったりリファ
Gradient Generator Tool
Why use this gradient generator? Your design tool is making your gradients look worse 😬. Whenever you try to create a gradient across a wide range of hues in Figma, Photoshop, etc, you often will see a gray dead zone in the middle of your gradient. Here's an example: Color geeks: this is a slight approximation, since we’re squishing a cross-section of a cube into a circle. If you want your gradie
OBSのブラウザソースで動くものを作るあなたへ
MacOSのみ一部バージョンが異なるのは26.1.1リリースのタイミングでブラウザソースがクラッシュする問題が発生し、hotfixとして26.1.2リリースのタイミングでMac版のみアップデートがなされたためです。 このようにバージョンアップのタイミングはまちまちで、XSplitに関しては最近までChrome 68系、OBSについても最新版の30.xでもChrome 103系と執筆現在(2024/04/22)での最新バージョンであるChrome 124から21バージョン遅れをとっている状況です。 これらのアップデートが進まないことの背景には、OBSがCEF経由でページの表示をテクスチャとして使用するためにテクスチャ共有を利用しながら、ゲームなどの他のソフトウェアやキャプチャを使用するためにもテクスチャ共有を利用していることと、CEFがOffscreen Rendering(OSR)時にハー
React 19に入る(予定の)新機能のまとめ
こんにちは、株式会社TERASSでコードを書いている坊主、shuji-koikeです。 次期Reactの新機能が話題になっていますが、日本語の情報がまだあまりないようだったので拙い記事ですがまとめてみました。 The Next Major Version of React Reactの開発チームが過去数年間に渡ってreact@canaryチャンネルで開発を進めてきた新機能をreact@latestとしてリリースする準備が整ったようです。 そしてそれらの新機能をreactの次期メージャーバージョンとなるReact 19としてリリースする準備には入ったものの、ドキュメントの整備など正式なリリースまでにはまだ時間がかかるようです。 元記事とは順番が逆ですが、ここからreact@latest、そしていずれreact@19としてリリースされる予定の新機能の一部を要点をまとめて紹介していきます。 Re
WebKit Features in Safari 18.0
Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolved issues land in WebKit, the rendering engine driving Safari. New in Safari 18 Distraction Control Distraction Control lets you hide distracting items as you browse the web, such as sign-in banners, cookie preference popups, n
In React Labs posts, we write about projects in active research and development. We’ve made significant progress on them since our last update, and we’d like to share what we learned. React Server Components React Server Components (or RSC) is a new application architecture designed by the React team. We’ve first shared our research on RSC in an introductory talk and an RFC. To recap them, we are
The inert attribute Stay organized with collections Save and categorize content based on your preferences. The inert attribute is a global HTML attribute that simplifies how to remove and restore user input events for an element, including focus events and events from assistive technologies. Inert is a default behavior in dialog elements, such as when you use showModal to open a dialog for users t
Lazy-loading of <iframe> elements defers offscreen iframes from being loaded until the user scrolls near them. This saves data, speeds up the loading of other parts of the page, and reduces memory usage. As with lazy-loading for images, use the loading attribute to tell the browser you want to lazy-load an iframe. <iframe src="https://example.com" loading="lazy" width="600" height="400"></iframe>
I made a playable Pokémon overworld. It looks (mostly) like a normal video game, and you can try it in your web browser here: Although this looks like a video game, I did not write any game code. This program is actually a neural network mimicking a video game. Program? Game? Neural network? Programs: sequences of instructions that transform input→output A human could run through these instruction
Google Chrome 60からデベロッパーツールのAuditsタブからLighthouseが簡単に実行できるようになっているので使い方を見ていく。 Chrome89で日本語化されるので、この記事の内容とはだいぶ差異が出てきそう。 パフォーマンス測定に必須のLighthouseがChrome 89で日本語化される Chrome79から各評価項目の参照URLがだいぶ変わってしまっている。web.dev内のページに置き換わっているようだ。 Chrome 103からTimeSpan、Snapshotレポートが追加になり、ユーザーが操作した状態のページの分析も行うことが出来るようになりました。 DevTools の新機能 (Chrome 103) Lighthouseとは Lighthouseとはウェブページの品質改善の指針を「パフォーマンス」、「PWA」、「アクセシビリティ」、「ベストプラク
Interop 2023: continuing to improve the web for developers Stay organized with collections Save and categorize content based on your preferences. Again in 2023, all major browser vendors, and other stakeholders, work together to solve the top browsers compatibility issues. In 2023, all major browser vendors and other stakeholders are again working together to solve the top browser compatibility is
こんにちは。エンジニアの中島です。 2022年 4月からアクセシビリティ推進グループ（以下推進グループ）に在籍しています。 この組織は新設されたばかりで、まだ出来て半年の組織になります。 そのため、部署の目指すべきゴールイメージや、それを図るための指標といったものを作るところから始めることになりました。 本記事はそういったところについて共有させていただこうと思います。 立ち上げにあたっての話については以前同グループの嶌田が投稿した記事があるのでそちらをご参照ください。 www.lifull.blog 部署の目指すべきゴールイメージと行動軸 プロダクトに対する直接的な品質改善活動 新しい負債の発生を低減させるための文化醸成 指標化 プロダクトに対する直接的な品質改善活動の指標化 マニュアルテスト スコアリング 加えたマニュアルテスト項目とその重み Lighthouseの推奨するマニュアルテス
Jun 6, 2023 by Patrick Angle, Jean-Yves Avenard, Marcos Caceres, Ada Rose Cannon, Eric Carlson, Garrett Davidson, Jon Davis, Karl Dubost, Brady Eidson, Matthew Finkel, Simon Fraser, Brent Fulgham, Rachel Ginsberg, David Johnson, Anne van Kesteren, Mark Lam, Sihui Liu, Justin Michaud, Jer Noble, Tim Nguyen, Ben Nham, Richard Robinson, Michael Saboff, Alexey Shvaika, Jen Simmons, Sam Sneddon, Brando
あのDoom3ゲームがWebAssemblyを使ってブラウザ上で動く - Gabriel Cuvillier氏とのQ&A
原文(投稿日：2019/07/09)へのリンク Continuation LabsのシニアソフトウェアエンジニアであるGabriel Cuvillier氏が、有名なDoom 3ゲームを、WebAssemblyを使ってブラウザに移植した。7週間に及ぶフルタイムの開発作業か明らかになったのは、ヘビーウェイトなデスクトアプリケーションやゲームをシームレスに実行する上で現在のWebAssemblyが持っている、潜在的パフォーマンスと不足している部分の両方だ。InfoQはCuvillier氏とのインタビューで、開発中に遭遇した技術的課題や、WebAssemblyを使ったデスクトップアプリケーションに移植を検討中の開発者が学ぶべき教訓について聞いた。 Doom 3は2004年、Microsoft Windows用としてリリースされた、ホラーを題材とした一人称型シューティングゲームだ。Doom 3では、
業務で仮想スクロールを使った改善に関わる機会があり、その辺りの知見を活かしつつ、個人的にやりたかったことなども盛り込みつつ、React 用の OSS を作成しました。 もしよろしければスターいただけると励みになります。 使い方 以下のように通常の div などの場合とほぼ変わらない記述で、簡単に仮想スクロールによるパフォーマンス改善を導入することができます。 一般的に、仮想スクロールは単に表示するだけでもセットアップが面倒だったり、特に高さが未知もしくは可変の要素を表示した時にうまく動いてくれないものも多いですが、その辺りも自動的にハンドリングしてくれます。また各 component の bundle size も約 3kb(全体で約 4kb)なので導入し易いと思います。 import { VList } from "virtua"; export const App = () => {
The last year has been a great one for WebKit. After unveiling Safari 17 beta at WWDC23, we’ve shipped six releases of Safari 17.x with a total of 200 new web technologies. And we’ve been hard at work on multiple architectural improvement projects that strengthen WebKit for the long-term. Now, we are pleased to announce WebKit for Safari 18 beta. It adds another 48 web platform features, as well a
バーコード を読めるようになりたかったので ～ Shape Detection API を使ってみる～ - 虎の穴開発室ブログ
皆さん、こんにちは。 とらのあなラボのおっくんです。 「バーコードを見れば、なんとなくは読める」となんてことを言う友人がいます。 詳しく聞くと、すべてではないけれど一次元バーコードであれば目で見てなんとなく読めるんだそうです。 言うからには「読めると何かしら便利なんだろうな」と感じたので、技術に頼ってバーコードを読んでみることにしました。 使用する「Shape Detection API」と作成したアプリを紹介します。 最終的に完成したのがこちらです。 順を追って解説します。 実行環境 開発環境 OS:macOS Catalina 10.15.4 Chrome 84.0.4147.89 確認用デバイス OS:Android バージョン 10 Chrome 83.0.4103.106 Shape Detection API とは Shape Detection API は、外部のライブラリに
ReactのStrictモードがv18になって挙動が追加された。 追加された挙動となぜそれが追加されたのかということについて調べた。 せっかくなのでここでまとめておく。 わりと調べて書いたつもりですが、もし内容が間違ってたら教えてください。 Strictモードとは ここでは簡単にStrictモードについておさらいしておく。 以下がドキュメント。 (基本的にここで書いてある内容はドキュメントとReact18のDiscussionsに記載してある。どちらも最後に参照先のURLを記載しておく。) Strictモードとは、アプリケーションに存在している様々な潜在的な問題点をwarningとして出してくれるもの。 重要なことはStrictモードによって影響があるのは開発モードのみであって、本番環境ビルドでは何も影響がないということ。 したがって、Strictモードによるwarningがあったとしても
Picture perfect images with the modern <img> element - Stack Overflow
[Ed. note: While we take some time to rest up over the holidays and prepare for next year, we are re-publishing our top ten posts for the year. Please enjoy our favorite work this year and we’ll see you in 2023.] Images are one of the most pervasive parts of the web. This isn’t a huge surprise as we humans are quite visual and the <img> tag has been around for almost 30 years. Images are so promin
Ryan Carniato for This is Learning Posted on Feb 27, 2023 • Updated on Mar 21, 2023 There has been some buzz recently in the frontend world around the term "Signals". In seemingly short order they seem to be everywhere showing up in everything from Preact to Angular. But they are not a new thing. Not even remotely if you consider you can trace roots back to research in the late 1960s. At its found
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DirectX ❤ Linux - DirectX Developer Blog
React v18.0 – React
React v18 での Effects に関する変更内容(予定)
Optimize React Apps PageSpeed Insights Score - thetuteur
Building a sidenav component | Articles | web.dev
GoogleがManifest V2の非推奨化を再開、Chromeで将来的に広告ブロッカーを制限する計画が前進
React Labs: What We've Been Working On – February 2024 – React
Optimize Cumulative Layout Shift | Articles | web.dev
RenderingNG | Chromium | Chrome for Developers
The 100 Most Influential Sequences in Animation History
React Labs: What We've Been Working On – June 2022 – React
Next-generation web styling | Blog | web.dev
Unityアプリを高速・安定化するために見直すべき事を9選まとめてみた - Qiita
React Labs: What We've Been Working On – March 2023 – React
The inert attribute | Articles | web.dev
It's time to lazy-load offscreen iframes! | Articles | web.dev
Game Emulation via Neural Network
Lighthouseの計測結果を見ていく - Qiita
Interop 2023: continuing to improve the web for developers | Blog | web.dev
アクセシビリティ推進組織立ち上げ後半年間の動き - LIFULL Creators Blog
News from WWDC23: WebKit Features in Safari 17 beta
React Server Components 対応の仮想スクロールライブラリを作りました
News from WWDC24: WebKit in Safari 18 beta
React18でのStrictモードとuseEffectの挙動 - すな.dev
The Evolution of Signals in JavaScript