├── .github ├── dependabot.yml └── workflows │ └── github-pages.yml ├── .gitignore ├── .hintrc ├── .nojekyll ├── .prettierrc.json ├── LICENSE ├── README.md ├── assets ├── js │ ├── index.js │ └── toc.ts └── scss │ └── lecture.scss ├── config.toml ├── content ├── _index.html └── lectures │ ├── Redux │ ├── Slides.pdf │ ├── Slides.pptx │ └── index.html │ ├── WebAssembly │ ├── index.html │ ├── slides.pdf │ ├── snake-game │ │ └── snake │ │ │ ├── index │ │ │ ├── asteroids │ │ │ │ ├── asteroids.c │ │ │ │ ├── asteroids.h │ │ │ │ ├── main.c │ │ │ │ ├── player.c │ │ │ │ ├── player.h │ │ │ │ ├── renderer.c │ │ │ │ ├── renderer.h │ │ │ │ ├── vector.c │ │ │ │ └── vector.h │ │ │ └── index.html │ │ │ └── src │ │ │ ├── apple.c │ │ │ ├── apple.h │ │ │ ├── main.c │ │ │ ├── main.h │ │ │ ├── project.wasm │ │ │ ├── snake │ │ │ ├── snake.c │ │ │ └── snake.h │ └── wat2wasm │ │ ├── addTwoNum.wasm │ │ ├── addTwoNum.wat │ │ ├── hello-WebAssembly.js │ │ ├── index.html │ │ └── style.css │ ├── cors │ ├── img │ │ ├── cors-error.png │ │ ├── cors-frontend.png │ │ ├── cors_principle.png │ │ └── simple-req.png │ └── index.html │ ├── k8s │ ├── lecture1 │ │ └── CloudNativeGolang.pdf │ ├── lecture2 │ │ └── Containers.pdf │ ├── lecture3 │ │ ├── ContainersFromScratch.pdf │ │ ├── create_container.sh │ │ └── play_with_netns.sh │ └── lecture4-5 │ │ └── dockerInPractice.pdf │ ├── lecture-1 │ ├── img │ │ ├── 1995parham-logo.png │ │ ├── 206.png │ │ ├── airplane.png │ │ ├── benz.png │ │ ├── bernard.gif │ │ ├── megan.png │ │ ├── peykan.png │ │ └── pride.png │ └── index.html │ ├── lecture-10 │ ├── img │ │ ├── docker-growth.png │ │ ├── image-layers.png │ │ ├── overview-container.png │ │ ├── overview-vm-1.png │ │ ├── overview-vm-2.png │ │ └── xaas.png │ └── index.html │ ├── lecture-2 │ ├── diag │ │ └── reverse-proxy.drawio │ ├── img │ │ ├── 3xx.png │ │ ├── base64.png │ │ ├── basic-auth-in-action.png │ │ ├── cookies.png │ │ ├── csrf-attack.png │ │ ├── http-cache-types.png │ │ ├── http-transactions.png │ │ ├── http2-transactions.png │ │ ├── message-structure.jpg │ │ ├── moodle-cookies.png │ │ ├── moodle-post.png │ │ ├── moodle-request.png │ │ ├── proxy.png │ │ ├── reverse-proxy.png │ │ ├── ssl.jpg │ │ ├── staleness.png │ │ └── sub-domain-cookies.png │ └── index.html │ ├── lecture-3 │ ├── img │ │ ├── example.png │ │ ├── html-tag.png │ │ ├── nested.png │ │ ├── semantic-tags.png │ │ └── summary.png │ └── index.html │ ├── lecture-4 │ ├── diag │ │ └── cascading.drawio │ ├── img │ │ ├── 15-css-layout.png │ │ ├── align-self.svg │ │ ├── attribute-selector.png │ │ ├── background-image.png │ │ ├── box-model.png │ │ ├── cascading-example-1.png │ │ ├── cascading-example-2.png │ │ ├── cascading.png │ │ ├── child-selector.png │ │ ├── class-element-selector.png │ │ ├── class-selector.png │ │ ├── css-structure.gif │ │ ├── descendant-selector.png │ │ ├── div-span.png │ │ ├── element-selector.png │ │ ├── flex-align-items.svg │ │ ├── flex-align-items.webp │ │ ├── flex-axises.png │ │ ├── flex-container-and-items.png │ │ ├── flex-justify-content-2.png │ │ ├── flex-justify-content.png │ │ ├── flex-vs-grid.png │ │ ├── flex-wrap.svg │ │ ├── id-selector.png │ │ ├── important-example.png │ │ ├── linux.jpg │ │ ├── media-css-1.png │ │ ├── media-css-2.png │ │ ├── media-css-3.png │ │ ├── multiple-class-selector.png │ │ ├── overriding-example.png │ │ ├── peseudo.png │ │ ├── responsive-design-approaches.png │ │ ├── responsive-design.jpg │ │ ├── sibling-selector.png │ │ ├── specifishity.png │ │ └── vertical-margin-collapse.png │ └── index.html │ ├── lecture-42 │ └── index.html │ ├── lecture-5 │ ├── img │ │ ├── dom-structure.svg │ │ ├── eventflow.png │ │ ├── promises.png │ │ └── prototype.png │ └── index.html │ ├── lecture-6 │ ├── diag │ │ └── reference-based-validation.drawio │ ├── img │ │ ├── reference-based-validation.png │ │ ├── thrift-efficiency.png │ │ └── thrift.png │ └── index.html │ ├── lecture-7 │ ├── img │ │ ├── advantages.png │ │ ├── dep.png │ │ ├── dyn-static.gif │ │ ├── echo.png │ │ ├── go-vs-java.jpg │ │ ├── gophers.png │ │ ├── history.png │ │ ├── nerdy.png │ │ ├── real-gopher.jpg │ │ ├── say-hello.png │ │ ├── slice.png │ │ └── starwars.png │ └── index.html │ ├── lecture-8 │ ├── diag │ │ ├── sss.drawio │ │ └── typical-server.drawio │ ├── img │ │ ├── 53-big-decisions.png │ │ ├── cgi-test.png │ │ ├── sss.png │ │ └── typical-server.png │ └── index.html │ ├── lecture-9 │ ├── diag │ │ └── diag.drawio │ ├── img │ │ ├── asyn-messaging.png │ │ ├── csr.png │ │ ├── diag-rpc.drawio.png │ │ ├── diag-shared-resource-based-communication.drawio.png │ │ ├── micro.png │ │ ├── mongodb.webp │ │ ├── multi-layer.png │ │ ├── mvc-1.png │ │ ├── mvc-2.gif │ │ ├── mvc-3.png │ │ ├── mvc-4.png │ │ ├── mvvm.png │ │ └── ssr.png │ └── index.html │ ├── mongodb │ ├── index.html │ └── presentation.pptx │ ├── nats101 │ ├── diag │ │ └── nats101.xml │ ├── img │ │ ├── background.jpg │ │ ├── ha.png │ │ ├── overview.png │ │ ├── ping-pong.png │ │ ├── queues.png │ │ ├── rr.png │ │ └── sc.png │ └── index.html │ ├── react │ ├── img │ │ ├── declarative-imperative.png │ │ ├── jsx.png │ │ ├── not-really.jpg │ │ └── wait-what.jpg │ └── index.html │ └── vuejs │ ├── index.html │ └── presentation.pptx ├── data └── references.yml ├── justfile ├── layouts ├── home.html └── lectures │ └── single.html ├── package-lock.json ├── package.hugo.json ├── package.json └── static ├── css └── style.css └── img ├── bg.jpg ├── forkme_right_orange.png ├── go.jpg ├── hands-on.gif ├── javascript.jpg ├── mdn.jpg └── responsive-web-design.png /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "github-actions" # See documentation for possible values 9 | directory: "/" # Location of package manifests 10 | schedule: 11 | interval: "weekly" 12 | - package-ecosystem: "npm" # See documentation for possible values 13 | directory: "/" # Location of package manifests 14 | schedule: 15 | interval: "weekly" 16 | -------------------------------------------------------------------------------- /.github/workflows/github-pages.yml: -------------------------------------------------------------------------------- 1 | name: gh-pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | workflow_dispatch: 9 | 10 | permissions: 11 | contents: read 12 | pages: write 13 | id-token: write 14 | 15 | concurrency: 16 | group: "pages" 17 | cancel-in-progress: true 18 | 19 | defaults: 20 | run: 21 | shell: bash 22 | 23 | jobs: 24 | build: 25 | runs-on: ubuntu-latest 26 | env: 27 | HUGO_VERSION: 0.145.0 28 | steps: 29 | - name: install hugo cli 30 | run: | 31 | wget -O "${{ runner.temp }}/hugo.deb" "https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb" \ 32 | && sudo dpkg -i "${{ runner.temp }}/hugo.deb" 33 | - name: checkout 34 | uses: actions/checkout@v4 35 | with: 36 | submodules: recursive 37 | - name: setup nodejs 38 | uses: actions/setup-node@v4 39 | - run: npm install 40 | name: install npm requirements 41 | - name: setup pages 42 | id: pages 43 | uses: actions/configure-pages@v5 44 | - name: build with hugo 45 | env: 46 | # for maximum backward compatibility with hugo modules 47 | HUGO_ENVIRONMENT: production 48 | HUGO_ENV: production 49 | run: | 50 | hugo \ 51 | --minify \ 52 | --baseURL "${{ steps.pages.outputs.base_url }}/" 53 | - name: upload artifact 54 | uses: actions/upload-pages-artifact@v3 55 | with: 56 | path: ./public 57 | 58 | deploy: 59 | environment: 60 | name: github-pages 61 | url: ${{ steps.deployment.outputs.page_url }} 62 | runs-on: ubuntu-latest 63 | needs: build 64 | steps: 65 | - name: deploy to github pages 66 | id: deployment 67 | uses: actions/deploy-pages@v4 68 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by https://www.toptal.com/developers/gitignore/api/hugo 2 | # Edit at https://www.toptal.com/developers/gitignore?templates=hugo 3 | 4 | ### Hugo ### 5 | # Generated files by hugo 6 | /public/ 7 | /resources/_gen/ 8 | /assets/jsconfig.json 9 | hugo_stats.json 10 | 11 | # Executable may be added to repository 12 | hugo.exe 13 | hugo.darwin 14 | hugo.linux 15 | 16 | # Temporary lock file while building 17 | /.hugo_build.lock 18 | 19 | # End of https://www.toptal.com/developers/gitignore/api/hugo 20 | # Created by https://www.toptal.com/developers/gitignore/api/node 21 | # Edit at https://www.toptal.com/developers/gitignore?templates=node 22 | 23 | ### Node ### 24 | # Logs 25 | logs 26 | *.log 27 | npm-debug.log* 28 | yarn-debug.log* 29 | yarn-error.log* 30 | lerna-debug.log* 31 | .pnpm-debug.log* 32 | 33 | # Diagnostic reports (https://nodejs.org/api/report.html) 34 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 35 | 36 | # Runtime data 37 | pids 38 | *.pid 39 | *.seed 40 | *.pid.lock 41 | 42 | # Directory for instrumented libs generated by jscoverage/JSCover 43 | lib-cov 44 | 45 | # Coverage directory used by tools like istanbul 46 | coverage 47 | *.lcov 48 | 49 | # nyc test coverage 50 | .nyc_output 51 | 52 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 53 | .grunt 54 | 55 | # Bower dependency directory (https://bower.io/) 56 | bower_components 57 | 58 | # node-waf configuration 59 | .lock-wscript 60 | 61 | # Compiled binary addons (https://nodejs.org/api/addons.html) 62 | build/Release 63 | 64 | # Dependency directories 65 | node_modules/ 66 | jspm_packages/ 67 | 68 | # Snowpack dependency directory (https://snowpack.dev/) 69 | web_modules/ 70 | 71 | # TypeScript cache 72 | *.tsbuildinfo 73 | 74 | # Optional npm cache directory 75 | .npm 76 | 77 | # Optional eslint cache 78 | .eslintcache 79 | 80 | # Optional stylelint cache 81 | .stylelintcache 82 | 83 | # Microbundle cache 84 | .rpt2_cache/ 85 | .rts2_cache_cjs/ 86 | .rts2_cache_es/ 87 | .rts2_cache_umd/ 88 | 89 | # Optional REPL history 90 | .node_repl_history 91 | 92 | # Output of 'npm pack' 93 | *.tgz 94 | 95 | # Yarn Integrity file 96 | .yarn-integrity 97 | 98 | # dotenv environment variable files 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 | .cache 107 | .parcel-cache 108 | 109 | # Next.js build output 110 | .next 111 | out 112 | 113 | # Nuxt.js build / generate output 114 | .nuxt 115 | dist 116 | 117 | # Gatsby files 118 | .cache/ 119 | # Comment in the public line in if your project uses Gatsby and not Next.js 120 | # https://nextjs.org/blog/next-9-1#public-directory-support 121 | # public 122 | 123 | # vuepress build output 124 | .vuepress/dist 125 | 126 | # vuepress v2.x temp and cache directory 127 | .temp 128 | 129 | # Docusaurus cache and generated files 130 | .docusaurus 131 | 132 | # Serverless directories 133 | .serverless/ 134 | 135 | # FuseBox cache 136 | .fusebox/ 137 | 138 | # DynamoDB Local files 139 | .dynamodb/ 140 | 141 | # TernJS port file 142 | .tern-port 143 | 144 | # Stores VSCode versions used for testing VSCode extensions 145 | .vscode-test 146 | 147 | # yarn v2 148 | .yarn/cache 149 | .yarn/unplugged 150 | .yarn/build-state.yml 151 | .yarn/install-state.gz 152 | .pnp.* 153 | 154 | ### Node Patch ### 155 | # Serverless Webpack directories 156 | .webpack/ 157 | 158 | # Optional stylelint cache 159 | 160 | # SvelteKit build / generate output 161 | .svelte-kit 162 | 163 | # End of https://www.toptal.com/developers/gitignore/api/node 164 | 165 | .idea/ -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "development" 4 | ], 5 | "hints": { 6 | "axe/structure": [ 7 | "default", 8 | { 9 | "list": "off" 10 | } 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/.nojekyll -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "prettier-plugin-go-template" 4 | ], 5 | "overrides": [ 6 | { 7 | "files": [ 8 | "*.html" 9 | ], 10 | "options": { 11 | "parser": "go-template" 12 | } 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Internet Engineering Lecture

2 | 3 |

4 | GitHub Workflow Status 5 | GitHub repo size 6 |

7 | 8 | ## Introduction 9 | 10 | Web programming course contains material from Back-End to Front-End development. 11 | This is technological course, so its materials may be deprecated soon, or they may be related only to specific technologies. 12 | I am trying my best to keep these materials updated but feel free to change or update them using PRs. 13 | 14 | Corequisites: 15 | 16 | - Database Design 17 | 18 | Prerequisites: 19 | 20 | - Introduction to Programming 21 | - Advance Programming 22 | 23 | ## How to Run 24 | 25 | To run these slides locally you need [Hugo](https://gohugo.io) and [NodeJS](https://nodejs.dev/en/) installed. 26 | 27 | ```bash 28 | npm install 29 | 30 | hugo server 31 | ``` 32 | 33 | ## Taught in 34 | 35 | - Shahid Beheshti University: 36 | - Fall 2020 37 | - Spring 2021 38 | - Fall 2021 39 | - Amirkabir University 40 | - Fall 2020 41 | - Spring 2021 42 | - Fall 2021 43 | - Spring 2022 44 | - Fall 2022 45 | - Fall 2023 46 | - Spring 2024 47 | 48 | ## Topics and Schedule 49 | 50 | - Introduction (1 session) 51 | - HTTP (4 sessions) 52 | - [![YouTube Video Views](https://img.shields.io/youtube/views/Lo9bkJir4q8?style=for-the-badge&logo=youtube)](https://youtu.be/Lo9bkJir4q8?si=H5AVYPwCHRHT4HPL) 53 | - Go Programming (4 sessions) 54 | - [![YouTube Video Views](https://img.shields.io/youtube/views/B7rmPliSPew?style=for-the-badge&logo=youtube)](https://youtu.be/B7rmPliSPew?si=g-70-GmP8bENLzjz) 55 | - HTTP Server (2 sessions) 56 | -------------------------------------------------------------------------------- /assets/js/index.js: -------------------------------------------------------------------------------- 1 | import Reveal from "reveal.js"; 2 | import Highlight from "reveal.js/plugin/highlight/highlight.esm.js"; 3 | 4 | new Reveal({ 5 | plugins: [Highlight], 6 | history: true, 7 | slideNumber: true, 8 | }).initialize(); 9 | -------------------------------------------------------------------------------- /assets/js/toc.ts: -------------------------------------------------------------------------------- 1 | function toc(titles: [string]) { 2 | console.log(titles); 3 | let sections = document.getElementsByClassName("toc"); 4 | 5 | for (let section of sections) { 6 | if (section instanceof HTMLElement) { 7 | const titlesListElement = document.createElement("ul"); 8 | 9 | for (let title of titles) { 10 | let node = document.createElement("li"); 11 | 12 | if (section.dataset.selected && section.dataset.selected === title) { 13 | node.className += "hl-material"; 14 | } 15 | 16 | if ( 17 | section.dataset.selected && 18 | titles[parseInt(section.dataset.selected)] === title 19 | ) { 20 | node.className += "hl-material"; 21 | } 22 | 23 | node.appendChild(document.createTextNode(title)); 24 | titlesListElement.appendChild(node); 25 | } 26 | 27 | section.appendChild(titlesListElement); 28 | } 29 | } 30 | } 31 | 32 | toc([ 33 | {{ range $topic := .topics }} 34 | "{{ $topic }}", 35 | {{ end }} 36 | ]); 37 | -------------------------------------------------------------------------------- /assets/scss/lecture.scss: -------------------------------------------------------------------------------- 1 | $highlights: ( 2 | "orange": #ff9100, 3 | "green": #76ff03, 4 | "cyan": #00e5ff, 5 | "red": #ff0000, 6 | "material": #ff80ab, 7 | "violet": #ee82ee, 8 | "yellow": #ffcc00, 9 | "pink": #ffb6c1 10 | ); 11 | 12 | :root { 13 | --r-main-font-size: 24px 14 | } 15 | 16 | @each $name, $color in $highlights { 17 | .hl-#{$name} { 18 | color: $color; 19 | } 20 | } 21 | 22 | .stackoverflow { 23 | color: #f48024; 24 | } 25 | 26 | section > h2:first-child { 27 | color: #ff033e !important; 28 | } 29 | 30 | section > p { 31 | text-align: justify; 32 | } 33 | 34 | table.cell td { 35 | border: 5px solid #ccff00 !important; 36 | } 37 | 38 | .slide-background-content { 39 | height: 100%; 40 | } 41 | 42 | .box { 43 | border-radius: 5px; 44 | background-color: #919096; 45 | box-shadow: 5px 5px 5px 0; 46 | margin-top: 20px !important; 47 | margin-bottom: 20px !important; 48 | } 49 | 50 | .box header { 51 | background-color: #656469; 52 | border-radius: 5px 5px 0 0; 53 | color: #DD8F33; 54 | } 55 | 56 | .box p { 57 | font-style: italic; 58 | padding-left: 20px; 59 | padding-right: 20px; 60 | } 61 | 62 | section.hands-on { 63 | > ul:last-child::after { 64 | content: url("../img/hands-on.gif"); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /config.toml: -------------------------------------------------------------------------------- 1 | languageCode = 'en-us' 2 | title = 'IE Lecture' 3 | staticDir = ['fonts'] 4 | enableGitInfo = true 5 | 6 | [params] 7 | semester = "Spring 2024" 8 | 9 | [module] 10 | 11 | [[module.mounts]] 12 | source = "node_modules/reveal.js/dist/theme/fonts" 13 | target = "static/fonts" 14 | 15 | [[module.mounts]] 16 | source = 'static' 17 | target = 'static' 18 | -------------------------------------------------------------------------------- /content/_index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Homepage 3 | draft: false 4 | --- 5 | -------------------------------------------------------------------------------- /content/lectures/Redux/Slides.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/Redux/Slides.pdf -------------------------------------------------------------------------------- /content/lectures/Redux/Slides.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/Redux/Slides.pptx -------------------------------------------------------------------------------- /content/lectures/Redux/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction to Redux 3 | lecture: false 4 | --- 5 | 6 |
7 |

Introduction

8 | the codes used in this presentation are from a 9 | example app in redux that If you'd like to try create this project on your own 10 | computer, you can start a new Create-React-App project using this command: 11 | 12 | 

13 | npx create-react-app redux-essentials-example --template redux
14 |
15 |
16 |
17 |

References

18 | some of contents of this presentation are from links below: 19 | 20 | 24 |
25 |
26 |

Authors

27 | 28 | 32 |
33 | -------------------------------------------------------------------------------- /content/lectures/WebAssembly/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction to WebAssembly 3 | lecture: false 4 | --- 5 | 6 |
7 | We, Mohammad and 8 | Narges gave a presentation as 9 | Introduction to WebAssembly in 10 | Internet Engineering course 13 | at Shahid Beheshti University. 14 | Here you can find the slides and some code example of 15 | this presentation for better intuition. Before using the codes, we highly 16 | recommend to read the slides. 17 |
18 | 19 |
20 |

Tools

21 | 22 | - For converting .wat file to .wasm, firstly install 23 | wabt. Then run the commands 24 | below in your terminal.(More detailed help can be found on wabt github page). 25 |
26 | 27 |
28 |

Insllation

29 | 30 | To install it on your OS, follow the steps 31 | here carefully. 32 |
33 | 34 |
35 |

Running wat2wasm

36 | 37 | some examples: 38 | 39 | 

