It’s hard, but I try to bring you a bi-weekly update with great information. Not all are new, but good to know too. So here is the first instalment.

What’s new on the Web UI

If you like to keep up to date, what lands in a browser near you soon? I highly recommend watching this video.

This video Una Kravets shows a lot of great additions. Write less JavaScript while maintaining more capabilities directly in CSS.

Accessibility for Designers

Are you always wanted to know more about accessibility? Check out Stéphanie Walters’s resource collection for designers. It’s for designers and everyone who likes to learn more about accessibility.

Accessiblity for designers: Where do I start?

Critical CSS? Not So Fast!

Critical CSS is a method to render pages faster – Is it? Here is a great article that shows how you can improve a website’s performance without myth.

Check out: Critical CSS? Not So Fast!

Getting Started with NPM/Yarn Workspace

In October 2020, a new feature landed in NPM and Yarn. Workspaces allow you better to manage your projects in a mono repo.

But what are Workspaces for? Workspaces help us manage repositories with multiple packages – more than one package.json file. In projects like this, you usually have a complex dependency tree, with many packages depending on each other. This special type of repository is known as a mono repo.

It gives you a native npm/yarn way to handle it.

Before 2020, tools like Lerna or RushStack by Microsoft were the only tools on the market.

While Lerna meanwhile supports the native npm and yarn workspace options. Rushstack and pnpm follow a non-NodeJS standard approach.

Learn more and get started on npm and yarn workspace

Git Submodules

In addition to workspaces, you can also use git submodules, making it easy to share code between different projects, even in other repos, wherever needed.

My friend Elio Struyf shows how he has set up his Hugo site to use submodules.

Elios’s video shows a method I used to update the website of hTWOo.

Check out the documentation on git submodules or a general short introduction made by GitKraken or check out a full tutorial on git submodule.

Last week Julie Turner and I presented how to use workspaces and submodules in our session at the Microsoft 365 Conference in Las Vegas with SPFx.

While they are working with caveats, it is something for the future.

Problem with SASS in SPFx

Speaking of caveats, I figured out that SPFx has a small misconfiguration in the SASS build chain. The fix is fairly simple and well documented in the sp-dev-docs issue list.

The only option is to copy the node_modules folder in the root of the npm/yarn workspace to the SPFx directory a second time.

Not optimal, but something that will get fixed soon.

One thing that will become obsolete will be using the ~ tilda to reference the node_modules.