Explore By Topic

Ajax Requests - Historical Context

Before fetch() became the go-to for making network requests, developers had to rely on XMLHttpRequest (XHR) — and later, jQuery’s $.ajax() — to bring data into web pages dynamically.

In this video, we’ll explore:

- The basics of making a request with XMLHttpRequest 🏗️
- How jQuery simplified AJAX calls 📦
- The key differences between XHR and Fetch
- Why modern JavaScript has left XHR behind in favor of cleaner, promise-based APIs ✨

Understanding this history will give you context for legacy codebases 👴 and help you appreciate just how much easier today’s tools make things.

👉 Watch now and see how far we’ve come with AJAX and Fetch! 🚀

Arrays - Working with Lists

Say hello to one of the most useful tools in JavaScript: arrays! In this episode, you’ll learn how to store, access, and manipulate ordered lists of data — like a list of fruits, numbers, or even mixed types. 🧺🔢

🎯 Here’s what you’ll explore:
• What arrays are and why they’re so powerful
• How to create, access, and update array elements
• Common methods like .push(), .pop(), .shift(), .unshift(), .length, and .indexOf() that help you manage your data with ease

🎥 Visual Walkthroughs:
• Real-time examples you can follow and modify on your own
• See arrays grow, shrink, and change as you manipulate them step by step
• Understand how arrays help avoid repetitive code and keep things organized

By the end, you’ll be looping through lists and managing data like a pro, ready to build smarter, more dynamic programs! ⚙️💡

Authentication Basics

You’ve built forms, handled sessions, and flashed messages — now it’s time to add user authentication like a real web application 💪

👉 In this episode, you’ll learn how to:

🧩 Create a login form and validate user credentials
🔑 Use bcrypt for secure password hashing
🧠 Store authenticated state in your existing session manager
🚪 Implement login, logout, and access control routes
🌐 Update views to reflect authenticated users

By the end, your JavaScript server won’t just remember users — it’ll recognize them 🧠💻

💡 Relevant Links

Previous TekCasts series:
- JavaScript for Beginners: https://tekcasts.com/play/javascript-for-beginners-what-is-javascript
- JavaScript in the Browser: https://tekcasts.com/play/javascript-in-the-browser-browser-runtime-environment

Current series:
- JavaScript on the Server: https://tekcasts.com/play/javascript-on-the-server

Libraries mentioned:
- bcrypt: https://www.npmjs.com/package/bcrypt
- Node.js http: https://nodejs.org/api/http.html
- Node.js crypto: https://nodejs.org/api/crypto.html

Browser Runtime Environment

Kick off the JavaScript in the Browser series with a deep dive into how the browser actually works 🖥️✨.

In this video, we’ll:


🌳 Unpack the DOM — the tree of nodes that brings your HTML to life
🎨 Explore how HTML, CSS, and JavaScript all connect through the DOM
📄 Meet the powerful document object — your entry point to everything on the page
🪟 Understand the difference between the DOM and the BOM (Browser Object Model)
🔍 Learn how to inspect and manipulate the DOM using dev tools like a pro


We’ll also set the stage for the whole series: 👉 introducing the GitHub repo 📂, how the skeleton code works, and what tools we’ll be using (WebStorm + Chrome).

⚡ By the end, you’ll see the web in a whole new way and be ready to start bending the browser to your will!

Building a Minimal MVC Application

In this episode, we take our server-side JavaScript app to the next level by introducing a minimal MVC (Model-View-Controller) structure.

You’ll learn how to organize your code so that:

- Models manage your data and logic
- Views handle presentation using EJS templates
- Controllers direct traffic and keep your routes clean

This structured approach transforms your growing project into something that feels modular, scalable, and professional — all without frameworks.


💡 Relevant Links

Previous TekCasts series:
- JavaScript for Beginners: https://tekcasts.com/play/javascript-for-beginners-what-is-javascript
- JavaScript in the Browser: https://tekcasts.com/play/javascript-in-the-browser-browser-runtime-environment


Official Docs & Resources:
- EJS Docs: https://ejs.co/
- Node.js Documentation: https://nodejs.org/en/docs/
- MDN JavaScript Guide: https://developer.mozilla.org/en-US/docs/Web/JavaScript
- MVC Pattern (MDN): https://developer.mozilla.org/en-US/docs/Glossary/MVC

Building a Small Project

🎉 Time to put it all together!

In this video, we move beyond individual concepts and build a complete mini-project: a Stock Picker application. Step by step, you’ll see how to transform raw ideas into a structured, working frontend app.

Here’s what we’ll cover:
1️⃣ Connecting to a Stock API (with mock data for testing)
2️⃣ Designing a clean Stock Data Model
3️⃣ Building a Stock Fetcher with user input + button
4️⃣ Rendering a Stock Table with rows and remove actions
5️⃣ Adding persistence so stocks are saved between sessions

