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:
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:
- When clicking the button fullscreen mode the canvas element will be changed to fullscreen by using
- 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.
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:
- Endless loop is also possible with only two pictures.
- If the endless loop is not active the arrow buttons for next or previous image will be hidden for the first or last picture.
- Full screen view can be activated by pressing the key “F”.
- 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.
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:
- 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.
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.