Blog posts

What do async and await really mean?

Road marks: there and back

async...await syntax only appeared in JavaScript recently - it was introduced in ECMAScript 2017. However, it still remains a bit of mystery. Most articles I read state that async…await is syntactic sugar over JavaScript promises. But what does that mean exactly?

Are async and await two parts of the same syntax, or they are two separate things?

Do we have to use them together with each other? Or can we use async without await and vice versa?

How different they are from promises?

Why would we use them over promises?

Let’s find out.

Read more →

Blog posts

How to make a copy of an array in JavaScript

Copy machine

Making copies of arrays in JavaScript is not as straightforward as it seems. It certainly not as easy as b = a.

Let’s look at an example:

let a = [1, 2, 3]
const b = a
console.log( a === a)
---
a is array of  [ 1, 2, 3 ]
b is array of  [ 1, 2, 3 ]
Is a equal b?  true

So far so good. Here’s what we did:

  • a is an array.
  • We assigned it to b.
  • Now b is also an array.
  • It contains the same elements as a.
  • And a equals b.

Is the job done? Not quite.

Read more →

Blog posts

A two-minute guide to deploying your React app to Netlify cloud

Plug into cloud

Up until a couple of years ago, I hosted this site, all of my React applications, code demos etc on virtual private servers (VPS). I tried AWS, Digital Ocean and others. Some of them were more convenient to deal with. But frankly, all of them were a huge pain in the butt. In the start, I had to spin up my own VPS, configure a web server, security, firewall, user logins, SSH keys, SSL certificates, DNS records. And that took a day if I worked fast. Then I had to figure out a way to deploy my apps.

If that was it I could live with it. But that was just a starting step. Then comes maintenance: security updates, OS upgrades and so on. Over years that added to a massive amount of time. The time that I would rather spend making things. And did I mention that I had to pay for my virtual servers?

Then I discovered Netlify cloud. I switched and never looked back. Today this site ozmoroz.com is hosted on Netlify. As well as my code examples such as this CSS Transitions demo.

Netlify cloud platform makes deploying applications to the cloud extremely easy. Setting up your app on Netlify takes just a couple of minutes. After that, all subsequent deployments are as easy as pushing your code to Git.

It gets better. Netlify is effectively free. You’ll need to pay when you hit certain limits. However, they are very generous. I host multiple sites and apps on Netlify, and I am yet to pay a cent.

Sounds good? I encourage you to check it out yourself. In this step-by-step guide, I’ll show your how to deploy your React app to Netlify.

Read more →

Blog posts

You may not need Redux

Erasing complexity

If you were starting a new React project a few years ago, that almost always meant that you’d include Redux. React and Redux were thought to be one indivisible entity. When I was learning React myself I did that with the help of Stephen Grider’s excellent course Modern React with Redux. That course is a true bestseller. Nearly 200,000 students watched it since it was released. Stephen keeps it updated so that it includes the latest React features. You got it - that bestselling course on React has “Redux” in its title.

The year is now 2020 as I am writing it from a social distancing safety of my home. Quite a lot has changed in React in those few years. We now have hooks, we mostly write functional components and we now have a new and improved context API.

The big question is: Do we still need Redux?

I personally didn’t use Redux in any of project I started over the last couple of year or so. I don’t expect to use it in future either. Here’s why.

Read more →

Blog posts

How I fixed kernel_task consuming 100% of my MacBook’s CPU

Recently I started experiencing a weird issue with my 2016 MacBook Pro.

I occasionally play Velocidrone FPV racing simulator on it. So far it worked fine. Although MacBook Pro doesn’t have enough power to run it in 4K resolution, it works reasonably well in 1280x1024.

However, this time it was a different story.

Once I started the game, the CPU went to 100% and the frame rate dropped from above 40FPS to one frame per few seconds. That lasted for about 30 seconds. Then everything sped back up, only to go back down in another 20 seconds. And so on.

When I looked at the CPU load chart it looked like this:

Saw-like CPU load chart

The CPU was consumed by “kernel_task” whatever that was

CPU is consumed by kernel_task process

And this is what it looked like when it came back to normal:

Normal CPU load without kernel_task

No matter how much I tried, I wasn’t able to find a reason for that behaviour.

What was that mysterious “kernel task”? The search on the internet didn’t bring clarity. One thing was clear - something was hogging my CPU.

Read more →

Start your journey to React mastery today!

Subscribe to articles about JavaScript and React.

No spam. Unsubscribe at any time.