#Safari WebXR

[virtualrealitynewstoday]

Apple Vision Pro 在 VisionOS 2 中預設支援 Safari WebXR

在近年來的技術發展浪潮中，虛擬實境（VR）技術日趨成熟，已逐漸從娛樂與遊戲領域擴展到各行各業。在此背景下，WebXR API 的推出標誌著一個重要里程碑，這是一項使網頁能夠支持虛擬和增強實境（即XR技術）的網絡標準。Rose Canon，一名專門從事Web標準的Safari工程師，其展示了如何利用WebXR API在網站上創建沉浸式的虛擬實境體驗。 Rose介紹了WebXR的基本概念並通過一個國際象棋遊戲來展示其實際應用。在她的示範中，用戶只需點擊一個按鈕，便可啟動一個全面的虛擬實境體驗，其中包括與計算機對弈的棋盤。 隨著最新的 VisionOS 2 更新，Apple Vision Pro 在其內建的 Safari 瀏覽器中正式支援 WebXR…

[android-game-blogs]

The 5 Most Effective Augmented Reality Tools for Web Development

Introduction

Augmented Reality (AR) is changing how we interact with websites, making online experiences more interactive and engaging. The best part? No extra apps are needed WebAR allows AR elements to work directly in web browsers. This means businesses, from e-commerce to gaming, can integrate AR features effortlessly.

Many industries, including the best android game development company, are using AR to enhance user engagement and create more immersive web applications. In this article, we’ll explore five powerful AR tools that make web development more exciting and interactive.

1. 8th Wall – Pioneering WebAR Innovation

8th Wall is a leader in WebAR, allowing developers to create AR experiences directly in web browsers. No app downloads, just seamless AR.

Key Features -

No-App WebAR - Works directly in mobile browsers.

Cross-Platform Compatibility - Supports both Android and iOS.

Real-World Interactions - Includes marker-based and markerless AR.

Cloud Editor - Allows real-time collaboration on projects.

Why Use It?

For businesses wanting interactive marketing campaigns, virtual try-ons, or branded AR experiences, 8th Wall is a great choice. It’s especially useful for an android game development company usa aiming to add AR features to its games.

2. AR.js – Lightweight, Open-Source, and Powerful

AR.js is a free and efficient way to bring AR to websites. It’s an open-source JavaScript library that works smoothly on all devices.

Key Features -

Fast Performance - Optimized for web speed.

Multiple AR Modes - Supports marker-based, markerless, and location-based AR.

Cross-Browser Support - Works with Chrome, Safari, and Firefox.

Zero Cost - Ideal for developers on a budget.

Why Use It?

If you’re new to AR or need a simple solution, AR.js is perfect for experimenting with interactive elements. Many android game development company teams use AR.js to enhance their games with lightweight AR features.

3. Zappar – AR for Creative Experiences

Zappar provides an intuitive platform for businesses and developers to create interactive AR content. It’s a popular choice for WebAR and app-based AR.

Key Features -

ZapWorks Studio - A dedicated tool for AR development.

WebAR Support - Easily integrates into web pages.

Face and Image Tracking - Offers precise recognition for AR experiences.

SDK Integration - Works with JavaScript, Unity, and Three.js.

Why Use It?

Zappar is ideal for brands looking to create interactive marketing campaigns or engaging storytelling experiences. It’s also a great option for an android game development company india that wants to add AR elements to mobile games.

4. Three.js with WebXR – High-Quality 3D for AR

Three.js is a top choice for rendering 3D graphics in the browser. Combined with WebXR, it enables high-quality AR experiences.

Key Features -

Advanced 3D Graphics - Supports detailed rendering.

WebXR API Integration - Enables both AR and VR experiences.

Realistic Effects - Features lighting, shadows, and animations.

Strong Community Support - Extensive resources for developers.

Why Use It?

For developers wanting high-end AR applications, Three.js with WebXR is a powerful solution. Many android game development company associative groups use it for building immersive gaming experiences.

5. Vuforia – Enterprise-Grade AR

Vuforia is a robust AR platform known for precision and reliability. It’s widely used across industries like retail, manufacturing, and healthcare.

Key Features -

Advanced Image Recognition - Supports object and image-based tracking.

Cloud-Based Recognition - Ideal for large-scale applications.

Easy Integration - Works with WebAR frameworks and mobile SDKs.

Enterprise Security - Ensures data protection and stability.

Why Use It?

If you’re working on large-scale AR solutions, Vuforia is a reliable choice. A best android game developer company can use its tracking features to create realistic and interactive gaming environments.

Conclusion

WebAR has made AR more accessible, allowing businesses and developers to integrate immersive experiences without requiring additional apps. Whether it’s a lightweight solution like AR.js or a premium tool like Vuforia, there are plenty of options to fit different needs.

