JavaScript

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 the Smoothest Countdown Timer in Angular

August 14, 2025

Session timeout warnings prevent users from losing unsaved work by providing clear countdown feedback before automatic logout. Building effective session timers requires real-time countdown logic, visual feedback with animations, and color-coded warnings that escalate as time runs out. This tutorial demonstrates how to build a session timer component in Angular with smooth animations, progressive visual warnings, and clear messaging that keeps users informed.

Angular Angular Components Angular Model

Can linkedSignal Use Multiple Sources? Yes, Here’s How!

July 03, 2025

Combining multiple reactive sources in Angular often requires complex RxJS operator chains, creating hard-to-maintain code. Angular's linkedSignal() simplifies this by creating writable signals that derive from multiple sources, enabling two-way binding scenarios and complex reactive patterns without Observable complexity. This tutorial demonstrates how to use linkedSignal() to combine multiple signals, create reactive two-way bindings, and build modern Angular components with cleaner, more maintainable code.

Angular Angular Components Angular Inject

You Might Not Need That Service After All 💉

May 15, 2025

Component communication in Angular often requires prop drilling with inputs/outputs or global services, creating tight coupling and maintenance headaches. Angular's dependency injection system allows you to inject parent or grandparent components directly, eliminating the need for intermediate props or shared services. This tutorial demonstrates how to use component injection to access parent component APIs, share context across component hierarchies, and simplify component communication patterns.

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 Angular Input

How Angular Components Should Communicate in 2025

April 10, 2025

Component communication in Angular has evolved from traditional inputs/outputs to modern two-way binding with model inputs, reducing boilerplate and simplifying parent-child data flow. This tutorial demonstrates three component communication patterns: one-way data flow with inputs/outputs, two-way binding with model inputs, and when to use each approach. You'll learn how to implement real-time communication between parent and child components using modern Angular patterns.

Accessibility Angular Angular Components

Angular Directive Composition API: Enhance Components with Host Directives (v19+)

March 27, 2025

Applying multiple directives to components creates verbose templates and makes it easy to forget required directives. Angular's Directive Composition API lets you embed directives directly into components, creating reusable component behaviors that can't be accidentally omitted. This tutorial demonstrates how to use host directives to add functionality like auto-focus, click-outside detection, and accessibility features directly into components, reducing template complexity and improving maintainability.

Angular Angular Components Angular Form Control

Angular Reactive Forms: Build Dynamic Checkbox Lists

March 20, 2025

Dynamic checkbox lists are common in Angular forms, but building them with proper state management and "Select All" functionality requires understanding Reactive Forms patterns. This tutorial shows you how to generate checkbox controls dynamically from data, track selected values reactively, and implement a master "Select All" checkbox that toggles all items at once. You'll learn how to handle form state, validation, and user interactions efficiently.

Angular Angular Components Angular Styles

Angular Component Styling: Every Way to Add Styles (Complete Guide)

March 06, 2025

Angular offers multiple ways to add styles to components, each with different use cases and trade-offs. From inline styles in the decorator to external stylesheets, from programmatic styling with Renderer2 to CSS custom properties, choosing the right approach impacts maintainability and performance. This comprehensive guide walks through every styling method available in Angular, helping you make informed decisions for your components.

Angular Angular Components Angular ContentChild

Angular View vs Content: Understanding Signal Queries

February 20, 2025

The difference between "view" and "content" in Angular trips up many developers, leading to queries that don't work as expected. Understanding this distinction is crucial for working with signal queries like viewChild() and contentChild(). This tutorial explains the fundamental difference: "view" refers to a component's own template, while "content" refers to projected content from parent components. You'll learn when to use each query type and how to avoid common mistakes.

Angular Angular Components Angular Styles

Untagged Template Literals... The Upgrade You Didn’t Know You Needed!

February 13, 2025

Dynamic class and style bindings in Angular templates often become complex, mixing string concatenation, ternary operators, and multiple bindings that are hard to read and maintain. Angular's template literal syntax provides a cleaner way to handle dynamic expressions, allowing you to use JavaScript template literals directly in templates for classes, styles, and complex interpolations. This tutorial demonstrates how to use template literals to simplify dynamic bindings and improve template readability.

Angular Angular Components Angular Styles

Angular Component Selectors: Complete Guide to Element, Attribute, and Class Selectors

January 30, 2025

Choosing the wrong component selector in Angular creates maintenance issues, breaks encapsulation, and limits component flexibility. Angular supports three selector types—element, attribute, and class—each with different use cases and trade-offs. This tutorial demonstrates all component selector options in Angular, helping you choose the right selector for your component based on reusability, styling needs, and integration requirements.

Angular Angular Components Angular Forms

Angular SVG Components: Create Dynamic Interactive Graphics