40 | # parse and typecheck test.wat
41 | $ bin/wat2wasm test.wat
42 | 
43 | # parse test.wat and write to binary file test.wasm
44 | $ bin/wat2wasm test.wat -o test.wasm
45 | 
46 | # parse spec-test.wast, and write verbose output to stdout (including the
47 | # meaning of every byte)
48 | $ bin/wat2wasm spec-test.wast -v
49 |
50 |
51 | -------------------------------------------------------------------------------- /content/lectures/WebAssembly/slides.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/WebAssembly/slides.pdf -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/index/asteroids/asteroids.c: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include "renderer.h" 5 | #include "asteroids.h" 6 | 7 | void init_asteroids(struct asteroid asteroids[], int size) { 8 | 9 | int i = 0; 10 | int j = 0; 11 | struct vector2d translation = {SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2}; 12 | 13 | for (i = 0; i < size; i++) { 14 | 15 | int sign_x = rand() % 100; 16 | int sign_y = rand() % 100; 17 | 18 | //start asteroid in random location 19 | int lx = rand() % SCREEN_WIDTH / 2; 20 | int ly = rand() % SCREEN_HEIGHT / 2; 21 | 22 | //give asteroid random velocity 23 | float vx = (float) (rand() % 500) / 1000; 24 | float vy = (float) (rand() % 500) / 1000; 25 | 26 | float degrees = (float) (rand() % 100 + 1000) / 1000; 27 | 28 | //50% chance the sign of the variable will be switched to negative 29 | if (sign_x >= 50) { 30 | 31 | vx = -vx; 32 | lx = -lx; 33 | degrees = -degrees; 34 | } 35 | 36 | //50% chance the sign of the variable will be switched to negative 37 | if (sign_y >= 50) { 38 | 39 | vy = -vy; 40 | ly = -ly; 41 | } 42 | 43 | //firest 3 asteroids are alive 44 | if (i < 3) { 45 | 46 | asteroids[i].alive = 1; 47 | 48 | } else { 49 | 50 | asteroids[i].alive = 0; 51 | } 52 | 53 | asteroids[i].size = LARGE; 54 | asteroids[i].hit_radius = 35; 55 | asteroids[i].rotation = degrees; 56 | asteroids[i].location.x = lx; 57 | asteroids[i].location.y = ly; 58 | asteroids[i].velocity.x = vx; 59 | asteroids[i].velocity.y = vy; 60 | asteroids[i].obj_vert[0].x = .0; 61 | asteroids[i].obj_vert[0].y = .4; 62 | asteroids[i].obj_vert[1].x = .2; 63 | asteroids[i].obj_vert[1].y = .3; 64 | asteroids[i].obj_vert[2].x = .2; 65 | asteroids[i].obj_vert[2].y = .1; 66 | asteroids[i].obj_vert[3].x = .4; 67 | asteroids[i].obj_vert[3].y = .0; 68 | asteroids[i].obj_vert[4].x = .3; 69 | asteroids[i].obj_vert[4].y = -.2; 70 | asteroids[i].obj_vert[5].x = .1; 71 | asteroids[i].obj_vert[5].y = -.2; 72 | asteroids[i].obj_vert[6].x = .0; 73 | asteroids[i].obj_vert[6].y = -.3; 74 | asteroids[i].obj_vert[7].x = -.2; 75 | asteroids[i].obj_vert[7].y = -.2; 76 | asteroids[i].obj_vert[8].x = -.4; 77 | asteroids[i].obj_vert[8].y = 0; 78 | asteroids[i].obj_vert[9].x = -.3; 79 | asteroids[i].obj_vert[9].y = .3; 80 | 81 | for (j = 0; j < VERTS; j++) { 82 | 83 | //coverts verts from obj space to world space and traslate world space to screen space 84 | multiply_vector(&asteroids[i].obj_vert[j], 88); 85 | add_vector(&asteroids[i].world_vert[j], &asteroids[i].obj_vert[j]); 86 | add_vector(&asteroids[i].world_vert[j], &translation); 87 | } 88 | } 89 | } 90 | 91 | void update_asteroids(struct asteroid asteroids[], int size) { 92 | 93 | int i = 0; 94 | int j = 0; 95 | struct vector2d translation = {SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2}; 96 | 97 | for (i = 0; i < size; i++) { 98 | 99 | //updates each asteroids location based off its velicity vector 100 | add_vector(&asteroids[i].location, &asteroids[i].velocity); 101 | 102 | //update each vert of the asteroid to reflect the changes made to the asteroids location vector 103 | //and rotation amount, then translate the new vert location to screen space 104 | for (j = 0; j < VERTS; j++) { 105 | 106 | asteroids[i].world_vert[j] = add_vector_new(&asteroids[i].obj_vert[j], &asteroids[i].location); 107 | add_vector(&asteroids[i].world_vert[j], &translation); 108 | rotate_vector(&asteroids[i].obj_vert[j], asteroids[i].rotation); 109 | } 110 | } 111 | } 112 | 113 | void draw_asteroids(uint32_t* pixel_buffer, struct asteroid asteroids[], int size) { 114 | 115 | int i = 0; 116 | 117 | for (i = 0; i < size; i++) { 118 | 119 | if (asteroids[i].alive) { 120 | 121 | draw_line(pixel_buffer, asteroids[i].world_vert[0].x, asteroids[i].world_vert[0].y, asteroids[i].world_vert[1].x, asteroids[i].world_vert[1].y, 0xffffffff); 122 | draw_line(pixel_buffer, asteroids[i].world_vert[1].x, asteroids[i].world_vert[1].y, asteroids[i].world_vert[2].x, asteroids[i].world_vert[2].y, 0xffffffff); 123 | draw_line(pixel_buffer, asteroids[i].world_vert[2].x, asteroids[i].world_vert[2].y, asteroids[i].world_vert[3].x, asteroids[i].world_vert[3].y, 0xffffffff); 124 | draw_line(pixel_buffer, asteroids[i].world_vert[3].x, asteroids[i].world_vert[3].y, asteroids[i].world_vert[4].x, asteroids[i].world_vert[4].y, 0xffffffff); 125 | draw_line(pixel_buffer, asteroids[i].world_vert[4].x, asteroids[i].world_vert[4].y, asteroids[i].world_vert[5].x, asteroids[i].world_vert[5].y, 0xffffffff); 126 | draw_line(pixel_buffer, asteroids[i].world_vert[5].x, asteroids[i].world_vert[5].y, asteroids[i].world_vert[6].x, asteroids[i].world_vert[6].y, 0xffffffff); 127 | draw_line(pixel_buffer, asteroids[i].world_vert[6].x, asteroids[i].world_vert[6].y, asteroids[i].world_vert[7].x, asteroids[i].world_vert[7].y, 0xffffffff); 128 | draw_line(pixel_buffer, asteroids[i].world_vert[7].x, asteroids[i].world_vert[7].y, asteroids[i].world_vert[8].x, asteroids[i].world_vert[8].y, 0xffffffff); 129 | draw_line(pixel_buffer, asteroids[i].world_vert[8].x, asteroids[i].world_vert[8].y, asteroids[i].world_vert[9].x, asteroids[i].world_vert[9].y, 0xffffffff); 130 | draw_line(pixel_buffer, asteroids[i].world_vert[9].x, asteroids[i].world_vert[9].y, asteroids[i].world_vert[0].x, asteroids[i].world_vert[0].y, 0xffffffff); 131 | } 132 | 133 | /* 134 | //draw vert representing ships location 135 | struct vector2d cpy = {asteroids[i].location.x, asteroids[i].location.y}; 136 | struct vector2d translation = {SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2}; 137 | add_vector(&cpy, &translation); 138 | 139 | draw_pixel(pixel_buffer, cpy.x, cpy.y, 0x00ff00ff); 140 | */ 141 | } 142 | } 143 | 144 | int shrink_asteroid(struct asteroid* a, int size) { 145 | 146 | a->obj_vert[0].x = .0; 147 | a->obj_vert[0].y = .4; 148 | a->obj_vert[1].x = .2; 149 | a->obj_vert[1].y = .3; 150 | a->obj_vert[2].x = .2; 151 | a->obj_vert[2].y = .1; 152 | a->obj_vert[3].x = .4; 153 | a->obj_vert[3].y = .0; 154 | a->obj_vert[4].x = .3; 155 | a->obj_vert[4].y = -.2; 156 | a->obj_vert[5].x = .1; 157 | a->obj_vert[5].y = -.2; 158 | a->obj_vert[6].x = .0; 159 | a->obj_vert[6].y = -.3; 160 | a->obj_vert[7].x = -.2; 161 | a->obj_vert[7].y = -.2; 162 | a->obj_vert[8].x = -.4; 163 | a->obj_vert[8].y = 0; 164 | a->obj_vert[9].x = -.3; 165 | a->obj_vert[9].y = .3; 166 | 167 | int i = 0; 168 | 169 | for (i = 0; i < VERTS; i++) { 170 | 171 | multiply_vector(&a->obj_vert[i], 88); 172 | } 173 | 174 | if (size == LARGE) { 175 | 176 | //shrink asteroid 177 | for (i = 0; i < VERTS; i++) { 178 | 179 | divide_vector(&a->obj_vert[i], 2); 180 | } 181 | 182 | a->size = MEDIUM; 183 | 184 | return 0; 185 | } 186 | 187 | if (size == MEDIUM) { 188 | 189 | //shrink asteroid 190 | for (i = 0; i < VERTS; i++) { 191 | 192 | divide_vector(&a->obj_vert[i], 4); 193 | } 194 | 195 | a->size = SMALL; 196 | 197 | return 0; 198 | } 199 | 200 | if (size == SMALL) { 201 | 202 | //shrink asteroid 203 | for (i = 0; i < VERTS; i++) { 204 | 205 | divide_vector(&a->obj_vert[i], 8); 206 | } 207 | 208 | return 0; 209 | } 210 | 211 | return 1; 212 | } 213 | 214 | void spawn_asteroids(struct asteroid a[], int length, int size, struct vector2d v) { 215 | 216 | int i = 0; 217 | int count = 0; 218 | 219 | for (i = 0; i < length; i++) { 220 | 221 | if(a[i].alive == 0) { 222 | 223 | if (count == 3) { 224 | 225 | break; 226 | } 227 | 228 | a[i].location = v; 229 | a[i].hit_radius /= 2; 230 | a[i].alive = 1; 231 | count++; 232 | shrink_asteroid(&a[i], size); 233 | } 234 | } 235 | } 236 | 237 | void bounds_asteroids(struct asteroid asteroids[], int size) { 238 | 239 | int i = 0; 240 | 241 | for (i = 0 ; i < size; i++) { 242 | 243 | if (asteroids[i].location.x < -SCREEN_WIDTH / 2) { 244 | 245 | asteroids[i].location.x = SCREEN_WIDTH / 2; 246 | } 247 | 248 | if (asteroids[i].location.x > SCREEN_WIDTH / 2) { 249 | 250 | asteroids[i].location.x = -SCREEN_WIDTH / 2; 251 | } 252 | 253 | if (asteroids[i].location.y < -SCREEN_HEIGHT / 2) { 254 | 255 | asteroids[i].location.y = SCREEN_HEIGHT / 2; 256 | } 257 | 258 | if (asteroids[i].location.y > SCREEN_HEIGHT / 2) { 259 | 260 | asteroids[i].location.y = -SCREEN_HEIGHT / 2; 261 | } 262 | } 263 | } 264 | 265 | 266 | int collision_asteroids(struct asteroid asteroids[], int size, struct vector2d* v, float radius) { 267 | 268 | 269 | int i = 0; 270 | 271 | 272 | for (i = 0; i < size; i++) { 273 | 274 | //only check for collions for asteroids that are shown onscreen 275 | if (asteroids[i].alive == 1) { 276 | 277 | float sum = asteroids[i].hit_radius + radius; 278 | float a = pow(asteroids[i].location.x - v->x, 2); 279 | float b = pow(asteroids[i].location.y - v->y, 2); 280 | float distance = sqrt(a + b); 281 | 282 | if (distance < sum) { 283 | 284 | return i; 285 | } 286 | } 287 | } 288 | 289 | return -1; 290 | } 291 | -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/index/asteroids/asteroids.h: -------------------------------------------------------------------------------- 1 | 2 | //asteroids.h 3 | #include "vector.h" 4 | #define VERTS 10 5 | 6 | enum sizes {SMALL, MEDIUM, LARGE}; 7 | 8 | struct asteroid { 9 | 10 | int alive; 11 | enum sizes size; 12 | float hit_radius; 13 | float rotation; 14 | struct vector2d location; 15 | struct vector2d velocity; 16 | struct vector2d obj_vert[VERTS]; 17 | struct vector2d world_vert[VERTS]; 18 | }; 19 | 20 | void init_asteroids(struct asteroid asteroids[], int size); 21 | void update_asteroids(struct asteroid asteroids[], int size); 22 | void draw_asteroids(uint32_t* pixel_buffer, struct asteroid asteroids[], int size); 23 | int shrink_asteroid(struct asteroid* a, int size); 24 | void spawn_asteroids(struct asteroid a[], int length, int size, struct vector2d v); 25 | void bounds_asteroids(struct asteroid asteroids[], int size); 26 | int collision_asteroids(struct asteroid asteroids[], int size, struct vector2d* v, float radius); 27 | -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/index/asteroids/main.c: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include "renderer.h" 5 | #include "player.h" 6 | #include "asteroids.h" 7 | 8 | #include "emscripten.h" 9 | 10 | #define ASTEROIDS 27 11 | #define LIVES 3 12 | 13 | int init(int width, int height); 14 | 15 | SDL_Window* window = NULL; 16 | SDL_Renderer *renderer; 17 | SDL_Texture *screen; 18 | uint32_t* pixels = NULL; 19 | struct asteroid asteroids[ASTEROIDS]; 20 | struct player p; 21 | struct player lives[LIVES]; 22 | 23 | 24 | void mainloop() 25 | { 26 | int sleep = 0; 27 | int quit = 0; 28 | SDL_Event event; 29 | Uint32 next_game_tick = SDL_GetTicks(); 30 | 31 | // Main loop code 32 | //check for new events every frame 33 | SDL_PumpEvents(); 34 | 35 | const Uint8 *state = SDL_GetKeyboardState(NULL); 36 | 37 | if (state[SDL_SCANCODE_ESCAPE]) { 38 | quit = 1; 39 | } 40 | 41 | if (state[SDL_SCANCODE_UP]) { 42 | struct vector2d thrust = get_direction(&p); 43 | multiply_vector(&thrust, .06); 44 | apply_force(&p.velocity, thrust); 45 | } 46 | 47 | if (state[SDL_SCANCODE_LEFT]) { 48 | rotate_player(&p, -4); 49 | } 50 | 51 | if (state[SDL_SCANCODE_RIGHT]) { 52 | rotate_player(&p, 4); 53 | } 54 | 55 | while (SDL_PollEvent(&event)) { 56 | switch(event.type) { 57 | case SDL_KEYDOWN: 58 | switch( event.key.keysym.sym ) { 59 | case SDLK_SPACE: 60 | if (p.lives > 0) { 61 | shoot_bullet(&p); 62 | } 63 | break; 64 | } 65 | } 66 | } 67 | 68 | //draw to the pixel buffer 69 | clear_pixels(pixels, 0x00000000); 70 | draw_asteroids(pixels, asteroids, ASTEROIDS); 71 | update_player(&p); 72 | bounds_player(&p); 73 | bounds_asteroids(asteroids, ASTEROIDS); 74 | 75 | int res = collision_asteroids(asteroids, ASTEROIDS, &p.location, p.hit_radius); 76 | 77 | if (res != -1) { 78 | p.lives--; 79 | p.location.x = 0; 80 | p.location.y = 0; 81 | p.velocity.x = 0; 82 | p.velocity.y = 0; 83 | 84 | int i = LIVES - 1; 85 | for ( i = LIVES; i >= 0; i--) { 86 | if(lives[i].lives > 0) { 87 | lives[i].lives = 0; 88 | break; 89 | } 90 | } 91 | } 92 | draw_player(pixels, &p); 93 | draw_player(pixels, &lives[0]); 94 | draw_player(pixels, &lives[1]); 95 | draw_player(pixels, &lives[2]); 96 | 97 | int i = 0; 98 | struct vector2d translation = {-SCREEN_WIDTH / 2, -SCREEN_HEIGHT / 2}; 99 | 100 | for (i = 0; i < BULLETS; i++) { 101 | //only check for collision for bullets that are shown on screen 102 | if (p.bullets[i].alive == TRUE) { 103 | //convert bullet screen space location to world space to compare 104 | //with asteroids world space to detect a collision 105 | struct vector2d world = add_vector_new(&p.bullets[i].location, &translation); 106 | int index = collision_asteroids(asteroids, ASTEROIDS, &world, 1); 107 | 108 | //collision occured 109 | if (index != -1) { 110 | asteroids[index].alive = 0; 111 | p.bullets[i].alive = FALSE; 112 | 113 | if (asteroids[index].size != SMALL) { 114 | spawn_asteroids(asteroids, ASTEROIDS, asteroids[index].size, asteroids[index].location); 115 | } 116 | } 117 | } 118 | } 119 | 120 | update_asteroids(asteroids, ASTEROIDS); 121 | 122 | SDL_UpdateTexture(screen, NULL, pixels, SCREEN_WIDTH * sizeof (Uint32)); 123 | 124 | SDL_RenderClear(renderer); 125 | SDL_RenderCopy(renderer, screen, NULL, NULL); 126 | SDL_RenderPresent(renderer); 127 | 128 | if(quit == 1) { 129 | emscripten_cancel_main_loop(); 130 | 131 | free(pixels); 132 | 133 | SDL_DestroyWindow(window); 134 | 135 | SDL_Quit(); 136 | } 137 | } 138 | 139 | int main (int argc, char* args[]) { 140 | 141 | //SDL Window setup 142 | if (init(SCREEN_WIDTH, SCREEN_HEIGHT) == 1) { 143 | 144 | return 0; 145 | } 146 | 147 | int i = 0; 148 | int j = 0; 149 | int offset = 0; 150 | struct vector2d translation = {-SCREEN_WIDTH / 2, -SCREEN_HEIGHT / 2}; 151 | 152 | //set up icons used to represent player lives 153 | for (i = 0; i < LIVES; i++) { 154 | 155 | init_player(&lives[i]); 156 | lives[i].lives = 1; 157 | 158 | //shrink lives 159 | for (j = 0; j < P_VERTS; j++) { 160 | 161 | divide_vector(&lives[i].obj_vert[j], 2); 162 | } 163 | 164 | struct vector2d top_left = {20 + offset, 20}; 165 | add_vector(&top_left, &translation); 166 | lives[i].location = top_left; 167 | update_player(&lives[i]); 168 | offset += 20; 169 | } 170 | 171 | init_player(&p); 172 | init_asteroids(asteroids, ASTEROIDS); 173 | 174 | emscripten_set_main_loop(mainloop, 0, 1); 175 | 176 | return 0; 177 | } 178 | 179 | int init(int width, int height) { 180 | 181 | if (SDL_Init(SDL_INIT_VIDEO) < 0) { 182 | 183 | printf("SDL could not initialize! SDL_Error: %s\n", SDL_GetError()); 184 | 185 | return 1; 186 | } 187 | 188 | SDL_CreateWindowAndRenderer(SCREEN_WIDTH, SCREEN_HEIGHT, SDL_WINDOW_SHOWN, &window, &renderer); 189 | 190 | screen = SDL_CreateTexture(renderer, SDL_PIXELFORMAT_RGBA8888, SDL_TEXTUREACCESS_STREAMING, SCREEN_WIDTH, SCREEN_HEIGHT); 191 | 192 | pixels = (Uint32*) malloc((SCREEN_WIDTH * SCREEN_HEIGHT) * sizeof(Uint32)); 193 | 194 | 195 | if (window == NULL) { 196 | 197 | printf ("Window could not be created! SDL_Error: %s\n", SDL_GetError()); 198 | 199 | return 1; 200 | } 201 | 202 | if (screen == NULL) { 203 | 204 | printf ("Texture could not be created! SDL_Error: %s\n", SDL_GetError()); 205 | 206 | return 1; 207 | } 208 | 209 | if (pixels == NULL) { 210 | 211 | printf ("Error allocating pixel buffer"); 212 | 213 | return 1; 214 | } 215 | 216 | return 0; 217 | } 218 | -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/index/asteroids/player.c: -------------------------------------------------------------------------------- 1 | 2 | //player.c 3 | 4 | #include 5 | #include "renderer.h" 6 | #include "player.h" 7 | 8 | void init_player(struct player* p) { 9 | 10 | int i = 0; 11 | struct vector2d translation = {SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2}; 12 | 13 | p->hit_radius = 15; 14 | p->lives = 3; 15 | p->location.x = 0; 16 | p->location.y = 0; 17 | p->velocity.x = 0; 18 | p->velocity.y = 0; 19 | p->obj_vert[0].x = 0; 20 | p->obj_vert[0].y = 1.5; 21 | p->obj_vert[1].x = -1; 22 | p->obj_vert[1].y = -1; 23 | p->obj_vert[2].x = 1; 24 | p->obj_vert[2].y = -1; 25 | 26 | //convert player verts from object space to world space 27 | for(i = 0; i < P_VERTS; i++) { 28 | 29 | multiply_vector(&p->obj_vert[i], -1); 30 | multiply_vector(&p->obj_vert[i], 12); 31 | add_vector(&p->world_vert[i], &p->obj_vert[i]); 32 | add_vector(&p->world_vert[i], &translation); 33 | } 34 | 35 | for(i = 0; i < BULLETS; i++) { 36 | 37 | p->bullets[i].alive = FALSE; 38 | } 39 | } 40 | 41 | void apply_force(struct vector2d* velocity, struct vector2d v) { 42 | 43 | add_vector(velocity, &v); 44 | } 45 | 46 | struct vector2d get_direction(struct player* p) { 47 | 48 | struct vector2d direction = p->obj_vert[0]; 49 | normalise_vector(&direction); 50 | 51 | return direction; 52 | } 53 | 54 | void shoot_bullet(struct player* p) { 55 | 56 | int i = 0; 57 | 58 | for (i = 0; i < BULLETS; i++) { 59 | 60 | if (p->bullets[i].alive == FALSE) { 61 | 62 | p->bullets[i].alive = TRUE; 63 | p->bullets[i].location = p->world_vert[0]; 64 | p->bullets[i].velocity = get_direction(p); 65 | multiply_vector(&p->bullets[i].velocity, 4.1); 66 | break; 67 | } 68 | } 69 | } 70 | 71 | void draw_player(uint32_t* pixel_buffer, struct player* p) { 72 | 73 | int i = 0; 74 | 75 | if (p->lives > 0) { 76 | 77 | draw_line(pixel_buffer, p->world_vert[0].x, p->world_vert[0].y, p->world_vert[1].x, p->world_vert[1].y, 0xffffffff); 78 | draw_line(pixel_buffer, p->world_vert[1].x, p->world_vert[1].y, p->world_vert[2].x, p->world_vert[2].y, 0xffffffff); 79 | draw_line(pixel_buffer, p->world_vert[2].x, p->world_vert[2].y, p->world_vert[0].x, p->world_vert[0].y, 0xffffffff); 80 | } 81 | 82 | /* 83 | //draw vers representing the player 84 | for (i = 0; i < P_VERTS; i++) { 85 | 86 | draw_pixel(pixel_buffer, p->world_vert[i].x, p->world_vert[i].y, 0xff00ffff); 87 | } 88 | */ 89 | 90 | //draw verts representing the bullets 91 | for (i = 0; i < BULLETS; i++) { 92 | 93 | if (p->bullets[i].alive == TRUE) { 94 | 95 | draw_pixel(pixel_buffer, p->bullets[i].location.x, p->bullets[i].location.y, 0xffffffff); 96 | } 97 | } 98 | 99 | /* 100 | //draw vert representing ships location 101 | struct vector2d cpy = {p->location.x, p->location.y}; 102 | struct vector2d translation = {SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2}; 103 | add_vector(&cpy, &translation); 104 | 105 | draw_pixel(pixel_buffer, cpy.x, cpy.y, 0x00ff00ff); 106 | */ 107 | } 108 | 109 | void update_player(struct player* p) { 110 | 111 | limit_vector(&p->velocity, 2); 112 | add_vector(&p->location, &p->velocity); 113 | 114 | struct vector2d translation = {SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2}; 115 | 116 | int i = 0; 117 | 118 | for (i =0; i < P_VERTS; i++) { 119 | 120 | p->world_vert[i] = add_vector_new(&p->obj_vert[i], &p->location); 121 | add_vector(&p->world_vert[i], &translation); 122 | } 123 | 124 | for (i = 0; i < BULLETS; i++) { 125 | 126 | add_vector(&p->bullets[i].location, &p->bullets[i].velocity); 127 | } 128 | } 129 | 130 | void rotate_player(struct player* p, float degrees) { 131 | 132 | int i = 0; 133 | 134 | for (i =0; i < P_VERTS; i++) { 135 | 136 | rotate_vector(&p->obj_vert[i], degrees); 137 | } 138 | } 139 | 140 | void bounds_player(struct player* p) { 141 | 142 | int i = 0; 143 | 144 | if (p->location.x < -SCREEN_WIDTH / 2) { 145 | 146 | p->location.x = SCREEN_WIDTH / 2; 147 | } 148 | 149 | if (p->location.x > SCREEN_WIDTH / 2) { 150 | 151 | p->location.x = -SCREEN_WIDTH / 2; 152 | } 153 | 154 | if (p->location.y < -SCREEN_HEIGHT / 2) { 155 | 156 | p->location.y = SCREEN_HEIGHT / 2; 157 | } 158 | 159 | if (p->location.y > SCREEN_HEIGHT / 2) { 160 | 161 | p->location.y = -SCREEN_HEIGHT / 2; 162 | } 163 | 164 | //bullet is out of bounds, reset bullet to be shot again 165 | //bullets are in world space 166 | for (i = 0; i < BULLETS; i++) { 167 | 168 | if (p->bullets[i].location.x < 0 || p->bullets[i].location.x >= SCREEN_WIDTH) { 169 | 170 | p->bullets[i].alive = FALSE; 171 | } 172 | 173 | if (p->bullets[i].location.y < 0 || p->bullets[i].location.y >= SCREEN_HEIGHT) { 174 | 175 | p->bullets[i].alive = FALSE; 176 | } 177 | } 178 | } 179 | 180 | -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/index/asteroids/player.h: -------------------------------------------------------------------------------- 1 | 2 | //player.h 3 | 4 | #include "vector.h" 5 | 6 | #define P_VERTS 3 7 | #define BULLETS 3 8 | 9 | enum boolean {TRUE, FALSE}; 10 | 11 | struct bullet { 12 | 13 | struct vector2d location; 14 | struct vector2d velocity; 15 | enum boolean alive; 16 | }; 17 | 18 | struct player { 19 | 20 | float hit_radius; 21 | int lives; 22 | struct vector2d location; 23 | struct vector2d velocity; 24 | struct vector2d obj_vert[P_VERTS]; 25 | struct vector2d world_vert[P_VERTS]; 26 | struct bullet bullets[BULLETS]; 27 | }; 28 | 29 | void init_player(struct player* p); 30 | 31 | void draw_player(uint32_t* pixel_buffer, struct player* p); 32 | 33 | void shoot_bullet(struct player* p); 34 | 35 | void update_player(struct player* p); 36 | 37 | void bounds_player(struct player* p); 38 | 39 | void apply_force(struct vector2d* velocity, struct vector2d v); 40 | 41 | void rotate_player(struct player* p, float degrees); 42 | 43 | struct vector2d get_direction(struct player* p); 44 | 45 | -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/index/asteroids/renderer.c: -------------------------------------------------------------------------------- 1 | 2 | //renderer.c 3 | 4 | #include "renderer.h" 5 | 6 | int draw_line(uint32_t* pixel_buffer, int x1, int y1, int x2, int y2, uint32_t colour) { 7 | 8 | 9 | //plot the first point 10 | draw_pixel(pixel_buffer, x1, y1, colour); 11 | 12 | //make sure we draw the line always from left to right 13 | if (x1 > x2) { 14 | 15 | int temp_x = x1; 16 | int temp_y = y1; 17 | 18 | x1 = x2; 19 | y1 = y2; 20 | 21 | x2 = temp_x; 22 | y2 = temp_y; 23 | } 24 | 25 | int dx = x2 - x1; 26 | int dy = y2 - y1; 27 | 28 | //the length of the line is greater along the X axis 29 | if (dx >= fabs(dy)) { 30 | 31 | float slope = (float) dy / dx; 32 | 33 | //line travels from top to bottom 34 | if (y1 <= y2) { 35 | 36 | float ideal_y = y1 + slope; 37 | int y = (int) round(ideal_y); 38 | float error = ideal_y - y; 39 | 40 | int i = 0; 41 | 42 | //loop through all the X values 43 | for(i = 1; i <= dx; i++) { 44 | 45 | int x = x1 + i; 46 | 47 | draw_pixel(pixel_buffer, x, y, colour); 48 | 49 | error += slope; 50 | 51 | if (error >= 0.5) { 52 | 53 | y++; 54 | error -= 1; 55 | } 56 | } 57 | } 58 | 59 | //line travels from bottom to top 60 | if (y1 > y2) { 61 | 62 | float ideal_y = y1 + slope; 63 | int y = (int) round(ideal_y); 64 | float error = ideal_y - y; 65 | 66 | int i = 0; 67 | 68 | //loop through all the x values 69 | for(i = 1; i <= dx; i++) { 70 | 71 | int x = x1 + i; 72 | 73 | draw_pixel(pixel_buffer, x, y, colour); 74 | 75 | error += slope; 76 | 77 | if (error <= -0.5) { 78 | 79 | y--; 80 | error += 1; 81 | } 82 | } 83 | } 84 | 85 | 86 | } 87 | 88 | //the length of the line is greater along the Y axis 89 | if (fabs(dy) > dx) { 90 | 91 | float slope = (float) dx / dy; 92 | 93 | //line travels from top to bottom 94 | if (y1 < y2) { 95 | 96 | float ideal_x = x1 + slope; 97 | int x = (int) round(ideal_x); 98 | float error = ideal_x - x; 99 | 100 | int i = 0; 101 | 102 | //loop through all the y values 103 | for(i = 1; i <= dy; i++) { 104 | 105 | int y = y1 + i; 106 | 107 | draw_pixel(pixel_buffer, x, y, colour); 108 | 109 | error += slope; 110 | 111 | if (error >= 0.5) { 112 | 113 | x++; 114 | error -= 1; 115 | } 116 | } 117 | } 118 | 119 | //draw line from bottom to top 120 | if (y1 > y2) { 121 | 122 | float ideal_x = x1 - slope; 123 | int x = (int) round(ideal_x); 124 | float error = ideal_x - x; 125 | 126 | int i = 0; 127 | 128 | //loop through all the y values 129 | for(i = 1; i <= fabs(dy); i++) { 130 | 131 | int y = y1 - i; 132 | 133 | draw_pixel(pixel_buffer, x, y, colour); 134 | 135 | error += slope; 136 | 137 | if (error <= -0.5) { 138 | 139 | x++; 140 | error += 1; 141 | } 142 | } 143 | } 144 | } 145 | 146 | return 0; 147 | } 148 | 149 | int draw_pixel(uint32_t* pixel_buffer, int x, int y, uint32_t colour) { 150 | 151 | //dont draw any pixels that are outside of the pixel buffer 152 | if (x < 0 || y < 0) { 153 | 154 | return 1; 155 | } 156 | 157 | //dont draw any pixels that are outside of the pixel buffer 158 | if (x >= SCREEN_WIDTH || y >= SCREEN_HEIGHT) { 159 | 160 | return 1; 161 | } 162 | 163 | uint32_t position = y * SCREEN_WIDTH + x; 164 | pixel_buffer[position] = colour; 165 | 166 | return 0; 167 | } 168 | 169 | void clear_pixels(uint32_t* pixel_buffer, uint32_t colour) { 170 | 171 | int i = 0; 172 | int buffer_size = SCREEN_WIDTH * SCREEN_HEIGHT; 173 | 174 | for (i = 0; i < buffer_size; i++) { 175 | 176 | pixel_buffer[i] = colour; 177 | } 178 | } 179 | 180 | -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/index/asteroids/renderer.h: -------------------------------------------------------------------------------- 1 | 2 | //renderer.h 3 | 4 | #include 5 | #include 6 | 7 | //Screen dimension constants 8 | #define SCREEN_WIDTH 640 9 | #define SCREEN_HEIGHT 480 10 | 11 | //assing a colour to a single pixel 12 | int draw_pixel(uint32_t* pixel_buffer, int x, int y, uint32_t colour); 13 | 14 | int draw_line(uint32_t* pixel_buffer, int x1, int y1, int x2, int y2, uint32_t colour); 15 | 16 | //assign a colour to all pixels 17 | void clear_pixels(uint32_t* pixel_buffer, uint32_t colour); 18 | 19 | -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/index/asteroids/vector.c: -------------------------------------------------------------------------------- 1 | 2 | //vector.c 3 | 4 | #include 5 | #include 6 | #include "vector.h" 7 | 8 | void add_vector(struct vector2d* a, struct vector2d* b) { 9 | 10 | a->x += b->x; 11 | a->y += b->y; 12 | } 13 | 14 | struct vector2d add_vector_new(struct vector2d* a, struct vector2d* b) { 15 | 16 | struct vector2d new = {a->x + b->x, a->y + b->y}; 17 | 18 | return new; 19 | } 20 | 21 | void multiply_vector(struct vector2d* v, float n) { 22 | 23 | v->x *= n; 24 | v->y *= n; 25 | } 26 | 27 | void divide_vector(struct vector2d* v, float n) { 28 | 29 | v->x /= n; 30 | v->y /= n; 31 | } 32 | 33 | void print_vector(struct vector2d* a) { 34 | 35 | printf("x = %f\n y = %f\n", a->x, a->y); 36 | } 37 | 38 | float magnitude_vector(struct vector2d* v) { 39 | 40 | float c2 = pow(v->x, 2) + pow(v->y, 2); 41 | 42 | return sqrt(c2); 43 | } 44 | 45 | void normalise_vector(struct vector2d* v) { 46 | 47 | float mag = magnitude_vector(v); 48 | 49 | divide_vector(v, mag); 50 | } 51 | 52 | void limit_vector(struct vector2d* v, float limit) { 53 | 54 | float mag = magnitude_vector(v); 55 | 56 | if (mag > limit) { 57 | 58 | float ratio = limit / mag; 59 | v->x *= ratio; 60 | v->y *= ratio; 61 | } 62 | } 63 | 64 | void rotate_vector(struct vector2d* v, float degrees) { 65 | 66 | //calculate radians 67 | float angle = degrees * M_PI / 180; 68 | float sine = sin(angle); 69 | float cosine = cos(angle); 70 | 71 | //rotation matix 72 | float matrix[2][2] = {{cosine, -sine}, {sine, cosine}}; 73 | 74 | float x = v->x; 75 | float y = v->y; 76 | 77 | v->x = matrix[0][0] * x + matrix[0][1] * y; 78 | v->y = matrix[1][0] * x + matrix[1][1] * y; 79 | } 80 | 81 | -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/index/asteroids/vector.h: -------------------------------------------------------------------------------- 1 | 2 | //vector.h 3 | 4 | #ifndef VECTOR_H 5 | #define VECTOR_H 6 | 7 | struct vector2d { 8 | 9 | float x; 10 | float y; 11 | }; 12 | 13 | void add_vector(struct vector2d* a, struct vector2d* b); 14 | 15 | struct vector2d add_vector_new(struct vector2d* a, struct vector2d* b); 16 | 17 | void multiply_vector(struct vector2d* v, float n); 18 | 19 | void divide_vector(struct vector2d* v, float n); 20 | 21 | void print_vector(struct vector2d* a); 22 | 23 | void rotate_vector(struct vector2d* v, float degrees); 24 | 25 | float magnitude_vector(struct vector2d* v); 26 | 27 | void normalise_vector(struct vector2d* v); 28 | 29 | void limit_vector(struct vector2d* v, float limit); 30 | 31 | #endif //VECTOR_H 32 | -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/src/apple.c: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include "main.h" 4 | #include "apple.h" 5 | 6 | SDL_Rect apple; 7 | 8 | void generate_new_apple_pos(void); 9 | 10 | void render_apple() 11 | { 12 | SDL_SetRenderDrawColor(getRenderer(), 226, 106, 106, SDL_ALPHA_OPAQUE); 13 | SDL_RenderFillRect(getRenderer(), &apple); 14 | } 15 | 16 | void generate_new_apple_pos(void) 17 | { 18 | apple.x = (rand() % (SCREEN_WIDTH - DEFAULT_APPLE_WIDTH + 1)); 19 | apple.y = (rand() % (SCREEN_HEIGHT - DEFAULT_APPLE_HEIGHT + 1)); 20 | apple.w = DEFAULT_APPLE_WIDTH; 21 | apple.h = DEFAULT_APPLE_HEIGHT; 22 | } 23 | 24 | int get_apple_posX(void) 25 | { 26 | return apple.x; 27 | } 28 | int get_apple_posY(void) 29 | { 30 | return apple.y; 31 | } -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/src/apple.h: -------------------------------------------------------------------------------- 1 | #ifndef APPLE 2 | #define APPLE 3 | 4 | static const int DEFAULT_APPLE_WIDTH = 20; 5 | static const int DEFAULT_APPLE_HEIGHT = 20; 6 | 7 | void render_apple(void); 8 | void generate_new_apple_pos(void); 9 | 10 | int get_apple_posX(void); 11 | int get_apple_posY(void); 12 | 13 | #endif -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/src/main.c: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | #ifdef __EMSCRIPTEN__ 5 | #include 6 | #endif 7 | 8 | #include "main.h" 9 | #include "snake.h" 10 | #include "apple.h" 11 | 12 | void handle_events(void); 13 | void quit(void); 14 | 15 | SDL_Window *window; 16 | SDL_Renderer *renderer; 17 | SDL_Event e; 18 | 19 | bool running = false; 20 | bool frozen = false; 21 | 22 | bool init(void) 23 | { 24 | bool success = true; 25 | window = NULL; 26 | renderer = NULL; 27 | 28 | if(SDL_Init(SDL_INIT_VIDEO) < 0){ 29 | printf("SDL could not be initiliazed. SDL_Error: %s\n", SDL_GetError()); 30 | success = false; 31 | } 32 | 33 | window = SDL_CreateWindow("snake game", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, SCREEN_WIDTH, SCREEN_HEIGHT, SDL_WINDOW_SHOWN); 34 | if(!window){ 35 | printf("SDL_Window could not be initialized. SDL_Error: %s\n", SDL_GetError()); 36 | success = false; 37 | } 38 | else{ 39 | renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED); 40 | } 41 | 42 | if(!init_snake()){ 43 | printf("snake could not be initialized.\n"); 44 | success = false; 45 | } 46 | 47 | generate_new_apple_pos(); 48 | 49 | running = true; 50 | return success; 51 | } 52 | 53 | void main_loop(void) 54 | { 55 | handle_events(); 56 | 57 | if(frozen) 58 | return; 59 | 60 | SDL_SetRenderDrawColor(renderer, 18, 1, 54, SDL_ALPHA_OPAQUE); 61 | SDL_RenderClear(renderer); 62 | 63 | SDL_SetRenderDrawColor(renderer, 255, 255, 255, SDL_ALPHA_OPAQUE); 64 | 65 | update_snake(); 66 | render_apple(); 67 | 68 | SDL_RenderPresent(renderer); 69 | 70 | SDL_Delay(70); 71 | } 72 | 73 | int main(int argc, char* args[]) 74 | { 75 | if(!init()) 76 | return -1; 77 | else{ 78 | 79 | #ifdef __EMSCRIPTEN__ 80 | emscripten_set_main_loop(main_loop, 0, 1); 81 | #endif 82 | 83 | #ifndef __EMSCRIPTEN__ 84 | while(running) 85 | main_loop(); 86 | #endif 87 | } 88 | 89 | quit_game(); 90 | return 0; 91 | } 92 | 93 | void handle_events() 94 | { 95 | while(SDL_PollEvent(&e) != 0){ 96 | if(e.type == SDL_QUIT){ 97 | quit_game(); 98 | } 99 | else if(e.type == SDL_KEYDOWN){ 100 | switch(e.key.keysym.sym){ 101 | case SDLK_RIGHT: 102 | change_snake_direction(RIGHT); 103 | break; 104 | case SDLK_LEFT: 105 | change_snake_direction(LEFT); 106 | break; 107 | case SDLK_UP: 108 | change_snake_direction(UP); 109 | break; 110 | case SDLK_DOWN: 111 | change_snake_direction(DOWN); 112 | break; 113 | } 114 | } 115 | } 116 | } 117 | 118 | void quit_game(void) 119 | { 120 | SDL_DestroyWindow(window); 121 | window = NULL; 122 | 123 | SDL_DestroyRenderer(renderer); 124 | renderer = NULL; 125 | 126 | free_tails(); 127 | SDL_Quit(); 128 | 129 | #ifdef __EMSCRIPTEN__ 130 | emscripten_cancel_main_loop(); 131 | #endif 132 | } 133 | 134 | void set_freeze(bool b) 135 | { 136 | frozen = b; 137 | } 138 | 139 | SDL_Renderer* getRenderer() 140 | { 141 | return renderer; 142 | } -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/src/main.h: -------------------------------------------------------------------------------- 1 | #include 2 | 3 | #ifndef MAIN 4 | #define MAIN 5 | 6 | #define SCREEN_WIDTH 640 7 | #define SCREEN_HEIGHT 480 8 | 9 | SDL_Renderer *getRenderer(); 10 | 11 | void quit_game(void); 12 | void set_freeze(bool); 13 | 14 | #endif -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/src/project.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/WebAssembly/snake-game/snake/src/project.wasm -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/src/snake: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/WebAssembly/snake-game/snake/src/snake -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/src/snake.c: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | #include "snake.h" 5 | #include "main.h" 6 | #include "apple.h" 7 | 8 | struct Snake snake; 9 | struct TailNode *lasttail; 10 | 11 | void push_tail(); 12 | 13 | bool init_snake() 14 | { 15 | // default direction 16 | snake.dx = -1; 17 | snake.dy = 0; 18 | 19 | // initializes head 20 | snake.head.rect.x = DEFAULT_X; 21 | snake.head.rect.y = DEFAULT_Y; 22 | snake.head.rect.w = DEFAULT_WIDTH; 23 | snake.head.rect.h = DEFAULT_HEIGHT; 24 | snake.head.next = NULL; 25 | snake.head.previous = NULL; 26 | 27 | // sets pointer of last tail to head 28 | lasttail = &snake.head; 29 | 30 | // pushes default tails 31 | for(int i = 0; i < DEFAULT_TAILS_N; ++i) 32 | push_tail(); 33 | 34 | return true; 35 | } 36 | 37 | 38 | void render_tail(SDL_Rect *tail) 39 | { // renders individual parts of the snake 40 | SDL_SetRenderDrawColor(getRenderer(), 252, 191, 30, SDL_ALPHA_OPAQUE); 41 | SDL_RenderFillRect(getRenderer(), tail); 42 | } 43 | 44 | void check_collision() 45 | { 46 | // fruit collision 47 | if(abs(snake.head.rect.x - get_apple_posX()) < DEFAULT_WIDTH && abs(snake.head.rect.y - get_apple_posY()) < DEFAULT_HEIGHT){ 48 | push_tail(); 49 | generate_new_apple_pos(); 50 | } 51 | 52 | // border collision 53 | if(snake.head.rect.x > SCREEN_WIDTH - DEFAULT_WIDTH) 54 | snake.head.rect.x = 0; 55 | else if(snake.head.rect.x < 0 - DEFAULT_WIDTH) 56 | snake.head.rect.x = SCREEN_WIDTH; 57 | else if(snake.head.rect.y < 0 - DEFAULT_HEIGHT) 58 | snake.head.rect.y = SCREEN_HEIGHT; 59 | else if(snake.head.rect.y > SCREEN_HEIGHT - DEFAULT_HEIGHT) 60 | snake.head.rect.y = 0; 61 | } 62 | 63 | void update_snake(void) 64 | { // iterates over the head and the tail 65 | for(struct TailNode *ptr = lasttail; ptr != NULL; ptr = (*ptr).previous){ 66 | if((*ptr).previous == NULL){ // in other words, if this "tail" is the head 67 | snake.head.rect.x += snake.dx * DEFAULT_WIDTH; 68 | snake.head.rect.y += snake.dy * DEFAULT_HEIGHT; 69 | } else { // if it's the snake's body 70 | //if(abs(snake.head.rect.x - (*ptr).rect.x) < DEFAULT_WIDTH && // checks collision with the head 71 | // abs(snake.head.rect.y - (*ptr).rect.y) < DEFAULT_HEIGHT) 72 | // quit_game(); 73 | 74 | (*ptr).rect.x = (*ptr).previous->rect.x; 75 | (*ptr).rect.y = (*ptr).previous->rect.y; 76 | } 77 | 78 | render_tail(&(*ptr).rect); 79 | } 80 | 81 | check_collision(); // head-only collision (fruit, border, etc.) 82 | } 83 | 84 | void push_tail() 85 | { // pushes a new tail inside the linked list 86 | struct TailNode *new_tail = malloc(sizeof(struct TailNode)); 87 | if(new_tail == NULL) 88 | quit_game(); 89 | 90 | (*new_tail).rect.w = DEFAULT_WIDTH; 91 | (*new_tail).rect.h = DEFAULT_HEIGHT; 92 | 93 | (*new_tail).next = NULL; 94 | (*new_tail).previous = lasttail; 95 | 96 | (*lasttail).next = new_tail; 97 | lasttail = new_tail; 98 | } 99 | 100 | void change_snake_direction(int dir) 101 | { 102 | if(dir == RIGHT && snake.dx != -1){ 103 | snake.dx = 1; 104 | snake.dy = 0; 105 | } 106 | else if(dir == LEFT && snake.dx != 1){ 107 | snake.dx = -1; 108 | snake.dy = 0; 109 | } 110 | else if(dir == UP && snake.dy != 1){ 111 | snake.dy = -1; 112 | snake.dx = 0; 113 | } 114 | else if(dir == DOWN && snake.dy != -1){ 115 | snake.dy = 1; 116 | snake.dx = 0; 117 | } 118 | } 119 | 120 | void free_tails() 121 | { 122 | struct TailNode *tmp; 123 | struct TailNode *secondtail; 124 | secondtail = snake.head.next; // we skip the first node (head) because it's allocated in the stack 125 | 126 | while(secondtail != NULL){ 127 | tmp = secondtail; 128 | secondtail = (*secondtail).next; 129 | free(tmp); 130 | } 131 | } -------------------------------------------------------------------------------- /content/lectures/WebAssembly/snake-game/snake/src/snake.h: -------------------------------------------------------------------------------- 1 | #include 2 | #ifndef SNAKE 3 | #define SNAKE 4 | 5 | static const int DEFAULT_X = 500; 6 | static const int DEFAULT_Y = 10; 7 | static const int DEFAULT_WIDTH = 20; 8 | static const int DEFAULT_HEIGHT = 20; 9 | 10 | static const int DEFAULT_TAILS_N = 3; 11 | 12 | struct TailNode{ 13 | SDL_Rect rect; 14 | struct TailNode *next; 15 | struct TailNode *previous; 16 | }; 17 | 18 | struct Snake{ 19 | int dx; 20 | int dy; 21 | int size; 22 | struct TailNode head; 23 | }; 24 | 25 | enum direction{LEFT, RIGHT, UP, DOWN}; 26 | 27 | bool init_snake(void); 28 | void update_snake(void); 29 | void change_snake_direction(int); 30 | void free_tails(void); 31 | 32 | #endif -------------------------------------------------------------------------------- /content/lectures/WebAssembly/wat2wasm/addTwoNum.wasm: -------------------------------------------------------------------------------- 1 | asm`add 2 |  j -------------------------------------------------------------------------------- /content/lectures/WebAssembly/wat2wasm/addTwoNum.wat: -------------------------------------------------------------------------------- 1 | 2 | (module 3 | (func $add (param $a i32) (param $b i32) (result i32) 4 | get_local $a 5 | get_local $b 6 | i32.add 7 | ) 8 | (export "add" (func $add)) 9 | ) -------------------------------------------------------------------------------- /content/lectures/WebAssembly/wat2wasm/hello-WebAssembly.js: -------------------------------------------------------------------------------- 1 | fetch('addTwoNum.wasm') 2 | // take the raw binary file and put that into an array buffer 3 | .then(response => response.arrayBuffer()) 4 | // take the bytes and instantiate it through webassembly 5 | .then(bytes => WebAssembly.instantiate(bytes)) 6 | // take the reults and use the instance exports functions 7 | .then(results => results.instance.exports.add(14, 5)) 8 | // display it in HTML 9 | .then (addResult => document.body.textContent = `Congrats. Your wrote your first WebAssembly program :) Addition result: ${addResult}`) -------------------------------------------------------------------------------- /content/lectures/WebAssembly/wat2wasm/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello WebAssembly! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /content/lectures/WebAssembly/wat2wasm/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Helvetica", Sans-Serif; 3 | font-size: 30px; 4 | color:blueviolet; 5 | } -------------------------------------------------------------------------------- /content/lectures/cors/img/cors-error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/cors/img/cors-error.png -------------------------------------------------------------------------------- /content/lectures/cors/img/cors-frontend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/cors/img/cors-frontend.png -------------------------------------------------------------------------------- /content/lectures/cors/img/cors_principle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/cors/img/cors_principle.png -------------------------------------------------------------------------------- /content/lectures/cors/img/simple-req.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/cors/img/simple-req.png -------------------------------------------------------------------------------- /content/lectures/cors/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | lecture: false 3 | title: Cross-Origin Resource Sharing 4 | topics: 5 | - Introduction 6 | - Policy 7 | - Usage 8 | - Example 9 | - Error 10 | - Middleware 11 | - Proxy 12 | --- 13 | 14 |
15 |
16 |

