We have four months or so before Flash goes away and the biggest question after why is it going away? Is what replaces Flash? This is an important issue and not just for those people who are worried about the Flash games they play and what will replace them but also for people who are migrating old e-learning modules from older versions of Captivate and other e-learning tools. So I thought it interesting to take a look and see what HTML5 technologies and APIs would replace some of Flash's functionality. It's by no means a complete list; it's what first...
Git allows developers to forkhttps://docs.github.com/en/github/getting-started-with-github/fork-a-repo and clonehttps://git-scm.com/docs/git-clone repositories. The main difference between the two commands is that when you clone a repository you create an exact copy of the "main" repository, to which you're not likely to have access or permissions to make changes. However, when you fork a repository, you create a copy that you own and you can update and get ready for pull requests. Forking introduces a problem into the equation, do you see? Because forking creates your own copy of the repository, it is no longer updated from the original. Whatever changes you make are exclusive...
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...
