```js // Fetch and return the promise with the abort controller as controller property function fetchWithController(input, init) { // create the controller let controller = new AbortController() // use the signal to hookup the controller to the fetch request let signal = controller.signal // extend arguments init = Object.assign({signal}, init) // call the fetch request let promise = fetch(input, init) // attach the controller promise.controller = controller return promise }

// and then replace a normal fetch with

let promise = fetchWithController('/') promise.controller.abort() ```

```html

<figure> <figcaption>Maggie loves being outside off-leash.</figcaption> </figure>

css figure:has(figcaption) { background: white; padding: 0.6rem; } ```

Sanitizing iframes

```html

<iframe id="webpage"></iframe>

<br/> <button onclick="sanitize()">Sanitize</button>

<script> function sanitize() { // Create a sanitizer object with the default config const sanitizer = new Sanitizer(); // Find the iframe node const iframe = document.getElementById('webpage'); // Sanitize the iframe's document node const sanitizedFrameNodes = sanitizer.sanitize(iframe.contentWindow.document); iframe.replaceChildren(sanitizeFrameNodes); } </script>

```

```xml

<entry xmlns='http://www.w3.org/2005/Atom'> <id>tag:example.com,2009:cmt-0.44775718</id> <author> <name>test@example.com</name <uri>bob@example.com</uri> </author> <thr:in-reply-to xmlns:thr='http://purl.org/syndication/thread/1.0' ref='tag:blogger.com,1999:blog-893591374313312737.post-3861663258538857954'> tag:blogger.com,1999:blog-893591374313312737.post-3861663258538857954</thr:in-reply-to> <content>Salmon swim upstream!</content> <title>Salmon swim upstream!</title> <updated>2009-12-18T20:04:03Z</updated> </entry> ```

```js import { useMutation, useQuery, useQueryClient } from 'react-query';

export default function usePersistentContext(key) { const queryClient = useQueryClient();

const { data } = useQuery(key, () => localStorage.getItem(key));

const { mutateAsync: setValue } = useMutation( (value) => localStorage.setItem(key, value), { onMutate: (mutatedData) => { const current = data; queryClient.setQueryData(key, mutatedData); return current; }, onError: (_, __, rollback) => { queryClient.setQueryData(key, rollback); }, } );

return [data, setValue]; } ```

js function SetContext() { const [value, setValue] = usePersistentContext('item_context'); return ( <button onClick={() => setValue(value === 'on' ? 'off' : 'on')}> Click me {value} </button> ); }