What is CORS?

17 |

18 | Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism 19 | that allows a server to indicate any origins (domain, scheme, or port) 20 | other than its own from which a browser should permit loading resources. 21 |

22 |
23 |
24 |

25 | CORS also relies on a mechanism by which browsers make a 26 | preflight request to the server hosting the 27 | cross-origin resource, in order to check that the server will permit the 28 | actual request. In that preflight, the browser sends headers that indicate 29 | the HTTP method and headers that will be used in the actual request. 30 |

31 |
32 |
33 |
34 |

CORS Policy

35 |

36 | The Cross-Origin Resource Sharing standard works by adding new HTTP headers 37 | that let servers describe which origins are permitted to read that 38 | information from a web browser. 39 |

40 |
41 |
42 |

Usage

43 |

44 | For security reasons, browsers restrict 45 | cross-origin HTTP requests initiated from scripts. For example, 46 | XMLHttpRequest and the Fetch API follow the same-origin policy. This means 47 | that a web application using those APIs can only request resources from the 48 | same origin the application was loaded from unless the response from other 49 | origins includes the right CORS headers. 50 |

51 |
52 |
53 |
54 |

Example

55 |

56 | An example of a cross-origin request, the front-end JavaScript code served 57 | from 58 | https://domain-a.com uses XMLHttpRequest to 59 | make a request for 60 | https://domain-b.com/data.json. 61 |

