From 8653ae94c8257be55560037e930b597538955c61 Mon Sep 17 00:00:00 2001 From: tilbot Date: Fri, 8 Dec 2023 05:45:39 +0000 Subject: [PATCH] Update README.md or rss.xml --- README.md | 3 ++- rss.xml | 64 +++++++++++++++---------------------------------------- 2 files changed, 19 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index 6c28d16..df6ead4 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Subscribe via [RSS](https://jakelazaroff.github.io/til/rss.xml)! --- -39 TILs so far: +40 TILs so far: ## bash @@ -54,6 +54,7 @@ Subscribe via [RSS](https://jakelazaroff.github.io/til/rss.xml)! ## htmx - [Attach attributes to dynamically added elements](/htmx/attach-attributes-to-dynamically-added-elements.md) +- [Load modal content when a Shoelace dialog opens](/htmx/load-modal-content-when-shoelace-dialog-opens.md) ## javascript diff --git a/rss.xml b/rss.xml index 019fd53..44cdce0 100644 --- a/rss.xml +++ b/rss.xml @@ -5,6 +5,23 @@ A collection of useful things I've learned. https://github.com/jakelazaroff/til +https://github.com/jakelazaroff/til/blob/main/htmx/load-modal-content-when-shoelace-dialog-opens.md +https://github.com/jakelazaroff/til/blob/main/htmx/load-modal-content-when-shoelace-dialog-opens.md +TIL (htmx): Load modal content when a Shoelace dialog opens +Fri, 08 Dec 2023 05:45:20 GMT +<p>This is pretty idiosyncratic to <a href="https://htmx.org">HTMX</a> and <a href="https://shoelace.style">Shoelace</a>, but it&#39;s a neat pattern so I&#39;m documenting it here.</p> +<p>HTMX lets you make an HTTP request in response to an event and insert it elsewhere into the DOM. Shoelace&#39;s <a href="https://shoelace.style/components/dialog">Dialog</a> component fires an <code>sl-show</code> event when the dialog opens. These can be combined to automatically load modal content when the modal opens:</p> +<pre><code class="language-html">&lt;sl-dialog hx-get=&quot;/modal/content/&quot; hx-trigger=&quot;sl-show&quot;&gt;&lt;/sl-dialog&gt; +</code></pre> +<p>If parts of the modal don&#39;t need to be loaded via HTTP — for example, the title — <code>hx-target</code> can be used to replace only the modal content:</p> +<pre><code class="language-html">&lt;sl-dialog hx-get=&quot;/modal/content/&quot; hx-trigger=&quot;sl-show&quot; hx-target=&quot;find .content&quot;&gt; + &lt;span slot=&quot;label&quot;&gt;My Modal&lt;/span&gt; + &lt;div class=&quot;content&quot;&gt; +&lt;/sl-dialog&gt; +</code></pre> + + + https://github.com/jakelazaroff/til/blob/main/typescript/assert-that-a-variable-is-not-null-or-undefined.md https://github.com/jakelazaroff/til/blob/main/typescript/assert-that-a-variable-is-not-null-or-undefined.md TIL (typescript): Assert that a variable is not `null` or `undefined` @@ -246,52 +263,5 @@ URL.revokeObjectURL(url); </code></pre> - -https://github.com/jakelazaroff/til/blob/main/svelte/bail-out-of-a-reactive-block.md -https://github.com/jakelazaroff/til/blob/main/svelte/bail-out-of-a-reactive-block.md -TIL (svelte): Bail out of a reactive block -Fri, 11 Aug 2023 06:11:00 GMT -<p>In Svelte, you can <a href="https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive">prefix a block with <code>$:</code> to mark it as reactive</a>, which means it will re-run whenever any outside variables referenced within the block change. It performs the same function as <a href="https://react.dev/reference/react/useEffect"><code>useEffect</code> in React</a> or <a href="https://www.solidjs.com/tutorial/introduction_effects"><code>createEffect</code> in Solid</a>.</p> -<p>The difference is that with React and Solid, the &quot;effect&quot; is performed by a function, which means it&#39;s possible to &quot;bail out&quot; by returning early. Here&#39;s a contrived React example:</p> -<pre><code class="language-jsx">function ExampleComponent({ shouldRun }) { - useEffect(() =&gt; { - if (!shouldRun) return; - - // effect code goes here - }, [shouldRun]); - - // ... -} -</code></pre> -<p>With Svelte, however, reactive blocks execute at the top level of the module, <a href="http://es5.github.io/#x12.9">where <code>return</code> statements aren&#39;t allowed</a>:</p> -<blockquote> -<p>An ECMAScript program is considered syntactically incorrect if it contains a <code>return</code> statement that is not within a <code>FunctionBody</code>.</p> -</blockquote> -<p>It doesn&#39;t seem to be documented anywhere, but Svelte lets you add an <code>if</code> statement before the reactive block in order to execute it conditionally. Variables referenced within the condition will also be tracked reactively, even if they&#39;re not referenced within the block itself.</p> -<pre><code class="language-html">&lt;script&gt; - export let shouldRun; - - $: if (shouldRun) { - // effect code goes here - } -&lt;/script&gt; -</code></pre> -<p>If you have multiple conditions, or need to run some logic within the reactive block before bailing out, you can take advantage of the fact that <code>$:</code> uses <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label">JS label syntax</a>, and use the <code>break</code> statement to bail out of the block:</p> -<pre><code class="language-html">&lt;script&gt; - export let shouldRun; - - $: { - if (!shouldRun) break $; - - let shouldContinueRunning; - // logic to calculate `shouldContinueRunning` goes here - if (!shouldContinueRunning) break $; - - // effect code goes here - } -&lt;/script&gt; -</code></pre> - - \ No newline at end of file