Category: Web development

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

Run NPM package for multiple files (using the example of csso-cli)

Some NPM packages already offer the possibility to be applied to several files of a directory at the same time – for instance, node-sass can convert a whole directory of SCSS files into CSS files. The minifier tool csso-cli does not offer an option to minify multiple files at once – here I show a workaround to do this anyway.

Continue reading Run NPM package for multiple files (using the example of csso-cli)

Kick off reload of customizer preview from the preview

In my Photographus theme, I needed to reload the customizer preview from the preview in a specific case. After searching for a short while, I found the post »Implementing Selective Refresh in the Customizer« by Weston Ruter.

The problem is solved with the following JS line:


Just vertically center one specific flex item

The CSS align-items: center lets you center flex items which are next to each other, so that their horizontal midpoint is on one horizontal line. But recently I had two flex items and only wanted to center the right one, if the left is higher, but not the left one if the right is higher. For that, I cannot use align-items: center, but the solution is not much more complex:

.center-flex-item { margin-bottom: auto; margin-top: auto; }

With that, the flex item .center-flex-item will be centered if a higher item sits beneath it, but the other item will not be centered if .center-flex-item is greater.

Update from June 9, 2017: Easier and with the probably more correct CSS rule for the scenario, it looks like that:

.center-flex-item {
	align-self: center;

Thanks to Matthias for the hint!

Adapt CSS for right-to-left languages with Gulp

If a website is displayed in a language which goes from right to left, we need to modify a few CSS rules if the CSS was written for left-to-right languages — for example, we would need to adjust left and right spaces and flip floats. We could make these Adjustments manually, but that can be time-consuming. With the help of Gulp, it is easier and faster.

Continue reading Adapt CSS for right-to-left languages with Gulp