Web Design

A minimal Web Push example

Web push notifications allow users to opt-​in to asynchronous messages from a server to a web application. The message can be sent at any time, even when the web application or the web browser is inactive. This W3C standard, based on the HTTP/2 protocol, is now supported by Chrome, Firefox, Edge, Opera, and Safari – but not by iOS.
2020-04-17T17:49:50-04:00February 8, 2020|Categories: Browser, Cloud, JavaScript, Progressive Web App, PWA, Web Design|0 Comments

Chrome 79 Beta: Virtual Reality Comes to the Web

Chrome 79 Beta is out and with it the public support of the WebXR Device API. This API is about accessing virtual and augmented reality devices. One usable device is in your pocket or lying next to you on the desk or you are even reading this blog post with it: your mobile phone. So let’s play around a bit and see what can be done.
2020-04-17T17:49:50-04:00November 8, 2019|Categories: AR, HTML5, VR, WebGL, WebXR|0 Comments

What web can do: a mobile speech-to-speech translator

In the 70s and 80s, some people thought that you could soon travel the world with a portable computer, only the size of a backpack, that would translate any spoken utterance to any other language. Nowadays, with the Google Translate App, you can easily do this with any mobile device. But is this also possible using only HTML, CSS, and Javascript?

What web can do today

Yesterday I tried to create a Progressive Web App displaying an artificial horizon over a live camera view and was wondering if this would be possible with a modern mobile web browser. During the research, I stumbled over several websites which you can use to test the hardware capabilities and their software support in web browsers and I wanted to share some links.
2020-04-17T17:49:51-04:00September 26, 2019|Categories: Device Independent, HTML5, Progressive Web App, PWA, Web Design, WebGL|0 Comments

A CSS hack to show page element layouts

Today I stumbled over an interesting blog post by Gajus Kuizinas. The idea is to inject a CSS style snippet into a web page to show the layout of all web page elements. This can be achieved by setting a different translucent background color for every depth of nodes. This way you can see the size, the margin and the padding of each element on the page.
2020-04-17T17:49:51-04:00September 9, 2019|Categories: CSS, Web Design|0 Comments

Safe Browsing with the Windows Sandbox

The Windows May 2019 update brought the new Sandbox feature. It can be used as a safe browsing environment without the risk of affecting the base Windows installation with malware of any kind. We will create a host installation of a Web browser with a persistent configuration, which is mirrored into the virtualized environment of the Sandbox whenever needed.
2020-04-17T17:49:51-04:00September 1, 2019|Categories: Chrome, Firefox, SeaMonkey, Virtualization, Web Design, Windows|0 Comments

A 3D visualization of real-time earthquake data

This is a 3D visualization of real-time earthquake data gathered from the U.S. Geological Survey website. The data used in this example covers all earthquakes with a magnitude of at least 1 within the last 30 days. They are drawn into a template texture image file of the Earth’s surface according to the geographical position and the magnitude of the quake.
2020-04-17T17:49:51-04:00June 7, 2019|Categories: 3D, Earth, PHP, Science, Web Design, WebGL|0 Comments