When working with numbers on Javascript I've most frequently seen toLocaleString as the solution to format numbers. The following example uses US Dollars as the currency and accounting as the currency sign, it will display negative numbers in parenthesis. js const n1 = 199874; const n2 = -199874. console.logn1.toLocaleString'en-US', { style: 'currency', currency: 'USD', currencySign: 'accounting', }; console.logn2.toLocaleString'en-US', { style: 'currency', currency: 'USD', currencySign: 'accounting', }; Sadly if we work with more than a few numbers it gets cumbersome as we have to add the toLocaleString object to the number with all its children. We may be able to shorten...
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...