62 |
63 |
64 | cors-policy-diagram 70 |
71 |
72 |

Another Example

73 |

74 | For example, suppose web content at 75 | https://foo.example wishes to invoke content on 76 | domain https://bar.other. Code of this sort 77 | might be used in JavaScript deployed on foo.example: 78 |

79 | 

 80 | const xhr = new XMLHttpRequest();
 81 | const url = "https://bar.other/resources/public-data/";
 82 | 
 83 | xhr.open("GET", url);
 84 | xhr.onreadystatechange = someHandler;
 85 | xhr.send();
 86 |         
 87 |
88 |
89 |
90 |

91 | This operation performs a simple exchange between the client and the 92 | server, using CORS headers to handle the privileges: 93 |

94 | simple-request-flow 100 |
101 |
102 |

Let's look at what the browser will send to the server in this case:

103 | 

104 | GET /resources/public-data/ HTTP/1.1
105 | Host: bar.other
106 | User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0
107 | Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
108 | Accept-Language: en-us,en;q=0.5
109 | Accept-Encoding: gzip,deflate
110 | Connection: keep-alive
111 | Origin: https://foo.example
112 |         
113 |
114 |
115 |
116 |

117 | The request header of note is Origin, which shows that the invocation is 118 | coming from 119 | https://foo.example. Now let's see how the 120 | server responds: 121 |

122 | 

123 | HTTP/1.1 200 OK
124 | Date: Mon, 01 Dec 2008 00:23:53 GMT
125 | Server: Apache/2
126 | Access-Control-Allow-Origin: *
127 | Keep-Alive: timeout=2, max=100
128 | Connection: Keep-Alive
129 | Transfer-Encoding: chunked
130 | Content-Type: application/xml
131 | 
132 | […XML Data…]
133 |         
134 |
135 |

136 | In response, the server returns a Access-Control-Allow-Origin header with 137 | Access-Control-Allow-Origin: *, 138 | which means that the resource can be accessed by any origin. 139 |

140 |
141 |
142 |
143 |

CORS Error

144 |

145 | The CORS behavior, commonly termed as CORS error, is a mechanism to restrict 146 | users from accessing shared resources. This is not an error but a security 147 | measure to secure users or the website which you are accessing from a 148 | potential security breach. 149 |

150 | cors-error 151 |
152 |
153 |
154 |

Fixing CORS Error

155 |

156 | When you are developing an application, you can fix CORS error in 157 | Front-end or Back-end. 158 |

159 |
160 |
161 |
162 |
163 |

Proxy Server (Frontend)

164 |

165 | When you are developing a Front-end application, you cannot change the 166 | responses from the server that you are requesting to. So you need to make 167 | http requests with help of a third party application like a proxy server. 168 | In this method you send CORS requests to your proxy server, the proxy 169 | server sends a non-CORS request to the requested server, then it gets a 170 | non-CORS response from that server and sends us a CORS response. 171 |

172 |
173 |
174 |

Flow

175 | cors-frontend-proxy-server 180 |
181 |
182 |

Example

183 |

184 | For example you can create a proxy server in React application like this: 185 |

186 | 
187 |             
188 | {
189 |   "name": "application",
190 |   "version": "0.1.0",
191 |   "private": true,
192 |   "proxy": "http://localhost:8080"
193 | }
194 |             
195 |
196 |

197 | See a full example implemented by 198 | 201 | amirhnajfiz cors fix example . 203 |

204 |
205 |
206 |
207 |
208 |

CORS Middleware (Backend)

209 |

210 | When you are developing a Back-end service, you need to set the CORS 211 | headers in requests and responses. To do this, we usually use a 212 | Middleware. Every request needs to pass from this middleware, and it will 213 | be converted to a CORS request. 214 |

215 |
216 |
217 |

Example

218 |

219 | In Fiber framework of Golang, there is middleware called CORS. We 220 | use it in our application instance so all requests will be CORS request. 221 |

222 | 
223 |             
224 | import (
225 |   "github.com/gofiber/fiber/v2"
226 |   "github.com/gofiber/fiber/v2/middleware/cors"
227 | )
228 | 
229 | func NewApp() *fiber.App {
230 |     // create a new app
231 |     app := fiber.New()
232 | 
233 |     // Default config
234 |     app.Use(cors.New())
235 | 
236 |     return app
237 | }
238 |             
239 |
240 |

241 | See the full documentation of 242 | 243 | Fiber CORS middleware . 245 |

246 |
247 |
248 |
249 |

References 📚

250 | 274 |
275 | -------------------------------------------------------------------------------- /content/lectures/k8s/lecture1/CloudNativeGolang.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/k8s/lecture1/CloudNativeGolang.pdf -------------------------------------------------------------------------------- /content/lectures/k8s/lecture2/Containers.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/k8s/lecture2/Containers.pdf -------------------------------------------------------------------------------- /content/lectures/k8s/lecture3/ContainersFromScratch.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/k8s/lecture3/ContainersFromScratch.pdf -------------------------------------------------------------------------------- /content/lectures/k8s/lecture3/create_container.sh: -------------------------------------------------------------------------------- 1 | ## image tar 2 | mount --make-rprivate / 3 | sudo docker export $(docker run -d centos true) -o centos.tar 4 | 5 | mkdir mycontainer 6 | tar -C mycontainer -xf centos.tar 7 | 8 | unshare --mount --uts --ipc --net --pid --fork bash 9 | hostname mohammad 10 | 11 | 12 | mount --bind mycontainers/ 13 | moun --move mycontainers /mycontainers 14 | 15 | 16 | #### Pivot root 17 | cd /mycontainers 18 | mkdir oldroot 19 | pivot_root . oldroot/ 20 | umount -a 21 | unmount -l /oldroot/ # soft removing old mount to clean everything up 22 | mount -t proc none /proc 23 | 24 | 25 | ## ensure you are isolated 26 | exec bash 27 | hostname # uts ns 28 | ps aux # pid ns 29 | ip a # net ns 30 | 31 | -------------------------------------------------------------------------------- /content/lectures/k8s/lecture3/play_with_netns.sh: -------------------------------------------------------------------------------- 1 | ### create network namespaces 2 | ip netns add mohammad 3 | ip netns add parham 4 | ip netns 5 | ip a 6 | ip r 7 | ip -n parham a 8 | ip -n parham r 9 | 10 | ### setup network in a netns 11 | #### 12 | ip link add head1 type veth peer name head2 13 | ip link set head1 netns parham 14 | ip link set head2 netns mohammad 15 | 16 | ip -n parham addr add 192.168.2.1/24 dev head1 17 | ip -n parham link set head1 up 18 | ip -n mohammad addr add 192.168.2.2/24 dev head2 19 | ip -n mohammad link set head2 up 20 | 21 | 22 | ### some checks 23 | ip netns exec parham ping 192.168.2.2 24 | ip netns exec parham arp 25 | arp 26 | 27 | ## cleanup 28 | ip -n parham link del head1 # head2 will be deleted automatically 29 | 30 | ## setup bridge 31 | ip link add my-bridge type bridge 32 | ip link set my-bridge up 33 | 34 | ip link add parham-end type veth peer name parham-br 35 | ip link add mohammad-end type veth peer name mohammad-br 36 | 37 | ip link set parham-end netns parham 38 | ip link set mohammad-end netns mohammad 39 | 40 | ip link set mohammad-br master my-bridge up 41 | ip link set parham-br master my-bridge up 42 | 43 | 44 | ## access outside from inside 45 | iptables -t nat -A POSTROUTING -s 192.168.2.0/24 -j MASQUERADE 46 | 47 | 48 | ## access from outside 49 | iptables -t nat -A PREROUTING --dport 80 --to-destination 192.168.2.2:80 -j DNAT 50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /content/lectures/k8s/lecture4-5/dockerInPractice.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/k8s/lecture4-5/dockerInPractice.pdf -------------------------------------------------------------------------------- /content/lectures/lecture-1/img/1995parham-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-1/img/1995parham-logo.png -------------------------------------------------------------------------------- /content/lectures/lecture-1/img/206.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-1/img/206.png -------------------------------------------------------------------------------- /content/lectures/lecture-1/img/airplane.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-1/img/airplane.png -------------------------------------------------------------------------------- /content/lectures/lecture-1/img/benz.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-1/img/benz.png -------------------------------------------------------------------------------- /content/lectures/lecture-1/img/bernard.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-1/img/bernard.gif -------------------------------------------------------------------------------- /content/lectures/lecture-1/img/megan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-1/img/megan.png -------------------------------------------------------------------------------- /content/lectures/lecture-1/img/peykan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-1/img/peykan.png -------------------------------------------------------------------------------- /content/lectures/lecture-1/img/pride.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-1/img/pride.png -------------------------------------------------------------------------------- /content/lectures/lecture-1/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | index: 1 3 | title: Introduction 4 | topics: 5 | draft: false 6 | --- 7 | 8 |
9 |
10 |

Parham Alvani

11 |
1995parham.github.io
12 | 1995parham-logo 18 |
19 |
20 |

21 |

22 | parham 23 | [dot] 24 | alvani 25 | [at] 26 | gmail 27 | [dot] 28 | com 29 |

30 |
31 |
32 |

No instant messaging

33 |

Email is awesome

34 | 35 |
36 |
37 |
38 |

This Course

39 |
    40 |
  • 41 | Web: the major Internet technology-in-use 42 |
    • 43 |
      44 |
    • What are/were the problems?
      • 45 |
    • How do/did we solve them?
      • 46 |
        47 |
      • Which protocols and languages are used
        • 48 |
      49 |
    50 |
  • Engineer approach
    • 51 |
      52 |
    • Understand existing concepts & technologies
      • 53 |
        54 |
      • In class
        • 55 |
      56 |
    • Try examples & sample projects
      • 57 |
        58 |
      • By youself
        • 59 |
      60 |
    61 |
62 |
63 |
64 |

The World-Wide Web

65 |
    66 |
  • Original idea (Tim Berners-Lee, 1989)
    • 67 |
      68 |
    • Public information sharing on Internet
      • 69 |
    • Hypertext
      • 70 |
        71 |
      • 72 | Documents are text which can be displayed/converted to desired output 73 |
        • 74 |
      • Documents can be linked to each others: Web!
        • 75 |
      76 |
    77 |
  • WWW: A system of interlinked hypertext
    • 78 |
      79 |
    • Now, much more complex/interesting applications
      • 80 |
    81 |
82 |
83 |
84 |

How Does WWW Work?

85 |
    86 |
  • Client-Server mechanism
    • 87 |
  • Web servers: Process client’s requests
    • 88 |
      89 |
    • File (text, image, video, ...) retrieval requests
      • 90 |
    • Computation/Processing (DB lookup, transaction, ...) requests
      • 91 |
    92 |
  • Web clients: Send the requests
    • 93 |
      94 |
    • 95 | Browser: Interacts with client, Requests for server, Processes and 96 | displays response (rendering) 97 |
      • 98 |
    • Other applications
      • 99 |
        100 |
      • Search engines crawlers
        • 101 |
      • Use server as a processing element (distributed computing)
        • 102 |
      • ...
        • 103 |
      104 |
    105 |
106 |
107 |
108 |

What Do We Want to Learn?

109 |
    110 |
  • How does Gmail work?
    • 111 |
  • Login (keep me signed in)
    • 112 |
  • Show emails
    • 113 |
  • Read/Delete emails
    • 114 |
  • Refresh the list of emails
    • 115 |
  • Interactive menus
    • 116 |
  • Per user customizations (themes)
    • 117 |
  • ...
    • 118 |
119 |
120 |
121 |

10 Engineering Questions

122 |
    123 |
  • 124 | Q1) How do web server and client browser 125 | talk to each other? 126 |
    • 127 |
  • 128 | Q2) How is a web page organized 129 | (components)? 130 |
    • 131 |
  • 132 | Q3) How is presentation of web page 133 | described? 134 |
    • 135 |
  • 136 | Q4) How does web page interact with users? 137 |
    • 138 |
  • 139 | Q5) How to update a portion of web page? 140 |
    • 141 |
  • 142 | Q6) How is transferred data between server 143 | & client encoded? 144 |
    • 145 |
  • 146 | Q7) How does server process client’s 147 | requests? 148 |
    • 149 |
  • 150 | Q8) How are complex/big web applications 151 | developed? 152 |
    • 153 |
  • Q9) How does Gmail offline work?
    • 154 |
  • 155 | Q10) How can other applications use Gmail? 156 |
    • 157 |
158 |
159 |
160 |

WWW: From Old to Now

161 |
    162 |
  • Static Web Pages
    • 163 |
  • Client requests a document from server
    • 164 |
      165 |
    • A communication protocol: HTTP
      • 166 |
    167 |
  • How to display the document in browser?
    • 168 |
      169 |
    • 170 | Document structure definition language: 171 | HTML 172 |
      • 173 |
    • Representation of document: CSS
      • 174 |
    • 175 | Later, very later, some advance features: 176 | HTML5 177 |
      • 178 |
    179 |
180 | 181 |
182 |
183 |

WWW: From Old to Now

184 |
    185 |
  • 186 | Interactive and 187 | Dynamic web page 188 |
    • 189 |
  • Needs to interact with user (e.g., event handling in web pages)
    • 190 |
      191 |
    • 192 | A programming language in browser: 193 | JavaScript 194 |
      • 195 |
    196 |
  • Dynamic data from server (e.g., search result)
    • 197 |
      198 |
    • 199 | A programming language in server: Go 200 |
      • 201 |
    202 |
  • Interactive & Dynamic web page
    • 203 |
      204 |
    • 205 | A communication mechanism between web page and server: 206 | JavaScript & 207 | JSON 208 |
      • 209 |
    210 |
211 |
212 | 219 |
228 | 229 |
230 |
231 |
232 |
233 |

WWW: From Old to Now

234 |
    235 |
  • Complex processing in server side
    • 236 |
      237 |
    • So many common requirements
      • 238 |
        239 |
      • Threading, Concurrency, Security, etc.
        • 240 |
      241 |
    • Needs an application development framework
      • 242 |
        243 |
      • Web Applications Architectures
        • 244 |
      245 |
    246 |
  • Distributed computing over web
    • 247 |
      248 |
    • Machine-to-Machine communication
      • 249 |
        250 |
      • Function invocation over web
        • 251 |
      252 |
    • Needs a common protocols/API (e.g., Facebook API)
      • 253 |
        254 |
      • Web services
        • 255 |
      256 |
    257 |
258 | 
Waiting...
259 | 268 |
269 |
270 |

What we are going to learn at classes

271 |
    272 |
  • Introduction
    • 273 |
  • HTTP
    • 274 |
  • HTML
    • 275 |
  • CSS
    • 276 |
  • JavaScript
    • 277 |
  • JSON
    • 278 |
  • Golang
    • 279 |
  • Web Applications
    • 280 |
  • Virtualization
    • 281 | 282 |
283 |
284 |
285 |

What we are going to learn at TA's classes

286 |
    287 |
  • Git
    • 288 |
  • HTTP Client
    • 289 |
  • HTML/CSS
    • 290 |
  • JavaScript/React
    • 291 |
  • 292 | Backend Development 293 |
    • 294 |
  • Docker
    • 295 |
296 |
297 |
298 |

What This Course Is Not

299 |
    300 |
  • XYZ programming language course for web
    • 301 |
      302 |
    • Many technologies for web development
      • 303 |
        304 |
      • HTML, CSS, XML, etc.
        • 305 |
      • Many programming languages: PHP, JS, Golang, etc.
        • 306 |
      307 |
    • You are already programmer
      • 308 |
        309 |
      • You know most programming concepts
        • 310 |
      • You need to learn new syntax & new features
        • 311 |
      312 |
    313 |
  • In depth & in detail technology review
    • 314 |
      315 |
    • There are so many technologies
      • 316 |
    317 |
318 |
319 |
320 |

Course Advantages

321 |
    322 |
  • 323 | We study and understand technologies that are used in real life every day 324 |
    • 325 |
      326 |
    • We don’t discuss about pure scientific problems
      • 327 |
    328 |
  • An engineering course
    • 329 |
      330 |
    • These technologies are used in industry
      • 331 |
    • Better resume: HTML, JavaScript, JSON, CSS, Golang, React, ...
      • 332 |
    • More job opportunities (more money 🤑)
      • 333 |
    334 |
  • (Usually) Technologies are easier that sciences
    • 335 |
      336 |
    • No difficult concepts
      • 337 |
    • High course grade if you want 🤓
      • 338 |
    339 |
340 |
341 |
342 |

Course Possible Disadvantages

343 |
    344 |
  • We study technologies
    • 345 |
      346 |
    • Technologies have limited life time
      • 347 |
    • Our knowledge will expire
      • 348 |
        349 |
      • 350 | Some programming languages & technologies may not be used 10 years 351 | later 352 |
        • 353 |
      354 |
    • 355 | However, most discussed technologies in this course (hopefully) will 356 | have very long life time 357 |
      • 358 |
    359 |
  • Web development needs many technologies
    • 360 |
      361 |
    • We need to learn many things
      • 362 |
    363 |
364 |
365 |
366 |

Assumptions on your knowledge & skills

367 |
    368 |
  • Basic networking concepts
    • 369 |
      370 |
    • Protocol, Port, Header, ...
      • 371 |
    372 |
  • Programming
    • 373 |
      374 |
    • Java/C
      • 375 |
    376 |
  • Database
    • 377 |
      378 |
    • SQL
      • 379 |
    380 |
  • Love to program
    • 381 |
      382 |
    • At least, you don’t hate 🙈
      • 383 |
    384 |
385 |
386 |
387 |

Course Policies

388 |
    389 |
  • There is no grading by TAs (AUT University Policy)
    • 390 |
  • 391 | Course homepage 394 |
    • 395 |
      396 |
    • Course slides, Announcements, Grades, etc.
      • 397 |
    398 |
  • Grading
    • 399 |
      400 |
    • Midterm + Final + Assignments
      • 401 |
    402 |
403 |
404 |
405 |

Course Policies: Grading 😥

406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 | 415 | 416 | 417 | 418 | 419 | 420 | 421 | 422 | 429 | 430 | 431 | 432 | 433 | 434 |
Minimum requirement
Midterm35%> 40%
Final35%> 40%
Homework30%- Deadlines wont be extended
435 |
436 |
437 |

Course Policies: Grading 😊

438 |
    439 | 456 |
457 |
458 |
459 |

Course Policies (Cont.)