Many companies, including android game development company india professionals, are leveraging AR to create engaging web and mobile applications. As AR continues to evolve, it’s time to embrace this technology and take web development to the next level.

[takahashicleaning]

空間(によるスペイシェル)Webの最適化 - Apple Vision Pro

「イマーシブ」とは、「没入」「没入感のある」と定義されている言葉ではあります。

しかし、空間(によるスペイシェル)コンピューティング体験とは、3D映画館のスクリーンから飛び出した3D物体や3D特殊効果が自らの身体へ数センチの距離まで接近する3D表現ができるプラットフォームを実現可能にします。

2010年代に流行した3Dメガネをかけて3D映画館で見た感覚に近い感じがします（この場合、3DメガネがApple Vision Pro）

Web上でvisionOSの機能を最大限に活用する方法を学びましょう。

3Dイマーシブ体験がインターネットの資源と融合して使用できるようになります。

選択した対象をハイライト表示する機能の改善や、空間(によるスペイシェル)写真およびパノラマ画像をフルスクリーンで表示する機能など、最新のアップデートを紹介します。

既存のWeb標準を利用して、WebSpeechによる音声入力やテキスト読み上げ、WebAudioによる空間(によるスペイシェル)サウンドスケープの作成、WebXRによるイマーシブな体験を実現する方法について知ることができます。

WebXRとは・・・

W3Cが2018年にImmersive Web WGを発足してGoogle, Microsoft, Mozillaなどのメンバーが中心となって推進しているのが、JavaScript APIによるXRの標準化仕様であるWebXRです。

他には、WebXR以前にもWebVRというVR向けの仕様がありましたが、現在はARやMRにも対応すべくWebXRの中に統合されました。

インターネットで扱うため、WebVRは、オープンソース化のためにOpenXRの方向に進んでます。

さらに、Apple Intelligenceなどのジェネレーティブ人工知能でWebサイトをアプリにする機能も拡張することで

Apple Vision ProやiPhoneへ写真も3D生成してデスクトップアプリに仕上げてくれそうなインスピレーションがきました。

Safariでのビデオ鑑賞がワイドシアターのように、どの「環境」にいても、巨大なスクリーンでSafariで表示されたビデオを楽しめます。

それはまるで映画館のように圧倒的な鑑賞体験。スクリーンに印象的な光や反射も加えました。あなたのYouTubeやNetflixなどのビデオをかつてないほど美しく、そして、大きくワイドに映し出します。

参考として・・・

イマーシブな体験は、ユーザーが物理的な世界とデジタルな世界の間で没入感を得ることを指します。

これは、視覚、聴覚、触覚、嗅覚、さらには味覚までを含むことができ、ユーザーに強い感情的なインパクトを与えることができます。

現在、イマーシブ体験はエンターテインメント業界を中心に広がっています。

例えば、VR（仮想現実）やAR（拡張現実）を利用したテーマパークやアトラクション、イマーシブシアターなどが人気です。

3D映画は、イマーシブ体験の一部として位置づけられます。3D映画は視覚的な深度を提供し、観客が映画の世界に入り込む感覚を強化します。

これにより、従来の2D映画よりも強い没入感を得ることができます。

イマーシブ体験は、エンターテインメントだけでなく、教育、医療、マップアプリ、車などの運転補助、交通標識など多岐にわたる分野で活用されています。

サードパーティー製のスマホケースのようにApple Vision Proと一体化したヘルメットもデザイン上相性が良いかもしれません。本体の重さを全体に分散します。

安全面からも普段からヘルメット着用の抵抗感もなくなります。

技術の進化とともに、ますます現実的でインタラクティブな体験が可能となり、今���もその需要は拡大していきます。

＜おすすめサイト＞

visionOSにおけるスクリーンから飛び出すインタラクティブな体験の設計 - Apple Vision Pro

WebXRによる3Dイマーシブなインターネット体験の構築 - Apple Vision Pro

実用に向けた大規模言語モデルApple インテリジェンス 2024

Apple Vision Pro 2024

ジェームス・キャメロン： 「アバター」を生み出した好奇心

[metaverse-ar-vr]

Safari on Apple Vision Pro now lets WebXR leverage the headset's default gaze-and-pinch input system. #AR #VR #Metaverse

[emselimahmed]

YouTube app for Apple Vision Pro is "on the roadmap"

[mixityapp]

Apple Vision Pro Will Support WebXR for Immersive Web Experiences

https://www.roadtovr.com/apple-vision-pro-webxr-support-safari-model/

[businessdaily05]

Apple criticized because Safari on iOS still does not support WebXR

Apple criticized because Safari on iOS still does not support WebXR

