DEV Community: Gabrielle Davidson

What is asynchronous JavaScript?

Gabrielle Davidson — Wed, 22 Dec 2021 00:56:18 +0000

First understand synchronous JavaScript

This means that you do one thing at a time. This is JavaScript in its natural state. Not all languages are like this. Consider the following code:

console.log(1);
console.log(2);
console.log(3);

When this is run, 1, 2, and 3 will appear in order in the console, like this:

1
2
3

We start with the first line, when it is finished we move to the second line, and so on.

This works fine for simple projects, but if you want to build any kind of actually functioning web app, you'll need to start making server requests. The problem is, we don't really know when the server is going to respond with the information we need. With synchronous JavaScript, that creates a problem – waiting.

Remember, we can't move on to the next task until the present task is complete. That creates a very unpleasant and clunky user experience. What can be done to solve this?

Enter asynchronous JavaScript

Asynchronous JavaScript allows us to move on to the next task while we wait for an answer (i.e. a "callback") from the server. It's a bit of a misnomer because JavaScript itself isn't what's asynchronous, it's other mechanisms that JavaScript can interact with that enable that capability.

Let's consider the diagram below:

JavaScript runs in the browser, which also takes care of storing information(Memory Heap) and the order in which tasks are completed(Call Stack). The Web APIs, Callback Queue, and Event Loop you see are what makes asynchronous code work.

Example

Let's change our code from the beginning just a little:

console.log(1);
setTimeout(()=>console.log(2), 3000);
console.log(3);

This will give us the following:

1
3
2

I was surprised when I learned that setTimeout() is not actually JavaScript, it's an API! It allows you to wait three seconds (in this case) before calling console.log(2) (simulating a server request). Meanwhile, the browser is free to move on to the next line. That is why '3' appears before '2'. This is asynchronous JavaScript in action.

Going a little deeper

Here is how the above is actually broken down according to our diagram. Start with the number 1 and follow all the way to 7:

The browser reads the first line of code. It understands that this can be done right away.
It moves the function to the call stack. No other functions are necessary for this one to run so
It is popped off the call stack, executed, and the result appears in the console.
The browser reads the second line of code. It understands it will have to wait for the result so it hands the task off to players behind the scenes and moves on.
The browser reads the third line of code. It understands that this can be done right away.
Repeat step 2.
Repeat step 3.

While steps 5-7 were happening, the setTimeout() function was handed off to the Callback Queue and the Event Loop began checking the Call Stack to see if it was empty. When it was, the setTimeout() function was moved to the Call Stack and executed as normal. So, we were able to do more than one thing at a time. This is asynchronous JavaScript.

Delve even deeper in this article by Alexander Zlatkov.

What is an API?

Gabrielle Davidson — Wed, 20 Oct 2021 00:30:11 +0000

API, or Application Programming Interface, is one of the many acronyms thrown around in the programming world. It took me months to grasp the concept, not least because APIs can look very different from each other, depending on what they are trying to accomplish.

The best, high-level conceptualization I've come up with that encapsulates them all is that APIs are a simplified way to interact with complex information. That still sounds kind of vague. Let's look at some examples.

Real world

The picture in the header of this article shows an old radio. We can actually think of this radio, with its three dials, as an API for transforming radio waves into sound and having some control over them.

We don't have a way to directly access radio waves without a radio. Nor would we probably want to, that's a lot of complex information to handle. So, someone devised this simple interface that gives us the ability to switch between different frequencies, control the volume, and turn the radio off and on.

There is a lot more you could do with radio waves that has nothing to do with listening to music, but we don't need to be bogged down with all that stuff. The radio API just gives us what we need.

Programming world

Similarly, in the programming world, we frequently want to easily incorporate data from other complex sources to make our projects more dynamic and useful.

Let's say I'm making a weather app. How do I get the weather data to display on my home screen? Do I have to collect and maintain it all myself? Lucky for me, someone else has already done that and created an API that allows me to access and use that data. It doesn't have physical dials but there are instructions on how to use it and it only gives me what I need, not the hoards of information that come with monitoring the weather, just like the radio.

This is great news! Not only do I not have to collect my own data, I also don't have to spend an inordinate amount of time sifting through someone else's data. This saves me a lot of time.

It also allows the creator of the API to let other people use some of their data while keeping some private. This might be like how Pinterest provides an API for your website to use its icon to save something to a board without having to give you all of its user or proprietary information. You get to give your users the ability to harness the power of Pinterest and Pinterest gets to reach more people. It's a win-win for everyone!

The wonderful world of APIs

APIs are everywhere and there are all kinds. There is a Star Wars API and a number facts API. Large companies like Facebook have APIs. Here is a collection of a bunch of other APIs. Whatever you're looking for, there is probably an API for it. You'll need to understand server requests and asynchronous javascript in order to fully work with them but hopefully this gives you a better understanding of what they even are. And once you get used to them, they are a lot of fun!

How to animate the moon with the canvas element

Gabrielle Davidson — Mon, 11 Oct 2021 03:29:42 +0000

For Hacktoberfest this year, I contributed to a project using the <canvas> element. I was intrigued, as I'd come across it before while I was learning HTML but always thought "Eh, I'll get to that one day...".

