My Lazy Loader plugin needs PHP 5.3 or higher. If users count on that, it is annoying if this minimum version is raised through a inadvertency (like using the
 array syntax) in a patch or minor release. Continue reading Check for compatibility with specific PHP version using Travis CI
Currently, I want to wrap all acronyms – »PHP«, for example – in a
span element to display them as small capitals. So I searched for a way to search and replace in MySQL, and there it is:
For example, the following command wraps
WOFF in the post titles in the wanted markup (it is a good idea to create a backup before):
UPDATE `wp_posts` SET `post_title` = REGEXP_REPLACE(post_title COLLATE utf8mb4_bin, 'WOFF', '<span class="smcp">WOFF</span>' ) WHERE `ID` = 4691
The first param of
REGEXP_REPLACE is the string to search in – we set the column’s name we want to search in. The second parameter is the searched string and the third the string to replace the searched string with. Setting
COLLATE utf8mb4_bin (you may need to adjust the collation if you use another one) is important because otherwise, the search would be case insensitive.
Like written in the MariaDB documentation (and as the name suggests) you can also use regular expressions with
REGEXP_REPLACE. For my German version of the weekly recap, I used the following:
UPDATE `wp_posts` SET `post_title` = REGEXP_REPLACE(post_title COLLATE utf8mb4_bin, 'KW([0-9]+)', '<span class="smcp">KW</span>\\1' ) WHERE `ID` = 4691
\\1 inserts the part inside the brackets from the searched string into the replace string: the week number.
With Bash on Ubuntu on Windows, you can use a Windows Subsystem for Linux on Windows 10. With that, you can run many Linux commands, for example,
ssh. This post shows you how to create an SSH key, which should be used on both, the Linux subsystem and Windows. Continue reading SSH key and the »Windows Subsystem for Linux«
To use web fonts with wide browser support, we need the font files in
.woff2 format. Who does not care about Internet Explorer, Safari on Mac OS before Sierra, and a few mobile browsers can choose only
.woff2 (there are tables with the browser support of the two formats on Can I use).
In this post, I show how to use the command line tool Glyphhanger to convert
.ttf files to
.woff2 and subset fonts to remove unused characters. Continue reading Conversion of fonts to WOFF/WOFF2 and font subsetting with Glyphhanger
lazyload class, if JS is not active.
Until now I implemented that with a class that was added via JS to the
body element. Without the class, the images are hidden, and if the class is present, the images are displayed.
Now the user wprox showed me an alternative solution in the W.org support forum, that he got from the article »Nice and easy lazy loading with lazysizes.js« by Steve McKinney: Simply put the styles for disabled JS into a
If you think about it, that is an obvious solution, but it never came to my mind before.
I maintain a lazy loading plugin, that got a bigger update a few days ago. Among other things, it was renamed to Lazy Loader, because it not only supports »only« images with the new version. Continue reading »Lazy Loading Responsive Images« becomes »Lazy Loader« and has new functions
Elements like links, buttons, and form fields, can be reached via the keyboard (by default by using the tab key). This post shows you how to remove specific elements from this tab order, so they can no longer be accessed via the keyboard. Continue reading Remove elements from tab order
I started a small WordPress plugin and tried to orientate myself a little bit towards the Speaking Plugin of Alain Schlesser for the structure and basic principles. So I came about the topic autoloading. Alain wrote a custom autoloader for the plugin but mentioned the possibility via composer in his talk at the WordCamp Nijmegen. This post describes how to create an autoloader with Composer. Continue reading Create autoloader with Composer
Sometimes it may be useful to trap the focus inside a specific area of the website so that no other focusable elements outside of this area can be reached (for example via using the tab key). Here I show you how to do that. Continue reading Trap focus in specific website area