⏰ 8 mins ago Medhi Naitmazi React If Apple has invested heavily in augmented reality since the introduction of its own SDK called ARKit since the appearance of the iPhone X in 2017, the firm has not opened its system to other open standards on the web. Industry experts say the company “has been a drag on WebAR innovation” because Safari still doesn’t support the WebXR API. A recurring problem…

[macnews-org]

Apple targeted for Safari lacking WebXR support despite company’s AR/VR ambitions

Apple targeted for Safari lacking WebXR support despite company’s AR/VR ambitions

Apple has been investing a lot in augmented and virtual reality since the introduction of its own ARKit API. However, when it comes to open standards on the web, Apple is still far behind its competitors. In the opinion of industry insiders, the company “has been a drag on innovation in WebAR,” as Safari still lacks support for the WebXR API. more… The post Apple targeted for Safari lacking WebXR…

[telecomloading758]

Unity Web Player Firefox

Unity Web Player Firefox Not Working

Unity Web Player Firefox

Unity Web Player is a browser-based version of the graphics engine designed by the same company called Unity. It includes advanced rendering technology that allows you to load games and 3D applications in your web browser like Chrome, Firefox or IE.

Unity Web Player installs in very little time and works in most browsers. How to add page no in word 2016. The web site run by Unity also includes some cool-looking demonstrations of what the technology can do.

Unfortunately almost all other browser developers want to do the same, even FireFox. So by the end of 2016 pretty much all browsers, including FireFox, will no longer support NPAPI plugins. Unity now provides WebGL as target platform, but it's not even close to be a replacement for the webplayer.

Unity is the ultimate game development platform. Use Unity to build high-quality 3D and 2D games, deploy them across mobile, desktop, VR/AR, consoles or the Web, and connect with loyal and enthusiastic players and customers.

