
---

stuff

---

# h1 Heading 8-)

## h2 Heading

### h3 Heading

#### h4 Heading

##### h5 Heading

###### h6 Heading

## Horizontal Rules

Custom component: <TestComponent />

---

---

---

## Typographic replacements

Enable typographer option to see result.

(c) (C) (r) (R) (tm) (TM) (p) (P) +-

test.. test... test..... test?..... test!....

!!!!!! ???? ,, -- ---

"Smartypants, double quotes" and 'single quotes'

## Emphasis

**This is bold text**

**This is bold text**

_This is italic text_

_This is italic text_

~~Strikethrough~~

## Blockquotes

> Blockquotes can also be nested...
>
> > ...by using additional greater-than signs right next to each other...
> >
> > > ...or with spaces between arrows.

## Lists

Unordered

- Create a list by starting a line with `+`, `-`, or `*`
- Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    - Ac tristique libero volutpat at
    * Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
- Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

4. You can use sequential numbers...
5. ...or keep all the numbers as `1.`

Start numbering with offset:

57. foo
1. bar

## Code

Inline `code`

Indented code

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code

Block code "fences"

```
Sample text here...
```

Syntax highlighting

```js
var foo = function (bar) {
  return bar++;
};

console.log(foo(5));
```

## Tables

| Option | Description                                                               |
| ------ | ------------------------------------------------------------------------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default.    |
| ext    | extension to be used for dest files.                                      |

Right aligned columns

| Option |                                                               Description |
| -----: | ------------------------------------------------------------------------: |
|   data | path to data files to supply the data that will be passed into templates. |
| engine |    engine to be used for processing templates. Handlebars is the default. |
|    ext |                                      extension to be used for dest files. |

## Links

