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:
<pre> is still possible so that I don’t have to laboriously rebuild existing articles.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.
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: https://arnowelzel.de/en/by-the-way-how-to-mark-text-in-the-browser#:~:text=part%20of%20the%20linked%20text.
While testing this I found out, that reloading a page which was loaded using such an URL will remove the text marking.
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:
requestFullscreen().window.devicePixelRatio into account to support the native resolution of the device.Newer versions of macOS as well as Windows 10 provide the option to use the UI in “dark mode”. In this mode the background of windows will be dark and text will be light.
Websites can support this setting as well by using the CSS media query prefers-color-scheme: dark and using a different color scheme for the “dark mode”.
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.
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:
In addition it is now also possible to display WordPress galleries or Gutenberg gallery blocks in their own lightbox.
The current version of my plugin also includes PhotoSwipe 5.
The DNS query now also displays the content of CAA records (flags, tag and value).
Originally I created Lightbox with PhotoSwipe just to be able to use PhotoSwipe at all. In the beginning some features didn’t get used at all.
In the past I have used the plugin “Responsive Lightbox” for the enlarged display of pictures. Unfortunately, this solution had some weaknesses:
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”.