460 |
    461 |
  • If this course is an optional course for you
    • 462 |
      463 |
    • Please don’t take it if
      • 464 |
        465 |
      • Your programming skill is poor
        • 466 |
      • You assume that it is passed without doing anything
        • 467 |
      • You know the answers of almost the questions
        • 468 |
          469 |
        • But you are so busy to do homework
          • 470 |
        471 |
      472 |
    • You need to allocate enough time for top grades
      • 473 |
    474 |
  • If this course is mandatory
    • 475 |
      476 |
    • Note that course topics is a bit wide
      • 477 |
    478 |
479 |
480 |
481 |

Web Development: Lectures

482 | pekkan 483 | pride 484 |
485 |
486 |

Web Development: Homework

487 | megan 488 | 206 489 |
490 |
491 |

Web Development: Industry

492 | benz 493 |
494 |
495 |

Web Development: Google, Facebook, ...

496 | airplane 497 |
498 |
499 |

The main goal of the course

500 |

Learn and Enjoy Web Development

501 |
502 | -------------------------------------------------------------------------------- /content/lectures/lecture-10/img/docker-growth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-10/img/docker-growth.png -------------------------------------------------------------------------------- /content/lectures/lecture-10/img/image-layers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-10/img/image-layers.png -------------------------------------------------------------------------------- /content/lectures/lecture-10/img/overview-container.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-10/img/overview-container.png -------------------------------------------------------------------------------- /content/lectures/lecture-10/img/overview-vm-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-10/img/overview-vm-1.png -------------------------------------------------------------------------------- /content/lectures/lecture-10/img/overview-vm-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-10/img/overview-vm-2.png -------------------------------------------------------------------------------- /content/lectures/lecture-10/img/xaas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-10/img/xaas.png -------------------------------------------------------------------------------- /content/lectures/lecture-10/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | index: 10 3 | title: Virtualization 4 | topics: 5 | - IaaS, PaaS, SaaS 6 | - Virtual Machine 7 | - Containers 8 | --- 9 | 10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |

Cloud Computing

18 |

19 | Cloud computing is a model for enabling ubiquitous, convenient, on-demand network access 20 | to a shared pool of configurable computing resources (networks, virtual machines, storage, applications, and services) 21 | that can be rapidly provision and released with minimal management effort or service provider interaction. 22 |

23 |
24 |
25 |
26 |

IaaS

27 |

28 | Infrastructure as a service (IaaS) refers to online services that 29 | abstract 30 | the user from the details of 31 | infrastructure like physical computing 32 | resources, location, data partitioning, scaling, security, backup etc. 33 |

34 |
35 |
36 |
  • Example providers:
    • 37 |
      38 |
    • AWS Amazon
      • 39 |
    • Virtual Box
      • 40 |
    • VMware
      • 41 |
    42 |
    43 |
    44 |
    45 |

    PaaS

    46 |

    47 | Platform as a service (PaaS) or application platform as a service (aPaaS) is 48 | a category of cloud computing services that 49 | provides a platform allowing customers to 50 | develop, 51 | run, and 52 | manage applications without the complexity 53 | of building and maintaining the infrastructure typically associated with 54 | developing and launching an app. 55 |

    56 |
    57 |
    58 |

    SaaS

    59 |

    60 | SaaS applications are sometimes called 61 | Web-based software, on-demand software, or hosted 62 | software. Whatever the name, SaaS applications 63 | run on a SaaS provider’s servers. The 64 | provider manages access to the application, including security, 65 | availability, and performance. 66 |

    67 |
    68 |
    69 | xaas 70 |
    71 |
    72 |
    73 |
    74 |
    75 |

    76 | In computing, a virtual machine (VM) is an emulation of a computer system. 77 |

    78 |
    79 |
    80 | overview-vm 81 |
    82 |
    83 | overview-vm 84 |
    85 |
    86 |

    Virtualization Techniques

    87 |
      88 |
    • 89 | The VM-based approach virtualizes the complete OS. The 90 | abstraction it presents to the VM are virtual devices like virtual disk, 91 | virtual CPUs, and virtual NICs. With virtual machines, multiple OSes can 92 | share the same hardware resources, with virtualized representations of 93 | each of the resources available to the VM. 94 |
      • 95 |
    • 96 | Container-based form of virtualization doesn't abstract 97 | the hardware but uses techniques within the Linux kernel to isolate access 98 | paths for different resources. It carves out a logical boundary within the 99 | same operating system. 100 |
      • 101 |
    102 |
    103 |
    104 |

    Hypervisors

    105 |

    A special piece of software is used to virtualize the OS.

    106 |
    107 |
    108 |
    109 |

    CPU Virtualization

    110 |
      111 |
    • 112 | Binary Translation in the Case of Full Virtualization: 113 | In this case, the guest OS is used without any changes. The instructions 114 | are trapped and emulated for the target environment. This cause a lot of 115 | performance overhead, as lots of instructions have to be trapped into 116 | the host/hypervisor and emulated. 117 |
      • 118 |
    • 119 | To avoid the performance problems related to binary translation when 120 | using full virtulization, we use 121 | paravirtualization wherein the guest knows that it is 122 | running in a virtualized environment and its interaction with the host 123 | is optimized to avoid excessive trapping. 124 |
      • 125 |
    126 |
    127 |
    128 |

    CPU Virtualization (Contd)

    129 |
      130 |
    • 131 | In 2005, x86 finally become virtualizable. Advantages of 132 | hardware-assisted virtulization 133 | are two fold: 134 |
        135 |
      • No binary translation
        • 136 |
      • No OS modification
        • 137 |
      138 |
      • 139 |
    140 |
    141 |
    142 |

    IO Virtualization

    143 |
      144 |
    • 145 | With full virtualization, the guest does not know it's 146 | running on a hypervisor and the guest OS doesn't need any changes to run 147 | on a hypervisor. 148 |
      • 149 |
    • 150 | In paravirtualization case, the guest OS is made aware 151 | that it's running in a vritualized environment and special drivers are 152 | loaded into the guest to take care of the I/O. 153 |
      • 154 |
    155 |
    156 |
    157 |
    158 |

    The Quick Emulator (QEMU)

    159 |
      160 |
    • The QEMU runs as a user process and handles the KVM kernel module.
      • 161 |
    • 162 | It uses the vt-x extensions to provide the guest with an 163 | isolated environment from a memory and cpu perspective. 164 |
      • 165 |
    • 166 | The QEMU also dedicates a separate thread for I/O. This thread runs an 167 | event loop and is based on the non-blocking mechanism. 168 |
      • 169 |
    • The QEMU can use paravirtualized drivers.
      • 170 |
    171 |
    172 |
    173 |
    174 |
    175 |
    176 |

    Containers

    177 |

    178 | Containers are an abstraction at the app layer that packages code and 179 | dependencies together. Multiple containers can run on the same machine and 180 | share the OS kernel with other containers, each running as isolated 181 | processes in user space. 182 |

    183 |
    184 |
    185 | docker-growth 186 |
    187 |
    188 | overview-container 189 |
    190 |
    191 |

    Containers vs VMs (Pros)

    192 |
      193 |
    • Lightweight (MBs vs GBs)
      • 194 |
    • Easier Deployment
      • 195 |
    • Easier Portability
      • 196 |
    197 |
    198 |
    199 |

    Containers vs VMs (Cons)

    200 |
      201 |
    • Better control in virtual machines
      • 202 |
    • Have been tested over the years
      • 203 |
    204 |
    205 |
    206 | Linux containers are made of three Linux kernel primitives: 207 |
      208 |
    • Linux namespaces
      • 209 |
    • cgroups
      • 210 |
    • Layered file systems
      • 211 |
    212 |
    213 |
    214 |

    Namespace

    215 |
      216 |
    • 217 | A namespace is a logical isolation within the Linux kernel. 218 |
      • 219 |
    • A namespace controls visibility within the kernel.
      • 220 |
    • All controls are defined at the process level.
      • 221 |
    222 |
    223 |
    224 |

    Container Engines

    225 | 230 |
    231 |
    232 |

    403 Forbidden

    233 |

    You cannot access docker from Iran

    234 |
    235 |
    236 |

    So What?!

    237 |
      238 |
    • HTTP Proxy
      • 239 |
    • Shecan
      • 240 |
    • etc.
      • 241 |
    242 |
    243 |
    244 |

    Hello World :)

    245 | 
    
246 | docker run hello-world
247 |
    248 |
    249 |
    250 |

    Days before Docker

    251 |
      252 |
    • Installing dependencies of your app on host machine
      • 253 |
    • Creates conflict with previous installation
      • 254 |
    • Separate Environment - Separate Runtime
      • 255 |
    • Code that runs on one system and doesn’t on the other
      • 256 |
    257 |
    258 |
    259 |

    Days after Docker

    260 |
      261 |
    • Dependencies and runtime environment are all in the same place
      • 262 |
    • No need to install any dependency 💃
      • 263 |
    • Ensuring your app and your dependencies travel together
      • 264 |
    265 |
    266 |
    267 |

    Docker Image

    268 |

    269 | An image is a lightweight, stand-alone, executable package that includes 270 | everything needed to run a piece of software, including the code, a runtime, 271 | libraries, environment variables, and config files. 272 |

    273 |
    274 |
    275 |

    Docker Container

    276 |

    277 | A container is a runtime instance of an image – what the image becomes in 278 | memory when actually executed. It runs completely isolated from the host 279 | environment by default, only accessing host files and ports if configured to 280 | do so. 281 |

    282 |
    283 |
    284 |

    Dockerfile

    285 |

    286 | A Dockerfile is a text document that contains all the commands a user could 287 | call on the command line to assemble an image. 288 |

    289 |
    290 |
    291 | 
    
292 | # Format: FROM    repository[:version]
293 | FROM       ubuntu:latest
294 | # Installation:
295 | # Import MongoDB public GPG key AND create a MongoDB list file
296 | RUN apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv EA312927
297 | RUN apt-get install -y --no-install-recommends software-properties-common
298 | RUN echo "deb http://repo.mongodb.org/apt/ubuntu $(cat /etc/lsb-release | grep DISTRIB_CODENAME | cut -d= -f2)/mongodb-org/3.2 multiverse" | tee /etc/apt/sources.list.d/mongodb-org-3.2.list
299 | 
300 | # Update apt-get sources AND install MongoDB
301 | RUN apt-get update && apt-get install -y mongodb-org
302 | # Create the MongoDB data directory
303 | RUN mkdir -p /data/db
304 | # Expose port 27017 from the container to the host
305 | EXPOSE 27017
306 | 
307 | # Set usr/bin/mongod as the dockerized entry-point application
308 | ENTRYPOINT ["/usr/bin/mongod"]
309 |
    310 |
    311 |
    312 |

    Image Layers

    313 | image-layers 314 |
    315 |
    316 |

    Docker CLI (Cheatsheet)

    317 | 
    
318 | docker build -t friendlyname .        # Create image using this directory's Dockerfile
319 | docker run -p 4000:80 friendlyname    # Run "friendlyname" mapping port 4000 to 80
320 | docker run -d -p 4000:80 friendlyname # Same thing, but in detached mode
321 | docker ps                             # See a list of all running containers
322 | docker stop hash                      # Gracefully stop the specified container
323 | docker ps -a                          # See a list of all containers, even the ones not running
324 | docker kill hash                      # Force shutdown of the specified container
325 | docker rm hash                        # Remove the specified container from this machine
326 | docker rm $(docker ps -a -q)          # Remove all containers from this machine
327 | docker images -a                      # Show all images on this machine
328 | docker rmi imagename                  # Remove the specified image from this machine
329 | docker rmi $(docker images -q)        # Remove all images from this machine
330 |
    331 |
    332 |
    333 |

    Docker Volumes

    334 |
      335 |
    • Data volumes can be shared and reused among containers.
      • 336 |
    • Changes to a data volume are made directly.
      • 337 |
    • 338 | Changes to a data volume will not be included when you update an image. 339 |
      • 340 |
    • Data volumes persist even if the container itself is deleted.
      • 341 |
    342 |
    343 |
    344 |

    Docker Compose

    345 |

    346 | Compose is a tool for defining and running multi-container Docker 347 | applications. With Compose, you use a Compose file to configure your 348 | application’s services. 349 |

    350 |
    351 |
    352 |

    Docker Compose

    353 | 
    
