As much as I dislike Gutenberg, mostly because of the amount of duplicated work it makes you do, there are times when it would be nice to have it for some things but not for others. While researching alternatives to Gutenberg I discovered the Gutenberg Ramphttps://wordpress.org/plugins/gutenberg-ramp/ plugin. It presents an interesting way to grow how you use Gutenberg that lies no use with plugins like Classic Editor and full use letting Gutenberg be the default editor. For this experiment we'll do the following: 1. Create a custom post type for essays 2. Install Gutenberg Ramp and configure it to only...
A question that I've seen frequently in Quora and elsewhere since the Gutenberg editor was announced a few years ago was how to disable it and keep the existing, now classic, editor. Rather than answer the question over and over again I thought I'd document the two alternatives that I now recommend using if Guttenberg is not an option. Why wouldn't Gutenberg be a good option? Even though Gutenberg has been around for a few years, there is no parity with tools like ACF and others. Even though newer versions of ACF provide Gutenberg blocks, the technology is not proven...
I don't hear about this very often but once in a while, I will hear about building print stylesheets so that web pages will look exactly the same in print as they do on screen. While I think the idea is laughable, it made me think about what it would take to make web content printable. This is different than using all of CSS Paged Media as documented in Creating printable content from the webhttps://publishing-project.rivendellweb.net/creating-printable-content-from-the-web/, we might test part of the Paged Mediahttps://www.w3.org/TR/css-page-3/ and Generated Contenthttps://drafts.csswg.org/css-content-3/ specifications but I'm not confident that they'll work in all browsers. What we want...
> Thank you to Rowan Merewood@rowanm for his patient explanation and review of this post. Client Hints are a content negotiation tool and can help with making responsive images easier to work with and give you other tools to help create a better user experience. They are a set of HTTP request headers allowing clients to indicate a list of device and browser preferences. Using client hints isn't automatic: servers must tell clients what hints they want clients to send using the Accept-CH accept client hints header: apache Accept-CH: Width, Viewport-Width, Downlink or an equivalent HTML meta element with the...
When researching client hints, I came across an interesting use case for dynamically inserting meta tags on a Handlebars template based on the route I'm accessing. The different pages of the experiment use different sets of client hints so each needs to request the different hints from the server, an Express application in this case. I wasn't able to do it within Express or Handlebars so I had to hack my way through getting it done with Javascript. We also use local storage to set up a variable when we successfully add the meta tag. If the variable exists then...
Note: The Feature-Policy header has been renamed to Permissions-Policy and browsers will soon start implementing the change. The document.featurePolicy Javascript object will also change to document.permissionsPolicy. The Feature Policies Javascript API allows our client-side code to query for what features are available and what is restricted by Feature Policies. The Javascript API doesn't replace the Feature-Policy header or the allow attribute of an iframe. You still need to set the header before this will work, or it will work with the default values. The downside is that the current version of feature/permissions policy doesn't support setting the policies in a...
I've told myself for a while that I would learn how to write and use tests for front-end code. Most of the code and tutorials I've seen are written for backend code. But using tools like Playwrighthttps://playwright.dev/ together with Mochahttps://mochajs.org/ and the Chaihttps://www.chaijs.com/ assertion library we can build very robust testing for front-end code that works in multiple browsers. Background: Playwright Playwright is Microsoft's browser testing and automation library. It allows you to control a browser: Chrome, Firefox, or Safari WebKit and perform operations as if you were working on the browser directly. Because we support multiple browsers we can...
Normally, only some elements have an aspect ratio, for example, images. For them, if only the width, or the height, is specified, the other is automatically computed using the intrinsic aspect ratio. In this example, the browser will calculate the height of the image using the width and the image's intrinsic dimensions. html The aspect-ratio property allows developers to explicitly set the aspect ratio of an element not just those that already have an aspect ratio and use it when one of the measurements is missing. The example below, taken From Una Kravetz codepenhttps://codepen.io/una/pen/BazyaOM shows how this works with a...
Because Typescript is a superset of Javascript, we can use Typescript to validate regular Javascript files. - Make sure your file structure works - Install and Configure Typescript - Add Lint command to package.json - Use JSDoc to tell Typescript the types of our variables - Exclude files as needed Since I will be adding this to an existing project, we assume there's already a package,json file for the project. We first install Typescript as a development dependency. bash npm i -D typescript Installing Typescript locally will make the tsc command available to you. We then need to initialize an...
One thing I've always wanted to figure out is how to use the clipboard on web applications so we can copy and paste it into the app. Until now, we can use document.execCommandhttps://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand to interact with the clipboard; but it's not supported in all browsers and has been deprecated. in Unblocking clipboard accesshttps://web.dev/async-clipboard/ Jason Miller and Thomas Steiner present a new API for managing clipboard copying and pasting. This is a promise-based async API that will allow you to copy and paste text into the clipboard. For this example, we'll assume we have the following HTML code html Copy to...
