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...
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 is auto, which tells the browser not to render an element until it’s visible in the viewport. This makes page loads significantly faster, the browser doesn't need to render above-the-fold content initially. The content-visibility property works hand in hand with the contain-intrinsic-size property to prevent potential issues with Cumulative Layout Shift. Because the browser isn’t rendering the element fully on load, there may be some shift...
Bazel is hard to get to work but it's really interesting to work with once you get started. Like Ant and other build systems I've worked with before they use their own terminology and their own tooling to make things work better for their intended audiences. These are some notes that I've collected along the way... they've informed my own research and are good things to keep in mind as you work with the tool and its ecosystem. Why Use Bazel In my opinion, Bazel works best in a monorepo with multiple languages attached, whether the monorepo builds a single...
Just like with the frontend, the backend gives you multiple choices of languages and feature sets for working with Bazel. C/C++, Go and Rust are the three languages that I tested generating WASM codehttps://publishing-project.rivendellweb.net/webassembly-a-new-swiss-army-knife/ with so it may be interesting to see how well they work with Bazel and how they abstract WASM generation. We can keep all the code for our project in a single monorepo and let Bazel sort out what tools to use to compile which part. I use C and C++ as the baseline for testing Bazel with backend languages. It also works slightly differently from...
Bazel presents multiple choices for building your site or app's styles. I've taken three of these choices for a deeper look. The first one, working with Less and Stylus, shows how to work with NPM packages. We could use the same techniques to work with other packages outside the Bazel toolchains, we'll have to test to see if they work. The other two, PostCSS and SASS show how to work within the Bazel structure using Bazel toolchains and methodology. I haven't decided which one to use for my projects; been thinking about moving away from SASS for a while but...
In the last posthttps://publishing-project.rivendellweb.net/first-look-bazel-build-system/ we looked at Bazel, what it is, installation on macOS using homebrew, and a Bazel-based project's basic configuration. This post will look at using Bazel to run Typescript and Node.js builds using Bazel. Future posts will look at styling and backend toolchains Javascript, Typescript and Node.js To work directly with Javascript we'll leverage two items - Every Javascript file is also a legal Typescript file - We're already looking at implementing a Node.js based build system that will use Javascript/Typescript Before Bazel will work we need to install the following Node packages. bash npm i -D...
