In this tutorial, I’ll show you how to use the experimental @view-transition API to create seamless, app-like navigation between standard HTML pages. No routers, no state management, just the power of the modern Web Platform. You can also transition specific elements instead of the whole page using the API, by assigning a name referring to the ID of the element in the CSS. Enable cross-document transitions: @view-transition { navigation: auto; } 1:45 - Demo of the four effects 3:50 - Fade In/Out Effect Code 6:32 - Cinema Scale Effect Code 7:30 - Slide Effect Code 7:57 - Wipe Effect Code

The advice I'm about to give you provides a way to achieve greater speeds, slimmer code, greater visual semantics, and much higher levels of logic in your projects. There's a class-only styling dogma being preached that has fully overtaken the industry. Using IDs for style selectors is being discouraged even though it is the far better tool to be implemented for unique elements. Most of the skeletal and layout elements in your project are going to be unique elements that would never need to be reused or overridden. It's not just a couple of elements in your projects that are going to be unique. It's going to be most of the structure. The class-only approach became the standard to prevent chaos in large corporate projects that have lots of junior contributors which results in messy style sheets that require hacks. I can respect that and I understand it. If you have a large group of people that don't understand the cascade and organization cannot be maintained, you have to avoid using IDs. I totally get. Even if you are highly skilled with CSS and are very agile with it, you might find yourself having to work within a large team that is making a huge mess of the CSS in the project. But if your project is just you, or a tight crew, you should be using ID-based style targeting for unique elements. For collections or element groups that share styles, you should use class-based targeting. It's a very simple concept. The problem is that now the class-only paradigm is being encouraged for every situation and every project and the educational entities in the industry are not explaining why, and are not making the distinctions where they should be made. Standards Smarts: CSS specs and the people that evolve the language endorse IDs for uniques, ignoring them is like banning a hammer because somebody might smash their thumb, unnecessary purism that ignores real-world needs. Specificity Superpower: With 100 specificity points, IDs crush class overrides without !important hacks or nested bloat, ending those endless specificity battles. Semantic Clarity: #main-nav screams "I'm unique!"—it self-documents your HTML, making code easier to scan and maintain for teams. JS Harmony: IDs double as perfect hooks for JavaScript (getElementById is built-in and much more efficient), aligning style and behavior without extra attributes. Less Markup Mess: Skip piling on classes. Have you ever seen modern elements that have gigantic class strings? IDs keep HTML lean, reducing file size and cognitive load. Framework Freedom: Even in class-heavy worlds, IDs play nice with CSS Modules or Scoped Styles, isolating uniques without component reuse pressure.

The syntax differences between legacy and modern rgb() and hsl() color value assignment.

There was a critical security vulnerability (CVE-2025-55182), nicknamed React2Shell, disclosed on December 3, 2025. Key Details Vulnerability: Unauthenticated Remote Code Execution (RCE). Root Cause: An unsafe deserialization flaw in the React Server Components (RSC) "Flight" protocol. Severity: Maximum CVSS score of 10.0. Impact: An attacker can execute arbitrary code on the server simply by sending a specially crafted HTTP request, even on default configurations. Affected Versions: React Server Components packages in React versions 19.0.x, 19.1.x, and 19.2.x (specifically react-server-dom-webpack, etc.). Immediate Action Required You should immediately upgrade to the patched versions if you use React Server Components or frameworks built on them, like Next.js with the App Router. Patched React: Upgrade to 19.0.1, 19.1.2, or 19.2.1 (or newer). Patched Next.js: Upgrade to the latest patched version in your release line (e.g., Next.js 15.0.5, 15.1.9, 15.2.6, etc., or newer). #React #Next.js #Developer #Security

