Topic: Web

Design and operation of websites

Caveats of the fullscreen API

My example for WebGL and the monitor test use a canvas element for display. In addition there is an option to switch to fullscreen mode. Technically this is achieved by using the fullscreen API. The implementation is always the same:

  1. When clicking the button fullscreen mode the canvas element will be changed to fullscreen by using requestFullscreen().
  2. A handler which reacts to fullscreen changes corrects the width and height of the element to the screen size taking window.devicePixelRatio into account to support the native resolution of the device.

Continue reading

Search with results in real time

From now on my website provides a search function with results in real time which are displayed as list below the search input. For this I developed a plugin for WordPress which uses the Ajax interface and runs the search while text is entered.

Yes, there are already plugins for this – but the implementation was not too difficult (about 190 lines of code) and I learned something about using Ajax with WordPress.

One thing missing is a good keyboard navigation, but this will propably be added as well. For now you can navigate using the [Tab] key.

Using the keyboard is also possible – with the tab key (or the key your browser uses for changing the focus) you can change from the search input to the result list and move between the entries in the list. The kursor keys  up and down ([↓] / [↑]) can also be used for navigation. To open an entry, press return ([↵]) or [enter]. With [Esc] the result list will be closed without opening an entry.

New features for Lightbox with PhotoSwipe

Meanwhile Lightbox mit PhotoSwipe exists for more than two years and has about 6000 active installations :-).

Compared to the original version I extended PhotoSwipe by a number of features:

  1. Endless loop is also possible with only two pictures.
  2. If the endless loop is not active the arrow buttons for next or previous image will be hidden for the first or last picture.
  3. Full screen view can be activated by pressing the key “F”.
  4. When changing pictures using the arrow buttons or cursor keys in the desktop view the change from one picture to the next is done using an animation similar to the swipe gesture in the mobile view.

In addition it is now also possible to display WordPress galleries or Gutenberg gallery blocks in their own lightbox.

Lightbox with PhotoSwipe

In the past I have used the plugin “Responsive Lightbox” for the enlarged display of pictures. Unfortunately, this solution had some weaknesses:

  • No possibility to enlarge the picture view.
  • Swipe gestures are quite “jerky” – you can see how the picture view follows the finger movement very slowly

In particular, I noticed the lack of the possibility of image magnification on another website, where I have seen people who have tried to enlarge individual images with the common two-finger gesture on their smartphones.

As an alternative, I finally discovered PhotoSwipe – a JavaScript library that not only allows you to magnify images with a mouse click or finger gestures, but also provides a full-screen view. Also, the response to input is much snappier as in “Responsive Lightbox”.

Continue reading

Error in the editor of WordPress 4.6

Recently WordPress 4.6 was released. Unfortunately there is a little error in the text editor: when you move down in content in the “text” view and then edit something it may happen that the view jumps back to the top.

This error is also documented in the Trac of WordPress and there is also a fix for it which will be used for the upcoming version 4.6.1.

Good bye ancient software

In the past I also supported quite old software on my web site technically:

  • Internet Explorer 8 (and older), which was published on March 5, 2008.
  • Windows XP, whose official support has ended in April 2014 and which lacks support for SNI. Browsers running in Windows XP which don’t bring their own TLS implementation can not access my website using HTTPS (for example Chrome or Internet Explorer).
  • Android 2 or older which also lacks the support for SNI.

Now it is August 2016. Windows XP and older versions of the Internet Explorer are obsolete and not widely used any longer. For example only 0.1% of the requests on my web site where using Internet Explorer 8. Older versions are practically non-existent. For Android 2 the situation is similar: less than 0.1%.

Therefore I decided to stop the support of this ancient software from now on. The web site now also uses HTTPS always (which means the browsers have to support SNI) and html5shiv is also not used any longer.

PS: My web site is still barrier-free and can also be used without JavaScript.

Extended example for WebGL

My example for WebGL was extended to handle touch events on smartphones and tablets.

At the moment only touches with one finger will be handled like click and drag using a mouse, so you can rotate the model with one finger. The recognition of gestures with two fingers for “pinch to zoom” is missing yet.