```js function createPromiseWithData() { let resolveFn;

const promise = new Promise((resolve, reject) => { resolveFn = resolve; });

return { promise, resolveFn }; }

// Usage const { promise, resolveFn } = createPromiseWithData();

// Later, when you have the data you want to pass const data = 'Future data';

// Resolve the promise with the data resolveFn(data);

// Use the promise promise.then((result) => { console.log('Promise resolved with:', result); }); ```

```svelte

```

Add aliases to vite.config.ts

```js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import path from 'path';

// https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { '@': path.resolve(__dirname, './src'), '@assets': path.resolve(__dirname, './src/assets'), '@components': path.resolve(__dirname, './src/components'), }, }, plugins: [react()] }) ```

Add aliases to tsconfig.json

```js { "compilerOptions": { // ... your other compiler options "baseUrl": ".", "paths": { "@/": ["src/"], "@components/": ["src/components/"], "@assets/": ["src/assets/"] }, }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] } ````

Use alias

js import image from `@assets/image.png`

```js / * .env.development VITE_API_URL=http://localhost:1337/api/blog-posts /

/ * .env.production VITE_API_URL=https://APP.herokuapp.com/api/blog-posts /

import { error, type Load } from '@sveltejs/kit';

import { VITE_API_URL } from '$env/static/private';

export const load: Load = async () => { const res = await fetch(VITE_API_URL); const { data } = await res.json();

if (res.ok) return { blogs: data }; throw error(404, 'Unable to fetch blogs'); }; ```

const topics = await document.browsingTopics();

chrome://topics-internals

A spec to optimize ad targeting (respectful of privacy, they say... 😂🤣).

Fuck you Google with your dystopian API:

```js // document.browsingTopics() returns an array of BrowsingTopic objects. const topics = await document.browsingTopics();

// Get data for an ad creative. const response = await fetch('https://ads.example/get-creative', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(topics) });

// Get the JSON from the response. const creative = await response.json();

// Display the ad. (or not) ```

And use Chrome only in case of necessity.

Naming a thing with a meaning opposite to what the named thing is...

Google is insatiable when it regards to accessing users private data. Let's block that bullshit.

js export const load: PageServerLoad = () => { return { post: fetchPost(), streamed: { comments: fetchComments() } }; }; ```svelte

{#await data.streamed.comments} Loading... {:then value} <br />

{#each value as comment}
1. {comment}
{/each}

{/await} ```

```js // CSRF

/* @type {import('@sveltejs/kit').Config} / const config = { kit: { checkOrigin?: true, } };   export default config; ```

```js // CSP svelte.config.js

/* @type {import('@sveltejs/kit').Config} / const config = { kit: { csp: { directives: { 'script-src': ['self'] }, reportOnly: { 'script-src': ['self'] } } } };

export default config; ```

```js // Create a portal with the wikipedia page, and embed it // (like an iframe). You can also use the <portal> tag instead. portal = document.createElement('portal'); portal.src = 'https://en.wikipedia.org/wiki/World_Wide_Web'; portal.style = '...'; document.body.appendChild(portal);

// When the user touches the preview (embedded portal): // do fancy animation, e.g. expand … // and finish by doing the actual transition. // For the sake of simplicity, this snippet will navigate // on the onload event of the Portals element. portal.addEventListener('load', (evt) => { portal.activate(); });

// Adding some styles with transitions const style = document.createElement('style'); style.innerHTML = portal { position:fixed; width: 100%; height: 100%; opacity: 0; box-shadow: 0 0 20px 10px #999; transform: scale(0.4); transform-origin: bottom left; bottom: 20px; left: 20px; animation-name: fade-in; animation-duration: 1s; animation-delay: 2s; animation-fill-mode: forwards; } .portal-transition { transition: transform 0.4s; } @media (prefers-reduced-motion: reduce) { .portal-transition { transition: transform 0.001s; } } .portal-reveal { transform: scale(1.0) translateX(-20px) translateY(20px); } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }; const portal = document.createElement('portal'); // Let's navigate into the WICG Portals spec page portal.src = 'https://wicg.github.io/portals/'; // Add a class that defines the transition. Consider using // prefers-reduced-motion media query to control the animation. // https://developers.google.com/web/updates/2019/03/prefers-reduced-motion portal.classList.add('portal-transition'); portal.addEventListener('click', (evt) => { // Animate the portal once user interacts portal.classList.add('portal-reveal'); }); portal.addEventListener('transitionend', (evt) => { if (evt.propertyName == 'transform') { // Activate the portal once the transition has completed portal.activate(); } }); document.body.append(style, portal); ```

```js // Feature detection

if ('HTMLPortalElement' in window) { // If this is a platform that have Portals... const portal = document.createElement('portal'); ... } ```

js // Detect whether this page is hosted in a portal if (window.portalHost) { // Customize the UI when being embedded as a portal }

```js // Send message to the portal element const portal = document.querySelector('portal'); portal.postMessage({someKey: someValue}, ORIGIN);

// Receive message via window.portalHost window.portalHost.addEventListener('message', (evt) => { const data = evt.data.someKey; // handle the event }); ```

```html

According to Mozilla's website, <q cite="https://www.mozilla.org/en-US/about/history/details/"> Firefox 1.0 was released in 2004 and became a big success. </q>

```

```html

Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page.

```

```html

<title>HTML Standard</title>

HTML: Living Standard

Last Updated 12 July 2022

Some intro to the document.

Table of contents

…

First section

Some intro to the first section.

```

```html

Movie website

```

```html <search> <label> Find and filter your query <input type="search" id="query" /> </label> <label> <input type="checkbox" id="exact-only" /> Exact matches only </label>

Results:

</search> ```