- added communication docs

- added addeding markdown clode block langs docs

dev/docs/frontend/core/communication.md

 # Communication
 
+The communication classes/files have only one dependency for XHR requests: axios
+
+So if you want to build another frontend you can pretty much copy all communication files because they are independent of react, semantic ui, and all the other libs
+
+The communication files are located at `frontend/src/communicationLayer/`
+
+The only other file that is related to communication is [frontend/src/setup.ts](setup.md).
+
+## Setup.ts
+
+The setup file sets up some interceptors
+
+- `for responses`
+	- if the response status is 401 it shows the login (resets user data so that the next request requires login)
+- if the content-type is json it transforms the response into a json object & catches responses where the return code was != ok and shows an error
+	- here the datetime strings from backend are translated into moment objects
+
+## Communication layer
+
+The communication layer is divided into smaller files for specific data. The name of the files tells you what data can be send/received which this sub-layer.
+
+All functions are async and must be awaited (promise).
+Because we use redux the actions of redux will trigger the invocation of these functions for us.
+Normally redux can't handle promises but with the redux middleware [redux-promise-middleware](../overview/usedFrameworks.md##redux-promise-middleware)
+ these gets automatically pending/resolved/rejected we only need to declare a reducer action for these actions
+
+For more information about the redux action & reducer stuff see [redux tutorial](../tutorials/redux.md)
+
+
+## Communication layer types
+
+Because we want static type checking we use typescript types to validate types
+
+For the communication layer we use the same Type-Names for the backend and frontend (so a backend class have a corresponding typescript interface in the frontend)
+
+There are some naming conventions...
+
+Because there is not always a 1-to-1 mapping between the backend (c#) and frontend (js) types we cannot have exactly the same structures. Also `data from backend to frontend` and `data from frontend to backend` have different structure (also true because of 1. reason).
+
+XXX stand for the name of the data e.g. DoExercise
+
+- `XXXFullBase` is the easiest one because this means that the backend and frontend have exactly the same type, so you can expect the backend to have a type `XXXFullBase` too.
+	This also means that for sending/receiving from and to backend the same type is used
+
+- `XXXFromBackend` data that is received from backend
+- `XXXForBackend` data that is send to backend
+- `XXXBase` is the base type that frontend & backend has in common, so data that is always send/received with every request for this data. normally `XXXFromBackend` and `XXXForBackend` derive from this type
+- `XXXFrontendExclusive` is a type only used in the frontend. This is e.g. needed if we add some temporarily data the the js object e.g. the left time string for exercises or
+	- if we receive data e.g. exercises that is split into smaller parts (exercise consists out of the exercise data, custom tests, normal tests, submit tests, ...)
+
+
+[TODO ref backend type names]
\ No newline at end of file

dev/docs/frontend/core/setup.md

+# Setup app file
+
+The setup file sets up different stuff that needs to be done before the whole app runs
+
+
+It requires some libs & css files
+
+It 
\ No newline at end of file

dev/docs/frontend/overview/readme.md

@@ -11,6 +11,21 @@ For state management/communication between components `redux` is used
 Because YAPeX is a SPA only the data needs to be transferred between the frontend and backend
 For this purpose we have dedicated classes which don't depend on `react` nor `semantic ui`, see [communication](../core/communication.md)
 
+## Immutability
+
+Hope this is the right article (didn't remember properly) [https://hackernoon.com/functional-programming-paradigms-in-modern-javascript-immutability-4e9751ca005c](https://hackernoon.com/functional-programming-paradigms-in-modern-javascript-immutability-4e9751ca005c) which describes good why we use immutability here...
+
+basically we don't want to deal with the reference stuff anymore
+
+With a single source of truth (single storage, see [redux](../tutorials/redux.md)) we have a lot of references to that store and many components use the same data in the storage. If a component would mutate the storage it could be surprising why data is changed inside other components (because of the reference).
+
+Also the functional style is more descriptive than the imperative one. 
+Performance wise this might be worse but the code should be more easily to read & write.
+
+## Workflow
+
+See [workflow](workflow.md) for the workflow of the app...
+which file is the entry point, and what is called & done from there one (e.g. login)
 
 ## Structure
 

dev/docs/frontend/overview/workflow.md

+# Workflow
+
+
+TODO
+Basic workflow, components, nested components, redux, async rendering & redux (async --> props are recalculated)
+
+where is the main entry point, what is called, ... login ...
+

dev/docs/frontend/tutorials/addingMarkdownLang.md

+# Adding a markdown code language
+
+The supported markdown code languages can be added/removed inside the `frontend/src/setup.ts` file.
+
+Just require the needed language inside highlight.js
+
+```ts
+const json = require('highlight.js/lib/languages/json')
+```
+
+(for all languages see `node_modules/highlight.js/lib/languages/)
+
+and register it
+
+```ts
+hljs.registerLanguage('json', json)
+```
+
+Now code blocks in exercise descriptions will highlight json code blocks
+
+a code block in markdown is produced with \`\`\` then the lang shortcut, then
+the code and closed with \`\`\` e.g.
+
+\`\`\`json
+{...}
+\`\`\`
+
+

dev/docs/frontend/tutorials/components.md

+# Components
+
+
+## components
+
+## static components
\ No newline at end of file

dev/docs/frontend/tutorials/readme.md

@@ -3,5 +3,11 @@
 Here are all tutorials listed for the frontend
 
 - [Setup deploy environment](setupDeploy.md) if you want to build the frontend and don't want to change or develop anything
+
 - [Setup development environment](setupDev.md) if you want to setup a development environment
 
+- [adding markdown code block language](addingMarkdownLang.md) if you want to add a code block lang for markdown
+
+- [redux](redux.md) describes how redux works, how we use it and how to add new actions/reducers
+
+- [adding components](components.md) how to add components and what to consider

dev/docs/frontend/tutorials/redux.md

+# Redux
+
+
+single source of truth
+
+## normal
+
+## async

dev/docs/frontend/tutorials/setupDev.md

 # Setup
 
-scripts/ anpassen!!
-
-debug.ts !!
-
-typeFixes.md
-
 [Most of this was copied from setup for deployment]
 
 The file describes how to setup the frontend used to deploy the app.