Category: Web development

Search and replace in MySQL

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: REGEXP_REPLACE.

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.

Conversion of fonts to WOFF/WOFF2 and font subsetting with Glyphhanger

To use web fonts with wide browser support, we need the font files in .woff and .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 .woff and .woff2 and subset fonts to remove unused characters. Continue reading Conversion of fonts to WOFF/WOFF2 and font subsetting with Glyphhanger

Only apply CSS rules when JavaScript is disabled

Sometimes there is CSS that should only apply when JavaScript is disabled. The lazy loading plugin Lazy Loader, for example, hides the images with the lazyload class, if JS is not active.

Until now I implemented that with a class that was added via JS to the html or 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 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 noscript element.

So instead of adding a class via JS to an element, and use that class in CSS to overwrite styles for disabled JavaScript, this is what it looks like in my plugin now:

		.lazyload {
			display: none;

If you think about it, that is an obvious solution, but it never came to my mind before.

Create autoloader with Composer

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