├── .github ├── ISSUE_TEMPLATE │ ├── lecture-content.md │ ├── looking-ahead.md │ └── website-issues.md ├── checkURL-template.md ├── dependabot.yml └── workflows │ └── main.yml ├── .gitignore ├── .vscode ├── extensions.json └── settings.json ├── 404.html ├── README.md ├── _config.yml ├── _extras └── statcounter ├── _lectures ├── css.md ├── design.md ├── explanation.md ├── http.md ├── js.md ├── node.md ├── node2.md ├── security.md └── sessions.md ├── _practicals ├── assignment-css-node.md ├── assignment-http-design.md ├── assignment-js-node.md ├── assignment-rubric.md ├── nodeschool-exercises.md ├── sample-exams.md └── vsc-usage.md ├── cast ├── mit-telnet-openssl.cast ├── node-authorization.cast ├── node-ejs.cast ├── node-file-reading.cast ├── node-file-watching.cast ├── node-install-express.cast ├── node-repl.cast └── ping-example.cast ├── checkURLsInMarkdown.js ├── exams ├── final-cse1500-201920-solutions.pdf ├── final-cse1500-202122-solutions.pdf ├── midterm-cse1500-201819-solutions.pdf ├── midterm-cse1500-201819.pdf ├── midterm-resit-cse1500-201819-solutions.pdf ├── midterm-resit-cse1500-201819.pdf └── midterm-resit-cse1500-202122.pdf ├── images ├── noun_landscape_1647184.png └── test.md ├── img ├── A1-games.png ├── A2-completed.png ├── A3-game-CSS-completed.png ├── A3-splash-CSS-completed.png ├── RME-grading.png ├── RME-materials.png ├── RME-vsc.png ├── Screenshot_2020-08-27 Ballons a two player word game CSS GRID.png ├── Screenshot_2020-08-27 Ballons a two player word game with grid.png ├── VSC-debug-conf.png ├── VSC-debug.png ├── VSC-extensions-install.png ├── VSC-github-settings.png ├── VSC-liveshare-install.png ├── VSC-liveshare-use.png ├── VSC-source.png ├── VSC-sync.png ├── boardgame-chess.png ├── boardgame-delft.png ├── boardgame-draughts.png ├── boardgame-hex.png ├── boardgame-ludo.png ├── boardgame-mastermind.png ├── boardgame-reversi.png ├── codepen-broken-glasses.png ├── codepen-bw.png ├── codepen-cloud.png ├── codepen-fire.png ├── codepen-leaf1.png ├── codepen-leaf2.png ├── codepen-leaf3.png ├── codepen-leaf4.png ├── codepen-leaf5.png ├── codepen-leaf6.png ├── codepen-leaf7.png ├── codepen-logs.png ├── codepen-raindrop.png ├── codepen-searchlight.png ├── codepen-snow.png ├── codepen-thunder.png ├── codepen-wind.png ├── css-abs-fixed.mov ├── css-broken-glasses.png ├── css-button.png ├── css-bw.png ├── css-chrome-text-decoration.png ├── css-cite.png ├── css-cloud-pseudoelement.png ├── css-cloud.png ├── css-color-theme.png ├── css-color-theme2.png ├── css-colors.png ├── css-cross.png ├── css-cse1500-responsive.mov ├── css-data-attribute.png ├── css-debugging.png ├── css-devtools-curl.png ├── css-dom-tree-simple.png ├── css-dom-tree.png ├── css-due.png ├── css-eggs-absolute.png ├── css-eggs-relative.png ├── css-eggs.png ├── css-enabled-disabled.png ├── css-ex1-test.png ├── css-fire.png ├── css-firefox-link.png ├── css-fixed-absolute.gif ├── css-flags-absolute.png ├── css-flags-initial.png ├── css-flags-relative.png ├── css-float.png ├── css-glass-window.png ├── css-grid-explanation.svg ├── css-grid-step1.png ├── css-grid-step2.png ├── css-grid-step3.png ├── css-grid-step4.png ├── css-grid-step5.png ├── css-grid-step6.png ├── css-grid-step7.png ├── css-grid-step8.gif ├── css-leaf1.png ├── css-leaf2.png ├── css-leaf3.png ├── css-leaf4.png ├── css-leaf5.png ├── css-leaf6.png ├── css-leaf7.png ├── css-lightning.png ├── css-logs.png ├── css-mobile-screen.png ├── css-overflow-ellipsis.png ├── css-printmedia.png ├── css-pseudo-classes.png ├── css-rain.png ├── css-raindrop.png ├── css-searchlight.png ├── css-selector-combinations.png ├── css-sidebars.png ├── css-snow.png ├── css-text-animation.mov ├── css-thunder.png ├── css-tobe.png ├── css-tudelft.png ├── css-user-select.png ├── css-valid-invalid.png ├── css-weather.png ├── css-wind.png ├── design-appcache.png ├── design-coffeecompany.png ├── design-cycle.png ├── design-ebay.png ├── design-ebay2.png ├── design-google.png ├── design-google2.png ├── design-html5-form.png ├── design-inputDate-firefox.png ├── design-inputDate-safari.png ├── design-inspector.png ├── design-koopplein.png ├── design-performance.png ├── design-performance2.png ├── design-search.png ├── design-surveymonkey.png ├── design-twitter.png ├── design-windows95.png ├── design-zdnet-2001.png ├── design-zdnet-2014.png ├── exam.png ├── github-error500.png ├── http-OSI.png ├── http-basicauth.png ├── http-cache-control.png ├── http-devtools.png ├── http-devtools2.png ├── http-fatURLs.png ├── http-http-req-res.png ├── http-lynx-amazon.png ├── http-lynx-google.png ├── http-nytimes-example.png ├── http-redirect.png ├── http-twitter-example.png ├── http-web.png ├── http-webcache.png ├── http-websocket.png ├── index-webstack.png ├── js-console-assert.png ├── js-console-table.png ├── js-event-listeners.png ├── js-example1.png ├── js-example2.png ├── js-example3.png ├── js-example4.png ├── js-example5.png ├── js-example6.png ├── js-example7.png ├── js-github.png ├── js-indexeddb.png ├── js-jsdoc-example.png ├── js-mountain.png ├── js-prototypechain.png ├── js-ts-check.png ├── no-zoom.png ├── node-book.png ├── node-debug.png ├── node-event-loop.png ├── node-file-structure.png ├── node-nodejs-clientjs.png ├── node-splash-statistics.png ├── node-tcp-js-2.png ├── node-tcp-js.png ├── node-todo-app.png ├── node-vsc-watching.png ├── node-watch.png ├── node-websocket.png ├── node-ws-multiplayer.png ├── node-xhr.png ├── node2-ejs-js.png ├── node2-express.png ├── node2-html-manually.png ├── node2-middleware.png ├── node2-module.png ├── node2-regex-app.png ├── node2-templating.png ├── security-aws.png ├── security-browser-warning-juiceshop.png ├── security-browser-warning.png ├── security-captcha.png ├── security-cern-1.png ├── security-cern-2.png ├── security-nodegoat.png ├── security-os-command-injection.png ├── security-security-report-1.png ├── security-security-report-2.png ├── security-security-report-3.png ├── security-security-report-4.png ├── security-sessions.png ├── sessions-aboutdebugging.png ├── sessions-cookie-basics.png ├── sessions-cookies-browser.png ├── sessions-extension.png ├── sessions-localstorage.png ├── sessions-node-cookies-ex.png ├── sessions-node-sessions-ex.png ├── sessions-oauth2-1.png ├── sessions-oauth2-2.png ├── sessions-oauth2-3.png ├── sessions-quora.png ├── sessions-sessions.png ├── sessions-storage.png ├── sessions-third-party-cookies.png └── virtualisation.png ├── index.md └── package.json /.github/ISSUE_TEMPLATE/lecture-content.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Lecture content 3 | about: Any issues related to missing/vague/incorrect content. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Lecture 11 | Which lectures? 12 | * [ ] HTTP 13 | * [ ] HTML & design 14 | * [ ] JavaScript 15 | * [ ] Node.js 16 | * [ ] CSS 17 | * [ ] Node.js II 18 | * [ ] Sessions 19 | * [ ] Web security 20 | 21 | ## What is the issue? 22 | Describe the issue ... 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/looking-ahead.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Looking ahead 3 | about: 'Ideas for future course offerings ' 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Lecture 11 | Which lecture(s) are we talking about? 12 | 13 | ## Idea 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/website-issues.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Website issues 3 | about: Anything related to the look and feel of the website 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## What is the problem? 11 | Describe what the issue is 12 | 13 | ## Browser 14 | What is your browser (including the version)? 15 | 16 | ## Operating system 17 | -------------------------------------------------------------------------------- /.github/checkURL-template.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: URL check executed 3 | --- 4 | Number of errors found: {{ env.ERRORS }}. 5 | Number of 404 status codes found: {{ env.CODES404 }}. 6 | Check the Actions tab for the full list of errors/400+ status codes. -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: npm 4 | directory: "/demo-code/balloons-game" 5 | schedule: 6 | interval: daily 7 | time: "04:00" 8 | open-pull-requests-limit: 10 9 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | # Name of workflow 2 | name: Check all URLs 3 | 4 | # Run workflow once a week 5 | on: 6 | workflow_dispatch: 7 | schedule: 8 | - cron: '15 1 * * 1' 9 | 10 | # Steps to carry out 11 | jobs: 12 | build: 13 | # Create a ubuntu virtual machine 14 | runs-on: ubuntu-latest 15 | 16 | # Checkout repo code 17 | steps: 18 | - name: Checkout repo 19 | uses: actions/checkout@v2 20 | 21 | # Install node 22 | - name: Use Node.js 23 | uses: actions/setup-node@v1 24 | with: 25 | node-version: 10.16 26 | - run: npm install 27 | - run: npm run build --if-present 28 | - run: npm test 29 | env: 30 | CI: true 31 | 32 | # Run script checkURLsinMarkdown.js 33 | # Show the results 34 | - name: Check URLs 35 | run: |- 36 | node checkURLsInMarkdown.js 37 | echo "::set-output name=errors::$(grep '^\[ERROR' urlCheck.txt |wc -l)" 38 | echo "::set-output name=codes404::$(grep '^\[404' urlCheck.txt |wc -l)" 39 | id: check 40 | 41 | # Make the output file available as an artifact 42 | - name: Uploading artifact 43 | uses: actions/upload-artifact@v2 44 | with: 45 | name: urlCheck 46 | path: urlCheck.txt 47 | 48 | # Create an issue with the number of errors found 49 | - name: Create an issue 50 | uses: JasonEtco/create-an-issue@v2 51 | env: 52 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 53 | ERRORS: ${{ steps.check.outputs.errors }} 54 | CODES404: ${{ steps.check.outputs.codes404 }} 55 | with: 56 | filename: .github/checkURL-template.md 57 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules/ 2 | **/bin/ 3 | **/package-lock.json 4 | .vscode/launch.json 5 | *tmp.html 6 | .DS_Store 7 | tmp.js 8 | tmp.html 9 | .DS_Store 10 | tmp.css 11 | styles.css 12 | generatedPDFs/*.pdf 13 | .DS_Store 14 | urlCheck.txt 15 | .prettierrc 16 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "yzhang.markdown-all-in-one", 4 | "yzane.markdown-pdf" 5 | ] 6 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "markdown-pdf.convertOnSave": false, 3 | "markdown-pdf.convertOnSaveExclude": [ 4 | "README.md", 5 | "index.md", 6 | "sample-exams.md", 7 | "vsc-usage.md", 8 | "nodeschool-exercises.md" 9 | ], 10 | "markdown-pdf.outputDirectory": "generatedPDFs", 11 | "markdown-pdf.footerTemplate": "
CSE1500, lecture materials developed by C. Hauff, Pages /
", 12 | "markdown-pdf.headerTemplate": "
", 13 | "files.exclude": { 14 | "**/.classpath": true, 15 | "**/.project": true, 16 | "**/.settings": true, 17 | "**/.factorypath": true 18 | }, 19 | "cSpell.words": [ 20 | "bangbang", 21 | "crowdsourcing", 22 | "cybersecurity", 23 | "mousemove", 24 | "templating", 25 | "whitespaces" 26 | ] 27 | } -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /404.html 3 | layout: default 4 | --- 5 | 6 | 19 | 20 |
21 |

404

22 | 23 |