354 | version: '3'
355 | 
356 | services:
357 |    db:
358 |      image: mysql:latest
359 |      volumes:
360 |        - db_data:/var/lib/mysql
361 |      restart: always
362 |      environment:
363 |        MYSQL_ROOT_PASSWORD: somewordpress
364 |        MYSQL_DATABASE: wordpress
365 |        MYSQL_USER: wordpress
366 |        MYSQL_PASSWORD: wordpress
367 |   wordpress:
368 |      depends_on:
369 |        - db
370 |      image: wordpress:latest
371 |      ports:
372 |        - "8000:80"
373 |      restart: always
374 |      environment:
375 |        WORDPRESS_DB_HOST: db:3306
376 |        WORDPRESS_DB_USER: wordpress
377 |        WORDPRESS_DB_PASSWORD: wordpress
378 | volumes:
379 |     db_data:
380 |
    381 |
    382 |
    383 |

    References 📚

    384 |
      385 |
    • 386 | Iman Tabrizian's Virtualization 387 | Workshop, 9th Linux Festival 388 |
      • 389 |
    390 |
    391 | -------------------------------------------------------------------------------- /content/lectures/lecture-2/diag/reverse-proxy.drawio: -------------------------------------------------------------------------------- 1 | 7Vptc5s4EP41/hgGEG/+aDt1+yG5801upk2/CZBBF4E4IWJ8v/4kXmxAeHBztpv26hk70goJ9Dy7q90lM7BKyo8MZvEjDRGZmXpYzsD9zDQNw/HEHynZ1xJLB7UgYjhsLjoKnvA/qBHqjbTAIcp7F3JKCcdZXxjQNEUB78kgY3TXv2xLSf+uGYyQIngKIFGln3HI41rq2fpR/gnhKG7vbOjNSALbixtBHsOQ7joi8GEGVoxSXreScoWIBK/FpZ63PjF6eDCGUn7OhK+ls/ljky7Ra8b/Qn8u9y5Hd80qr5AUzYabh+X7FoFdjDl6ymAg+zvB8gwsY54Q0TNEE+ZZjfsWl0jcarnFhKwooayaDrbbrRkEQp5zRl9QZyR0fMd2xIi6k/axEOOo7IianX1ENEGc7cUl7ajToLwf9Hcd0hpR3OGrlcFGTaLDykckRaMB8xuANaeBZbRIQwnZvS5AmIA5xEzAjGkq+jkt5J4UpL0AjSPte7Zl65dB2rKnkZ6PIA2Ma0ENflIdNt3vrMPW1YENbeSF1hiwnukD50rAgvl3BtZWgF3BIEYKuuLIyGQz2BMsXAUD037Cr53Kg38QwOAlqlzN7wUXy6BGntdHrWGrrCBD8OKOsTJ3XAAvxIrl2D1WbENlxbklK47CisAFaQHCXIOF+AYaZgpHKA0XMs6QNBGY5zjoEyIAYvsv3c6z9PgacEAruC+bM6Du7bu9DWJYbA+xVlhi/qVawG56z+3aon1cSXbahU6SJQ4SFqDpU4xDFiE+HUagsBdMqdR3qLVHqG1lDBHI8Ws/BBvju7nDhmKxs6Nm6QN7H6pMve9mVjdkGi40OOsAGCxUA6MsVKnfYdtv10j3phppT+nju1Q98L5UD/Q1xjJ0be68TfsOmUMbD3hzbd79WDdVRk9RxkxAtaUs+aWQI1HTe1HIoQsbhuFna+NwIfO2vtBQU9UIcrSDe0X9HMJl4CNbkWwZnq2JzFzzPM3wHEU9RbzCB2ErwZFMtAKhJPLkXcqoBgeQLJqBBIehnL5kSMRR0K+WkuqVye1XgNjLmX0v1yo4bWMtOYFy2KRxMr6/TCQ1cDpAVyMpA4zlZNcKpYwz0t+zvULHETz3/MC4VzgJ6KTlmu/Kct2h+9d/0CjGUBP0RcCpek606U6RkPqCo+E9QB+RjTCkxnZ8yjlNRiyT00FCROusZ3WoD17I6FxrUAcZydbHbM65ms2dka7/srlvsznLeqPNucOSg31jm1NLDD+hzVkjJYPb2pxaM9jFiCE5Lxc/Y+kaWKsRisDX1CfCFPE4OMtl0HEoCxFahNMloWHNDSJvO1rMdAIP+dvLUGW7w9NLYcq0RqgyrseVmk33uDqVzfxP+Bo4LGukRnprwubTB1oLLU6q93jTvovIgeWhJtov8ovPSfemlLKrWy5aqd5KRDvmXL6dXMjtm+siIxSG2g6/4ASFGGqURUIs+5nsi3ZAk4SmQgnXsgd98fMJZoyW+ztCI6plaXShTGHeZ9mxNVuh2XM1F4w40fl/5/nxsQSf7c3fVCexFafZQ14Y57yD/AFozhF6qcgSZIpudZFk9DfxTSOclhWVd+u1I0zNXLjOXXdGj2KFzxHWT1M8KH6OhKWuo83Ni5ySont8gV3HLsd/AwAf/gU= -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/3xx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/3xx.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/base64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/base64.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/basic-auth-in-action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/basic-auth-in-action.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/cookies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/cookies.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/csrf-attack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/csrf-attack.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/http-cache-types.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/http-cache-types.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/http-transactions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/http-transactions.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/http2-transactions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/http2-transactions.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/message-structure.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/message-structure.jpg -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/moodle-cookies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/moodle-cookies.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/moodle-post.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/moodle-post.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/moodle-request.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/moodle-request.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/proxy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/proxy.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/reverse-proxy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/reverse-proxy.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/ssl.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/ssl.jpg -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/staleness.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/staleness.png -------------------------------------------------------------------------------- /content/lectures/lecture-2/img/sub-domain-cookies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-2/img/sub-domain-cookies.png -------------------------------------------------------------------------------- /content/lectures/lecture-3/img/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-3/img/example.png -------------------------------------------------------------------------------- /content/lectures/lecture-3/img/html-tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-3/img/html-tag.png -------------------------------------------------------------------------------- /content/lectures/lecture-3/img/nested.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-3/img/nested.png -------------------------------------------------------------------------------- /content/lectures/lecture-3/img/semantic-tags.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-3/img/semantic-tags.png -------------------------------------------------------------------------------- /content/lectures/lecture-3/img/summary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-3/img/summary.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/diag/cascading.drawio: -------------------------------------------------------------------------------- 1 | 3VjRkpowFP0aH9vBhET2sau2OtP2oTud7u5LJ5KL0EbCxKDQr2/QIFDUsTM46M74wD33XkJOzgmRAR6vsk+KJeEXyUEMkMOzAZ4MEBq6CA2Kn8PzPeJhCyxVxG1RBTxFf8CCjkXTiMO6UailFDpKmqAv4xh83cCYUnLbLAukaI6asCW0gCefiTb6I+I6tLMgToXPIFqG5chDx2ZWrCy2wDpkXG5rEJ4O8FhJqfdXq2wMoiCv5GXf9/FE9vBgCmJ9SUP6QThuOvspv77GJJnNt8/jb++8/V02TKR2wvZhdV4yANwQYkOpdCiXMmZiWqGPSqYxh2IYx0RVzWcpEwMODfgLtM7t6rJUSwOFeiVsdj9mMdDJuVloLVPlw5kJlRphagn6TB06rICRLsgVaJWbPgWC6WjTfA5mNbQ81FU0mwvL9H+wPmyx/lgoFZQBJxCwVOjWMjRJ3oaRhqeE7bjYGus1CQ0iIcZSSLXrxZyBF/gGX2slf0MtQ30PFsFhCTagNGTnF6FNmm1wrdDz0sE23la+GZZmCGueoc61aHb7EDNkkX4u2t8TG73UMpPM3nkX5GUQm/nWmorwpZ6r2nZR2dehcdCFxsF9Gge1jDPNNCizPKWnOnJMEAD1jzqGjx4WjtONY5Bzc5Yh92KZDqWPL5S+26f08Wnpx/co/Yem9FH/0qdv7SzkXqhr0qeu3Rbr8/hKW3qATuiaLiih3egaU9LQNe5f16O3pmtyoa5pn7omp3Xd5v/2de2S5n7t9q9r716OKjdwuqcXWmbUp2XaL+B5LKIYOrULJ+Bx95hdPLTAtCO7kH/+DJPe7dJ+C3zffXDocifyfDi+Ey08UmwgnVBLUZNaekVqTVh9oNvlap858fQv -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/15-css-layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/15-css-layout.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/attribute-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/attribute-selector.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/background-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/background-image.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/box-model.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/box-model.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/cascading-example-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/cascading-example-1.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/cascading-example-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/cascading-example-2.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/cascading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/cascading.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/child-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/child-selector.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/class-element-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/class-element-selector.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/class-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/class-selector.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/css-structure.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/css-structure.gif -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/descendant-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/descendant-selector.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/div-span.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/div-span.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/element-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/element-selector.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/flex-align-items.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/flex-align-items.webp -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/flex-axises.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/flex-axises.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/flex-container-and-items.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/flex-container-and-items.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/flex-justify-content-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/flex-justify-content-2.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/flex-justify-content.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/flex-justify-content.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/flex-vs-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/flex-vs-grid.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/id-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/id-selector.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/important-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/important-example.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/linux.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/linux.jpg -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/media-css-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/media-css-1.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/media-css-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/media-css-2.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/media-css-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/media-css-3.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/multiple-class-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/multiple-class-selector.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/overriding-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/overriding-example.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/peseudo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/peseudo.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/responsive-design-approaches.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/responsive-design-approaches.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/responsive-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/responsive-design.jpg -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/sibling-selector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/sibling-selector.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/specifishity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/specifishity.png -------------------------------------------------------------------------------- /content/lectures/lecture-4/img/vertical-margin-collapse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-4/img/vertical-margin-collapse.png -------------------------------------------------------------------------------- /content/lectures/lecture-42/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | index: 42 3 | title: Presentations 4 | topics: 5 | - Introduction 6 | - Topics 7 | --- 8 | 9 |
    10 |
    11 |
    12 |
    13 |
    14 |
    15 |
    16 |

    Introduction

    17 |
      18 |
    • Presentations about the web programming topics includes:
      • 19 |
        20 |
      • Frontend Technologies and Frameworks
        • 21 |
      • Backend Technologies and Frameworks
        • 22 |
      • Tools
        • 23 |
      • etc.
        • 24 |
      25 |
    • The group with 2 members is recommended
      • 26 |
    • The time frame is about 30 to 45 minutes
      • 27 |
    • 28 | Presentations have at most 1 point extra that you can use on your final 29 | grade. 30 |
      • 31 |
    32 |
    33 |
    34 |

    Registration

    35 |

    Send an email to:

    36 |

    37 | Parham 38 | [dot] 39 | Alvani 40 | [at] 41 | gmail 42 | [dot] 43 | com 44 |

    45 |

    including:

    46 |
      47 |
    • Member names and their student ID
      • 48 |
    • Topic
      • 49 |
    • Recommended Date
      • 50 |
    51 |
    52 |
    53 |
    54 |
    55 |
    56 |

    57 | These are some topics but you are 58 | not limited to them. 59 |

    60 |
      61 |
    • Web Assembly
      • 62 |
    • React Hooks
      • 63 |
    • Micro Frontend
      • 64 |
    • Monitoring with Prometheus
      • 65 |
    • Tracing with Jeager
      • 66 |
    • Elastic, Logstash and Kibana (ELK)
      • 67 |
    • gRPC vs ReST
      • 68 |
    • API Design
      • 69 |
    • Go Project Structure
      • 70 |
    • Kubernetes, Why?
      • 71 |
    • Data Pipelines
      • 72 |
    • Message Brokers
      • 73 |
    • CQRS Pattern
      • 74 |
    75 |
    76 |
    77 |
    78 |

    AUT Presentations

    79 |

    Fall 2021

    80 |
    81 |
    82 |

    React

    83 |
      84 |
    • Shakiba Amirshahi
      • 85 |
    • Narges Sodeifi
      • 86 |
    • 6 Day 1400
      • 87 |
    88 |
    89 |
    90 |

    NodeJS/JS

    91 |
      92 |
    • Delaram Rajaei
      • 93 |
    • Hamid Nemati
      • 94 |
    • 6 Day 1400
      • 95 |
    96 |
    97 |
    98 |

    Golang Generics

    99 |
      100 |
    • Somayeh Rezaie
      • 101 |
    • 6 Day 1400
      • 102 |
    103 |
    104 |
    105 |

    GraphQL

    106 |
      107 |
    • Mahvash Siavashpour
      • 108 |
    • Mohammad Java Ardestani
      • 109 |
    • 6 Day 1400
      • 110 |
    111 |
    112 |
    113 |

    MongoDB

    114 |
      115 |
    • Armin Zolfaghari Daryani
      • 116 |
    • Mohammad Hossein Lookzadeh
      • 117 |
    • 6 Day 1400
      • 118 |
    119 |
    120 |
    121 |

    CSS (transform, animation, transition)

    122 |
      123 |
    • Negin Sobhani
      • 124 |
    • Amirhossein Alibakhshi
      • 125 |
    • 4 Day 1400
      • 126 |
    127 |
    128 |
    129 |

    130 | html semantics, microData, css complex selectors and detailed positioning 131 |

    132 |
      133 |
    • Maryam Alikarami
      • 134 |
    • Elham Razi
      • 135 |
    • 4 Day 1400
      • 136 |
    137 |
    138 |
    139 |
    140 |
    141 |

    SBU Presentations

    142 |

    Spring 2021

    143 |
    144 |
    145 |

    Web Assembly [Done]

    146 |
      147 |
    • Mohammad Hashemi - 97243073
      • 148 |
    • Narges Ghasemi - 97243050
      • 149 |
    • 2 Khordad 1400
      • 150 |
    151 |
    152 |
    153 |

    TypeScript [Done]

    154 |
      155 |
    • Amir Masoud Shaker - 97243081
      • 156 |
    • Mohammad Mehdi Peyravi - 97243077
      • 157 |
    • 28 Ordibehesht 1400
      • 158 |
    159 |
    160 |
    161 |

    PWA [Done]

    162 |
      163 |
    • علیرض چقامیرزایی - 97243017
      • 164 |
    • کیمیا ایمنی - 97243006
      • 165 |
    • 11 Khordad 1400
      • 166 |
    167 |
    168 |
    169 |

    Safety [Done]

    170 |
      171 |
    • سید حمید منتظری - 96243063
      • 172 |
    • هانیه مهدوی - 96243067
      • 173 |
    • 4 Khordad 1400
      • 174 |
    175 |
    176 |
    177 |

    Web 3.0 [Done - Recoreded]

    178 |
      179 |
    • دانیال عظیمی
      • 180 |
    • علی شکری
      • 181 |
    • 2 Khordad 1400
      • 182 |
    183 |
    184 |
    185 |

    Apache Thrift [Done]

    186 |
      187 |
    • امیر حلاجی بیدگلی - 97243023
      • 188 |
    • علیرضا محمدی - 97243061
      • 189 |
    • 9 Khordad 1400
      • 190 |
    191 |
    192 |
    193 |

    State Management [Done]

    194 |
      195 |
    • Ali Moghimi - 96243085
      • 196 |
    • Alireza Rashidi - 96243097
      • 197 |
    • 4 Khordad 1400
      • 198 |
    199 |
    200 | 217 |
    218 |

    Data Pipelines [Done]

    219 |
      220 |
    • فرزان ممیزی - 96243086
      • 221 |
    • محمد موحدنیا - 96243065
      • 222 |
    • 4 Khordad 1400
      • 223 |
    224 |
    225 |
    226 |

    Elasticsearch [Done - Recorded]

    227 |
      228 |
    • محمدرضا صادقی - 97243044
      • 229 |
    • محمدرضا پاکزادیان- 97243014
      • 230 |
    • 9 Khordad 1400
      • 231 |
    232 |
    233 |
    234 |

    Redux [Done]

    235 |
      236 |
    • کیان جلیلیان - 97243016
      • 237 |
    • سید احسان سجادی - 97243038
      • 238 |
    • 4 Khordad 1400
      • 239 |
    240 |
    241 | 250 |
    251 |

    gRPC vs ReST [Done]

    252 |
      253 |
    • Dorreen Rostami - 97243034
      • 254 |
    • Kimia Sedighi - 97243046
      • 255 |
    • 11 Khordad 1400
      • 256 |
    257 |
    258 |
    259 |

    Cloud and virtualization [Done - Recorded]

    260 |
      261 |
    • کامیاب عابدی
      • 262 |
    • محمدرضا نظری
      • 263 |
    • علی بهلولی
      • 264 |
    • 11 Khordad 1400
      • 265 |
    266 |
    267 |
    268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 |
    -S1S2S3S4
    26 Ord----
    28 OrdTypeScript---
    2 KhoWeb 3.0Web Assembly--
    4 KhoState ManagementData PipelinesReduxSafety
    9 KhoApache ThriftMessage BrokersElasticsearchKubernetes-
    11 KhoPWACQRSgRPC vs ReSTCloud and virtualization
    322 |
    323 |
    324 |
    325 |
    326 |

    AUT Presentations

    327 |

    Spring 2021

    328 |
    329 |
    330 |

    JWT [Done]

    331 |
      332 |
    • Mohamad Chaman-Motlagh
      • 333 |
    • 3 Khordad 1400
      • 334 |
    335 |
    336 |
    337 |

    Golang Project Structure + Messaging Systems [Done]

    338 |
      339 |
    • شیرین عبادی - 9734016
      • 340 |
    • سامان حسینی - 9731079
      • 341 |
    • 10 Khordad 1400
      • 342 |
    343 |
    344 |
    345 |

    WebRTC [Done]

    346 |
      347 |
    • Mohammad Fatemi
      • 348 |
    • Mahan Zendedel
      • 349 |
    • 17 Khordad 1400
      • 350 |
    351 |
    352 |
    353 |

    Data Pipelines

    354 |
      355 |
    • سعید معروف - 9626104
      • 356 |
    • کامیار جان پروری - 9626015
      • 357 |
    • 22 Khordad 1400
      • 358 |
    359 |
    360 |
    361 |

    Wordpress

    362 |
      363 |
    • Fateme Sahraee
      • 364 |
    • 24 Khordad 1400
      • 365 |
    366 |
    367 |
    368 |

    gRPC

    369 |
      370 |
    • Mohammad Ebrahim Adibzadeh
      • 371 |
    • Rozhin Sattarpour
      • 372 |
    • 24 Khordad 1400
      • 373 |
    374 |
    375 |
    376 | -------------------------------------------------------------------------------- /content/lectures/lecture-5/img/dom-structure.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Produced by OmniGraffle 7.10.2 12 | 2019-04-23 21:57:02 +0000 13 | 14 | 15 | Canvas 1 16 | 17 | Layer 1 18 | 19 | 20 | 21 | 22 | Window 23 | 24 | 25 | 26 | 27 | 28 | 29 | Document 30 | 31 | 32 | 33 | 34 | 35 | 36 | Element 37 | 38 | 39 | 40 | 41 | 42 | 43 | Element 44 | 45 | 46 | 47 | 48 | 49 | 50 | Element 51 | 52 | 53 | 54 | 55 | 56 | 57 | Element 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /content/lectures/lecture-5/img/eventflow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-5/img/eventflow.png -------------------------------------------------------------------------------- /content/lectures/lecture-5/img/promises.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-5/img/promises.png -------------------------------------------------------------------------------- /content/lectures/lecture-5/img/prototype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-5/img/prototype.png -------------------------------------------------------------------------------- /content/lectures/lecture-6/diag/reference-based-validation.drawio: -------------------------------------------------------------------------------- 1 | 3ZjLctowFIafhmUytoWNWSaQNIt2ygzTplkK69jWRFgeWQTo01fC8lUQCCVNpiusX/fv/DqyGaDJcvNF4Dz9xgmwgeeQzQBNB57nDh1X/Whla5QwDEolEZQYrRHm9DcY0THqihIoOg0l50zSvCtGPMsgkh0NC8HX3WYxZ91Zc5yAJcwjzGz1kRKZlmroO43+ADRJq5ldx9QscdXYCEWKCV+3JHQ3QBPBuSyflpsJME2v4lL2uz9QWy9MQCZP6YCS7PFK/Hi5fx7ewYNMkAzIlRnlBbOV2fBPzCjBkguzarmtUKxTKmGe40iX1yreA3SbyiVTJVc94iIvAxDTDag5b2PK2IQzNZLujuI49qJI6YUU/BlaNSRYBH6gasxiQEjYHNylW7NTrgO+BCm2qonp4FX8jeGGVaTWregZKW0FrtKw8UtSj9wgVQ+G6hsIexbhmzxnNMKS8uzijMMI9jNehL5GcRHG/uiTMUYW4xkWBdgWFnyVEQ1uqlEcgU2oULB1lNC04Cu9sz5vgiGM9/IOohAW8WV4o7Hf5Y1s3sEe3q73XsCHFvB5lMISW8BV0sv1Y7RlVJEX6Dj2RRmjr4tawNFzsovc95VUw4DRi/KycP19uQaCA7lmNF44FzoH9SVl4uKPT4vLu50D3wrLFEs7KJCRG3016rgwXBQ06kZAbV9sf5lDsis86cK1XxWnm3bldGtK5URArBu1B1Rd4VgkII/dSzb4Flh/D9hKE8BUen3pLmMfbTPDjFO1wDqu9bmpztu4FzCVDUQEplf7yu0PFPQGGvUGKjlYA+2CX2/7fD8Elh9e80LG9dG6JbhIdynS7aVDpc+wlCCyneI5qD5g1auR13FPY5intrMOuAc2VLa6qdJTq6bppAvtPjMQVIEC8WYXlmE8nuY+uVsPZaG/das//LduHZ3j1nbaMgZy2/apzXTAQGea9YImOzUloo80GeqbrP9qcarJ0AenxPA/NNlHmWLo995Lw/G1f54trE8Ke6izjaGKzVd22bz5swLd/QE= -------------------------------------------------------------------------------- /content/lectures/lecture-6/img/reference-based-validation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-6/img/reference-based-validation.png -------------------------------------------------------------------------------- /content/lectures/lecture-6/img/thrift-efficiency.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-6/img/thrift-efficiency.png -------------------------------------------------------------------------------- /content/lectures/lecture-6/img/thrift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-6/img/thrift.png -------------------------------------------------------------------------------- /content/lectures/lecture-7/img/advantages.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-7/img/advantages.png -------------------------------------------------------------------------------- /content/lectures/lecture-7/img/dep.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-7/img/dep.png -------------------------------------------------------------------------------- /content/lectures/lecture-7/img/dyn-static.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-7/img/dyn-static.gif -------------------------------------------------------------------------------- /content/lectures/lecture-7/img/echo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-7/img/echo.png -------------------------------------------------------------------------------- /content/lectures/lecture-7/img/go-vs-java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-7/img/go-vs-java.jpg -------------------------------------------------------------------------------- /content/lectures/lecture-7/img/gophers.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-7/img/gophers.png -------------------------------------------------------------------------------- /content/lectures/lecture-7/img/history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-7/img/history.png -------------------------------------------------------------------------------- /content/lectures/lecture-7/img/nerdy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-7/img/nerdy.png -------------------------------------------------------------------------------- /content/lectures/lecture-7/img/real-gopher.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-7/img/real-gopher.jpg -------------------------------------------------------------------------------- /content/lectures/lecture-7/img/say-hello.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-7/img/say-hello.png -------------------------------------------------------------------------------- /content/lectures/lecture-7/img/slice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-7/img/slice.png -------------------------------------------------------------------------------- /content/lectures/lecture-7/img/starwars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-7/img/starwars.png -------------------------------------------------------------------------------- /content/lectures/lecture-8/diag/sss.drawio: -------------------------------------------------------------------------------- 1 | 3VhNc5swEP01nkkP9QhkPnxsnKRuJuk4IdM0RwxrQyuQK+TY7q+vBMKAsROSISGuc4j2Sbug3X27Qj08itZfmbsIrqkPpKcjf93DZz1dx3igi38S2WSIZg9RhsxZ6CusAJzwLygwX7YMfUgqCzmlhIeLKujROAaPVzCXMbqqLptRUn3qwp1DDXA8l9TR+9DnQYbaBirwMYTzIH+yhtRM5OaLFZAErk9XJQif9/CIUcqzUbQeAZHey/2S6V0cmN2+GIOYN1HwbxKHXJDLqUN/eA+jm/X31f1nZeXRJUu14XuYCmBEQmk2e3G+yb3B6DL2QRrUevh0FYQcnIXrydmVSACBBTwianoWEjKihLJUF/sG2P5A4Aln9DeUZmx9ik1TzKiXAcZhfXCX2tZ3IuuARsDZRixRCjpW7lYJh00jk1dF9LQcC0qRM5WeqxJmvjVd+FQMlFtf4OJhzcXju7tJTzeJePLplInRXI5uIVnQOIGa08EXGalEynhA5zR2yXmBnhZhQUIq1lxRulDB+AWcbxS93CWn1VDBOuQ/pXrfMpT4oKzJ8dm6LGxyIRbuKWtJ+SG3KIVCL5VyxWyHcltPB1l4gS6ZB084V5UX7rI58OfyvJ40DIjLw8fqe7SeAfoBkjnARK7/ByQbDLsmGa65+HYZ8zACmWjxY8hoHInNJWkLYNLfyvcoEf1F/vOYbCk6OpmMBTnFW6AJMJKNLh0FAff6n1oN2MyQf/sCZqY/qUFjXsKz39sE0jC6DqSm1dz7nvWvXPz6RrPyp5Vrn9J6n+o3aFj99C6r36BGTYeLx3rylCEyOz1moJPx3fVVxrFvkThTJc34hl5eIF2wZ95evnk2TGft8Gpg7xZIq7+HWfnRsMysnIHtM0s/xpOFZlVOFn30HL1SSZRuUfs5sPY5ZzTkHO6Sc0aNc2lXQ47scrILtsio2QxMby+jfGs4RagdRgmy5AxSnDItVGOUuYdQb9eqcLeEehWfujqom8dAG7NOm/QMeMy8sT8ebwbd8kZ/FXFsbO50oqI1ddSKrGPglFXjVPo1dcSUwsaHo5Rdc/KhO6Y/S0jq93oQ+1/kZamQPOImSeg1Io/WlDx6pe2gZ3jTIkXyK+NXfiGV4mnsO6srrDGT1BMmNEy/elRCWdWPhe3lcm4h26VSKt/w7tjZfk/khtCOocwNNUNpym13vS8LhVhcVGfLi/t+fP4P -------------------------------------------------------------------------------- /content/lectures/lecture-8/diag/typical-server.drawio: -------------------------------------------------------------------------------- 1 | 7VzbcuI4EP0aqmYfdsp3zGPIZbJb2Z3s8DAz+yZsxdZEWJQtAuzXr4QlsC2BDcGQBIeqxG7bLfuc7nZ3S6FnX08WX1Iwjf8iIcQ9ywgXPfumZ1m27VjsD5csc4npD4xcEqUoFLKNYIT+g0IoT5uhEGalEykhmKJpWRiQJIEBLclAmpJ5+bQngsujTkEEFcEoAFiVfkchjXOp7xob+T1EUSxHNg1xZAyC5ygls0SM17Ps29VPfngCpC5xfhaDkMwLIvu2Z1+nhNB8a7K4hpiDK2HLr7vbcnR93ylMaJMLfsF/Z/eGH8wHYEzmP3/cAez8Lth7AXgm8LjGiCvMb5kuJUwULtgow5hOMBOYbDOjKXmG1wSTlEkSkrAzhwCjKGG7AdMBmXz4AlOKGNpX4sAEhSHXOZzHiMLRFAR8gDkzLiZboQn5/Rps74kkVNiL5Yh9ORwD27ziH34jz5AGsbgr8TxsVLjYCpS5hp/ZNSQTSNMlO0UatZtfIS1aGvR8Yx6mJDUumEZfyICwyGitecMK2xDE7EGSrZA0gil7xENJekIYf0DevP5bI85RiFMog0l4xaMYxx6DLENBmcAqmBiMIR6uQ08BVxF8qpxzxH3rlt/1PkzAUAmbtTwUcHY1MEtZCjGg6KWsXoe9GOGRIB6QJM3rN8dSvoMGn92ykozM0gCK64ohsaLKs2tVUZBGkCqqVuawfvTDLcRTLOQL5Dd4zzS/ffc2vVOG5Upctk2Ne7uuandWW+7dV8j7I2P7mEQRQ4tdzJC9U1jcoGluwVvv/jnYBW4Z2Hfu1dA1dD4/MPjnjNFXS48u+npt0eMfNfqu4O+ir2dVaPYr9DWNvcxXdytqOfIOFOv4BkOU8hKDVyDs1wOJmAd3QbgUhB27zJp77iAsw0yXZB05yfpc9k+nyuAeSVadqpZd3TS3ZFm48/D6NEtXRZ3Ww916D+eOmmNImdkTjvURsh/RcwJjOYyxN5plMF1dUuRr3Nh0WkOzHsz9MtQzZqQ7zGVn4Dw15GoDZwfmxvuqCvbiQHpFuez2GlYK7UWYBo2aSyaoaSOtPYLUPslrkryulpO1XDUzqxbje1RzdaraTvLUbkxXwNWnd4599vTuuH2aroDbUsB5h/q2WsApqtr2bbVZM5qNJ+jgacoLcW7v7M4tFRcnmGMYPK8eK8vmJA13ZFofukHu9RtmVa01yK0GtWCXVb0+q+pXK8vDsypFVcuRV1pEwUS6qcnarnj/7FOTVoOWwzvpmfV17YHTNnCsvfoD77FpltvLW2qaWWo9twPzj9CT2caBVFPfNDM1DLUXYhrUbZdMkK5pdlqC1KrpwgmqtDU1c9dyOfNp1nU2mbrGGE2zbelPgRyQTfPl0U9owQl992xZZbI0KZWt8Sa7NbIazEJ2bart4DdbBTQwDyyVPLtGUcuFkq3OUDyQiMy6FtXuUsn3z10q2Q0Szc6xX+vYvnGgY7tujaK2HbtbRtqCeSisHq9Fpqhq20DUNPvP0de/meQxJQFk1pBEisV80B6361d6N9rFY6dM2xw1x75hT2r8M4NC+wXS4mvnhU5KS4OphywGU74ZLDFirKR2PSXjnL+H8VqwDrJfZ5SpgTLlEry574rHvlvvXp6GxurS+uPRqLaZn/gjf/pNYfOy015rUGFON/l30rTXUXva32A2JUnWze5UF8NVoufZZ3ec/XoRgosQZPH63VbgkssfAWX8JCuJZdhrhuW/xFsa/OEC0R+CG779U+jj2zeLwoGbpdh5O3kvg2qVYO4A2dIbxYkmkcvNL2UNQNP02Ky8MRRFLSfHzn4LNztLfTMVWnW5ysEm2B+0ZYJsd/P1Gfnpmy8psW//Bw== -------------------------------------------------------------------------------- /content/lectures/lecture-8/img/53-big-decisions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-8/img/53-big-decisions.png -------------------------------------------------------------------------------- /content/lectures/lecture-8/img/cgi-test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-8/img/cgi-test.png -------------------------------------------------------------------------------- /content/lectures/lecture-8/img/sss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-8/img/sss.png -------------------------------------------------------------------------------- /content/lectures/lecture-8/img/typical-server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-8/img/typical-server.png -------------------------------------------------------------------------------- /content/lectures/lecture-8/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | index: 8 3 | title: CGI 4 | topics: 5 | - Introduction 6 | --- 7 | 8 |
    9 |

    Introduction

    10 |
      11 |
    • HTML/XHTML content is static
      • 12 |
        13 |
      • 14 | JavaScript makes pages more dynamic, but the content is almost static 15 |
        • 16 |
      17 |
    • Dynamic content
      • 18 |
        19 |
      • 20 | Pages that look differently depending on the user who visits, status, 21 | processing requests, etc. 22 |
        • 23 |
      • E.g. Search engines, web mails, etc.
        • 24 |
      25 |
    • 26 | Web applications (hotel booking, web search applications, …) is not 27 | possible using only HTML/XHTML, CSS and JS; why? 28 |
      • 29 |
    30 |
    31 |
    32 |

    Typical Web based Application

    33 |

    34 | We need server side active code to perform actions & generate (dynamic) 35 | content 36 |

    37 | typical-server 42 |
    43 |
    44 |

    Common Gateway Interface

    45 |
      46 |
    • We need code beside web servers
      • 47 |
        48 |
      • Web server by itself is not designed for data processing
        • 49 |
      50 |
    • Initial idea
      • 51 |
        52 |
      • An external program can perform the processing
        • 53 |
      54 |
    • Questions
      • 55 |
        56 |
      • How can client ask server to run an external program?!
        • 57 |
          58 |
        • New HTTP Method to run (e.g. HTTP RUN)?!! 🤔
          • 59 |
        60 |
      • 61 | How does web server exchange information with the external program? 62 |
        • 63 |
          64 |
        • Sending input data & Getting the output
          • 65 |
        • The mechanism should be standard
          • 66 |
        67 |
      68 |
    69 |
    70 |
    71 |

    Common Gateway Interface (Cont.)

    72 |
      73 |
    • 74 | The Standard protocol for interfacing external application software with 75 | the web server 76 |
      • 77 |
        78 |
      • CGI 1.1 specified in RFC 3875, 2004
        • 79 |
      80 |
    • 81 | The external program runs by the 82 | standard HTTP requests & proper server 83 | configuration 84 |
      • 85 |
    • 86 | Information is passed from external software to the web server as the 87 | output on stdout 88 |
      • 89 |
        90 |
      • 91 | HTTP response is the 92 | output of the external program on the 93 | server machine 94 |
        • 95 |
      96 |
    • 97 | Information can passed from the web server to the executable program 98 | according to HTTP request method 99 |
      • 100 |
    101 |
    102 |
    103 |

    CGI Example: Server Config

    104 | 
    
