/ Gists

Gists

On gists

Baby wolf codes - advanced JS tips

•
Popular ⭐ JavaScript

tips.js #

// Destructure into multiple variables
const obj = { val: 1 };
const { val: a, val: b, val } = obj;

console.log(a); // -> 1
console.log(b); // -> 1
console.log(val); // ->



// Chaining catch in Promise
const somePromise = async () => Promise.reject('error');
somePromise()
    .then(e => {
        //
    })
    .catch(e => {
        throw new Error('error happened');
    })
    .catch(e => {
        console.log('hi ' + e); // hi Error
    });


// Multiple handlers for Promise
async function add(a, b) {
    return a + b;
}
const promise = add(1, 2);
promise.then(e => `Result 1: ${e}`);
promise.then(e => `Result 2: ${e}`);
// -> Result 1: 3
// -> Result 2: 3



// Mixed promise handler liky try catch
async function someFunction() {
    const res = await somePromise().catch(err => {
        /* handle */
    });
}



// Advanced default params  
function test({ val = -1 } = {}) {
    console.log(val);
}
test(); // -> -1
test({}); // -> -1
test({ val: 123 }); // -> 12


// Generate compact numbers
const formatter = Intl.NumberFormat('en',{ notation: 'compact' });
formatter.format('123'); // -> 123
formatter.format('1234'); // -> 1.2K
formatter.format('1235678'); // -> 1.2M
formatter.format('1235678901'); // -> 1.2B


//Default parameters previously declared
function test(x, y, z = x + y) {
    console.log(z);
}
test(1, 1, 1); // -> 1
test(1, 1); // -> 2



// Additional arguments to setTimeout()
function callback(value) {
    console.log(value);
}
setTimeout(callback, 1000, 5);
// -> Prints '5' after 1 second


// matchMedia
const query = window.matchMedia('(max-width: 600px)');
console.log('init -> ' + +query.matches)
query.addEventListener('change', event => {
console.log('change -> ' + +query.matches)
})


// promises
async function add(a, b) {
return a + b;
}
function addAndDouble(a, b) {
return add(a, b).then(res => res * 2);
}
addAndDouble(1, 2).then(res => {
console.log(res); // -> 6
})
On gists

Latte component

Nette Nette-Latte

any.latte #

<!-- component definition  -->
{define badge, bool $show = true, string $title = '', $class = null}
	<span class="badge ms-2 font-size-small {$class ?? 'bg-body-secondary text-body'}" n:if="$show" title="{$title}">
		{block content}{/block}
	</span>
{/define}


<!-- usage -->
{embed badge, $client !== null, 'Uhrazeno'}
	{block content}
		<i class="mdi mdi-check text-success"></i>
		{$client->totalInvoicePricePaid|price:0}
	{/block}
{/embed}
On gists

Dynamic Vue.js component in runtime

Vue.js

Dynamic.vue #

<template>
  <h1>test</h1>
  <component :is="dynamicComponent" />
</template>


<script setup>
import { computed} from 'vue'

const dynamicComponent = computed(() => {

  let template = `
    <h3>Toto je dynamic component</h3>
    <p>Nejaky text</p>
  `

  return { template }

})
</script>

<!--/* musi to byt jako bundle vue .. build, ne runtime vue   */-->
On gists

Proxy object guide

JavaScript

Proxy.js #

// 1)  get + set
const target = {
    name: 'John Smith',
    age: 30,
};
const handler = {
    get: function (target, prop) {
        console.log(`Getting the property ${prop}`);
        return target[prop];
    },
    set: function (target, prop, value) {
        console.log(`Setting the property ${prop} to ${value}`);
        target[prop] = value;
    },
};
const proxy = new Proxy(target, handler);



// 2) with validator fn aka encapsulation
const withValidators = person => {
    const handler = {
        set: function (target, prop, value) {
            if ((prop === 'age' && value < 0) || value > 120) {
                throw new Error('Invalid age');
                return;
            }
            target[prop] = value;
        },
    };

    return new Proxy(person, handler);
};

