elycruz

/**
 * Single threaded "filters" patterns.
 */
use std::borrow::{Cow, Cow::*};

pub type Filter<'a, T> = &'a dyn Fn(Cow<'a, T>) -> Cow<'a, T>;

fn filter<'a>(filters: &'a [Filter<'a, str>], value: Cow<'a, str>) -> Cow<'a, str> {
    filters.iter().rfold(value, |agg, f| f(agg))
}

elycruz

use core::fmt::Formatter;
/**
 * The goal of this example is to show a way to have algebraic types and generics
 * represent a collection of structs that can each have their own types and
 * additionally be structurally different from each other.
 * 
 * Question:  Are there less "typeful"/verbose ways of acheiving the same this?
 */
use core::fmt::{Display, Debug};
use std::borrow::Cow;

elycruz

// Note: in real world example things would work slightly differntly:
// ----
const matSymStyleSheet = new CSSStyleSheet();

// Load css for custom 'x-icon' element - In realword scenario css can be loaded using import assertions, and/or,
// directly via app facilities (sass, webpack, etc.).
fetch('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200')
  .then(res => res.text())
  .then(css => matSymStyleSheet.replace(`
${css.replace('.material-symbols-outlined', ':host .material-symbols-outlined')}

elycruz

document.body.innerHTML = `
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font: normal 1rem Arial, Sans-serif;
    }
     dialog {
       margin: 0;
       padding: 0; 

elycruz

const {log} = console,
    
    groupContent = '.'.repeat(5).split('').reduce((agg, _, i) => {
        return agg + `<item>` + 
            `<title>Item ${i}</title>` +
        `</item>`;
    }, ''),
    
    docContent = `<group>${groupContent}</group>`,
    

elycruz

document.body.innerHTML = `
<style>
  .with-overlay {
    display: inline-block;
    border: 1px solid;
  }

  .with-overlay {
    position: relative;
  }

elycruz

/**
 * Storing flags in one variable and checking for 
 * enabled/disabled states using
 * bitwise operators.
 * @author elycruz
 * @reference:
 * - https://www.youtube.com/watch?v=RRyxCmLX_ag
 * - https://www.youtube.com/watch?v=6hnLMnid1M0
 */

elycruz

const isset = x => x !== null && x !== undefined,

    {log, error} = console,
    
    xInputName = 'x-input',
    
    xInputStyles = `
:host {
    background-color: green;
}

elycruz

/**
 * Exploring animation keyframes with display `none` etc.
 */

document.body.innerHTML = `
<style>

@keyframes slide-in {
  0% {
    display: none;

elycruz

document.body.innerHTML = `
<style>
table {
  position: relative;
  overflow: auto;
}
table, td, th {
  border: 1px solid;
}
thead th {