The video is played every time it returns in the viewport and paused if not ended Video playback controlled by mouse X position (mouse position) Video playback controlled by mouse X position (drag and drop) Use the mouse wheel to control video playback Video playback controlled by Y position Example: Animation – Duration Example: Animation […]
Author: Erik
Since I was first given a Commodore64 as a child my love for the keyboard was more than obvious! I’m Erik and I currently work in my own company in italy, where I am deployed as a fullstack developer (or one man army as you prefer). I have been studying graphics and communication but the curiosity has led me to be involved in all aspects of web design, from design to programming. I am the author/contributor of some plugins and templates for WordPress and WooCommerce, follow me on https://github.com/erikyo
Blog
Install MozJpeg encoder with Ubuntu 20.4
MOZjpeg is a very interesting fork of turbojpeg, it saves on average 10-15% compared to a normal jpeg without losing backward compatibility. Its disadvantage is the time it takes to be encoded (x2.5) and that it lacks the alpha channel that new-gen formats like avif and webp have. A good explanation about the differences of […]
Blog
Enable webp avif and heic/heif support for WordPress
if you need only imageMagick and webp support: if you need only imageMagick-7.x and webp, avif and heic support: First of all, you may want to remove the original imagemagick, since there is no need to keep the old bundled version. Install the needed packages many of them are already installed. Ref. https://www.linuxfromscratch.org/blfs/view/svn/general/imagemagick.html Download imageMagick […]
Blog
How encode images to webp in browser with vanilla js without plugins
Some days ago, while using a react repo I discovered this method that uses canvas to convert images to webp. Currently it’s not perfect and in some browsers won’t work on some browsers (guess which one: safari) and has a limited support for icc profiles / color space. You can find more info about project […]
Grid Layout
image test
this is an example related to https://github.com/WordPress/performance/issues/75#issuecomment-1027156989
Blog
Generate HSL color schemes with SCSS and CSS Custom Properties
Here’s how to generate complex HSL color schemes with saturation, lightness and opacity with SASS and CSS variables (custom properties). All you need to do is to set the –color-hue the –color-sat and –color-luma variables that represents the hsl values of your main color. Each color will then be represented as follows: Quick Tips: In […]
Blog
How convert WordPress media uploads into webp without plugins
While uploading a media into WordPress media library this script automatically generate a webp copy of the uploaded media. Works with jpg, png and pdf previews, add the .webp extension after the original name
Blog
How to preload featured image with WordPress
This simple action will add the preload for post featured image (works both with src and srcset)
Blog
How remove caps-lock from WordPress comments (retroactively)
There are people, sometimes whole departments of companies, who from the day they buy a keyboard to when they throw it away keep the caps-lock on. I don’t understand them and for this reason i made a plugin to convert everything they write to the correct case. It may come in handy if you have […]
Blog
How serve automatically .webp images with Nginx
If your website uses several transparent png images the most convenient and effective optimization is to convert all the media assets to webp format… this will cut heavily the pageload because webp could weigh up to 10% of the original image. There is a way with nginx to hijack the request from standard images formats […]