January 09, 2025

SVG components in Angular unlock powerful possibilities for data visualization and interactive graphics. Unlike static images, SVG components can respond to data changes, user interactions, and state updates in real time. This tutorial shows you how to transform basic lists into dynamic, interactive SVG charts using Angular's component system, signal-based reactivity, and template binding. You'll learn how to create scalable, data-driven visualizations that update automatically.

Angular Angular Components Angular Form Control

Angular Form Validation: Complete Guide to Validators and Error Handling

December 27, 2024

Form validation is crucial for creating great user experiences in Angular applications. Without proper validation, users struggle with unclear errors, incomplete submissions, and frustrating experiences. This tutorial shows you how to implement comprehensive form validation using Angular Reactive Forms, including required fields, email validation, and real-time error messages. You'll learn how to display helpful feedback and prevent invalid submissions.

Angular Angular Components Angular Effects

Angular effect(): When NOT to Use It and Better Alternatives

November 01, 2024

Angular's effect() function is often misused, leading to performance issues, unnecessary side effects, and code that's harder to reason about. While effects seem like an easy solution for reacting to signal changes, most scenarios have better alternatives using computed signals, template bindings, or lifecycle hooks. This tutorial shows you when NOT to use effects, demonstrates common anti-patterns, and provides better solutions for each scenario. You'll learn to write more efficient, maintainable Angular code.

Angular Angular Components Angular Effects

Angular Signal Inputs: Replace @Input and ngOnChanges (v19+)

October 25, 2024

Enabling and disabling form controls based on input changes requires ngOnChanges() lifecycle hooks and manual state management when using traditional @Input decorators. Signal inputs eliminate this complexity by providing reactive values that automatically trigger updates, making form state management simpler and more declarative. This tutorial demonstrates how to migrate from @Input and ngOnChanges() to signal inputs, showing how reactive forms integrate seamlessly with Angular's signal system.

Angular Angular Components Angular Pipe

Angular Date Pipe: Complete Guide to Date Formatting

October 04, 2024

Date formatting in Angular applications often causes headaches: inconsistent formats confuse users, locale-specific requirements complicate code, and manual formatting leads to maintenance nightmares. Angular's Date Pipe solves these problems by providing built-in localization, flexible formatting options, and semantic HTML support. This complete guide covers everything from basic date formatting to advanced locale handling, timezone management, and SEO-friendly date markup.

Angular Angular Components Angular Form Control

Angular Reactive Forms: Create and Enhance Form Controls

September 13, 2024

Building forms in Angular requires understanding Reactive Forms, but many developers struggle with creating form controls, tracking validation states, and providing user feedback. This tutorial shows you how to create form controls using Angular's Reactive Forms Module, track validity and interaction states, and enhance forms with visual feedback based on user input. You'll learn the fundamentals needed to build production-ready forms that guide users through the submission process.

Accessibility Angular Angular Components

Angular Content Toggle: Show/Hide Content with Buttons

September 06, 2024

Building toggle buttons in Angular doesn't have to be complicated. Whether you need to show/hide content with CSS classes or conditionally render elements, this tutorial covers multiple approaches. You'll learn how to create reusable toggle buttons that control content visibility, handle state management with signals, and implement smooth transitions. By the end, you'll have several patterns you can use in any Angular project.

Angular Angular Animations Angular Components

Angular Crossfade Animation: Fade Between Content (Deprecated Module)

August 30, 2024

Crossfade animations create smooth transitions between content changes, image carousels, and tab switches, eliminating jarring instant replacements. While CSS transitions can handle simple fades, coordinating simultaneous fade-out and fade-in effects requires careful timing and state management. This tutorial demonstrates how to create crossfade animations using Angular's animation framework, ensuring smooth transitions between content states. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular Animations Angular Components

Angular Flip Animation: Create Card Flip Effects (Deprecated Module)

August 23, 2024

Flip animations create engaging card interactions, reveal effects, and 3D transformations that feel natural and intuitive. Implementing flip animations requires careful coordination of transforms, perspective, and timing to create convincing 3D effects. This tutorial demonstrates how to create flip animations using Angular's animation framework, including proper perspective setup and smooth transitions. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular Animations Angular Components

Angular Slide Animation: Slide-in/Slide-out Effects (Deprecated Module)

August 16, 2024

Slide-in and slide-out animations are essential for modals, sidebars, and dynamic content, creating smooth transitions that guide user attention. While CSS transitions work for simple show/hide scenarios, Angular's animation framework provides better control over timing, easing, and coordination with component lifecycle. This tutorial demonstrates how to create professional slide animations using Angular's animation framework. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Accessibility Angular Angular Components

Angular @let Template Variables: Create Variables in Templates (v17+)

