DEV Community: Odumosu Oluwashina

🔍 Mastering Browser DevTools: A Vue.js Developer's Guide to Debugging

Odumosu Oluwashina — Thu, 15 Jan 2026 06:30:00 +0000

Stop guessing, start debugging like a pro

Hey there, fellow Vue developer! 👋

Let me guess, you've spent the last hour staring at your screen, wondering why your API call isn't working, or why your component isn't rendering the data you know is there. Been there, done that, got the coffee-stained t-shirt.

Here's the thing: debugging doesn't have to feel like searching for a needle in a haystack. Your browser's DevTools are incredibly powerful, but most of us only scratch the surface. Today, I'm going to show you the debugging techniques that have saved me countless hours of frustration.

No fluff. Just practical, real-world techniques you can use today.

🎯 Why This Matters

Before we dive in, let's be real: every developer debugs. The difference between struggling for hours and fixing bugs in minutes comes down to knowing where to look and what to look for. This can literally be the difference between a junior dev and an intermediate dev.

Think of DevTools as your debugging superpower. Once you know how to use them properly, those mysterious bugs transform into solvable puzzles.

Ready? Let's go! 🚀

1. The JavaScript Console: Your First Line of Defense

Moving Beyond `console.log()`

Look, we all start with console.log(). It's like the "Hello World" of debugging. But the console has so much more to offer:

// Instead of this boring old approach:
console.log('User data:', userData);

// Try these game-changers:
console.table(userData);  // 📊 Beautiful table format!
console.dir(vueComponent);  // 🔍 Deep dive into object properties
console.warn('Deprecated method!');  // ⚠️ Yellow warning (hard to miss)
console.error('API failed!');  // 🚨 Red error (impossible to miss)

Pro tip: console.table() is a lifesaver when you're working with arrays of objects. Instead of nested object hell, you get a nice, readable table. Try it once, and you'll never go back.

Group Your Logs Like a Boss

When you're debugging complex Vue components with multiple lifecycle hooks and API calls, your console can get messy fast. Enter: console groups.

// In your Vue component
async fetchUserData(userId) {
  console.group('👤 Fetching User Data');
  console.log('User ID:', userId);
  console.time('API Call Duration');

  const response = await fetch(`/api/users/${userId}`);
  const data = await response.json();

  console.timeEnd('API Call Duration');
  console.log('Response:', data);
  console.groupEnd();

  return data;
}

This creates a collapsible group in your console. You can see everything related to that operation in one place, and collapse it when you're done. Clean, organized, professional.

The console.time() bonus: It shows you exactly how long your API call took. If you see "API Call Duration: 3000ms", you know you've got a performance problem to investigate.

Smart Conditional Logging

Sometimes you don't want to see every log; just the ones that matter:

// Only log errors
if (response.status !== 200) {
  console.error('API Error:', {
    status: response.status,
    url: response.url,
    timestamp: new Date().toISOString()
  });
}

// Or create a debug flag
const DEBUG = true;
if (DEBUG) {
  console.log('Component mounted with props:', this.$props);
}

This keeps your console clean in production while giving you detailed info when you need it.

2. The Network Tab: See What's Really Happening

Here's a truth bomb: 80% of Vue.js bugs are related to API calls. Wrong data, missing data, slow data, or no data at all.

The Network tab shows you exactly what's happening between your app and the server. No guessing required.

How to Use It (The Simple Way)

Open DevTools (F12 or Right-click → Inspect)
Click the Network tab
Refresh your page (Ctrl+R) to capture all requests
Filter by XHR/Fetch to see only your API calls

Tip: You can check the preserve log checkbox so you don’t lose previous requests captured, just in case you want to compare.

Now you're watching your app's network activity in real-time. It's like having X-ray vision.

What to Check (In Order)

When an API call fails, here's your debugging checklist:

What to Check	What It Tells You	Where to Find It
Status Code	200 = Success, 404 = Not Found, 500 = Server Error	First column
Request URL	Is the endpoint correct?	Click the request → Headers tab
Request Method	GET, POST, PUT, DELETE - is it right?	Headers tab
Request Headers	Are you sending Authorization tokens?	Headers tab
Request Payload	What data are you sending?	Payload tab
Response	What did the server actually return?	Response tab
Timing	How long did it take?	Timing tab
Initiator	Where was the API call generated from?	Initiator tab