Join the WebVR Slack (join the #unity channel) Compatibility Unity editor version. 2018.4 and newer. Browser Compatibility. WebXR has limited support at time of writing. See compatibility at caniuse or on MDN. A special build of Firefox, Fiefox Reality, has built-in support for WebXR. The polyfill will fall back to the old WebVR API if it is.

The control panel of the Unity Web Player includes customization options such as cache settings.

Make sure you have Firefox: This game will only work properly using the Mozilla Firefox web browser. The game will not work properly using Safari, Internet Explorer, or Chrome.

Overall, Unity offers access to some pretty cool 3D graphics!

Unity Web Player 5.3.8f0 on 32-bit and 64-bit PCs

Unity Web Player Firefox Not Working

This download is licensed as freeware for the Windows (32-bit and 64-bit) operating system on a laptop or desktop PC from media players without restrictions. Mac os x 10.16. Unity Web Player 5.3.8f0 is available to all software users as a free download for Windows.

Filed under:

Unity Web Player Firefox

Unity Web Player Download

Freeware Media Players

Major release: Unity Web Player 5.3

Web Playing Software

[virtualrealitynewstoday]

WebXR 對 Apple Vision Pro 的新支援：引入自然輸入方式

隨著 Apple Vision Pro 的推出，WebXR 在 visionOS 平台上的應用迎來了新的發展。目前，開發者和用戶可以在 Safari 17.4 的 visionOS 1.1 版本中探索一種新的互動方式——即所謂的「瞬時指針輸入模式」，這被視為一種更自然且注重隱私保護的互動方法。 WebXR 技術使得從 WebGL 創建的三維體驗能夠轉變為直接在瀏覽器中體驗的沉浸式、空間化內容。此技術遵循由 W3C 定義的 Web 標準，是呈現沉浸式內容的一個重要選擇。 傳統上，由於 WebXR 體驗完全沉浸且完全通過 WebGL 渲染，無法使用 DOM 內容或滑鼠、觸控板等傳統二維輸入方法進行互動。因此，這要求 WebXR 需要開發一種全新的、適合空間體驗的互動模型。 visionOS…

[techiespage]

Chrome 82 was skipped entirely, and even though v83 is now in beta, it's definitely one of the smallest updates we've seen in a while. Improved form controls Microsoft has already merged a few improvements from its Chromium-based Edge browser back to mainline Chrome, and Chrome 83 includes another change: updated form controls. No wait, don't close the article, I promise this is interesting. Chrome's form controls (buttons, text fields, etc.) are all over the place, design-wise. Some of them came from Safari/WebKit, some have gradients, some don't have gradients, and so on. Microsoft and Google have been working to standardize the appearance of form elements across all operating systems, and the result is a more minimalist design with no gradients. Besides the appearance, some form elements have also been reworked for better usability on touch screens. For example, the time picker now has large dropdown menus for selecting the hour and minute, instead of relying solely on keyboard input. However, it doesn't appear that the updated controls have made their way to Chrome for Android. While the Android browser already uses system dialogs in some cases (e.g. the time picker opens the same time picker you get in the Clock app), the new progress bars would be nice to have. Other features As always, Chrome 83 includes changes for both users and developers. Here are some smaller changes in this update: The new @supports selector() feature makes it easier to check if a CSS feature is supported before it is used. The Barcode Detection API is now enabled by default. Downloads from sandboxed iframes are now blocked, preventing malicious ads and other embedded content from downloading files. WebXR content (e.g. AR and VR content) can now display HTML on top of 3D rendered environments. The new Performance.measureMemory() function estimates the memory usage of the current web page. #chrome #beta #controls #ar #vr #3d #html #android #google #api #css #update #clock #safari #webkit #microsoft #techies_page_chrome #techies_page #techies #sandbox #tech #technology #usa #unitedstatesofamerica #unitedkingdom #australia #europe #browser #us #india https://www.instagram.com/p/B_G_s6dgLFz/?igshid=1rpu2498t66tr

[takahashicleaning]

WebXRによる3Dイマーシブなインターネット体験の構築 - Apple Vision Pro

「イマーシブ」とは、「没入」「没入感のある」と定義されている言葉ではあります。

しかし、空間(によるスペイシェル)コンピューティング体験とは、3D映画館のスクリーンから飛び出した3D物体や3D特殊効果が自らの身体へ数センチの距離まで接近する3D表現ができるプラットフォームを実現可能にします。

2010年代に流行した3Dメガネをかけて3D映画館で見た感覚に近い感じがします（この場合、3DメガネがApple Vision Pro）

WebXRを使用して、visionOSのWebサイトにフル3Dイマーシブ体験を追加する方法をご紹介します。

3Dイマーシブ体験がインターネットの資源と融合して使用できるようになります。

visionOSの入力機能をフルに活用するWebXRインターネット体験を構築する方法や、シミュレーターを使用してmacOS上でWebXRインターネット体験をテストする方法を説明します。

WebXRとは・・・

W3Cが2018年にImmersive Web WGを発足してGoogle, Microsoft, Mozillaなどのメンバーが中心となって推進しているのが、JavaScript APIによるXRの標準化仕様であるWebXRです。

他には、WebXR以前にもWebVRというVR向けの仕様がありましたが、現在はARやMRにも対応すべくWebXRの中に統合されました。

インターネットで扱うため、WebVRは、オープンソース化のためにOpenXRの方向に進んでます。

さらに、Apple Intelligenceなどのジェネレーティブ人工知能でWebサイトをアプリにする機能も拡張することで

Apple Vision ProやiPhoneへ写真も3D生成してデスクトップアプリに仕上げてくれそうなインスピレーションがきました。

Safariでのビデオ鑑賞がワイドシアターのように、どの「環境」にいても、巨大なスクリーンでSafariで表示されたビデオを楽しめます。

それはまるで映画館のように圧倒的な鑑賞体験。スクリーンに印象的な光や反射も加えました。あなたのYouTubeやNetflixなどのビデオをかつてないほど美しく、そして、大きくワイドに映し出します。

参考として・・・

イマーシブな体験は、ユーザーが物理的な世界とデジタルな世界の間で没入感を得ることを指します。

これは、視覚、聴覚、触覚、嗅覚、さらには味覚までを含むことができ、ユーザーに強い感情的なインパクトを与えることができます。

現在、イマーシブ体験はエンターテインメント業界を中心に広がっています。

例えば、VR（仮想現実）やAR（拡張現実）を利用したテーマパークやアトラクション、イマーシブシアターなどが人気です。

3D映画は、イマーシブ体験の一部として位置づけられます。3D映画は視覚的な深度を提供し、観客が映画の世界に入り込む感覚を強化します。

これにより、従来の2D映画よりも強い没入感を得ることができます。

イマーシブ体験は、エンターテインメントだけでなく、教育、医療、マップアプリ、車などの運転補助、交通標識など多岐にわたる分野で活用されています。

サードパーティー製のスマホケースのようにApple Vision Proと一体化したヘルメットもデザイン上相性が良いかもしれません。本体の重さを全体に分散します。

安全面からも普段からヘルメット着用の抵抗感もなくなります。

技術の進化とともに、ますます現実的でインタラクティブな体験が可能となり、今後もその需要は拡大していきます。

＜おすすめサイト＞

実用に向けた大規模言語モデルApple インテリジェンス 2024

Apple Vision Pro 2024

ジェームス・キャメロン： 「アバター」を生み出した好奇心

[tak4hir0]

Every market is ruled by certain common concepts, and JavaScript development is no exception. The product lifecycle is a concept that you can apply to several different environments to understand and predict their behavior. It is a business concept that helps us understand the stages that a product goes through during its life, explaining the impact of these stages on its popularity measure—in most cases, sales. If we observe market behavior patterns, we can estimate the current stage of a product and therefore make some predictions about its popularity. There are four stages: introduction, growth, maturity, and decline, and on the chart above, you can see the impact on expected product sales for each stage. For example, smartphones sales aren’t growing like five years ago—actually, quite the opposite is true—so we can fairly say that smartphones are getting into their maturity stage. In the past few years, we’ve seen the introduction of a lot of new technologies in JavaScript, but we needed time to see how the market was going to adopt them. Nobody wants to be the specialist on another promising technology that ends with zero adoption. Now, however, is the time to take another look. In this article, I will take a look at how popular JavaScript is becoming and the factors that may have affected this popularity, and I will try to predict what the future of JavaScript will look like. The Future of JavaScript Language Features Since the European Computer Manufacturers Association (ECMA) established the year-based release cycle for ECMAScript, a standardized JavaScript specification, we haven’t seen a lot of new features coming to the language—just a few each year. This could be one of the reasons we saw an increase of adoption of languages that compile to ES5 like TypeScript or ReasonML, both bringing features to the language that are highly requested by the community. This is not new—JavaScript went through this process before (CoffeeScript) and, in the end, those features ended up being merged into the language standard itself, and that’s probably the future that we can expect for these new typed features, too. But now we are starting to see a game changer move in the compile-to-js market with the increasing availability of WebAssembly in the browsers. Now, we can use almost any language and compile it to run at almost native speed in a browser and, more importantly, we are starting to see support for future-proof features like support for threads that will allow us to take advantage of the multi-processor architecture that represents the inevitable future of all devices. The official toolchain for WebAssembly will help you to compile C/C++, but there are a lot of community provided compilers for different languages, like Rust, Python, Java, and Blazor (C#). Particularly, the Rust community is pretty active and we started to see complete front-end frameworks like Yew and Dodrio. This brings a lot of new possibilities to browser-based apps, and you only need to test some of the great apps built with WebAssembly to see that near-native browser-based apps are a reality now, e.g., Sketchup or Magnum. Adoption of typed languages that compile to ES5 is mature enough, the players are well established, and they won’t disappear (or be merged with ES) in the near future, but we’ll see a slow shift in favor of typed languages with WebAssembly. Web Front-end Frameworks Every year, we see a big fight on the front-end frameworks market for the web, and React has been the indisputable winner for the past few years—since the introduction of their game-changer technology, the Virtual DOM, we saw an almost obligated adoption from their counterparts in order to remain relevant in the battle. Some years ago, we saw the introduction of a radical new approach to web application development with Svelte, the “compiler framework” that disappears at compile time leaving small and highly efficient JavaScript code. However, that feature was not enough to convince the community to move to Svelte, but with the recent launch of Svelte 3.0, they introduced real reactive programming into the framework and the community is thrilled, so perhaps we are witnessing the next big thing in front-end frameworks. Inspired by the destiny operator: var a = 10; var b <= a + 1; a = 20; Assert.AreEqual(21, b); Svelte brings reactivity to JavaScript by overloading the use of label statements with reactivity at compile time by instructing the code to be executed in topological order: var a = 10; $: b = a + 1; a = 20; Assert.AreEqual(21, b); This is a radical new idea that might help in different contexts, so the creator of Svelte is also working on svelte-gl, a compiler framework that will generate low-level WebGL instructions directly from a 3D scene graph declared in HTMLx. Needless to say that React, Angular, and Vue.js won’t disappear overnight, their communities are huge, and they’ll remain relevant for several years to come—we are not even sure if Svelte will be the actual successor, but we can be sure of something: We’ll be using something different sooner or later. WebXR and the Future of the Immersive Web Virtual reality has been struggling for the past 60 years to find a place in the mainstream, but the technology was just not ready yet. Less than ten years ago, when Jon Carmack joined Oculus VR (now part of Facebook Technologies, LLC), a new wave of VR started to rise, and since then, we’ve seen a lot of new devices supporting different types of VR and of course the proliferation of VR-capable applications. Browser vendors didn’t wanted to lose this opportunity, so they joined with the WebVR specification allowing the creation of virtual worlds in JavaScript with WebGL and well-established libraries like three.js. However, the market share of users with 6dof devices was still insignificant for massive web deployments, but the mobile web was still able to provide a 3D experience with the device orientation API, so we saw a bunch of experiments and a lot of 360 videos for a while. In 2017, with the introduction of ARKit and ARCore, new capabilities were brought to mobile devices and all sorts of applications with AR and MR experiences. However it still feels a little unnatural to download one specific app for one specific AR experience when you are exploring your world around you. If we could only have one app to explore different experiences… This sounds familiar. We solved that problem in the past with the browser, so why not give it another shot? Last year, Mozilla introduced the WebXR Device API Spec (whose last working draft, at the time of this writing, is from two weeks ago) to bring AR, VR, and MR (ergo XR) capabilities to the browser. A few of the most important browser vendors followed with their implementation, with an important exception: Safari mobile, so to prove their point, Mozilla released a WebXR capable browser under the iOS platform WebXR Viewer. Now, this is an important step because the combination of AR and VR brings 6dof to mobile devices and mobile device-based headsets like Google Cardboard or the Samsung Gear VR, as you can see in this example, increasing the market share of 6dof devices by a large margin and enabling the possibility of a large-scale web deployment. At the same time, the guys at Mozilla have been working on a new web framework to facilitate the creation of 3D worlds and applications called A-Frame, a component-based declarative framework with HTML syntax based on three.js and WebGL, having just one thing in mind—to bring back the fun and ease of use to web programming. This is part of their crusade to the immersive web, a new set of ideas on how the web should look like in the future. Luckily for us, they are not alone, and we’ll start to see more and more immersive experiences on the web. If you want to give it a try, go ahead download the WebXR Viewer and visit this site to see the possibilities of the immersive web. Once again, standard browser-based apps won’t fade in a year or two—we’ll probably always have them. But 3D apps and XR experiences are growing and the market is ready and eager to have them. Native Support for ES6 Almost every technology invented in JavaScript in the past decade was created to solve problems generated by the underlying implementation of the browsers, but the platform itself has matured a lot over these past few years, and most of those problems have disappeared, as we can see with Lodash, which once reigned the performance benchmarks. The same is happening with the DOM, whose problems once were the actual inspiration for the creation of web application frameworks. Now, it is a mature API that you can use without frameworks to create apps—actually, that’s what web components are. They are the “framework” of the platform to create component-based apps. Another interesting part of the platform evolution is the language itself. We’ve been using Babel.js for the past few years to be able to use the latest features of ECMAScript, but since the standard itself started to stagnate a little bit in the last few years, that was enough time to allow the browser vendors to implement most of their features, including native support of the static import statement. So now, we can start to consider the creation of applications without Babel.js or other compilers since we have (again) the support of the language features in the platform it self, and since Node.js uses the same V8 VM as Google Chrome, we’ve started to see stronger support of ES6 in Node.js, even with the static import statement under the experimental-modules flag. This doesn’t mean that we’ll stop seeing apps being compiled at a professional level, but it means that starting with a browser-based application will be easy and fun as it once was. Server-side JavaScript Even though JavaScript started with server side in 1995 with the Netscape Enterprise Server, it wasn’t until Ryan’s Dahl presentation in 2009 that JavaScript started to be seriously considered for server-side apps. A lot of things happened in the past decade to Node.js. It evolved and matured a lot, creating once again the opportunity for disruption and new technologies. In this case, it comes from the hand of its very own creator, Ryan Dahl, who has been working on a new perspective of server-side secured apps with Deno, a platform that supports natively the latest language features as async/await, and also the most popular compile-to-js language TypeScript, targeting the best performance thanks to their implementation in Rust and the usage of Tokio, but more importantly with a new security philosophy that differentiates it from most of the server-side platforms like Python, Ruby, or Java). Inspired by the browser security model, Deno will let you use the resources of the host only after the user explicitly granted the permissions to the process, which might sound a bit tedious at the beginning, but it might result in a lot of implications by allowing us to run unsecured code in a secured environment by just trusting the platform. Node.js will still be there in the future but may be we’ll start to see serverless services like AWS Lambda and Azure Functions to provide the Deno functionality as an alternative to provide unsecured server-side code execution on their systems. Conclusion These are exciting times in the JavaScript world—a lot of technologies have matured enough to leave space for innovation, the active community never stopped to amaze us with their brilliant and incredible ideas, and we expect a lot of new alternatives to well-established tools since their mature stages are arriving quickly; we won’t stop using them since a lot of them are really good and there is plenty of proof in the battlefield, but new and exciting markets will start to emerge, and you’d better be prepared. Staying up to date with the latest in JavaScript world isn’t easy, because of the pace of development, but there are some sources that can really help. First, the most important news source, in my opinion, is Echo JS, where you can an incredible amount of new content every hour. However, if you don’t have the time, the JavaScript Weekly newsletter is an excellent summary of the week in JS. Besides this, it is also important to keep an eye on the conferences around the world, and YouTube channels like, JSConf, React Conf, and Google Chrome Developers are wonderfully helpful. Conversely, if you’re interested in seeing some constructive critique of where JavaScript is heading, I recommend reading As a JS Developer, This Is What Keeps Me Up at Night by fellow JavaScript developer Justen Robertson.

[suzanneshannon]

Interview with a Pornhub Web Developer

Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser’s video limits to pushing ads through WebSocket so ad blockers don’t detect them, you have to be clever to innovate at the bleeding edge of the web.

I was recently lucky enough to interview a Web Developer at the web’s largest adult website: Pornhub. I wanted to learn about the tech, how web APIs can improve, and what it’s like working on adult websites. Enjoy!

Note: The adult industry is very competitive so there were a few questions they could not answer.  I respect their need to keep their tricks close to the vest.

Adult sites obviously display lots of graphic content.  During the development process, are you using lots of placeholder images and videos?  How far is the development content and experience from the end product?  

We actually don’t use placeholders when we are developing the sites! In the end, what matters is the code and functionality, the interface is something we are very used to at this point. There’s definitely a little bit of a learning curve at first, but we all got used to it pretty quickly. 

When it comes to cam streams and third party ad scripts, how do you mock such important, dynamic resources during site and feature development?

For development, the player is broken into two components.  The basic player implements the core functionality and fires events.  Development is done in a clean room. For integration on the sites, we want those third-party scripts and ads running so we can find problems as early in the process as possible.  For special circumstances we’ll work with advertisers to allow us to manually trigger events that might normally be random.

An average page probably has at least one video, GIF advertisements, a few cam performer previews, and thumbnails of other videos.  How do you measure page performance and how do you keep the page as performant as possible? Any tricks you can share?

We use a few measurement systems. 

Our player reports metrics back to us about video playback performance and general usage

A third-party RUM system for general site performance.

WebpageTest private instances to script tests in the available AWS data centers.  We use this mostly for seeing what might have been going on at a given time. It also allows us to view the “waterfall” from different locations and providers.

I have to assume the most important and complex feature on the front-end is the video player.  From incorporating ads before videos, marking highlight moments of the video, changing video speed, and other features, how do you maintain the performance, functionality, and stability of this asset?

We have a dedicated team working strictly on the video player, their first priority is to constantly monitor for performance and efficiency. To do so we use pretty much everything that is available to us; browsers performance tools, web page tests, metrics  etc. The stability and quality is assured by a solid QA round for any updates we do. 

How many people are on the dedicated video team?  How many front-end developers are on the team?

I’d say given the size of the product the team size is lean to average. 

During your time working on adult websites, how have you seen the front-end landscape change?  What new Web APIs have made your life easier?

I’ve definitely seen a lot of improvements on every single aspect of the frontend world;

From plain CSS to finally using LESS and Mixins, to a flexible Grid system with media queries and picture tags to accommodate different resolutions and screen sizes

jQuery and jQueryUI are slowly moving away, so we are going back to more efficient object oriented programming in vanilla JS. The frameworks are also very interesting in some cases

We love the new IntersectionObserver API, very useful for a more efficient way to load images

We started playing with the Picture-in-Picture API  as well, to have that floating video on some of our pages, mainly to get user feedback about the idea.

Looking forward, are there any Web APIs that you’d love changed, improved, or even created?

Some of them that we would like changed or improved; Beacon, WebRTC, Service Workers and Fetch:

Beacon: some IOS issues where it doesn’t quite work with pageHide events

Fetch:  No download progress and doesn’t provide a way to intercept requests

WebRTC:  Simulcast layers are limited even for screenshare, if the resolution is not big enough

Service Workers: Making calls to navigator.serviceWorker.register isn’t intercepted by any service worker’s Fetch event handlers

WebVR is has been improving in the past few years — how useful is WebVR in its current state and how much of an effort are adult sites putting into support for VR content?  Do haptics have a role in WebVR on your sites?

We’re investigating webXR and how to best adapt to emerging spatial computing use cases, and as the largest distribution platform we need to support creators and users however they want to experience our content. But we’re still exploring what content and platforms should be like in these new mediums.

We were the first major platform to support VR, computer vision, and virtual performers, and will continue to push new technology and the open web. 

With so many different types of media and content on each page, what are the biggest considerations when it comes to desktop vs. mobile, if any? 

Functionality restricted by operating system and browsers type mainly. iOS vs Android is the perfect example when it comes to a completely different set of access and features. 

For example, some iOS Mobile devices don’t allow us to have a custom video player while in Fullscreen, they force the native QuickTime player. That has to be considered when we develop new ideas. Android on the other hand gives us complete control and we can push our features to the Fullscreen mode.

Adaptive streaming in HLS is also another example, IE and Edge are picky when it comes to HLS streaming quality, in that we need to prevent certain of the higher qualities, otherwise the video would constantly stutter and have artifacts.

What is the current minimum browser support for the adult sites you work on?  Is Internet Explorer phased out?

We supported IE for a very long time but recently dropped support for anything older than IE11. With it we also stopped working with Flash for the video player. We are focusing on Chrome, Firefox and Safari mainly. 

More broadly, can you share a little about the typical adult site’s stack?  Server and/or front-end? Which libraries are you using?

Most of our sites use the following as a base:

Nginx

PHP

MySQL

Memcached and/or Redis

Other technologies like Varnish, ElasticSearch, NodeJS, Go, Vertica are used where appropriate.

For frontend, we run mostly vanilla Javascript, we’re slowly getting rid of jQuery and we are just beginning to play with frameworks, mostly Vue.js

From an outsider’s perspective, adult sites generally seem to be very much alike:  lots of video thumbnails, aggregated video content, cam performers, adverts. As someone who works on them, what are the differentiating features that make adult sites unique?

We work very hard to give each brand some uniqueness at different levels; content library, UX and features sets, and across a lot of different algorithms. 

Before applying and interviewing for your current employer, what were your thoughts on potentially working on adult sites?  Did you have any hesitations? If so, how were your fears to put rest?

It never really bothered me, in the end the challenge was so appealing. The idea of millions of people potentially interacting with features I worked on was really motivating. That proved to be true very quickly, the first time something I worked on went live, I was super proud, and I indeed told all my friends to go check it out! The fact that porn will never die is reassuring for job stability as well!

In as far as end product, sharing that you work on adult sites may not be the same as working at a local web agency.  Is there a stigma attached to telling friends, family, and acquaintances you work on adult sites? Is there any hesitance in telling people you work on adult sites?

I’m very proud to work on these products, those close to me are aware and fascinated by it. It’s always an amazing source of conversation, jokes and is genuinely interesting. 

Having worked at agencies outside the adult industry, is there a difference in atmosphere when working on adult sites?

The atmosphere here is very relaxed and friendly. I don’t notice any major differences with respect to work culture at other agencies, other than the fact that it’s much bigger here than anywhere I have worked previously. 

Being a front-end developer, which teams do you work most closely with?  What are the most common daily communication methods?

We work equally with backend developers, QA testers and product managers – most of the time we simply go up to each other’s desk and talk. If not, chat (MS Teams) is very common. Then come emails.

Lastly, is there anything you’d like to share as a front-end developer working on adult sites?

It’s really exciting being a part of creating how users experience such a widely used product. We are generally at the forefront of trends and big changes in tech as they roll out, which keeps it fun and challenging.

Interview end

I found our interview really enlightening. I was a bit surprised they didn’t use images while developing features and designs. It’s exciting to see that Pornhub continues to push the bleeding edge of the web with WebXR, WebRTC, and Intersection Observer. I was also happy to see that they consider the current set of web APIs sufficient to start dropping jQuery.

I really wish I’d have been able to get more specific tech tips out of them; performance and clever hacks especially. I’m sure there’s a wealth of knowledge to be learned behind their source code! What questions would you have asked?

The post Interview with a Pornhub Web Developer appeared first on David Walsh Blog.

Interview with a Pornhub Web Developer published first on https://deskbysnafu.tumblr.com/

[etechwire-blog]

Chrome 67 is here, with password-free logins and improved VR

New Post has been published on https://www.etechwire.com/chrome-67-is-here-with-password-free-logins-and-improved-vr/

Chrome 67 is here, with password-free logins and improved VR

Chrome 67 is hitting desktops today, with support for password-free logins courtesy of Web Authentication (WebAuthn), plus improved support for sensors and virtual reality headsets.

WebAuthn is an open standard that lets you access your accounts using biometric data, a mobile app, or a portable device like a YubiKey. This can either replace passwords, or supplement them as two-factor authentication to make your accounts more secure.

It made its mainstream browser debut last month with the release of Firefox 60, and should be arriving in Microsoft Edge very soon. Apple has also pledged its support for the standard, though it hasn’t specified when it might appear in Safari.

Its main appeal is protection from phishing attacks, because there’s no fixed line of characters (like an alphanumeric password) that grants access.

Sensors and sensibility

It’s not just security – Chrome 67 also adds support for several other technologies that’ll help you have more fun on the web.

The browser now supports the Generic Sensor API, which enables web apps to use input from components including accelerometers and ambient light sensors. For example, a web app could display a 3D model, which you could see from different angles by rotating your device. That’s something you can currently do in desktop apps, but hasn’t previously been possible in Chrome.

There’s also support for the WebXR Device API, which will make virtual reality experiences more consistent across different devices. That includes mobile-based VR headsets like Google Daydream View and Samsung Gear VR, and desktop-hosted headsets like Oculus Rift, HTC Vive, and Windows Mixed Reality Headsets.

It’ll be up to web app developers to decide how to use the API, but Google suggests it could be used to improve immersive 360-degree videos, home shopping experiences, and 3D art installations.

Chrome 67 is available to download now for Windows, macOS and Linux.

Via ZDNet