The Publishing Project

Type checking Javascript with Typescript

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. npm i -D typescript Installing Typescript locally will make the tsc command available to you. We then need to initialize an empty configuration file. tsc –init With

Async Clipboard API

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.execCommand to interact with the clipboard; but it’s not supported in all browsers and has been deprecated. in Unblocking clipboard access 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 <div> <input type=”text”

Building a VSCode-like Editor

This is the code for the editor project as outlined in Ideas and Projects for 2021. The idea is to Explore Electron, Monaco (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). Use the code from the electron-esm-webpack example in the monaco-editor-sample repository Switch the code to use Typescript User the Monaco text editor as the core editor for the project. This way we leverage all the languages Monaco supports with specific emphasis

Overriding Font Metrics with CSS

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: Ascenders Descenders line gap extra advance for horizontal character spacing The example @font-face declaration below shows how these descriptors work. @import url(‘https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap’); @font-face { font-family:

CDS 2020: New PWA goodness arriving soon(ish)

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 display_override field in the web manifest. The field allows us to specify a prioritized list of display modes we want to use. { “display”: “standalone”, “display_override”: [“tabbed”, “minimal-ui”], } This will allow us to create tabs in our PWAs! This will be a critical feature for so many desktop PWAs. Another