const person = withValidators({
    name: 'John Smith',
    age: 30,
});



// 3) caching, proxy wrap only function
const cache = {};

const getWeather =  (city) => {
    return "fetch -> city -> " + city
};

const proxiedGetWeather = new Proxy(getWeather, {
    apply(target, thisArg, args)  {
        const city = args[0];

        if (cache[city]) {
            console.log('Loading weather data from cache...');
            return cache[city];
        }

        cache[city] =  target.apply(thisArg, args);
        return cache[city];
    },
});

console.log(proxiedGetWeather('San Francisco'))
console.log(proxiedGetWeather('San Francisco')) // console.log('Loading weather data from cache...');
console.log(proxiedGetWeather('San Francisco')) // console.log('Loading weather data from cache...');


// 4) cannot delete
const handler = {
    deleteProperty(target, key) {
        if (key.startsWith('_')) {
            throw new Error(`Cannot delete internal property '${key}'`);
        }

        delete target[key];
        return true;
    },
};

const user = {
    name: 'John Smith',
    _ssn: 'XXX-YY-ZZZ',
};

const protectedUser = protectInternalProps(user);

// Throw error `Cannot delete internal property '_ssn'`
delete protectedUser._ssn;



// 5 cannot iterate
const handler = {
    ownKeys(target) {
        return Object.keys(target).filter(key => !key.startsWith('_'));
    },
};

const user = {
    name: "John Smith",
    _ssn: "XXX-YY-ZZZ",
};

const protectedUser = protectInternalProps(user);

console.log(Object.keys(protectedUser)); // ['name']

for (let key in protectedUser) {
    console.log(key);
}
// ['name']



// 6) private props in class before exists #privateProps
// https://phuoc.ng/collection/javascript-proxy/implement-private-properties-in-a-javascript-class/
const handler = {
    get(target, key) {
        if (key.startsWith('_')) {
            throw new Error(`Cannot access private property '${key}'`);
        }

        return target[key];
    },
    set(target, key, value) {
        if (key.startsWith('_')) {
            throw new Error(`Cannot modify private property '${key}'`);
        }

        target[key] = value;
        return true;
    },
};

class ProtectedPerson {
    constructor(name, age, ssn) {
        this.name = name;
        this.age = age;
        this._ssn = ssn;

        return new Proxy(this, handler);
    }

    getSsn() {
        return this._ssn;
    }
}

// failed
const person = new ProtectedPerson('John Smith', 42, '123-45-6789');
// Uncaught Error: Cannot access private property '_ssn'
person.getSsn();


// lets improve
const handler = {
    get(target, key) {
        if (key.startsWith('_')) {
            throw new Error(`Cannot access private property '${key}'`);
        }
        const value = target[key];
        return typeof value === 'function' ? value.bind(target) : value;
    },
};

const person = new ProtectedPerson('John Smith', 42, '123-45-6789');
console.log(person.getSsn());   // 123-45-6789



// 7) exists 'in'
const handler = {
    has(target, key) {
        console.log(`Checking for ${key} property...`);
        return key in target;
    },
};

const person = {
    name: 'John Smith',
    age: 42,
    occupation: 'developer',
};

const proxy = new Proxy(person, handler);
// Logs "Checking for name property..." and returns `true`
console.log('name' in proxy);

// Logs "Checking for email property..." and returns `false`
console.log('email' in proxy);


// 9) Reflect API


// AND rest articles and more robust solutions we can found 
// https://phuoc.ng/collection/javascript-proxy/
On gists

Proxy - nested

JavaScript

NestedProxy.js #

const user = {
  a: 'A',
  b: {
    c: "C",
    d: "D"
  },
  x: {
    y: {
      z: {
        first: "first nested",
        second: "second nested"
      }
    }
  }
}


