week-1.md

Week 1

Always bet on JavaScript.

— @elonmusk, inventor of Java

What the heck is the Event Loop Anyway? by @philip_roberts.

Table of Contents

• Slides
• Theory
• Assignments
• Hand in

Slides

• Lab-1

Theory

Before you start you'll probably want to refresh your JavaScript knowledge a bit. In the first week we'll talk about ES5 vs ES6, basic data types and progressive enhancement. We'll cover this in the lab but make sure you fully understand these concept, the resources below can help.

• The Complete ECMAScript guide
• You Don't Know JS: What is JavaScript

Assignments

Basics

Refresh basic JavaScript knowledge and learn about the difference between ES5 and ES6

Synopsis

• Time: 2:20h
• Goals: subgoal 1
• Period: Week 1

Read some of the more in-depth JavaScript articles below:

• Var Let and Const by Fun Fun Function
• Values, Types and Operators chapter from Eloquent JavaScript

Then, finish the assignments that are used in the Lab of this week.

• Front-end (blok web) JavaScript refactor to ES6
• Datatypes cardio on CodePen

Additionally you can refresh more of your JavaScript knowledge by doing a couple of FreeCodeCamp exercises or do some exercises from Wes Bos his JavaScript30 course.

• FreeCodeCamp Basics JavaScript
• JavaScript 30 by Wes Bos

Enhancement

Research progressive enhancement and document in your wiki your idea of the progressively enhanced component you want to build during this project.

Synopsis

• Time: 6:00h
• Goals: subgoal 1, subgoal 2
• Due: before week 2

Assignment

Research progressive enhancement and document your idea of the component you want to build during this project.

• Look for inspiration, what components do you see in the wild and will fit your matching application?
• What will be done server-side, what will be done client-side?
• Are you going to use web API's on the client to enhance the user experience?
• What will happen if JavaScript is disabled? Will it degrade gracefully to HTML & CSS?

Read for week 2:

• MDN. (2021, 14 september). Introduction to the DOM - Web APIs
• MDN. (2022, 4 februari). Introduction to events - Learn web development

Additional resources

• The Power of Progressive Enhancement by Andy Bell
• Progressive Enhancement Reading list by Quirksblog
• Smashing Mag. (2009, 22 april). Progressive Enhancement: What It Is, And How To Use It?

Hand-in

1. Push your changes:
   Commit your progress in your repository on GitHub under your username in your own matching-app repository.

2. Create an issue:
   Mark this assignment as complete by opening an issue on our GitHub issue tracker. Fill in the issue template of week-1.md with the correct information. Include what progress you made in the description of the issue.

3. Feedback:
   Let us know what you thought of the homework, what part you spend a lot of time on and give us any feedback. Your assignment will be reviewed by teachers and student assistants, so expect people to read it and be ready for tips and tops!