diff --git a/content/blog/2024/12/21/event-modifiers.md b/content/blog/2024/12/21/event-modifiers.md
new file mode 100644
index 0000000..3ccfeb4
--- /dev/null
+++ b/content/blog/2024/12/21/event-modifiers.md
@@ -0,0 +1,128 @@
++++
+title = "A Guide to Event Modifiers in Aurelia 2: Simplifying Event Handling"
+author = "Dwayne Charrington"
+description = "Learn how to use event modifiers in Aurelia 2 to simplify event handling and improve code readability."
+date = 2024-12-21T10:00:00Z
+lastmod = 2024-12-21T10:00:00Z
++++
+
+Event binding is one of the cornerstones of modern web development. It allows developers to seamlessly handle user interactions, from clicks and key presses to complex keyboard shortcuts. Aurelia 2 offers a clean and intuitive approach to event binding, and with event modifiers, you can elevate this process by adding extra layers of control and clarity to your application.
+
+In this guide, we’ll break down what event modifiers are, how to use them effectively, and the practical scenarios where they shine.
+
+## Event Binding Recap: Setting the Stage
+
+Before diving into modifiers, let’s quickly cover the basics of event binding in Aurelia 2. Here’s an example of the standard syntax:
+
+```html
+<button click.trigger="doSomething()">Click Me</button>
+```
+
+This setup binds the click event on the button to the doSomething method in your view model. It’s simple, clean, and works for any DOM event like keydown, mouseover, or input.
+
+Want to pass arguments to your handler? Easy:
+
+```html
+<button click.trigger="doSomething('Hello')">Say Hello</button>
+```
+
+In your view model:
+
+```typescript
+export class MyViewModel {
+  doSomething(message) {
+    console.log(message); // Logs: Hello
+  }
+}
+```
+
+This basic syntax is great, but what if you need to handle more complex interactions, like ensuring a method only fires on specific key combinations or stopping event propagation? That’s where event modifiers come in.
+
+## What Are Event Modifiers?
+
+Event modifiers in Aurelia 2 let you declaratively alter how events are handled. They add precision to your event bindings without requiring extra code in your view model. By using modifiers, you can clean up your templates, making them more expressive and easier to maintain.
+
+Here’s the general syntax:
+
+```html
+[event].trigger[:modifier]="[expression]"
+```
+
+The `:` introduces the modifier, which tells Aurelia how to handle the event. Let’s look at some examples to see how they work.
+
+## Practical Use Cases for Event Modifiers
+
+1. Keyboard Modifiers: Handling Key Combinations
+
+Need to trigger an action only when specific keys are pressed? Event modifiers make this effortless:
+
+```html
+<textarea keydown.trigger:ctrl+enter="submitForm()"></textarea>
+```
+
+In this example, submitForm() is called only when the Ctrl and Enter keys are pressed together. No extra JavaScript logic to check event.ctrlKey—Aurelia handles it for you.
+
+2. Prevent Default and Stop Propagation
+
+Preventing default browser behavior and stopping event propagation are common tasks. Aurelia’s modifiers let you handle these declaratively:
+
+```html
+<button click.trigger:stop:prevent="validate()">Validate</button>
+```
+
+- `:stop` prevents the event from bubbling up the DOM.
+- `:prevent` cancels the default action (e.g., navigating to a link).
+
+This is a cleaner alternative to manually calling event.stopPropagation() and event.preventDefault() in your handler.
+
+3. Mouse Button Modifiers: Left, Right, Middle Clicks
+
+Sometimes, you need to handle specific mouse button clicks. Aurelia provides built-in modifiers for left, middle, and right clicks:
+
+```html
+<button click.trigger:left="select()">Select</button>
+<button click.trigger:right="showContextMenu()">Options</button>
+<button click.trigger:middle="openInNewTab()">Open in New Tab</button>
+```
+
+No need to mess with event.button—it’s all handled for you.
+
+4. Self: Restricting Events to the Element Itself
+
+By default, events bubble up the DOM tree. The self modifier ensures your handler only fires if the event originated from the element itself, not its children:
+
+```html
+<div click.trigger="onDivClick() & self">
+  <button click.trigger="onButtonClick()">Click Me</button>
+</div>
+```
+
+In this example, clicking the button will trigger onButtonClick() but not onDivClick(). This helps maintain clean, predictable behavior.
+
+## Custom Key Mappings
+
+By default, Aurelia recognizes lowercase letters (a-z) for key bindings. To add support for uppercase letters or other keys, you can extend Aurelia’s key mapping:
+
+```typescript
+import { AppTask, IKeyMapping } from 'aurelia';
+
+Aurelia.register(
+  AppTask.creating(IKeyMapping, mapping => {
+    mapping.keys.upper_k = 'K';
+  })
+);
+```
+
+With this setup, you can write:
+
+```html
+<textarea keydown.trigger:ctrl+upper_k="openSearchDialog()"></textarea>
+```
+
+This approach keeps your templates readable while maintaining support for custom key combinations.
+
+## Wrapping Up
+
+Event modifiers in Aurelia 2 are a powerful tool for simplifying event handling. They help you write cleaner, more maintainable code by moving common event logic directly into your templates. Whether you’re throttling input events, handling key combinations, or managing event propagation, modifiers have you covered.
+
+We have only just scratched the surface of what event modifiers can do. You can read more about them in the [Aurelia documentation](https://docs.aurelia.io/templates/overview/event-binding#event-modifiers).
\ No newline at end of file