Web Share APIs

Sharing content from your web application takes two different APIs: Web Share makes the content shareable and the Web Share Target API makes your app eligible to receive shared data. Getting Started We will first look at adding share capabilities to a web page. The basic shape of the API looks like this: navigator.share({ title: title, url: url }) .then(function() { console.log(“Share success!”); }) .catch(function() { console.log(“Share failure!”); }); And here’s the code of my first attempt to add it to a webpage. This will make the links with a .share class use the operating system’s share functionality. document.addEventListener(‘DOMContentLoaded’, function

Removing specificity from a CSS rule with :where

One of the benefits of the :where pseudo selector is that it removes the specificity of the selector inside it. This becomes a powerful solution when we want to create base styles that we can override without having to worry about specificity. :where(ul[class]) { padding: 0; margin: 0; list-style-type: none; } .restaurant-list { list-style-type: disclosure-closed; } In this example, the first rule has no specificity (0, 0, 0) so the second rule will be applied regardless of its specificity. So, when build base styles, we can use :where to remove the specificity of a selector and make it easier for

WordPress Widget Blocks

If you use WordPress as your CMS and choose to keep the existing theme structure, then the news is relevant to you. Otherwise, you can skip this post. Among other new, WordPress 5.8 introduces a Block-Based Widget Editor, built using the same Gutenberg editor that you use to create posts. You can now use any block in your theme’s widget areas using the all-new Widgets screen and updated Customizer. For this post, I will concentrate on creating and adding widgets using the widget menu (appearance -> widgets) rather than the customizer. Creating Widget Blockss The Widget menu will now show

Third Party search engines in self-hosted WordPress

WordPress doesn’t really have a search engine built into the CMS. This may cause unexpected results and it may skew a user’s search results. The first thing to look at is replacing WordPress’s built-in search with something more robust and works as a real search engine. Elasticsearch I’ve been looking at Elasticsearch for a while and I think it’s time to see what it would take to make it work in production. First, we’ll test Elasticsearch locally with a local installation of WordPress using the elasticpress plugin and an Installation of Elasticsearch using Docker. Then we’ll explore the lowest cost

WordPress Must Use (MU) Plugins

While researching Custom Post Types I found a little-known technique to ensure plugins are installed and run regardless of user interaction. The idea is that the Must Use Plugins will be active by default and administrators will not be able to remove them from the admin Plugins GUI, making the must-use directory the perfect place to put code that must run to make the installation work, possibly like CPT and other customization plugins that we want/need to run independently of the theme we use. Must-use plugins are not perfect. For all the advantages that they offer, they also have several