Real talk: 90% of the time, the issue is either a typo in the URL, a missing authentication header, or trying to parse HTML as JSON (we've all been there).

3. Real-World Debugging: A Story

Let me walk you through a bug I see all the time. Picture this: you've built a user list component, but the users won't load. The loading spinner just spins forever.

The Buggy Code

<template>
  <div>
    <h2>User List</h2>
    <div v-if="loading">Loading...</div>
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const users = ref([]);
const loading = ref(true);

onMounted(async () => {
  try {
    const response = await fetch('/api/users');
    users.value = await response.json();  // 💥 Boom! Bug here
  } finally {
    loading.value = false;
  }
});
</script>

Looks fine, right? This is what I thought too. But here's what actually happened:

The Debugging Journey

Step 1: Check the Console

SyntaxError: Unexpected token < in JSON at position 0

Hmm. That's weird. Why would there be a < character in JSON?

Step 2: Open the Network Tab

I click on the /api/users request and see:

Status: 404 Not Found
Response: An HTML error page (not JSON!)

Aha! The endpoint doesn't exist. The server returned an HTML error page, and we tried to parse it as JSON. That's why we got the weird error.

The Fix

Always check if the response is actually OK before trying to parse it:

onMounted(async () => {
  try {
    console.group('📡 Fetching Users');

    const response = await fetch('/api/users');

    // ✅ CHECK STATUS FIRST!
    if (!response.ok) {
      console.error('HTTP Error:', response.status);
      throw new Error(`HTTP ${response.status}`);
    }

    const data = await response.json();
    console.log('✅ Users loaded:', data.length);
    console.groupEnd();

    users.value = data;
  } catch (error) {
    console.error('❌ Failed to load users:', error);
  } finally {
    loading.value = false;
  }
});

Now when the API fails, you get a clear error message instead of a cryptic JSON parsing error.

Lesson learned: Always validate your HTTP responses. response.ok is your friend.

4. Pro Tips That'll Level Up Your Debugging Game

Use Vue DevTools

If you haven't installed the Vue DevTools browser extension yet, stop reading and do it now. Seriously. I'll wait.

It lets you:

Inspect component state and props in real-time
Track component events
See your Vuex/Pinia state
Time-travel through state changes

It's like having X-ray vision for your Vue app.

The Network Debugging Checklist

When an API call doesn't work, check these in order:

✅ Is the URL correct? (Typos happen to everyone)
✅ Is the request method right? (GET, POST, PUT, DELETE)
✅ Are the headers correct? (Content-Type, Authorization)
✅ Is the request body formatted properly? (Use JSON.stringify for objects)
✅ What's the response status? (200s = good, 400s = client error, 500s = server error)
✅ What does the response actually contain? (HTML? JSON? An error message?)

Keyboard Shortcuts to Save Time

F12 or Ctrl+Shift+I - Open DevTools
Ctrl+Shift+C - Inspect element mode
Ctrl+L - Clear console
Ctrl+R - Refresh and capture network requests

These shortcuts will make you look like a wizard to your non-dev friends. 🧙‍♂️

5. Common Mistakes (That I've Definitely Never Made... 😅)

Mistake #1: Not Checking `response.ok`

// ❌ Don't do this
const data = await response.json();

// ✅ Do this
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();

Mistake #2: Forgetting Content-Type Headers

// ❌ Missing header
fetch('/api/users', {
  method: 'POST',
  body: JSON.stringify(userData)
});

// ✅ With proper headers
fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(userData)
});

Mistake #3: Not Using Error Boundaries

Always wrap your API calls in try-catch blocks. Always. Your users will thank you.

Wrapping Up

Debugging isn't just about fixing bugs—it's about understanding how your Vue.js application really works. The console and Network tab transform mysterious errors into clear, solvable problems.

Remember this: Every developer debugs. Every. Single. One. The pros just know where to look.

Here's your cheat sheet:

