Testing front end with Mocha and Playwright
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 Playwright...
Aspect Ratio in CSS
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...
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...
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...
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...
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...
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...
Ideas and Projects for 2021
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...
CDS 2020: Moving to Modern Javascript
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...
CDS 2020: New CSS properties for performance
There are two new CSS properties that may help with the layout shift core vitals issue. The content-visibility property allows us to tell the browser when to render an element. The “magic” value here...