What is the `<canvas>` element?

It's an HTML element that gives you the ability to draw with JavaScript. Pretty neat. It takes whatever id and dimensions you'd like as attributes, and wraps around a backup image which only displays if your drawing doesn't load:

How to animate the moon

You don't have to animate the <canvas> element but I thought it'd be a nice challenge. I decided to create a waxing and waning moon animation. My approach was to write a function for each phase and loop through them using setTimeout().

Lay the foundation

Before anything else, every <canvas> element must start with two things:

First, we select the <canvas> element in the HTML with its id and save it in a variable. Second, we create a variable for the context. This is what we actually draw on. Surprise! The <canvas> element itself is really just a container. This context variable is what we will use in our functions.

Initialize

I chose a crescent moon as my starting phase. I drew it with a function called init() and added it as an attribute to the <body> element we saw before, so that it's called when the page loads.

Repeat with slight variations

I ended up with six very similar functions, so similar that I won't detail each of them here:

init()
quarterMoon()
halfMoon()
fullMoon()
halfMoonWane()
quarterMoonWane()

Each function calls the next one and quarterMoonWane() calls init(). That is how the continuous wax/wane effect is achieved. The only differences are the inner(bezier) and outer(arc) curves of each phase. Really it's only four functions, as quarterMoon() and halfMoon() are basically equivalent to quarterMoonWane() and halfMoonWane(). I repeated them because during the waning phase I needed the same shapes but different setTimeout() function calls.

Challenges and reflections

The <canvas> element is no joke. I spent two days working out how to achieve this animation. Granted, it was my first try and I had to do a lot of research and trial and error with tricky math, but it's still a challenging element to work with. Even though I'm glad I got acquainted with it, I can't really think of a situation where I'd want to use it again.

One of the hardest things about it is that you can't see your progress unless you call a method to connect the points you've established (I used ctx.fill() here, you can use ctx.stroke() to draw a line instead). It was cumbersome doing that after every line and then deleting them all(except the last one) once I knew what was happening. It makes me wonder if there is an easier way.

I also really wanted the transition between each stage to be a little smoother. I tried speeding up the intervals on setTimeout() but that didn't give me the effect I was hoping for. I also experimented with window.requestAnimationFrame(), another method used with <canvas>, but that made it way too fast by itself. I'm sure there is a way to make it work but I wasn't able to find it after much searching and experimenting.

Finally, since there is a lot of repeated code here, I'm sure there is a more elegant way of achieving this type of animation but in the end it gets the job done and I'm a fan!

Here's a resource for more info on the <canvas> element and, as always, here's my code if you'd like to inspect in more detail.

What does "origin master" mean?

Gabrielle Davidson — Sun, 03 Oct 2021 05:57:22 +0000

Git commands are a leading cause of hair loss for many beginner software engineers, and even for some more experienced ones as well. I've finally realized something that might've helped me when I was first starting out and hopefully will save you some headaches too.

"origin master" explained

At some point in our development career we get real familiar with the classic git push origin master*. What is this command actually saying though? "git push" is pretty clear, but what exactly is "origin master"? For the longest time I thought it meant:

push from your computer to GitHub

I thought origin was my computer, and master was GitHub. To my brain, origin was where the new code I wanted to push had originated (my computer, because that's where I wrote it) and master was where I wanted it to go. Not so far fetched. I was right that they are two separate entities, but I was wrong about which two entities.

Actually, origin refers to the repository on GitHub (aka the "remote repository") where you originally cloned your code from, and master is the branch in origin that you want to push your changes to. They both refer to what's on GitHub.

This cleared up so much for me. Suddenly, in a cascade of insight, other git commands started to make more sense too. It does get more complicated, but hopefully this simple shift in understanding is a stepping stone that will help you have a breakthrough of your own on your way to becoming a git ninja.

*Note: GitHub has changed "master" to "main" so, increasingly, the command will be git push origin main. Older repos will sometimes still use "master". Good to be aware of both.

How to make your to-do list editable with basic JavaScript

Gabrielle Davidson — Sat, 25 Sep 2021 21:44:37 +0000

A to-do list is one of the first projects many developers create. The basic components are a way to add items and a way to delete them. This article is for those who have already implemented these basics and want to add the extra feature of being able to edit items once they are added.

Experiment with my to-do list here and if you'd like to inspect the code, you can find it on GitHub here. Note: it is only optimized for laptops at this time.

How to edit items

I wanted to be able to double click an item on the list in order to change it. Maybe I misspelled it or something. In my HTML, I used list elements for items. The high level idea was to temporarily replace the list element with an input element, type in something new, then change it back to a list element. To achieve this, I first added an event listener to each item when it was created:

Next, I created the editItem function. The list item you want to change is replaced by an input element with the same value. Then you are able to edit that value. These are the inner workings:

The final step was to create the saveItem function in order to make my changes permanent. This basically reverses the steps above, replacing the input element and its new value with a new list element, though this time permanently (until you double click again, that is). Here's what it looks like:

That's it! If you happen to inspect it on GitHub, you may notice some slight variations in the code but none are relevant to making items editable. I hope this helps you make all your editable-to-do-list-dreams come true!