Category: Web development

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

<noscript>
	<style>
		.lazyload {
			display: none;
		}
	</style>
</noscript>
Code language: HTML, XML (xml)

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

Creating SVG elements dynamically via JavaScript is not as easy as I thought… In this post, I show how to create an SVG element with JS, that displays a symbol via a use element.

Continue reading "Create »svg« and »use« element with JavaScript"

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"

It is not trivial to compile an SCSS file with Webpack, which is not included in the JS file, into its own CSS file. This post shows you how to do that.

Continue reading "Compile SASS with Webpack into a CSS file"

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)"

Webpack is a bundler with the main purpose of bundling JS files for the usage in browsers (it also can, for example, compile SASS to CSS). This post shows you how to setup Webpack and Babel – a tool for compiling ES6 JavaScript code to ES5 code.

Continue reading "Setting up Webpack and Babel"

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:

wp.customize.preview.send('refresh');
Code language: JavaScript (javascript)