105 | <IfDefine ENABLE_USR_LIB_CGI_BIN>
106 |   ScriptAlias /cgi-bin/ /var/www/html/IE/cgi-enabled/
107 |   <Directory "/var/www/html/IE/cgi-enabled/">
108 |     AllowOverride None
109 |     Options +ExecCGI -MultiViews 					  +SymLinksIfOwnerMatch
110 |     Require all granted
111 |   </Directory>
112 | </IfDefine>
113 |
    114 |
    115 |
    116 |

    CGI Example: Source Code

    117 | 
    
118 | #include <stdio.h>
119 | 
120 | int main(void){
121 |   // http header
122 |   printf("Content-Type: text/html\r\n");
123 |   printf("Connection: close\r\n");
124 | 
125 |   printf("\r\n \r\n");
126 | 
127 |   // http body
128 |   printf("<html><head></head>\r\n");
129 |   printf("<body>\r\n");
130 |   printf("Hello world.\r\n");
131 |   printf("<br />\r\n");
132 |   printf("Bye Bye\r\n");
133 |   printf("</body></html>\r\n");
134 |   return 0;
135 | }
136 |
    137 |
    138 |
    139 |

    CGI Example: Compile

    140 | 
    
141 | > ~# cd /var/www/html/IE/cgi-enabled
142 | > /var/www/html/IE/cgi-enabled# gcc -o hello_c.cgi hello_c.c
143 | > /var/www/html/IE/cgi-enabled# ./hello_c.cgi
144 | Content-Type: text/html
145 | Connection: close
146 | 
147 | 
148 | <html><head></head>
149 | <body>
150 | Hello world.
151 | <br />
152 | Bye Bye
153 | </body></html>
154 |
    155 |
    156 |
    157 |

    CGI Example: Test

    158 | cgi-test 159 |
    160 |
    161 |

    The “Hello World” CGI in Bash Script

    162 | 
    
163 | #!/bin/bash
164 | 
165 | # http headers
166 | echo "Content-Type: text/html"
167 | echo ""
168 | 
169 | # http body
170 | echo "<html><head></head>"
171 | echo "<body>"
172 | echo "Hello world."
173 | echo "<br />"
174 | echo "Bye Bye"
175 | echo "</body></html>"
176 |
    177 |
    178 |
    179 |

    Getting parameters from the client

    180 |
      181 |
    • 182 | Parameters can be passed from the user to the CGI script through an html 183 | <form> or fetch or ... 184 |
      • 185 |
    186 | 
    
187 | <form action="script.cgi" method="GET">
188 |   <input type="…" name="input1" />
189 |   <input type="…" name="input2" />
190 |   …
191 |   <input type="…" name="inputN" />
192 | </form>
193 |
    194 |
      195 |
    • The script.cgi will get the parameters as:
      • 196 | 
      
197 | input1=val1&input2=val2& ... &inputN=valN
198 |
      199 |
    • The mechanism depends on the HTTP Method
      • 200 |
    201 |
    202 |
    203 |

    Getting parameters from the client

    204 |
      205 |
    • 206 | Parameters can be sent through the 207 | GET method 208 |
      • 209 |
        210 |
      • 211 | CGI script will receive the parameters from the web server in an 212 | environment variable $QUERY_STRING 213 |
        • 214 |
      • 215 | In C: You can access it by 216 | getenv("QUERY_STRING") 217 |
        • 218 |
      219 |
    • 220 | Parameters can be passed through the 221 | POST method (in the body of the HTTP 222 | Request) 223 |
      • 224 |
        225 |
      • 226 | The CGI script will receive the parameters from the web server in the 227 | standard input (stdin) 228 |
        • 229 |
      230 |
    231 |
    232 |
    233 |
    234 |

    CGI Environment Variables

    235 | 236 | 237 | 238 | 242 | 243 | 244 | 245 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 260 | 261 |
    CONTENT_TYPE 239 | The data type of the content. Used when the client is sending attached 240 | content to the server. For example, file upload. 241 |
    CONTENT_LENGTH 246 | The length of the query information. It is available only for POST 247 | requests. 248 |
    HTTP_COOKIEReturns the set cookies in the form of key & value pair.
    HTTP_USER_AGENT 257 | The User-Agent request-header field contains information about the 258 | user agent originating the request. It is name of the web browser. 259 |
    262 |
    263 |
    264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 274 | 275 | 276 | 277 | 281 | 282 | 283 | 284 | 289 | 290 | 291 | 292 | 296 | 297 |
    PATH_INFOThe path for the CGI script.
    QUERY_STRING 272 | The URL-encoded information that is sent with GET method request. 273 |
    REMOTE_ADDR 278 | The IP address of the remote host making the request. This is useful 279 | logging or for authentication. 280 |
    REMOTE_HOST 285 | The fully qualified name of the host making the request. If this 286 | information is not available, then REMOTE_ADDR can be used to get IR 287 | address. 288 |
    REQUEST_METHOD 293 | The method used to make the request. The most common methods are GET 294 | and POST. 295 |
    298 |
    299 |
    300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 |
    SCRIPT_FILENAMEThe full path to the CGI script.
    SCRIPT_NAMEThe name of the CGI script.
    310 |
    311 |
    312 |
    313 |

    CGI Pros & Cons

    314 |
      315 |
    • What is the main advantage(s) of CGI?
      • 316 |
        317 |
      • Any programming language can be used
        • 318 |
      319 |
    • What the main drawback(s) of CGI?
      • 320 |
        321 |
      • We should generate whole HTML document in CGI
        • 322 |
      • 323 | For each request, a new process is created 324 |
        • 325 |
          326 |
        • 327 | Process creation & termination & Inter-process communication 328 | overhead 329 |
          • 330 |
        331 |
      • Security is another major issue
        • 332 |
      333 |
    • Any other way to run code in server side?
      • 334 |
    335 |
    336 |
    337 |

    Solving CGI Problems

    338 |
      339 |
    • Empower the server to run code
      • 340 |
        341 |
      • But, Which programming language? HTML?!!!
        • 342 |
          343 |
        • Should we compile & debug web-pages?
          • 344 |
        345 |
      • Should web server interpret/compile the code?
        • 346 |
          347 | Web servers are not build to be compiler!! 348 |
        349 |
      • How to mix code & HTML?
        • 350 |
      351 |
    • 352 | Answer: Interpreter as a web server plugin is 353 | responsible 354 |
      • 355 |
        356 |
      • 357 | Use any scripting language that its interpreter is available for web 358 | server, e.g., PHP runtime environment 359 |
        • 360 |
      • 361 | Configure web server to use interpreter for a specific file types that 362 | contain mixed code & HTML, e.g., .php files 363 |
        • 364 |
      • Web server run the interpreter for codes and uses the output
        • 365 |
      366 |
    367 |
    368 |
    369 |
    370 |

    Overview of Server-Side Scripting

    371 | sss 372 |
    373 |
    374 |
      375 |
    1. Web client sends a HTTP request to server
      2. 376 |
    2. 377 | Web server determines how to retrieve the requested resource according 378 | configuration 379 |
      3. 380 |
        381 |
      • .html, .jpg, ... To be retrieve directly
        • 382 |
      • .php To be handled by the PHP module
        • 383 |
      384 |
    3. Runtime environment does for example
      4. 385 |
        386 |
      • Parses incoming request, generate outgoing response
        • 387 |
      • Interpreting/executing the server-side scripts
        • 388 |
      • Maintaining sessions
        • 389 |
      390 |
    391 |
    392 |
    393 |
      394 |
    1. Runtime environment runs the requested script
      2. 395 |
        396 |
      • Identifies the code sections inside HTML
        • 397 |
      • Runs the code and grabs the output
        • 398 |
      • Provides session & other status information
        • 399 |
      • 400 | Generated output and HTML are assembled together which is the response 401 | to client 402 |
        • 403 |
      404 |
    2. The HTTP response is sent to the web client by web server
      3. 405 |
    406 |
    407 |
    408 |
    409 |

    Embed vs. External Server Side Code

    410 |
      411 |
    • External code
      • 412 |
        413 |
      • A separated program: C, C++, …
        • 414 |
      • Server runs it and sends its output back to client
        • 415 |
      416 |
    • Embed code
      • 417 |
        418 |
      • Scripting inside the HTML
        • 419 |
          420 |
        • Embed programming interface within server
          • 421 |
            422 |
          • Which is called when server see the scripting directions
            • 423 |
          424 |
        425 |
      • Examples
        • 426 |
          427 |
        • Perl: Apache mod_perl module to embed
          • 428 |
        • Java Server Pages (JSP): Compiled and served by a JSP server
          • 429 |
        • Python
          • 430 |
        • PHP (the most common language)
          • 431 |
        432 |
      433 |
    434 |
    435 |
    436 |

    Server Side Scripting Benefits

    437 |
      438 |
    • How does server side scripting solve CGI problems?
      • 439 |
        440 |
      • We don’t need to generate whole HTML by code
        • 441 |
          442 |
        • Only dynamic parts are coded
          • 443 |
        444 |
      • A process is not created per request
        • 445 |
          446 |
        • All requests are processed by the interpreter
          • 447 |
            448 |
          • Which is implemented as a library for web server process
            • 449 |
          450 |
        • Each request = A thread
          • 451 |
            452 |
          • 453 | Low creation & termination & inter-communication overhead 454 |
            • 455 |
          456 |
        457 |
      • The run-time environment control the code
        • 458 |
          459 |
        • More secure execution
          • 460 |
        461 |
      462 |
    463 |
    464 |
    465 |

    Major differences w.r.t client side programming

    466 |
      467 |
    • Concurrency
      • 468 |
        469 |
      • 470 | Each server side program (cgi, php, …) can (and usually) runs multiple 471 | times concurrently 472 |
        • 473 |
          474 |
        • A process/thread per request
          • 475 |
        476 |
      • Be very very careful about shared resources (files)
        • 477 |
      478 |
    • Security
      • 479 |
        480 |
      • 481 | Each server side program allows client (including the hackers) to run 482 | code on your server 483 |
        • 484 |
          485 |
        • Vulnerable code = Hacker access
          • 486 |
        487 |
      • Be very very careful about input from the client
        • 488 |
      489 |
    490 |
    491 |
    492 |

    References 📚

    493 | 499 |
    500 |
    501 | 53-big-decisions 502 |
    503 | -------------------------------------------------------------------------------- /content/lectures/lecture-9/img/asyn-messaging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-9/img/asyn-messaging.png -------------------------------------------------------------------------------- /content/lectures/lecture-9/img/csr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-9/img/csr.png -------------------------------------------------------------------------------- /content/lectures/lecture-9/img/diag-rpc.drawio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-9/img/diag-rpc.drawio.png -------------------------------------------------------------------------------- /content/lectures/lecture-9/img/diag-shared-resource-based-communication.drawio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-9/img/diag-shared-resource-based-communication.drawio.png -------------------------------------------------------------------------------- /content/lectures/lecture-9/img/micro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-9/img/micro.png -------------------------------------------------------------------------------- /content/lectures/lecture-9/img/mongodb.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-9/img/mongodb.webp -------------------------------------------------------------------------------- /content/lectures/lecture-9/img/multi-layer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-9/img/multi-layer.png -------------------------------------------------------------------------------- /content/lectures/lecture-9/img/mvc-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-9/img/mvc-1.png -------------------------------------------------------------------------------- /content/lectures/lecture-9/img/mvc-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-9/img/mvc-2.gif -------------------------------------------------------------------------------- /content/lectures/lecture-9/img/mvc-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-9/img/mvc-3.png -------------------------------------------------------------------------------- /content/lectures/lecture-9/img/mvc-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-9/img/mvc-4.png -------------------------------------------------------------------------------- /content/lectures/lecture-9/img/mvvm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-9/img/mvvm.png -------------------------------------------------------------------------------- /content/lectures/lecture-9/img/ssr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/lecture-9/img/ssr.png -------------------------------------------------------------------------------- /content/lectures/mongodb/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | lecture: false 3 | title: MongoDB 4 | topics: [] 5 | --- 6 | 7 |
    8 |

    9 | The presentation is in PowerPoint format so 10 | click here 11 | to download it. 12 |

    13 |
    14 | -------------------------------------------------------------------------------- /content/lectures/mongodb/presentation.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/mongodb/presentation.pptx -------------------------------------------------------------------------------- /content/lectures/nats101/diag/nats101.xml: -------------------------------------------------------------------------------- 1 | 7Vhdb9owFP01PK4yMQnp46CFvlRFQtPWR8e5SSwMRraB0F8/J3G+CBUtKwNN4wXfY/va95wj29DD42U6lWSdPIsQeM9BYdrDDz3H6feRY74yZG8RhFCBxJKFFquBOXuDcqBFNywE1RqoheCardsgFasVUN3CiJRi1x4WCd5edU1i6ABzSngX/clCnRSo76IafwIWJ7qq2PYsSTnYAiohodg1IPzYw2MphC5ay3QMPGOv5KWYN3mnt9qYhJX+yISXp5c0TtcqeMNTOelPFq879c1m2RK+sQXPNgFnKgFpd633JRW7hGmYrwnN4p3Ru4dHiV5yE/VNk6h1IUDEUjBrjiLG+VhwIfPpOHTBDwcGV1qKBTR6fCfAnpf1LEDTxObr1lduFqSGtAHZeqcglqDl3gyxvU4phnWf49t415DSQklDxRIj1jxxlbnm1zQsxZ+g2+nQPd8EikoWZHx73Kw/CrJWnLfIl4sQReBRekyEcHgfGLouL4LrXFkE/CkRIiH+AREq0m9FhMF/Ea5/HLkdEZ5BKRKzVWzg+V5pWHZ4N3nN5WuC0Z9eCAT86KgCHvUhiC6gAPbaCgzQlRXwuvfvj1H+TukaHlbh9+xFYyLKiVKMtvmGlOlfjfZro/2QEYDKYF8GK1NDNgXdIcctgdccMNdyCdST86g1ewaSGSpAWpBu5DYTO1/5Y/IpsZEUTj9SNJEx6NN2hrD1pOuaoSG2e0TsEpPAiWbb9kPwmAPsCjPBTGWV1waH9x4+MFFRt53VfLgdJnIPTHvoxoKYTqLckFXZ53t02D0l5tNzPVo5rum2/gmnnWGqk2YZ3JZZBgcaO2eaBbtO23Xo/g7h+/rj/VXv+Bf3DrqCd/Bte8fzz/NOdULZRHj4VQeNCesfusXw+v8C/Pgb7ZhPc6IwGMY/yx48toOJIB6r7bY9dLcd22l76kR4gYyRsCEq9tNvkPDfWbfUtR7Wi3kfkmCe5wdBeniySK4FiYI77gLrIcNNeviyh1C/byD1lSobrRiGkSm+oK7WSmFK3yHvqNUldSGudZScM0mjuujwMARH1jQiBF/Xu3mc1c8aER9awtQhrK0+U1cGmWqbRqnfAPUDWaxYH1mQvLMW4oC4fF2R8FUPTwTnMmstkgmw1L3cFz6f39HL27eHh8lT6D+NvJ/h2Vk22fePDCmWICCUnae+eXd+PQ4Tee3LwHljm3A6HuohxoqwpfbrfjljNA5A6EXLTe7kOqASphFx0nqtcOnhcSAXTFV91SRxlOXn0QTUOcceZWzCGRfb4dg1wXYHSo+l4HOoHLHRDFtWemQO0gn0fH+5aG3OCoSEpBK5NuEa+AKk2Kgu+ijKA9ZEI1vX6woeWgoqZOQa0UD6xcyl6aqhff9ABqiVwcXSpfLQ/nseWI6zy393OJopU47kv4nq/hf1V/mPW/4/czE//AVwqgF8+QUwaAXw4+Jx2rJfzaQ2DVWMP3snImB7O4OwHBtm3rGCwFY9iIHxxUGYrSACYNG3dhKhe5FuzapyGIlj6tQDgITKl0r7tdK+TBdv5MUmL0L1+9MhxrmBzFx43Qpqg8iFcvC2qo2+B0GVDSC06CzFKk1/e+ZP5BnzpXBg/x4qifBB7scc3NoDS5uOSvrmjvRzTQAjkq7qjzm7kNBnuOdULbeAb9DYBk3coCpbtx5Vfa5oTmQ2KG7imRnTmmhLaLHs7tBah4K2QLCKX38PeoeibC89+LToGTRCRx3pwSaqY2iMzg08Kj/WUWEa/lOYjFOBCZ02TJbdDabiHqYnwsPj3orsFj236T9bEm59Y9GHMToUECcSdCuf5lbRec8ZHDfo0f+g/xg0bl7RXR8u0HAPMZ2DVmX56ibrXr4Bw1e/AQ==7Vldk9ogFP0tffBxHYQkxsfV3Vpn2o4dd2r3ERNiWFEswa/++hJDPkhsXV1Xnda8yD3ARe454QKpoc503RV4Hn7hPmE1CPx1DT3UIGw0AFQ/MbLRCAAgQcaC+hrLgQH9RdKGGl1Qn0RGQ8k5k3Rugh6fzYgnDQwLwVdms4Azc9Q5HpMKMPAwq6JD6sswQV0b5PgnQsehzGasa6Y4bayBKMQ+XxUg9FhDHcG5TErTdYewOHppXCYvvRdHRqDtDHvdu9bPEQzYXeLs4yFdsikIMpNHu54tR98Ho4mwPoNvzd5TcO8O+7oLWGK20PHqL0aMRiERetJyk0ZyFVJJBnPsxfZKyaWG2qGcMmU1VBFH84S/gK6JGrMdUMY6nHGx7Y58m7i+pfBICj4hhRoXjpDjxDUTIr1Q+3vlpHVwlkRIsi5QroPQJXxKpNioJroWpgRrRUNX26uCPDQUFpSRYlgLcpx5zoOuCjruB3DQqHAw5GJyegKCgDiet4sAv9kaqaiciQAbmgRk9qUIgP85ARd/A1CFgK/3T4NK+JUnlTWU0X7rUoSJG+wkwvFcMgrORQRyTCIscGEirAoRIWHzD1UmZv59nJuV5TEcRdQzCSBrKn8Uys+F8kM8eZAam9SYqf8fdwF1AO0UeN4CKkOkQN55axm9+0RQFQYiNOgtxDJmfzvyG/iM+EJ4ZH8SlViMidwvc+IbO5aqOgrs2zvYTzFBGJZ0ae5zdklCj9DnVE03E59VyoM2KqkqmbfuVdxYlB3ZJRWX5ZkEpuJoq9Bs2seL1j6VaDMJFuXX2CO9U6lsr3rgdanHKpEOj1QPsqEpQ9CqA9TKH+esYnLeVUzgWsTUuG4xOe5xYsrWMO0INc+7FDUr6unFR1s828aNzQ+W0akEcSVEV/gpp4qjc451XqLdG9F/JRqV3+hjNxewuUcx70x0q0L0v302LN+OXPxwnt4j3l61P62pwDYZO3ofD01H597HN6oXYTemjUW1lD2zJHjwolrOnuDMTFdv3G73DNeiMtgqZVwL1MuHsFcf7prm4U6d6+qt4mOdSHfKzD/EJM3z71no8Tc=5Zlbb5swFMc/TR4zAQZCHpvLOmnaRc2mtY8umGDViSPj3PbpZ4INBkdNwnKhylN9ju1Dff4/fGzSAcPZ5pHBRfKNRoh0HCvadMCo4zi2bTniT+bZSo9lWblnynAkfaVjgv8iNVB6lzhCaWUgp5RwvKg6Qzqfo5BXfJAxuq4OiympPnUBp8hwTEJITO8fHPEk9waeVfq/IDxNeLFi2TODarB0pAmM6FpzgXEHDBmlPG/NNkNEsuypvMy6X38/eZNBz5qMn+bxjxHret082OdTphRLYGjOzxtaqruCZCnz9f3h10Sul29VEkUkoZcwBusEczRZwDDrWQtmhC/hMyIsWzRhushFjPEGiQcPYkzIkBLKdoFA5KEgcoU/5Yy+Ia0ncF6B72c9b4iHiYx35MplhlaIcbTRdJeZeER0hjjbiiGy1+kF+RSJNfClyGuNEelKNDyUD0oqp0XkMvOiIZN/ghDgToVw+6BdQrh3KgQIvIoQbu/GQniGEKYI8+ghKxHCCglMUxzu8ggZN92aJGiD+bPWfhFt65MnrVGWEEsZW2XMxZqedUOblZnltJ2l5lW0C5dslTHQQMiULlmIDu/kYvFT9F48+bqhqFI2TSw02b09sisfQwRyvKoW230syCf8pFgst3z9VbWV1HmghlO+bjlLr271QP1qoCKwCpQnxgi0Q7NYdnNa/cvRqsizdfLsA9wpxi2d8XcJvxqp7pGkOq0iFYAaYP2GpIKgFsi9Lqm96+6rDXbVQ2y3jtR27akeONOe6tVJrdf6C5MaGKQOCUbyWTqv/3kEi2Pkh+G+I1jU679aBnKXOoLZbjXfNz8L9+9MgPoZ2LduLID6iHI3CvhOy14B2zYUuGi5/OjXkOBDHu6c2jXE6TUsmcU/pAI51y2ZtvlB72y4FuiVtJ10EynQbtFdpH8krm67cLWrlPl+U1z9WiD7yrianz1vubteDTtwJHZKjpZw59YuBEbZPfpmUbuiOPUrSmPuhFn+IpMPL3/YAuN/7VfbjpswEP0atE+pCIRcHhNyqVRtU21Wavvo4AlYa3BqTEL69R2CCdd2myZd9aFPeM6YgTlnZgyG7YbpSpJ98CgocMMyaWrYc8Oy+n3TwkuGnDRimmaO+JJRjZXAhn2HYqNGE0Yhrm1UQnDF9nXQE1EEnqphREpxrG/bCV5/6p740AI2HuFt9DOjKsjRsWOW+HtgfqAuGWtPSIrNGogDQsWxAtkLw3alECpfhakLPGOv4GW9iOapu5Vr9ry2YJd8OAajXh5sec0tlxQkROq+obW6B8ITzdfH6fNG56tOBYkYCfVCY3YMmILNnniZ54g1g1igQo5WH5ck3uci7lgK+ODZjnHuCi7kOZC928HQ8xCPlRQvUPHQ0WSL1KPnBZQX6Hi/mblm6ABSQVrRXTOxAhGCkifcor1WobIua3us7WOlRjQUVMqjwIiuSv8SuWQeF5r8K4SwW0K4nGVJN6W4UQDqwJgOugQYW1t7OHwrARzrHxNg0BKg3QURnWYTCS2PkzhmXp17SJn6Ull/xbX5ztHWPMvcLIyTNm4gOxaJ9OD15gZam5BtSSqUOx2UF5gEThQ71Odqlw76CZ8Ey+r30nKTuuKDQUPKPB99V3WQNQINRo1AViOQItIH1Qp0LotL2n9eKU5HpQy5ynpNnN+zLJnht0QUjl58PhunuMFy9mnpxJV/vi5NY7I0JpaRFXkeEV8wD6q3NEsSu029PpXzXi+Ov/5b9fhg3BDKbPe43VFwzcK4W48PW8o9blYIGCOMZ/5y3c17i+NinkYigsbw1RDhzI+yCYJkA+KzjE+G3ytT7QgZpfxnR60USUSzuX7r8LjiqGz0rT1pq9jvmhvNtrybjKOWjL3F0xMiDxuO09kyXRHFSQjy4b9uHfP2L+iGZvkdnM/Z8nfCXvwA -------------------------------------------------------------------------------- /content/lectures/nats101/img/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/nats101/img/background.jpg -------------------------------------------------------------------------------- /content/lectures/nats101/img/ha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/nats101/img/ha.png -------------------------------------------------------------------------------- /content/lectures/nats101/img/overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/nats101/img/overview.png -------------------------------------------------------------------------------- /content/lectures/nats101/img/ping-pong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/nats101/img/ping-pong.png -------------------------------------------------------------------------------- /content/lectures/nats101/img/queues.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/nats101/img/queues.png -------------------------------------------------------------------------------- /content/lectures/nats101/img/rr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/nats101/img/rr.png -------------------------------------------------------------------------------- /content/lectures/nats101/img/sc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/nats101/img/sc.png -------------------------------------------------------------------------------- /content/lectures/react/img/declarative-imperative.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/react/img/declarative-imperative.png -------------------------------------------------------------------------------- /content/lectures/react/img/jsx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/react/img/jsx.png -------------------------------------------------------------------------------- /content/lectures/react/img/not-really.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/react/img/not-really.jpg -------------------------------------------------------------------------------- /content/lectures/react/img/wait-what.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/react/img/wait-what.jpg -------------------------------------------------------------------------------- /content/lectures/react/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | lecture: false 3 | title: React 4 | topics: 5 | - Introduction 6 | - Components 7 | - JSX 8 | - Props 9 | - State 10 | - Component Styling 11 | - Fetch External Data 12 | --- 13 | 14 |
    19 |
    20 |

    Introduction to

    21 |

    React

    22 |

    Amirhossein Nouri

    23 |
    24 | Github 25 |
    26 |
    27 |
    28 |
    29 |
    30 |
    31 |
    32 |
    33 |
    34 |
    35 |

    What is React?

    36 |

    37 | React is a declarative JavaScript library for building user interfaces 38 | specifically for single-page applications (SPA). 39 |

    40 |

    It is open source and created by facebook (meta) in 2013.

    41 |
    42 | 43 |
    44 | wait what? 45 |
    46 | 47 |
    48 |

    Declarative

    49 | declarative vs imperative 54 |

    Declarative: Tell me what you want to do

    55 |

    Imperative: Tell me how to do it

    56 |
    57 | 58 |
    59 |

    Single Page Application (SPA)

    60 |

    61 | Single-page application is a web app implementation that loads only a single 62 | web document, and then updates the body content of that single document via 63 | JavaScript. 64 |

    65 | 66 |

    No refresh required for navigation!

     67 | 68 |

    Here is an example

     70 |
    71 | 72 |
    73 |
    74 |
    75 | 76 |
    77 |

    Component

    78 |

    79 | Components are the building blocks of any 80 | React app. 81 |

    82 |

    83 | Components let you split the UI into 84 | independent, 85 | reusable pieces, and think about each piece in 86 | isolation. 87 |

    88 | 89 |

    Let check Snapp's components

    90 |     91 |
    92 | 93 |
    94 |
    95 |

    How can we create a component?

    96 |

    We have two types of components

    97 |
      98 |
    1. Class component
      2. 99 |
    2. Functional component
      3. 100 |
    101 |
    102 | 103 |
    104 |

    Class component

    105 | 106 | 
    107 |       