💡 After each step, we’ll pause for a quick refactor, reinforcing maintainability and readability—so you’re not just building code, but building good code.

By the end, you’ll have a working app and a repeatable process for taking an idea from start → structure → polish.

Class & Style Manipulation

Ready to take your DOM game up a notch? In this video, we’ll unlock the secrets of making your pages look alive with style changes and class toggles.

✨ You’ll learn how to:
🔹 Add, remove, and toggle classes with ease
🔹 Directly style elements using .style 🎯
🔹 Know when to use CSS classes vs inline styles 🧩
🌙 Build a slick dark mode toggle demo

By the end, you’ll be styling like a pro—your elements won’t just sit there…they’ll respond, adapt, and shine ✨🔥

Closures and Lexical Scope

In this episode, we unlock one of JavaScript’s most powerful (and sometimes mysterious) features: closures. You’ll see how functions can “remember” the variables around them, even after the outer function has finished running.

🎯 What you’ll learn:
- Lexical scope — how JavaScript decides which variables a function can access.
- Closures — functions carrying their environment with them.
- Practical use cases:
* A simple counter that remembers its value.
* Using closures to create private data in JavaScript.


💡 Why it matters:
Closures are everywhere in modern JavaScript — from event listeners to libraries and frameworks. Understanding them gives you the power to write smarter, safer, and more reusable code.

By the end, closures won’t feel like “magic” — they’ll be a tool you can confidently use to structure your programs. 🔑

Constructor Functions & Prototypes

Before ES6 classes came along, JavaScript had its own way of doing object-oriented programming—using constructor functions and prototypes. In this episode, we’ll take a step back in time and uncover how developers structured code for reusability and efficiency. 🏗️

Here’s what we’ll explore:

🏭 Object factories vs constructor functions—and why constructors gave us more power.
🆕 The magic of the new keyword and how it creates object instances.
🛠 Adding methods through prototypes to keep memory usage efficient.
💡 Why this pattern still matters today (hint: classes are built on top of it!).


By the end, you’ll see how prototypes formed the backbone of JavaScript’s object system—and why understanding them gives you a deeper grasp of how modern classes really work. 🚀

Control Flow – Conditionals

Programming gets powerful when your code can make decisions — and that’s exactly what this episode is all about! Learn how to use conditionals to respond to different situations and write smarter, more dynamic scripts. 🚦

🎯 Here’s what we’ll cover:
• Master the classic if / else if / else structure to control the flow of your program.
• Use boolean conditions to trigger different outcomes based on logic.
• Learn the sleek and compact ternary operator for quick, inline decisions.

🎥 Visual Walkthroughs:
• Build real-time examples that react to changing values like temperature and age.
• Watch how branching logic helps your programs behave differently in different scenarios.
• Break down the syntax so you not only write it — you understand it!

By the end of this episode, you’ll have the tools to write JavaScript that responds to the world around it! 🌍💡

Control Flow – Loops

Ever wish your code could repeat itself without repeating yourself? That’s the magic of loops — and in this episode, you’ll learn how to write them like a pro. 🌀

🎯 Here’s what we’ll cover:
• Why loops matter: run code multiple times without copying and pasting.
• Use the classic for loop to count or iterate through values.
• Learn the while loop for flexible repetition when the end condition isn’t known in advance.
• Try out the do…while loop, which guarantees at least one execution.
• Understand break and continue for more control inside your loops.

🎥 Visual Walkthroughs:
• See real-time examples of different loop types in action.
• Learn when to use each loop and how they differ in behavior.
• Practice repetition with simple, visual examples to build confidence.

By the end of this episode, you’ll be looping like a champ — and writing code that works smarter, not harder! ♻️⚙️

Cookies

HTTP is stateless — every request is brand new.
So… how do we remember users, personalize experiences, or keep them logged in?

That’s where cookies come in 🍪✨

👉 In this episode, you’ll learn how to:

🚀 Read and parse cookie data from incoming requests
⚙️ Set and clear cookies from your server responses
🔐 Understand cookie flags like HttpOnly, Max-Age, and Path
🧠 Explore real-world uses like sessions, personalization, and analytics

By the end, you’ll have a working mental model of how state travels between client and server — and how cookies form the foundation of sessions and authentication in modern web apps.

💡 Relevant Links

Previous TekCasts series:
- JavaScript for Beginners: https://tekcasts.com/play/javascript-for-beginners-what-is-javascript
- JavaScript in the Browser: https://tekcasts.com/play/javascript-in-the-browser-browser-runtime-environment


Official Docs & Resources:
- MDN: HTTP Cookies — https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
- Node.js HTTP Module — https://nodejs.org/api/http.html
- MDN: HTTP Headers — https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers

Creating, Removing, & Cloning Elements

