Loops in JavaScript means a chunk of codes executed repeatedly in certain amount.

For example, if we want to print “Hello” in console for 5 times, we can write the following statements:

console.log('Hello');
console.log('Hello');
console.log('Hello');
console.log('Hello');
console.log('Hello');

for…loop

Seems like too much. This is the time when loops jump in. Just need to write the statement one time, give it a condition, then the statement can be executed repeatedly while the condition evaluates to true.

for(let i = 0; i < 5; i++){
console.log('Hello');
}

for loops is the most basic one in JavaScript, we can see it as a counter…


Asynchronous function is to run the function in the ‘background’ without blocking other code.

When I first learnt about async, I found it is not only hard to grasp the concept, but also there are many different syntaxes.

Starting from the plain old vanilla Javascript, to ES6 Promise, to async/await keywords, the article compares different ways of writing async code.

Suppose we want to get weather by IP. We may have the following functions:

function getPublicIP() {/* blocking call, returns a string like '126.58.124.1' */};function getCityFromIp(ip) {/* blocking call, returns a string like 'Toronto, ON' */


In my first JavaScript course, the instructor asked us to write a ‘rock paper scissors’ game between users(us) and computer. I believe a lot of JavaScript learners have written their own version of this game before.

This was my previous solution:

/* step1: Use build-in function - prompt() to return user's choice and store it in the variable - userChoice. */let userChoice = prompt('please choose one from rock, paper or scissors, and type into the box below');/* step2: in case user's input has different cases, to be more specific, uses .toLowerCase() convert all return values into lower cases…


Hamburger menu is what we use often in responsive design, like in a smaller mobile screen, where we want to hide our normal navigation bar (menu) to save space for other stuffs. So instead of hiding our normal menu bar, we put a hamburger like icon, and use this icon to trigger our menu bar.

Hamburger menu icon

The html mark-up is like this:

<a href=”#menu” class=”menu-toggle”>
<i class=”fa fa-bars”></i> /* the icon code - from font awesome */
</a>

Seems really simple, right? But how can we make it accessible for screen readers? As you know, our browser usually reads out the…

Lilian Lin

Front-End Web Developer in Training💻 | Toronto 🇨🇦| Guangzhou 🇨🇳

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