regular vs arrow function

Define your functions in many ways.

// function declaration
function test(msg) {
return `Hey ${msg}`
// function expression
const test = function(msg) {
return `Hey ${msg}`

You can call both function declaration and expression as Normal/Regular Function

const arrowFunction = (msg) => {
return `Hey ${msg}`

As you see both functions work same by above example. Now the question comes why do we need regular or arrow function.

1. Syntax

2. Arguments binding

3. this

4. new keyword

5. No duplicate named parameters

6. Function Hoisting

7. Methods

1️. Syntax

We can write normal and arrow…

array flatmap

FlatMap is a single method which can be usable for flat and map methods.

let plants = ['💐', '🌲', '🌻', '🌹'];// ❌ map + flat
plants.map(plant => [plant, '🍁']).flat();
// Output
//["💐", "🍁", "🌲", "🍁", "🌻", "🍁", "🌹", "🍁"]
// ✅ flatMap
plants.flatMap(plant => [plant, "🍁"])
// Output

How flatMap() works?

📝 FlatMap() always…

Using the native requestAnimationFrame method we can make our browser repeat something very quickly forever. It calls itself to paint the next frame.


callback: The function to call when it’s time to update your animation for the next repaint.

You will learn the basics of JavaScript by creating the following ten games:

1️. CheckiO

public and private class fields in JavaScript

In JavaScript, there are two types of object fields (properties and methods):

1️. Public 👭

Accessible from anywhere. They comprise the external interface. Until now we were only using public properties and methods.

2️. Private 🔐

Accessible only from inside the class. These are for the internal interface.

Class Field Syntax

  • You can define new private members
  • You will get error if you break the access rule
  • It has public and private static fields, which allow you to declare class member that can be accessed without creating instance of the…


Using CSS, links can be styled in many different ways.

  1. :hover
  2. :active
  3. :visited
  4. :focus
  5. :focus-within
  6. :focus-visible

1. :hover

The :hover CSS pseudo-class triggered when the user hovers over an element with the cursor.

a:hover {
color: red

If you are using :link, :visited, :active. Remember to add hover after link and visited according to LVHA-order: :link — :visited — :hover — :active.

2. :active

The :active CSS pseudo-class starts when the user presses down the primary mouse button.

a:active {
color: blue;

The :active pseudo-class is commonly used on <a> and <button> elements.

3. :visited

A web page consists of different sections and components, and we make them responsive by using CSS media queries. There is nothing wrong with that, but it has limitations.

CSS Containment 🔥

<h1>My blog</h1>
<h2>Heading of a nice section</h2>
<p>Content here.</p>
<h2>Another heading of another section</h2>
<p>More content here.</p>
section {
contain: content;

1. none

learn css by playing games

Learning CSS can be a frustrating experience sometime. One of the best things about learning to code is that people who are good at coding also happen to have the skills to make games that teach other people to code.

1. Flexbox Froggy

multiple cursors for better UX

The cursor CSS property sets the type of mouse cursor, if any, to show when the mouse pointer is over an element.

Using a Custom Cursor ↓

The cursor property is specified as zero or more <url> values, separated by commas. The cursor property does accept SVG files in all its glory but not Gifs.

Suprabha Supi

Frontend Developer sharing JS, HTML, CSS, GoLang🔥 Find all on blog.suprabha.me💛

Get the Medium app