[link text](http://dev.nodeca.com)

[link with title](http://nodeca.github.io/pica/demo/ "title text!")

Autoconverted link https://github.com/nodeca/pica (enable linkify to see)

## Images

![Minion](https://octodex.github.com/images/minion.png)
![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Like links, Images also have a footnote style syntax

![Alt text][id]

With a reference later in the document defining the URL location:

[id]: https://octodex.github.com/images/dojocat.jpg "The Dojocat"

## Plugins

The killer feature of `markdown-it` is very effective support of
[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).

### [Emojies](https://github.com/markdown-it/markdown-it-emoji)

> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
>
> Shortcuts (emoticons): :-) :-( 8-) ;)

see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.

### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)

++Inserted text++

==Marked text==

Footnote 1 link[^first].

Footnote 2 link[^second].

Inline footnote^[Text of inline footnote] definition.

Duplicated footnote reference[^second].

[^first]: Footnote **can have markup**

    and multiple paragraphs.

[^second]: Footnote text.

### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)

Term 1

: Definition 1
with lazy continuation.

Term 2 with _inline markup_

: Definition 2

        { some code, part of Definition 2 }

    Third paragraph of definition 2.

_Compact style:_

Term 1
~ Definition 1

Term 2
~ Definition 2a
~ Definition 2b

### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)

This is HTML abbreviation example.

It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.

\*[HTML]: Hyper Text Markup Language

### [Custom containers](https://github.com/markdown-it/markdown-it-container)

::: warning
_here be dragons_
:::

Custom component: <ContactForm />


Example Post


# Easy

#### 1. Reverse a String(ES6)

Take the string provided and reverse the order of the characters, must be a string when done.

```javascript
const revstr = (str) => str.split("").reverse().join("");

console.log(revstr("abcdefghijklmnopqrst"));
```

---

#### 2. Factorialize(ES6)

Return the factorial of the provided integer. If the integer is represented with the letter n, a factorial is the product of all positive integers less than or equal to n. Factorials are often represented with the shorthand notation n!

For example: 5! = 1 x 2 x 3 x 4 x 5 = 120

```javascript
const factorialize = (num) => {
  let result = 1;
  for (let i = 1; i <= num; i++) {
    result *= i;
  }
  return result;
};

console.log(factorialize(5));
```

---

#### 3. Palindrome(ES6)

Return true if the given string is a palindrome. Otherwise, return false. A palindrome is a word or sentence that’s spelled the same way both forward and backward, ignoring punctuation, case, and spacing.

Note. You’ll need to remove all non-alphanumeric characters (punctuation, spaces and symbols) and turn everything lower case in order to check for palindromes.

We’ll pass strings with varying formats, such as “racecar”, “RaceCar”, and “race CAR” among others.

```javascript
const isPalindrome = (str) => {
  let reg = /[\W_]/g;
  let newStr = str.toLowerCase().replace(reg, "");

  const revString = newStr.split("").reverse().join("");
  return revString === newStr;
};

console.log(isPalindrome("racecar"));
```

---

#### 4. Longest Word(ES6)

Return the length of the longest word in the provided sentence.

Your response should be a number.

Provided test cases:

findLongestWord(“May the force be with you”) should return 5

findLongestWord(“Google do a barrel roll”) should return 6

findLongestWord(“What if we try a super-long word such as otorhinolaryngology”) should return 19

```javascript
const longestWord = (str) => {
  let words = str.split(" ");
  let longest = "";
  for (let word of words) {
    if (word.length > longest.length) longest = word;
  }
  return longest.length;

  //better way
  // return str.split(" ").sort((a, b) => {
  //   return b.length - a.length;
  // })[0];
};

console.log(longestWord("the cow jumped over the moon"));
```

---

#### 5. Titlecase

Return the provided string with the first letter of each word capitalized. Make sure the rest of the word is in lower case. For the purpose of this exercise, you should also capitalize connecting words like “the” and “of”.

```javascript
const titleCase = (str) => {
  return str
    .toLowerCase()
    .split(" ")
    .map((word) => word[0].toUpperCase() + word.substr(1))
    .join(" ");
};

console.log(titleCase("the cow jumped over the moon again"));
```

---

#### 6. FizzBuzz 2 ways

FizzBuzz is the classic algorithm everyone should have. Here I have it run 2 ways. The difference is the first way prints out all numbers up to a limit and the second way allows the user to check a specific number.

```javascript
const fizzbuzz = () => {
  for (let i = 1; i <= 100; i++) {
    if (i % 15 === 0) {
      console.log("fizzbuzz");
    } else if (i % 3 === 0) {
      console.log("fizz");
    } else if (i % 5 === 0) {
      console.log("buzz");
    } else {
      console.log(i);
    }
  }
};

console.log(fizzbuzz());
```

FizzBuzz with user checking a specific number:

```javascript
const fizzbuzz = (num) => {
  if (num % 15 === 0) return "fizzbuzz";
  if (num % 3 === 0) return "fizz";
  if (num % 5 === 0) return "buzz";
  return num;
};

console.log(fizzbuzz(33));
```

---

# Medium

#### 1. Equal Sides Of An Array

You are going to be given an array of integers. Your job is to take that array and find an index N where the sum of the integers to the left of N is equal to the sum of the integers to the right of N. If there is no index that would make this happen, return -1.

### For example:

Let's say you are given the array [1,2,3,4,3,2,1]:
Your function will return the index 3, because at the 3rd position of the array, the sum of left side of the index ({1,2,3}) and the sum of the right side of the index ({3,2,1}) both equal 6.

-

```javascript
function findEvenIndex(arr) {
  for (var i = 1; i < arr.length - 1; i++) {
    if (
      arr.slice(0, i).reduce((a, b) => a + b) ===
      arr.slice(i + 1).reduce((a, b) => a + b)
    ) {
      return i;
    }
  }
  return -1;
}
```

### ES6 Method

```javascript
const findEvenIndex = (arr) => {
  return arr.findIndex((item, index) => {
    return (
      arr.slice(0, index).reduce((a, b) => a + b, 0) ===
      arr.slice(index + 1).reduce((a, b) => a + b, 0)
    );
  });
};
console.log(findEvenIndex([1, 2, 3, 4, 3, 2, 1]));
```

---

#### 2. Unique In Order

Implement the function unique_in_order which takes as argument a sequence and returns a list of items without any elements with the same value next to each other and preserving the original order of elements.

-

```javascript
const uniqueInOrder = (it) => {
  let result = [];
  let last;
  for (var i = 0; i < it.length; i++) {
    if (it[i] !== last) {
      result.push((last = it[i]));
    }
  }

  return result;
};
```

#### ES6 Method

```javascript
const uniqueInOrder = (d) => [...d].filter((x, i, a) => x != a[i + 1]);

console.log(uniqueInOrder("AAAABBBCCDAABBB"));
```

---

#### 3. Largest Number in an Array

Return an array consisting of the largest number from each provided sub-array. For simplicity, the provided array will contain exactly 4 sub-arrays.

Remember, you can iterate through an array with a simple for loop, and access each member with array syntax arr[i].

-

```javascript
const larg = (arr) => {
  let maxes = [];
  for (let i = 0; i < arr.length; i++) {
    let tempMax = arr[i][0];
    for (let j = 0; j < arr[i].length; j++) {
      let currel = arr[i][j];
      if (currel >= tempMax) {
        tempMax = currel;
      }
    }
    maxes.push(tempMax);
  }
  return maxes;
};
```

#### ES6 Method

```javascript
const larg = (arr) => {
  return arr.map((subArr) => Math.max.apply(null, subArr));
};

console.log(
  larg([
    [5, 40, 6, 7],
    [1, 6, 80, 8],
    [3, 60, 9, 8],
    [50, 4, 1, 6],
  ])
);
```


JavaScript Algorithms


![Khandoor](https://res.cloudinary.com/khandoors/image/upload/c_scale,h_200,w_200/v1562882733/Blog%20Images/MERN-Stack.jpg "MERN Stack")

# MERN Stack 2019

ES6, MongoDB Atlas and React Hooks

## Node.JS (https://nodejs.org/en/)

NodeJS allows JavaScript to be written on the server as opposed to written in the browser.
Synchronous -> Blocking IO
Asynchronous -> Non-Blocking IO
Node.JS is a single thread synchronous process. Therefore we must use callbacks in order to achieve an asynchronous non-blocking process (not technically asynchronous but feels that way). This can lead to 'Callback Hell', identified by the flying 'V' formation, if not written properly. We use Promises and/or Async/Await to avoid 'Callback Hell'.

### NPM (https://www.npmjs.com/) Packages:

'npm Init' - to create package.json file.

'npm install' for regular dependencies (--save deprecated)

'npm i --save-dev or (-D)' for development dependencies

'npm i nodemon --global' (install globally, across your machine)

'npm uninstall nodemon' (deletes a package)

Common Packages:

"dependencies":
{

    "cors": "^2.8.5",
    "dotenv": "^8.0.0",
    "express": "^4.17.1",
    "mongoose": "^5.6.2"

},

Requiring an NPM package in our app:

const express = require("express");

## Express (https://expressjs.com/)

Basic Server:

const express = require("express");

const app = express();

app.get("/", (req, res) => {

res.status(200).json({ message: "Hello from the server!", app: "MERN Test" });

});

app.post("/", (req, res) => {

res.send(" post message test");

});

const port = process.env.PORT || 4000;

app.listen(port, () => {

console.log(`App Running on port ${PORT} ...`);

});

### Express Middleware Stack

1. Order matters they are executed in the order they are entered.
   app.use(cors());
   app.use(express.json())- (Body Parser)
   app.use("/users", usersRouter);
   app.use("/exercises", exercisesRouter);

## MongoDB (https://cloud.mongodb.com)

There is very little to do with the MongoDB:

1.  get connection string from MongoDB site and set in the dotenv file.
    MONGO_URI = 'connection string'
2.  Import the .env file to the app.js file.
    const uri = process.env.MONGO_URI;
    Mongoose will take care of the rest of the MongoDB code.

## Mongoose (https://mongoosejs.com)

Connection:
get connection string from MongoDB site and set in the dotenv file.

const uri = process.env.MONGO_URI;

mongoose
.connect(uri, {
useNewUrlParser: true,
useCreateIndex: true,
useFindAndModify: false
})
.then(() => console.log("Mongo Connected"))
.catch(err => console.log(err));

Implementing CRUD functionality is a 3 step process

1.  set models for each collection
    i.e. const mongoose = require("mongoose");

        		const userSchema = new mongoose.Schema({
        		  username: {
        			type: String,
        			required: true,
        			unique: true,
        			trim: true,
        			minlength: 3
        		  }
        		});

        		module.exports = mongoose.model("User", userSchema);

2.  import models into routes and make routes

    :

3)  Require and use routes in the server.js
    i.e. const exercisesRouter = require("./routes/exercises");
    const usersRouter = require("./routes/users");

        i.e. app.use("/users", usersRouter);
             app.use("/exercises", exercisesRouter);

        	 or combine into 1 line:
        	 app.use("/users", require("./routes/users"))


MERN Stack


# Project Title

A brief description of what this project does and who it's for

## Usage/Examples

```javascript
import Component from "my-project";

function App() {
  return <Component />;
}
```

## Optimizations

What optimizations did you make in your code? E.g. refactors, performance improvements, accessibility

## Badges

Add badges from somewhere like: [shields.io](https://shields.io/)

[![MIT License](https://img.shields.io/apm/l/atomic-design-ui.svg?)](https://github.com/tterb/atomic-design-ui/blob/master/LICENSEs)
[![GPLv3 License](https://img.shields.io/badge/License-GPL%20v3-yellow.svg)](https://opensource.org/licenses/)
[![AGPL License](https://img.shields.io/badge/license-AGPL-blue.svg)](http://www.gnu.org/licenses/agpl-3.0)

## Demo

Insert gif or link to demo

## API Reference

#### Get all items

```http
  GET /api/items
```

| Parameter | Type     | Description                |
| :-------- | :------- | :------------------------- |
| `api_key` | `string` | **Required**. Your API key |

#### Get item

```http
  GET /api/items/${id}
```

| Parameter | Type     | Description                       |
| :-------- | :------- | :-------------------------------- |
| `id`      | `string` | **Required**. Id of item to fetch |

#### add(num1, num2)

Takes two numbers and returns the sum.

## Environment Variables

To run this project, you will need to add the following environment variables to your .env file

`API_KEY`

`ANOTHER_API_KEY`

## Features

- Light/dark mode toggle
- Live previews
- Fullscreen mode
- Cross platform

## Installation

Install my-project with npm

```bash
  npm install my-project
  cd my-project
```

## Lessons Learned

What did you learn while building this project? What challenges did you face and how did you overcome them?

![Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/th5xamgrr6se0x5ro4g6.png)

## Tech Stack

**Client:** React, Redux, TailwindCSS

**Server:** Node, Express


Readme.so


# Project: AWS / Next.js / Material-ui

## Tools used in this app:

### The backend was created using a serverless file to create AWS resources:

https://www.serverless.com/blog/node-rest-api-with-serverless-lambda-and-dynamodb

### The frontend library used is NEXT.js:

https://next.js.org/

### The CSS framework used is Material-ui:

https://material-ui.com/

### The below Github gives a clear example of how to create markdown blogs in Next.js:

https://github.com/vercel/next.js/tree/canary/examples/with-mdx-remote

### The below Github gives a clear example of how to integrate Material-ui with Next.js:

https://github.com/mui-org/material-ui/tree/master/examples/nextjs

### AWS Amplify is an evolving service with great potential:

https://docs.amplify.aws/guides/hosting/nextjs/q/platform/js#deploy-and-host-an-ssg-only-app

6/1/21: Currently, Amplify doesn’t fully support Image Component and Automatic Image Optimization available in Next.js 10. To manually deploy the next-app example, you must edit the index.js file to remove this feature. Navigate to pages/index.js and delete the following line near the top of the file:

### The Animation Library used is Framer Motion:

https://www.framer.com/motion/

### The email service used is Formspree:

Formspree: https://formspree.io/forms

### Markdown helper:

- https://readme.so/ -- This is an awesome site for creating markdown!

---

---

---

## Contact Me: <ContactForm />


This is a rundown of the technologies used in this project.

Example Post -

JavaScript Algorithms -

MERN Stack -

Readme.so -

This Project -