Frontend board first coding dojo
After a couple of sessions of this experiment where some frontend enthusiasts have been sharing knowledge about Angular, CSS, PWA, UX etc, it was time for all of us to say: ”Okay, let’s start practicing what we are learning or let’s improve what we already know, but how?
Finding an idea or project to start working on , was more trickier than you could ever imagined; it was here when one of our friends came out with a great proposal based on what he saw in the amazing event called ngColombia a few weeks ago. There, we had such fun playing with a game named kahoot which is a “a game-based platform that makes of learning an awesome thing to experience”. It itself was a compilation of several Angular questions(gathered from many sources) whose objective was aimed for all levels of knowledge, from rookies to experts. Some of the questions were very interesting, the goal was to take advantage of this source of knowledge and use it to challenge ourselves, or even to create an interview software to aid HR measure the candidates’ proficiency in Angular; so an idea was born and it was to elaborate a trivia app, as simple as it could sound.
To execute this activity, the plan was to do it in a coding dojo. If you are wondering what is a coding dojo, just like I did before, the answer is really simple “It is a programming session based on a simple coding challenge where programmers of different skill levels are invited to engage in deliberating practice as equals”. yes, this sounds fun and it is!! to find further info click here.
The main part of a trivia is the content or the questions themselves, so the first thing we thought was: “Where are we fetching the questions from? due to knowing that the time in coding dojo isn’t infinite, the idea was to make it as easier as we could, so we built the questions in a json file with a basic structure,
and then our first task was to display the questions; for this, we used an HTML unordered list <ol> and the Angular directive ngForto iterate over the list items. The interesting thing of this excersise was the fact that we learned about how everybody plan and perform the same solution in different ways. In my own experience, this was very interesting to realize that even those people that we admire the most because they possess good skills or a lot of experience, went through the same doubts and struggled with the very small things as everyone did. We need to bear in mind that when we are coding, we are always learning new things, finding new challenges, no matter how many code-lines you have written before. To resume, once we obtained our questions, the next step was to show one by one and check the user’s answer. For this, we created some variable objects and indexes that allowed us to manage each question info and move to the next one.
During this task, we detected there was a concept that most of us didn’t have it clear and this concept claims that when you pass an integer variable as a parameter of a function and we increase it or decrease it in the same instruction, the result could change depending on how we do it.
Using ++/- -
// Incrementlet a = 1;
console.log(a++); // 1
console.log(a); // 2
let b = 1;
console.log(++b); // 2// Decrementlet b = 1;
console.log(b--); // 1
console.log(b); // 0
let b = 1;
console.log(--b); // 0
Another gripping discussion ocurred when we started to implement a transition between questions and the hestiation that was brought around the rxjs options: timer and interval. Which is the best or when should we use them? None is better than the other, they just work different, since the timer emits one particular item after a span of time that you specify, the interval emits an infinite sequence of ascending integers, with a constant interval of time of your choosing.
Finally, we said: “Now that we have something working, let’s try to make it look better” and then, since we were working with Angular’s latest version (Angular 6), we spotted a good oportunity to try out one of the nicest features added to that version, the oportunity to include angular material in a project with just one command line in the CLI, instead of the whole process requiered in previous Angular versions, and we did it:
ng add @angular/material
With just the above line, we added Angular Material to our application and it worked really well. We just had to import some classes in the app.module and add them to our html elements, which made our site look more decent.
At the end, we worked on a last dare which was to change the style of the answer selected by the user depending if it was right or not.
This is what we wrote to display the options.
And this is what we found in the browser inspector
what made it problematic was that our possible answers were very similar elements in the DOM and didn’t have IDs, when we changed the color class for the selected one, all of them were affected, it sounds minor and there were multiple ways to overcome this, yet most of them were not as clean as we wanted to be and the time ran out so quick that we had to use the option “target: HTMLElement”.
(click) = "checkAnswer($event.target, option.isCorrect)" In our template file we passed the HTML element target of the click event as a parameter to the handler method.
checkAnswer(target: HTMLElement, isCorrect: boolean) And then in our component we modified directly the target element passed to change its background color with some JS code.if(isCorrect){ target.style.backgroundColor = 'green' }
I hope we can find a better way to solve this and be able to share it in a future post.
I want to encourage everyone to try this kind of activities in your teams so as to have fun and make the learning process a painless thing.
DOM: Document Object Model
PWA: Progressive Web Apps
CSS: Cascading Style Sheets
UX: User Experience
Thanks to Juan Herrera, Leo Perez and Duvan Gaviria for the help to improve this post’s redaction
