adding latest

notes.md

@@ -333,3 +333,113 @@ Portals will literally render the data where it needs to, then transport it to w
 
 Advanced Vue Component Design course
 https://adamwathan.me/advanced-vue-component-design/
+
+
+
+## javascript
+
+### new
+
+Javascript isn't like python where you can map an object to something else using ducktyping. In javascript if you want to map an object to something else, you need to use `new`.
+
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
+
+```javascript
+function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+const car1 = new Car('Eagle', 'Talon TSi', 1993);
+
+console.log(car1.make);
+// expected output: "Eagle"
+```
+
+## Adding custom CSS site-wide
+https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/
+https://joshuatz.com/posts/2019/vue-mixing-sass-with-scss-with-vuetify-as-an-example/#easy-solution
+
+Custom css (to apply a font for example) can be done so you don't need to import a `css` file in each component.
+
+All fonts should go in `./src/assets/fonts`.
+
+1. Create `./src/scss/_variables.scss`
+2. In here create any custom css you need
+
+```scss
+@font-face {
+  font-family: "Campton";
+  src: url("~@/assets/fonts/Rene_Bieder-Campton_Medium.otf") format("opentype");
+}
+
+$my-font-family: "Campton", sans-serif !default;
+
+@import "~vuetify/src/styles/styles.sass";
+$body-font-family: "Times New Roman", Times, serif;
+
+@import "~vuetify/src/styles/settings/variables";
+$body-font-family: "Times New Roman", Times, serif;
+
+$mycol: purple;
+```
+
+3. Create `vue.config.js` in the root of the project (next to `package.json`).
+4. Add the following to compile custom css:
+
+```javascript
+module.exports = {
+  css: {
+    loaderOptions: {
+      scss: {
+        // sassOptions: { indentedSyntax: true },
+        prependData: `
+          @import "@/scss/_variables.scss";
+        `
+      }
+    }
+  },
+  transpileDependencies: ["vuetify"]
+};
+```
+5. In `App.vue` you can set the font for the whole project.
+
+```scss
+#app {
+  font-family: "Campton", sans-serif, Arial, Helvetica,;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: $mycol;
+  margin-top: 60px;
+}
+```
+
+## Import shortcuts using `@`
+
+Both `~@` and `@` resolve to `./src`.
+
+You use `~@` when in Vue components/js when set up with the vue cli.
+
+You use `@` when in `scss`/`css` files - it's provided by webpack.
+
+
+## Import and syntax
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
+
+https://vueschool.io/articles/vuejs-tutorials/lazy-loading-and-code-splitting-in-vue-js/
+
+In javascript you can use several ways to import modules.
+
+`import { function } from "module";` is used if you want to import a specific function/class etc from a `.js` file. You can chain the imports with a comma between them. These have to be javascript objects.
+
+`import defaultExport from "module";` is used to import the default exports from a `.js` file. The name you give it you will use to reference it (like doing `import module as name` in python).
+
+You can also use lazy loading - only loading the components/modules you need when you need them. You can see this being used in the `./src/router/index.js`
+
+```javascript
+component: () =>
+      import(/* webpackChunkName: "signup" */ "../views/SignUp.vue")
+```
+
+The difference between `require` and `import`: `import` is better to use as it's a function, whereas `require` is a js library. `require` is synchronous but `import` can be asynchronous, and supports lazy loading.