# 100posts

## Environment

This project was started using [Angular CLI](https://github.com/angular/angular-cli/blob/master/README.md) with some changes listed below.

What's inside?:

- Latest and greatest [Angular v10.1.2](https://angular.io)
- [yarn](https://classic.yarnpkg.com) is used against [npm](https://www.npmjs.com)
- Removed [tslint](https://palantir.github.io/tslint) ([deprecated](https://medium.com/palantir/tslint-in-2019-1a144c2317a9)) added [eslint](https://eslint.org) with [prettier](https://prettier.io)
- Replaced unit tests with [Jest](https://jestjs.io)
- Replaced e2e with [Cypress](https://www.cypress.io) and includes Cucumber (Gherkin) language
- Implemented HMR (hot module replacement)
- Added multilingual support in angular way
- Code style using [prettier](https://prettier.io) and [eslint](https://eslint.org)
- SCSS code style handled by [StyleLint](https://stylelint.io) + [prettier](https://prettier.io)
- Added git hooks. Before each commit code linting is performed
- Added PWA (can be installed as desktop app)
- Lazy Loaded modules
- Demo with Navigation
- Auto deployment using github actions and githup pages

## Demo

### [Live demo](https://fdiskas.github.io/100posts)

Example without rxjs is on branch: `no-rxjs`


## Q&A

> We use JWTs a lot throughout our API. For instance, when a user logs in on our API, a JWT is issued and our web-application uses this token for every request for authentication. Here's an example of such a token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzb21lb25lQGV4YW1wbGUubmV0IiwiYWRtaW4iOmZhbHNlLCJ2YWxpZF91bnRpbCI6IldlZCBEZWMgMzEgMjM6NTk6NTkgQ0VTVCAxOTY5In0.4bl2puoaRetNjO1GsweKOnnQsYgwNa9bQIC-WQZkuNo Why is it (or isn't it) safe to use this?

JWT token should not have sensitive info. In this particular example there is `{ admin: false }` This can be changed by user.

> In our web-application, messages sent from one user to another, can contain HTML, which poses some security risks. Describe two attack vectors bad actors might try to abuse? And how would you mitigate these vectors?

Bad actors might try to include javascript and implement XSS attack. For example they can try to include images with additional attributes: `<img src="" onerror="alert('xss')" />` To prevent this I would convert user input html to markdown and communicate with clients only with markdown syntax but before displaying to the end user convert it back to html. In such case only plain text will be transfered and will be safe to use

> Explain the difference between mutable and immutable objects.
> a. What is an example of an immutable object in JavaScript?
> b. What are the pros and cons of immutability?
> c. How can you achieve immutability in your own code?

Immutable objects does not mutate its own state, but rather creates a new instance when data is modified
The object being frozen is said to be immutable.

a. Immutable object looks like:

class Test {
  get name() {
    return this._name;
  }

  constructor(name) {
    this._name = name;
    
    Object.freeze(this);
  }
  
  setName(value) {
    return new Test(value);
  }
}

const a = new Test('John');
console.log('name in a before set:', a.name); // output: name in a before set: John
const b = a.setName('Tod');
console.log('name in a after set:', a.name); // output: name in a after set: John
console.log('name in b after set:', b.name); // output: name in b after set: Tod

b. Pros: Data changes are more explicit. Because immutable objects does not modify its own state, any code that uses the instance is not affected by state mutation in turn making the architecture less fragile. Cons: It less performant than mutable approach. It needs to be strick and all team members should use it. It needs dependencies to make it right for example `immutablejs`

c. I can install [immutable.js](https://immutable-js.github.io/immutable-js/docs)

> If you would have to speed up the loading of our current web-application, how would you do that? (no need to actually do it, just describe the steps you would take)

I actually did it. PWA is the first step, make a service worker to cache all resources. Lazy load resources in chunks by route.

> What part of a new job do you think is more important
> a. Choose your own hardware, but work with a company supplied operating system
image.
> b. You're offered a standard piece of mediocre hardware. Free to pick your own
Software.

I would choose (a)
* Situations when most of problems in live and stage environments cannot be replicated locally are due to different software configurations on different machines. That includes: OS, drivers, services and etc.
* You can save development time because you won't need to configure project environment, services or tools