July 19, 2024

Angular's @let syntax allows you to create variables directly in templates, eliminating the need for component properties for simple calculations and transformations. Template variables improve readability, reduce component complexity, and enable inline computations without cluttering your TypeScript code. This tutorial demonstrates how to use @let for string manipulation, computed values, conditional logic, and accessibility improvements, showing real-world examples that simplify your templates.

Angular Angular Animations Angular Components

Angular Custom Loading Screen: Replace Blank Bootstrap Screen

July 05, 2024

Blank screens during Angular app bootstrap create poor first impressions and make applications feel slow, even when they're loading quickly. Custom loading screens improve perceived performance, provide visual feedback, and enhance brand consistency. This tutorial shows you how to replace Angular's default blank bootstrap screen with a custom loading animation that displays while your app initializes. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular Components Angular Directives

Angular Host Element Binding: Replace @HostBinding and @HostListener (v19+)

July 05, 2024

Angular's @HostBinding and @HostListener decorators are deprecated, existing only for backwards compatibility. Modern Angular uses host element bindings in the component decorator and host event bindings in templates, providing better type safety, clearer syntax, and improved performance. This tutorial demonstrates how to migrate from deprecated decorators to modern host binding patterns, updating real-world examples and modernizing component code along the way.

Angular Angular CDK Angular Components

Angular CDK Auto-Resizing Textareas: Dynamic Height Control

June 28, 2024

Fixed-height textareas create poor user experiences when content exceeds the visible area, forcing users to scroll within a small box. Auto-resizing textareas improve UX by expanding to fit content, eliminating scrollbars, and providing visual feedback as users type. The Angular CDK TextField module includes a directive that handles all the complexity of auto-resizing textareas, including proper height calculations and performance optimizations. This tutorial shows you how to implement auto-resizing textareas in minutes.

Angular Angular Animations Angular Components

Angular Animations: Learn the Basics (Deprecated Module)

February 09, 2024

Animations transform static Angular UIs into engaging, intuitive experiences, but CSS alone can't handle complex scenarios like animating elements as they enter/leave the DOM or coordinating multiple animations. Angular's animation framework provides powerful features beyond CSS, including state-based animations, enter/leave transitions, and programmatic control. This tutorial covers the basics of Angular animations, from enabling the module to creating your first state-based animation. Note: This uses Angular's deprecated animations module—modern alternatives are available.

Angular Angular Components Angular Forms

Angular Dynamic Components: Pass Data with @Input (v16+)

December 29, 2023

Passing data to dynamically created components in Angular used to require custom injectors and boilerplate code, making component communication cumbersome. Angular 16+ supports using @Input decorators directly with dynamically created components, eliminating the need for manual dependency injection setup. This tutorial shows you how to pass data to dynamic components using the familiar @Input pattern, simplifying your code and making dynamic component creation more intuitive. Note: Modern Angular (v19+) offers signal-based inputs as an even better alternative.

Angular Angular Components Angular Styles

New CSS Features in Angular 17: Component Style Improvements

December 01, 2023

Angular 17 introduced simplified component styling options that reduce boilerplate and improve developer experience. Instead of requiring arrays for inline styles, you can now use single strings, and external stylesheet imports are more flexible. This tutorial demonstrates Angular 17's new styling features, showing how they simplify component style definitions and improve code readability.

Angular Angular Components Angular Directives

Angular Control Flow: Replace ngIf, ngFor, and ngSwitch the Modern Way (v19+)

November 03, 2023

Angular's new control flow syntax replaces the old structural directives (*ngIf, *ngFor, and ngSwitch) with a cleaner, more intuitive template syntax that doesn't require imports or wrapper elements. In this guide, you'll learn how to use @if, @for, and @switch to build modern Angular templates, understand when and why to migrate from the old directives, and discover the performance benefits of built-in tracking. All examples work with Angular v19+ and demonstrate production-ready patterns.

Animation CSS HTML

Look ma... no JavaScript!

October 27, 2023

Scroll-driven animations create engaging, interactive experiences that respond to scroll position, but implementing them with JavaScript requires complex event listeners, performance optimizations, and manual calculations. CSS Scroll-Driven Animations eliminate this complexity by binding animations directly to scroll containers using the animation-timeline property and view() function. This tutorial demonstrates how to create scroll-triggered animations with pure CSS, no JavaScript required.

Angular Angular Components Angular Forms

Angular Host Binding Animations: Animate Components on Enter/Leave (v19+)

October 20, 2023

Animating components as they enter and leave the DOM is a common requirement, but CSS alone can't handle this. Angular's animation framework provides :enter and :leave transitions that work perfectly for this scenario. In this tutorial, you'll learn how to use @HostBinding to automatically animate components when they're added or removed, handle animation callbacks with @HostListener, and create reusable animated components that work anywhere in your app. All examples work with Angular v19+ and modern component patterns.

