How Plugins Enhance The WYSIWYG Editing Experience (Sponsored) / / No Comments Image by JK_Studio from Pixabay WYSIWYG editors are one of the core components of any content management system (CMS). A well-coded, feature-filled WYSIWYG HTML editor can distinguish between a CMS users love and one they can’t stand. While all WYSIWYG editors have a set of basic functionality, the power of plugins enhances the editing experience. Plugins allow WYSIWYG editors to do more and provide advanced features to users. Therefore it is important to look at some of the plugins that make some WYSIWYG editors rise above others. It’s also essential to check how easily you can add these plugins. In this article, we’ll be taking you through the world of WYSIWYG editors... more → Posted in: JavaScript Tagged with: editing, Enhance, Experience, Plugins, Sponsored, WYSIWYG
JavaScript Event.defaultPrevented / / No Comments Whether you started with the old on_____ property or addEventListener, you know that events drive user experiences in modern JavaScript. If you’ve worked with events, you know that preventDefault() and stopPropagation() are frequently used to handle events. One thing you probably didn’t know: there’s a defaultPrevented proptery on events! Consider the following block of code: // Specific to a link const link = document.querySelector('#my-link'); link.addEventListener('click', e =e.preventDefault()); // A larger document scope document.addEventListener('click', documentClickHandler); function documentClickHandler(event) { if (event.defaultPrevented) {// Using the property... more → Posted in: JavaScript Tagged with: Event.defaultPrevented, JavaScript
Generating Zips in an Eleventy Site / / No Comments Here’s an interesting question. Given an Eleventy site that has dynamic resources of some kind, how could you provide a way to get those resources in one simple zip file? Here’s how I solved that problem. Raymond Camden… more → Posted in: JavaScript Tagged with: Eleventy, Generating, Site, Zips
7 Ways to Optimize Performance for Your WordPress Site (Sponsored) / / No Comments The vast majority of blogs, news websites, and information websites run on WordPress. While the WordPress developer team and community do their best to ensure wordPress is performant, there are a number of practices you can implement to keep your site blazing fast. Let’s look at some of them! Use Cloudinary WordPress Plugin for Media Cloudinary is the most dynamic media transformation, delivery, and optimization service on the internet. With Cloudinary you can: Deliver optimized images, audio, and video per device, platform, and browser Use the Cloudinary API or querystring parameters to customize media on the fly Take advantage of client side JavaScript libraries to create image viewers,... more → Posted in: JavaScript Tagged with: optimize, performance, Site, Sponsored, ways, WordPress
An example of Algolia Search with Alpine.js / / No Comments As my readers know, I’ve been falling in love with Alpine.js lately and am always on the hunt for more ways to practice using the framework. I thought I’d share an example of how you could use it with Algolia’s JavaScript client. I use that on my search page here with Vue.js, so it wasn’t a terribly difficult thing to rebuild a similar interface in Alpine.js. Here’s how I did it. Raymond Camden… more → Posted in: JavaScript Tagged with: Algolia, Alpine.js, example, search
How to Get Extension Manifest Information / / No Comments Working on a web extension can be kinda wild — on one side you’re essentially just coding a website, on the other side you’re limited to what the browser says you can do in the extension execution environment. One change in that environment is coming January 2023 — pushing extensions to move to manifest version 3. I recently got curious about whether other popular extensions had completed the version 3 update. Executing the following command in the background page (manifest version 2) or service worker (version 3) will provide you the extension’s manifest: chrome.runtime.getManifest() The getManifest call returns a large object detailing the extension’s... more → Posted in: JavaScript Tagged with: Extension, Information, Manifest
Using Auth0 Login with JavaScript – Some Tips / / No Comments Despite having worked at Auth0 a few years back, I never actually used their main identity product. (When I was there, I was part of a team working on a serverless offering.) It’s been in the back of my mind to try the product for some time now, but I never got around to it. This past week Adobe was shut down for the holiday so with a lot of free time, I decided I’d finally give it a shot. I got something working, but had some troubles with their documentation so I figured I’d share what I ran into, and some code as well in hopes it will be helpful for others. Raymond Camden… more → Posted in: JavaScript Tagged with: Auth0, JavaScript, Login, Some, tips, using
JavaScript String replaceAll / / No Comments Replacing a substring of text within a larger string has always been misleading in JavaScript. I wrote Replace All Occurrences of a String in JavaScript years ago and it’s still one of my most read articles. The confusion lies in that replace only replaces the first occurrence of a substring, not all occurrences. For example: 'yayayayayaya'.replace('ya', 'na'); // nayayayayaya To replace all instances of a substring, you’ve needed to use a regular expression: 'yayayayayaya'.replace(/ya/g, 'na'); // nananananana Using regular expressions is certainly powerful but let’s be honest — oftentimes we simply want to replace all instances of a simple substring that shouldn’t... more → Posted in: JavaScript Tagged with: JavaScript, replaceAll, String