ux-canvas-ui v1.4.1

Canvas UI

Recommendations

CSS

Since this is a theme job, we'll have to deal with all kinds of CSS methodologies. We'll probably find ourselves using !important way more than we'd like.

delete agressively

There's no way of knowing what styles are still necessary. It's helpful to delete (or at least comment out) agressively in order to keep the file size managable. As far as I know, this is the only reliable way to keep the css from having huge blocks of unsused styles.

keep styles within their featured domain

Continue to migrate away from a single _mobile.scss file and put styles in their respective file. Some Sass files are named after their page domain, and some after their domain of responsibility. You may find the same CSS declaration in multiple files. Continue to migrate them into a domain-specific file.

move styles into path-based scope

Continue to put all page styles within a page-based combinator, as specifically as is practical. E.g., Styles intened for courses/12345/modules would best be placed within

.courses {
	&.modules {
		...intended styles
	}
}

There are several bugs that I've found resulting only from over-reaching styles conflicting. The path-based scope is a reliable way to prevent those types of bugs.

mobile first

Put mobile styles first in their stylesheet, later overwriting them with an @media (min-width...) media query. It's a consistent way of writing styles that will help as this project gets passed from author to author.

JS

tests

Jest can test TS files through @babel/preset-typescript, with caveats on how you can use TS in your test files.

There are discussions with the VAT and the LMS team to prioritize E2E testing. Whatever we could do to contribute to that would be great.

new features

The product is under active development by Canvas. They make changes to the DOM. The fewer LOC we have, the less can go wrong when they change the underlying structure. Make generous use of error handling so that your code doesn't fully break the Canvas UI.

typescript

Continue the migration from JS to TS.

use location-based js fencing

The matchPage function allows you to limit the pages on which your JS will run.