+```
+
+The inverse is also available to you. Suppose instead of `open`, we use a variable with the opposite value: `closed`.
+
+```
+
+
+
+n
+
+
+n
+```
+
+#### [Class object syntax](#class-object-syntax)
+
+Alpine offers an additional syntax for toggling classes if you prefer. By passing a JavaScript object where the classes are the keys and booleans are the values, Alpine will know which classes to apply and which to remove. For example:
+
+```
+
+```
+
+This technique offers a unique advantage to other methods. When using object-syntax, Alpine will NOT preserve original classes applied to an element's `class` attribute.
+
+For example, if you wanted to apply the "hidden" class to an element before Alpine loads, AND use Alpine to toggle its existence you can only achieve that behavior using object-syntax:
+
+```
+
+```
+
+In case that confused you, let's dig deeper into how Alpine handles `x-bind:class` differently than other attributes.
+
+#### [Special behavior](#special-behavior)
+
+`x-bind:class` behaves differently than other attributes under the hood.
+
+Consider the following case.
+
+```
+
+```
+
+If "class" were any other attribute, the `:class` binding would overwrite any existing class attribute, causing `opacity-50` to be overwritten by either `hidden` or `''`.
+
+However, Alpine treats `class` bindings differently. It's smart enough to preserve existing classes on an element.
+
+For example, if `hide` is true, the above example will result in the following DOM element:
+
+```
+
+```
+
+If `hide` is false, the DOM element will look like:
+
+```
+
+```
+
+This behavior should be invisible and intuitive to most users, but it is worth mentioning explicitly for the inquiring developer or any special cases that might crop up.
+
+### [Binding styles](#binding-styles)
+
+Similar to the special syntax for binding classes with JavaScript objects, Alpine also offers an object-based syntax for binding `style` attributes.
+
+Just like the class objects, this syntax is entirely optional. Only use it if it affords you some advantage.
+
+```
+
+
+
+n
+
+
+n
+```
+
+Conditional inline styling is possible using expressions just like with x-bind:class. Short circuit operators can be used here as well by using a styles object as the second operand.
+
+```
+
+
+
+n
+
+
+n
+```
+
+One advantage of this approach is being able to mix it in with existing styles on an element:
+
+```
+
+
+
+n
+
+
+n
+```
+
+And like most expressions in Alpine, you can always use the result of a JavaScript expression as the reference:
+
+```
+
+
+
+n
+
+
+n
+
+
+n
+
+
+n
+
+
+n
+
+
+n
+```
+
+### [Binding Alpine Directives Directly](#bind-directives)
+
+`x-bind` allows you to bind an object of directives to an element.
+
+For example, you can use it to dynamically bind a directive like `@click`:
+
+```
+
+
+
+n
+
+
+n
+```
+
+In this example, `:click` is bound to the `open` variable. When you click the button, it will toggle the value of `open`.
+
+This feature can also be used with the shorthand syntax:
+
+```
+
+```
+
+[→ Read more about `x-on`](/directives/on)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev/)
\ No newline at end of file
diff --git a/offline-docs/alpinejs/directives/cloak.md b/offline-docs/alpinejs/directives/cloak.md
new file mode 100644
index 0000000..31e09c2
--- /dev/null
+++ b/offline-docs/alpinejs/directives/cloak.md
@@ -0,0 +1,51 @@
+# Alpine.js Documentation - Directives
+
+Alpine directives are attributes that you can add to HTML elements to give them special behavior.
+
+## [x-cloak](/directives/cloak)
+
+Sometimes, when you're using AlpineJS for a part of your template, there is a "blip" where you might see your uninitialized template after the page loads, but before Alpine loads.
+
+`x-cloak` addresses this scenario by hiding the element it's attached to until Alpine is fully loaded on the page.
+
+For `x-cloak` to work however, you must add the following CSS to the page.
+
+```
+[x-cloak] { display: none !important; }
+```
+
+The following example will hide the `` tag until its `x-show` is specifically set to true, preventing any "blip" of the hidden element onto screen as Alpine loads.
+
+```
+This will not 'blip' onto screen at any point
+```
+
+`x-cloak` doesn't just work on elements hidden by `x-show` or `x-if`: it also ensures that elements containing data are hidden until the data is correctly set. The following example will hide the `` tag until Alpine has set its text content to the `message` property.
+
+```
+
+```
+
+When Alpine loads on the page, it removes all `x-cloak` property from the element, which also removes the `display: none;` applied by CSS, therefore showing the element.
+
+## Alternative to global syntax
+
+If you'd like to achieve this same behavior, but avoid having to include a global style, you can use the following cool, but admittedly odd trick:
+
+```
+
+
+
+n
+
+
+n
+```
+
+This will achieve the same goal as `x-cloak` by just leveraging the way `x-if` works.
+
+Because `` elements are "hidden" in browsers by default, you won't see the `` until Alpine has had a chance to render the `x-if="true"` and show it.
+
+Again, this solution is not for everyone, but it's worth mentioning for special cases.
+
+Code highlighting provided by [Torchlight](https://torchlight.dev/)
\ No newline at end of file
diff --git a/offline-docs/alpinejs/directives/data.md b/offline-docs/alpinejs/directives/data.md
new file mode 100644
index 0000000..e806a1b
--- /dev/null
+++ b/offline-docs/alpinejs/directives/data.md
@@ -0,0 +1,254 @@
+# Alpine.js Documentation - Directives
+
+Alpine directives are attributes that you can add to HTML elements to give them special behavior.
+
+## [x-data](/directives/data)
+
+Everything in Alpine starts with the `x-data` directive.
+
+`x-data` defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference.
+
+Here's an example of a contrived dropdown component:
+
+```
+
+
+
+nDropdown Contents...
+
+
+n
+
+
+n
+
+
+n
+
+
+n
+```
+
+Don't worry about the other directives in this example (`@click` and `x-show`), we'll get to those in a bit. For now, let's focus on `x-data`.
+
+### [Scope](#scope)
+
+Properties defined in an `x-data` directive are available to all element children. Even ones inside other, nested `x-data` components.
+
+For example:
+
+```
+
+
+
+nContent...
+
+
+n
+
+
+n
+
+
+n
+
+
+n
+```
+
+### [Methods](#methods)
+
+Because `x-data` is evaluated as a normal JavaScript object, in addition to state, you can store methods and even getters.
+
+For example, let's extract the "Toggle Content" behavior into a method on `x-data`.
+
+```
+
+
+
+n
+
+
+n
+
+
+n
+
+
+n
+
+
+n
+
+
+n
+
+
+n
+
+
+n
+```
+
+Notice the added `toggle() { this.open = ! this.open }` method on `x-data`. This method can now be called from anywhere inside the component.
+
+You'll also notice the usage of `this.` to access state on the object itself. This is because Alpine evaluates this data object like any standard JavaScript object with a `this` context.
+
+If you prefer, you can leave the calling parenthesis off of the `toggle` method completely. For example:
+
+```
+
+
+
+n
+
+
+n
+
+
+n
+```
+
+### [Getters](#getters)
+
+JavaScript [getters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) are handy when the sole purpose of a method is to return data based on other state.
+
+Think of them like "computed properties" (although, they are not cached like Vue's computed properties).
+
+Let's refactor our component to use a getter called `isOpen` instead of accessing `open` directly.
+
+```
+
+
+
+nContent...
+
+
+n
+
+
+n
+
+
+n
+
+
+n
+```
+
+Notice the "Content" now depends on the `isOpen` getter instead of the `open` property directly.
+
+In this case there is no tangible benefit. But in some cases, getters are helpful for providing a more expressive syntax in your components.
+
+### [Data-less components](#data-less-components)
+
+Occasionally, you want to create an Alpine component, but you don't need any data.
+
+In these cases, you can always pass in an empty object.
+
+```
+
+
+
+nContent...
+
+
+n
+
+
+n
+```
+
+However, if you wish, you can also eliminate the attribute value entirely if it looks better to you.
+
+```
+
+```
+
+### [Single-element components](#single-element-components)
+
+Sometimes you may only have a single element inside your Alpine component, like the following:
+
+```
+`elements accordingly.
+
+### [Accessing indexes](#accessing-indexes)
+
+If you need to access the index of each item in the iteration, you can do so using the `([item], [index]) in [items]` syntax like so:
+
+```
+
+
+
+n
+
+
+n
+```
+
+In these cases, you can declare `x-data` directly on that single element:
+
+```
+
+```
+
+### [Re-usable Data](#re-usable-data)
+
+If you find yourself duplicating the contents of `x-data`, or you find the inline syntax verbose, you can extract the `x-data` object out to a dedicated component using `Alpine.data`.
+
+Here's a quick example:
+
+```
+
+
+
+n
+
+
+n
+
+
+n
+```
+
+[→ Read more about `Alpine.data(...)`](/globals/alpine-data)
+
+Code highlighting provided by [Torchlight](https://torchlight.dev/)
\ No newline at end of file
diff --git a/offline-docs/alpinejs/directives/effect.md b/offline-docs/alpinejs/directives/effect.md
new file mode 100644
index 0000000..b8a8858
--- /dev/null
+++ b/offline-docs/alpinejs/directives/effect.md
@@ -0,0 +1,25 @@
+# Alpine.js Documentation - Directives
+
+Alpine directives are attributes that you can add to HTML elements to give them special behavior.
+
+## [x-effect](/directives/effect)
+
+`x-effect` is a useful directive for re-evaluating an expression when one of its dependencies change. You can think of it as a watcher where you don't have to specify what property to watch, it will watch all properties used within it.
+
+If this definition is confusing for you, that's ok. It's better explained through an example:
+
+```
+
+
+
+nContent...
+
+
+n
+
+
+n
+
+
+n
+
+
+n
+```
+
+When this component is loaded, the `x-effect` expression will be run and "Hello" will be logged into the console.
+
+Because Alpine knows about any property references contained within `x-effect`, when the button is clicked and `label` is changed, the effect will be re-triggered and "Hello World!" will be logged to the console.
+
+Code highlighting provided by [Torchlight](https://torchlight.dev/)
\ No newline at end of file
diff --git a/offline-docs/alpinejs/directives/for.md b/offline-docs/alpinejs/directives/for.md
new file mode 100644
index 0000000..204de03
--- /dev/null
+++ b/offline-docs/alpinejs/directives/for.md
@@ -0,0 +1,181 @@
+# Alpine.js Documentation - Directives
+
+Alpine directives are attributes that you can add to HTML elements to give them special behavior.
+
+## [x-for](/directives/for)
+
+Alpine's `x-for` directive allows you to create DOM elements by iterating through a list. Here's a simple example of using it to create a list of colors based on an array.
+
+```
+-
+
+
+n
+
+
+n
+
+
+n
+
+
+n
-
+
+
+n
+
+
+n
- + + +n: + + +n + + +n + + +n
-
+
+
+n
+
+
+n
+
+
+n
+
+
+n
-
+
+
+n
+
+
+n
- + + +n + + +n + + +n + + +n + + +n
-
+
+
+n
+
+
+n
+
+
+n
+
+
+n
+ + +nThe next color is + + +n
+ + +n +``` + +Code highlighting provided by [Torchlight](https://torchlight.dev/) \ No newline at end of file diff --git a/offline-docs/alpinejs/directives/html.md b/offline-docs/alpinejs/directives/html.md new file mode 100644 index 0000000..f2731ad --- /dev/null +++ b/offline-docs/alpinejs/directives/html.md @@ -0,0 +1,28 @@ +# Alpine.js Documentation - Directives + +Alpine directives are attributes that you can add to HTML elements to give them special behavior. + +## [x-html](/directives/html) + +`x-html` sets the "innerHTML" property of an element to the result of a given expression. + +> ⚠️ Only use on trusted content and never on user-provided content. ⚠️ +> Dynamically rendering HTML from third parties can easily lead to XSS vulnerabilities. + +Here's a basic example of using `x-html` to display a user's username. + +``` +
+
+
+nUsername:
+
+
+n
+```
+
+Username:
+
+Now the `` tag's inner HTML will be set to "**calebporzio**".
+
+Code highlighting provided by [Torchlight](https://torchlight.dev/)
\ No newline at end of file
diff --git a/offline-docs/alpinejs/directives/if.md b/offline-docs/alpinejs/directives/if.md
new file mode 100644
index 0000000..4546b1f
--- /dev/null
+++ b/offline-docs/alpinejs/directives/if.md
@@ -0,0 +1,29 @@
+# Alpine.js Documentation - Directives
+
+Alpine directives are attributes that you can add to HTML elements to give them special behavior.
+
+## [x-if](/directives/if)
+
+`x-if` is used for toggling elements on the page, similarly to `x-show`, however it completely adds and removes the element it's applied to rather than just changing its CSS display property to "none".
+
+Because of this difference in behavior, `x-if` should not be applied directly to the element, but instead to a `` tag that encloses the element. This way, Alpine can keep a record of the element once it's removed from the page.
+
+```
+
+
+
+nContents...
+
+
+n
+```
+
+> Despite not being included in the above snippet, `x-if` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
+## Caveats
+
+Unlike `x-show`, `x-if`, does NOT support transitioning toggles with `x-transition`.
+
+`` tags can only contain one root element.
+
+Code highlighting provided by [Torchlight](https://torchlight.dev/)
\ No newline at end of file
diff --git a/offline-docs/alpinejs/directives/ignore.md b/offline-docs/alpinejs/directives/ignore.md
new file mode 100644
index 0000000..fb2d9bb
--- /dev/null
+++ b/offline-docs/alpinejs/directives/ignore.md
@@ -0,0 +1,29 @@
+# Alpine.js Documentation - Directives
+
+Alpine directives are attributes that you can add to HTML elements to give them special behavior.
+
+## [x-ignore](/directives/ignore)
+
+By default, Alpine will crawl and initialize the entire DOM tree of an element containing `x-init` or `x-data`.
+
+If for some reason, you don't want Alpine to touch a specific section of your HTML, you can prevent it from doing so using `x-ignore`.
+
+```
+
+
+
+n
+```
+
+In the above example, the `` tag will not contain "From Alpine" because we told Alpine to ignore the contents of the `div` completely.
+
+Code highlighting provided by [Torchlight](https://torchlight.dev/)
diff --git a/offline-docs/alpinejs/directives/init.md b/offline-docs/alpinejs/directives/init.md
new file mode 100644
index 0000000..a8193be
--- /dev/null
+++ b/offline-docs/alpinejs/directives/init.md
@@ -0,0 +1,126 @@
+# Alpine.js Documentation - Directives
+
+Alpine directives are attributes that you can add to HTML elements to give them special behavior.
+
+## [x-init](/directives/init)
+
+The `x-init` directive allows you to hook into the initialization phase of any element in Alpine.
+
+```
+
+```
+
+In the above example, "I'm being initialized!" will be output in the console before it makes further DOM updates.
+
+Consider another example where `x-init` is used to fetch some JSON and store it in `x-data` before the component is processed.
+
+```
+
+
+
+n
+
+
+n
+
+
+n...
+```
+
+### [$nextTick](#next-tick)
+
+Sometimes, you want to wait until after Alpine has completely finished rendering to execute some code.
+
+This would be something like `useEffect(..., [])` in react, or `mount` in Vue.
+
+By using Alpine's internal `$nextTick` magic, you can make this happen.
+
+```
+
+```
+
+### [Standalone `x-init`](#standalone-x-init)
+
+You can add `x-init` to any elements inside or outside an `x-data` HTML block. For example:
+
+```
+
+
+
+n
+
+
+n
+
+
+n
+```
+
+### [Auto-evaluate init() method](#auto-evaluate-init-method)
+
+If the `x-data` object of a component contains an `init()` method, it will be called automatically. For example:
+
+```
+...
+
+
+```
+
+This is also the case for components that were registered using the `Alpine.data()` syntax.
+
+```
+Alpine.data('dropdown', () => ({
+
+
+ninit() {
+
+
+nconsole.log('I will get evaluated when initializing each "dropdown" component.')
+
+
+n},
+
+
+n}))
+```
+
+If you have both an `x-data` object containing an `init()` method and an `x-init` directive, the `x-data` method will be called before the directive.
+
+```
+
+
+...
+
+
+```
+
+Code highlighting provided by [Torchlight](https://torchlight.dev/)
\ No newline at end of file
diff --git a/offline-docs/alpinejs/directives/model.md b/offline-docs/alpinejs/directives/model.md
new file mode 100644
index 0000000..f8c419d
--- /dev/null
+++ b/offline-docs/alpinejs/directives/model.md
@@ -0,0 +1,275 @@
+# Alpine.js Documentation - Directives
+
+Alpine directives are attributes that you can add to HTML elements to give them special behavior.
+
+## [x-model](/directives/model)
+
+`x-model` allows you to bind the value of an input element to Alpine data.
+
+Here's a simple example of using `x-model` to bind the value of a text field to a piece of data in Alpine.
+
+```
+
+
+
+n
+
+
+n
+
+
+n
+```
+
+Now as the user types into the text field, the `message` will be reflected in the `` tag.
+
+`x-model` is two-way bound, meaning it both "sets" and "gets". In addition to changing data, if the data itself changes, the element will reflect the change.
+
+We can use the same example as above but this time, we'll add a button to change the value of the `message` property.
+
+```
+
+
+
+n
+
+
+n
+
+
+n
+```
+
+Now when the `
+```
+
+> `x-on` can only listen for events with lower case names, as HTML attributes are case-insensitive. Writing `x-on:CLICK` will listen for an event named `click`. If you need to listen for a custom event with a camelCase name, you can use the [`.camel` helper](#camel) to work around this limitation. Alternatively, you can use [`x-bind`](about:/directives/bind#bind-directives) to attach an `x-on` directive to an element in javascript code (where case will be preserved).
+
+### [Shorthand syntax](#shorthand-syntax)
+
+If `x-on:` is too verbose for your tastes, you can use the shorthand syntax: `@`.
+
+Here's the same component as above, but using the shorthand syntax instead:
+
+```
+
+```
+
+> Despite not being included in the above snippet, `x-on` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
+
+### [The event object](#the-event-object)
+
+If you wish to access the native JavaScript event object from your expression, you can use Alpine's magic `$event` property.
+
+```
+
+```
+
+In addition, Alpine also passes the event object to any methods referenced without trailing parenthesis. For example:
+
+```
+
+
+
+
+```
+
+### [Keyboard events](#keyboard-events)
+
+Alpine makes it easy to listen for `keydown` and `keyup` events on specific keys.
+
+Here's an example of listening for the `Enter` key inside an input element.
+
+```
+
+```
+
+You can also chain these key modifiers to achieve more complex listeners.
+
+Here's a listener that runs when the `Shift` key is held and `Enter` is pressed, but not when `Enter` is pressed alone.
+
+```
+
+```
+
+You can directly use any valid key names exposed via [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) as modifiers by converting them to kebab-case.
+
+```
+
+```
+
+For easy reference, here is a list of common keys you may want to listen for.
+
+| Modifier | Keyboard Key |
+| --- | --- |
+| `.shift` | Shift |
+| `.enter` | Enter |
+| `.space` | Space |
+| `.ctrl` | Ctrl |
+| `.cmd` | Cmd |
+| `.meta` | Cmd on Mac, Windows key on Windows |
+| `.alt` | Alt |
+| `.up` `.down` `.left` `.right` | Up/Down/Left/Right arrows |
+| `.escape` | Escape |
+| `.tab` | Tab |
+| `.caps-lock` | Caps Lock |
+| `.equal` | Equal, `=` |
+| `.period` | Period, `.` |
+| `.comma` | Comma, `,` |
+| `.slash` | Forward Slash, `/` |
+
+### [Mouse events](#mouse-events)
+
+Like the above Keyboard Events, Alpine allows the use of some key modifiers for handling `click` events.
+
+| Modifier | Event Key |
+| --- | --- |
+| `.shift` | shiftKey |
+| `.ctrl` | ctrlKey |
+| `.cmd` | metaKey |
+| `.meta` | metaKey |
+| `.alt` | altKey |
+
+These work on `click`, `auxclick`, `context` and `dblclick` events, and even `mouseover`, `mousemove`, `mouseenter`, `mouseleave`, `mouseout`, `mouseup` and `mousedown`.
+
+Here's an example of a button that changes behaviour when the `Shift` key is held down.
+
+```
+
+```
+
+> Note: Normal click events with some modifiers (like `ctrl`) will automatically become `contextmenu` events in most browsers. Similarly, `right-click` events will trigger a `contextmenu` event, but will also trigger an `auxclick` event if the `contextmenu` event is prevented.
+
+### [Custom events](#custom-events)
+
+Alpine event listeners are a wrapper for native DOM event listeners. Therefore, they can listen for ANY DOM event, including custom events.
+
+Here's an example of a component that dispatches a custom DOM event and listens for it as well.
+
+```
+
+
+
+
+
+
+
+```
+
+When the button is clicked, the `@foo` listener will be called.
+
+Because the `.dispatchEvent` API is verbose, Alpine offers a `$dispatch` helper to simplify things.
+
+Here's the same component re-written with the `$dispatch` magic property.
+
+```
+
+
+
+
+
+
+
+```
+
+[→ Read more about `$dispatch`](/magics/dispatch)
+
+### [Modifiers](#modifiers)
+
+Alpine offers a number of directive modifiers to customize the behavior of your event listeners.
+
+#### [.prevent](#prevent)
+
+`.prevent` is the equivalent of calling `.preventDefault()` inside a listener on the browser event object.
+
+```
+
+```
+
+In the above example, with the `.prevent`, clicking the button will NOT submit the form to the `/foo` endpoint. Instead, Alpine's listener will handle it and "prevent" the event from being handled any further.
+
+#### [.stop](#stop)
+
+Similar to `.prevent`, `.stop` is the equivalent of calling `.stopPropagation()` inside a listener on the browser event object.
+
+```
+
+
+
+
+
+
+
+```
+
+In the above example, clicking the button WON'T log the message. This is because we are stopping the propagation of the event immediately and not allowing it to "bubble" up to the `` with the `@click` listener on it.
+
+#### [.outside](#outside)
+
+`.outside` is a convenience helper for listening for a click outside of the element it is attached to. Here's a simple dropdown component example to demonstrate:
+
+```
+![]()
` tag inside the `
+
+
+
+
+
+
+```
+
+In the above example, after showing the dropdown contents by clicking the "Toggle" button, you can close the dropdown by clicking anywhere on the page outside the content.
+
+This is because `.outside` is listening for clicks that DON'T originate from the element it's registered on.
+
+> It's worth noting that the `.outside` expression will only be evaluated when the element it's registered on is visible on the page. Otherwise, there would be nasty race conditions where clicking the "Toggle" button would also fire the `@click.outside` handler when it is not visible.
+
+#### [.window](#window)
+
+When the `.window` modifier is present, Alpine will register the event listener on the root `window` object on the page instead of the element itself.
+
+```
+
+
+
+Contents...
+
+
+
+
+
+...
+```
+
+The above snippet will listen for the "escape" key to be pressed ANYWHERE on the page.
+
+Adding `.window` to listeners is extremely useful for these sorts of cases where a small part of your markup is concerned with events that take place on the entire page.
+
+#### [.document](#document)
+
+`.document` works similarly to `.window` only it registers listeners on the `document` global, instead of the `window` global.
+
+#### [.once](#once)
+
+By adding `.once` to a listener, you are ensuring that the handler is only called ONCE.
+
+```
+
+```
+
+#### [.debounce](#debounce)
+
+Sometimes it is useful to "debounce" an event handler so that it only is called after a certain period of inactivity (250 milliseconds by default).
+
+For example if you have a search field that fires network requests as the user types into it, adding a debounce will prevent the network requests from firing on every single keystroke.
+
+```
+
+```
+
+Now, instead of calling `fetchResults` after every keystroke, `fetchResults` will only be called after 250 milliseconds of no keystrokes.
+
+If you wish to lengthen or shorten the debounce time, you can do so by trailing a duration after the `.debounce` modifier like so:
+
+```
+
+```
+
+Now, `fetchResults` will only be called after 500 milliseconds of inactivity.
+
+#### [.throttle](#throttle)
+
+`.throttle` is similar to `.debounce` except it will release a handler call every 250 milliseconds instead of deferring it indefinitely.
+
+This is useful for cases where there may be repeated and prolonged event firing and using `.debounce` won't work because you want to still handle the event every so often.
+
+For example:
+
+```
+...
+```
+
+The above example is a great use case of throttling. Without `.throttle`, the `handleScroll` method would be fired hundreds of times as the user scrolls down a page. This can really slow down a site. By adding `.throttle`, we are ensuring that `handleScroll` only gets called every 250 milliseconds.
+
+> Fun Fact: This exact strategy is used on this very documentation site to update the currently highlighted section in the right sidebar.
+
+Just like with `.debounce`, you can add a custom duration to your throttled event:
+
+```
+...
+```
+
+Now, `handleScroll` will only be called every 750 milliseconds.
+
+#### [.self](#self)
+
+By adding `.self` to an event listener, you are ensuring that the event originated on the element it is declared on, and not from a child element.
+
+```
+
+```
+
+In the above example, we have an `