Web Design

Implementing Two-Factor Authentication

Two-​factor authentication using the time-​based one-​time password algorithm can be easily implemented with PHP on any web server. This standardized method is widely used as an additional security measure for logins and uses smartphone apps, e.g. the Google or Microsoft Authenticator, as a second factor.
2020-10-08T18:12:30-04:00September 11, 2020|Browser, HTML5, PHP, Web Design|

Augmented Reality with Chrome: Let Flowers Grow!

With Chrome 81 Beta for Android, it’s now possible to use immersive Augmented Reality in the browser. I have again created two variations of the original demo source code to show what is easily possible. You can now walk around the earth, having a closer look, and (hopefully) spread joy by placing flowers wherever you like.
2020-04-17T17:49:50-04:00February 15, 2020|AR, Augmented Reality, Chrome, HTML5|

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|Browser, Cloud, JavaScript, Progressive Web App, PWA, Web Design|

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|AR, HTML5, VR, WebGL, WebXR|

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|Device Independent, HTML5, Progressive Web App, PWA, Web Design, WebGL|

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|CSS, Web Design|
  • A safe browsing environment with firefox portable in the Windows sandbox

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|Chrome, Firefox, SeaMonkey, Virtualization, Web Design, Windows|
  • 3d visualization of real-time earthquake data

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|3D, Earth, PHP, Science, Web Design, WebGL|
  • Changing labels in WordPress with the gettext filter

Changing labels in WordPress with the gettext filter

An easy way to change labels and strings in WordPress is to use a gettext filter. This post shows the different filter functions, their purpose, and how to implement a filter callback in the file functions.php to change labels and strings in themes, plugins, and widgets using a table of string replacements, even for different languages.
2020-04-17T17:49:51-04:00March 22, 2019|GDPR, PHP, Web Design, WordPress|
Go to Top