Coding Conventions

[Rokuto]

Create the coding conventions of spa-lite. Things that will be set are:

• naming conventions for variables, functions, pages, and components.
• conventions when creating a page or component.
• default design guides.
• to user forloop or const index of.
• to use ternary or usual if else.

[Rokuto]

General Coding Conventions from projects:

• There should be a space between the name of the structure and the following parentheses
• Conditions which are concluded within the brackets should be separated with space
• There is no space after the left bracket and before the right bracket
• The open curly brace is on the same line

Naming Conventions:

• Variables: use camelCase. Ex: let myVariable
• Constants: use camelCase. Ex: const myConstant
• Function: use camelCase. Ex: myFunction () {}
• Class name: use camelCase and capitalize the first character. Ex: class MyClass {}
• Observers: use camelCase and palce an _ in front. Ex: _userChange () {}
• Page name: use - for delimiting the words and place the word page in front. Ex: page-not-found
• Component name: use - for delimiting the words. Ex: header-navigation

Creating a Page:

1. Create a new folder at src/pages following the naming convention on creating a page.
2. Inside the newly created folder: a. Create a new file named template.js this will be used for writing html. b. Create a new file named style.styl this will be used for writing stylus css c. Create a new file named index.js this will be used for writing the functions used in the page.
3. Update the fragments at spa-lite.config.js. In the code:

   const fragments = {
     'page-home': 'src/pages/page-home/index.js',
     'page-not-found': 'src/pages/page-not-found/index.js'
   }

   add another property with a key that is the same as the name of the page and has a value of the location of the index.js of the page. Example: 'page-about': 'src/pages/page-about/index.js'

4. Update the routes at spa-lite.config.js. In the code:

   const routes = [
     {
       route: '/',
       page: 'page-home'
     },
     {
       route: 'no-page',
       page: 'page-not-found'
     }
   ];

   add another object:

   {
     route: '/about', // the route of the page
     page: 'page-about' // the page location
   }

Creating a Component

1. Create a new folder at src/components for dumb components or at src/smart-components for smart components. Note: Do following the naming convention on creating a component.
2. Inside the newly created folder: a. Create a new file named template.js this will be used for writing html. b. Create a new file named style.styl this will be used for writing stylus css c. Create a new file named index.js this will be used for writing the functions used in the component.
3. Import the component in the index.js then use the tag of your component in template.js.

[Rokuto]

Questions:

• When to use Flex or Grid
• When to use ternary operator or vanilla if else condition

[Rokuto]

Flex or Grid

Use grid for any two-dimentional layout and flex for one-dimentional layout. To understand the reasons you may read: Should I use Grid or Flexbox and The ultimate CSS battle: Grid vs Flexbox. To understand Grid and Flex you may read: A Complete Guide to Grid, CSS Grid Layout, A Complete Guide to Flexbox, and Flex.

[Rokuto]

Spacers

Use FLEX justify-content: space-between instead of a div class="spacer".

Form Inputs

1. Encapsulate <input>s in a <form>.
2. Do <form on-submit=${}>.
3. Remove on-submit form the <button>.

Any Repeating video

Do not use gif but use an mp4 video that loops.