Angular Angular CDK Angular Components

Angular CDK Breakpoint Observer: Monitor Media Queries Programmatically

October 05, 2023

When CSS media queries aren't enough, when you need to change component logic, toggle functionality, or conditionally render based on viewport size, the Angular CDK Breakpoint Observer is your solution. This utility lets you monitor media queries programmatically and react to breakpoint changes in your TypeScript code. In this tutorial, you'll learn how to use the Breakpoint Observer to sync JavaScript behavior with CSS breakpoints, share breakpoint values between CSS and TypeScript, and leverage Material Design's predefined breakpoints. All examples work with Angular v19+ and standalone components.

Animation CSS HTML

Things You Didn’t Know CSS Grid Could Do

September 29, 2023

CSS Grid provides powerful layout capabilities beyond simple two-dimensional grids, enabling centering, stacking, complex layouts, and even animating to unknown heights without JavaScript. This tutorial demonstrates advanced CSS Grid techniques that solve common layout challenges, showing how grid's unique features simplify complex design requirements.

CSS HTML JavaScript

Oh Wow That’s Neat – 19: Responsive Boilerplate

May 28, 2014

With all of the great frameworks popping up it can be difficult to choose the "right" one. Besides doing some really great things, probably the two most popular frameworks [Twitter Bootstrap](http://getbootstrap.com/2.3.2/) and [Zurb Foundation](http://foundation.zurb.com/), can be a little overreaching at times when it comes to theming them. You may find that you have to overwrite and undo many styles to make them look unique. This is where web developer [James South's](https://twitter.com/James_M_South) [Responsive Boilerplate](http://responsivebp.com/) may prove to be that "right" one.

Angular Angular Directives Angular Styles

Quick Tip - 15: How to Fix ng-cloak Flicker in AngularJS

April 18, 2014

The ng-cloak directive was added to Angular in order to prevent the flickering of elements before your application has fully loaded. It then removes ng-cloak once it has had a chance to compile your views. However, there is still a flicker issue that occurs between when the view is first loaded and before Angular has had a chance to run.

CSS HTML JavaScript

Oh Wow That’s Neat – 12: SVG Optimiser

March 25, 2014

If you've ever created an SVG image in Adobe Illustrator you've seen some pretty crazy code. Just like all other code we write, it should be simple, clean, and lean. Also, like any other image type we want to make sure that it is optimized and has the highest quality with the smallest file size.

Angular Angular Components Angular Directives

AngularJS Overview for Web Designers

March 24, 2014

AngularJS is a newer JavaScript framework geared towards the creation and maintenance of single page web applications. It is considered to be a “toolset for building the framework most suited to your application development” meaning that, for the most part, you can choose the elements that you want to use and swap out those that you don’t want with other libraries/frameworks of your choice. It is built and maintained by Google and is open source with an MIT license.

HTML JavaScript

Oh Wow That’s Neat – 10: jQuery Notebook

March 12, 2014

Getting tired of those ugly old school WYSIWYG editors that have every setting under the sun? I know I am. Well, there are some other great solutions out there and jQuery Notebook is one of them.

HTML JavaScript

Oh Wow That’s Neat – 09: Conditioner.js

March 05, 2014

Media queries are great and they have become the standard for responsive web design. They provide us the ability take control of our designs and dramatically change the way they look across a wide array of view port dimensions and devices. They are not without issues however. They are are only concerned with the width of the view port and not the width of containing elements.

Accessibility CSS JavaScript

Modern Web Typography: Kerning

February 24, 2014

Kerning is a very important aspect when it comes to setting type. Unfortunately, until more recent times, it has been left out when it comes to the web.

Accessibility CSS HTML

Make it Count with CSS Counters

February 09, 2014

Often I've found myself in a spot where I've needed to style an ordered list in a way that I just couldn't do with CSS. So I either had to live with it as it was or get tricky with JavaScript or something to create a custom list with the necessary markup. Then I stumbled across CSS Counters and that all changed.

CSS CSS Layout HTML

Understanding CSS Regions

January 20, 2014

Some of my favorite parts of CSS3 are those concerning layout. So far I've explored Flexbox and Columns, but today I'm going to dig into CSS Regions.

Animation CSS HTML

Oh Wow, That's Neat - 01: Snap.svg

January 10, 2014

For those of you that have read my post "SVGs are Cool & You Should Start Using Them, If You’re Not Already" you know that I am a fan of SVGs. In fact, now that I know a little more about them I feel that they are very under used in modern web development. They are light weight, resolution independent, and they really open up the door to so many possibilities for enhancing user experiences.