Typescript is an interesting language. It's a typed superset of Javascript that you can compile to usable Javascript, either ES5 or later yearly versions of the language. Because it's not straight Javascript it requires compilation before it can be used in Node or browsers. Using built-in tools to work with Typescript The easiest way to use Typescript is to install the tool themselves and then run them through NPM scripts we set up in package.json. Compiling To compile Typescript we need the Typescript compiler TSC that comes bundled with the NPM typescript package. To install it run the following command....
When I first looked at responsive images I thought that srcset and sizes would be enough to handle most of my responsive images needs. See Concepts and examples of responsive imageshttps://publishing-project.rivendellweb.net/concepts-and-examples-of-responsive-/images/ and How To Use Responsive Imageshttps://publishing-project.rivendellweb.net/how-to-use-responsive-/images/ for reference but notice that I barely touched on at all in either of those articles. When researching how to leverage new image formatshttps://publishing-project.rivendellweb.net/the-best-way-to-leverage-new-image-formats/ in the context of HEIF and AVIF, I discovered that we needed to leverage the other part of the responsive images specification: the picture element. The picture element has more applications that srcset and sizes. We will explore these...
Web Performance is very important but at times it can be very frustrating. WordPress introduces additional complexities to performance analysis and troubleshooting. Performance issues in a WordPress generated page can come from many sources: 1. HTML built into PHP templates 2. HTML generated by a plugin's PHP code 3. Scripts loaded by the current theme 4. Scripts loaded by plugins 5. The way the WordPress accomplishes a task Knowing these differences we'll look at ways to improve the site's performance, how they work with WordPress, and address questions that may or may not be performance-related. Some of these solutions require...
I've been working on troubleshooting WordPress performance issues for a while and one of the things that I found is that the version of jQuery used in WordPress is not secure and is far from the latest version. Normally this would be a nonissue. WordPress updates jQuery to the latest 3.x version and we are set, right? Well, with a project as large as WordPress is not as easy to do so. There are hundreds if not thousands of plugins and themes using the version of jQuery currently installed with WordPress so just updating will likely break a lot of...
After researching image sizes Revisiting images formats for the webhttps://publishing-project.rivendellweb.net/revisiting-images-formats-for-the-web/ and Image formats for the web: HEIC and AVIFhttps://publishing-project.rivendellweb.net/image-formats-for-the-web-heic-and-avif/ and how to add new mime types to WordPresshttps://publishing-project.rivendellweb.net/supporting-aadditional-content-types-in-wordpress/ there is one final question to ask. How do we leverage responsive images and new image formats? Background We have four image formats to experiment with: | Format | Extension | Notes | | --- | --- | --- | | JPEG | jpg | Default where no other formats are supportedWe still need the format because it is upported in all browsers | | WebP | webp | Smaller file sizes...
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...
