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