I was surprised when the WordPress media uploader blocked uploading WebP images. These are not like SVG graphics that have all sorts of security problems so I'm surprised that WordPress supports the video format WebM but not the image format WebP. Even if we fix the problem for WebP we will face it again and again when we want to add new image formats like HEIC and AVIF or other media formats like epub ebooks and others. It is true that we could host them elsewhere and just link to them from WordPress but it's hard to manage and coordinate...
There are two formats that I left out of the previous posts about image formats for the webhttps://publishing-project.rivendellweb.net/revisiting-images-formats-for-the-web/: HEIF and AVIF These two formats are based on video codecs and, depend on the parent video technology to compress images. This makes them different than existing formats like PNG, JPEG and GIF. In the table below, I've summarized basic information about the two formats. If using open formats it's important to your project you may want to take a closer look at these technologies; HEVC is known to have patent encumbrances and AV1, even though AOM claims it's patent-free, has a...
Every so often I see comparisons between image formats that say one format is better than others or that one format is better for a given task but I’ve always wondered where the numbers came from and what testing criteria were used. Rather than take things at face value, I want to make sure that whatever decision I make it is backed up with data. I’ve put all the files and scripts on a Github repositoryhttps://github.com/caraya/testing-image-formats/ for you to run the same tests and see if the results match mine. Beware that the TIFF images are very large and may...
How do we customize WordPress? How do we make themes our own and add functionality that is not part of a theme or that you want to use regardless of the theme you have installed? This post will explore the basics of creating custom WordPress elements and will cover plugins, child themes, and custom themes. Note The specifics of your situation will be different than mine. You should always analyze your needs and requirements before making a decision. Planning The first thing to do when planning to add things to a theme is to decide what's the best alternative to...
Third-party scripts on your site present a potentially dangerous side effect. We don't know what additional assets third-party load. That has security and performance implications. This post will look at the performance side of the issue. As Simon Hearne writes in How to Find the Third-Parties on Your Sitehttps://simonhearne.com/2015/find-third-party-assets/ using third party scripts that, in turn, make calls to additional sites and parties outside their and your control can affect the performance of your site. Quoting the post: > I ran the homepage through WebPageTest and sure enough, there were a bunch of calls to various subdomains of facebook.com. Thankfully...
Quotebacks are an interesting way to cite content from other websites. They work in two stages. Installing the extension and getting the quotations The first one is HTML formatted with special data attributes, a footer and a link to the script. There are browser extensions to create this code, one for Chrome and one for Firefox currently under development. Once the extension is installed, go to a page, select text and press command + shift + S on Mac and control + shift + S on Windows !The result of highlighting text and pressing command/control + shift + S to...
In 1987 Apple released this concept video of what they called a Network Navigator, an integrated agent to manage data from different sources, communicate with people across the network, and share information regardless of the source and its location. It may seem quaint to us now, 30 years later but the real question is whether the tools have evolved to the point where it is possible to build such technology. This post will explore some of the current technologies that would make such a project feasible and discuss potential future implementations. This is a theoretical exploration rather than a working...
In the not too distant future, WordPress will have lazy loading by default in WordPress corehttps://make.wordpress.org/core/2020/01/29/lazy-loading-images-in-wordpress-core/ enabled by default. I believe that this will be merged into WordPress core for the 5.5 release; until then, development is done on a feature pluginhttps://wordpress.org/plugins/wp-lazy-loading/ for people to continue working on it. But the problem is that this is enabled by default. As with many of the later decisions by the WordPress core team, this is good for beginners but I can think of at least two instances where lazy loading is not what I want to use: - Header images at the...
There are times when we need to add scripts to the page that will run only when there is a script already enqueued and loaded before it happens. I got bit by this when trying to use FontFaceObserver. For some reason, it worked fine in development but it would give a FontFaceObserver is not defined error when I moved the theme to production. The solution was hidden in some older documentation. As of version 4.5 there is an additional script loading function for loading inline scripts: wpaddinlinescript. This function allows adding inline scripts that depend on scripts The only important...
Node has had experimental support for EcmaScript moduleshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules for a while. Again, this is one thing I've wanted to explore for a while but have never felt the need to dig deeper. After all, it is experimental and it hasn't been approved for production use. But wit the release of Node 14 we're coming to the point when module support moved to stable. So let's explore what it takes to run ES Modules in Node on their own and together with current Node modules. What will Node consider an ES Module? There are certain file extensions and conditions that will...
