yfi

export const highlightFuseResult = (result) => {

    let indices = result.matches
            .map((match) => {
                return match.indices;
            })
            .flat();

                   
    let highlighted = indices

yfi

// 1. Create a custom field ie, parsed_blocks and expose it to wpgraphql. 
// 2. Add a 'save_post' or 'wp_insert_post_data' filter. 
// 3. in the filter callback populat the field with:

$parsed_blocks = json_encode(parse_blocks($post->post_content));

// with acf:

update_field('parsed_blocks', $parsed_blocks, $post->ID);

yfi

<?php

$args = array (
    'posts_per_page' => -1,
    'post__in' => $ids,
    'orderby' => 'post__in' 
);

yfi

// Using async functions / promises inside loops

let newcollection = await Promise.all(
    collection.map(async(item) => {
        let somevar = await asyncFunction(item);
        let result = {...item, ...somevar};
        return result;
    })
);
console.log(newcollection);

yfi

Define global vars in theme.css

:root, :host{
  --global-padding: 1em;
}

Then in svelte components

yfi

‎‎​

yfi

https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/
https://open-wc.org/guides/community/component-libraries/

https://helixdesignsystem.github.io/helix-ui/components/stepper/
https://kor-ui.com/components/tag
https://shoelace.style/components/textarea
    (skeleton image comparer)

https://opensource.adobe.com/spectrum-web-components/components/
    (adobe web components)

yfi

export const measureScrollbarWidth = () => {

    var scrollDiv = document.createElement("div");
    scrollDiv.className = "scrollbar-measure";

    scrollDiv.style.width = '100px';
    scrollDiv.style.height = '100px';
    scrollDiv.style.overflow = "scroll";
    scrollDiv.style.position = "absolute";
    scrollDiv.style.top = "-9999px";

yfi

<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
    <iframe title="" frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/V4IGYvAm1nI?autoplay=1&controls=0&showinfo=0&autohide=1&mute=1&modestbranding=0&branding=0&showinfo=0&wmode=transparent&branding=0&autohide=0&rel=0&enablejsapi=1"
    />
</div>

<style>

</style>

yfi

  @custom-media --small (width <=768px);
  /* @custom-media --medium (width < 900px); */
  
  @custom-media --tablet (width > 768px);
  @custom-media --desktop (width > 1024px);
  @custom-media --xl (width < 900px);
  @custom-selector --heading h1,
  h2,
  h3,
  h4,