Explore By Video

A Simple Router

Time to give our app some direction—literally! In this video, we introduce a simple but powerful router to handle page requests with clarity and control. 🧭

Here’s what we’ll build:
• Refactor pages into controller classes:
• app/Http/AboutController.php
• app/Http/UploadController.php
• app/Http/PhotoController.php 📂
• Set up Composer PSR-4 autoloading for the App\\ namespace ⚙️
• Build routing logic in index.php, then move it to app/routes.php and eventually into globals.php for reuse 🔁

By the end, our app will be running on a clean routing system—flexible, readable, and easy to extend. Welcome to version v6-create-simple-router. This is where things start to feel real. 🚀

Abstract Classes and Methods

In this video, we tackle the code smell of duplicate code and refactor it into a clean, efficient abstract base class! 🏗️💡 You’ll see firsthand how abstract classes and methods help streamline your PHP projects by promoting reusability and maintainability.

🔍 Here’s what we cover:
✅ Identifying and fixing duplicate code 🤢
✅ Calling the parent constructor for seamless inheritance 🏗️
✅ Changing private properties to protected for better access 🔓
✅ Overriding methods to add custom functionality 🎨

By the end, you’ll have a solid understanding of abstract classes and how they can level up your object-oriented PHP skills! 🚀🔥

💻 Watch now and clean up that messy code! 🎬

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! ⚙️💡

Arrays & Associative Arrays

In this video from the PHP for Beginners series, we dive into arrays—one of the most essential data structures in PHP! You’ll learn about string arrays, numeric arrays, and mixed arrays, along with practical ways to output them using implode() and json_encode(). We’ll also explore how to loop through arrays with foreach, making it easy to process data efficiently.

Next, we move on to associative arrays and multidimensional arrays, perfect for storing structured data. You’ll see how to access and manipulate complex datasets in PHP with ease. By the end of this lesson, you’ll have a solid grasp of how arrays work and how to use them effectively in your projects!

🔹 Perfect for beginners!
🔹 Hands-on examples included.

🚀 Start coding with PHP arrays today!

Auth & Application Workflow

🛠️ Session Enhancements
- Add guest() and user() methods to the Session class
- guest() → returns true if no user is logged in
- user() → returns current user object (or null)

🎨 Navigation Improvements
- Update the top navigation bar to reflect authentication state:
- Show Register / Login links when user is not logged in
- Show user avatar and menu when logged in
- Fix any related JavaScript issues

👤 Gravatar Integration
- Create a new helper class: app/Code/Gravatar.php
- Use the user’s email to generate their avatar
- Display avatar in the nav for logged-in users

🖼️ Conditional Upload View
- Modify the upload page to only display the upload form if the user is logged in

📌 And that ties up the loose ends, landing us at v24-authentication-loose-ends.

Automating Builds with GitHub Actions

Let’s automate our workflow! ⚡ In this final video, we’ll set up a GitHub Actions workflow to automate testing and building our PHP package whenever changes are pushed.

📌 What you’ll learn:
✅ Setting up GitHub Actions for your package
✅ Automating testing and builds
✅ Ensuring your package is always production-ready

🎉 This wraps up our PHP Package Development series—thanks for watching! Don’t forget to like, comment, and subscribe for more!

🔗 Resources:
• GitHub Actions Docs

Blade / Twig Style Templates

In this video, we upgrade our templating engine to support Blade-style syntax, bringing a more expressive and readable feel to our views. Here’s what we did:

Enhanced the View class to support:
- Escaped output: {{ $user->name }}
- Raw output: {!! $user->name !!}

Updated all relevant views to use the new shorthand syntax for cleaner templates.
- 🛠️ Fixed a display issue in photo.show where old_rating wasn’t mapping correctly (it was showing a 4 instead of the correct 1).

✨ With this little dose of syntax sugar, we land at v27-blade-envy — giving our views a modern touch without bringing in a full framework.

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.

Calculator - Converting to OOP

It’s time to level up! 💡 In this video, we take the functional calculator from the PHP for Beginners series and transform it into a clean, modular Object-Oriented project! 🎯

🔍 Quick code review of the existing functions 🔄
📦 Step-by-step conversion of functions into classes 🏗️
💡 Learn how OOP principles improve structure, maintainability, and reusability 🧩

This is the first step in our Final Project—get ready to apply everything you’ve learned so far! 💪🔥 Let’s dive in! 🎬

Calculator - Developer Experience

Great code isn’t just about functionality—it’s about how easy and intuitive it is to use! 💡 In this video, we refine our OOP Calculator to enhance the developer experience, making it cleaner, simpler, and more powerful.

🔹 Reimagining how we’d ideally like to use this calculator in real-world code ✨
🔹 Refactoring for better readability & usability 🏗️
🔹 Making integration effortless for developers 💻

By the end, our calculator will feel natural to use—setting the stage for clean and elegant PHP development! 🔥 Let’s dive in! 🎬

Calculator - Dynamic Operators

What if our calculator could easily support new operations beyond just addition, subtraction, multiplication, and division? 🤔 In this video, we take extensibility to the next level by refactoring our operator logic into a flexible, modular design! 🎯

🔹 Transforming operators into dedicated classes 🏗️
🔹 Creating an Operator Interface for consistency ✅
🔹 Implementing a registration system for dynamic operators 🔄
🔹 Demo: Adding a 🔥 Power Operator for exponentiation! ⚡

By the end, our calculator will be fully extensible—ready to support any operation with ease! 💡 Let’s build it! 🎬

Calculator - Namespaces & Autoloading

n the final episode of our Object-Oriented PHP series, we take our calculator to professional-grade by introducing Namespaces & Autoloading! 🎯

🔹 Understanding the PSR-4 standard for structured code 🏗️
🔹 Adding namespaces to each class with the namespace keyword 📌
🔹 Using use statements to simplify class dependencies 🔄
🔹 Leveraging Composer’s autoload feature for seamless class loading ⚙️

With these best practices, our project is now well-structured, scalable, and ready for the real world! 🌍 Let’s finish strong! 🎬🔥