Differences

This shows you the differences between two versions of the page.

--- dev:angular_dev_best_practices [2019/05/13 13:24] – Adding some a11y considerations sandbergja
+++ dev:angular_dev_best_practices [2023/11/24 23:05] (current) – [Code quality] update outdated command sandbergja
@@ Line 4: / Line 4: @@
 Loose collection of practices to review with developers so we can agree on UI developer guidelines.
+==== Code quality ====
   * Run %%'ng build --prod'%% before committing.
@@ Line 9: / Line 10: @@
   * Run 'ng lint' before committing.
     * This does more than check style, it also warns when an import pulls in too much code, among other things.
+  * Make sure that 'ng extract-i18n' runs before committing (some i18n syntax errors are not caught by ng build)
   * use camelCase variables when possible for consistency.  (Note fields on IDL objects don't apply).
-  * Design for screen width of 1350 pixels.
-    * This is somewhat arbitrary, but seems to cover most laptops and smaller (non-mobile) screens without being too limiting.
-    * Browser dev tools can show the width of the current browser window.
   * Use 2-space indentation in HTML files
   * Use 4-space indentation in Typescript and CSS files.
   * Avoid column widths in code that extend well beyond 80-100 characters
+  * Avoid subscribing to Observables within other subscriptions (nested subscriptions).  Instead, you should should use pipeable rxjs operators like switchMap, mergeMap, filter, map, and tap. [[https://github.com/cartant/rxjs-tslint-rules|Some of these tslint rules]] can be helpful for catching nested subscriptions and other RxJS issues.
+==== UI ====
+  * Design for screen width of 1350 pixels.
+    * This is somewhat arbitrary, but seems to cover most laptops and smaller (non-mobile) screens without being too limiting.
+    * Browser dev tools can show the width of the current browser window.
   * Use Bootstrap utility classes when possible instead of writing custom CSS.
     * https://getbootstrap.com/docs/4.2/utilities/
@@ Line 29: / Line 35: @@
     * The [[https://www.w3.org/TR/wai-aria-practices-1.1/|WAI-Aria Authoring Practices]] may help you determine the appropriate keyboard interactions for more complex widgets
     * Don't add Bootstrap's "btn" class to unfocusable elements, like <span>s, <label>s, or <a>s that don't also have a "href" attribute.  Use a tag that is already focusable instead, like <button> or <a> with a "href" attribute.
+  * Make sure that your screens have an <eg-staff-banner> at the top to let users know where they are.