Topic: Web

Design and operation of websites

Better code blocks with EnlighterJS

In many posts I show examples of source code. Previously, these examples were only included in simple <pre> blocks. I’ve been looking for a better solution for a long time that should meet the following requirements:

  • Use of <pre> is still possible so that I don’t have to laboriously rebuild existing articles.
  • Line numbers and syntax highlighting for all required languages and formats.
  • Easy way to copy the texts with one click.

Continue reading

Using Twig in WordPress plugins

Update 2022-06-13:

Be warned! It turns out that using Twig or any other depencies with composer in WordPress is in fact a bad idea! The problem is that other plugins or themes may also use the same components but in different version – and then this may end up in all kind of conflicts! For the time being I do NOT recommend to follow this article!

The basic structure of WordPress plugins is kept rather simple:

The file readme.txt file with a description in the header and a PHP file for the plugin initialization are required as a minimum requirement in the plugin directory. It is not absolutely necessary to implement your own classes, since the code is executed directly by WordPress – however, organizing it into classes makes readability and maintainability much easier.

Continue reading

By the way – how to mark text in the browser

A longer while ago, Chrome 90 introduced a feature (before that it was already an extension) with which you can mark part of the linked text via links at the same time.

For this you add the text to be marked as fragment in the form #:~:text= followed by the text itself to the URL. As a test a link to this article which is created as following:

While testing this I found out, that reloading a page which was loaded using such an URL will remove the text marking.

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.

Update 2022-12-19

The current version of my plugin also includes PhotoSwipe 5.

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