⇦ Back

WDX-180

Web Development X

Week 35 | Advanced JavaScript

Week 34 ⇦

Updated: 20/6/2025

⇨ Week 36

Week 35 - Day 1 | Mini CMS Project

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: Decompose our main app into a web server and a database file. Talk about asynchronous code.
  • Part 2: Continue our talk on asynchronous code and async/await. Database PRIMARY and FOREIGN keys.

You can find the lecture code here

Exercises

  • Study: how import (ESM) vs require (CommonJS) behave in Node (20+)
  • Tasks/Challenges:
    • Find out a better way to create and format the output HTML. For example, create a template function: show_template(page_type,vars)
    • Create and return a Login page
    • Make sure to handle the req.url splitting appropriately. Now, if there is no ?user_id=100, the code breaks
    • Make sure that if the user is not found in the DB, you get some response
    • See if you can serve a favicon and some CSS along with the pages
    • Create a 404 page

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week35/progress/progress.draft.w35.d01.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 35 - Day 2 | Mini CMS Project

Schedule

  • Practice on the topics and share your questions

Exercises

Yesterday, we returned some HTML from the web server (web.ts). This was just a simple template String literal. We can abstract this in a function for better re-usability.

The web server checks the pathname using a basic if conditional and returns a custom HTML. By adding more paths, this code will become complicated and bloated. Maybe you can think of an abstraction so that the request pathname => appropriate HTML works better than the current implementation.

Starting from this code on the CMS repository, (1) create a function that returns the HTML content based on the pathname and some dynamic values. (2) Create an abstraction over the server router: pathname => load data => render HTML

Important: The code link above, points to a particular commit in the repository. Click the Code => Download Zip button on GitHub, to download the code as it was in that exact commit.

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week35/progress/progress.draft.w35.d02.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 35 - Day 3 | Promises

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: More about Promises & the Promise Constructor
  • Part 2: Chaining Promises

You can find the lecture code here and here

Exercises

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week35/progress/progress.draft.w35.d03.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 35 - Day 4 | Practice Day

Schedule

  • Practice on the topics and share your questions

Study Plan

Today is practice day. Practice on the topics covered so far and share your thoughts, questions and insights.

Happy hacking!

Week 35 - Day 5 | Q&A and Mini CMS Project

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: Logical AND and OR operators. How do we connect a domain to our hosted app? Website analytics.
  • Part 2: SQL Injection. Mini CMS project: Creating a form for creating content.

You can find the lecture code here and the logical operator code here.

Important: The code link above, points to a particular commit in the repository. Click the Code => Download Zip button on GitHub, to download the code as it was in that exact commit.

References & Resources:

Exercises

  • Highly recommended challenges:
    • Turn callback-based async functions into Promise-based functions
      • Work with both .then().catch().finally() and async/await/try/catch/finally syntax
        • Try to promisify:
          • Node.js fs methods, e.g. turn these fs.writeFile(cb), fs.readFile(cb) into something like await writeFileP(), await readFileP(filename)
          • The navigator.geolocation methods: getCurrentPosition
          • The new Image() load/error callbacks
          • The XMLHttpRequest object

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week35/progress/progress.draft.w35.d05.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham