K-O-N-A-M-I code!! Key Sequence Detection

KONAMI key sequence code screenshot

KONAMI key sequence code screenshot

For any kid that grew up playing computer games in the 80s and 90s the Konami key sequence brings back fond memories. In the latest tutorial from Wes Bos’ #JavaScript30 course he walks you through how to build this into your web page but instead of extra lives or invincibility you get rainbows and unicorns.

First up an empty array is created and your secret (or Konami) code is assigned to a constant. Then an event listener is added to the window to listen for any time a key on the keyboard is released. Every keystoke is then pushed to the end of the “pressed” array.

The .splice method is then used on the array. We want to match the six characters of the secret code which means keeping the array at a length of six characters. To ensure that key stokes keep passing through the array and not just stop when the array is full at 6 positions we pass as an argument:

-secretCode.length - 1, pressed.length - secretCode.length

This is constantly compared as a string in a if statement to the “secretCode” constant. On a successful key sequence match a rainbow or unicorn is added to the window with the “cornify_add” function.

Phew! What a fun little program. I can’t wait to add this to one of my websites.

Array Cardio Day 2

Array Cardio Day 2

Array Cardio Day 2

In today’s edition of “Array Cardio” we were working with two arrays, one of people and another of comments.

The people array had birth years associated with their names. The array methods .some and .every were used to determine if some or all of the people were over the age of 19. To detemine the person’s age the current year was retrieved via the Date() instance, the person’s birth year was subtracted from that and what remained was the person’s current age.

In the comments array the .find method was used to find the array index number of an item with an particular id number. .slice was then used to split the array at the point of the item we had found. This was then spread into a new array. I like to think of this as a form of non-destructive array editing. 🕴

14 Must Know Dev Tools Tricks

Screenshot of dev tools tutorial.

Screenshot of dev tools tutorial.

Today’s tutorial on Wes Bos’ course “JavaScript 30” was all about using dev tools to debug JavaScript and titled “14 Must Know Dev Tools Tricks”.

As I said before JavaScript has come a LONG way since I studied it properly in 2010. I’m not sure if the Web Console was part of Firefox back then but it is super slick and very helpful. We’ve been using console.log() regularly in the other tutorials and it was interesting to see how to send other information there such as warning, error and info messages. You can even style your console message with CSS styles which looks fun.

Revisiting JavaScript, my long lost friend.

My latest JavaScript tutorial screenshot “Array Cardio”.

Exciting times ahead, I’m currently on the hunt for a new front end web dev job! So last week I meet with a lovely recruiter and he said that I had a great sets of skills but that my lack of recent JavaScript experience might make it hard for me to get new work. So I’ve thrown myself head first into becoming a Lord of JavaScript (#LoJS). I’m going to chart my progress on this blog.

I’m currently working through the vanilla JS course at javascript30.com by Wes Bos. I stumbled across his CSS Grid course a couple months ago and just learnt so much then. This course is shaping up to be just as enriching.

What I’m really finding interesting about studying JavaScript in 2018 are the changes that have come about since ES6 || ES2015, especially how variables have progressed.

I’ve bought Sitepoint’s “Javascript, from Novice to Ninja: Edition 2“. I find that reading this book when I’m not doing tutorials re-enforces what I’m learning and fills in the gaps.

What I thought would be a great next step is to work on a few real world JS tasks. Do you think you might be able to help me on this or put me in the right direction? If so get in touch, I’ll shout you a box of Frujus ;D

JS socially speaking I’m looking forward to my EPIC friend Jeff Knaggs presenting at the next CHCH.JS meetup session. If building a small React app, using setState for state management sounds like your thing I’ll see you there!

Until next time,
Benet.
#LoJS