Skip to content

developing.md

Latest commit

 

History

History
67 lines (52 loc) · 2.22 KB

developing.md

File metadata and controls

67 lines (52 loc) · 2.22 KB
Raw

The developing stages flow

These were priorities when this project is being developed:

  1. HTML structure (semantic and accessible as possible).
  2. Functionality.
  3. Style when needed. It should not interfere with the app's heart function.
  4. make mds tab besides each other on github.

marked.js

Full Reference.

  • Go to this cdn.
  • Copy one of the script tags.
  • Add / paste it to your html file. An example: 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/11.2.0/marked.min.js"
 	integrity="sha512-BLTLvBrdIq0KLzJH2C9GpxL6KmCqX5cofqkYxUZPp8J2beb7ABAXPpL7aIbtSdtqLWLIgAyFFgePj1p/sq7lRw=="
 	crossorigin="anonymous"
 	referrerpolicy="no-referrer"
 ></script>
  • Use the window.marked in your react.js.

Parse String to HTML: dangerouslySetInnerHTML

Check this documentation for reference.

The dangerouslySetInnerHTML is React's replacement for using innerHTML in the browser DOM.

REMINDER: This can dangerously expose users to cross-site scripting (XSS) attacks.

Sample code below:

function MyComponent {
	return <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />;
}

Using SASS

  1. Installed SASS - reference here. Run this in the terminal: 
    # install as devDependency
npm i --save-dev sass
  2. Created a sass file. 
    ./src/styles/app.scss
  3. Imported the sass file to react.js. This will automatically compile to a CSS file. 
    import './styles/app.scss';
  4. Partials: Create partials with filenames beginning with underscores (_). The @import rule is used to share variables and styles among sass files. Reference. 
    // import to './styles.scss' a partial file named '_partial.scss'

@import './partial.scss';

Fixing "Filename too long" error on git

Reference for full read.

In the project-root-directory, run the command in the terminal:

```
git config --system core.longpaths true
```