const createNestedProxy = (obj) => {
  return new Proxy(obj, {
    get(target, prop) {
      const props = prop.split('.');
      let value = target;
      for (const p of props) {
        value = value[p];
        if (value === undefined) return undefined;
      }
      return value;
    }
  });
};

const nestedUser = createNestedProxy(user);

console.log(nestedUser["b.c"]); // Vypíše: "C"
console.log(nestedUser["x.y.z.first"]); // Vypíše: "first nested"
On gists

Pinia - defineStore with argument (each components has its own)

Vue.js

store.js #

// One storage for all ...
export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);
    function increment() {
        count.value++;
    }

    return { count, increment };
});


// Dynamic storage = each components get its own
export function useCounterStore(key) {
    return defineStore(key, () => {
        const count = ref(0);
        function increment() {
            count.value++;
        }

        return { count, increment };
    })();
}


//And more ES6 style
export const useCounterStore = key => defineStore(key, () => {
    const count = ref(0);
    const increment = () => {
        count.value++;
    };

    return { count, increment };
})();
On gists

Promise - withResolvers

JavaScript

Promise.js #

// neni nutne vracet new Promise jak je vsude v prikladech

// 1
async function test () {
	let resolve, reject;

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

	setTimeout(() => {
	 Math.random() > 0.5 ? resolve("ok") : reject("not ok");

	}, 1500)

	return promise	
}

test().then(res => console.log(res)).catch(err => console.log(err))


// 2
const { promise, resolve, reject } = Promise.withResolvers();
Math.random() > 0.5 ? resolve("ok") : reject("not ok");
On gists

Async (mark function as async??)

JavaScript

async.js #

// https://stackoverflow.com/questions/44106907/when-to-mark-function-as-async

async function fnUsingAsync() {
    // Synchronously throw half of the time
    if (Math.random() < .5)
        throw new Error('synchronous error')

    // Return fulfilled/rejected promises half of the time
    return Math.random() < .5 ?
        Promise.resolve('success') :
        Promise.reject(new Error('asynchronous error');
}

function fnNotUsingAsync(x) {
    // Use the exact same body here than function above
}



// when using the async keyword, the function always returns a promise
// which can be fulfilled or rejected.
// No need for try-catch!
fnUsingAsync()
    .then(result => /* result === 'success' */)
    .catch(error => /* catch both synchronous and asynchronous error */);

// Otherwise, you will need to use a try-catch statement, because
// the exception won't be converted to a rejected promise.
try {
    fnNotUsingAsync()
      .then(result => /* result === 'success' */)
      .catch(error => /* catch asynchronous error only */)
}
catch (error) {
    /* catch synchronous error only */
}
On gists

TransformOrigin trick

CSS CSS trick

index.css #

div {
	background: lightblue;
	width: 200px;
	height: 200px;
	border: 1px solid red;
	margin: 30px;
}

div.action {
	transition: scale 300ms;
transform-origin: right bottom;  /* zmizi animaci vpravo dole, muzu zadat i px treba 500px bottom , TO je dulezite :) */
	scale: 0;
}
On gists

JS plugin aka jQuery

JavaScript Plugin patterns Helpers-Filters-Plugins

Test.plugin.js #

class Test {
    constructor(el, options) {
        this.el = el;
        const defaultOptions = {
            onHover: (element, e) => {
                console.log(':)))', element, e);
            },
        };

        this.options = { ...defaultOptions, ...options };
        this.mouseOverHandler = this.handleMouseOver.bind(this); // Vytvoření odkazu na metodu handleMouseOver
    }

    init() {
        this.el.addEventListener('mouseover', this.mouseOverHandler); // Přidání posluchače události
    }

    destroy() {
        this.el.removeEventListener('mouseover', this.mouseOverHandler); // Odstranění posluchače události
    }

    handleMouseOver(e) {
        if (this.options.onHover) {
            this.options.onHover(this.el, e);
        }
    }
}