Performance

Animation Start/Done? Dead. Long Live CSS + DOM Events

October 02, 2025

Angular's deprecated animations module provided start and done events for coordinating animations with component logic, but modern Angular requires a different approach. This tutorial demonstrates how to replace animation start/done events using pure CSS keyframes, Angular signals, and standard DOM events. You'll learn how to detect animation completion, coordinate multiple animations, and trigger side effects when animations finish, all without the deprecated module.

Angular Angular Components Angular Signals

I Built a “Cooldown” Button in Angular… Here’s How

June 05, 2025

Double-submit buttons create poor user experiences and can cause duplicate API calls, form submissions, or unintended actions. Cooldown buttons prevent this by disabling themselves after clicks, showing countdown timers, and preventing rapid-fire interactions. This tutorial demonstrates how to build a reusable cooldown button component in Angular using signals for state management and setInterval for countdown functionality, creating a pattern you can use throughout your application.

Angular Angular Animations Angular Components

Nobody Wants to See a Blank Screen… Build Smarter Loaders!

May 08, 2025

Blank screens and generic spinners create poor user experiences, making apps feel slow even when they're loading quickly. Skeleton loaders improve perceived performance by showing UI structure immediately, providing visual feedback, and creating smooth transitions to real content. This tutorial demonstrates how to build skeleton loaders using Angular's deferred loading, signals for state management, and animations for smooth transitions. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular Components Code Jokes

Explaining Angular to My Grandma

February 21, 2025

Trying to explain Angular to my grandma was a mistake... but here we are 😂. In this stand-up comedy bit, Dommy Bytes breaks down the difference between viewChild() and contentChild(), Angular's "view" vs. "content", and why debugging Angular sometimes feels like talking to a passive-aggressive roommate.

Angular Angular Animations Angular Components

Angular Deferred Loading with Animations: Performance and UX (v19+)

January 02, 2025

Loading content users never see wastes bandwidth and slows initial page loads, hurting performance metrics and user experience. Angular's deferred loading feature lets you load components only when they're needed, reducing initial bundle size and improving Core Web Vitals. This tutorial demonstrates how to combine deferred loading with animations, creating smooth transitions as components enter the viewport. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular Animations Angular CDK

Angular toSignal(): Convert Observables to Signals (v19+)

April 07, 2024

Converting Observables to signals in Angular eliminates the need for async pipes, simplifies change detection, and reduces template complexity. While Observables excel at event streams and async operations, signals provide better performance for UI state that needs to update reactively. Angular's toSignal() function bridges these worlds, letting you transform Observable streams into reactive signals. This tutorial shows you how to convert common Observable patterns to signals, when to use each approach, and how to optimize performance.

Angular Angular Components Angular Signals

Angular Signal Inputs & output(): The Modern @Input and @Output Replacement (v19+)

March 24, 2024

Angular's traditional @Input() and @Output() decorators have been core to component communication for over a decade, but with signals, there's now a more reactive, type-safe, and declarative alternative. In this tutorial, you'll learn how signal inputs and the output() function replace decorator-based inputs and event emitters in Angular v19+. We'll walk step-by-step through converting a classic input/output component to the modern signal-based approach and explain when, and when not, you should migrate.

Animation CSS CSS Transforms

How to Force Hardware Acceleration to Improve CSS Animations

June 03, 2014

You've likely seen CSS animations and transitions in various web applications out there where they just didn't work well. They are choppy and freeze along with a bunch of other issues. This occurs because they are not taking advantage of the device GPU and hardware acceleration, but are instead using the browsers' built in rendering engine.

Accessibility CSS HTML

SVGs are So Fresh to Defs

April 14, 2014

No, this is not a hip hop song about SVGs, sorry to those of you who were expecting that. This is another post about good ol' SVG graphics. So most of us know that there is a lot that you can do with SVGs and it can all be done in many different ways. The SVG `defs` element can be used to make SVG code simpler, cleaner, and better.