108 |         class Button {
109 | 
110 |           render(){
111 | 
112 |             return (
113 |               
114 |             );
115 |           }
116 |         }
117 |       
118 |
    119 |
    120 | 121 |
    122 |

    Functional component

    123 | 124 | 
    125 |       
126 |         function Button(){
127 | 
128 |           return (
129 |               
130 |           );
131 |         }
132 |       
133 |
    134 |
    135 |
    136 | 137 |
    138 |
    139 |

    So ...

    140 |

    141 | A component is a function that returns HTML or a javascript class that 142 | returns HTML inside it's render method 143 |

    144 |
    145 | 146 |
    147 | Not really 148 |
    149 | 150 |
    151 |

    We can have something like this

    152 | 
    153 |       
154 |         function Button(){
155 | 
156 |           const text = 'Click me!!!';
157 |           return (
158 |               
159 |           );
160 |         }        
161 |       
162 |
    163 |
    164 | 165 |
    166 |

    Or something like this

    167 | 
    168 |       
169 |         function Button(){
170 | 
171 |           return (
172 |             {
173 |               isLoading? () : ();
174 |             }
175 |             
176 |           );
177 |         }        
178 |       
179 |
    180 |
    181 | 182 |
    183 | JSX 184 |
    185 |
    186 | 187 |
    188 |
    189 |

    JSX

    190 | 191 |
      192 |
    • Rendering logic is inherently coupled with UI logic
      • 193 |
    • So we need a way to have HTML and UI logic in one place
      • 194 |
    • We can use JSX
      • 195 |
    • JSX stands for JavaScript XML
      • 196 |
    197 |
    198 | 199 |
    200 |

    201 | We can start writing javascript inside JSX inside 202 | { } 203 |

    204 | 
    205 |       
206 |         function Button(){
207 | 
208 |           const text = 'Click me!!!';
209 |           return (
210 |               
211 |           );
212 |         }  
213 |         
214 |         function Date(){
215 | 
216 |           return (
217 |               
    We're in {new Date().getFullYear()}
    
218 |               {/* We're in 2021 */}
219 |           );
220 |         }        
221 |           
222 |
    223 |
    224 | 225 |
    226 |

    Composing Components

    227 | 
    228 |       
229 |         function HomePage(){
230 | 
231 |           return (
232 |             
233 |               
    
234 |                 
235 |                   ...
236 |                 
237 |               
    
238 |               
    
239 |                 
    
240 |                   
241 |                   
242 |                   
243 |                 
    
244 |               
    
245 |                 
246 |             
247 |           );
248 |         } 
249 |           
250 |
    251 |
    252 | 253 |
    254 |

    We can render conditionally

    255 | 
    256 |       
257 |         function NotificationButton(){
258 | 
259 |           return (
260 |             
261 |             {hasNewNotification && ()}
262 |             
263 |           );
264 |         } 
265 |       
266 |
    267 |
    268 |
    269 | 270 |
    271 |
    272 |

    Is this component reusable?

    273 | 274 | 
    275 |     
276 |       function Button(){
277 | 
278 |         return (
279 |             
280 |         );
281 |       }        
282 |     
283 |
    284 | 285 |

    What if we want a button with 'submit' text?

    286 |
    287 | 288 |
    289 | 
    290 |       
291 |         function ClickMeButton(){
292 |   
293 |           return (
294 |               
295 |           );
296 |         }        
297 |       
298 |
    299 | 
    300 |       
301 |         function SubmitButton(){
302 |   
303 |           return (
304 |               
305 |           );
306 |         }        
307 |       
308 |
    309 |
    310 | 311 |
    312 |

    How can we make this component reusable?

    313 |
    314 |
    315 |
    316 |
    317 |
    318 | 319 |
    320 |
    321 |

    Props

    322 |

    Props are arguments passed into React components.

    323 |
      324 |
    • 325 | stands for properties and is being used 326 | for passing data from one component to another 327 |
      • 328 |
    • 329 | Props are being passed in a 330 | uni-directional flow. (one way from parent 331 | to child) 332 |
      • 333 |
    • 334 | Props is read-only, which means that data 335 | coming from the parent should not be changed by child components. 336 |
      • 337 |
    338 |
    339 | 340 |
    341 |

    How can we use Props?

    342 |
      343 |
    1. Define the prop in parent (where we want to render the component)
      2. 344 |
    2. Pass it down to the component
      3. 345 |
    3. Render the prop in the component
      4. 346 |
    347 |
    348 | 349 |
    350 |

    Define props and pass them down to components

    351 | 352 | 
    353 |       
354 |         
    
355 |           
356 |           
357 |         
    
358 |           
359 |
    360 |
    361 | 362 |
    363 |

    Render prop inside the component

    364 | 365 | 
    366 |       
367 |         function Button(props){
368 | 
369 |           return (
370 |             
371 |           )
372 |         }
373 |       
374 |
    375 |
    376 | 377 |
    378 |

    Components can have multiple prop

    379 | 380 | 
    381 |       
382 |         function Coffee({name, img, description, price}){
383 | 
384 |           return (
385 |             
    
386 |               {name}
387 |               
    {name}
    
388 |               
    {price}
    
389 |               
    {description}
    
390 |             
    
391 |           );
392 | 
393 |         }
394 |           
395 |
    396 |
    397 |
    398 | 399 |
    400 |
    401 |
    402 | 403 |
    404 |
    405 |

    State

    406 |

    React components can have internal state

    407 |

    State is like a component's memory

    408 |

    409 | When the state changes, react will update the UI automatically (re-render) 410 |

    411 |
    412 | 413 |
    414 |

    Lets implement a counter component and see the state in action

    415 |
    416 | 417 |
    418 | 
    419 |       
420 |         function Counter(){
421 |           let counterValue = 0;
422 | 
423 |           const handleIncrementClick = () => counterValue ++;
424 | 
425 |           return (
426 |             
    Counter value is: {counterValue}
    
427 |             
428 |           )
429 |         }
430 |           
431 |
    432 |
    433 | 434 |
    435 |

    Clicking the button will increase the counter value

    436 |

    But it wont update the UI

    437 |

    Now, we can use state

    438 |
    439 | 440 |
    441 |

    We can define state with useState function

    442 | 443 | 
    444 |       
445 |         const [value, setValue] = useState(initialValue);
446 |         // value is the actual state.
447 |         // setValue is a special function to update the value.
448 |         // By Calling setValue(newValue), state and UI will be updated.
449 |         // You can name them whatever you want.
450 |         // You can have as many state as you want (multiple useState call).
451 |       
452 |
    453 |
    454 | 455 |
    456 |

    Lets define the state

    457 | 458 | 
    459 |       
460 |         function Counter(){
461 |           const [value, setValue] = useState(0);
462 | 
463 |           const handleIncrementClick = () => counterValue ++;
464 | 
465 |           return (
466 |             
    Counter value is: {value}
    
467 |             
468 |           )
469 |         }
470 |           
471 |
    472 |
    473 |
    474 | 475 |
    476 |
    477 |
    478 | 479 |
    480 |

    Component Styling

    481 |

    Lets see component styling in action

    482 |
    483 | 484 |
    485 |
    486 |
    487 | 488 |
    489 |

    Fetch External Data

    490 |

    Lets see fetching external data in action

    491 |
    492 | -------------------------------------------------------------------------------- /content/lectures/vuejs/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | lecture: false 3 | title: VueJS 4 | topics: [] 5 | --- 6 | 7 |
    8 |

    9 | The presentation is in PowerPoint format so 10 | click here 11 | to download it. 12 |

    13 |
    14 | -------------------------------------------------------------------------------- /content/lectures/vuejs/presentation.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/content/lectures/vuejs/presentation.pptx -------------------------------------------------------------------------------- /data/references.yml: -------------------------------------------------------------------------------- 1 | --- 2 | - title: Responsive Web Design with HTML5 and CSS - Third Edition 3 | image: img/responsive-web-design.png 4 | authors: 5 | - Ben Frain 6 | 7 | - title: "JavaScript: The Definitive Guide - 7th Edition" 8 | image: img/javascript.jpg 9 | authors: 10 | - David Flanagan 11 | 12 | - title: Mozilla Developer Network Web Docs 13 | link: https://developer.mozilla.org/en-US/ 14 | image: img/mdn.jpg 15 | 16 | - title: "Go Programming Language" 17 | image: img/go.jpg 18 | authors: 19 | - Alan Donovan 20 | - Brian Kernighan 21 | -------------------------------------------------------------------------------- /justfile: -------------------------------------------------------------------------------- 1 | default: 2 | @just --list 3 | 4 | # install required nodejs pacakges 5 | install: 6 | npm install --include=dev 7 | 8 | # run the dev server and you can give lecture 9 | dev: install 10 | hugo server 11 | -------------------------------------------------------------------------------- /layouts/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Internet Engineering 7 | 11 | 12 | 13 | 14 | {{ $js := readFile "node_modules/bootstrap/dist/js/bootstrap.js" | resources.FromString "bootstrap.js" | js.Build (dict "minify" hugo.IsProduction) }} 15 | 16 | {{ $style := readFile "node_modules/bootstrap/dist/css/bootstrap.css" | resources.FromString "bootstrap.css" | toCSS | minify }} 17 | 18 | 19 | 20 | 21 | 22 | Fork me on GitHub 27 | 28 |
    29 |
    30 |

    Internet Engineering

    31 |
    Last Update: {{ .GitInfo.AuthorDate.Format "January 2, 2006" }}
    32 |
    33 |

    34 | Web programming course contains material from backend to frontend 35 | development. This is technological course, so its materials may be 36 | deprecated soon, or they may be related only to specific technologies. 37 | 38 | More 39 |

    40 |

    Lectures 📜

    41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | {{ range $index, $page := sort ( 50 | where (where (where .Site.Pages "Type" "lectures") "Kind" "page") "Params.lecture" nil 51 | ) ".Params.index" "asc" 52 | }} 53 | 54 | 57 | 75 | 76 | {{ end }} 77 | {{ range $index, $page := 78 | where (where (where .Site.Pages "Type" "lectures") "Kind" "page") "Params.lecture" false 79 | }} 80 | 81 | 84 | 102 | 103 | {{ end }} 104 | 105 |
    Lecture
    55 |

    {{ $page.Params.index }}. {{ $page.Title }}

    56 |     		58 |
    59 | Slides 66 | PDF 73 |
    74 |
    82 |

    {{ $page.Title }}

    83 |     		85 |
    86 | Slides 93 | PDF 100 |
    101 |
    106 |

    References 📚

    107 |
    108 | {{ range $reference := .Site.Data.references }} 109 |
    110 |
    111 | 112 |
    113 |
    114 | {{ if $reference.link }} 115 |
    116 | {{ $reference.title }} 117 |
    118 | {{ else }} 119 |
    {{ $reference.title }}
    120 | {{ end }} 121 | {{ if $reference.authors }} 122 |
    Authors:
    123 |
      124 | {{ range $author := $reference.authors }} 125 |
    • {{ $author }}
      • 126 | {{ end }} 127 |
    128 | {{ end }} 129 |
    130 |
    131 | {{ end }} 132 |
    133 |
    134 | 135 | 136 | -------------------------------------------------------------------------------- /layouts/lectures/single.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | {{ .Title }} 11 | {{ $style := readFile "node_modules/reveal.js/dist/reveal.css" | resources.FromString "reveal.css" | minify }} 12 | 13 | {{ $style := readFile "node_modules/reveal.js/dist/theme/league.css" | resources.FromString "league.css" | toCSS | minify }} 14 | 15 | {{ $style := readFile "node_modules/reveal.js/plugin/highlight/monokai.css" | resources.FromString "monokai.css" | toCSS | minify }} 16 | 17 | {{ $style := resources.Get "scss/lecture.scss" | toCSS | minify }} 18 | 19 | 20 | 21 |
    22 |
    23 |
    24 |

    {{ .Title }}

    25 |
    Internet Engineering
    26 | {{ .Site.Params.semester }}
    27 | @1995parham 28 |
    29 | {{ .Content }} 30 |
    31 |
    32 | {{ $js := resources.Get "js/index.js" | js.Build (dict "minify" hugo.IsProduction) }} 33 | 34 | {{ $js := resources.Get "js/toc.ts" | resources.ExecuteAsTemplate (path.Join .File.Dir "toc.ts") 35 | .Params | js.Build (dict "minify" hugo.IsProduction) 36 | }} 37 | 38 | 39 | 40 | Fork me on GitHub 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ie-lecture", 3 | "version": "0.1.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "ie-lecture", 9 | "version": "0.1.0", 10 | "devDependencies": { 11 | "bootstrap": "^5.3.6", 12 | "prettier": "^3.5.3", 13 | "prettier-plugin-go-template": "^0.0.15", 14 | "reveal.js": "^5.2.1" 15 | } 16 | }, 17 | "node_modules/@popperjs/core": { 18 | "version": "2.11.8", 19 | "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", 20 | "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", 21 | "dev": true, 22 | "license": "MIT", 23 | "peer": true, 24 | "funding": { 25 | "type": "opencollective", 26 | "url": "https://opencollective.com/popperjs" 27 | } 28 | }, 29 | "node_modules/bootstrap": { 30 | "version": "5.3.6", 31 | "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.6.tgz", 32 | "integrity": "sha512-jX0GAcRzvdwISuvArXn3m7KZscWWFAf1MKBcnzaN02qWMb3jpMoUX4/qgeiGzqyIb4ojulRzs89UCUmGcFSzTA==", 33 | "dev": true, 34 | "funding": [ 35 | { 36 | "type": "github", 37 | "url": "https://github.com/sponsors/twbs" 38 | }, 39 | { 40 | "type": "opencollective", 41 | "url": "https://opencollective.com/bootstrap" 42 | } 43 | ], 44 | "license": "MIT", 45 | "peerDependencies": { 46 | "@popperjs/core": "^2.11.8" 47 | } 48 | }, 49 | "node_modules/prettier": { 50 | "version": "3.5.3", 51 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz", 52 | "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==", 53 | "dev": true, 54 | "license": "MIT", 55 | "bin": { 56 | "prettier": "bin/prettier.cjs" 57 | }, 58 | "engines": { 59 | "node": ">=14" 60 | }, 61 | "funding": { 62 | "url": "https://github.com/prettier/prettier?sponsor=1" 63 | } 64 | }, 65 | "node_modules/prettier-plugin-go-template": { 66 | "version": "0.0.15", 67 | "resolved": "https://registry.npmjs.org/prettier-plugin-go-template/-/prettier-plugin-go-template-0.0.15.tgz", 68 | "integrity": "sha512-WqU92E1NokWYNZ9mLE6ijoRg6LtIGdLMePt2C7UBDjXeDH9okcRI3zRqtnWR4s5AloiqyvZ66jNBAa9tmRY5EQ==", 69 | "dev": true, 70 | "license": "MIT", 71 | "dependencies": { 72 | "ulid": "^2.3.0" 73 | }, 74 | "engines": { 75 | "node": ">=14.0.0" 76 | }, 77 | "peerDependencies": { 78 | "prettier": "^3.0.0" 79 | } 80 | }, 81 | "node_modules/reveal.js": { 82 | "version": "5.2.1", 83 | "resolved": "https://registry.npmjs.org/reveal.js/-/reveal.js-5.2.1.tgz", 84 | "integrity": "sha512-r7//6mIM5p34hFiDMvYfXgyjXqGRta+/psd9YtytsgRlrpRzFv4RbH76TXd2qD+7ZPZEbpBDhdRhJaFgfQ7zNQ==", 85 | "dev": true, 86 | "license": "MIT", 87 | "engines": { 88 | "node": ">=18.0.0" 89 | } 90 | }, 91 | "node_modules/ulid": { 92 | "version": "2.4.0", 93 | "resolved": "https://registry.npmjs.org/ulid/-/ulid-2.4.0.tgz", 94 | "integrity": "sha512-fIRiVTJNcSRmXKPZtGzFQv9WRrZ3M9eoptl/teFJvjOzmpU+/K/JH6HZ8deBfb5vMEpicJcLn7JmvdknlMq7Zg==", 95 | "dev": true, 96 | "license": "MIT", 97 | "bin": { 98 | "ulid": "bin/cli.js" 99 | } 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /package.hugo.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ie-lecture", 3 | "version": "0.1.0" 4 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "comments": { 3 | "dependencies": {}, 4 | "devDependencies": {} 5 | }, 6 | "dependencies": {}, 7 | "name": "ie-lecture", 8 | "version": "0.1.0", 9 | "devDependencies": { 10 | "prettier": "^3.5.3", 11 | "bootstrap": "^5.3.6", 12 | "prettier-plugin-go-template": "^0.0.15", 13 | "reveal.js": "^5.2.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /static/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | min-height: 100vh; 3 | 4 | background-position: center; 5 | background-repeat: no-repeat; 6 | background-size: cover; 7 | background-image: url("../img/bg.jpg"); 8 | background-attachment: fixed; 9 | 10 | padding-top: 100px; 11 | } 12 | 13 | .container { 14 | background-color: rgba(255, 255, 255, 0.9); 15 | padding: 45px 45px; 16 | 17 | border-radius: 18px; 18 | } 19 | 20 | .header { 21 | text-align: center; 22 | } 23 | 24 | .news-status { 25 | cursor: default; 26 | user-select: none; 27 | -moz-user-select: none; 28 | -webkit-user-select: none; 29 | display: inline-block; 30 | padding: 5px; 31 | margin-left: 10px; 32 | border: 1px solid orange; 33 | border-radius: 5px; 34 | color: orange; 35 | } 36 | 37 | .email-container { 38 | color: #555; 39 | text-align: left; 40 | border-radius: 4px; 41 | border: 1px solid #888; 42 | padding: 10px; 43 | margin-bottom: 5px; 44 | } 45 | 46 | .reference { 47 | display: flex; 48 | flex-direction: row; 49 | flex-wrap: wrap; 50 | justify-content: space-around; 51 | margin-top: 50px; 52 | } 53 | 54 | .reference .text { 55 | width: 25%; 56 | } 57 | 58 | .reference .image { 59 | width: 25%; 60 | display: flex; 61 | justify-content: center; 62 | } 63 | 64 | .reference .image img { 65 | max-height: 300px; 66 | } 67 | -------------------------------------------------------------------------------- /static/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/static/img/bg.jpg -------------------------------------------------------------------------------- /static/img/forkme_right_orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/static/img/forkme_right_orange.png -------------------------------------------------------------------------------- /static/img/go.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/static/img/go.jpg -------------------------------------------------------------------------------- /static/img/hands-on.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/static/img/hands-on.gif -------------------------------------------------------------------------------- /static/img/javascript.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/static/img/javascript.jpg -------------------------------------------------------------------------------- /static/img/mdn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/static/img/mdn.jpg -------------------------------------------------------------------------------- /static/img/responsive-web-design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/1995parham-teaching/ie-lecture/2a0d761c3820ef103fad7acd7f734b4a08b368bf/static/img/responsive-web-design.png --------------------------------------------------------------------------------