Lately I've been working on refreshing les éditions du samedi website - firstly launched with PluXML... 10 years ago. PluXML served us well for quite a time but maintenance became a little difficult from the moment our catalogue began to grow. And I must admit I did not find how to upgrade, I may have missed too much in-between updates and would have to start again from zero.
FreeCodeCamp changed their courses again. Now they have a Certified Full Stack Developer Curriculum which I started taking and... surprise! I discovered several things. Let's have a look at them.
I'm happy to announce that the first version is available since May! You can play Qwixx here: https://qwixx.jboisseur.xyz
I've been working on this project for a long time. It started when I took a few Python lessons a few years ago but I abandonned because I had no clue about how to get an UI. Going back to HTML/CSS and then starting learning JavaScript put me back on tracks.
So many things! Particularly in JavaScript where I worked with arrays, listened for events, ran a huge amount of loops, created functions, toggled CSS classes, saved data in the user's browser etc. I also learned about debugging and using the web developer tools on the browser. I had to use some PHP as well, for saving best scores.
This said, I think the biggest take away was to divide the work into achievable challenges and push the harder ones at the end. Keeping this goal in mind: at the end of each step, the full game should be playable. This way, the path was most of the time enjoyable, and having something to share along the way is very rewarding.
I already started working on version 2, which is about allowing two persons to play on a same device. I'm experimenting working on cold and old code. It's very time-consuming but I try to refrain from starting all over on a blank project. I try to improve what's already there and implement what's missing to achieve this 2-players goal. One small step at a time.
Aren't you? I'm always struggling to know where to use the for... of loop or the for... in loop.
Let's have here a quick note for reference:
Iterates over an iterable object (object, array, string, map...) and temporarily assign to a variable
const chars = ["Jack", "Daniel", "Sam", "Teal'c"];
for (const char of chars) {
console.log(char); }
Note that you can use const if the variable is not reassigned within the loop.
Loops for properties of an array or object. Not to be used if the order is important.
// array
const chars = ["Jack", "Daniel", "Sam", "Teal'c"];
for (let char in chars) {
console.log(char); // prints the indexes as strings
console.log(chars[char]); // prints the value }
// object
const soldier = {firstname: "Jack", lastname: "O'Neill", team: "SG1"};
for (let key in soldier) {
console.log(key); // prints the key (firstname, lastname, team)
console.log(soldier[key]); // prints the value (Jack, O'Neill, SG1) }
The same result can be obtained using forEach() method (on an array).
const chars = ["Jack", "Daniel", "Sam", "Teal'c"];
chars.forEach(function (char, index) {
console.log(index); // prints the indexes as numbers
console.log(char); // prints the names
});