There is a function-like, dynamic form of import that will allow us to play with imports inside modules and classes and will let us work with them together with async functions and awaiting for async events to complete instead of using then/catch blocks for our promise-based async code. js async => { try { const utilsModuleSpecifier = './utils.js'; const utilsModule = await importutilsModuleSpecifier utilsModule.default; utilsModule.doStuff; } catch { console.log'Dynamic import failed'; } }; Modules either dynamic or static use deferhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/scriptAttributes by default. ES6 modules run in strict modehttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strictmode, even if you don’t write "use strict"; in them. If you're not...
Typescript is good to usee but at times it can be really infuriating to learn how to use it and to use it properly. When you bring in Javascript files to convert to Typescript it will give you many surprises and not all of them are intuitive or easy to decipher. It's important to remember that while Typescript will transpile to Javascript it's a superset of the ECMAScript specification, and you need to learn the differences. These are not all the things I've learned but they are the most important to me. When to add types and when to let...
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...
