Image for post
Image for post
One way to wrangle an HTML Collection

If you’re a web developer that works with JavaScript and you’re anything like me, chances are you’ve tried to use .map, .filter, or .forEach on an HTML collection and have been greeted with this friendly error:

Image for post
Image for post

We can interact with an HTML Collection as if it’s an array in many other ways. We can use index numbers to access data. It looks like an array. But it functions a bit differently. First of all, a bit of a distinction. I’ve heard nodeList and HTMLCollection used somewhat interchangeably. They’re both DOM lists, but the only real difference is that HTMLCollection is more specific. It contains DOM elements that are the same, whereas a nodeList can contain a variety of DOM elements. That’s why querySelectorAll returns a nodeList but getElementsByTagName returns an HTMLCollection. …


Image for post
Image for post

Continuing my series of writing blogs about things in JavaScript that are tricky to me initially, this is a blog explaining a simple way of building a stack using queues in JavaScript. Full disclosure: I was asked to do this in an interview, and am clearing some things up for myself and hopefully you as well.

We should start with the difference between a stack and a queue. They really aren’t all that different, both are data structures in which we only append elements, which is to say, we add them to the end. With stacks, we add items to the end and remove them from the end, but with queues we add to the end but remove from the beginning. This is often described by using the acronyms FIFO (First In, First Out) and LIFO (Last In, Last Out). This is why when implementing a stack in JavaScript, we can simply use an array. The pop and push methods are built in and have a time complexity of O(1). …


Image for post
Image for post
Hoist the sails!

In my last blog I went through the different ways of declaring variables in Javascript: Var, Let, and Const. If you were to read my blog, or any other source, something that will come up in your research is the idea of hoisting. I wrote about it but to be honest with you, dear reader, I did not fully understand it. One big correction from my last blog: all three variable types are hoisted, they are just hoisted differently. This all comes down to a misunderstanding of the variable declaration lifecycle on my part. The big takeaway is this: declarations are hoisted, initializations are not. These are two separate things occurring under the hood in JavaScript. I’ve seen a lot of blogs and tutorials gloss over this topic, so I thought I’d write it up a bit. …


Image for post
Image for post

I learned JavaScript well after the introduction of ES6 and thus have mostly used the “let” and “const” keywords in JavaScript for variable declaration by example, following the coders around me. I was told not to use “var”, but wasn’t really told why. It’s a really common interview question though, so I’ve taken it upon myself to be the latest in a long line of people that write a technical blog on medium to explain something to themselves. Maybe you’ll get something out of it too!

Var declarations were the only type of variables before ES6, and Let and Const were introduced to fix some of its issues. The main differences with Var are its scope, its ability to be re-declared and updated, and the fact that it is hoisted. Now, as far as scope goes, var is globally scoped if it is declared outside of a function, functionally scoped if declared within one. …


Image for post
Image for post

I’ve been experimenting with the Web Audio API for a bit now, and as I mentioned in my last blog, there are tons and tons of built in ways to manipulate audio. I’m currently working on a project using handtrack.js, (a hand tracking library that I also recently blogged about), that takes in the coordinates of a hand being detected through the webcam and translates it to musical notes using Web Audio. It’s sort of a webcam theremin. I played around with lots of methods, controlling volume, using filters, there was one thing that was missing. The Web Audio API can take in just about any number, read it as a frequency in Hertz, and translate it to a musical tone, but if you know anything about music theory, you know that according to whatever musical scale you want to use, there are a finite number of notes. The Web Audio API doesn’t have anything out of the box that can create scales or tune your project to them, so I had to find my own way to figure it out. …


Image for post
Image for post
A chart that will prove useful while learning how to use Web Audio

As someone who was a musician before I learned anything about computer programming, I’ve often wondered about ways in which I’d be able to connect the two disciplines. I’m happy to say that I stumbled upon the Web Audio API, an extremely versatile method for creating audio on the web with Javascript, developed by Mozilla. …


Image for post
Image for post
Mission Accomplished

As a new web developer in 2019 who mostly works with Javascript, I’m often envious of people that know Python. Specifically because Python has all of the hip and cool Machine Learning libraries. Or at least that’s what I thought until I stumbled upon Handtrack.js, an awesome library that uses the TensorFlow.js object detection API to track hands using a computer’s webcam. You can’t do much under the hood to change the prediction models, but it’s a great way to quickly integrate some hand detection on your project, if that’s what you’re into. And while I think Victor Dibia did an incredible job creating this library and writing about its implementation, I thought I’d write up a quick tutorial for people like me who are totally new to this world. I learn best when I get to look at working code, so if that’s you as well, I would recommend checking out this Codepen. For the purposes of this blog post, I’m assuming you want to use the webcam to track hands and their movement. Handtrack.js …


Image for post
Image for post
Getting this to show up was really hard

For those of you that don’t know, Phaser is a game framework developed by Photon Storm for making HTML5 games. It’s incredible, and has a really gentle learning curve, especially if you have any Javascript experience. The tutorials and documentation for it are really well done, and there’s a vibrant community online for any questions you might have.

My partner Dan and I were building a project in react, and having recently discovered Phaser and how easy it was to get started, we had the idea to create something of an arcade in react. It seemed like a good idea at the time: react’s ability to dynamically render components combined with phaser’s user-friendly html-based game library could have been a match made in heaven. Except that’s not how any of it works. Phaser and React are absolutely not made to get along. …


This story begins with a bug. I was building a blackjack app in Javascript with my partner. Without getting into the multitudinous (and a little hard to program) rules of blackjack, it required a lot of comparing the values of cards to one another. For various reasons, our cards’ default values were always strings. While we obviously had to account for aces and face cards, for the most part our cards were comparing correctly. Even without converting their values to integers, our modest program knew that a “9” was higher than a “2”. Yes, before you say it: we should’ve used parseInt right away. But we didn’t. Everything was working fine. …


Image for post
Image for post

I am new to javascript, and am still getting used to some of its basic syntax. When looking at example code, the first thing you notice are parentheses, brackets, and semicolons. Curly brackets seem intuitive enough; they encapsulate blocks of code that make up functions. I came to javascript by way of ruby, and the parantheses have a similar role (although I came to learn that they’re used in a number of different ways). Semicolons weren’t obvious to me. The only thing I could guess right away was that they meant the end of something. I tried putting them where they looked like they went, but I often forgot to and… Nothing happened. Pretty soon I stopped using semicolons altogether. I’ve never gotten an error message related to my lack of semicolons, but while sharing code, I’ve had people bring it up. …

Larry Sass-Ainsworth

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store