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...
This is the code for the editor project as outlined in Ideas and Projects for 2021https://publishing-project.rivendellweb.net/ideas-and-projects-for-2021/. The idea is to Explore Electronhttps://www.electronjs.org/, Monacohttps://microsoft.github.io/monaco-editor/ the editor behind VS Code and how they work together or not to build a smaller code editor with special features. Some of the goals for the project updated from the post to reflect new knowledge. 1. Use the code from the electron-esm-webpackhttps://github.com/microsoft/monaco-editor-samples/tree/master/electron-esm-webpack example in the monaco-editor-samplehttps://github.com/microsoft/monaco-editor-samples/ repository 2. Switch the code to use Typescripthttps://www.typescriptlang.org/ 3. User the Monacohttps://github.com/Microsoft/monaco-editor text editor as the core editor for the project. This way we leverage all the languages Monaco supports...
One of the things about web fonts that may be problematic is the care we need to take when choosing a fallback font. Unless we pick fonts with similar characteristics, there will be a layout shift that will negatively impact the LCS core web vitals metric. CSS has a potential solution to this problem. In CSS we can use special override descriptors in the @font-face at-rule to specify the exact dimensions for the following attributes: - Ascendershttps://en.wikipedia.org/wiki/Ascendertypography - Descendershttps://en.wikipedia.org/wiki/Descender - line gap - extra advance for horizontal character spacing The example @font-face declaration below shows how these descriptors work. css...
What caught my attention from CDS2020, are these two upcoming features for PWAs. The first one is a tabbed presentation for PWAs. The idea is that new windows for the application will open as new tabs instead and keep the user in the PWA. We implement this via the displayoverride field in the web manifest. The field allows us to specify a prioritized list of display modes we want to use. json { "display": "standalone", "displayoverride": "tabbed", "minimal-ui", } This will allow us to create tabs in our PWAs! This will be a critical feature for so many desktop PWAs....
I want to target three languages and tools for learning in 2021: Vue, Go, and Electron. These projects are the ones I've thought about so far. I may have additional ones come up as the year progresses. This will also enable to create of a monorepo for each of these projects that need one and use Bazel as the build system. WordPress in Vue I've always liked Vue better than React regardless of the latter's popularity and usage so I started working on a combination of Vue and the WordPress REST API. See the following blog entries for the work...
Handling both current and older browsers Javascript has gotten more complicated since Javascript adopted an annual release schedule. We are not talking about the stark difference between ES2015/ES6 and ES5 but on a more nuanced set of differences and what it means for transpilation and browser support. Take, for example, Async/Await, a feature introduced in ES2017. If we want to use it in production we have to provide a fallback for browsers that may meet all our other Javascript requirements. Take the following list of Javascript features along with the version of the language they were introduced in: - Classeshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes...