Web pages don’t have to be static — with JavaScript, you can build, destroy, and duplicate elements on the fly. In this video, we’ll dive into the core DOM methods that let you take full control over your UI.

Here’s what you’ll master:
🧩 Creating nodes with createElement & createTextNode
📌 Inserting elements using append, appendChild, and prepend
🗑️ Removing nodes gracefully with .remove() and .removeChild()
🪞 Cloning entire elements with cloneNode(true/false)
⚡ Building dynamic UI components—like interactive tables, buttons, and more

You’ll see:
✅ Why innerHTML isn’t always your best friend
✅ How to dynamically add “Remove” and “Clone” buttons to a table
✅ A hands-on demo where rows can be added, deleted, or duplicated — all with clean JavaScript

By the end, you won’t just be reading the DOM — you’ll be shaping it, sculpting it, and breathing life into it 💡🚀

👉 Watch this video and unlock the power to create and control dynamic UIs!

Defining and Calling Functions

In this episode, you’ll unlock the power of functions — reusable blocks of code that let you organize your logic, avoid repetition, and keep your programs clean and efficient. 🧼✨

🎯 Here’s what we’ll cover:
• What a function really is and why it’s a cornerstone of any serious JavaScript developer’s toolkit.
• The difference between function declarations and function expressions, and when to use each.
• A first look at sleek, modern arrow functions introduced in ES6 — cleaner syntax with powerful flexibility.

🎥 Visual Walkthroughs:
• See each style written and called step-by-step.
• Watch how functions help break your code into logical pieces.
• Reinforce learning through quick, practical examples you can follow along with.

By the end, you’ll have multiple tools to define and invoke your own functions — and you’ll know which style fits your coding vibe best! 🧑‍💻🚀

Deployment Basics

Your Node.js journey is about to go live 🌐🚀

You’ve built, refactored, and refined — now it’s time to deploy your application to the real world!
In this episode, we’ll walk through the key steps and best practices for running your Node.js app in production.

👉 In this episode, you’ll learn how to:

⚙️ Configure your app for different environments
📊 Manage logs and monitor performance
🧱 Handle errors gracefully in production
🌱 Use environment variables for configuration
🌀 Keep your app running with process managers like PM2

By the end, you’ll understand what it takes to make your Node.js app not just work — but thrive in production 💪

💡 Relevant Links

Previous TekCasts series:
- JavaScript for Beginners: https://tekcasts.com/play/javascript-for-beginners-what-is-javascript
- JavaScript in the Browser: https://tekcasts.com/play/javascript-in-the-browser-browser-runtime-environment

Libraries & Tools mentioned:
- PM2 Process Manager: https://pm2.keymetrics.io/
- Node.js Documentation: https://nodejs.org/en/docs/
- dotenv: https://www.npmjs.com/package/dotenv

Destructuring & Spread Syntax

Tired of writing extra lines just to pull out values or merge data? In this episode, you’ll learn two super-handy JavaScript features — destructuring and spread syntax — that make your code cleaner, shorter, and easier to read.

🎯 What you’ll learn:

Array destructuring — extract values directly into variables, skip items, and set default values.
Object destructuring — grab properties by name, rename them, and give them defaults.
Spread syntax — copy, merge, and expand arrays or objects with ease, plus collect the “rest” of the values.


💡 Why it matters:
These techniques are used constantly in modern JavaScript — especially in frameworks like React — so mastering them now will make your future projects smoother and more efficient.

By the end of this episode, you’ll be able to take apart and recombine data like a pro. 🚀

Error Handling

Even the best-written code can run into unexpected situations — and that’s where error handling comes in. In this episode, you’ll learn how to make your programs more reliable by anticipating problems and handling them gracefully.

� What you’ll learn:
- Why handle errors? The importance of defensive programming.
- try, catch, finally — how to catch problems without crashing your program.
- Throwing custom errors when you detect something invalid.
- Practical example with input validation (like stopping someone from dividing by zero).


� Why it matters:
Professional developers don’t just write code that works — they write code that fails gracefully. Error handling is what separates quick scripts from robust applications.

By the end of this episode, you’ll know how to protect your code against the unexpected — and keep your users from seeing cryptic crashes. �

Error Handling in the UI

🚨 Errors happen—but how you handle them makes all the difference!

In this episode of TekCasts, we dive into Error Handling in the UI so your apps don’t just crash and burn 💥 but instead fail gracefully ✨.

Here’s what we’ll cover:
⚡ try…catch…finally – the building blocks of error handling
⏳ Async errors with async/await (and why you should never just throw inside a promise)
🛡️ Graceful degradation – fallback messages & backup UI
👩‍💻 Turning scary red stack traces into friendly user messages (“Could not load data, please try again.”)
🌐 Real-world demo: handling fetch failures in the browser

By the end, you’ll know how to keep users confident and your app resilient—even when things go wrong. 🚀