Demystify the code! This is the complete history of Artificial Intelligence and Machine Learning, exploring the key building blocks from ancient probability to modern Generative AI. We break down the math and programming concepts (like the Perceptron and Transformer Architecture) that power systems like GPT and Gemini. 0:00 Introduction: The Core Concept 0:54 The Precursors (Ancient Concepts & Bayes' Theorem) 2:42 The Theoretical Dawn (1940s-1950s) 3:54 The Early Networks and AI Winters (Perceptron & Backpropagation) 5:17 The Data & Deep Learning Revolution (1990s-Present) 6:35 The Transformer Architecture & Generative AI Era 7:21 Today's Pursuit of Quality Training Data 8:40 Conclusion for Developers and Programmers #AIHistory #MachineLearning #DeepLearning #WebDevelopment #TransformerArchitecture

Code: https://www.adamkhoury.com/video/pwa-make-your-website-a-native-app-on-mobile-devices-and-desktop Learn how to transform any modern website into an installable, app-like experience with this comprehensive Progressive Web App (PWA) crash course! Who is this Video For? This crash course is perfect for web developers, front-end engineers, and digital marketers who want to: * Boost performance and engagement on their websites. * Reduce friction by allowing users to install the website directly. * Provide an offline-first experience. * Learn modern web development techniques. Like this video if you're excited about the future of web development! Subscribe for more crash courses and web development tutorials. 💬 Comment below with your PWA project ideas! #PWA #ProgressiveWebApp #WebDevelopment #FrontendDevelopment #ServiceWorker #WebDesign #Coding #CrashCourse #OfflineApp #AppDevelopment

Code: https://www.adamkhoury.com/video/php-custom-modular-project-architecture-tutorial-part-2 Welcome back to Part 2. If you’re tired of slow websites and massive framework overhead, this tutorial is for you. We’re deep-diving into the Custom PHP Template-Based Dynamic Paging architecture that powers my website, delivering elite Lighthouse scores in Performance, Best Practices, and SEO categories, offering lightning-fast loading and development speed. In this tutorial, you'll learn how to implement the key systems that make this "no-bloat" approach secure and maintainable: 🔑 Key Learning Points: Secure Database Wrapper (Singleton Pattern): See how to build a custom PHP PDO class using the Singleton pattern to ensure one efficient connection and prevent resource waste. We use prepare() and charset=utf8mb4 to achieve high level SQL injection protection. Learn about beginTransaction() for large database transaction, giving you the power to commit() or rollback(). Dynamic Paging: Using the database we set up the dynamic paging system to allow thousands or zillions of pages to render through a single master file. Templating the Two-Step View: We dissect the initial HTML structure into reusable PHP templates (doctype.php, doctop.php, docbtm.php) to keep presentation logic separate and layout changes a breeze. This architecture offers the speed of a static site with the power of a dynamic application. You can choose to stop relying on heavy frameworks and start building your own custom, high-performance solution today!

Code: https://www.adamkhoury.com/video/php-custom-modular-project-architecture-tutorial-part-2 Showing how I structure a custom PHP database driven web project that is capable of rendering zillions of dynamic rich content pages, with blistering speed and efficiency. All of the code is ready to persist for a long time going forward. You'll see object-oriented approaches, clever template approaches, and when your system requires an update or whenever you want to perform design changes, the lightweight modular approach is so easy to manage. - Show Chrome Lighthouse Analysis - Show Error-Free Markup at W3C validator This custom PHP architecture is intentionally built for the resulting product to have greater speed, efficiency, simplicity, and is the fastest way to get code running. It stands in stark contrast to the heavy, bloated, bootstrap overhead of an MVC or MVP. ( Model View Controller or Model View Presenter ) Main Advantages Over MVC and MVP Architectures * High Performance and Zero Bloat * Straight Forward Design Management * Greater Flexibility in Database Handling * Highly Intuitive Structure and Mapping * Development Ease & Low Barrier to Entry * Lower Server Rewrite and Reroute Directives

AI Web Development Challenge : Grok vs Gemini Showdown Check their code: https://www.adamkhoury.com/video/ai-web-development-challenge-gemini-vs-grok-programming-showdown Welcome to the ultimate AI head-to-head! In this video, we pit Google's Gemini against Grok AI in an identical, real-time web development challenge to see which LLM is the superior coding assistant and designer. The challenge: Create a stunning, responsive homepage for a hypothetical General AI company named "Mentula," complete with futuristic styling and dynamic effects. 🔥 What We Challenge Them To Do: 1. Generate two distinct visual mockups (Dark/Light). 2. Write production-ready, responsive HTML, CSS, and JavaScript. 3. Implement dynamic visual effects (like particle systems). 4. Structure the code cleanly (separate files, no external assets). 🏆 Who is the better Web Developer? I detail the 5 crucial reasons I declared one winner—covering code quality, responsiveness, reliance on external assets, and understanding the core assignment. But the final verdict belongs to you, the audience! 🛠️ Technologies Used (by the AIs): * HTML5, CSS3, Vanilla JavaScript * Canvas for Particle Effects * Responsive Design (@media queries) 👍 Like, Subscribe, and Comment! Let me know which AI you think won and why! 👇

Code : https://www.adamkhoury.com/video/mastering-popover-web-api-programming-javascript-and-html Learn how to implement and master the Popover API with this comprehensive resource. The Popover API is a new, powerful web standard that provides built-in browser support for creating non-modal user interface elements that float above the rest of the page content. This video is essential for web developers and front-end engineers looking to modernize their UIs and replace complex custom solutions for elements like tooltips, menus, contextual windows, and dialogs that need light dismiss behavior.

Code : https://www.adamkhoury.com/video/mastering-the-html-dialog-element-with-javascript-and-css Are you tired of relying on heavy third-party libraries for simple modal windows? The native HTML dialog element is here to revolutionize how you handle pop-ups, alerts, and user input! In this comprehensive tutorial, we dive deep into the modern, semantic way to create dynamic and accessible dialogs. You'll learn exactly how to use HTML's built-in solution and harness the power of JavaScript and CSS to make it shine. What You Will Learn: HTML Foundation: How to correctly implement the dialog element for maximum accessibility. JavaScript Control: .showModal() and .close() methods. Modern CSS Styling: How to easily style the dialog box, and more importantly, the ::backdrop pseudo-element to create a stunning, immersive overlay.

PENDULUM SWINGS ( Lyrics : Adam Khoury | Music Production : Adam Khoury + AI Accompany ) There's a whisper of logic, a steel that's cold and clean, Then the shout of emotion, a passionate emerald green, A fight in the mirror, between hand and fist, A soul that's forever dividing the things that exist. We rise up in fury, fall back in grace, Leaving fingerprints on the window of time and space, Order and chaos locked in a perpetual dance, A neverending rhythm that put us in circumstance. Oh, the pendulum swings from the dark to the light, From the cold reasoned morning to the deep screaming night. It's the friction of fire and the stone on the ground, The war in the heart that makes the whole world go 'round. We're at our best on the knife's edge, where the angel and devil hold hands, And fight every minute to keep from sinkin' in the sands. Look back on the ages, from the cave to the wire, Every conflict has fueled a brighter higher fire, If we all walked in rhythm, if our hearts beat as one, The slow settling dust would blot out the sun, We were never meant to be a herd mentality, But a creature that thrives on bold duality, The hero needs the villain and the question needs the doubt, It’s the breaking of the balance that's always making us shout. Oh, the pendulum swings from the dark to the light, From the cold reasoned morning to the deep screaming night. It's the friction of fire and the stone on the ground, The war in the heart that makes the whole world go 'round. We're at our best on the knife's edge, where the angel and devil hold hands, And fight every minute to keep from sinkin' in the sands. Look inside, when the silence finally falls, And you realize the shadow answers all of your calls. We're not meant to be perfect or eternally good, Just balanced between the things we misunderstood, Each side must struggle must push back and strive, To keep opposing forces from going fully alive. It’s the scar on the soul, the twist in the vine, The moment you know that the light's gonna shine one more time. It's the sacred design. Oh, the pendulum swings from the dark to the light... We stand on the knife's edge where angel and devil hold hands. And you can be sure that you'll always have a chance... to enjoy the ride. Oh, the pendulum swings from the dark to the light... We stand on the knife's edge where angel and devil hold hands. And you can be sure that you'll always have a chance... to enjoy the ride.

Code: https://www.adamkhoury.com/video/programming-native-accordion-html-details-lists-without-javascript Learn to develop native exclusive accordion details lists without JavaScript, and styling them to be nicer looking using CSS. Question 1: What is a "Native Accordion? It's a standard HTML details element that, when combined with the name attribute, gains mutually exclusive behavior. Question 2: Does this need JavaScript? Nope! The browser handles all the open/close logic and the grouping, making it extremely performant and accessible by default. Question 3: Why use it? It greatly simplifies FAQ pages, menus, or any list of content where you only want one section visible at a time.

Code: https://www.adamkhoury.com/video/container-queries-containment-module-css-tutorial @container Queries tutorial. Best Practice: Use container queries for reusable, responsive components without relying on global viewport breakpoints. https://www.w3.org/TR/css-contain-3/

CHILDREN OF THE LIE ( Lyrics : Adam Khoury | Music Production : Adam Khoury + AI Accompany ) The TV hums with a hollow sound, Teachers speak but the truth ain't found, Politicians preach using serpent tongues, More venom for the angry ones. Oh, they're the children of the lie, Burning towns 'neath a painted sky, Voices echo but they're dead inside, Oh, they're the children of the lie. Oh, they're the children of the lie, Marching on where the light won't shine, Promises sold while they're soft on crime, Oh, they're the children of the lie. Devil's children manufacture smiles, Selling fear in a godless style, Every word is a loaded gun, Aimed at the heart of the truthful ones. Can you hear the whispers in the dark? They're selling madness in the parks, The saints are gone, the devils rise, And we're the ones who pay the price. Oh, they're the children of the lie, Burning towns 'neath a painted sky, Voices echo but they're dead inside, Oh, they're the children of the lie. Oh, they're the children of the lie, Marching on where the light won't shine, Promises sold while they're soft on crime, Oh, they're the children of the lie.