Category: Web development

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

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)