🔍 Use console.table() for arrays and objects
📦 Group related logs with console.group()
✅ Always check response.ok before parsing JSON
🌐 Filter Network tab by XHR/Fetch for API calls
🛠️ Install Vue DevTools (if you haven't already)

Now go forth and debug with confidence! 💪

Quick Reference Card

// Console tricks
console.table(data);        // Table view
console.group('Title');     // Start group
console.groupEnd();         // End group
console.time('Label');      // Start timer
console.timeEnd('Label');   // End timer

// API error handling
const response = await fetch(url);
if (!response.ok) {
  throw new Error(`HTTP ${response.status}`);
}
const data = await response.json();

// Headers for POST requests
headers: {
  'Content-Type': 'application/json',
  'Authorization': `Bearer ${token}`
}

Found this helpful? Drop a comment below with your favorite debugging trick! Let's learn from each other. 🚀

P.S. - If you're still using console.log() for everything, no judgment. We all start somewhere. But give console.table() a try. Your future self will thank you.

Single Sign-On (SSO) with Zoho in Vue3

Odumosu Oluwashina — Sun, 13 Aug 2023 00:00:00 +0000

Hi fellas,

So I was recently working on a project where I had to use OIDC 🔐for authentication on the app. Apparently, it was a tad bit more difficult than I expected, mostly due to lack of proper documentation especially for the Vue 3 framework.

You know how you feel like a boss 😎 when you're finally able to figure things out and make it work? Yup. That was soo me. My head was through the roof but I felt like I went through so much.

So if you ever, find yourself where I started, with little to no proper documentation, I hope this helps you feel like a boss in less time and with less stress.

A little introduction

Authentication and security are essential aspects of web development, and OIDC (OpenID Connect) has emerged as a popular authentication protocol due to its simplicity and robustness.

In this article, we will explore how to integrate OIDC into a Vue.js (version 3) application using Zoho as the identity provider. Zoho, a renowned cloud-based software suite with amazing products, offers a secure and reliable OIDC-based authentication service that enables developers to implement seamless user authentication in their Vue.js applications.

What is OIDC?

OIDC which stands for Open-Identity Connect, is an extension of OAuth 2.0, designed to provide a standardized way for users to log in and authenticate with web applications. It allows for the secure transmission of user identity information between the identity provider (IdP) and the client application, ensuring a seamless and consistent user experience across different platforms.

Simply put, it is an open standard that allows users to authenticate to applications using their existing identity providers. This means that users can sign in to your application using their Zoho credentials, without having to create a new account.

What is Vue?

Should you even be reading this if you don't know what Vue is?😅 Hey, don't get me wrong, you just need to learn about a tool before you start using it so you can maximize your effort. You can check the Vue article to learn about Vue and then come back to implement this. I'll definitely be rooting for you.

How to use OIDC in Vue

Before integrating OIDC into a Vue.js application, you need to set up Zoho as the identity provider:

Create a Zoho Developer Account: Visit the Zoho Developer Console and sign in or sign up for an account.
Register Your Application: In the Zoho Developer Console, create a new "Client" to register your application. You will receive a Client ID and Client Secret that you'll use later in the Vue.js application.
Define Redirect URLs: Specify the allowed redirect URLs where Zoho can send authentication responses after successful login. This should eventually resolve to this -
redirect_uri=https://your.url.com/signin-oidc&response_type=code&prompt=consent&scope=openid profile AaaServer.profile.Read email&code_challenge=xxxx-xxx-xxxx-xxxxxx-xxx&code_challenge_method=S256&response_mode=form_post&state=xxxx-xxx-xxxx-xxxxxx-xxx&x-client-SKU=XX_XXX-1.0&x-client-ver=6.21.0.0

Let's get to coding!

To begin, we would need to set up an application using vue and oidc. We are going to install a library known as vue-oidc-client. This is a vue wrapper around oidc-client-js to help it work well with Vue.

Integrating OIDC into Vue.js

Now, let's dive into integrating OIDC into your Vue.js application:

Setting Up Vue.js Project: Start by creating a new Vue.js project using Vue CLI or any other preferred method. See here on how to.
Install Required Dependencies: To handle OIDC authentication, you'll need some packages like oidc-client and vue-oidc-client. Install them using npm or yarn:

npm install oidc-client vue-oidc-client

yarn add oidc-client vue-oidc-client

Next, create a .env file for your credentials or secret

VITE_APP_CLIENT_ID=whatever_your_client_id_is
VITE_APP_BASE_URL=whatever_your_base_url_is
VITE_APP_OIDC_AUTHORITY=whatever_your_zoho_oidc_endpoint_is

Create a config file to hold the settings config.ts

export const client_id:string = import meta.env.VITE_APP_CLIENT_ID;
export const base_url:string = import meta.env.VITE_APP_BASE_URL;
export const oidc_authority:string = import meta.env.VITE_APP_OIDC_AUTHORITY;

Implement the oidc service idsrvAuth.ts

import { User } from 'oidc-client'
import { createOidcAuth, SignInType, LogLevel } from 'vue-oidc-client/vue3'
import { client_id, base_url, oidc_authority } from './config'

const appRootUrl:string = `${base_url}/`

// OR
// const loco = window.location
// const appRootUrl = `${loco.protocol}${loco.host}/`
// const appRootUrl = 'localhost:8000/'
const provider:string = 'Zoho'

const authCallbackPath:string = 'index.html?auth-callback=1';
const logoutCallbackPath:string = '/index.html?logout-callback=1';
const prompt:string = 'login'
const redirectUri:string = `${base_url}/${authCallbackPath}`; // remove / for local
const scopes:string = 'offline_access';
const logoutRedirectUri:string = `${oidc_authority}${logoutCallbackPath}`;

const idsrvAuth = createOidcAuth(
  'main',
  SignInType.Popup, // SignInType.Window on local
  appRootUrl,
  {
    authority: oidc_authority,
    client_id: client_id,
    redirect_uri: redirectUri,
    post_logout_redirect_uri: 'https://your-client-url/',
    response_type: 'code',
    filterProtocolClaims: true,
    loadUserInfo: true,
    scope: scope,
    extraQueryParams: { prompt: prompt, provider: provider }
  },
  console,
  LogLevel.Debug
)

// handle events
idsrvAuth.events.addAccessTokenExpiring(function() {
  // eslint-disable-next-line no-console
  console.log('access token expiring')
})

idsrvAuth.events.addAccessTokenExpired(function() {
  // eslint-disable-next-line no-console
  console.log('access token expired')
})

idsrvAuth.events.addSilentRenewError(function(err: Error) {
  // eslint-disable-next-line no-console
  console.error('silent renew error', err)
})

idsrvAuth.events.addUserLoaded(function(user: User) {
  // eslint-disable-next-line no-console
  console.log('user loaded', user)
// save token to storage for use later
  localStorage.setItem('token', user?.access_token)
})

idsrvAuth.events.addUserUnloaded(function() {
  // eslint-disable-next-line no-console
  console.log('user unloaded')
})

idsrvAuth.events.addUserSignedOut(function() {
  // eslint-disable-next-line no-console
  console.log('user signed out')
})

idsrvAuth.events.addUserSessionChanged(function() {
  // eslint-disable-next-line no-console
  console.log('user session changed')
})

export default idsrvAuth

Edit your main.ts file

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import idSrvAuth from './idSrvAuth'
...

try {
    const start:any = idSrvAuth.startup();
    if (start) {
        const app:any = createApp(App).use(router);

        app.config.globalProperties.$oidc = idSrvAuth

        app.config.globalProperties.filtersLimit = (value:any, size:any) => {
            if (!value) return '';
            value = value.toString();

            if (value.length <= size) {
            return value;
            }
            return value.substr(0, size) + '...';
        }

        app.mount('#app')
    }
}
catch(err:any) {
    console.log(`Startup was not okay: ${err}`)
}

Next up, update your router with the idsrvAuth service

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import idsrvAuth from '../idSrvAuth';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Login',
    component: () => import('../views/auth/Login.vue'),
    meta: { requiresAuth: false },
  },
  {
    path: '/dashboard',
    name: 'Layout',
    component: () => import('../views/dashboard/Layout.vue'),
    meta: { authName: idsrvAuth.authName },
    children: [
      {
        path: '',
        name: 'Dashboard',
        component: () => import('../views/dashboard/Index.vue'),
        meta: {
          requiresAuth: true,
        },
      },
      {
        path: 'profile',
        name: 'Profile',
        component: () => import('../views/dashboard/Profile.vue'),
        meta: { requiresAuth: true },
      },
    ]
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'Error',
    component: () => import('../components/NotFound.vue'),
    meta: { requiresAuth: false },
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

router.beforeEach(async (to, from) => {
  const token:any = localStorage.getItem('token')
  if (to.meta.requiresAuth) {
    if (!token) {
      router.push({ name: 'Login' })
    }
  }
})

idsrvAuth.useRouter(router);

export default router;

Finally, you can use in your form like this loginForm.vue

<script lang="ts">
export default {
  name: 'LoginForm',
}
</script>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import SvgIcons from '../SvgIcons.vue';
import spinner from '../spinner.vue'

const route = useRouter();

const loginWithZoho:any = async () => {
    route.push('/dashboard')
}
</script>

<template>
    <div class="relative main w-full bg-white">
        <form class="text-sm grid">
            <div class="grid gap-1 mb-4">
                <label for="username" class="font-semibold">
                    Username
                </label>
                <input type="text" name="username" v-model="data.username" id="username" @blur="checkError" placeholder="Enter username" :class="[errors.username ? 'border text-red border-red' : '']" class="p-4 rounded-md bg-gray-50 text-xs focus:outline-none">
                <p class="text-[10px] text-red">
                    {{ errors.username ? errors.usertext : '' }}
                </p>
            </div>
            <div class="grid gap-1 mt-4 mb-2">
                <label for="password" class="font-semibold">
                    Password
                </label>
                <input type="password" @blur="checkError" name="password" id="password" placeholder="Enter password" v-model="data.password" :class="[errors.password ? 'border text-red border-red' : '']" class="p-4 rounded-md bg-gray-50 text-xs focus:outline-none">
                <p class="text-[10px] text-red">
                    {{ errors.password ? errors.passwordtext : '' }}
                </p>
            </div>
            <div class="extras flex justify-between items-center text-[10px] text-blue-600 mt-2 mb-8">
                <div class="forgot">
                    <button @click.prevent="forgotPassword">
                        Forgot password?
                    </button>
                </div>
                <div class="remember flex">
                    <div class="flex items-center">
                        <input id="list-check" @click.prevent="check" type="checkbox" class="opacity-0 absolute h-5 w-5" />
                        <div class="bg-primary text-primary border-2 w-5 h-5 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-primary">
                        <SvgIcons v-if="rememberChecked" class="text-white" name="tick" />
                        </div>
                    </div>
                    <label for="remember">
                        Remember me
                    </label>
                </div>
            </div>
            <div class="grid">
                <button @click.prevent="submit" :disabled="isDisabled" :class="[isDisabled ? 'bg-grey' : 'bg-primary']" class="p-4 font-bold flex justify-center border text-white rounded-md">
                    <span class="px-4" :class="[isLoading ? '' : 'hidden']">
                        <spinner />
                    </span>
                    Login
                </button>
            </div>
        </form>
        <div class="flex items-center justify-center mt-8 gap-3">
            <hr class="bg-primary w-full h-[2px]"/>
            <p>OR</p>
            <hr class="bg-primary w-full h-[2px]"/>
        </div>
        <div class="my-5">
            <button @click="loginWithZoho" class="bg-[#CE2232] flex w-full font-semibold bg-opacity-70 hover:bg-opacity-100 justify-center text-white py-3 px-5 rounded">
                Sign in with Zoho
            </button>
        </div>
    </div>
</template>

<style scoped>
</style>

When the user clicks the button, the loginWithZoho() method will redirect the user to the Zoho OAuth 2.0 authorization endpoint. If the user authenticates successfully, they will be redirected back to your application, which will then redirect them to the /dashboard route.

Conclusion

In this article, you saw how to use OIDC with the router in Vue to create a secure and user-friendly authentication flow for your application. We used Zoho as our identity provider, but the same principles can be applied to any OIDC-compliant provider.

By integrating OIDC into your Vue.js application using Zoho as the identity provider, you can achieve a secure and seamless authentication experience for your users. OIDC's standardized approach and Zoho's reliable authentication service provide a robust foundation for any web application, ensuring user data remains protected while enabling easy access across multiple platforms.

Remember to explore further customization options, such as handling user roles, accessing user information, and handling token expiration, to tailor the OIDC integration to your application's specific requirements. Happy coding!

Resources

You can find the wiki docs here -

Reach me

Beginner's guide to learning Front-end Development

Odumosu Oluwashina — Wed, 03 Nov 2021 00:45:04 +0000

Recently, a friend contacted me asking for advice on how to get into front-end development. As a beginner it's always hard to start and follow a new passion, I know from experience. You don't know where to start, what resources to use or what language to learn first. Now add the fact that technologies and frameworks are ever-changing, it can be quite difficult and overwhelming starting out in the field of front-end development.

The general advice: Get used to the shallow waters before taking a deep dive!

This sounds obvious, but so many people rush through the basics so they can build cool things. Programming is iterative, and everything builds off of one another. If you want to become a good developer, it is crucial that you actually understand what is happening on the ground floor.

Let's get started!

Who is a front-end developer?

A front-end web developer is a software engineer who implements web designs through coding languages like HTML, CSS, and JavaScript. If you head to any site, you can see the work of a front-end developer in the navigation, layouts, and in the way that a site looks different on your phone (thanks to mobile-first or responsive design). It's important that the information presented is user-friendly and effectively placed.

That said, to get the hang of front-end web development, you need to learn HTML and CSS, as a basis. More and more front-end developers are expected to know some JavaScript, too. Think about a website/web application like a house. You first have the foundation and structure (HTML) in place before making it aesthetically pleasing (CSS) and finally, you connect the electricity and other gadgets (JavaScript).

Let's break it down!

HTML

HTML stands for HyperText Markup Language. It is not actually a programming language. Just like in the name, it is a markup language, responsible for defining your content, hence, the most basic building block of web coding.

Every piece of HTML code has these four elements:

▪️ An opening tag sets up the beginning of your chosen element, like emboldening, italicizing, or creating hyperlinks.

▪️ An attribute sets up the code for styling and/or manipulation through events.

▪️ The content that is being manipulated by the element, which might be an image or a text - or something else.

▪️ A closing tag, which always includes a slash before the element’s name... This signifies that the element has ended in that location. If you do not use a closing tag, the HTML code will result in an error (...I know firsthand the stress it can cause.) As a rule, I saw fit (adopted when you use tools like VS Code), I always closed my tags immediately after I open them.

NB: Some tags are self-closing while others are empty i.e. they do not open, close, or take any content.

CSS

CSS stands for Cascading Style Sheets. It is responsible for how your HTML elements are displayed on websites regardless of device. It's like a responsible adult making sure kids don’t talk too much or get out of line. The biggest advantage of CSS is that it allows the separation of style and layout from the content of the document.

This tool is important to use if you want to have more ability to stylize your web pages - working with HTML - including the overall layout, design, and design variations. Also, for varying screen sizes on different devices.

Spoiler 🙃🙃!

CSS does what you might think HTML was designed to do.

Here's what I mean...

With our house example, HTML is only the small unit of brick (which could form parts of the wall or pillars) in the whole house while CSS adds the structure (more like piling the bricks, leaving space for the cupboard and windows and doors).

HTML is just a mark-up tool. It was never meant to format a web page! CSS fills that gap, letting you apply advanced changes to font, color, and other attributes that are important for making a web page look awesome.

JavaScript

No, JavaScript is not a scripted version of Java...lol! In fact, it is not related to Java in any way.

So you know when you mouse click on a button to take an action; maybe submit a form and you see some kind of response to your action with some animation sometimes...yup, that's all JavaScript trying to manipulate the parts of code (like a switch manipulating the lights in the house) identified using the attribute of the HTML tag.

JavaScript is the most popular and widely used language for front-end content manipulation (all of the events that create a response that alter the original structure of the web page) also referred to as client-side scripting. Client-side scripting refers to scripts that run within your web browser. JavaScript is designed to add interactivity and dynamic effects to web pages by manipulating the content returned from a web server.

JavaScript was originally developed as LiveScript by Netscape in the mid-1990s. It was later renamed JavaScript in 1995 and became an ECMA standard in 1997. Now JavaScript is the standard client-side scripting language for web-based applications, and it is supported by virtually all web browsers available today, such as Google Chrome, Firefox, Apple Safari, etc.

JavaScript is officially maintained by ECMA (European Computer Manufacturers Association) as ECMAScript. ECMAScript 6 (or ES6) is the latest major version of the ECMAScript standard.

Now that you know all these, what's next?

Learn, Unlearn, and relearn!

So one of the things I had to get used to is how to use a search engine (google, duckduckgo, bing e.t.c.) to get answers because more often you'll find that someone has already solved something related.

Now, you don't have to stop at learning pure javascript, you can learn how to use frameworks like VueJs, ReactJs, Ember, Angular to build sophisticated single-page applications.

Here are some helpful resources that I have found very useful.

📰 Articles - Dev.to, Medium, Daily dev, Hackernoon

🎓 Learn Online - Freecodecamp, Codecademy, W3Schools

📽️ YouTube Channels - NetNinja, WebDevSimplified, Academind

⁉️ Questions, check here - StackOverflow, Google