--------------------------------------------------------------------------------
/raw/ressources-for/monitoring.md:
--------------------------------------------------------------------------------
1 | [awwwards.com](https://www.awwwards.com/): A place listing the best looking website each days.
2 |
3 | [stateofjs.com](https://stateofjs.com): Provides interesting statistics about the evolution of javascript each year.
4 |
5 | [codepen.io](https://codepen.io/): a plateform to write code and share the result.
--------------------------------------------------------------------------------
/front-end-classics/center-div/style.css:
--------------------------------------------------------------------------------
1 | section {
2 | height: 50vh;
3 | border-top: solid 1px black;
4 | border-bottom: solid 1px black;
5 | }
6 |
7 | .method-grid {
8 | display: grid;
9 | place-items: center;
10 | }
11 |
12 | .method-flex {
13 | display: flex;
14 | justify-content: center;
15 | align-items: center;
16 | }
--------------------------------------------------------------------------------
/raw/how-to/devops/oracle/installs.md:
--------------------------------------------------------------------------------
1 | A non-exhaustive list of commands and tutorials to install things on Oracle Linux 9
2 |
3 | Node Version Manager (nvm):
4 |
5 | ```sh
6 | # change version to the latest
7 | curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
8 | source ~/.bashrc
9 | ```
10 |
11 | ```sh
12 | sudo dnf install git-all
13 | ```
--------------------------------------------------------------------------------
/raw/shortcuts.md:
--------------------------------------------------------------------------------
1 | ### Key glossary
2 |
3 | `^`: CTRL key
4 |
5 | ### Terminal
6 |
7 | `alt` + `left` or `alt` + `right`: navigate cursor to previous/next word
8 |
9 | `^` + `a`: go to the start of the command
10 |
11 | `^` + `e`: go to the end of the command
12 |
13 | `^` + `k`: cut the end of the line starting from cursor
14 |
15 | `^` + `y`: paste what has been previously cutted by `^` + `k`
16 |
--------------------------------------------------------------------------------
/front-end-classics/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 | center div
10 | element takes remaining place
11 | animation from height 0 to height auto
12 | image preview
13 | drag and drop file
14 | download from click on button
15 | wysiwyg
16 | no js
17 |
18 |
19 |
--------------------------------------------------------------------------------
/raw/glossary/front-end/react.md:
--------------------------------------------------------------------------------
1 | # React
2 |
3 | **React** is a Javascript library developed by Facebook in 2013. It is the most influential ui library of modern front-end development. Even if it is still a library, its environment has grown enough to be now considered as a front-end [framework](#framework).
4 |
5 | Official website: [react.dev](https://react.dev/)
6 |
7 | React [getting-started](https://react.dev/learn)
8 |
9 | Other ressources:
10 | - [Fireship - React in 100 Seconds](https://www.youtube.com/watch?v=Tn6-PIqc4UM)
--------------------------------------------------------------------------------
/web-projects/index.md:
--------------------------------------------------------------------------------
1 | This is a list of web technologies and projects that use it
2 |
3 | - Front-end
4 | - [ ] tchat video
5 | - [ ] debouncing
6 | - [ ] infinite sroll (intersection observer)
7 | - [ ] streams
8 | - Back-end
9 | - [ ] OAuth
10 | - [ ] Strapi
11 | - [ ] Ws
12 | - [ ] webrtc
13 | - [ ] mailing
14 | - [ ] github actions
15 | - [ ] GraphQL
16 | - [ ] redis
17 | - [ ] jest
18 | - Stacks
19 | - [ ] MERN
20 | - [ ] MEAN
21 | - [ ] FKit
22 | - [ ] Nextjs Contentful
23 | - [ ] Docusaurus + algoliaDocSearch
24 | - Non-Web Topics
25 | - [ ] Cli
--------------------------------------------------------------------------------
/raw/ressources-for/front-end.md:
--------------------------------------------------------------------------------
1 | [caniuse.com](https://caniuse.com): Allows you to quickly see the compatibility of any css property or javascript api beetween many browsers.
2 |
3 | [public-apis](https://github.com/public-apis/public-apis): A repo listing many usefull publics api to use in your projects.
4 |
5 | [css-pattern.com](https://css-pattern.com/): A list of nice repetitive background to add to your projects.
6 |
7 | [stacksorted.com](https://stacksorted.com/): A collection of the web's best designs sorted by elements. Choose an element and view projects/websites with creative designs for it.
--------------------------------------------------------------------------------
/front-end-classics/center-div/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
I am in the center
13 |
14 |
15 |
I am in the center
16 |
17 |
18 |
--------------------------------------------------------------------------------
/raw/typescript-scenarios.md:
--------------------------------------------------------------------------------
1 | Homogeneous Arrays, arrays where the items can be of many type but the same for all items
2 |
3 | ```ts
4 | type HomogeneousArray = T[];
5 | ```
6 |
7 | Object with self exclusive properties
8 |
9 |
10 | ```ts
11 | interface ressourceIdentifier = { login: string, id?: never } | { id: number, login?: never };
12 | ```
13 |
14 | Type of the value returned by a function
15 |
16 | ```ts
17 | type User = ReturnType;
18 | type FetchDataResult = Awaited>; // for the value returned by an async function, if the function return a Promise, this is theType
19 | ```
20 |
--------------------------------------------------------------------------------
/tools/raw-to-content/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["ESNext"],
4 | "module": "esnext",
5 | "target": "esnext",
6 | "moduleResolution": "bundler",
7 | "moduleDetection": "force",
8 | "allowImportingTsExtensions": true,
9 | "noEmit": true,
10 | "composite": true,
11 | "strict": true,
12 | "downlevelIteration": true,
13 | "skipLibCheck": true,
14 | "jsx": "preserve",
15 | "allowSyntheticDefaultImports": true,
16 | "forceConsistentCasingInFileNames": true,
17 | "allowJs": true,
18 | "types": [
19 | "bun-types" // add Bun global
20 | ]
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/raw/how-to/git/deploy-private-repo-on-server.md:
--------------------------------------------------------------------------------
1 | # Deploy a private repo on a server
2 |
3 | 1. Run the ssh-keygen procedure:
4 |
5 | ```sh
6 | ssh-keygen -t ed25519 -C "your_email@example.com"
7 | ```
8 |
9 | 2. update the `config` file in your `~/.ssh/`, add:
10 | ```sh
11 | Host repo-name
12 | Hostname github.com
13 | IdentityFile=~/.ssh/the_private_key # might need to modify this /home/opc/.ssh/the_private_key
14 | ```
15 |
16 | 3. add the content your `the_key.pub` to the deploy key of your repo: settings > Deploy keys > `Add deploy key`
17 |
18 | 4. clone your repo:
19 | ```sh
20 | git clone git@repo-name:your-github-username/repo-name.git
21 | ```
22 |
--------------------------------------------------------------------------------
/raw/ressources-for/learning.md:
--------------------------------------------------------------------------------
1 | [roadmap.sh](https://roadmap.sh/) is a platform that provide step-by-step path to learn many development languages/frameworks/tools/etc
2 |
3 | [fireship.io](https://fireship.io/) is a website and a Youtube channel to discover and get quick explanations on old, new and common technologies.
4 |
5 | [freecodecamp.org](https://www.freecodecamp.org/) is a website and a Youtube channel to learn many common used technologies with very complete vidéo course
6 |
7 | https://dontasktoask.com/
8 |
9 | https://xyproblem.info/
10 |
11 | https://nohello.net/fr/
12 |
13 | https://stackoverflow.com/help/how-to-ask
14 |
15 | http://catb.org/~esr/faqs/smart-questions.html
--------------------------------------------------------------------------------
/courses/express/index.md:
--------------------------------------------------------------------------------
1 | [< Back to home](../../README.md)
2 |
3 | ---
4 |
5 | # Express
6 |
7 | This course explain the basics of express.
8 |
9 | I tried to make it as complete as possible for it to be fully understand.
10 |
11 | To fully understand why it is used, it may be helpful to understand how the web evolve since its beginning and what the REST architecture is.
12 |
13 | ## Table of contents
14 |
15 | - [Introduction](#)
16 | - [Setup](#)
17 | - [Endpoints, routes & router](#)
18 | - [Cors](#)
19 | - [Middlewares: static & json](#)
20 | - [Database integration with Prisma](#)
21 | - [Register & login with bcrypt](#)
22 | - [JSON Web Token](#)
23 | - [Custom auth middleware](#)
24 | - [Project structure example](#)
--------------------------------------------------------------------------------
/raw/how-to/index.md:
--------------------------------------------------------------------------------
1 | [< Back to home](../../README.md)
2 |
3 |
How to
4 |
5 |
ddddd
6 |
7 | Table of Contents
8 | ===
9 |
10 | - front-end
11 | - [Bind your front-end app to your backend api in development](./front-end/bind-your-front-end-app-to-your-backend-api-in-development.md)
12 | - back-end
13 | - Nest
14 | - [Setup static file module but keep controller to root with global prefix](./back-end/nest/setup-static-file-module-but-keep-controller-to-root-with-global-prefix.md)
15 | - devops
16 | - aws
17 | - [Setup an AWS ec2 instance to run a node app](./devops/aws/setup-an-aws-ec2-instance-to-run-a-node-app.md)
18 | - [Running Multiple Web apps on AWS](./devops/aws/running-multiple-web-apps-on-aws.md)
19 | - [Install docker on AWS](./devops/aws/install-docker-on-aws.md)
--------------------------------------------------------------------------------
/raw/how-to/devops/aws/install-docker-on-aws.md:
--------------------------------------------------------------------------------
1 | # Install docker on AWS
2 |
3 | Install and start Docker on boot
4 |
5 | ```sh
6 | sudo amazon-linux-extras install docker (flem de test mais je trust)
7 | sudo systemctl enable docker
8 | sudo systemctl start docker
9 | ```
10 |
11 | To be able to use Docker without sudo:
12 |
13 | ```sh
14 | sudo usermod -a -G docker ec2-user
15 | ```
16 |
17 | To apply permission, you need to reboot your aws instance
18 |
19 | Install docker-compose
20 |
21 | ```sh
22 | sudo curl -L https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose
23 | ```
24 |
25 | Fix permissions, you don't need to restart your instance here.
26 |
27 | ```sh
28 | sudo chmod +x /usr/local/bin/docker-compose
29 | ```
30 |
31 | To verify your installation:
32 |
33 | ```sh
34 | docker-compose version
35 | ```
36 |
37 | CREDIT: https://gist.github.com/npearce/6f3c7826c7499587f00957fee62f8ee9
--------------------------------------------------------------------------------
/raw/how-to/devops/aws/running-multiple-web-apps-on-aws.md:
--------------------------------------------------------------------------------
1 | # Running Multiple Web apps on AWS
2 |
3 | Sometimes when you are building small apps, you might want to run multiple applications on the same ip address but [bind differents subdomains or domain names](#) to each app, what you are looking for here is to setup a [reverse-proxy](https://www.cloudflare.com/en-gb/learning/cdn/glossary/reverse-proxy/), to achieve this, you can use [Nginx](https://www.nginx.com/).
4 |
5 | After installing it, edit the nginx.conf (on Ubuntu: /etc/nginx/nginx.conf)
6 |
7 | ```nginx
8 | http {
9 |
10 | server {
11 | listen 80;
12 | server_name subdomain.domain-name.com;
13 |
14 | location / {
15 | proxy_pass http://127.0.0.1:3000;
16 | }
17 | }
18 |
19 | server {
20 | listen 80;
21 | server_name other-subdomain.domain-name.com;
22 |
23 | location / {
24 | proxy_pass http://127.0.0.1:4000
25 | }
26 | }
27 | }
28 | ```
29 |
30 | Don't forget to restart Nginx, so that Nginx takes into account the new parameters
31 | ```
32 | sudo systemctl restart nginx.service
33 | ```
34 |
35 | After this, subdomain.domain-name.com will serve the app running on the port 3000 and the other-subdomain.domain-name.com will serve the app running on the port 4000.
36 |
37 | This works because Nginx take a look at the 'host' property of the incoming request and direct it to the appropriate service.
--------------------------------------------------------------------------------
/raw/glossary/index.md:
--------------------------------------------------------------------------------
1 | [< Back to home](../../README.md)
2 |
3 |
Glossary
4 |
5 | - gloabal
6 | - [Markup Language]
7 | - [Programming Language]
8 | - [Framework]
9 | - [Paradigm]
10 | - [Cache]
11 | - [SOLID]
12 | - internet
13 | - [Content Delivery Network (CDN)]
14 | - [SSH]
15 | - front-end
16 | - [HTML]
17 | - [PUG]
18 | - [CSS]
19 | - [SASS]
20 | - [SCSS]
21 | - [LESS]
22 | - [Javascript]
23 | - [JQuery]
24 | - [Components]
25 | - [React](./front-end/react.md)
26 | - [Angular]
27 | - [Vue]
28 | - [Svelte]
29 | - [Solide]
30 | - [WebAssembly]
31 | - back-end
32 | - [Apache HTTP Server](./back-end/apache-http-server.md)
33 | - [NGINX]
34 | - [Proxy]
35 | - database
36 | - [ACID]
37 | - [Object Relation Mapping (ORM)]
38 | - [Graphql]
39 | - [SQL]
40 | - [POSTGRES]
41 | - [MySQL]
42 | - [MariaDB]
43 | - [Cassandra]
44 | - [Redis]
45 | - The Programming Languages
46 | - [C]
47 | - [C++]
48 | - [C#]
49 | - [Php]
50 | - [Java]
51 | - [Javascript]
52 |
53 | ### Example Section
54 |
55 | #### Example
56 |
57 | This is the definition of an example
58 |
59 | Official website: [example.com](#)
60 |
61 | ```ts
62 | // A comment in the code
63 | function foo(): string {
64 | return 'bar'
65 | }
66 | ```
67 |
68 | Instal it here: [instal-it-here.com](#)
69 |
70 | Getting started or tuto: [tuto-it-here.com](#)
71 |
72 | Other ressources:
73 | - [here](#)
74 |
75 | Some alternatives
76 | - [Alt 1](#)
77 | - [Alt 2](#)
78 | - [Alt 3](#)
--------------------------------------------------------------------------------
/raw/unset/md.md:
--------------------------------------------------------------------------------
1 | # Use full power of markdown
2 |
3 | Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber created Markdown in 2004 as a markup language that is easier to read in its source code form. Markdown is widely used for blogging and instant messaging, and also used elsewhere in online forums, collaborative software, documentation pages, and readme files.
4 |
5 | Even if all many system uses Mardown, the rendered output might differ a little bit, a good way to visualize this is to compare how github and vscode renders the same Markdown input.
6 |
7 | Here, i will only describe Markdown that works on github.
8 |
9 | First of all, it is important to specify that several html tags produce the same output:
10 |
11 | ```Markdown
12 | # This is a h1
13 |
This is also a h1
14 | ```
15 |
16 | Here is a non exhaustive list of those correspondance
17 |
18 | ```Markdown
19 | ##
20 |
21 |
22 | ###
23 |
24 |
25 | | Syntax | Description |
26 | | ----------- | ----------- |
27 | | Header | Title |
28 | | Paragraph | Text |
29 |
30 |
31 |
32 |
Syntax
33 |
Description
34 |
35 |
36 |
37 |
38 |
Header
39 |
Title
40 |
41 |
42 |
Paragraph
43 |
Text
44 |
45 |
46 |
47 | ```
48 |
49 | Markdown wrote using html can contain attributes, for example:
50 |
51 | ```Markdown
52 | # This h1 is aligned on left
53 |
This h1 is centered
54 | ```
55 |
56 | Personally, i use html tags only for special cases that can only be achieved this way.
--------------------------------------------------------------------------------
/raw/how-to/back-end/nest/setup-static-file-module-but-keep-controller-to-root-with-global-prefix.md:
--------------------------------------------------------------------------------
1 | # Setup static file module but keep controller to root with global prefix
2 |
3 |
4 |
5 | In my case
6 |
7 | I was working on a project who aims to easily look at the result of frontend project repos by giving a way to visualize them without having to clone them in the first place.
8 | I wanted to use the nest ServeStaticModule to serve the preview of the projects visualizer but keep a way to bind a controller to the root url (/) to render a view of all already cloned projects. In the other hand, i wanted to prefix all other routes with the api prefix.
9 |
10 | ```
11 | / => All projects, a list dynamically rendered
12 | /repos/:repo-owner/:project-name/index.html => No controller bind here, managed by the ServeStaticModule
13 | /api/... => any other controller
14 | ```
15 |
16 |
17 |
18 | In **main.ts**
19 |
20 | ```ts
21 | app.setGlobalPrefix('api', {
22 | exclude: ['', 'api']
23 | });
24 | ```
25 |
26 | In **app.controller.ts**
27 |
28 | ```ts
29 | @Controller()
30 | export class AppController {
31 |
32 | // Accessible on /
33 | @Get()
34 | root() {
35 | /*...*/
36 | }
37 |
38 | // /!\ Accessible on /api/da /!\
39 | @Get('da')
40 | da() {
41 | /*...*/
42 | }
43 | }
44 | ```
45 |
46 | In **api.controller.ts**
47 |
48 | ```ts
49 | @Controller('api')
50 | export class ApiController {
51 | // Accessible on /api/
52 | @Get()
53 | getHello(){
54 | /*...*/
55 | }
56 |
57 | // /!\ Accessible on /api/api/info /!\
58 | @Get('info')
59 | getInfo(){
60 | /*...*/
61 | }
62 | }
63 | ```
64 |
65 | Any other route will be prefix by 'api'.
66 |
67 | Keep in mind that this approache might cause unexpected behaviors
--------------------------------------------------------------------------------
/raw/my-tools.md:
--------------------------------------------------------------------------------
1 | This is an exaustive list of the tools/apps I use/need as a Javascript/Node fullstack developer.
2 |
3 | ### Git
4 |
5 | [Git](https://git-scm.com/) is by far the most used version control system in any development project.
6 |
7 | ### Github
8 |
9 | [Github](https://github.com/) automatically goes with Git since it the reference concerning git repositories managements.
10 |
11 | ### Node
12 |
13 | As a fullstack javascript developern [Node](https://nodejs.org) is the runtime of javascript out of the browser. It comes with [npm](https://www.npmjs.com/), the Node Package Manager wich allow you to manage your dependancies and globally install tools.
14 |
15 | ### Visual Studio Code
16 |
17 | [VS Code](https://code.visualstudio.com/) is a simple but complete text editor. It is not an IDE.\
18 | VS Code allow you to easily download and install a bunch of free plugins, I personnally use the followings:
19 |
20 | - Live Server: A developpement server that enable hot reloading for vanilla web projects.
21 | - Markdown Preview Github Styling: to mimic Github's markdown
22 | - Remote Explorer: An SSH client that allows you to visualise the files present on you server.
23 | - GitHub Copilot: The Github's AI to predic your code. (Free with student license)
24 |
25 | ### Postman
26 |
27 | [Postman](https://www.postman.com/) is a tool used to make requests and to test your API endpoints.
28 |
29 | ### Firefox & Chrome
30 |
31 | [Firefox](https://www.mozilla.org/fr/firefox/new/) and [Chrome](https://chrome.google.com) are my main browsers. I use Firefox as my development browser beacause i prefer the DevTools, I use Chrome to check the compatibility of my code since Chrome is the most used browser. Also, Chrome have earlier functionnality release and seems to work better to render while animating canvas.
32 |
33 | ### Browser Extensions
34 | [Wappalyzer](https://www.wappalyzer.com/) allow you to know what technologies (frameworks, libraries, analytics...) are present on the website your are consulting
--------------------------------------------------------------------------------
/raw/how-to/front-end/bind-your-front-end-app-to-your-backend-api-in-development.md:
--------------------------------------------------------------------------------
1 | # Bind your front-end app to your backend api in development
2 |
3 | In web devlopment, a way to allow the user to interact with your service is to provide him a client, an html/css/js page, this client represente the User Interface with your backend server. On certain actions of the user on the user interface (click, keypress, ...) the client will send a request to the backend service representing the user action.
4 |
5 | Most of the time, we want our client to be served on the same server as our backend, for example: the root of our site provide the client and some routes of our site are used to listen to the user actions (sometimes prefixed by /api/).
6 |
7 | For example:
8 |
9 | ```
10 | /users
11 | /posts
12 | /api/messages
13 | ```
14 |
15 | In your code, while developing, you want your javascript to request the same origin that provide your client, most of the time you want it not to be hardcoded:
16 |
17 | ```js
18 | // Bad
19 | fetch('https://mysite.com/users');
20 |
21 | // Good
22 | fetch('/users');
23 | ```
24 |
25 | While developing, most of the time you will use a dev server which provides hot reload, this approach provoke a problem: since this is a server, your javascript will request your backend server on your dev server:
26 |
27 | If your backend runs on port 3000 and your front-end dev server runs on 4200, using the good js approach above, your request will looks like this: http://127.0.0.1:4200/users.
28 |
29 | Since this is not what we want, front-end frameworks provides a way to redirect the request of your front-end app to the adress of your backend server, and this in dev mode only. This is called a proxy.
30 |
31 | If you are using React with create-react-app:
32 |
33 | Install http-proxy-middleware:
34 | ```
35 | npm i http-proxy-middleware
36 | ```
37 |
38 | Create a setupProxy.js in src/:
39 |
40 | ```js
41 | const { createProxyMiddleware } = require('http-proxy-middleware');
42 |
43 | module.exports = function (app) {
44 | app.use(
45 | '/api',
46 | createProxyMiddleware({
47 | target: 'http://localhost:3000',
48 | }),
49 | );
50 | };
51 |
52 | ```
53 |
54 | If you are using Nx, put a proxy.config.json at the root of your app:
55 |
56 | ```json
57 | {
58 | // /api requests will be mapped on http://localhost:3000/api
59 | "/api": {
60 | "target": "http://localhost:3000",
61 | "changeOrigin": true
62 | },
63 | // If you are using socket.io
64 | "/socket.io": {
65 | "target": "ws://localhost:3000",
66 | "ws": true
67 | }
68 | }
69 | ```
70 |
71 | *note:* If you are using socket.io with namespaces, you don't need to register your namespaces in the proxy.conf.json, socket.io process it himself.
--------------------------------------------------------------------------------
/tools/raw-to-content/.gitignore:
--------------------------------------------------------------------------------
1 | # Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
2 |
3 | # Logs
4 |
5 | logs
6 | _.log
7 | npm-debug.log_
8 | yarn-debug.log*
9 | yarn-error.log*
10 | lerna-debug.log*
11 | .pnpm-debug.log*
12 |
13 | # Diagnostic reports (https://nodejs.org/api/report.html)
14 |
15 | report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
16 |
17 | # Runtime data
18 |
19 | pids
20 | _.pid
21 | _.seed
22 | \*.pid.lock
23 |
24 | # Directory for instrumented libs generated by jscoverage/JSCover
25 |
26 | lib-cov
27 |
28 | # Coverage directory used by tools like istanbul
29 |
30 | coverage
31 | \*.lcov
32 |
33 | # nyc test coverage
34 |
35 | .nyc_output
36 |
37 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
38 |
39 | .grunt
40 |
41 | # Bower dependency directory (https://bower.io/)
42 |
43 | bower_components
44 |
45 | # node-waf configuration
46 |
47 | .lock-wscript
48 |
49 | # Compiled binary addons (https://nodejs.org/api/addons.html)
50 |
51 | build/Release
52 |
53 | # Dependency directories
54 |
55 | node_modules/
56 | jspm_packages/
57 |
58 | # Snowpack dependency directory (https://snowpack.dev/)
59 |
60 | web_modules/
61 |
62 | # TypeScript cache
63 |
64 | \*.tsbuildinfo
65 |
66 | # Optional npm cache directory
67 |
68 | .npm
69 |
70 | # Optional eslint cache
71 |
72 | .eslintcache
73 |
74 | # Optional stylelint cache
75 |
76 | .stylelintcache
77 |
78 | # Microbundle cache
79 |
80 | .rpt2_cache/
81 | .rts2_cache_cjs/
82 | .rts2_cache_es/
83 | .rts2_cache_umd/
84 |
85 | # Optional REPL history
86 |
87 | .node_repl_history
88 |
89 | # Output of 'npm pack'
90 |
91 | \*.tgz
92 |
93 | # Yarn Integrity file
94 |
95 | .yarn-integrity
96 |
97 | # dotenv environment variable files
98 |
99 | .env
100 | .env.development.local
101 | .env.test.local
102 | .env.production.local
103 | .env.local
104 |
105 | # parcel-bundler cache (https://parceljs.org/)
106 |
107 | .cache
108 | .parcel-cache
109 |
110 | # Next.js build output
111 |
112 | .next
113 | out
114 |
115 | # Nuxt.js build / generate output
116 |
117 | .nuxt
118 | dist
119 |
120 | # Gatsby files
121 |
122 | .cache/
123 |
124 | # Comment in the public line in if your project uses Gatsby and not Next.js
125 |
126 | # https://nextjs.org/blog/next-9-1#public-directory-support
127 |
128 | # public
129 |
130 | # vuepress build output
131 |
132 | .vuepress/dist
133 |
134 | # vuepress v2.x temp and cache directory
135 |
136 | .temp
137 | .cache
138 |
139 | # Docusaurus cache and generated files
140 |
141 | .docusaurus
142 |
143 | # Serverless directories
144 |
145 | .serverless/
146 |
147 | # FuseBox cache
148 |
149 | .fusebox/
150 |
151 | # DynamoDB Local files
152 |
153 | .dynamodb/
154 |
155 | # TernJS port file
156 |
157 | .tern-port
158 |
159 | # Stores VSCode versions used for testing VSCode extensions
160 |
161 | .vscode-test
162 |
163 | # yarn v2
164 |
165 | .yarn/cache
166 | .yarn/unplugged
167 | .yarn/build-state.yml
168 | .yarn/install-state.gz
169 | .pnp.\*
170 |
--------------------------------------------------------------------------------
/raw/how-to/devops/aws/setup-an-aws-ec2-instance-to-run-a-node-app.md:
--------------------------------------------------------------------------------
1 | # Setup an AWS ec2 instance to run a node app
2 |
3 | A way to run an app on the cloud is to have a virtual computer (also called VM or Virtual Machine) running on the cloud, which expose your app on a public ip.
4 |
5 | The first step to achieve this is create an AWS EC2 instance:
6 |
7 | EC2 > Instances > Launch instances
8 |
9 | You can name your vm and add tag to it.
10 |
11 | In Application and OS Images (Amazon Machine Image) and Instance type default settings provides a free t2.micro instance.
12 |
13 | The next thing to do is to create key pair to be able to connect to your machine through SSH. Be sure to save the .pem file, you can't re-create it.
14 |
15 | In the Network settings tab, check "Allow HTTP traffic from the internet" box to be able to access your app.
16 |
17 | Once the instance has been lanched, in the "Network & Security" tab in the side menu go to "Elastic IPs" > Allocate Elastic IP adress and click "Allocate" next, go back to "Elastic IPs", click the new IP and click "Associate Elastic IP adress". Select your instance and click "Associate"
18 |
19 | At this point, you have a running EC2 instance with a public IP adress to access it.
20 |
21 | Next, you will connect your to your instance through SSH.
22 |
23 | To do this, i will use a VSCode extension called "Remote Explorer". Once installed in your SSH config file (Linux: /home/\/.ssh/config, Windows: C:\Users\\\\\.ssh) add the following line with the correct informations
24 |
25 | ```
26 | Host ANameForThisConnection
27 | HostName ec2-XXX-XXX-XXX-XXX.us-east-2.compute.amazonaws.com // the Public IPv4 DNS of your EC2 instance
28 | User ec2-user // the user for the EC2 instance (ec2-user by default)
29 | IdentityFile /home/\/.ssh/pems/wtth.pem // the absolute path to the .pem file, containing the private key
30 | ```
31 |
32 | If everything is correctly set up, you should be able to connect through SSH to your EC2 instance.
33 |
34 | The first thing we will do is to install node by using nvm:
35 |
36 | ```bash
37 | curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
38 | . ~/.nvm/nvm.sh
39 | nvm install --lts
40 | nvm install 16
41 | node -e "console.log('Running Node.js ' + process.version)"
42 | ```
43 |
44 | Next we install nginx as a reverse-proxy to redirects the requests on the port of our local running app:
45 |
46 | ```bash
47 | sudo yum install epel-release
48 | sudo yum install nginx
49 | ```
50 |
51 | You can edit the nginx config file with:
52 |
53 | ```bash
54 | sudo vim /etc/nginx/nginx.conf
55 | ```
56 |
57 | Don't forget to start nginx:
58 |
59 | ```bash
60 | sudo systemctl start nginx // starts nginx
61 | sudo systemctl enable nginx // starts nginx on vm boot
62 | ```
63 |
64 | The last thing we need now is to install pm2 wich allow us to run a node process in the background, otherwise, our app will shut down after we close the ssh connection.
65 |
66 | ```bash
67 | npm i -g pm2
68 | ```
69 |
70 | Your are now ready to start your app, you might need to install git if you want to clone a github repo, you can also create it directly through the SSH.
71 |
72 | When your node app is ready to be deployed, the last step is to start it with pm2, in your project:
73 |
74 | ```bash
75 | pm2 start index.js
76 | pm2 start "npm run start" --name my-app // if you want to start your app with npm scripts
77 | ```
78 |
79 | Some utility pm2 commands
80 | ```bash
81 | pm2 status // dislays the status of the running process
82 | pm2 restart my-app // restarts the app named 'my-app', you can also use the id of the process
83 | pm2 logs 0 // displays the real time logs of the process of id 0
84 | pm2 logs 0 --lines 1000 // displays the 1000 last lines of logs of id 0 process
85 | ```
86 |
87 | note: will developping a project like this, developping through ssh and restarting many times my app causes my vm to quickly burn ec2 credits wich leads to the ssh connections to be extremely slow.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # My Web Development Journey
2 |
3 | This repository keeps track of my discoveries on my Javascript learning journey. It deliberately uses descriptive naming instead of technical jargon to help beginners with limited technical knowledge to easily understand the functionalities and actions they are trying to perform.
4 |
5 | I'm primarily a JavaScript/Node.js web developer and not the best, so in this repository, you will probably find a lot of content about web development, DevOps, and how the internet works. Again, this may not be 100% accurate since it is just my understanding of these topics.
6 |
7 | My motivation to create this repository is to have a single place to store the solutions to problems I've encountered and easily find them. If these solutions could help others, I'm happy to share them.
8 |
9 | Another motivation for creating this repository is to keep track of my areas of limited understanding, which will encourage me to explore certain subjects more deeply while providing explanations on more basic topics.
10 |
11 | Please note that this repository is NOT intended to be a proof of good practices and does NOT claim to be the best way to do things.
12 | ====
13 |
14 | ## Table of Contents
15 |
16 | - [Learn web development](#learn-web-development)
17 | - [Ask for help](#ask-for-help)
18 | - [Some websites to find help](#some-websites-to-find-help)
19 | - [My courses](./courses/index.md)
20 | - [Express](./courses/express/index.md)
21 |
22 | ## Learn Web Development
23 |
24 | In this section, will not describe how I started to learn web development but rather how many developpers advise to learn it.
25 |
26 | First of all, tutorials a good way to learn the basic of html/css/javascript, but be aware to not fall in what is called the [tutorial hell](https://trujillo9616.medium.com/what-is-tutorial-hell-d24c1bdb279f). The tutorial hell is when you follow many tutorials wich gives you the feeling to understand a lot but when it comes to make you own project you have no idea where to start.
27 |
28 | This is why it is a better to learn the language in order to be able to understand every line of a tutorial.
29 |
30 | [roadmap.sh](https://roadmap.sh/) provides multiple step by step roadmaps to learn differents technologies.
31 |
32 | You can find more ressources in the [learning section](./raw/ressources-for/learning.md) of the [ressources for](./raw/ressources-for/index.md) topic
33 |
34 | ### Ask for help
35 |
36 | Learning comes with a lot of interrogations and issues. Asking for help is absolutely normal and most of the developpers will be happy to help you if they have time for and if the problem/question is well formulated here are some ressources on how to and how to not ask for help:
37 |
38 | - [Don't ask to ask just ask](https://dontasktoask.com/)
39 | - [Learn JavaScript Before Asking](https://stifskere.github.io/LearnJsBeforeAsking/)
40 | - [Ask about your attempted solution rather than your actual problem](https://xyproblem.info/)
41 | - [No hello](https://nohello.net/fr/)
42 | - [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask)
43 | - [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)
44 | - [How To Ask Questions The Smart Way](http://catb.org/~esr/faqs/smart-questions.html)
45 |
46 | ### Some websites to find help
47 |
48 | - [Stack overflow](https://stackoverflow.com): The most known of all
49 | - [GitHub](https://github.com):
50 |
51 |
To do
52 |
53 | - write an answer template (in my case, tl;dr, explanation, ...)
54 | - Create normalization (For example/e.g.)
55 | - create glossary
56 | - Write the topic:
57 | - topic + idea
58 | - why are my react components rendered twice ?
59 | - nx
60 | - ts
61 | - ws vs webrtc vs server sent event
62 | - create-react-app alternatives
63 | - switch between es5/6 import
64 | - run app in bg with pm2 + run as root with nvm by using links
65 | - [Docker](#docker)
66 | - Connect the cli to Docker Hub in linux
67 | - docker compose run only one container
68 | - mettre en place un volume pour stoquer des fichiers
69 | - run docker with hot reload & web-prod
70 | - [Internet](#)
71 | - Bind domain names or subdomain to an ip address
72 | - [React]
73 | - layout + routing
74 | - useRef on list elements
75 | - End the topic:
76 | - topic + idea
77 | - Proxy front for nx & angular + ws
78 | - Fix/Update the topic:
79 | - topic + explanation
80 | - Fix relative links
81 | - Refactor the title hierarchy
82 | - Write how XXX works (as h2 in hierachy ?)
83 | - write how to XXX
84 | - Error and meanings
85 | - ressources for (front, back, devops)
86 | - check refactor (of monitoring-learning_front-end)
87 |
88 | https://stackoverflow.com/questions/44785585/how-can-i-delete-all-local-docker-images
89 |
90 |
--------------------------------------------------------------------------------
/README_.md:
--------------------------------------------------------------------------------
1 | # My Web Development Journey
2 |
3 | This repository keeps track of my discoveries on my Javascript learning journey. It deliberately uses descriptive naming instead of technical jargon to help beginners with limited technical knowledge to easily understand the functionalities and actions they are trying to perform.
4 |
5 | I'm primarily a JavaScript/Node.js web developer and not the best, so in this repository, you will probably find a lot of content about web development, DevOps, and how the internet works. Again, this may not be 100% accurate since it is just my understanding of these topics.
6 |
7 | My motivation to create this repository is to have a single place to store the solutions to problems I've encountered and easily find them. If these solutions could help others, I'm happy to share them.
8 |
9 | Another motivation for creating this repository is to keep track of my areas of limited understanding, which will encourage me to explore certain subjects more deeply while providing explanations on more basic topics.
10 |
11 | Please note that this repository is NOT intended to be a proof of good practices and does NOT claim to be the best way to do things.
12 | ====
13 |
14 | ## Table of Contents
15 |
16 | - [Introduction](#my-web-development-journey)
17 | - [Table of Contents](#table-of-contents)
18 | - [How it works ?](#how-it-works)
19 | - [How to ?](#how-to)
20 | - [Front-end web development](#front-end-web-development)
21 | - [Bind your front-end app to your backend api in development](#bind-your-front-end-app-to-your-backend-api-in-development)
22 | - [Backend web devlopment](#backend-web-development)
23 | - [Nest - setup static file module but keep controller to root with global prefix](#nest---setup-static-file-module-but-keep-controller-to-root-with-global-prefix)
24 | - [Setup an aws ec2 instance to run a node app](#aws---setup-an-aws-ec2-instance-to-run-a-node-app)
25 | - [Install docker on AWS](#aws---install-docker-on-aws)
26 | - [Running Multiple Web apps on Aws](#aws---running-multiple-web-apps-on-aws)
27 | - [Docker](#docker)
28 | - Connect the cli to Docker Hub in linux
29 | - [Internet](#)
30 | - Bind domain names or subdomain to an ip address
31 | - [Unset](#unset)
32 | - [Glossary](#glossary)
33 | - [To do](#to-do)
34 |
35 |
How it works ?
36 |
37 |
How to ?
38 |
39 | ---
40 |
41 | ### Front-end web development
42 |
43 | #### Bind your front-end app to your backend api in development
44 |
45 | In web devlopment, a way to allow the user to interact with your service is to provide him a client, an html/css/js page, this client represente the User Interface with your backend server. On certain actions of the user on the user interface (click, keypress, ...) the client will send a request to the backend service representing the user action.
46 |
47 | Most of the time, we want our client to be served on the same server as our backend, for example: the root of our site provide the client and some routes of our site are used to listen to the user actions (sometimes prefixed by /api/).
48 |
49 | For example:
50 |
51 | ```
52 | /users
53 | /posts
54 | /api/messages
55 | ```
56 |
57 | In your code, while developing, you want your javascript to request the same origin that provide your client, most of the time you want it not to be hardcoded:
58 |
59 | ```js
60 | // Bad
61 | fetch('https://mysite.com/users');
62 |
63 | // Good
64 | fetch('/users');
65 | ```
66 |
67 | While developing, most of the time you will use a dev server which provides hot reload, this approach provoke a problem: since this is a server, your javascript will request your backend server on your dev server:
68 |
69 | If your backend runs on port 3000 and your front-end dev server runs on 4200, using the good js approach above, your request will looks like this: http://127.0.0.1:4200/users.
70 |
71 | Since this is not what we want, front-end frameworks provides a way to redirect the request of your front-end app to the adress of your backend server, and this in dev mode only. This is called a proxy.
72 |
73 | If you are using React with create-react-app:
74 |
75 | Install http-proxy-middleware:
76 | ```
77 | npm i http-proxy-middleware
78 | ```
79 |
80 | Create a setupProxy.js in src/:
81 |
82 | ```js
83 | const { createProxyMiddleware } = require('http-proxy-middleware');
84 |
85 | module.exports = function (app) {
86 | app.use(
87 | '/api',
88 | createProxyMiddleware({
89 | target: 'http://localhost:3000',
90 | }),
91 | );
92 | };
93 |
94 | ```
95 |
96 | If you are using Nx, put a proxy.config.json at the root of your app:
97 |
98 | ```json
99 | {
100 | // /api requests will be mapped on http://localhost:3000/api
101 | "/api": {
102 | "target": "http://localhost:3000",
103 | "changeOrigin": true
104 | },
105 | // If you are using socket.io
106 | "/socket.io": {
107 | "target": "ws://localhost:3000",
108 | "ws": true
109 | }
110 | }
111 | ```
112 |
113 | *note:* If you are using socket.io with namespaces, you don't need to register your namespaces in the proxy.conf.json, socket.io process it himself.
114 |
115 | ---
116 |
117 | ### Backend web development
118 |
119 | #### Nest - setup static file module but keep controller to root with global prefix
120 |
121 |
122 |
123 | In my case
124 |
125 | I was working on a project who aims to easily look at the result of frontend project repos by giving a way to visualize them without having to clone them in the first place.
126 | I wanted to use the nest ServeStaticModule to serve the preview of the projects visualizer but keep a way to bind a controller to the root url (/) to render a view of all already cloned projects. In the other hand, i wanted to prefix all other routes with the api prefix.
127 |
128 | ```
129 | / => All projects, a list dynamically rendered
130 | /repos/:repo-owner/:project-name/index.html => No controller bind here, managed by the ServeStaticModule
131 | /api/... => any other controller
132 | ```
133 |
134 |
135 |
136 | In **main.ts**
137 |
138 | ```ts
139 | app.setGlobalPrefix('api', {
140 | exclude: ['', 'api']
141 | });
142 | ```
143 |
144 | In **app.controller.ts**
145 |
146 | ```ts
147 | @Controller()
148 | export class AppController {
149 |
150 | // Accessible on /
151 | @Get()
152 | root() {
153 | /*...*/
154 | }
155 |
156 | // /!\ Accessible on /api/da /!\
157 | @Get('da')
158 | da() {
159 | /*...*/
160 | }
161 | }
162 | ```
163 |
164 | In **api.controller.ts**
165 |
166 | ```ts
167 | @Controller('api')
168 | export class ApiController {
169 | // Accessible on /api/
170 | @Get()
171 | getHello(){
172 | /*...*/
173 | }
174 |
175 | // /!\ Accessible on /api/api/info /!\
176 | @Get('info')
177 | getInfo(){
178 | /*...*/
179 | }
180 | }
181 | ```
182 |
183 | Any other route will be prefix by 'api'.
184 |
185 | Keep in mind that this approache might cause unexpected behaviors
186 |
187 | ---
188 |
189 | #### AWS - Setup an AWS ec2 instance to run a node app
190 |
191 | A way to run an app on the cloud is to have a virtual computer (also called VM or Virtual Machine) running on the cloud, which expose your app on a public ip.
192 |
193 | The first step to achieve this is create an AWS EC2 instance:
194 |
195 | EC2 > Instances > Launch instances
196 |
197 | You can name your vm and add tag to it.
198 |
199 | In Application and OS Images (Amazon Machine Image) and Instance type default settings provides a free t2.micro instance.
200 |
201 | The next thing to do is to create key pair to be able to connect to your machine through SSH. Be sure to save the .pem file, you can't re-create it.
202 |
203 | In the Network settings tab, check "Allow HTTP traffic from the internet" box to be able to access your app.
204 |
205 | Once the instance has been lanched, in the "Network & Security" tab in the side menu go to "Elastic IPs" > Allocate Elastic IP adress and click "Allocate" next, go back to "Elastic IPs", click the new IP and click "Associate Elastic IP adress". Select your instance and click "Associate"
206 |
207 | At this point, you have a running EC2 instance with a public IP adress to access it.
208 |
209 | Next, you will connect your to your instance through SSH.
210 |
211 | To do this, i will use a VSCode extension called "Remote Explorer". Once installed in your SSH config file (Linux: /home/\/.ssh/config, Windows: C:\Users\\\\\.ssh) add the following line with the correct informations
212 |
213 | ```
214 | Host ANameForThisConnection
215 | HostName ec2-XXX-XXX-XXX-XXX.us-east-2.compute.amazonaws.com // the Public IPv4 DNS of your EC2 instance
216 | User ec2-user // the user for the EC2 instance (ec2-user by default)
217 | IdentityFile /home/\/.ssh/pems/wtth.pem // the absolute path to the .pem file, containing the private key
218 | ```
219 |
220 | If everything is correctly set up, you should be able to connect through SSH to your EC2 instance.
221 |
222 | The first thing we will do is to install node by using nvm:
223 |
224 | ```bash
225 | curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
226 | . ~/.nvm/nvm.sh
227 | nvm install --lts
228 | nvm install 16
229 | node -e "console.log('Running Node.js ' + process.version)"
230 | ```
231 |
232 | Next we install nginx as a reverse-proxy to redirects the requests on the port of our local running app:
233 |
234 | ```bash
235 | sudo yum install epel-release
236 | sudo yum install nginx
237 | ```
238 |
239 | You can edit the nginx config file with:
240 |
241 | ```bash
242 | sudo vim /etc/nginx/nginx.conf
243 | ```
244 |
245 | Don't forget to start nginx:
246 |
247 | ```bash
248 | sudo systemctl start nginx // starts nginx
249 | sudo systemctl enable nginx // starts nginx on vm boot
250 | ```
251 |
252 | The last thing we need now is to install pm2 wich allow us to run a node process in the background, otherwise, our app will shut down after we close the ssh connection.
253 |
254 | ```bash
255 | npm i -g pm2
256 | ```
257 |
258 | Your are now ready to start your app, you might need to install git if you want to clone a github repo, you can also create it directly through the SSH.
259 |
260 | When your node app is ready to be deployed, the last step is to start it with pm2, in your project:
261 |
262 | ```bash
263 | pm2 start index.js
264 | pm2 start "npm run start" --name my-app // if you want to start your app with npm scripts
265 | ```
266 |
267 | Some utility pm2 commands
268 | ```bash
269 | pm2 status // dislays the status of the running process
270 | pm2 restart my-app // restarts the app named 'my-app', you can also use the id of the process
271 | pm2 logs 0 // displays the real time logs of the process of id 0
272 | pm2 logs 0 --lines 1000 // displays the 1000 last lines of logs of id 0 process
273 | ```
274 |
275 | note: will developping a project like this, developping through ssh and restarting many times my app causes my vm to quickly burn ec2 credits wich leads to the ssh connections to be extremely slow.
276 |
277 | ---
278 |
279 | #### AWS - Install docker on AWS
280 |
281 | Install and start Docker on boot
282 |
283 | ```sh
284 | sudo amazon-linux-extras install docker (flem de test mais je trust)
285 | sudo systemctl enable docker
286 | sudo systemctl start docker
287 | ```
288 |
289 | To be able to use Docker without sudo:
290 |
291 | ```sh
292 | sudo usermod -a -G docker ec2-user
293 | ```
294 |
295 | To apply permission, you need to reboot your aws instance
296 |
297 | Install docker-compose
298 |
299 | ```sh
300 | sudo curl -L https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m) -o /usr/local/bin/docker-compose
301 | ```
302 |
303 | Fix permissions, you don't need to restart your instance here.
304 |
305 | ```sh
306 | sudo chmod +x /usr/local/bin/docker-compose
307 | ```
308 |
309 | To verify your installation:
310 |
311 | ```sh
312 | docker-compose version
313 | ```
314 |
315 | CREDIT: https://gist.github.com/npearce/6f3c7826c7499587f00957fee62f8ee9
316 |
317 | #### AWS - Running Multiple Web apps on AWS
318 |
319 | Sometimes when you are building small apps, you might want to run multiple applications on the same ip address but [bind differents subdomains or domain names](#) to each app, what you are looking for here is to setup a [reverse-proxy](https://www.cloudflare.com/en-gb/learning/cdn/glossary/reverse-proxy/), to achieve this, you can use [Nginx](https://www.nginx.com/).
320 |
321 | After installing it, edit the nginx.conf (on Ubuntu: /etc/nginx/nginx.conf)
322 |
323 | ```nginx
324 | http {
325 |
326 | server {
327 | listen 80;
328 | server_name subdomain.domain-name.com;
329 |
330 | location / {
331 | proxy_pass http://127.0.0.1:3000;
332 | }
333 | }
334 |
335 | server {
336 | listen 80;
337 | server_name other-subdomain.domain-name.com;
338 |
339 | location / {
340 | proxy_pass http://127.0.0.1:4000
341 | }
342 | }
343 | }
344 | ```
345 |
346 | Don't forget to restart Nginx, so that Nginx takes into account the new parameters
347 | ```
348 | sudo systemctl restart nginx.service
349 | ```
350 |
351 | After this, subdomain.domain-name.com will serve the app running on the port 3000 and the other-subdomain.domain-name.com will serve the app running on the port 4000.
352 |
353 | This works because Nginx take a look at the 'host' property of the incoming request and direct it to the appropriate service.
354 |
355 | ---
356 |
357 | ### Unset
358 |
359 | #### Use full power of markdown
360 |
361 | Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber created Markdown in 2004 as a markup language that is easier to read in its source code form. Markdown is widely used for blogging and instant messaging, and also used elsewhere in online forums, collaborative software, documentation pages, and readme files.
362 |
363 | Even if all many system uses Mardown, the rendered output might differ a little bit, a good way to visualize this is to compare how github and vscode renders the same Markdown input.
364 |
365 | Here, i will only describe Markdown that works on github.
366 |
367 | First of all, it is important to specify that several html tags produce the same output:
368 |
369 | ```Markdown
370 | # This is a h1
371 |
This is also a h1
372 | ```
373 |
374 | Here is a non exhaustive list of those correspondance
375 |
376 | ```Markdown
377 | ##
378 |
379 |
380 | ###
381 |
382 |
383 | | Syntax | Description |
384 | | ----------- | ----------- |
385 | | Header | Title |
386 | | Paragraph | Text |
387 |
388 |
389 |
390 |
Syntax
391 |
Description
392 |
393 |
394 |
395 |
396 |
Header
397 |
Title
398 |
399 |
400 |
Paragraph
401 |
Text
402 |
403 |
404 |
405 | ```
406 |
407 | Markdown wrote using html can contain attributes, for example:
408 |
409 | ```Markdown
410 | # This h1 is aligned on left
411 |
This h1 is centered
412 | ```
413 |
414 | Personally, i use html tags only for special cases that can only be achieved this way.
415 |
416 | ---
417 |
418 |
Glossary
419 |
420 | ### Example Section
421 |
422 | #### Example
423 |
424 | This is the definition of an example
425 |
426 | Official website: [example.com](#)
427 |
428 | ```ts
429 | // A comment in the code
430 | function foo(): string {
431 | return 'bar'
432 | }
433 | ```
434 |
435 | Instal it here: [instal-it-here.com](#)
436 |
437 | Getting started or tuto: [tuto-it-here.com](#)
438 |
439 | Other ressources:
440 | - [here](#)
441 |
442 | Some alternatives
443 | - [Alt 1](#)
444 | - [Alt 2](#)
445 | - [Alt 3](#)
446 |
447 | ---
448 |
449 | ### Global
450 |
451 | #### Markup Language
452 |
453 | #### Programming Language
454 |
455 | #### Framework
456 |
457 | #### Paradigm
458 |
459 | #### Cache
460 |
461 | #### SOLID
462 |
463 | ---
464 |
465 | ### Internet
466 |
467 | #### Content Delivery Network (CDN)
468 |
469 | #### SSH
470 |
471 | ---
472 |
473 | ### Front-end development
474 |
475 | #### HTML
476 |
477 | #### PUG
478 |
479 | #### CSS
480 |
481 | #### SASS
482 |
483 | #### SCSS
484 |
485 | #### LESS
486 |
487 | #### Javascript
488 |
489 | #### JQuery
490 |
491 | #### Components
492 |
493 | #### React
494 |
495 | **React** is a Javascript library developed by Facebook in 2013. It is the most influential ui library of modern front-end development. Even if it is still a library, its environment has grown enough to be now considered as a front-end [framework](#framework).
496 |
497 | Official website: [react.dev](https://react.dev/)
498 |
499 | React [getting-started](https://react.dev/learn)
500 |
501 | Other ressources:
502 | - [Fireship - React in 100 Seconds](https://www.youtube.com/watch?v=Tn6-PIqc4UM)
503 |
504 | #### Angular
505 |
506 | #### Vue
507 |
508 | #### Svelte
509 |
510 | #### Solide
511 |
512 | #### WebAssembly
513 |
514 | ### Backend development
515 |
516 | #### Apache HTTP Server
517 |
518 | **Apache HTTP Server** is an HTTP server created by the Apache fundation
519 |
520 | Official website: [httpd.apache.org](https://httpd.apache.org/)
521 |
522 | Alternatives:
523 | - [NGINX](#nginx)
524 |
525 | #### NGINX
526 |
527 | #### Proxy
528 |
529 | ---
530 |
531 | ### Database environment
532 |
533 | #### Database
534 |
535 | #### ACID
536 |
537 | #### Object Relation Mapping (ORM)
538 |
539 | #### Graphql
540 |
541 | #### SQL
542 |
543 | #### POSTGRES
544 |
545 | #### MySQL
546 |
547 | #### MariaDB
548 |
549 | #### Cassandra
550 |
551 | #### Redis
552 |
553 | ---
554 |
555 | ### The Programming Languages
556 |
557 | #### C
558 |
559 | #### C++
560 |
561 | #### C#
562 |
563 | #### Php
564 |
565 | #### Java
566 |
567 | #### Javascript
568 |
569 | ---
570 |
571 | ### Other
572 |
573 | #### Hot Reload
574 |
575 |
--------------------------------------------------------------------------------