Page not found :(

24 | 25 |
26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web technology course materials 2 | 3 | This repository contains the web technology course materials for the CSE1500 Web and Database Technology course at TU Delft. Last updated for the 2021/22 course edition. **There will be no more updates in the future.** 4 | 5 | ## Contributors 6 | 7 | Creating such transcripts is not a job for a single person, but a group effort! All contributors to this repository can be found on the [Contributors](https://github.com/chauff/Web-Teaching/graphs/contributors) tab! 8 | 9 | ## Inspired by 10 | 11 | The transcript grew initially out of course material derived from the [Learning Web App Development](https://www.oreilly.com/library/view/learning-web-app/9781449371388/) book, the [Express documentation](https://expressjs.com/en/api.html), the [HTTP: the definite guide](https://www.oreilly.com/library/view/http-the-definitive/1565925092/) book, [The Book of CSS3](https://thebookofcss3.com/) and code samples/examples from the [MDN Web Docs](https://developer.mozilla.org/en-US/). Over the years it has been refined. 12 | 13 | ## Related repositories 14 | 15 | - [CSE1500 demo game](https://github.com/chauff/balloons-game) 16 | - [CSE1500 code examples](https://github.com/chauff/demo-code) 17 | - [CSE1500 website theme](https://github.com/chauff/cse-theme/) 18 | 19 | # Setup notes 20 | 21 | Two Visual Studio Code extensions are important for this setup to remain efficient: [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf) (to generate PDFs of the lectures and assignments) and [Markdown All In One](https://github.com/yzhang-gh/vscode-markdown) to automatically create/update table of contents. 22 | 23 | The PDFs are no longer available on GitHub (in order to limit the repository's size). They can be generated with the Markdown PDF Visual Studio Code extension. 24 | 25 | The transcripts are written in US English. 26 | 27 | GitHub Actions workflow: after a manual trigger (head to the Actions tab to trigger) or on a weekly basis, all links are extracted from the Markdown files in this repo (except README.md) and their returned status code is recorded. Anything beyond a status code 400 should be checked. The report resides as artifact on the Actions tab and is called `urlCheck`. 28 | 29 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | baseurl: "/cse1500-web-transcripts/" 2 | remote_theme: chauff/cse-theme 3 | 4 | collections: 5 | lectures: 6 | output: true 7 | sort_by: ordering 8 | practicals: 9 | output: true 10 | sort_by: ordering 11 | extras: 12 | output: true 13 | 14 | line1Title: CSE1500 15 | line2Title: Web Technology 16 | line3Title: Node.js, JavaScript, CSS, HTTP, HTML 17 | tabTitle: CSE1500 TU Delft course materials. 18 | warning: The materials were last updated in 2022. They will not be updated going forward. 19 | exam: false 20 | smallNavbar: true 21 | timeSpent: true 22 | idleTimeout: 60 23 | 24 | footerImage: ../images/tudelft-ewi-light-footer.svg 25 | headerImage: ../images/tudelft_ewi_bw.jpg 26 | cssTheme: themes/light-grey.css 27 | cssCodeTheme: themes/code/dracula.css 28 | 29 | plugins: 30 | - jemoji 31 | - jekyll-remote-theme 32 | 33 | markdown: kramdown 34 | # !github-pages! mandatory › https://help.github.com/articles/using-jekyll-with-pages/#configuration-settings-you-cannot-change 35 | # Since Jekyll 3 the default highlighter is Rouge (replaced Pygments.rb in v44) 36 | highlighter: rouge 37 | 38 | # More › http://kramdown.gettalong.org/quickref.html 39 | # Options › http://kramdown.gettalong.org/options.html 40 | kramdown: 41 | input: GFM 42 | # https://github.com/jekyll/jekyll/pull/4090 43 | syntax_highlighter: rouge 44 | 45 | # Rouge Highlighter in Kramdown › http://kramdown.gettalong.org/syntax_highlighter/rouge.html 46 | # span, block element options fall back to global 47 | syntax_highlighter_opts: 48 | # Rouge Options › https://github.com/jneen/rouge#full-options 49 | css_class: "highlight" 50 | #line_numbers: true # bad idea, spans don't need linenos and would inherit this option 51 | span: 52 | line_numbers: false 53 | block: 54 | line_numbers: true 55 | -------------------------------------------------------------------------------- /_extras/statcounter: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 5 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /_lectures/explanation.md: -------------------------------------------------------------------------------- 1 | *At times we use ☝️ and 👇 to make it clear whether an explanation refers to the code snippet above or below the text. The :bangbang: sign is added to code examples you should run yourself. When you come across a `DEBUG` box, we offer advice on how to debug your code—this may help you with your assignments. Neither `DEBUG` nor `OPTIONAL` content are exam material.* -------------------------------------------------------------------------------- /_practicals/assignment-css-node.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | permalink: /assignmentIII/ 4 | linkname: Assignment CSS+Node 5 | ordering: 3 6 | warning: true 7 | --- 8 | 9 | # Assignment CSS+Node 10 | 11 | In the first part of this assignment, you will employ *CSS* to style your splash and game screens. 12 | 13 | In the second part of this assignment, you will implement a number of smaller items, that each do not take a lot of time, but round off your application and showcase additional abilities of Node.js and the browser. 14 | 15 | ## 0. Preliminaries 16 | 17 | Remember that this is a group assignment! Work efficiently as a team! Both team members **must contribute to the code** and **both team members must understand the code**. The group interview will focus on having the required functionality and showing off your understanding of the code. 18 | 19 | ### Overview of deliverables and upload procedure 20 | 21 | | **Task** | **Deliverables** | 22 | |:-----|:---------------------------------------------------| 23 | | 1.1 | CSS | 24 | | 1.2 | CSS | 25 | | 1.3 | CSS | 26 | | 1.4 | →→→ upload 1.1 / 1.2 to your thread on Brightspace | 27 | | 2 | Source code | 28 | | 3 | - | 29 | | 4 (optional) | →→→ upload URL to your thread on Brightspace | 30 | 31 | This assignment requires you to finalize your application's source code and thus there is **no** PDF to submit. 32 | 33 | Submit your code in the form of a zipped folder. Make sure that your code contains the necessary `package.json` file to install/run the code, i.e. it should be sufficient to run `npm install` and `npm start` to start the server. Any specific configuration parameters your code requires should be described in an accompanying `README` file. 34 | 35 | *Note: we expect one zipped code submission, we do **not** want one code submission per task!* 36 | 37 | The code has to be uploaded by one of the team members to 💡 Brightspace under **CSE Web assessment** (find the category your group belongs too) before the assessment session with the teaching assistant and before the ultimate assessment deadline. This means that the outcomes of all web technology assignments are uploaded to the same directory! 38 | 39 | **To pass this assignment, you must have employed the necessary CSS and use templating. You pass if your app can deal with players executing the game as intended** (already achieved in the previous assignment) **AND with players trying to make at least some invalid moves**. **You cannot pass this last web assignment without having passed the previous web assignment.** The [rubric](../rubric/) contains example questions for each assignments. During the assessment you can make use of your notes. 40 | 41 | ## 1. CSS 42 | 43 | Now is the time to style your splash and game screens with CSS. Do **not** use external libraries or preprocessing tools. 44 | 45 | Style the game so that it looks and works well on a laptop/desktop device, i.e. we are considering screen resolutions of ~1366x768 or higher. We are **not** concerned about apps for mobile devices or responsive designs. 46 | 47 | As you might have already guessed, your CSS should reside in `myapp/public/stylesheets`. That folder already contains a `style.css` boilerplate file. In order to keep your code maintainable, you can for instance place all CSS that applies to both the game and splash screens in `style.css` and in addition create separate `splash.css` and `game.css` stylesheets for CSS rules specific to each screen. Note that stylesheets [can contain other stylesheets](https://developer.mozilla.org/en-US/docs/Web/CSS/@import). 48 | 49 | ### 1.1) 50 | 51 | First, work on your **splash screen** and style the page with CSS according to your design. To ensure that everyone learns the basics of CSS, we provide a list of **must-have** CSS properties. Your code must include **at least** one instance of each of the following: 52 | 53 | - pseudo-classes `:hover` and `:active`; 54 | - pseudo-elements `::after` and `::before`; 55 | - `display:grid` and `position:absolute`; 56 | - a CSS animation. 57 | 58 | 59 | 👉 A few pointers: 60 | 61 | - CSS examples are plentiful on the web; you can adapt them to your own needs. Make sure though, that you **understand** the different CSS rules you are adding and are able to **explain** their effect. If in doubt, prefer simpler CSS rules, often the same effect can be achieved in a myriad of ways. 62 | - If you are looking at [CSS examples from CodePen](https://codepen.io/) or similar platforms for inspiration, be aware of the fact that CSS extensions such as [Sass](https://sass-lang.com/) exist. Do **not** use those, in this course we make use of *plain CSS*. 63 | - If you want to center text vertically and horizontally within an element `el`, you can use the following CSS snippet to achieve this effect: `el { display: flex; justify-content: center; align-items: center;}`. We do not introduce the [flexbox layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) in the lecture transcripts as there is only so much we can cover. There is thus no need to use it. If you want to center some text though (which before the introduction of flexbox was a real pain!), this snippet will make it easy. 64 | 65 | 66 | ### 1.2) 67 | 68 | Next, tackle the CSS for your **game screen**. The look of the game screen should be coherent with the splash screen. The two are likely to share basic CSS settings (colors, fonts, etc.); try to be efficient and do not duplicate existing CSS code. 69 | 70 | Your code for the game screen must have at least one instance of each of the requirements listed in 1.1). 71 | 72 | 73 | In a board game, you may want to assign elements (tiles, cards, etc.) a different status depending on player actions, e.g. a game token moves from tile A to B. An effective manner to achieve this is to assign different CSS classes depending on a tile's state. In JavaScript, `document.getElementById(id).className += " anotherClass";` adds a CSS `class` to an element. 74 | 75 | 76 | 77 | ### 1.3) 78 | 79 | To ensure that your players are aware of the screen size limitations (i.e. the game works well on a larger screen), use [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to **alert players** if their screen resolution is below a sufficiently large minimum. How exactly the alert looks like is up to you. What exactly the screen resolution minimum is, is up to you. There is no need to actually try your app on different physical devices, Firefox (other major browsers have similar tooling) has a [Responsive Design Mode](https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode) tool that provides good simulations of various devices. 80 | 81 | ### 1.4) 82 | 83 | Once you have completed the CSS of your app, head over to the Brightspace forum and find the thread you posted your initial wireframe designs in. Add your implemented design screenshots to the same thread. *Does your implementation deviate significantly from your initial design?* If so, write a paragraph comparing the two. 84 | 85 | *Feel free to browse your colleagues' designs and implementations and comment on them!* 86 | 87 | ## 2. Templating 88 | 89 | When you started out and generated the boilerplate code, we asked you to set as *view engine* `ejs`. Let us now make use of that view engine for the **splash screen**. If you followed our assignment instructions, so far, not a lot is going on with it; it should visually look appealing and have a *Play* button, but that's about it. 90 | 91 | One last requirement for the splash screen is to show three statistics such as number of games played, number of games ongling, etc. (what exactly to display is up to you). Templates offer us a way to *inject* those numbers into our splash screen. 92 | 93 | There are many view engines available, `ejs` is one of the more common ones. What we have to do now is to create a `splash.ejs` file in folder `myapp/views/` as this folder is the default one the view engine is looking for content. Initially, `splash.ejs` is a copy of your `splash.html` file. Add a few template tags for the game statistics in the right place. If you are unsure what exactly to do, take a look at our demo game's [splash.ejs](https://github.com/chauff/balloons-game/blob/master/views/splash.ejs) file. Then, rewrite a few lines of `app.js` to incorporate the view engine and alter the route to `/`; it should now use the `res.render` call. This code snippet can help you: 94 | 95 | ```javascript 96 | //code snippet, not a complete piece of code! 97 | const app = express(); 98 | ... 99 | //only the route to / needs to be changed 100 | app.set('view engine', 'ejs') 101 | app.get('/', function(req, res) { 102 | //example of data to render; here gameStatus is an object holding this information 103 | res.render('splash.ejs', { gamesInitialized: gameStatus.gamesInitialized, gamesCompleted: gameStatus.gamesCompleted }); 104 | }) 105 | ``` 106 | 107 | *Note: in the lecture transcript we covered Ajax, which is an alternative approach to templating for our use case of presenting game statistics. Both technologies are relevant in practice.* 108 | 109 | ## 3. Cleaning up 110 | 111 | Ensure that your app works as intended in two major browsers. 112 | 113 | Ensure that your code contains the necessary `package.json` file content to install/run the code, i.e. it should be sufficient to take your `myapp` folder, and run `npm install` and `npm start` to start the server. Any specific configuration parameters your code requires should be described in an accompanying `README` file. 114 | 115 | 🎆🎆🎆🎆🎆 **Well done!** If you have reached this point, you have a fully functioning game. 116 | 117 | You now have three options: 118 | 119 | - Be glad you made it and call it a day! 120 | - Deploy your game on a publicly accessible server and let others play it! 121 | - Make a screencast showing off your game! 122 | 123 | ## 4. Optional: game deployment / video 124 | 125 | ### Short-term deployment 126 | 127 | To make your game accessible to the public, it needs to be deployed somewhere—`locahost:3000` only goes so far. 128 | 129 | For short-term deployments (a few minutes/hours), e.g. to show off your game quickly, [ngrok](https://ngrok.com/) is a good solution. You can run your server on localhost and expose it through a public URL. *Please do **NOT** run any privacy-sensitive apps this way, as all traffic passes through ngrok servers!* 130 | 131 | ### Longer-term deployment 132 | 133 | ngrok is not a solution for an actual deployment. [Heroku](https://www.heroku.com/) (among other platforms) is. Heroku is a cloud platform that has a free account tier, suitable for web applications without a lot of traffic. You can deploy a Node.js application following their [instructions](https://devcenter.heroku.com/articles/getting-started-with-nodejs). 134 | 135 | ### Make a screencast 136 | 137 | As an alternative, make a screencast of your game and upload it to a video hosting platform such as [vimeo](https://vimeo.com/upload) or [YouTube](https://www.youtube.com/). 138 | 139 | Once you have deployed or recorded your app, head over to your thread on Brightspace which already contains your game design and game screenshots and post the URL to the game or the screencast. Take a look at what your fellow study colleagues produced and comment away. 140 | -------------------------------------------------------------------------------- /_practicals/assignment-http-design.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | permalink: /assignmentI/ 4 | linkname: Assignment HTTP+Design 5 | ordering: 1 6 | warning: true 7 | --- 8 | 9 | # Assignment HTTP+Design 10 | 11 | The first part of this assignment gives you hands-on experience with **HTTP**. In the second part you will make a head start with the design of your **board game web application** (which you will further develop the next two assignments). 12 | 13 | ## 0. Preliminaries 14 | 15 | Remember that this is a group assignment! Work efficiently as a team! Use this assignment to set up a collaborative coding environment within your team. The next assignment will require extensive JavaScript programming that both team members need to contribute to. 16 | 17 | ### Overview of deliverables and upload procedure 18 | 19 | If you get lost within the assignment, use this overview of deliverables to get back on track! 20 | 21 | | **Task** | **Deliverables** | 22 | |:-----|:---------------------------------------------------| 23 | | 1.1 | HTTP requests | 24 | | 1.2 | Answer Q1.2 | 25 | | 1.3 | Answer Q1.3 | 26 | | 1.4 | Answer Q1.4 | 27 | | 2.1 | Answer Q2.1 | 28 | | 2.2 | Answer Q2.2 | 29 | | 3.1 | Answer Q3.1 | 30 | | 3.2 | Answer Q3.2 | 31 | | 4.1 | Chosen game type | 32 | | 4.2 | Three game screens (include the game URL) | 33 | | 4.3 | Description of six (three pos., three neg.) game features | 34 | | 5.1 | Splash screen design (wireframe) | 35 | | 5.2 | Game screen design (wireframe) | 36 | | 5.3 | →→→ upload 5.1/5.2 to 💡 Brightspace | 37 | | 6 | Two html files | 38 | 39 | All deliverable text/imagery (apart from 6. which are two html files) must be included in a single PDF file. The first page of this PDF must contain the names and student numbers of the two team members as well as the team id (the group you signed up for on Brightspace). 40 | 41 | The PDF and code have to be uploaded by one of the team members to 💡 Brightspace under **CSE Web assessment** (find the category your group belongs too) before the assessment session with the teaching assistants and before the ultimate assessment deadline. This means that the outcomes of all web assignments are **all** uploaded to the same directory! 42 | 43 | **To pass this assignment, you must have completed all tasks and be able to answer the questions of the TAs.** The [rubric](../rubric/) contains example questions for each assignment. During the assessment you can make use of your notes. 44 | 45 | ## 1. HTTP request messages: GET/HEAD 46 | 47 | 48 | 👉 Let us start with a few pointers: 49 | 50 | - This assignment requires you to work on the shell. If you are not familiar with this type of command line interface, take a look at this [MIT class](https://missing.csail.mit.edu/); it covers the *missing semester of computer science education* and introduces a range of practical tools, including in lesson 1 [the shell](https://missing.csail.mit.edu/2020/course-shell/). This [YouTube video](https://www.youtube.com/watch?v=ZtqBQ68cfJc) covers 50 popular Linux \& terminal commands. 51 | - To store `telnet`'s or `openssl`'s output to file (in addition to printing it on the console), you can use the command `tee`, e.g. `telnet www.tudelft.nl 80|tee out` will save all output to a file called `out`. 52 | - To exit a telnet session, first press CTRL+]. This brings you to a `telnet>` prompt and you can type `close` to end the session. 53 | - Be aware that `some-domain.com` is not the same as `www.some-domain.com`. 54 | - A [carriage return](https://developer.mozilla.org/en-US/docs/Glossary/CRLF) in the code snippets below indicates when an empty line is expected. Press `` to add it. 55 | - Be aware of the **backspace key** when working in the terminal: while on a normal command line a backspace deletes the last character typed, within the `telnet`/`openssl` environment this key may be forwarded to the server instead. Be aware! 56 | - If you are a Windows user, use the Windows Subsystem for Linux. 57 | 58 | 59 | Here is **your task**: Use `telnet` and `openssl` (where appropriate) to request the `/r/TUDelft` resource from Reddit. Start your *conversation* with the web server by typing the following into the terminal :point_down:, and then perform HTTP requests to ultimately fetch the `/r/TUDelft` resource: 60 | 61 | ``` 62 | telnet reddit.com 80 63 | ``` 64 | 65 | ### 1.1) 66 | 67 | Write down the HTTP requests you made, the returned responses (e.g. a page has temporarily/permanently moved or is faulty) until you receive the desired contents with status code `200 OK`. Always use `HEAD` first to retrieve meta-­data about the resource. 68 | 69 | ### 1.2) 70 | 71 | Does the content you received correspond to what you see when accessing the resource with your browser? 72 | 73 | ### 1.3) 74 | 75 | Open your browser's developer tools and head to `https://www.reddit.com/r/TUDelft/`. Take a look at the response header of the first resource retrieved with status code `200 OK`: what does its `Cache-Control` header field mean? 76 | 77 | ### 1.4) 78 | 79 | If we stick to the resource considered in 1.3), what do we learn about the type of encodings your browser supports? 80 | 81 | ## 2. HTTP request messages: PUT 82 | 83 | While `GET` and `HEAD` are request methods accepted by virtually all web servers, `PUT`, `POST` and `DELETE` are less often available, due to the implications these methods have on the server. 84 | 85 | To test your skills in uploading data, we will make use of [http://httpbin.org/](http://httpbin.org/), a popular site designed to test HTTP messages. As this is an `http`-based site (instead of `https`), we will continue our use of `telnet`. 86 | 87 | Below is an example of how to upload data to the server with `PUT` (before you type it out, please read the explanations below) :point_down:: 88 | 89 | ``` 90 | telnet httpbin.org 80 91 | 92 | PUT /put HTTP/1.1 93 | host:httpbin.org 94 | Content-type:text/plain 95 | Content-length:12 96 | 97 | Hello World! 98 | 99 | ``` 100 | 101 | [Carriage return](https://developer.mozilla.org/en-US/docs/Glossary/CRLF) in the code snippets indicates when an empty line is expected. Press `` to add it. 102 | 103 | With this code :point_up:, we have modified the resource accessible at `/put` to now hold the string `Hello World!`. **The httpbin server sends back in the response the data just uploaded**—the response is of content-­type JSON. We are interested in the `data` field, which should contain `Hello World!` if everything worked correctly. Try it for yourself! 104 | 105 | `PUT` though is not only able to modify an existing resource, it can also **create** a resource on the server. The status code in the response tells us whether a resource was modified (`200 OK`) or created (`201 Create`). More information can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/PUT). 106 | 107 | ### 2.1) 108 | 109 | What happens if you try to replace `/put` in this exercise with another resource (e.g. `/myfile`)? Does the httpbin.org server allow the creation of a new resource? 110 | 111 | ### 2.2) 112 | 113 | The `Content-­length` is exactly the number of characters (12 - we count the whitespace as well!) of `Hello World!`. What happens if the `Content-length` field is smaller or larger than the exact number of characters in the content? 114 | 115 | 116 | ## 3. Basic authentication 117 | 118 | Let us now try to request a page that is set up with HTTP basic authentication. 119 | 120 | ### 3.1) 121 | 122 | First, open [http://httpbin.org/basic-auth/user/passwd](http://httpbin.org/basic-auth/user/passwd) in your browser. You should see a dialogue, requesting username and password. Use `user` as username and `passwd` as password (*it is just a coincidence that the actual username and password is the same as the URL path*). Reload the web page—do you have to fill in the login details again? Why or why not? 123 | 124 | ### 3.2) 125 | 126 | Now let's see how this works with actual HTTP messages. Go back to telnet and start off with a `HEAD` method to inspect the web page; document all following steps (requests and responses) :point_down:: 127 | 128 | ``` 129 | telnet httpbin.org 80 130 | 131 | HEAD /basic-auth/user/passwd HTTP/1.1 132 | host:httpbin.org 133 | 134 | ``` 135 | 136 | Which status code do you receive now? 137 | 138 | Next, use the `Authorization: Basic [base-64 encoded username/password string]` header field (you can type it out right after the `host:httpbin.org` line above) to provide username and password to the server. To encode the username and password, you can use any of the freely available base-­64 en/decoders online. 139 | Remember that username and password need to be combined as `username:password` **before** they are encoded in base-64. 140 | 141 | Now close the TCP connection and start a new one, using again :point_down:: 142 | 143 | ```` 144 | telnet httpbin.org 80 145 | ```` 146 | 147 | Request the same page without the `Authorization` header field—what happens? Is the behavior the same as reloading the page in the browser? Explain why / why not. 148 | 149 | ## 4. Web programming project: board game app 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | In this, and the upcoming two assignments, you will complete a web programming project: you will implement a classic **board game with a design that is related to Delft**. 159 | 160 | 161 | 162 | You can choose from six games: 163 | 164 | 1. [Connect Four](https://en.wikipedia.org/wiki/Connect_Four): 2 players. 165 | 2. [Ludo](https://en.wikipedia.org/wiki/Ludo_(board_game)): 2-4 players. **It is sufficient if you implement a working game for two players.** 166 | 3. [Draughts](https://en.wikipedia.org/wiki/Draughts): 2 players 167 | 4. Chess - there are many variants available besides the default, [pick one](https://en.wikipedia.org/wiki/List_of_chess_variants): 2-4 players depending on the variant 168 | 5. [Mastermind](https://en.wikipedia.org/wiki/Mastermind_(board_game)): 2 players 169 | 6. [Memory](https://en.wikipedia.org/wiki/Concentration_(card_game)): 2+ players. **It is sufficient if you implement a working game for two players.** Similar to chess, there are several variations available on the linked Wikipedia page, feel free to pick one of them. 170 | 171 | At the end of the three web assignments, your board game application should have the following functionalities :point_down:: 172 | 173 | - The game is for 2+ players and in 2D. 174 | - The game works in 2+ modern browsers (e.g. Firefox and Chrome). 175 | - It works well on a laptop/desktop device. We are considering screen resolutions of ~1366x768 or higher. In this project, we are **not** concerned about apps for mobile devices or apps with a responsive design. 176 | - Upon entering your web application's URL, a **splash screen** is shown that allows a user to see some statistics of the game (how many games are currently ongoing, how many users have started a game, etc.). Pick three statistics you want to report on the splash screen. Add a brief description of how-to-play (if you need inspiration for good looking *how it works* designs, take a look [here](https://robhope.com/how-it-works-examples))and a *Play* button. 177 | - Upon pressing *Play*, the user enters the **game screen** and waits for a sufficient number of other gamers to start playing. It is clear for the player that s/he is waiting for more players to enter the game. 178 | - Once there are sufficiently many players, the game automatically starts and the players play against each other. 179 | - The server supports multiple games to take place at the same time. 180 | - Once a player makes a move, the validity of the move is checked and invalid moves are rejected. Once a player wins the game, this information is announced to all players participating in the game. 181 | - Once a player drops out of a game, the game is aborted; this is announced to all players currently active in the game. 182 | - Players see two pieces of information on the game screen about the ongoing game, e.g. the time passed since starting the game and the number of lost/won pieces. 183 | - Players play the game with the mouse—this means that you can focus mostly on the `click` event. 184 | - The splash and game screens need to have a common design. The theme of your design should be DELFT. This is of course very abstract: you can think of using a naming scheme for your game/players that has to do with the city of Delft, a [color scheme that relates to Delft](https://color.adobe.com/search?q=delft) or to [TU Delft](https://www.tudelft.nl/en/tu-delft-corporate-design/colours), a background image of Delft (abstract or otherwise—a walk around campus may bring about the perfect picture), board game elements in the form of a (stylized) flame of Prometheus, etc. *To be clear: we do not expect you to do all of these things (though if you do, great!), it is enough if your design contains at least one of these ideas or some other idea related to Delft*. 185 | 186 | The list above should tell you that you have considerable (artistic) freedom. 187 | 188 | In this course you learn how to program in *plain* JavaScript. In principle, we **do not allow external libraries or frameworks** beyond those specified in the assignments and introduced in the lectures. There is one exception to this rule: we **do allow** the use of a JavaScript library of your choice to determine whether a player makes a valid move as for a game like chess this is considerably more difficult task than for others! 189 | 190 | We also allow small simplifications to the chosen games, e.g. for Ludo an implementation for 2 players is sufficient, for chess you can ignore the [pawn promotion rule](https://en.wikipedia.org/wiki/Promotion_(chess)). Be upfront about the simplifications made. 191 | 192 | ### 4.1) 193 | 194 | **First of all, settle on the game you will implement in your team.** 195 | 196 | ### 4.2) 197 | 198 | Find **three** examples of your chosen board game (in 2D) that can be played online in a modern browser (laptop or desktop, not a mobile device). Consider the web application's design (focus on the game screen) based on the **web design principles** covered in class: to what extent do they fulfill them? Record the game URLs. 199 | 200 | ### 4.3) 201 | 202 | Which *game features* in the game examples of 4.2) stand out positively and which stand out negatively (e.g. particular animations, sounds, information conveyed about the game to the players ...)? Why? Discuss **three** positive and **three** negative features. 203 | 204 | ## 5. Design your own board game app 205 | 206 | Having looked at at least three existing implementations of your chosen board game (Exercise 4.2), you are now in a position to design your own game interface. 207 | 208 | Similar to the [splash](https://github.com/chauff/balloons-game/blob/master/wireframes/splash.png) and [game](https://github.com/chauff/balloons-game/blob/master/wireframes/game.png) screen wireframes of the demo game, start designing your own application. Create one **splash screen** and one **game screen**. Your web application should be designed for the standard Desktop interface. Use the software of your choice to create those wireframes. You can use pen-and-paper to create mockups, you can make use of a presentation program (like Powerpoint or Google Slides) or head to online platforms specifically for wireframe design, such as [wireframe.cc](https://wireframe.cc/), [figma](https://www.figma.com/) or [excalidraw](https://excalidraw.com/). 209 | 210 | ### 5.1) 211 | 212 | Create a design for the splash screen (also known as *entry page*): think of a name for your application, a short description & a logo. Feel free to use media (images, sound) with a Creative Commons license. The [noun project](https://thenounproject.com/) can be a useful resource for game pieces. 213 | 214 | If you are looking for a color scheme for your design, take a look at [Google's Material palette generator](https://material.io/design/color/the-color-system.html#tools-for-picking-colors), [colorhunt](https://colorhunt.co/), [maketintsandshades](https://maketintsandshades.com/) or [Adobe's Color theme explorer](https://color.adobe.com/explore). **Remember this year's design theme: Delft.** 215 | 216 | ### 5.2) 217 | 218 | Create a design for the game screen, keeping the requirements listed above in mind as well as your findings in Exercise 4.3). 219 | You have a lot of artistic freedom in designing the board and game information. 220 | 221 | ### 5.3) 222 | 223 | Once you have completed the design of your app, head over to Brightspace and post your design as new thread in the [Game design topic](https://brightspace.tudelft.nl/d2l/le/399713/discussions/topics/60230/View). Include images of the splash and game screens and add a paragraph describing your choices; how is the theme of Delft reflected in your design? Feel free to comment on the designs of your fellow study colleagues. 224 | 225 | ## 6. Your own board game app: HTML 226 | 227 | Similar to the demo game, take your design as a starting point and create the respective **two HTML documents**. These documents should **only** contain HTML, no CSS or JavaScript. To get an idea of the expected amount of content (it is not a lot!), take a look at our demo game's [`game.html`](https://github.com/chauff/balloons-game/blob/master/public/game.html) and [`splash.html`](https://github.com/chauff/balloons-game/blob/master/public/splash.html). Ignore the few lines of code loading JavaScript and CSS files, these will be covered in the two later assignments. You can of course later always make changes to these HTML files. 228 | 229 | 230 | HTML files contain a certain amount of boilerplate content that needs to be rewritten every time a HTML page is created. 231 | 232 | If you are using Visual Studio Code, you can have this boilerplate generated for you by either: 233 | 234 | - Creating a new file with ending `.html` and then typing `html:5` into the editor (this should bring up a command with a little wrench) and clicking Enter. 235 | - If the file is not named (and no file ending is telling VSC what type of content to expect), you should see as first line *Select a language to get started...*. Click on *Select a language, pick `HTML` and then type into the editor `html:5`. 236 | 237 | -------------------------------------------------------------------------------- /_practicals/assignment-rubric.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | permalink: /rubric/ 4 | linkname: Assignment rubric 5 | ordering: 4 6 | warning: true 7 | --- 8 | 9 | # Rubric web technology assignments 10 | 11 | This is an overview of the rubric the teaching assistants use to assess the web technology assignments. 12 | 13 | A single assessment session is held per group for the three web assignments. Every web assignment is assessed as either passing or non-passing. Although groups of two students are assessed, the passing/non-passing grades are handed out per student. It is thus possible for one team member to pass all three assignments and for the other to fail all three assignments. 14 | 15 | The rubric below contains example questions/tasks for each assignment **as well as an overview of the requirements** to achieve a pass. To answer the questions, students can always consult their notes and code. 16 | 17 | *Note: any required Brightspace uploads that did not happen before the assessment session can still be executed during the assessment session.* 18 | 19 | ## Table of Contents 20 | - [Assignment HTTP+Design](#assignment-httpdesign) 21 | - [Possible questions / tasks](#possible-questions--tasks) 22 | - [Passing requirements](#passing-requirements) 23 | - [Assignment JS+Node](#assignment-jsnode) 24 | - [Possible questions / tasks](#possible-questions--tasks-1) 25 | - [Passing requirements](#passing-requirements-1) 26 | - [Assignment CSS+Node](#assignment-cssnode) 27 | - [Possible questions / tasks](#possible-questions--tasks-2) 28 | - [Passing requirements](#passing-requirements-2) 29 | 30 | ## Assignment HTTP+Design 31 | 32 | ### Possible questions / tasks 33 | 34 | - Show off a `HEAD` and `GET` request via telnet or openssl. What is the difference between the two requests? 35 | - Execute the `PUT` request. 36 | - What is the difference between authentication using telnet vs. a browser? 37 | - Show off the board game design. 38 | - Show off the four board game examples and discuss a positive and negative feature. 39 | - Show off the HTML. How did you decide to use 'those tags' for your board game? 40 | 41 | ### Passing requirements 42 | 43 | - The student is able to answer most of the TA's questions correctly. 44 | - The board game design is available on Brightspace. The deliverables are uploaded to Brightspace. 45 | - The splash / board game design fulfils the board game requirements (listed in the first web technology assignment). 46 | 47 | ## Assignment JS+Node 48 | 49 | ### Possible questions / tasks 50 | 51 | - Show off the application's `package.json` and explain its purpose. 52 | - Start the server and open the browser to play the game (splash screen has a play button, N players are randomly paired to play the game, the players can execute moves). 53 | - Explain randomly chosen functions in your code. 54 | - Explain the data structure(s) used to keep track of the game state on the server. 55 | - How was it made possible for several players to play games at the same time? 56 | - Discuss the design pattern(s) chosen for the game. 57 | - Show off the messages client and server exchange to communicate the game state and discuss advantages/disadvantages. 58 | 59 | ### Passing requirements 60 | 61 | - The student is able to answer most of the TA's questions correctly. 62 | - The required client-side and server-side components are implemented with the languages/frameworks (i.e. JavaScript and Node.js) introduced in the course. In principle, we do not allow external libraries or frameworks beyond those specified in the assignments and introduced in the lectures. There is one exception to this rule: we do allow the use of a JavaScript library of your choice to determine whether a player makes a valid move as for some games (such as chess) this is considerably more difficult task than for others! 63 | - The communication is based on WebSockets. 64 | - One of the three design patterns discussed in class is used at least once. 65 | - The deliverables are uploaded to Brightspace. 66 | - The game works as intended: players are randomly paired, valid moves can be executed. 67 | 68 | 69 | ## Assignment CSS+Node 70 | 71 | ### Possible questions / tasks 72 | 73 | - Start the server and open the browser to play the game (splash screen has a play button, N players are randomly paired to play the game, the players can execute moves, **invalid moves are rejected**). 74 | - Show off the implemented CSS animation and explain the code. 75 | - Show off the use of templating and explain the code. 76 | - Show off the use of the `display:grid` and `position:absolute`. 77 | - How are the board game tiles styled with CSS? How are the movements of game elements implemented? 78 | - Show off the employed media query and explain its use. 79 | 80 | ### Passing requirements 81 | 82 | - The JS+Node assignment was passed. *It is not possible to pass this last assignment, without passing the previous one.* 83 | - The student is able to answer most of the TA's questions correctly. 84 | - The deliverables are uploaded to Brightspace. 85 | - The implementation contains the necessary CSS elements. 86 | - The splash and game screen have a consistent design. 87 | - Templating (EJS) has been used. 88 | - The game forbids players to make at least some invalid moves. 89 | - Beyond CSS, the required components are implemented with the languages/frameworks (i.e. JavaScript and Node.js) introduced in the course. In principle, we do not allow external libraries or frameworks beyond those specified in the assignments and introduced in the lectures. There is one exception to this rule: we do allow the use of a JavaScript library of your choice to determine whether a player makes a valid move as for some games (such as chess) this is considerably more difficult task than for others! 90 | -------------------------------------------------------------------------------- /_practicals/nodeschool-exercises.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | permalink: /nodeschool/ 4 | linkname: Nodeschool exercises 5 | ordering: 6 6 | warning: true 7 | --- 8 | 9 | # Overview of interactive web programming exercises 10 | 11 | One of the issues novice web engineers face is the deluge of materials that are *out there* on the web. It is easy to be overwhelmed, not just by the sheer amount of materials, but also the fast pace of new standards, new frameworks and new languages. In this course, we only have a few weeks to teach you the basics of web programming. For this reason, below we have listed a number of interactive exercises from a single source: [nodeschool.io](https://nodeschool.io/). These exercise bundles are themselves implemented as Node.js packages! So, you will use `node` to learn `node`! 12 | 13 | Nodeschool offers a long list of self-guided tutorials and exercises; we have matched them up to our lectures. A ★ indicates that this concept is taught in class, a ☆ indicates that this is useful knowledge but not required. If a row has no mark at all, then this exercise can safely be skipped. 14 | 15 | A nice side effect of the nodeschool.io exercises is the fact that they all require you to use the terminal - in itself a useful exercise. 16 | 17 | These are largely introductory exercises, each one takes no longer than a few minutes to read up upon and solve. They will help you to get started if you have never programmed in JavaScript and/or Node.js before this course. They do not only introduce language features, but also how to use the node package manger `npm` and how to debug Node.js programs. 18 | 19 | **Note**: This is completely optional! We do not require you to go through these exercises. 20 | 21 | 22 | ## Where to start 23 | 24 | 1. Make sure to have `node` and `npm` installed. 25 | 2. Access the GitHub repositories linked in the table. 26 | 3. Install each package as described in the GitHub README, e.g. `npm install --global javascripting` or `npm install learnyounode`. In the latter case (no `--global` option) the package will be installed in the current directory under `node_modules`. If you can choose, stick to the global installation of the package as described in the READMEs, as then you can directly follow the instructions in the respective repository and simply start the workshop with the command `javascripting` or `learnyounode`. If you cannot for some reason globally install the packages, your command will look something like this `node node_modules/javascripting/bin/javascripting`. 27 | 4. Run through the workshop exercises! 28 | 29 | | | | | | | | | | | 30 | |-----------------------|---------------------------|:--------:|:---------:|:--------------:|:-----------:|:-------:|:--------------:|:----------------------:| 31 | | | | **HTTP** | **HTML** | **JS** | **Node** | **CSS** | **Node2** | **Sessions** | 32 | | [learnyouhtml](https://github.com/denysdovhan/learnyouhtml) | **_all exercises_** | | ★ | | | | | | 33 | | [javascripting](https://www.github.com/sethvincent/javascripting) | **_all exercises_** | | | ★ | | | | | 34 | | [learnyounode](https://www.github.com/workshopper/learnyounode) | hello world | | | | ★ | | | | 35 | | | baby steps | | | | ★ | | | | 36 | | | my first I/O! | | | | ★ | | | | 37 | | | my first async I/O! | | | | ★ | | | | 38 | | | filtered ls | | | | ★ | | | | 39 | | | make it modular | | | | | | ★ | | 40 | | | HTTP client | | | | | | | | 41 | | | HTTP collect | | | | | | | | 42 | | | juggling async | | | | | | | | 43 | | | time server | | | | ★ | | | | 44 | | | HTTP file server | | | | ★ | | | | 45 | | | HTTP uppercaserer | | | | | | | | 46 | | | HTTP json api server | | | | ★ | | | | 47 | | | | | | | | | | | 48 | | [how-to-npm](https://github.com/workshopper/how-to-npm) | install npm | | | | ★ | | | | 49 | | | dev environment | | | | ☆ | | | | 50 | | | login | | | | ★ | | | | 51 | | | start a project | | | | ★ | | | | 52 | | | install a module | | | | ★ | | | | 53 | | | listing dependencies | | | | ★ | | | | 54 | | | npm test | | | | ☆ | | | | 55 | | | package niceties | | | | | | | | 56 | | | publish | | | | | | | | 57 | | | version | | | | | | | | 58 | | | publish again | | | | | | | | 59 | | | dist tag | | | | | | | | 60 | | | dist tag removal | | | | | | | | 61 | | | outdated | | | | | | | | 62 | | | update | | | | | | | | 63 | | | rm | | | | | | | | 64 | | | finale | | | | | | | | 65 | | | | | | | | | | | 66 | | [functional-javascript](https://github.com/timoxley/functional-javascript-workshop) | hello world | | | ★ | | | | | 67 | | | higher order functions | | | ★ | | | | | 68 | | | basic: map | | | | ★ | | | | 69 | | | basic: filter | | | | ★ | | | | 70 | | | basic: every some | | | | ★ | | | | 71 | | | basic: reduce | | | | ★ | | | | 72 | | | basic: recursion | | | | | | | | 73 | | | basic: call | | | | | | | | 74 | | | partial app. without bind | | | | | | | | 75 | | | partial app. with bind | | | | | | | | 76 | | | implement map with reduce | | | | ☆ | | | | 77 | | | function spies | | | ★ | | | | | 78 | | | blocking event loop | | | ★ | | | | | 79 | | | trampoline | | | ★ | | | | | 80 | | | async loops | | | | | | | | 81 | | | recursion | | | | | | | | 82 | | | currying | | | ★ | | | | | 83 | | | function call | | | | | | | | 84 | | | | | | | | | | | 85 | | [expressworks](https://github.com/azat-co/expressworks) | hello world | | | | ★ | | | | 86 | | | static | | | | ★ | | | | 87 | | | pug | | | | | | ★ | | 88 | | | good old form | | | | | | ★ | | 89 | | | stylus css | | | | | | | | 90 | | | param pam pam | | | | | | ★ | | 91 | | | What's in query | | | | ★ | | | | 92 | | | json me | | | | ★ | | | | 93 | | | | | | | | | | | 94 | | [count-to-6](https://github.com/domenic/count-to-6) | hello es6 | | | ☆ | | | | | 95 | | | template strings | | | ★ | | | | | 96 | | | arrow functions, part 1 | | | ★ | | | | | 97 | | | arrow functions and this | | | ☆ | | | | | 98 | | | destructuring | | | ☆ | | | | | 99 | | | spread | | | ☆ | | | | | 100 | | | rest | | | ☆ | | | | | 101 | | | default arguments, part 1 | | | ☆ | | | | | 102 | | | default arguments, part 2 | | | ☆ | | | | | 103 | | | tagged template strings | | | ☆ | | | | | 104 | | | | | | | | | | | 105 | | [currying-workshopper](https://github.com/kishorsharma/currying-workshopper) | identity | | | ★ | | | | | 106 | | | binary | | | ★ | | | | | 107 | | | delay invocation | | | ★ | | | | | 108 | | | long_delay_invocation | | | ★ | | | | | 109 | | | call and apply | | | ★ | | | | | 110 | | | curry function | | | ★ | | | | | 111 | | | | | | | | | | | 112 | -------------------------------------------------------------------------------- /_practicals/sample-exams.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | permalink: /exams/ 4 | linkname: Sample exams 5 | ordering: 7 6 | warning: true 7 | --- 8 | 9 | # Sample exams 10 | 11 | 12 | 13 | **Exam topics are all topics covered in the lectures and the required readings.** The content of the recommended activities/readings that goes beyond what is covered in the lectures/course book is not exam material. 14 | 15 | The web technology exam usually contains about 40 multiple-choice questions; the resit is shorter with about 30 questions (due to the time constraints of the resit week). 16 | 17 | - [2018/19](../exams/midterm-cse1500-201819-solutions.pdf) ([no solutions](../exams/midterm-cse1500-201819.pdf)) 18 | - [2018/19 resit](../exams/midterm-resit-cse1500-201819-solutions.pdf) ([no solutions](../exams/midterm-resit-cse1500-201819.pdf)) 19 | - [2019/20](../exams/final-cse1500-201920-solutions.pdf) 20 | - [2021/22](../exams/final-cse1500-202122-solutions.pdf) 21 | - [2021/22 resit](../exams/midterm-resit-cse1500-202122.pdf) 22 | -------------------------------------------------------------------------------- /_practicals/vsc-usage.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | permalink: /vsc/ 4 | linkname: How to use VSC 5 | ordering: 5 6 | warning: true 7 | --- 8 | 9 | # :bug: How to use VSC 10 | 11 | The project is conducted in pairs of students. Here we provide an overview of how VSC can help you to work **efficiently** in pairs. You have two options: 12 | 13 | - You familiarize yourself with the basics of `git`, a popular version control system to file changes. The source code resides in a public or private code repository hosted on GitHub or another platform. VSC supports `git`. Both team members can code on their local source code copies and merge their code intermittently. 14 | - Positive: `git` is used by most developers today, it is a a tool/protocol that you will need to learn at some point; later courses in software engineering will cover `git` in more detail. 15 | - Negative: if something goes wrong (for example, you are both editing the same functions locally and try to merge) you need to know a few details in order to get back on track or get help from our TAs. 16 | - You use VSC's Live Share functionality: the source code resides on a single machine and both team members can collaboratively work in the same shared code session in real-time. 17 | - Positive: easy, no knowledge of source control mechanisms is required. 18 | - Negative: the code resides on a local machine, there is by default no backup in the cloud. 19 | 20 | ## Table of Contents 21 | - [Collaborating via Git+GitHub](#collaborating-via-gitgithub) 22 | - [Git](#git) 23 | - [GitHub](#github) 24 | - [Local vs. remote repository](#local-vs-remote-repository) 25 | - [GitHub and VSC](#github-and-vsc) 26 | - [Live Share](#live-share) 27 | - [Debugging Node.js scripts](#debugging-nodejs-scripts) 28 | 29 | ## Collaborating via Git+GitHub 30 | 31 | ### Git 32 | 33 | `git` is a version control system created by [Linus Torvalds in 2005](https://www.linuxfoundation.org/blog/2015/04/10-years-of-git-an-interview-with-git-creator-linus-torvalds/), originally intended for the Linux kernel community. It has now become the de-facto standard for distributed version control. It records the changes made to a file or a set of files in a **repository** (a specific storage location). This is particularly useful when several people are working on the same code: you can see who made what changes, revert the changes back to a previous state, compare changes, or decide what to do in case of conflict (e.g. the same piece of code was modified concurrently by different people). 34 | 35 | Version control systems can be centralized, with the repository located on single server, or distributed like `git`, where every collaborator has a local copy of the repository with the whole history of changes. 36 | 37 | You can download and install git from [here](https://git-scm.com/downloads). Then you can run `git` commands directly from the terminal, or you can use VSC to run the `git` commands on your behalf. The latter is easier. 38 | 39 | 40 | ### GitHub 41 | 42 | [GitHub](https://github.com/) is a web-based hosting service for `git` repositories. That way collaborators can push and pull changes to the repository located at GitHub, and synchronize it with their local copies. *Note that GitHub is not the only git repository hosting service; we do not cover any alternatives but they work in a similar fashion to GitHub.* 43 | 44 | In order to work with GitHub, all group members must have a [GitHub account](https://github.com)—if you do not yet have one, create one. One project member will then create a new repository for the project by clicking on *New repository*. It can be public, so everyone can see it, or private, where you control who can see and access it. 45 | 46 | Now you can add your partner to the repository, so you can work together. To that end go to the main page of the new repository and click on the *Settings* tab :point_down:: 47 | 48 | ![VSC GitHub settings](../img/VSC-github-settings.png) 49 | 50 | Options available after creating a new repository on GitHub. 51 | 52 | A menu will appear on the left which has an entry `Manage access`: click it. A click on `Invite a collaborator` will lead to a popup where you can search for your team member's GitHub account. Add the account as collaborator. 53 | 54 | ### Local vs. remote repository 55 | 56 | The repository created on GitHub is the **remote repository**—all team members contribute code to this remote repository. Every team member also has a **local repository**, the repository residing on a team member's physical machine. When a team member makes code changes, these are first recorded in the **local repository** and then in a second step recorded in the **remote repository**. 57 | 58 | ### GitHub and VSC 59 | 60 | You can clone the GitHub repository from VSC following [these instructions](https://code.visualstudio.com/docs/editor/versioncontrol#_cloning-a-repository). 61 | 62 | _Note: after adding the URL of the remote repository and after indicating the folder where the local repository will be created, you will be asked for the GitHub user name and password._ 63 | 64 | When you edit your project, the `Source Control` icon :point_down: at the left will indicate the number of files modified. You can record a set of changes in your local repository by clicking on `Commit All`. Remember to add a meaningful message so it can be useful to follow the status of the project. Once your changes are registered in your local repository, you synchronize with the remote repository, so that your changes make it to the shared repository on GitHub. In order to do that, use the `Push` command you find in the same menu as the commit commands. In order to pull the code from the remote repository (where your partner is also pushing to), use the `Pull` command. You can see how to use other git commands [here](https://git-scm.com/docs). 65 | 66 | ![VSC source](../img/VSC-source.png) 67 | 68 | Source control view of VSC. 69 | 70 | If you want to give this setup a try, we suggest you start setting things up early and get help from the TAs if you get stuck. All TAs are familiar with `git`, GitHub and VSC! 71 | 72 | ## Live Share 73 | 74 | If you do not yet care about `git`, use the Live Share option instead. For smaller projects (like the one in this class) where you may not need to track changes, you can effectively work together as a team with the VS Live Share extension. Head to VSC's *Extensions* tab, search for *Live Share* and install it (by clicking "install") :point_down:: 75 | 76 | ![Liveshare](../img/VSC-liveshare-install.png) 77 | 78 | VSC's *Extensions* tab. 79 | 80 | After installing the extension in VSC you will see a *Live Share* icon in the left-hand side menu of VSC. The first time you click on it you will be asked to sign in to VSC with Microsoft or GitHub. After signing in, you will see in your VSC the URL you can share with your team member. Once your team member clicks the link, her local instance of VSC will display the shared project. Host and partners can then edit the files and see any changes made by their partners in real time. You can even debug collaboratively: when the host starts debugging, partners can not only see the debugging window, but they can also use debugging options (step into, step over, add breakpoints, write expressions to evaluate, etc.). 81 | 82 | **Bear in mind that only the project owned by the host is actually modified. That also means that once the host closes VSC (or the collaborative session), their partners can no longer collaborate until it is open again. It also means that the non-hosting partner has no access to the code, unless it is shared via another channel.** 83 | 84 | ## Debugging Node.js scripts 85 | 86 | You can enter VSC's debugging window by clicking on the `Run and Debug` icon in the left-hand side menu of VSC. From this window you can run the code in debug mode by clicking on the `Run and Debug` button. 87 | 88 | The execution will stop at each breakpoint you have defined. Once the execution stops, you will be able to watch the values of the variables, the values of expressions you define, and the call stack. From here you can continue or execute the next lines of code step by step. 89 | 90 | Since JavaScript is [dynamically typed](https://developer.mozilla.org/en-US/docs/Glossary/Dynamic_typing) common programming mistakes can remain unnoticed before running the code. [`@ts-check`](https://code.visualstudio.com/docs/nodejs/working-with-javascript#_type-checking-javascript) is a good tool to catch some of these mistakes at the very moment you write your code. 91 | 92 | You can find more information about debugging in VSC [here](https://code.visualstudio.com/docs/editor/debugging). -------------------------------------------------------------------------------- /cast/node-authorization.cast: -------------------------------------------------------------------------------- 1 | {"version": 2, "width": 80, "height": 18, "timestamp": 1636533228, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}} 2 | [1.228586, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 3 | [1.228908, "o", "\u001b[?1034h\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 09:33:49 \u001b[0m\u001b[48;5;240m ~ \u001b[0m\u001b[38;5;240m \u001b[0m "] 4 | [3.137367, "o", "c"] 5 | [3.247868, "o", "u"] 6 | [3.360182, "o", "r"] 7 | [3.438478, "o", "l"] 8 | [3.552203, "o", " "] 9 | [3.778741, "o", "-"] 10 | [3.924774, "o", "w"] 11 | [4.182304, "o", " "] 12 | [4.360736, "o", "\""] 13 | [4.620234, "o", "\\"] 14 | [5.418539, "o", "n"] 15 | [5.565707, "o", "\""] 16 | [6.602612, "o", " "] 17 | [6.770835, "o", "h"] 18 | [6.861367, "o", "t"] 19 | [6.971795, "o", "t"] 20 | [7.040013, "o", "p"] 21 | [7.355129, "o", ":"] 22 | [7.60114, "o", "/"] 23 | [7.738223, "o", "/"] 24 | [8.322965, "o", "l"] 25 | [8.492045, "o", "o"] 26 | [8.52557, "o", "c"] 27 | [8.613912, "o", "a"] 28 | [8.680665, "o", "l"] 29 | [8.771672, "o", "h"] 30 | [8.860501, "o", "o"] 31 | [8.885247, "o", "s"] 32 | [8.951727, "o", "t"] 33 | [9.1882, "o", ":"] 34 | [9.334055, "o", "3"] 35 | [9.457098, "o", "0"] 36 | [9.558706, "o", "0"] 37 | [9.684876, "o", "0"] 38 | [10.560622, "o", "/"] 39 | [10.787493, "o", "w"] 40 | [10.864834, "o", "i"] 41 | [11.008257, "o", "s"] 42 | [11.099493, "o", "h"] 43 | [11.245323, "o", "l"] 44 | [11.299627, "o", "i"] 45 | [11.402234, "o", "s"] 46 | [11.458266, "o", "t"] 47 | [12.934509, "o", "\r\n"] 48 | [12.968143, "o", "\r\n\r\n\r\n\r\nError\r\n\r\n\r\n
Error: Unauthorized access!
    at /Users/claudia/cse1500-demo-code/node-component-ex/app.js:22:15
    at Layer.handle [as handle_request] (/Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/index.js:317:13)
    at /Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/index.js:275:10)
    at /Users/claudia/cse1500-demo-code/node-component-ex/app.js:15:2
    at Layer.handle [as handle_"]
 49 | [12.968494, "o", "request] (/Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/index.js:317:13)
    at /Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/index.js:284:7
\r\n\r\n\r\n\r\n"] 50 | [13.073841, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 51 | [13.074019, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 09:34:01 \u001b[0m\u001b[48;5;240m ~ \u001b[0m\u001b[38;5;240m \u001b[0m "] 52 | [18.290832, "o", "c"] 53 | [18.379986, "o", "u"] 54 | [18.525864, "o", "r"] 55 | [18.592632, "o", "l"] 56 | [18.705321, "o", " "] 57 | [18.87137, "o", "-"] 58 | [18.963538, "o", "w"] 59 | [19.100116, "o", " "] 60 | [19.425126, "o", "\""] 61 | [20.349011, "o", "\\"] 62 | [20.628018, "o", "n"] 63 | [20.786965, "o", "\""] 64 | [21.980476, "o", " "] 65 | [22.204955, "o", "-"] 66 | [22.316819, "o", "-"] 67 | [22.49842, "o", "u"] 68 | [22.540234, "o", "s"] 69 | [22.596165, "o", "e"] 70 | [22.620079, "o", "r"] 71 | [22.890743, "o", " "] 72 | [23.758192, "o", "u"] 73 | [23.858739, "o", "s"] 74 | [23.902855, "o", "e"] 75 | [23.94636, "o", "r"] 76 | [24.218908, "o", ":"] 77 | [24.668443, "o", "p"] 78 | [24.803643, "o", "a"] 79 | [24.902097, "o", "s"] 80 | [25.05134, "o", "s"] 81 | [25.17463, "o", "w"] 82 | [25.240606, "o", "o"] 83 | [25.306484, "o", "r"] 84 | [25.445823, "o", "d"] 85 | [26.705823, "o", " "] 86 | [26.895821, "o", "h"] 87 | [26.996142, "o", "t"] 88 | [27.096904, "o", "t"] 89 | [27.164334, "o", "p"] 90 | [27.491522, "o", ":"] 91 | [27.737357, "o", "/"] 92 | [27.859968, "o", "/"] 93 | [28.796135, "o", "l"] 94 | [28.979122, "o", "o"] 95 | [29.101364, "o", "c"] 96 | [29.18918, "o", "a"] 97 | [29.256507, "o", "l"] 98 | [29.384073, "o", "h"] 99 | [29.460332, "o", "o"] 100 | [29.515846, "o", "s"] 101 | [29.561072, "o", "t"] 102 | [29.844056, "o", ":"] 103 | [30.92355, "o", "3"] 104 | [31.137471, "o", "0"] 105 | [31.259965, "o", "0"] 106 | [31.72254, "o", "0"] 107 | [31.982681, "o", "/ \r"] 108 | [32.12834, "o", "w"] 109 | [32.319217, "o", "i"] 110 | [32.453301, "o", "s"] 111 | [32.531592, "o", "h"] 112 | [32.690276, "o", "l"] 113 | [32.745293, "o", "i"] 114 | [32.811876, "o", "s"] 115 | [32.869539, "o", "t"] 116 | [34.09508, "o", "\r\n"] 117 | [34.133202, "o", "[{\"type\":\"video game\",\"name\":\"Hogwarts Legacy\",\"priority\":\"high\"},{\"type\":\"board game\",\"name\":\"Sushi Go\",\"priority\":\"medium\"}]\r\n"] 118 | [34.24026, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 119 | [34.240431, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 09:34:22 \u001b[0m\u001b[48;5;240m ~ \u001b[0m\u001b[38;5;240m \u001b[0m "] 120 | [39.035627, "o", "c"] 121 | [39.112787, "o", "u"] 122 | [39.247861, "o", "r"] 123 | [39.314996, "o", "l"] 124 | [39.427187, "o", " "] 125 | [39.642109, "o", "-"] 126 | [40.012856, "o", "w"] 127 | [40.192717, "o", " "] 128 | [40.373226, "o", "\""] 129 | [40.552326, "o", "\\"] 130 | [41.182786, "o", "n"] 131 | [41.373707, "o", "\""] 132 | [41.735851, "o", " "] 133 | [42.352841, "o", "-"] 134 | [42.465325, "o", "-"] 135 | [42.635672, "o", "u"] 136 | [42.687178, "o", "s"] 137 | [42.733106, "o", "e"] 138 | [42.777031, "o", "r"] 139 | [42.938369, "o", " "] 140 | [43.129109, "o", "t"] 141 | [43.205916, "o", "e"] 142 | [43.296097, "o", "s"] 143 | [43.408401, "o", "t"] 144 | [43.62348, "o", ":"] 145 | [44.199265, "o", "t"] 146 | [44.252374, "o", "e"] 147 | [44.331318, "o", "s"] 148 | [44.4538, "o", "t"] 149 | [45.144368, "o", " "] 150 | [45.537661, "o", "h"] 151 | [45.637192, "o", "t"] 152 | [45.774161, "o", "t"] 153 | [45.827776, "o", "p"] 154 | [46.188383, "o", ":"] 155 | [46.459881, "o", "/"] 156 | [46.582339, "o", "/"] 157 | [47.574105, "o", "l"] 158 | [47.754058, "o", "o"] 159 | [47.784903, "o", "c"] 160 | [47.899497, "o", "a"] 161 | [47.952778, "o", "l"] 162 | [48.053885, "o", "h"] 163 | [48.122928, "o", "o"] 164 | [48.169187, "o", "s"] 165 | [48.224996, "o", "t"] 166 | [48.484546, "o", ":"] 167 | [48.641739, "o", "3"] 168 | [48.799533, "o", "0"] 169 | [48.910988, "o", "0"] 170 | [49.216662, "o", "0"] 171 | [49.981407, "o", "/"] 172 | [50.217657, "o", "w"] 173 | [50.293032, "o", "i"] 174 | [50.418804, "o", "s"] 175 | [50.506514, "o", "h \r"] 176 | [50.597714, "o", "l"] 177 | [50.665816, "o", "i"] 178 | [50.721732, "o", "s"] 179 | [50.799994, "o", "t"] 180 | [51.070975, "o", "\r\n"] 181 | [51.103538, "o", "\r\n\r\n\r\n\r\nError\r\n\r\n\r\n
Error: Wrong username/password combination!
    at /Users/claudia/cse1500-demo-code/node-component-ex/app.js:35:15
    at Layer.handle [as handle_request] (/Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/index.js:317:13)
    at /Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/index.js:284:7
    at Function.process_params (/Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/index.js:335:12)
    at next (/Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/index.js:275:10)
    at /Users/claudia/cse1500-demo-code/node-component-ex/app.js:15:2
    at Layer.ha"]
182 | [51.103897, "o", "ndle [as handle_request] (/Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/layer.js:95:5)
    at trim_prefix (/Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/index.js:317:13)
    at /Users/claudia/cse1500-demo-code/node-component-ex/node_modules/express/lib/router/index.js:284:7
\r\n\r\n\r\n\r\n"] 183 | [51.209397, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 184 | [51.209582, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 09:34:39 \u001b[0m\u001b[48;5;240m ~ \u001b[0m\u001b[38;5;240m \u001b[0m "] 185 | [54.761782, "o", "c"] 186 | [54.849554, "o", "u"] 187 | [54.973329, "o", "r"] 188 | [55.029548, "o", "l"] 189 | [55.130977, "o", " "] 190 | [55.312423, "o", "-"] 191 | [55.424725, "o", "w"] 192 | [55.628811, "o", " "] 193 | [55.841082, "o", "\""] 194 | [56.689609, "o", "\\"] 195 | [56.855287, "o", "n"] 196 | [57.034865, "o", "\""] 197 | [58.396711, "o", " "] 198 | [58.585986, "o", "u"] 199 | [58.665818, "o", "s"] 200 | [58.721208, "o", "e"] 201 | [58.755293, "o", "r"] 202 | [59.016107, "o", ":"] 203 | [59.318089, "o", "p"] 204 | [59.438551, "o", "a"] 205 | [59.575703, "o", "s"] 206 | [59.731395, "o", "s"] 207 | [60.735223, "o", "\b\u001b[K"] 208 | [61.235906, "o", "\b\u001b[K"] 209 | [61.318212, "o", "\b\u001b[K"] 210 | [61.401981, "o", "\b\u001b[K"] 211 | [61.4862, "o", "\b\u001b[K"] 212 | [61.570299, "o", "\b\u001b[K"] 213 | [61.652549, "o", "\b\u001b[K"] 214 | [61.736818, "o", "\b\u001b[K"] 215 | [61.8935, "o", "\b\u001b[K"] 216 | [62.457683, "o", "-"] 217 | [62.543566, "o", "-"] 218 | [62.749298, "o", "u"] 219 | [62.803105, "o", "s"] 220 | [62.848072, "o", "e"] 221 | [62.892556, "o", "r"] 222 | [63.009213, "o", " "] 223 | [63.154444, "o", "u"] 224 | [63.233006, "o", "s"] 225 | [63.32249, "o", "e"] 226 | [63.367381, "o", "r"] 227 | [63.72781, "o", ":"] 228 | [64.190507, "o", "p"] 229 | [64.35921, "o", "a"] 230 | [64.534112, "o", "s"] 231 | [64.704963, "o", "s"] 232 | [64.886395, "o", "w"] 233 | [64.952958, "o", "o"] 234 | [65.042953, "o", "r"] 235 | [65.16741, "o", "d"] 236 | [65.314106, "o", " "] 237 | [72.716222, "o", "'"] 238 | [73.739223, "o", "h"] 239 | [73.851494, "o", "t"] 240 | [73.976105, "o", "t"] 241 | [74.089543, "o", "p"] 242 | [74.416312, "o", ":"] 243 | [74.684723, "o", "/"] 244 | [74.796486, "o", "/"] 245 | [75.461405, "o", "l"] 246 | [75.638371, "o", "o"] 247 | [75.707633, "o", "c"] 248 | [75.831173, "o", "a"] 249 | [75.947417, "o", "l"] 250 | [76.036567, "o", "l"] 251 | [77.317044, "o", "\b\u001b[K"] 252 | [77.620481, "o", "h"] 253 | [77.687193, "o", "o"] 254 | [77.779337, "o", "s"] 255 | [77.859051, "o", "t"] 256 | [78.061557, "o", ":"] 257 | [78.995206, "o", "3"] 258 | [79.308968, "o", "0"] 259 | [79.48841, "o", "0"] 260 | [79.724208, "o", "0 \r"] 261 | [80.054519, "o", "/"] 262 | [81.5813, "o", "a"] 263 | [81.726894, "o", "d"] 264 | [81.863036, "o", "d"] 265 | [82.121925, "o", "W"] 266 | [82.267559, "o", "i"] 267 | [82.345538, "o", "s"] 268 | [82.446401, "o", "h"] 269 | [82.762614, "o", "?"] 270 | [85.564326, "o", "t"] 271 | [85.666213, "o", "y"] 272 | [85.744228, "o", "p"] 273 | [85.846682, "o", "e"] 274 | [86.050091, "o", "="] 275 | [86.678919, "o", "b"] 276 | [86.8019, "o", "o"] 277 | [86.879561, "o", "a"] 278 | [86.947003, "o", "r"] 279 | [87.160717, "o", "d"] 280 | [88.478172, "o", "%"] 281 | [88.849909, "o", "2"] 282 | [89.006558, "o", "0"] 283 | [90.51365, "o", "g"] 284 | [90.627159, "o", "a"] 285 | [91.278566, "o", "m"] 286 | [91.369359, "o", "e"] 287 | [93.428796, "o", "&"] 288 | [93.88698, "o", "n"] 289 | [94.082385, "o", "a"] 290 | [94.170382, "o", "m"] 291 | [94.238392, "o", "e"] 292 | [95.575491, "o", "="] 293 | [95.881194, "o", "T"] 294 | [96.062095, "o", "r"] 295 | [96.113976, "o", "e"] 296 | [96.179478, "o", "a"] 297 | [96.374514, "o", "s"] 298 | [96.745655, "o", "r"] 299 | [97.195693, "o", "\b\u001b[K"] 300 | [97.398237, "o", "u"] 301 | [97.465162, "o", "r"] 302 | [97.532451, "o", "e"] 303 | [99.454084, "o", "%"] 304 | [99.964749, "o", "2"] 305 | [100.245423, "o", "0"] 306 | [101.404353, "o", "H"] 307 | [101.60558, "o", "u"] 308 | [101.786353, "o", "n"] 309 | [101.865164, "o", "t"] 310 | [102.529716, "o", "&"] 311 | [103.145579, "o", "p"] 312 | [103.270301, "o", "r"] 313 | [103.349603, "o", "i"] 314 | [103.393258, "o", "o"] 315 | [103.515158, "o", "r"] 316 | [103.606396, "o", "i"] 317 | [103.71885, "o", "t"] 318 | [103.797093, "o", "y"] 319 | [105.418936, "o", "="] 320 | [106.308238, "o", "l"] 321 | [106.44325, "o", "o"] 322 | [106.542124, "o", "w"] 323 | [108.893512, "o", "'"] 324 | [110.662286, "o", "\r\n"] 325 | [110.7014, "o", "Wish added successfully\r\n"] 326 | [110.80676, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 327 | [110.80693, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 09:35:39 \u001b[0m\u001b[48;5;240m ~ \u001b[0m\u001b[38;5;240m \u001b[0m "] 328 | [113.025486, "o", "c"] 329 | [113.114287, "o", "u"] 330 | [113.261311, "o", "r"] 331 | [113.54246, "o", "l"] 332 | [113.678616, "o", " "] 333 | [113.937033, "o", "-"] 334 | [116.287325, "o", "w"] 335 | [116.545454, "o", " "] 336 | [116.795272, "o", "\""] 337 | [117.15501, "o", "\\"] 338 | [117.391165, "o", "n"] 339 | [117.569337, "o", "\""] 340 | [118.884739, "o", " "] 341 | [119.224704, "o", "-"] 342 | [119.336668, "o", "-"] 343 | [119.527901, "o", "u"] 344 | [119.583785, "o", "s"] 345 | [119.64871, "o", "e"] 346 | [119.673199, "o", "r"] 347 | [119.832013, "o", " "] 348 | [120.00083, "o", "u"] 349 | [120.066628, "o", "s"] 350 | [120.121885, "o", "e"] 351 | [120.145445, "o", "r"] 352 | [120.394472, "o", ":"] 353 | [120.697757, "o", "p"] 354 | [120.888589, "o", "a"] 355 | [121.099865, "o", "s"] 356 | [121.269617, "o", "s"] 357 | [121.460349, "o", "w"] 358 | [121.528326, "o", "o"] 359 | [121.607623, "o", "r"] 360 | [121.721536, "o", "d"] 361 | [121.924347, "o", " "] 362 | [122.744399, "o", "h"] 363 | [122.879371, "o", "t"] 364 | [123.013759, "o", "t"] 365 | [123.116555, "o", "p"] 366 | [123.443176, "o", ":"] 367 | [123.711761, "o", "/"] 368 | [123.825266, "o", "/"] 369 | [124.186416, "o", "l"] 370 | [124.319928, "o", "o"] 371 | [124.365078, "o", "c"] 372 | [124.465925, "o", "a"] 373 | [124.531371, "o", "l"] 374 | [124.621631, "o", "h"] 375 | [124.722526, "o", "o"] 376 | [124.746604, "o", "s"] 377 | [124.802326, "o", "t"] 378 | [125.053654, "o", ":"] 379 | [125.434774, "o", "3"] 380 | [125.580428, "o", "0"] 381 | [125.692403, "o", "0"] 382 | [126.075501, "o", "0"] 383 | [126.391167, "o", "/ \r"] 384 | [127.290978, "o", "w"] 385 | [127.412765, "o", "i"] 386 | [127.538848, "o", "s"] 387 | [127.626758, "o", "h"] 388 | [127.807444, "o", "l"] 389 | [127.863585, "o", "i"] 390 | [127.929645, "o", "s"] 391 | [127.985627, "o", "t"] 392 | [128.223051, "o", "\r\n"] 393 | [128.258479, "o", "[{\"type\":\"video game\",\"name\":\"Hogwarts Legacy\",\"priority\":\"high\"},{\"type\":\"board game\",\"name\":\"Sushi Go\",\"priority\":\"medium\"},{\"type\":\"board game\",\"name\":\"Treasure Hunt\",\"priority\":\"low\"}]\r\n"] 394 | [128.362841, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 395 | -------------------------------------------------------------------------------- /cast/node-ejs.cast: -------------------------------------------------------------------------------- 1 | {"version": 2, "width": 80, "height": 18, "timestamp": 1636538575, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}} 2 | [1.203269, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 3 | [1.20357, "o", "\u001b[?1034h\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 11:02:56 \u001b[0m\u001b[48;5;240m ~ \u001b[0m\u001b[38;5;240m \u001b[0m "] 4 | [2.089235, "o", "n"] 5 | [2.356723, "o", "o"] 6 | [2.593902, "o", "d"] 7 | [2.76431, "o", "e"] 8 | [3.471553, "o", "\r\n"] 9 | [3.519279, "o", "Welcome to Node.js v12.22.7.\r\nType \".help\" for more information.\r\n"] 10 | [3.530908, "o", "\u001b[1G"] 11 | [3.531041, "o", "\u001b[0J> \u001b[3G"] 12 | [4.432599, "o", "c"] 13 | [4.493439, "o", "o"] 14 | [4.494791, "o", "\u001b[90mn\u001b[39m\u001b[5G"] 15 | [4.560551, "o", "\u001b[0K"] 16 | [4.560651, "o", "n"] 17 | [4.619459, "o", "s"] 18 | [4.687267, "o", "t"] 19 | [4.742949, "o", " "] 20 | [4.855098, "o", "e"] 21 | [4.911261, "o", "j"] 22 | [5.217275, "o", "s"] 23 | [5.337571, "o", " "] 24 | [5.530607, "o", "="] 25 | [5.628507, "o", " "] 26 | [5.811589, "o", "r"] 27 | [5.86685, "o", "e"] 28 | [5.934969, "o", "q"] 29 | [5.935804, "o", "\u001b[90muire\u001b[39m\u001b[18G"] 30 | [6.023214, "o", "\u001b[0K"] 31 | [6.023468, "o", "u"] 32 | [6.023879, "o", "\u001b[90mire\u001b[39m"] 33 | [6.023931, "o", "\u001b[19G"] 34 | [6.090111, "o", "\u001b[0Ki"] 35 | [6.090861, "o", "\u001b[90mre\u001b[39m\u001b[20G"] 36 | [6.104239, "o", "\u001b[0K"] 37 | [6.10448, "o", "r"] 38 | [6.104924, "o", "\u001b[90me\u001b[39m"] 39 | [6.105032, "o", "\u001b[21G"] 40 | [6.147102, "o", "\u001b[0Ke"] 41 | [6.374367, "o", "("] 42 | [7.182984, "o", "\""] 43 | [7.441986, "o", "e"] 44 | [7.589715, "o", "j"] 45 | [7.59586, "o", "\u001b[90ms/\u001b[39m\u001b[26G"] 46 | [7.699897, "o", "\u001b[0K"] 47 | [7.699991, "o", "s"] 48 | [7.702275, "o", "\u001b[90m/\u001b[39m\u001b[27G"] 49 | [7.948844, "o", "\u001b[0K"] 50 | [7.949308, "o", "\""] 51 | [7.953255, "o", "\u001b[90m/\u001b[39m\u001b[28G"] 52 | [8.287415, "o", "\u001b[0K"] 53 | [8.287953, "o", ")"] 54 | [8.291437, "o", "\u001b[90m/\u001b[39m\u001b[29G"] 55 | [8.669339, "o", "\u001b[0K"] 56 | [8.670318, "o", "\r\r\n"] 57 | [8.687441, "o", "\u001b[90mundefined\u001b[39m\r\n\u001b[1G"] 58 | [8.687672, "o", "\u001b[0J> \u001b[3G"] 59 | [10.741181, "o", "c"] 60 | [10.83137, "o", "o"] 61 | [10.832101, "o", "\u001b[90mn\u001b[39m\u001b[5G"] 62 | [10.885552, "o", "\u001b[0K"] 63 | [10.885684, "o", "n"] 64 | [10.952279, "o", "s"] 65 | [10.997967, "o", "t"] 66 | [11.123095, "o", " "] 67 | [11.220882, "o", "u"] 68 | [11.391839, "o", "n"] 69 | [11.467984, "o", "e"] 70 | [11.468816, "o", "\u001b[90mscape\u001b[39m"] 71 | [11.468865, "o", "\u001b[12G"] 72 | [11.616585, "o", "\u001b[0K"] 73 | [11.617013, "o", "s"] 74 | [11.617965, "o", "\u001b[90mcape\u001b[39m\u001b[13G"] 75 | [11.762016, "o", "\u001b[0Kc"] 76 | [11.763295, "o", "\u001b[90mape\u001b[39m\u001b[14G"] 77 | [11.864453, "o", "\u001b[0K"] 78 | [11.864592, "o", "a"] 79 | [11.865433, "o", "\u001b[90mpe\u001b[39m\u001b[15G"] 80 | [11.94304, "o", "\u001b[0K"] 81 | [11.943188, "o", "p"] 82 | [11.944032, "o", "\u001b[90me\u001b[39m\u001b[16G"] 83 | [12.032084, "o", "\u001b[0K"] 84 | [12.032226, "o", "e"] 85 | [12.156452, "o", "d"] 86 | [12.405754, "o", "T"] 87 | [12.538306, "o", "e"] 88 | [12.651792, "o", "m"] 89 | [12.753977, "o", "p"] 90 | [12.92254, "o", "l"] 91 | [12.989786, "o", "a"] 92 | [13.023425, "o", "t"] 93 | [13.090558, "o", "e"] 94 | [13.167919, "o", " "] 95 | [13.3489, "o", "="] 96 | [13.460628, "o", " "] 97 | [14.002216, "o", "\""] 98 | [14.340976, "o", "<"] 99 | [15.847734, "o", "%"] 100 | [16.117666, "o", "-"] 101 | [16.2392, "o", " "] 102 | [16.499608, "o", "m"] 103 | [16.500707, "o", "\u001b[90module\u001b[39m\u001b[35G"] 104 | [16.578875, "o", "\u001b[0K"] 105 | [16.579054, "o", "e"] 106 | [16.74668, "o", "s"] 107 | [16.868546, "o", "s"] 108 | [16.993849, "o", "a"] 109 | [17.038772, "o", "g"] 110 | [17.117582, "o", "e"] 111 | [17.288432, "o", " "] 112 | [17.793291, "o", "%"] 113 | [18.064362, "o", ">"] 114 | [18.367422, "o", "\""] 115 | [19.828853, "o", "\r\r\n"] 116 | [19.830194, "o", "\u001b[90mundefined\u001b[39m\r\n\u001b[1G\u001b[0J> \u001b[3G"] 117 | [20.663543, "o", "c"] 118 | [20.739942, "o", "o"] 119 | [20.740606, "o", "\u001b[90mn\u001b[39m\u001b[5G"] 120 | [20.851788, "o", "\u001b[0K"] 121 | [20.851927, "o", "n"] 122 | [20.907722, "o", "s"] 123 | [20.985724, "o", "t"] 124 | [21.10097, "o", " "] 125 | [21.236538, "o", "e"] 126 | [21.369812, "o", "s"] 127 | [21.370805, "o", "\u001b[90mcape\u001b[39m\u001b[11G"] 128 | [21.515634, "o", "\u001b[0K"] 129 | [21.51575, "o", "c"] 130 | [21.516704, "o", "\u001b[90mape\u001b[39m\u001b[12G"] 131 | [21.617469, "o", "\u001b[0K"] 132 | [21.617581, "o", "a"] 133 | [21.618279, "o", "\u001b[90mpe\u001b[39m\u001b[13G"] 134 | [21.6618, "o", "\u001b[0K"] 135 | [21.662146, "o", "p"] 136 | [21.663254, "o", "\u001b[90me\u001b[39m\u001b[14G"] 137 | [21.775098, "o", "\u001b[0K"] 138 | [21.7752, "o", "e"] 139 | [21.900847, "o", "d"] 140 | [22.136393, "o", "T"] 141 | [22.236256, "o", "e"] 142 | [22.348864, "o", "m"] 143 | [22.437134, "o", "p"] 144 | [22.630811, "o", "l"] 145 | [22.730553, "o", "a"] 146 | [22.764134, "o", "t"] 147 | [22.831852, "o", "e"] 148 | [22.968553, "o", " "] 149 | [23.171851, "o", "="] 150 | [23.269242, "o", " "] 151 | [23.744237, "o", "\""] 152 | [24.060014, "o", "<"] 153 | [24.891738, "o", "%"] 154 | [25.870404, "o", "="] 155 | [26.141466, "o", " "] 156 | [26.27416, "o", "m"] 157 | [26.274937, "o", "\u001b[90module\u001b[39m\u001b[33G"] 158 | [26.395915, "o", "\u001b[0Ke"] 159 | [26.545166, "o", "s"] 160 | [26.66661, "o", "s"] 161 | [26.793028, "o", "a"] 162 | [26.847053, "o", "g"] 163 | [26.925312, "o", "e"] 164 | [27.119397, "o", " "] 165 | [27.99744, "o", "%"] 166 | [28.694779, "o", ">"] 167 | [29.570381, "o", "\""] 168 | [30.630747, "o", "\r\r\n"] 169 | [30.632375, "o", "\u001b[90mundefined\u001b[39m\r\n\u001b[1G\u001b[0J"] 170 | [30.63246, "o", "> \u001b[3G"] 171 | [31.844993, "o", "c"] 172 | [31.956277, "o", "o"] 173 | [31.956949, "o", "\u001b[90mn\u001b[39m\u001b[5G"] 174 | [32.020326, "o", "\u001b[0Kn"] 175 | [32.090352, "o", "s"] 176 | [32.145602, "o", "t"] 177 | [32.224608, "o", " "] 178 | [32.384694, "o", "c"] 179 | [32.439051, "o", "o"] 180 | [32.439794, "o", "\u001b[90mn\u001b[39m\u001b[11G"] 181 | [32.49433, "o", "\u001b[0K"] 182 | [32.494693, "o", "n"] 183 | [32.552498, "o", "t"] 184 | [32.553353, "o", "\u001b[90minue\u001b[39m\u001b[13G"] 185 | [32.608533, "o", "\u001b[0K"] 186 | [32.608664, "o", "e"] 187 | [32.801184, "o", "x"] 188 | [33.003664, "o", "t"] 189 | [33.104281, "o", " "] 190 | [33.330767, "o", "="] 191 | [33.428621, "o", " "] 192 | [34.622449, "o", "{"] 193 | [34.903734, "o", "\r\r\n"] 194 | [34.913033, "o", "\u001b[1G\u001b[0J... \u001b[5G"] 195 | [35.230242, "o", "m"] 196 | [35.231198, "o", "\u001b[90module\u001b[39m\u001b[6G"] 197 | [35.283899, "o", "\u001b[0K"] 198 | [35.284038, "o", "e"] 199 | [35.443644, "o", "s"] 200 | [35.567523, "o", "s"] 201 | [35.6899, "o", "a"] 202 | [35.745488, "o", "g"] 203 | [35.82423, "o", "e"] 204 | [36.006749, "o", ":"] 205 | [36.816879, "o", " "] 206 | [37.188581, "o", "\""] 207 | [37.469711, "o", "<"] 208 | [37.637936, "o", "s"] 209 | [37.759573, "o", "c"] 210 | [37.871478, "o", "r"] 211 | [37.95018, "o", "i"] 212 | [38.018587, "o", "p"] 213 | [38.108239, "o", "t"] 214 | [38.369313, "o", ">"] 215 | [38.774914, "o", "a"] 216 | [38.898333, "o", "l"] 217 | [38.965268, "o", "e"] 218 | [39.01058, "o", "r"] 219 | [39.135189, "o", "t"] 220 | [39.348924, "o", "("] 221 | [39.674197, "o", "'"] 222 | [40.079574, "o", "H"] 223 | [40.189853, "o", "e"] 224 | [40.305698, "o", "l"] 225 | [40.406219, "o", "l"] 226 | [40.552753, "o", "o"] 227 | [40.654038, "o", " "] 228 | [40.848901, "o", "C"] 229 | [41.002951, "o", "S"] 230 | [41.046914, "o", "E"] 231 | [41.351158, "o", "1"] 232 | [41.824428, "o", "5"] 233 | [42.09378, "o", "0"] 234 | [42.194982, "o", "0"] 235 | [45.06428, "o", "!"] 236 | [45.613456, "o", ")"] 237 | [45.973793, "o", ";"] 238 | [46.43545, "o", "<"] 239 | [46.707181, "o", "/"] 240 | [46.885525, "o", "s"] 241 | [47.089664, "o", "c"] 242 | [47.75182, "o", "r"] 243 | [47.897846, "o", "i"] 244 | [47.999069, "o", "p"] 245 | [48.090457, "o", "t"] 246 | [48.944302, "o", ">"] 247 | [51.104521, "o", "\""] 248 | [51.622452, "o", "\r\r\n"] 249 | [51.627101, "o", "\u001b[1G\u001b[0J... \u001b[5G"] 250 | [52.104282, "o", "}"] 251 | [53.130295, "o", "\r\r\n"] 252 | [53.131816, "o", "\u001b[90mundefined\u001b[39m\r\n"] 253 | [53.13208, "o", "\u001b[1G\u001b[0J> \u001b[3G"] 254 | [54.738649, "o", "c"] 255 | [54.815358, "o", "o"] 256 | [54.81596, "o", "\u001b[90mn\u001b[39m\u001b[5G"] 257 | [54.858997, "o", "\u001b[0Kn"] 258 | [54.961505, "o", "s"] 259 | [54.994701, "o", "o"] 260 | [54.995509, "o", "\u001b[90mle\u001b[39m\u001b[8G"] 261 | [55.1648, "o", "\u001b[0K"] 262 | [55.164957, "o", "l"] 263 | [55.165875, "o", "\u001b[90me\u001b[39m\u001b[9G"] 264 | [55.231803, "o", "\u001b[0K"] 265 | [55.232161, "o", "e"] 266 | [55.23773, "o", "\r\n\u001b[90mObject [console] { log: [Function: log], warn: [Function: warn], dir: [Funct...\u001b[39m\u001b[10G\u001b[1A"] 267 | [55.331482, "o", "\u001b[1B\u001b[2K"] 268 | [55.331613, "o", "\u001b[1A."] 269 | [55.523537, "o", "l"] 270 | [55.524452, "o", "\u001b[90mog\u001b[39m\u001b[12G"] 271 | [55.525207, "o", "\r\n\u001b[90mundefined\u001b[39m\u001b[12G"] 272 | [55.525366, "o", "\u001b[1A"] 273 | [55.818986, "o", "\u001b[1B"] 274 | [55.819174, "o", "\u001b[2K\u001b[1A\u001b[0Ko"] 275 | [55.820684, "o", "\u001b[90mg\u001b[39m\u001b[13G"] 276 | [55.821922, "o", "\r\n\u001b[90mundefined\u001b[39m\u001b[13G"] 277 | [55.822148, "o", "\u001b[1A"] 278 | [56.064761, "o", "\u001b[1B"] 279 | [56.065262, "o", "\u001b[2K\u001b[1A\u001b[0Kg"] 280 | [56.067981, "o", "\r\n\u001b[90m[Function: log]\u001b[39m\u001b[14G\u001b[1A"] 281 | [56.381403, "o", "\u001b[1B"] 282 | [56.381684, "o", "\u001b[2K\u001b[1A("] 283 | [57.731364, "o", "\""] 284 | [58.078609, "o", "U"] 285 | [58.596786, "o", "\u001b[1G"] 286 | [58.597279, "o", "\u001b[0J> console.log(\"\u001b[16G"] 287 | [58.799533, "o", "["] 288 | [59.113867, "o", "U"] 289 | [59.24839, "o", "N"] 290 | [59.610265, "o", "E"] 291 | [59.731557, "o", "S"] 292 | [59.856446, "o", "C"] 293 | [59.991862, "o", "A"] 294 | [60.093523, "o", "P"] 295 | [60.194631, "o", "E"] 296 | [60.317179, "o", "D"] 297 | [61.094922, "o", "]"] 298 | [62.523715, "o", " "] 299 | [62.736311, "o", "\""] 300 | [62.96107, "o", " "] 301 | [63.220699, "o", "+"] 302 | [63.677748, "o", " "] 303 | [63.870666, "o", "e"] 304 | [63.960452, "o", "j"] 305 | [63.961102, "o", "\u001b[90ms\u001b[39m"] 306 | [63.961245, "o", "\u001b[34G"] 307 | [64.108612, "o", "\u001b[0Ks"] 308 | [64.198384, "o", "."] 309 | [64.320827, "o", "r"] 310 | [64.321622, "o", "\u001b[90me\u001b[39m"] 311 | [64.321776, "o", "\u001b[37G"] 312 | [64.37938, "o", "\u001b[0K"] 313 | [64.379649, "o", "e"] 314 | [64.524679, "o", "n"] 315 | [64.52613, "o", "\u001b[90mder\u001b[39m\u001b[39G"] 316 | [64.601953, "o", "\u001b[0K"] 317 | [64.602301, "o", "d"] 318 | [64.602854, "o", "\u001b[90mer\u001b[39m\u001b[40G"] 319 | [64.739571, "o", "\u001b[0K"] 320 | [64.739651, "o", "e"] 321 | [64.740421, "o", "\u001b[90mr\u001b[39m\u001b[41G"] 322 | [64.792068, "o", "\u001b[0K"] 323 | [64.79237, "o", "r"] 324 | [65.041047, "o", "("] 325 | [66.146157, "o", "u"] 326 | [66.313169, "o", "n"] 327 | [66.391487, "o", "e"] 328 | [66.392322, "o", "\u001b[90mscape\u001b[39m\u001b[46G"] 329 | [66.523724, "o", "\u001b[0K"] 330 | [66.52398, "o", "s"] 331 | [66.524442, "o", "\u001b[90mcape\u001b[39m"] 332 | [66.524616, "o", "\u001b[47G"] 333 | [66.659777, "o", "\u001b[0Kc"] 334 | [66.660478, "o", "\u001b[90mape\u001b[39m\u001b[48G"] 335 | [66.773017, "o", "\u001b[0K"] 336 | [66.773164, "o", "a"] 337 | [66.773932, "o", "\u001b[90mpe\u001b[39m\u001b[49G"] 338 | [66.895433, "o", "\u001b[0K"] 339 | [66.895728, "o", "p"] 340 | [66.896179, "o", "\u001b[90me\u001b[39m"] 341 | [66.896242, "o", "\u001b[50G"] 342 | [66.975217, "o", "\u001b[0K"] 343 | [66.975517, "o", "e"] 344 | [67.090376, "o", "d"] 345 | [67.091464, "o", "\u001b[90mTemplate\u001b[39m\u001b[52G"] 346 | [67.361282, "o", "\u001b[0K"] 347 | [67.361511, "o", "T"] 348 | [67.362603, "o", "\u001b[90memplate\u001b[39m\u001b[53G"] 349 | [67.482597, "o", "\u001b[0K"] 350 | [67.482735, "o", "e"] 351 | [67.4835, "o", "\u001b[90mmplate\u001b[39m\u001b[54G"] 352 | [67.605019, "o", "\u001b[0K"] 353 | [67.605161, "o", "m"] 354 | [67.605872, "o", "\u001b[90mplate\u001b[39m\u001b[55G"] 355 | [67.684089, "o", "\u001b[0K"] 356 | [67.68442, "o", "p"] 357 | [67.685067, "o", "\u001b[90mlate\u001b[39m\u001b[56G"] 358 | [67.843398, "o", "\u001b[0K"] 359 | [67.843928, "o", "l"] 360 | [67.84477, "o", "\u001b[90mate\u001b[39m\u001b[57G"] 361 | [67.898588, "o", "\u001b[0K"] 362 | [67.898737, "o", "a"] 363 | [67.899585, "o", "\u001b[90mte\u001b[39m\u001b[58G"] 364 | [67.943292, "o", "\u001b[0K"] 365 | [67.943428, "o", "t"] 366 | [67.944241, "o", "\u001b[90me\u001b[39m\u001b[59G"] 367 | [67.999402, "o", "\u001b[0K"] 368 | [67.999543, "o", "e"] 369 | [68.159971, "o", ","] 370 | [69.485711, "o", "c"] 371 | [69.542503, "o", "o"] 372 | [69.543387, "o", "\u001b[90mn\u001b[39m\u001b[63G"] 373 | [69.618948, "o", "\u001b[0K"] 374 | [69.619051, "o", "n"] 375 | [69.676808, "o", "t"] 376 | [69.733509, "o", "e"] 377 | [69.734356, "o", "\u001b[90mxt\u001b[39m\u001b[66G"] 378 | [69.913441, "o", "\u001b[0K"] 379 | [69.91394, "o", "x"] 380 | [69.914742, "o", "\u001b[90mt\u001b[39m"] 381 | [69.914959, "o", "\u001b[67G"] 382 | [70.06975, "o", "\u001b[0K"] 383 | [70.070107, "o", "t"] 384 | [70.397938, "o", ")"] 385 | [70.737559, "o", ")"] 386 | [71.668305, "o", "\r\r\n"] 387 | [71.672042, "o", "[UNESCAPED] \r\n"] 388 | [71.672312, "o", "\u001b[90mundefined\u001b[39m\r\n"] 389 | [71.672349, "o", "\u001b[1G\u001b[0J> \u001b[3G"] 390 | [73.660252, "o", "c"] 391 | [73.742545, "o", "o"] 392 | [73.743874, "o", "\u001b[90mn\u001b[39m\u001b[5G"] 393 | [73.848591, "o", "\u001b[0K"] 394 | [73.848968, "o", "n"] 395 | [73.951883, "o", "s"] 396 | [74.017886, "o", "o"] 397 | [74.018678, "o", "\u001b[90mle\u001b[39m\u001b[8G"] 398 | [74.46955, "o", "\u001b[0K"] 399 | [74.469984, "o", "l"] 400 | [74.470586, "o", "\u001b[90me\u001b[39m\u001b[9G"] 401 | [74.63833, "o", "\u001b[0K"] 402 | [74.638754, "o", "e"] 403 | [74.641187, "o", "\r\n\u001b[90mObject [console] { log: [Function: log], warn: [Function: warn], dir: [Funct...\u001b[39m\u001b[10G\u001b[1A"] 404 | [74.796011, "o", "\u001b[1B"] 405 | [74.796463, "o", "\u001b[2K\u001b[1A."] 406 | [75.022072, "o", "l"] 407 | [75.023613, "o", "\u001b[90mog\u001b[39m\u001b[12G"] 408 | [75.024712, "o", "\r\n\u001b[90mundefined\u001b[39m\u001b[12G"] 409 | [75.02495, "o", "\u001b[1A"] 410 | [75.224132, "o", "\u001b[1B"] 411 | [75.224297, "o", "\u001b[2K\u001b[1A\u001b[0Ko"] 412 | [75.225419, "o", "\u001b[90mg\u001b[39m\u001b[13G"] 413 | [75.226371, "o", "\r\n\u001b[90mundefined\u001b[39m\u001b[13G\u001b[1A"] 414 | [75.368637, "o", "\u001b[1B"] 415 | [75.368736, "o", "\u001b[2K\u001b[1A\u001b[0Kg"] 416 | [75.370556, "o", "\r\n\u001b[90m[Function: log]\u001b[39m\u001b[14G\u001b[1A"] 417 | [75.650812, "o", "\u001b[1B"] 418 | [75.650998, "o", "\u001b[2K\u001b[1A("] 419 | [76.258794, "o", "\""] 420 | [77.374411, "o", "["] 421 | [77.643834, "o", "E"] 422 | [77.777499, "o", "S"] 423 | [77.876262, "o", "C"] 424 | [78.024718, "o", "A"] 425 | [78.148635, "o", "P"] 426 | [78.274725, "o", "E"] 427 | [78.407121, "o", "D"] 428 | [78.924673, "o", "]"] 429 | [79.499473, "o", " "] 430 | [79.995016, "o", "\""] 431 | [80.219755, "o", " "] 432 | [80.399385, "o", "+"] 433 | [80.689551, "o", " "] 434 | [80.895085, "o", "e"] 435 | [81.16423, "o", "j"] 436 | [81.165288, "o", "\u001b[90ms\u001b[39m\u001b[32G"] 437 | [81.547661, "o", "\u001b[0K"] 438 | [81.548163, "o", "s"] 439 | [81.690651, "o", "."] 440 | [81.918651, "o", "r"] 441 | [81.919982, "o", "\u001b[90me\u001b[39m\u001b[35G"] 442 | [81.961964, "o", "\u001b[0K"] 443 | [81.962107, "o", "e"] 444 | [82.085721, "o", "n"] 445 | [82.086718, "o", "\u001b[90mder\u001b[39m\u001b[37G"] 446 | [82.163737, "o", "\u001b[0Kd"] 447 | [82.164589, "o", "\u001b[90mer\u001b[39m\u001b[38G"] 448 | [82.297523, "o", "\u001b[0Ke"] 449 | [82.299165, "o", "\u001b[90mr\u001b[39m\u001b[39G"] 450 | [82.355085, "o", "\u001b[0K"] 451 | [82.355216, "o", "r"] 452 | [82.582247, "o", "("] 453 | [82.850697, "o", "e"] 454 | [82.974965, "o", "s"] 455 | [82.976126, "o", "\u001b[90mcape\u001b[39m"] 456 | [82.976303, "o", "\u001b[43G"] 457 | [83.108319, "o", "\u001b[0Kc"] 458 | [83.109126, "o", "\u001b[90mape\u001b[39m\u001b[44G"] 459 | [83.220708, "o", "\u001b[0K"] 460 | [83.220841, "o", "a"] 461 | [83.221611, "o", "\u001b[90mpe\u001b[39m\u001b[45G"] 462 | [83.299045, "o", "\u001b[0K"] 463 | [83.299187, "o", "p"] 464 | [83.300005, "o", "\u001b[90me\u001b[39m\u001b[46G"] 465 | [83.388564, "o", "\u001b[0K"] 466 | [83.38872, "o", "e"] 467 | [83.502397, "o", "d"] 468 | [83.503529, "o", "\u001b[90mTemplate\u001b[39m\u001b[48G"] 469 | [83.728032, "o", "\u001b[0K"] 470 | [83.728213, "o", "T"] 471 | [83.729397, "o", "\u001b[90memplate\u001b[39m\u001b[49G"] 472 | [83.836886, "o", "\u001b[0K"] 473 | [83.837103, "o", "e"] 474 | [83.837465, "o", "\u001b[90mmplate\u001b[39m\u001b[50G"] 475 | [83.951158, "o", "\u001b[0K"] 476 | [83.951414, "o", "m"] 477 | [83.951844, "o", "\u001b[90mplate\u001b[39m"] 478 | [83.951942, "o", "\u001b[51G"] 479 | [84.031899, "o", "\u001b[0K"] 480 | [84.032046, "o", "p"] 481 | [84.032896, "o", "\u001b[90mlate\u001b[39m\u001b[52G"] 482 | [84.201433, "o", "\u001b[0K"] 483 | [84.201926, "o", "l"] 484 | [84.202775, "o", "\u001b[90mate\u001b[39m\u001b[53G"] 485 | [84.312657, "o", "\u001b[0K"] 486 | [84.312789, "o", "a"] 487 | [84.313605, "o", "\u001b[90mte\u001b[39m\u001b[54G"] 488 | [84.347359, "o", "\u001b[0K"] 489 | [84.347668, "o", "t"] 490 | [84.348712, "o", "\u001b[90me\u001b[39m"] 491 | [84.348761, "o", "\u001b[55G"] 492 | [84.414357, "o", "\u001b[0K"] 493 | [84.414512, "o", "e"] 494 | [84.63011, "o", ","] 495 | [85.471931, "o", "c"] 496 | [85.572063, "o", "o"] 497 | [85.573612, "o", "\u001b[90mn\u001b[39m\u001b[59G"] 498 | [85.64021, "o", "\u001b[0K"] 499 | [85.640653, "o", "n"] 500 | [85.718017, "o", "t"] 501 | [85.764, "o", "e"] 502 | [85.764801, "o", "\u001b[90mxt\u001b[39m"] 503 | [85.764927, "o", "\u001b[62G"] 504 | [85.957071, "o", "\u001b[0K"] 505 | [85.95753, "o", "x"] 506 | [85.958227, "o", "\u001b[90mt\u001b[39m"] 507 | [85.958381, "o", "\u001b[63G"] 508 | [86.114242, "o", "\u001b[0K"] 509 | [86.114424, "o", "t"] 510 | [86.39153, "o", ")"] 511 | [86.517543, "o", ")"] 512 | [87.350735, "o", "\r\r\n"] 513 | [87.352762, "o", "[ESCAPED] <script>alert('Hello CSE1500!);</script>\r\n"] 514 | [87.353354, "o", "\u001b[90mundefined\u001b[39m\r\n\u001b[1G\u001b[0J> \u001b[3G"] 515 | [90.32288, "o", "\r\r\n"] 516 | [90.323068, "o", "(To exit, press ^C again or ^D or type .exit)\r\n\u001b[1G\u001b[0J> \u001b[3G"] 517 | [91.300737, "o", "\r\r\n"] 518 | [91.690381, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 519 | -------------------------------------------------------------------------------- /cast/node-file-reading.cast: -------------------------------------------------------------------------------- 1 | {"version": 2, "width": 80, "height": 18, "timestamp": 1636400258, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}} 2 | [1.353226, "o", "\u001b]7;file://iMac.lan/Users/claudia/tmp\u0007"] 3 | [1.35355, "o", "\u001b[?1034h"] 4 | [1.353639, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 20:37:40 \u001b[0m\u001b[48;5;240m ~/tmp \u001b[0m\u001b[38;5;240m \u001b[0m "] 5 | [3.260293, "o", "l"] 6 | [3.460089, "o", "s"] 7 | [4.996766, "o", "\r\n"] 8 | [5.016678, "o", "app.js course-info.md\r\n"] 9 | [5.123615, "o", "\u001b]7;file://iMac.lan/Users/claudia/tmp\u0007"] 10 | [5.123801, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 20:37:43 \u001b[0m\u001b[48;5;240m ~/tmp \u001b[0m\u001b[38;5;240m \u001b[0m "] 11 | [6.236743, "o", "m"] 12 | [6.293502, "o", "o"] 13 | [6.371269, "o", "r"] 14 | [6.422731, "o", "e"] 15 | [6.507521, "o", " "] 16 | [6.693491, "o", "c"] 17 | [6.789796, "o", "o"] 18 | [6.860023, "o", "u"] 19 | [6.998583, "o", "rse-info.md "] 20 | [8.011317, "o", "\r\n"] 21 | [8.063516, "o", "\u001b[?1h\u001b=\r# Overview\r\n\r\n## Course code\r\nCSE1500\r\n\r\n## Course name\r\nWeb and Database Technology\r\n\r\n## Teaching period\r\nQ2\r\n\u001b[7mcourse-info.md (END)\u001b[27m\u001b[K"] 22 | [9.22894, "o", "\r\u001b[K\u001b[?1l\u001b>"] 23 | [9.350457, "o", "\u001b]7;file://iMac.lan/Users/claudia/tmp\u0007"] 24 | [9.350619, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 20:37:48 \u001b[0m\u001b[48;5;240m ~/tmp \u001b[0m\u001b[38;5;240m \u001b[0m "] 25 | [10.204829, "o", "m"] 26 | [10.326454, "o", "o"] 27 | [10.397936, "o", "r"] 28 | [10.444959, "o", "e"] 29 | [10.576599, "o", " "] 30 | [10.772083, "o", "a"] 31 | [10.858606, "o", "p"] 32 | [10.979029, "o", "p"] 33 | [11.212468, "o", ".js "] 34 | [11.902809, "o", "\r\n"] 35 | [11.920617, "o", "\u001b[?1h\u001b=\r"] 36 | [11.920804, "o", "const fs = require(\"fs\");\r\n\r\nfs.readFile(\"./course-info.md\", \"utf8\", function (err, data) {\r\n if (err) throw err;\r\n console.log(data);\r\n});\r\n\u001b[7mapp.js (END)\u001b[27m\u001b[K"] 37 | [14.425046, "o", "\r\u001b[K\u001b[?1l\u001b>"] 38 | [14.54992, "o", "\u001b]7;file://iMac.lan/Users/claudia/tmp\u0007"] 39 | [14.550095, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 20:37:53 \u001b[0m\u001b[48;5;240m ~/tmp \u001b[0m\u001b[38;5;240m \u001b[0m "] 40 | [17.565072, "o", "n"] 41 | [17.691984, "o", "o"] 42 | [17.892915, "o", "d"] 43 | [18.024189, "o", "e"] 44 | [18.333622, "o", " "] 45 | [18.563654, "o", "a"] 46 | [19.139153, "o", "p"] 47 | [19.340333, "o", "p"] 48 | [19.500568, "o", ".js "] 49 | [20.44405, "o", "\r\n"] 50 | [20.571684, "o", "# Overview\r\n\r\n## Course code\r\nCSE1500\r\n\r\n## Course name\r\nWeb and Database Technology\r\n\r\n## Teaching period\r\nQ2\r\n\r\n"] 51 | [20.658847, "o", "\u001b]7;file://iMac.lan/Users/claudia/tmp\u0007"] 52 | [20.659027, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 20:37:59 \u001b[0m\u001b[48;5;240m ~/tmp \u001b[0m\u001b[38;5;240m \u001b[0m "] 53 | [23.574995, "o", "r"] 54 | [23.826885, "o", "m"] 55 | [23.947391, "o", " "] 56 | [24.228661, "o", "c"] 57 | [24.36427, "o", "o"] 58 | [24.459842, "o", "u"] 59 | [24.611773, "o", "rse-info.md "] 60 | [27.043132, "o", "\r\n"] 61 | [27.171339, "o", "\u001b]7;file://iMac.lan/Users/claudia/tmp\u0007"] 62 | [27.17153, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 20:38:05 \u001b[0m\u001b[48;5;240m ~/tmp \u001b[0m\u001b[38;5;240m \u001b[0m "] 63 | [28.075031, "o", "n"] 64 | [28.180638, "o", "o"] 65 | [28.236459, "o", "d"] 66 | [28.394976, "o", "e"] 67 | [28.490679, "o", " "] 68 | [28.611016, "o", "a"] 69 | [28.826727, "o", "pp.js "] 70 | [29.672571, "o", "\r\n"] 71 | [29.722164, "o", "/Users/claudia/tmp/app.js:4\r\n if (err) throw err;\r\n ^\r\n\r\n[Error: ENOENT: no such file or directory, open './course-info.md'] {\r\n errno: \u001b[33m-2\u001b[39m,\r\n code: \u001b[32m'ENOENT'\u001b[39m,\r\n syscall: \u001b[32m'open'\u001b[39m,\r\n path: \u001b[32m'./course-info.md'\u001b[39m\r\n}\r\n"] 72 | [29.823936, "o", "\u001b]7;file://iMac.lan/Users/claudia/tmp\u0007"] -------------------------------------------------------------------------------- /cast/node-file-watching.cast: -------------------------------------------------------------------------------- 1 | {"version": 2, "width": 80, "height": 18, "timestamp": 1636402640, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}} 2 | [1.619527, "o", "\u001b]7;file://iMac.lan/Users/claudia/tmp\u0007"] 3 | [1.619918, "o", "\u001b[?1034h\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 21:17:22 \u001b[0m\u001b[48;5;240m ~/tmp \u001b[0m\u001b[38;5;240m \u001b[0m "] 4 | [3.105799, "o", "l"] 5 | [3.239994, "o", "s"] 6 | [3.557244, "o", "\r\n"] 7 | [3.576074, "o", "fileToWatch.txt watching.js\r\n"] 8 | [3.685192, "o", "\u001b]7;file://iMac.lan/Users/claudia/tmp\u0007"] 9 | [3.685392, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 21:17:24 \u001b[0m\u001b[48;5;240m ~/tmp \u001b[0m\u001b[38;5;240m \u001b[0m "] 10 | [5.872334, "o", "n"] 11 | [5.970987, "o", "o"] 12 | [6.040443, "o", "d"] 13 | [6.163066, "o", "e"] 14 | [6.243239, "o", " "] 15 | [6.394451, "o", "w"] 16 | [6.508806, "o", "a"] 17 | [6.585938, "o", "t"] 18 | [6.763165, "o", "c"] 19 | [6.810967, "o", "h"] 20 | [6.891266, "o", "i"] 21 | [6.995966, "o", "n"] 22 | [7.074237, "o", "g"] 23 | [7.24387, "o", "."] 24 | [7.380855, "o", "j"] 25 | [7.525079, "o", "s"] 26 | [8.518232, "o", "\r\n"] 27 | [8.625491, "o", "\u001b[31m File to watch required as command line argument. \u001b[0m\r\n"] 28 | [8.715436, "o", "\u001b]7;file://iMac.lan/Users/claudia/tmp\u0007"] 29 | [8.715637, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 21:17:29 \u001b[0m\u001b[48;5;240m ~/tmp \u001b[0m\u001b[48;5;52m 1 \u001b[0m\u001b[38;5;52m \u001b[0m "] 30 | [10.101142, "o", "n"] 31 | [10.175593, "o", "o"] 32 | [10.240087, "o", "d"] 33 | [10.376243, "o", "e"] 34 | [10.480485, "o", " "] 35 | [10.616995, "o", "w"] 36 | [10.69844, "o", "a"] 37 | [10.775618, "o", "t"] 38 | [10.969833, "o", "c"] 39 | [11.025097, "o", "h"] 40 | [11.115362, "o", "i"] 41 | [11.209297, "o", "n"] 42 | [11.297886, "o", "g"] 43 | [11.55356, "o", "."] 44 | [11.682627, "o", "j"] 45 | [11.813734, "o", "s"] 46 | [11.978715, "o", " "] 47 | [12.395653, "o", "f"] 48 | [12.504941, "o", "i"] 49 | [12.531857, "o", "l"] 50 | [12.627155, "o", "e"] 51 | [12.851403, "o", "D"] 52 | [12.987239, "o", "o"] 53 | [13.051839, "o", "e"] 54 | [13.122997, "o", "s"] 55 | [13.443458, "o", "N"] 56 | [13.587467, "o", "o"] 57 | [13.668366, "o", "t"] 58 | [13.907933, "o", "E"] 59 | [14.076407, "o", "x"] 60 | [14.188094, "o", "i"] 61 | [14.26549, "o", "s"] 62 | [14.319441, "o", "t"] 63 | [14.457707, "o", "."] 64 | [14.553468, "o", "t"] 65 | [14.741263, "o", "x"] 66 | [14.910137, "o", "t"] 67 | [15.47838, "o", "\r\n"] 68 | [15.527347, "o", "\u001b[31m File to watch does not exist! \u001b[0m\r\n"] 69 | [15.624958, "o", "\u001b]7;file://iMac.lan/Users/claudia/tmp\u0007"] 70 | [15.625161, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 21:17:36 \u001b[0m\u001b[48;5;240m ~/tmp \u001b[0m\u001b[48;5;52m 1 \u001b[0m\u001b[38;5;52m \u001b[0m "] 71 | [18.053719, "o", "n"] 72 | [18.128689, "o", "o"] 73 | [18.217782, "o", "d"] 74 | [18.320758, "o", "e"] 75 | [18.40929, "o", " "] 76 | [18.51813, "o", "w"] 77 | [18.604601, "o", "a"] 78 | [18.687559, "o", "t"] 79 | [18.898642, "o", "ching.js "] 80 | [19.946355, "o", "f"] 81 | [20.039919, "o", "i"] 82 | [20.096491, "o", "l"] 83 | [20.178248, "o", "e"] 84 | [20.562494, "o", "t"] 85 | [20.914657, "o", "\b\u001b[K"] 86 | [21.146145, "o", "T"] 87 | [21.347529, "o", "oWatch.txt "] 88 | [21.810822, "o", "\r\n"] 89 | [21.861096, "o", "\u001b[32m Now watching fileToWatch.txt \u001b[0m\r\n"] 90 | [28.228343, "o", "\u001b[34m File changed \u001b[0m\r\n"] 91 | [28.25367, "o", "\u001b[34m File changed \u001b[0m\r\n"] 92 | [29.564943, "o", "\u001b[34m File changed \u001b[0m\r\n"] -------------------------------------------------------------------------------- /cast/node-install-express.cast: -------------------------------------------------------------------------------- 1 | {"version": 2, "width": 80, "height": 18, "timestamp": 1636442590, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}} 2 | [1.187181, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 3 | [1.188316, "o", "\u001b[?1034h\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 08:23:11 \u001b[0m\u001b[48;5;240m ~ \u001b[0m\u001b[38;5;240m \u001b[0m "] 4 | [1.942536, "o", "m"] 5 | [2.142276, "o", "k"] 6 | [2.282478, "o", "d"] 7 | [2.377875, "o", "i"] 8 | [2.453474, "o", "r"] 9 | [2.589649, "o", " "] 10 | [3.461693, "o", "n"] 11 | [3.637983, "o", "o"] 12 | [3.730244, "o", "d"] 13 | [3.882267, "o", "e"] 14 | [4.045938, "o", "-"] 15 | [4.165892, "o", "e"] 16 | [4.389964, "o", "x"] 17 | [4.529618, "o", "p"] 18 | [4.636993, "o", "r"] 19 | [4.693875, "o", "e"] 20 | [4.789899, "o", "s"] 21 | [4.941846, "o", "s"] 22 | [5.069547, "o", "-"] 23 | [6.354688, "o", "e"] 24 | [6.57912, "o", "x"] 25 | [7.178306, "o", "\r\n"] 26 | [7.308193, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 27 | [7.308407, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 08:23:17 \u001b[0m\u001b[48;5;240m ~ \u001b[0m\u001b[38;5;240m \u001b[0m "] 28 | [9.988189, "o", "c"] 29 | [10.13265, "o", "d"] 30 | [10.539144, "o", " "] 31 | [10.798105, "o", "n"] 32 | [10.882301, "o", "o"] 33 | [11.021594, "o", "d"] 34 | [11.320636, "o", "e-express-ex/"] 35 | [11.933439, "o", "\r\n"] 36 | [12.055081, "o", "\u001b]7;file://iMac.lan/Users/claudia/node-express-ex\u0007"] 37 | [12.055295, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 08:23:22 \u001b[0m\u001b[48;5;240m ~/node-express-ex \u001b[0m\u001b[38;5;240m \u001b[0m "] 38 | [13.845953, "o", "n"] 39 | [14.021721, "o", "p"] 40 | [14.206248, "o", "m"] 41 | [14.270041, "o", " "] 42 | [14.405498, "o", "i"] 43 | [14.604334, "o", "i"] 44 | [14.942212, "o", "\b\u001b[K"] 45 | [15.190033, "o", "n"] 46 | [15.261991, "o", "i"] 47 | [15.421591, "o", "t"] 48 | [15.530628, "o", " "] 49 | [15.685994, "o", "-"] 50 | [15.894138, "o", "y"] 51 | [16.140588, "o", "\r\n"] 52 | [16.401589, "o", "Wrote to /Users/claudia/node-express-ex/package.json:\r\n\r\n{\r\n \"name\": \"node-express-ex\",\r\n \"version\": \"1.0.0\",\r\n \"description\": \"\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\r\n },\r\n \"keywords\": [],\r\n \"author\": \"\",\r\n \"license\": \"ISC\"\r\n}\r\n\r\n\r\n"] 53 | [16.487308, "o", "\u001b]7;file://iMac.lan/Users/claudia/node-express-ex\u0007"] 54 | [16.487502, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 08:23:27 \u001b[0m\u001b[48;5;240m ~/node-express-ex \u001b[0m\u001b[38;5;240m \u001b[0m "] 55 | [20.654203, "o", "l"] 56 | [20.749051, "o", "s"] 57 | [20.941836, "o", "\r\n"] 58 | [20.963791, "o", "package.json\r\n"] 59 | [21.068289, "o", "\u001b]7;file://iMac.lan/Users/claudia/node-express-ex\u0007"] 60 | [21.068493, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 08:23:31 \u001b[0m\u001b[48;5;240m ~/node-express-ex \u001b[0m\u001b[38;5;240m \u001b[0m "] 61 | [22.717742, "o", "n"] 62 | [23.07018, "o", "p"] 63 | [23.614189, "o", "m"] 64 | [23.832134, "o", " "] 65 | [24.15813, "o", "i"] 66 | [24.406046, "o", "n"] 67 | [24.555488, "o", "s"] 68 | [24.636878, "o", "t"] 69 | [24.757133, "o", "a"] 70 | [24.884344, "o", "l"] 71 | [25.045903, "o", "l"] 72 | [25.164712, "o", " "] 73 | [25.282554, "o", "e"] 74 | [25.485969, "o", "x"] 75 | [25.710082, "o", "r"] 76 | [25.765949, "o", "e"] 77 | [25.845331, "o", "s"] 78 | [26.133838, "o", "\b\u001b[K"] 79 | [26.245119, "o", "\b\u001b[K"] 80 | [26.341777, "o", "\b\u001b[K"] 81 | [26.558447, "o", "p"] 82 | [26.638366, "o", "r"] 83 | [26.680842, "o", "e"] 84 | [26.748816, "o", "s"] 85 | [26.931299, "o", "s"] 86 | [27.046146, "o", " "] 87 | [27.182209, "o", "-"] 88 | [27.48172, "o", "s"] 89 | [27.885656, "o", "\b\u001b[K"] 90 | [28.09363, "o", "-"] 91 | [28.221515, "o", "s"] 92 | [28.356777, "o", "a"] 93 | [28.445893, "o", "v"] 94 | [28.542001, "o", "e"] 95 | [28.777835, "o", "\r\n"] 96 | [29.024439, "o", "\u001b[?25l"] 97 | [29.025571, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠧ rollbackFailedOptional: \u001b[34;40mverb\u001b[0m \u001b[35mnpm-session\u001b[0m 5a18c2e1fd7c548\u001b[0m\u001b[K\r"] 98 | [29.078855, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠧ rollbackFailedOptional: \u001b[34;40mverb\u001b[0m \u001b[35mnpm-session\u001b[0m 5a18c2e1fd7c548\u001b[0m\u001b[K\r"] 99 | [29.131004, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠧ rollbackFailedOptional: \u001b[34;40mverb\u001b[0m \u001b[35mnpm-session\u001b[0m 5a18c2e1fd7c548\u001b[0m\u001b[K\r"] 100 | [29.187895, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠧ fetchMetadata: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m express@4.17.1\u001b[0m\u001b[K\r"] 101 | [29.238367, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠋ fetchMetadata: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m express@4.17.1\u001b[0m\u001b[K\r"] 102 | [29.287735, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠸ fetchMetadata: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m express@4.17.1\u001b[0m\u001b[K\r"] 103 | [29.338839, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠴ fetchMetadata: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m express@4.17.1\u001b[0m\u001b[K\r"] 104 | [29.388705, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠧ fetchMetadata: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m utils-merge@1.0\u001b[0m\u001b[K\r"] 105 | [29.441285, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠙ fetchMetadata: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m utils-merge@1.0\u001b[0m\u001b[K\r"] 106 | [29.49168, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠴ fetchMetadata: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m mime-types@2.1.\u001b[0m\u001b[K\r"] 107 | [29.545038, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠇ loadDep:type-is: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m mime-db@1.51.\u001b[0m\u001b[K\r"] 108 | [29.596762, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠋ fetchMetadata: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m bytes@3.1.0 che\u001b[0m\u001b[K\r"] 109 | [29.650246, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠸ fetchMetadata: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m ms@2.0.0 checki\u001b[0m\u001b[K\r"] 110 | [29.700832, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠹ fetchMetadata: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m safer-buffer@2.\u001b[0m\u001b[K\r"] 111 | [29.755193, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠴ fetchMetadata: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m ee-first@1.1.1\u001b[0m\u001b[K\r"] 112 | [29.804991, "o", "⸨\u001b[90m░░░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠇ loadDep:mime-types: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m unpipe@1.0\u001b[0m\u001b[K\r"] 113 | [29.856588, "o", "⸨\u001b[7m \u001b[27m\u001b[90m░░░░░░░░░░░░░░░░\u001b[0m⸩ ⠧ loadDep:statuses: \u001b[7msill\u001b[0m \u001b[35mresolveWithNewModule\u001b[0m forwarded@0.\u001b[0m\u001b[K\r"] 114 | [29.913257, "o", "⸨\u001b[7m \u001b[27m\u001b[90m░░░░░░░░░░░░\u001b[0m⸩ ⠋ diffTrees: \u001b[7msill\u001b[0m \u001b[35minstall\u001b[0m generateActionsToTake\u001b[0m\u001b[K\r"] 115 | [29.969901, "o", "⸨\u001b[7m \u001b[27m\u001b[90m░░░░░░░░░░░\u001b[0m⸩ ⠇ extract:express: \u001b[34;40mverb\u001b[0m \u001b[35mlock\u001b[0m using /Users/claudia/.npm/_lo\u001b[0m\u001b[K\r"] 116 | [30.019633, "o", "⸨\u001b[7m \u001b[27m\u001b[90m░░░░░░\u001b[0m⸩ ⠴ finalize:inherits: \u001b[7msill\u001b[0m \u001b[35mfinalize\u001b[0m /Users/claudia/node-exp\u001b[0m\u001b[K\r"] 117 | [30.070356, "o", "⸨\u001b[7m \u001b[27m\u001b[90m░░░░░░\u001b[0m⸩ ⠴ refresh-package-json:express: \u001b[32;40mtiming\u001b[0m \u001b[35maction:finalize\u001b[0m Com\u001b[0m\u001b[K\r"] 118 | [30.121897, "o", "⸨\u001b[7m \u001b[27m\u001b[90m░░░░░░\u001b[0m⸩ ⠧ postinstall: \u001b[32minfo\u001b[0m \u001b[35mlifecycle\u001b[0m express@4.17.1~postinstall:\u001b[0m\u001b[K\r"] 119 | [30.141256, "o", "\r\u001b[K\u001b[?25h"] 120 | [30.141362, "o", "\u001b[37;40mnpm\u001b[0m \u001b[0m\u001b[34;40mnotice\u001b[0m\u001b[35m\u001b[0m created a lockfile as package-lock.json. You should commit this file.\r\n\u001b[0m"] 121 | [30.144244, "o", "\u001b[37;40mnpm\u001b[0m \u001b[0m"] 122 | [30.144268, "o", "\u001b[30;43mWARN\u001b[0m\u001b[35m\u001b[0m node-express-ex@1.0.0 No description\r\n\u001b[0m"] 123 | [30.146549, "o", "\u001b[37;40mnpm\u001b[0m \u001b[0m\u001b[30;43mWARN\u001b[0m\u001b[35m\u001b[0m"] 124 | [30.146563, "o", " node-express-ex@1.0.0 No repository field.\r\n\u001b[0m"] 125 | [30.146749, "o", "\r\n"] 126 | [30.147261, "o", "+ express@4.17.1\r\nadded 50 packages from 37 contributors and audited 50 packages in 1.124s\r\n"] 127 | [30.157364, "o", "found \u001b[92m0\u001b[0m vulnerabilities\r\n\r\n"] 128 | [30.283024, "o", "\u001b]7;file://iMac.lan/Users/claudia/node-express-ex\u0007"] 129 | [30.283229, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 08:23:40 \u001b[0m\u001b[48;5;240m ~/node-express-ex \u001b[0m\u001b[38;5;240m \u001b[0m "] 130 | [32.99642, "o", "l"] 131 | [33.130386, "o", "s"] 132 | [33.397563, "o", "\r\n"] 133 | [33.416148, "o", "\u001b[1m\u001b[36mnode_modules\u001b[39;49m\u001b[0m package-lock.json package.json\r\n"] 134 | [33.525453, "o", "\u001b]7;file://iMac.lan/Users/claudia/node-express-ex\u0007"] 135 | [33.525648, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 08:23:44 \u001b[0m\u001b[48;5;240m ~/node-express-ex \u001b[0m\u001b[38;5;240m \u001b[0m "] 136 | [35.110029, "o", "l"] 137 | [35.509983, "o", "s"] 138 | [35.69378, "o", " "] 139 | [35.909719, "o", "n"] 140 | [36.021642, "o", "o"] 141 | [36.134484, "o", "de_modules/"] 142 | [36.517635, "o", "\r\n"] 143 | [36.552424, "o", "\u001b[1m\u001b[36maccepts\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mescape-html\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mmime\u001b[39;49m\u001b[0m \u001b[1m\u001b[36msafer-buffer\u001b[39;49m\u001b[0m\r\n\u001b[1m\u001b[36marray-flatten\u001b[39;49m\u001b[0m \u001b[1m\u001b[36metag\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mmime-db\u001b[39;49m\u001b[0m \u001b[1m\u001b[36msend\u001b[39;49m\u001b[0m\r\n\u001b[1m\u001b[36mbody-parser\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mexpress\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mmime-types\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mserve-static\u001b[39;49m\u001b[0m\r\n"] 144 | [36.552666, "o", "\u001b[1m\u001b[36mbytes\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mfinalhandler\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mms\u001b[39;49m\u001b[0m \u001b[1m\u001b[36msetprototypeof\u001b[39;49m\u001b[0m\r\n\u001b[1m\u001b[36mcontent-disposition\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mforwarded\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mnegotiator\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mstatuses\u001b[39;49m\u001b[0m\r\n\u001b[1m\u001b[36mcontent-type\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mfresh\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mon-finished\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mtoidentifier\u001b[39;49m\u001b[0m\r\n\u001b[1m\u001b[36mcookie\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mhttp-errors\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mparseurl\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mtype-is\u001b[39;49m\u001b[0m\r\n\u001b[1m\u001b[36mcookie-signature\u001b[39;49m\u001b[0m \u001b[1m\u001b[36miconv-lite\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mpath-to-regexp\u001b[39;49m\u001b[0m \u001b[1m\u001b[36munpipe\u001b[39;49m\u001b[0m\r\n\u001b[1m\u001b[36mdebug\u001b[39;49m\u001b[0m \u001b[1m\u001b[36minherits\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mproxy-addr\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mutils-merge\u001b[39;49m\u001b[0m\r\n\u001b[1m\u001b[36mdepd\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mipaddr.js\u001b[39;49m\u001b[0m \u001b[1m\u001b[36"] 145 | [36.552906, "o", "mqs\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mvary\u001b[39;49m\u001b[0m\r\n\u001b[1m\u001b[36mdestroy\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mmedia-typer\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mrange-parser\u001b[39;49m\u001b[0m\r\n\u001b[1m\u001b[36mee-first\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mmerge-descriptors\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mraw-body\u001b[39;49m\u001b[0m\r\n\u001b[1m\u001b[36mencodeurl\u001b[39;49m\u001b[0m \u001b[1m\u001b[36mmethods\u001b[39;49m\u001b[0m \u001b[1m\u001b[36msafe-buffer\u001b[39;49m\u001b[0m\r\n"] 146 | [36.924691, "o", "\u001b]7;file://iMac.lan/Users/claudia/node-express-ex\u0007"] 147 | [36.924885, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 08:23:47 \u001b[0m\u001b[48;5;240m ~/node-express-ex \u001b[0m\u001b[38;5;240m \u001b[0m "] 148 | [38.19796, "o", "l"] 149 | [38.294108, "o", "s"] 150 | [39.013106, "o", "\b\u001b[K"] 151 | [39.14172, "o", "\b\u001b[K"] 152 | [39.581794, "o", "m"] 153 | [39.660918, "o", "o"] 154 | [39.699812, "o", "r"] 155 | [39.747848, "o", "e"] 156 | [39.81946, "o", " "] 157 | [40.060184, "o", "p"] 158 | [40.126377, "o", "a"] 159 | [40.279795, "o", "c"] 160 | [40.365096, "o", "k"] 161 | [40.509826, "o", "\u0007"] 162 | [40.510315, "o", "age"] 163 | [41.182999, "o", "."] 164 | [41.357633, "o", "j"] 165 | [41.462287, "o", "son "] 166 | [41.778037, "o", "\r\n"] 167 | [41.833004, "o", "\u001b[?1h\u001b=\r"] 168 | [41.833217, "o", "{\r\n \"name\": \"node-express-ex\",\r\n \"version\": \"1.0.0\",\r\n \"description\": \"\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\r\n },\r\n \"keywords\": [],\r\n \"author\": \"\",\r\n \"license\": \"ISC\",\r\n \"dependencies\": {\r\n \"express\": \"^4.17.1\"\r\n }\r\n}\r\n\u001b[7mpackage.json (END)\u001b[27m\u001b[K"] 169 | [44.930374, "o", "\r\u001b[K\u001b[?1l\u001b>"] 170 | [45.312877, "o", "\u001b]7;file://iMac.lan/Users/claudia/node-express-ex\u0007"] 171 | -------------------------------------------------------------------------------- /cast/node-repl.cast: -------------------------------------------------------------------------------- 1 | {"version": 2, "width": 80, "height": 18, "timestamp": 1636537889, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}} 2 | [1.515256, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 3 | [1.515617, "o", "\u001b[?1034h\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 10:51:31 \u001b[0m\u001b[48;5;240m ~ \u001b[0m\u001b[38;5;240m \u001b[0m "] 4 | [1.952138, "o", "n"] 5 | [2.222021, "o", "o"] 6 | [2.637973, "o", "d"] 7 | [2.795404, "o", "e"] 8 | [4.033366, "o", "\r\n"] 9 | [4.082396, "o", "Welcome to Node.js v12.22.7.\r\nType \".help\" for more information.\r\n"] 10 | [4.094424, "o", "\u001b[1G"] 11 | [4.094544, "o", "\u001b[0J> \u001b[3G"] 12 | [6.725295, "o", "s"] 13 | [6.845668, "o", " "] 14 | [7.061503, "o", "="] 15 | [7.159214, "o", " "] 16 | [7.511172, "o", "\""] 17 | [7.836178, "o", "H"] 18 | [7.968921, "o", "e"] 19 | [8.048729, "o", "l"] 20 | [8.147617, "o", "l"] 21 | [8.29769, "o", "o"] 22 | [8.407691, "o", " "] 23 | [9.041207, "o", "C"] 24 | [9.197488, "o", "S"] 25 | [9.253328, "o", "E"] 26 | [9.694355, "o", "1"] 27 | [9.984938, "o", "5"] 28 | [10.211435, "o", "0"] 29 | [10.298581, "o", "0"] 30 | [10.582142, "o", "!"] 31 | [10.919947, "o", "\""] 32 | [11.942994, "o", "\r\r\n"] 33 | [11.94759, "o", "\u001b[32m'Hello CSE1500!'\u001b[39m\r\n"] 34 | [11.947933, "o", "\u001b[1G\u001b[0J> \u001b[3G"] 35 | [13.136436, "o", "f"] 36 | [13.29098, "o", "u"] 37 | [13.292107, "o", "\u001b[90mnction\u001b[39m\u001b[5G"] 38 | [13.483726, "o", "\u001b[0K"] 39 | [13.484193, "o", "n"] 40 | [13.484949, "o", "\u001b[90mction\u001b[39m"] 41 | [13.485103, "o", "\u001b[6G"] 42 | [13.582858, "o", "\u001b[0Kc"] 43 | [13.583647, "o", "\u001b[90mtion\u001b[39m\u001b[7G"] 44 | [13.775552, "o", "\u001b[0K"] 45 | [13.776142, "o", "t"] 46 | [13.776987, "o", "\u001b[90mion\u001b[39m"] 47 | [13.777222, "o", "\u001b[8G"] 48 | [13.877045, "o", "\u001b[0K"] 49 | [13.877441, "o", "i"] 50 | [13.879288, "o", "\u001b[90mon\u001b[39m\u001b[9G"] 51 | [13.93204, "o", "\u001b[0K"] 52 | [13.932183, "o", "o"] 53 | [13.932937, "o", "\u001b[90mn\u001b[39m\u001b[10G"] 54 | [14.001445, "o", "\u001b[0K"] 55 | [14.001603, "o", "n"] 56 | [14.149104, "o", " "] 57 | [15.159405, "o", "f"] 58 | [15.44208, "o", "("] 59 | [15.623621, "o", "a"] 60 | [15.858423, "o", ")"] 61 | [16.712928, "o", "{"] 62 | [18.164859, "o", "c"] 63 | [18.330734, "o", "o"] 64 | [18.33176, "o", "\u001b[90mn\u001b[39m\u001b[19G"] 65 | [18.386971, "o", "\u001b[0Kn"] 66 | [18.714382, "o", "s"] 67 | [18.814833, "o", "o"] 68 | [18.8156, "o", "\u001b[90mle\u001b[39m\u001b[22G"] 69 | [18.974189, "o", "\u001b[0K"] 70 | [18.974379, "o", "l"] 71 | [18.975453, "o", "\u001b[90me\u001b[39m\u001b[23G"] 72 | [19.072179, "o", "\u001b[0K"] 73 | [19.072317, "o", "e"] 74 | [19.558231, "o", "."] 75 | [19.783109, "o", "l"] 76 | [19.784724, "o", "\u001b[90mog\u001b[39m\u001b[26G"] 77 | [19.905921, "o", "\u001b[0K"] 78 | [19.906262, "o", "o"] 79 | [19.907347, "o", "\u001b[90mg\u001b[39m\u001b[27G"] 80 | [19.997512, "o", "\u001b[0K"] 81 | [19.997655, "o", "g"] 82 | [20.381053, "o", "("] 83 | [20.806322, "o", "`"] 84 | [22.39501, "o", "+"] 85 | [22.493578, "o", "+"] 86 | [22.629223, "o", "+"] 87 | [22.876371, "o", " "] 88 | [23.088601, "o", "$"] 89 | [23.403478, "o", "{"] 90 | [23.563392, "o", "a"] 91 | [23.777124, "o", "}"] 92 | [24.12561, "o", " "] 93 | [24.396426, "o", "$"] 94 | [24.519545, "o", "$"] 95 | [24.619487, "o", "$"] 96 | [25.151204, "o", "\u001b[1G"] 97 | [25.151717, "o", "\u001b[0J> function f(a){console.log(`+++ ${a} $$\u001b[41G"] 98 | [25.261195, "o", "\u001b[1G\u001b[0J> function f(a){console.log(`+++ ${a} $"] 99 | [25.26163, "o", "\u001b[40G"] 100 | [25.373816, "o", "\u001b[1G\u001b[0J> function f(a){console.log(`+++ ${a} "] 101 | [25.373958, "o", "\u001b[39G"] 102 | [25.667706, "o", "+"] 103 | [25.789153, "o", "+"] 104 | [25.890953, "o", "+"] 105 | [26.587939, "o", "`"] 106 | [27.398294, "o", ")"] 107 | [27.70336, "o", ";"] 108 | [28.007051, "o", "}"] 109 | [28.491415, "o", "\r\r\n"] 110 | [28.493492, "o", "\u001b[90mundefined\u001b[39m\r\n"] 111 | [28.493776, "o", "\u001b[1G\u001b[0J> \u001b[3G"] 112 | [29.987229, "o", "f"] 113 | [29.993119, "o", "\r\n\u001b[90m[Function: f]\u001b[39m\u001b[4G\u001b[1A"] 114 | [30.253714, "o", "\u001b[1B\u001b[2K\u001b[1A("] 115 | [30.528293, "o", "s"] 116 | [31.089812, "o", ")"] 117 | [31.45108, "o", "\r\r\n"] 118 | [31.452594, "o", "+++ Hello CSE1500! +++\r\n"] 119 | [31.453829, "o", "\u001b[90mundefined\u001b[39m\r\n\u001b[1G\u001b[0J> \u001b[3G"] 120 | [33.66778, "o", "\r\r\n"] 121 | [33.667976, "o", "(To exit, press ^C again or ^D or type .exit)\r\n"] 122 | [33.66806, "o", "\u001b[1G\u001b[0J> "] 123 | [33.668107, "o", "\u001b[3G"] 124 | [34.612022, "o", "\r\r\n"] 125 | [34.757541, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 126 | -------------------------------------------------------------------------------- /cast/ping-example.cast: -------------------------------------------------------------------------------- 1 | {"version": 2, "width": 80, "height": 18, "timestamp": 1636136240, "env": {"SHELL": "/bin/bash", "TERM": "xterm-256color"}} 2 | [1.467427, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 3 | [1.468262, "o", "\u001b[?1034h\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 19:17:22 \u001b[0m\u001b[48;5;240m ~ \u001b[0m\u001b[38;5;240m \u001b[0m "] 4 | [2.776474, "o", "p"] 5 | [2.918248, "o", "i"] 6 | [3.031886, "o", "n"] 7 | [3.287724, "o", "g"] 8 | [3.544219, "o", " "] 9 | [4.687672, "o", "w"] 10 | [4.864158, "o", "w"] 11 | [5.024081, "o", "w"] 12 | [5.248023, "o", "."] 13 | [5.431663, "o", "g"] 14 | [5.51221, "o", "o"] 15 | [5.64024, "o", "o"] 16 | [5.710271, "o", "g"] 17 | [5.816068, "o", "l"] 18 | [5.902263, "o", "e"] 19 | [6.015023, "o", "."] 20 | [6.151862, "o", "c"] 21 | [6.254409, "o", "o"] 22 | [6.351508, "o", "m"] 23 | [6.927191, "o", "\r\n"] 24 | [6.964099, "o", "PING www.google.com (142.251.36.36): 56 data bytes\r\n"] 25 | [6.981215, "o", "64 bytes from 142.251.36.36: icmp_seq=0 ttl=58 time=17.048 ms\r\n"] 26 | [7.979499, "o", "64 bytes from 142.251.36.36: icmp_seq=1 ttl=58 time=10.125 ms\r\n"] 27 | [8.985118, "o", "64 bytes from 142.251.36.36: icmp_seq=2 ttl=58 time=10.661 ms\r\n"] 28 | [9.995804, "o", "64 bytes from 142.251.36.36: icmp_seq=3 ttl=58 time=16.916 ms\r\n"] 29 | [10.272723, "o", "c"] 30 | [10.998356, "o", "64 bytes from 142.251.36.36: icmp_seq=4 ttl=58 time=14.245 ms\r\n"] 31 | [11.995641, "o", "64 bytes from 142.251.36.36: icmp_seq=5 ttl=58 time=10.632 ms\r\n"] 32 | [12.824266, "o", "^D\b\b"] 33 | [13.000839, "o", "64 bytes from 142.251.36.36: icmp_seq=6 ttl=58 time=10.648 ms\r\n"] 34 | [14.007479, "o", "64 bytes from 142.251.36.36: icmp_seq=7 ttl=58 time=12.145 ms\r\n"] 35 | [15.01728, "o", "64 bytes from 142.251.36.36: icmp_seq=8 ttl=58 time=16.768 ms\r\n"] 36 | [16.014151, "o", "64 bytes from 142.251.36.36: icmp_seq=9 ttl=58 time=10.494 ms\r\n"] 37 | [16.783928, "o", "^D\b\b"] 38 | [17.018835, "o", "64 bytes from 142.251.36.36: icmp_seq=10 ttl=58 time=10.190 ms\r\n"] 39 | [17.751895, "o", "^C"] 40 | [17.75287, "o", "\r\n--- www.google.com ping statistics ---\r\n"] 41 | [17.754426, "o", "11 packets transmitted, 11 packets received, 0.0% packet loss\r\nround-trip min/avg/max/stddev = 10.125/12.716/17.048/2.802 ms\r\n"] 42 | [17.881321, "o", "\u001b]7;file://iMac.lan/Users/claudia\u0007"] 43 | [17.881508, "o", "\u001b[48;5;32m claudia \u001b[0m\u001b[48;5;161m 19:17:38 \u001b[0m\u001b[48;5;240m ~ \u001b[0m\u001b[38;5;240m \u001b[0m "] 44 | -------------------------------------------------------------------------------- /checkURLsInMarkdown.js: -------------------------------------------------------------------------------- 1 | //@ts-check 2 | 3 | const fs = require('fs'); 4 | const https = require('https'); 5 | const http = require('http'); 6 | const path = require('path'); 7 | const url = require('url'); 8 | 9 | const absURL = "https://chauff.github.io/cse1500-web-transcripts/"; //brittle; infer from execution path of script 10 | 11 | const regex = /\]\(.*?\)/g;//simple regex to extract markdown links 12 | 13 | const outFile = fs.createWriteStream('urlCheck.txt'); 14 | outFile.write("URL check @ " + new Date() + "\n"); 15 | 16 | /* Markdown files to include: 17 | * all markdown files in the root directory excluding README.md (i.e. only index.js is read) 18 | * all markdown files in _practicals 19 | * all markdown files in _lectures 20 | */ 21 | let parseMarkdownFiles = (function () { 22 | let foldersToCheck = ["/", "_practicals", "_lectures"]; 23 | 24 | foldersToCheck.forEach(function (folder) { 25 | 26 | fs.readdir(path.join(__dirname, folder), function (err, files) { 27 | if (err) { 28 | return console.log("\tError reading directory: " + err); 29 | } 30 | 31 | files.forEach(function (file) { 32 | if (file.endsWith(".md") && !file.startsWith("README")) { 33 | 34 | //read the file 35 | fs.readFile(path.join(__dirname, folder, file), 'utf8', function (err, data) { 36 | if (err) 37 | return console.log("\t\tError reading file: " + err); 38 | 39 | //extract all links 40 | const links = data.match(regex); 41 | 42 | //no links found 43 | if (links == null) { 44 | return; 45 | } 46 | 47 | for (let i = 0; i < links.length; i++) { 48 | let link = links[i].slice(2, -1);//get rid if "](" and ")" 49 | 50 | let protocol = null; 51 | 52 | //remove relative links 53 | if (link.startsWith("https")) { 54 | protocol = https; 55 | } 56 | else if (link.startsWith("http:")) { 57 | protocol = http; 58 | } 59 | else if (link.startsWith("..") || link.startsWith("/")) { 60 | protocol = https; //we remain on github 61 | 62 | //another brittle bit; we parse markdown but 63 | //in the end resolve to http(s) 64 | if(link.startsWith("..")){ 65 | link = link.replace("..", ""); 66 | } 67 | link = "." + link; //needed, otherwise resolve removes /cse1500-web-transcripts 68 | link = url.resolve(absURL, link); 69 | } 70 | else if (protocol == null) { 71 | continue; 72 | } 73 | else 74 | ; 75 | 76 | //check status code: write out 400+ status codes 77 | //and errors 78 | protocol.get(link, (res) => { 79 | if (res.statusCode >= 400) { 80 | outFile.write("[" + res.statusCode + "] " + file + " => " + link + "\n"); 81 | } 82 | }).on('error', (e) => { 83 | outFile.write("[ERROR] " + e.message + " " + file + " => " + link + "\n"); 84 | }); 85 | } 86 | }); 87 | } 88 | }) 89 | }) 90 | }); 91 | })(); 92 | 93 | 94 | -------------------------------------------------------------------------------- /exams/final-cse1500-201920-solutions.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/exams/final-cse1500-201920-solutions.pdf -------------------------------------------------------------------------------- /exams/final-cse1500-202122-solutions.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/exams/final-cse1500-202122-solutions.pdf -------------------------------------------------------------------------------- /exams/midterm-cse1500-201819-solutions.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/exams/midterm-cse1500-201819-solutions.pdf -------------------------------------------------------------------------------- /exams/midterm-cse1500-201819.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/exams/midterm-cse1500-201819.pdf -------------------------------------------------------------------------------- /exams/midterm-resit-cse1500-201819-solutions.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/exams/midterm-resit-cse1500-201819-solutions.pdf -------------------------------------------------------------------------------- /exams/midterm-resit-cse1500-201819.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/exams/midterm-resit-cse1500-201819.pdf -------------------------------------------------------------------------------- /exams/midterm-resit-cse1500-202122.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/exams/midterm-resit-cse1500-202122.pdf -------------------------------------------------------------------------------- /images/noun_landscape_1647184.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/images/noun_landscape_1647184.png -------------------------------------------------------------------------------- /images/test.md: -------------------------------------------------------------------------------- 1 | # Temporary entry 2 | To test some Jekyll stuff. 3 | -------------------------------------------------------------------------------- /img/A1-games.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/A1-games.png -------------------------------------------------------------------------------- /img/A2-completed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/A2-completed.png -------------------------------------------------------------------------------- /img/A3-game-CSS-completed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/A3-game-CSS-completed.png -------------------------------------------------------------------------------- /img/A3-splash-CSS-completed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/A3-splash-CSS-completed.png -------------------------------------------------------------------------------- /img/RME-grading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/RME-grading.png -------------------------------------------------------------------------------- /img/RME-materials.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/RME-materials.png -------------------------------------------------------------------------------- /img/RME-vsc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/RME-vsc.png -------------------------------------------------------------------------------- /img/Screenshot_2020-08-27 Ballons a two player word game CSS GRID.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/Screenshot_2020-08-27 Ballons a two player word game CSS GRID.png -------------------------------------------------------------------------------- /img/Screenshot_2020-08-27 Ballons a two player word game with grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/Screenshot_2020-08-27 Ballons a two player word game with grid.png -------------------------------------------------------------------------------- /img/VSC-debug-conf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/VSC-debug-conf.png -------------------------------------------------------------------------------- /img/VSC-debug.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/VSC-debug.png -------------------------------------------------------------------------------- /img/VSC-extensions-install.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/VSC-extensions-install.png -------------------------------------------------------------------------------- /img/VSC-github-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/VSC-github-settings.png -------------------------------------------------------------------------------- /img/VSC-liveshare-install.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/VSC-liveshare-install.png -------------------------------------------------------------------------------- /img/VSC-liveshare-use.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/VSC-liveshare-use.png -------------------------------------------------------------------------------- /img/VSC-source.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/VSC-source.png -------------------------------------------------------------------------------- /img/VSC-sync.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/VSC-sync.png -------------------------------------------------------------------------------- /img/boardgame-chess.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/boardgame-chess.png -------------------------------------------------------------------------------- /img/boardgame-delft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/boardgame-delft.png -------------------------------------------------------------------------------- /img/boardgame-draughts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/boardgame-draughts.png -------------------------------------------------------------------------------- /img/boardgame-hex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/boardgame-hex.png -------------------------------------------------------------------------------- /img/boardgame-ludo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/boardgame-ludo.png -------------------------------------------------------------------------------- /img/boardgame-mastermind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/boardgame-mastermind.png -------------------------------------------------------------------------------- /img/boardgame-reversi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/boardgame-reversi.png -------------------------------------------------------------------------------- /img/codepen-broken-glasses.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-broken-glasses.png -------------------------------------------------------------------------------- /img/codepen-bw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-bw.png -------------------------------------------------------------------------------- /img/codepen-cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-cloud.png -------------------------------------------------------------------------------- /img/codepen-fire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-fire.png -------------------------------------------------------------------------------- /img/codepen-leaf1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-leaf1.png -------------------------------------------------------------------------------- /img/codepen-leaf2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-leaf2.png -------------------------------------------------------------------------------- /img/codepen-leaf3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-leaf3.png -------------------------------------------------------------------------------- /img/codepen-leaf4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-leaf4.png -------------------------------------------------------------------------------- /img/codepen-leaf5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-leaf5.png -------------------------------------------------------------------------------- /img/codepen-leaf6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-leaf6.png -------------------------------------------------------------------------------- /img/codepen-leaf7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-leaf7.png -------------------------------------------------------------------------------- /img/codepen-logs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-logs.png -------------------------------------------------------------------------------- /img/codepen-raindrop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-raindrop.png -------------------------------------------------------------------------------- /img/codepen-searchlight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-searchlight.png -------------------------------------------------------------------------------- /img/codepen-snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-snow.png -------------------------------------------------------------------------------- /img/codepen-thunder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-thunder.png -------------------------------------------------------------------------------- /img/codepen-wind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/codepen-wind.png -------------------------------------------------------------------------------- /img/css-abs-fixed.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-abs-fixed.mov -------------------------------------------------------------------------------- /img/css-broken-glasses.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-broken-glasses.png -------------------------------------------------------------------------------- /img/css-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-button.png -------------------------------------------------------------------------------- /img/css-bw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-bw.png -------------------------------------------------------------------------------- /img/css-chrome-text-decoration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-chrome-text-decoration.png -------------------------------------------------------------------------------- /img/css-cite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-cite.png -------------------------------------------------------------------------------- /img/css-cloud-pseudoelement.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-cloud-pseudoelement.png -------------------------------------------------------------------------------- /img/css-cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-cloud.png -------------------------------------------------------------------------------- /img/css-color-theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-color-theme.png -------------------------------------------------------------------------------- /img/css-color-theme2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-color-theme2.png -------------------------------------------------------------------------------- /img/css-colors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-colors.png -------------------------------------------------------------------------------- /img/css-cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-cross.png -------------------------------------------------------------------------------- /img/css-cse1500-responsive.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-cse1500-responsive.mov -------------------------------------------------------------------------------- /img/css-data-attribute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-data-attribute.png -------------------------------------------------------------------------------- /img/css-debugging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-debugging.png -------------------------------------------------------------------------------- /img/css-devtools-curl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-devtools-curl.png -------------------------------------------------------------------------------- /img/css-dom-tree-simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-dom-tree-simple.png -------------------------------------------------------------------------------- /img/css-dom-tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-dom-tree.png -------------------------------------------------------------------------------- /img/css-due.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-due.png -------------------------------------------------------------------------------- /img/css-eggs-absolute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-eggs-absolute.png -------------------------------------------------------------------------------- /img/css-eggs-relative.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-eggs-relative.png -------------------------------------------------------------------------------- /img/css-eggs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-eggs.png -------------------------------------------------------------------------------- /img/css-enabled-disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-enabled-disabled.png -------------------------------------------------------------------------------- /img/css-ex1-test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-ex1-test.png -------------------------------------------------------------------------------- /img/css-fire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-fire.png -------------------------------------------------------------------------------- /img/css-firefox-link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-firefox-link.png -------------------------------------------------------------------------------- /img/css-fixed-absolute.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-fixed-absolute.gif -------------------------------------------------------------------------------- /img/css-flags-absolute.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-flags-absolute.png -------------------------------------------------------------------------------- /img/css-flags-initial.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-flags-initial.png -------------------------------------------------------------------------------- /img/css-flags-relative.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-flags-relative.png -------------------------------------------------------------------------------- /img/css-float.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-float.png -------------------------------------------------------------------------------- /img/css-glass-window.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-glass-window.png -------------------------------------------------------------------------------- /img/css-grid-explanation.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 17 | 18 | 19 | 20 | Row 1Column 1 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | Row 1Column 2 31 | 32 | Row 1Column 3 33 | 34 | Row 2Column 1 35 | 36 | Row 2Column 2 37 | 38 | Row 2Column 3 39 | 40 | Row 3Column 1 41 | 42 | Row 3Column 2 43 | 44 | Row 3Column 3 45 | 46 | 47 | 48 | 55 | 58 | 59 | 64 | 65 | 70 | 75 | 78 | 80 | 86 | 87 | 90 | 95 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | Line 1 109 | 110 | Line 2 111 | 112 | Line 3 113 | 114 | Line 4 115 | 116 | Line 1 117 | 118 | Line 2 119 | 120 | Line 3 121 | 122 | Line 4 123 | 124 | -------------------------------------------------------------------------------- /img/css-grid-step1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-grid-step1.png -------------------------------------------------------------------------------- /img/css-grid-step2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-grid-step2.png -------------------------------------------------------------------------------- /img/css-grid-step3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-grid-step3.png -------------------------------------------------------------------------------- /img/css-grid-step4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-grid-step4.png -------------------------------------------------------------------------------- /img/css-grid-step5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-grid-step5.png -------------------------------------------------------------------------------- /img/css-grid-step6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-grid-step6.png -------------------------------------------------------------------------------- /img/css-grid-step7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-grid-step7.png -------------------------------------------------------------------------------- /img/css-grid-step8.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-grid-step8.gif -------------------------------------------------------------------------------- /img/css-leaf1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-leaf1.png -------------------------------------------------------------------------------- /img/css-leaf2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-leaf2.png -------------------------------------------------------------------------------- /img/css-leaf3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-leaf3.png -------------------------------------------------------------------------------- /img/css-leaf4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-leaf4.png -------------------------------------------------------------------------------- /img/css-leaf5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-leaf5.png -------------------------------------------------------------------------------- /img/css-leaf6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-leaf6.png -------------------------------------------------------------------------------- /img/css-leaf7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-leaf7.png -------------------------------------------------------------------------------- /img/css-lightning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-lightning.png -------------------------------------------------------------------------------- /img/css-logs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-logs.png -------------------------------------------------------------------------------- /img/css-mobile-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-mobile-screen.png -------------------------------------------------------------------------------- /img/css-overflow-ellipsis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-overflow-ellipsis.png -------------------------------------------------------------------------------- /img/css-printmedia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-printmedia.png -------------------------------------------------------------------------------- /img/css-pseudo-classes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-pseudo-classes.png -------------------------------------------------------------------------------- /img/css-rain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-rain.png -------------------------------------------------------------------------------- /img/css-raindrop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-raindrop.png -------------------------------------------------------------------------------- /img/css-searchlight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-searchlight.png -------------------------------------------------------------------------------- /img/css-selector-combinations.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-selector-combinations.png -------------------------------------------------------------------------------- /img/css-sidebars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-sidebars.png -------------------------------------------------------------------------------- /img/css-snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-snow.png -------------------------------------------------------------------------------- /img/css-text-animation.mov: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-text-animation.mov -------------------------------------------------------------------------------- /img/css-thunder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-thunder.png -------------------------------------------------------------------------------- /img/css-tobe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-tobe.png -------------------------------------------------------------------------------- /img/css-tudelft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-tudelft.png -------------------------------------------------------------------------------- /img/css-user-select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-user-select.png -------------------------------------------------------------------------------- /img/css-valid-invalid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-valid-invalid.png -------------------------------------------------------------------------------- /img/css-weather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-weather.png -------------------------------------------------------------------------------- /img/css-wind.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/css-wind.png -------------------------------------------------------------------------------- /img/design-appcache.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-appcache.png -------------------------------------------------------------------------------- /img/design-coffeecompany.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-coffeecompany.png -------------------------------------------------------------------------------- /img/design-cycle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-cycle.png -------------------------------------------------------------------------------- /img/design-ebay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-ebay.png -------------------------------------------------------------------------------- /img/design-ebay2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-ebay2.png -------------------------------------------------------------------------------- /img/design-google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-google.png -------------------------------------------------------------------------------- /img/design-google2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-google2.png -------------------------------------------------------------------------------- /img/design-html5-form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-html5-form.png -------------------------------------------------------------------------------- /img/design-inputDate-firefox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-inputDate-firefox.png -------------------------------------------------------------------------------- /img/design-inputDate-safari.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-inputDate-safari.png -------------------------------------------------------------------------------- /img/design-inspector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-inspector.png -------------------------------------------------------------------------------- /img/design-koopplein.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-koopplein.png -------------------------------------------------------------------------------- /img/design-performance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-performance.png -------------------------------------------------------------------------------- /img/design-performance2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-performance2.png -------------------------------------------------------------------------------- /img/design-search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-search.png -------------------------------------------------------------------------------- /img/design-surveymonkey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-surveymonkey.png -------------------------------------------------------------------------------- /img/design-twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-twitter.png -------------------------------------------------------------------------------- /img/design-windows95.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-windows95.png -------------------------------------------------------------------------------- /img/design-zdnet-2001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-zdnet-2001.png -------------------------------------------------------------------------------- /img/design-zdnet-2014.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/design-zdnet-2014.png -------------------------------------------------------------------------------- /img/exam.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/exam.png -------------------------------------------------------------------------------- /img/github-error500.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/github-error500.png -------------------------------------------------------------------------------- /img/http-OSI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-OSI.png -------------------------------------------------------------------------------- /img/http-basicauth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-basicauth.png -------------------------------------------------------------------------------- /img/http-cache-control.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-cache-control.png -------------------------------------------------------------------------------- /img/http-devtools.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-devtools.png -------------------------------------------------------------------------------- /img/http-devtools2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-devtools2.png -------------------------------------------------------------------------------- /img/http-fatURLs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-fatURLs.png -------------------------------------------------------------------------------- /img/http-http-req-res.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-http-req-res.png -------------------------------------------------------------------------------- /img/http-lynx-amazon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-lynx-amazon.png -------------------------------------------------------------------------------- /img/http-lynx-google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-lynx-google.png -------------------------------------------------------------------------------- /img/http-nytimes-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-nytimes-example.png -------------------------------------------------------------------------------- /img/http-redirect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-redirect.png -------------------------------------------------------------------------------- /img/http-twitter-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-twitter-example.png -------------------------------------------------------------------------------- /img/http-web.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-web.png -------------------------------------------------------------------------------- /img/http-webcache.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-webcache.png -------------------------------------------------------------------------------- /img/http-websocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/http-websocket.png -------------------------------------------------------------------------------- /img/index-webstack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/index-webstack.png -------------------------------------------------------------------------------- /img/js-console-assert.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-console-assert.png -------------------------------------------------------------------------------- /img/js-console-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-console-table.png -------------------------------------------------------------------------------- /img/js-event-listeners.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-event-listeners.png -------------------------------------------------------------------------------- /img/js-example1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-example1.png -------------------------------------------------------------------------------- /img/js-example2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-example2.png -------------------------------------------------------------------------------- /img/js-example3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-example3.png -------------------------------------------------------------------------------- /img/js-example4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-example4.png -------------------------------------------------------------------------------- /img/js-example5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-example5.png -------------------------------------------------------------------------------- /img/js-example6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-example6.png -------------------------------------------------------------------------------- /img/js-example7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-example7.png -------------------------------------------------------------------------------- /img/js-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-github.png -------------------------------------------------------------------------------- /img/js-indexeddb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-indexeddb.png -------------------------------------------------------------------------------- /img/js-jsdoc-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-jsdoc-example.png -------------------------------------------------------------------------------- /img/js-mountain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-mountain.png -------------------------------------------------------------------------------- /img/js-prototypechain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-prototypechain.png -------------------------------------------------------------------------------- /img/js-ts-check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/js-ts-check.png -------------------------------------------------------------------------------- /img/no-zoom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/no-zoom.png -------------------------------------------------------------------------------- /img/node-book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-book.png -------------------------------------------------------------------------------- /img/node-debug.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-debug.png -------------------------------------------------------------------------------- /img/node-event-loop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-event-loop.png -------------------------------------------------------------------------------- /img/node-file-structure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-file-structure.png -------------------------------------------------------------------------------- /img/node-nodejs-clientjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-nodejs-clientjs.png -------------------------------------------------------------------------------- /img/node-splash-statistics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-splash-statistics.png -------------------------------------------------------------------------------- /img/node-tcp-js-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-tcp-js-2.png -------------------------------------------------------------------------------- /img/node-tcp-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-tcp-js.png -------------------------------------------------------------------------------- /img/node-todo-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-todo-app.png -------------------------------------------------------------------------------- /img/node-vsc-watching.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-vsc-watching.png -------------------------------------------------------------------------------- /img/node-watch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-watch.png -------------------------------------------------------------------------------- /img/node-websocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-websocket.png -------------------------------------------------------------------------------- /img/node-ws-multiplayer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-ws-multiplayer.png -------------------------------------------------------------------------------- /img/node-xhr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node-xhr.png -------------------------------------------------------------------------------- /img/node2-ejs-js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node2-ejs-js.png -------------------------------------------------------------------------------- /img/node2-express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node2-express.png -------------------------------------------------------------------------------- /img/node2-html-manually.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node2-html-manually.png -------------------------------------------------------------------------------- /img/node2-middleware.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node2-middleware.png -------------------------------------------------------------------------------- /img/node2-module.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node2-module.png -------------------------------------------------------------------------------- /img/node2-regex-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node2-regex-app.png -------------------------------------------------------------------------------- /img/node2-templating.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/node2-templating.png -------------------------------------------------------------------------------- /img/security-aws.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/security-aws.png -------------------------------------------------------------------------------- /img/security-browser-warning-juiceshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/security-browser-warning-juiceshop.png -------------------------------------------------------------------------------- /img/security-browser-warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/security-browser-warning.png -------------------------------------------------------------------------------- /img/security-captcha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/security-captcha.png -------------------------------------------------------------------------------- /img/security-cern-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/security-cern-1.png -------------------------------------------------------------------------------- /img/security-cern-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/security-cern-2.png -------------------------------------------------------------------------------- /img/security-nodegoat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/security-nodegoat.png -------------------------------------------------------------------------------- /img/security-os-command-injection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/security-os-command-injection.png -------------------------------------------------------------------------------- /img/security-security-report-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/security-security-report-1.png -------------------------------------------------------------------------------- /img/security-security-report-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/security-security-report-2.png -------------------------------------------------------------------------------- /img/security-security-report-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/security-security-report-3.png -------------------------------------------------------------------------------- /img/security-security-report-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/security-security-report-4.png -------------------------------------------------------------------------------- /img/security-sessions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/security-sessions.png -------------------------------------------------------------------------------- /img/sessions-aboutdebugging.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-aboutdebugging.png -------------------------------------------------------------------------------- /img/sessions-cookie-basics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-cookie-basics.png -------------------------------------------------------------------------------- /img/sessions-cookies-browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-cookies-browser.png -------------------------------------------------------------------------------- /img/sessions-extension.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-extension.png -------------------------------------------------------------------------------- /img/sessions-localstorage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-localstorage.png -------------------------------------------------------------------------------- /img/sessions-node-cookies-ex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-node-cookies-ex.png -------------------------------------------------------------------------------- /img/sessions-node-sessions-ex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-node-sessions-ex.png -------------------------------------------------------------------------------- /img/sessions-oauth2-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-oauth2-1.png -------------------------------------------------------------------------------- /img/sessions-oauth2-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-oauth2-2.png -------------------------------------------------------------------------------- /img/sessions-oauth2-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-oauth2-3.png -------------------------------------------------------------------------------- /img/sessions-quora.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-quora.png -------------------------------------------------------------------------------- /img/sessions-sessions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-sessions.png -------------------------------------------------------------------------------- /img/sessions-storage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-storage.png -------------------------------------------------------------------------------- /img/sessions-third-party-cookies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/sessions-third-party-cookies.png -------------------------------------------------------------------------------- /img/virtualisation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chauff/cse1500-web-transcripts/385b04b27e96df7f18ea913391329894c0332f18/img/virtualisation.png -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | permalink: / 4 | warning: true 5 | --- 6 | 7 | Web technology course information 8 | == 9 | 10 | CSE1500 is the **Web and Database Technology course**, that first-year students of the Bachelor Computer Science and Engineering take at [TU Delft](https://www.tudelft.nl/). The materials were developed by [Claudia Hauff](https://chauff.github.io/). 11 | 12 | This website contains all materials of the course's web technology part. With a modern browser, you can use highlighting and note-taking in the browser. All data is stored in your browser's [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage): this means that no data (highlights/notes) leaves your machine. Be aware though that all this data is deleted when you clear your browser's storage. 13 | 14 | The following languages are covered: HTTP, HTML, CSS as well as JavaScript on the client and server-side. The *web application stack* is rather minimalistic: it consists of [Node.js](https://nodejs.org/en/), [express](http://expressjs.com/), [axios](https://github.com/axios/axios) and [ws](https://github.com/websockets/ws). 15 | 16 | In the five weeks of the web technology lectures only the web programming fundamentals can be covered. If you want to get a comprehensive overview of the set of languages, technologies and frameworks a frontend or backend web engineer should be familiar with, take a look at the [web developer roadmap - 2020](https://github.com/kamranahmedse/developer-roadmap). 17 | 18 | ## Table of contents 19 | - [Book](#book) 20 | - [Tooling](#tooling) 21 | - [Recommended](#recommended) 22 | - [Required](#required) 23 | - [Web technology topics](#web-technology-topics) 24 | - [Web technology assignments](#web-technology-assignments) 25 | - [Web development resources](#web-development-resources) 26 | - [Lecture material types](#lecture-material-types) 27 | - [University courses with a web focus elsewhere](#university-courses-with-a-web-focus-elsewhere) 28 | - [Courses elsewhere](#courses-elsewhere) 29 | 30 | ## Book 31 | 32 | 33 | 34 | The book we recommend is [Web Development with Node and Express, 2nd Edition](https://www.oreilly.com/library/view/web-development-with/9781492053507/). It shows where and how Node.js/Express (two key frameworks we introduce in this course) can be employed in **production settings**. It goes well beyond the course content and includes chapters on code maintenance, quality assurance and how to deploy an application in production. The book already assumes familiarity with basic web programming. 35 | 36 | **There is no recommended book to introduce HTML, CSS and JavaScript.** Instead, there are pointers to introductory resources that cover the basics of each of these technologies. The lecture materials go beyond those basics. 37 | 38 | ## Tooling 39 | 40 | ### Recommended 41 | 42 | [Visual Studio Code](https://code.visualstudio.com/) (VSC) is the recommended development environment for the assignments. It is a free and open-source Integrated Development Environment (IDE). It is also [the most popular IDE](https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-integrated-development-environment) for developers today. 43 | 44 | ![Visual Studio Code](img/RME-vsc.png) 45 | 46 | VSC offers **many extensions**. You can find a guide on how to browse and install them [here](https://code.visualstudio.com/docs/editor/extension-gallery). A list with all kinds of "delightful" extensions can be found [here](https://github.com/viatsko/awesome-vscode); we recommend at least the following: 47 | 48 | - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint), a popular *linting utility* for JavaScript (a linter is a tool that analyzes source code to flag potentially poor code such as unused variables) - use it to improve your code. 49 | - [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) does what the name suggests. 50 | - [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) to make finding the file you are after in your app directory a bit easier. 51 | - If you like to add TODOs to your code, try [Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree), it makes sure you do not overlook any of your TODOs! 52 | - Finally, install a good [theme](https://code.visualstudio.com/docs/getstarted/themes) for your IDE to make coding more enjoyable. [Dracula](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula) is a popular one. [Cobalt2](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2) is also nice. If you want to pick based on visuals, head to [https://vscodethemes.com/](https://vscodethemes.com/). 53 | 54 | If you are new to team programming, and want to use VSC's features efficiently, [read our VSC guide](_practicals/vsc-usage.md). 55 | 56 | **Browser developer tools** are integrated in all modern browsers; familiarize yourself with the developer tools of your favorite browser. In our transcripts, we showcase [Firefox's](https://developer.mozilla.org/en-US/docs/Tools) and from time to [Chrome's](https://developers.google.com/web/tools/chrome-devtools) developer tools. 57 | 58 | ### Required 59 | 60 | The latest stable version of [Node.js](https://nodejs.org/en/). 61 | 62 | Two modern web browsers such as Chrome, Firefox, Edge, etc. to test your project code across browser implementations. 63 | 64 | Telnet (for your first web technology assignment). 65 | 66 | OpenSSL (for your first web technology assignment). 67 | 68 | ## Web technology topics 69 | 70 | The web technology topics we cover are the following: 71 | 72 | - HTTP 73 | - HTML and web design 74 | - JavaScript 75 | - Node.js 76 | - CSS 77 | - Node.js (advanced) 78 | - Cookies and sessions 79 | - Web security 80 | 81 | ## Web technology assignments 82 | 83 | 84 | 85 | There are three web technology assignments, each one covering the contents of two to three lectures: 86 | 87 | - [The first web technology assignment covers HTTP and web design](_practicals/assignment-http-design.md). 88 | - [The second web technology assignment asks you to write client-side and server-side JavaScript code](_practicals/assignment-js-node.md). 89 | - [The last web technology assignment focuses on server-side JavaScript and CSS](_practicals/assignment-css-node.md). 90 | 91 | The three assignments build on each other—over the course of them you are tasked with implementing a **multi-player board game**. 92 | 93 | **In order to help you get started, we have created a [demo game application](https://github.com/chauff/cse1500-balloons-game).** If you get stuck, take a look at the demo application, it may help you. 94 | 95 | ## Web development resources 96 | 97 | The practical assignments may require looking up web development specifics. Two good resources for web engineering are [Mozilla's MDN portal](https://developer.mozilla.org/en-US/) and [Google's Web Fundamentals](https://developers.google.com/web/fundamentals/). 98 | 99 | If you want to hear the latest and greatest about the web stack, Twitter is a good source of information. 100 | Here is a list of useful Twitter accounts to follow: 101 | 102 | - [Franziska Hinkelmann](https://twitter.com/fhinkel) works on Node.js at Google. 103 | - [Lea Verou](https://twitter.com/LeaVerou) tweets about all things CSS and the wider web UI world. 104 | - [Lin Clark](https://twitter.com/linclark) makes (among others) technical challenges accessible to the wider public. 105 | - [V8](https://twitter.com/v8js) is Google's JavaScript engine. 106 | - [JavaScript Daily](https://twitter.com/JavaScriptDaily) does exactly what the name suggests. 107 | - [Node.js](https://twitter.com/nodejs). 108 | - [Axel Rauschmeyer](https://twitter.com/rauschma) is the author of a number of popular JavaScript books. 109 | - [Addy Osmani](https://twitter.com/addyosmani) works on Google Chrome and is well-known for his JavaScript design patterns book. 110 | - [Wes Bos](https://twitter.com/wesbos) is the author of popular web stack tutorials. 111 | - [Mozilla Hacks](https://twitter.com/mozhacks) is Mozilla's account for web developers. 112 | - [Visual Studio Code](https://twitter.com/code). 113 | - [Chrome DevTools](https://twitter.com/ChromeDevTools) offers tips and tricks of the dev tool trade for Chrome. 114 | - [Firefox DevTools](https://twitter.com/FirefoxDevTools) offers the same as Chrome DevTools but this time for Firefox. 115 | - [Syntax](https://twitter.com/syntaxfm) offers [podcasts](https://syntax.fm/) for web developers, hosted by Wes Bos and Scott Tolinski. 116 | 117 | ## Lecture material types 118 | 119 | ![materials](img/RME-materials.png) 120 | 121 | For each lecture we provide the following: 122 | 123 | - **Required readings**: to be read **before** the respective lecture. These are typically introductions to the different languages we cover. The lecture materials go beyond the contents of the required readings. 124 | - **Recommended activities**: activities that we think may help you get a better grasp of the different web technologies. Activities are either programming exercises or podcasts. 125 | - **Recommended readings**: these may be tweets, blog posts or book chapters that may help you understand some of the introduced concepts better. 126 | - **Relevant scientific publications**: to showcase how web technologies are researched, we offer examples of scientific publications that contribute to our understanding and use of web technologies. 127 | 128 | ## University courses with a web focus elsewhere 129 | 130 | Naturally, what we present here is only one way of introducing the fundamentals of the web to undergraduate students. A number of other universities also offer publicly accessible teaching materials: 131 | 132 | - [Deep Dive Into Modern Web Development /U Helsinki](https://fullstackopen.com/en) 133 | - [Design and Implementation of Software for the Web /GMU](https://cs.gmu.edu/~tlatoza/teaching/swe432f17/home.html) 134 | - [Web Applications /Stanford](http://web.stanford.edu/class/cs142/) 135 | - [Web Security /Stanford](https://web.stanford.edu/class/cs253/) 136 | - [Creating Modern Web Applications /Brown](https://cs.brown.edu/courses/csci1320/index.html) 137 | - [Web Security /NUS](http://www.comp.nus.edu.sg/~prateeks/teaching/sp15/cs5331-sp15.html) 138 | - [Programming Languages for Web Applications /Virginia](http://www.cs.virginia.edu/~up3f/cs4640/schedule.html) 139 | - [Web Development /MIT](http://webdevelopment.mit.edu/) 140 | - [Cutting-edge Web Technologies /Berkeley (2015)](https://inst.eecs.berkeley.edu/~cs294-101/sp15/) 141 | - [Web Programming /U Washington](https://courses.cs.washington.edu/courses/cse154/20su/) 142 | - [Web and Mobile Systems /U Virginia](http://cs4720.cs.virginia.edu/f14/) 143 | - [JavaScript /UPenn](http://www.seas.upenn.edu/~cis197/) 144 | 145 | ## Courses elsewhere 146 | 147 | - [Microsoft's Web Development for Beginners Curriculum](https://microsoft.github.io/Web-Dev-For-Beginners/#/) 148 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "chauff", 3 | "version": "1.0.0", 4 | "description": "Check URLs across all Markdown files", 5 | "main": "checkURLsInMarkdown.js", 6 | "scripts": {}, 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/chauff/Web-Teaching.git" 10 | }, 11 | "author": "Claudia Hauff" 12 | } 13 | --------------------------------------------------------------------------------