1// JS Tip of the Day
2// Tagged Template Literals (Simple Example)
3
4const hero = 'Batman';
5const anotherHero = 'Superman';
6
7function uppercaseTagged(strings, ...values) {
8   console.log(strings); // ['Film: ', 'v', ': Dawn of Justice']
9   console.log(values);  // ['Batman', 'Superman']
10   let strWithUppercase = '';
11   strings.forEach((str, i) => {
12       strWithUppercase += str + (values[i] || '').toUpperCase();
13   });
14   return strWithUppercase;
15}
16
17console.log(uppercaseTagged`Film: ${hero} v ${anotherHero}: Dawn of Justice`);

1// JS Tip of the Day
2// How to abort a Fetch request
3
4const controller = new AbortController();
5
6// You can call controller.abort() to abort the request;
7setTimeout(() => controller.abort());
8  
9const url = 'https://hero-url.com'
10fetch(url, { signal: controller.signal })
11  	.then((response) => {
12  	  // ...
13 	 })
14 	 .catch((e) => {
15 	  	console.log('abort', e);
16 	 })

1// JS Tip of the Day
2// Super Simple Linear Search
3
4const linearSearch = (list, itemToSearch) => {
5  for (const [idx, item] of list.entries()) {
6    if (item === itemToSearch) {
7      return idx;
8    }
9  }
10  return -1;
11}
12
13linearSearch(['Batman', 'Superman', 'Green Arrow'], 'Batman'); // 0
14linearSearch(['Batman', 'Superman', 'Green Arrow'], 'Wonder Woman'); // -1
15

1// JS Tip of the Day
2// Simple Pipe Function (https://www.youtube.com/watch?v=Ua2Jw0fFywE)
3
4const pipe = (...funcs) => {
5    return v => {
6        return funcs.reduce((res, func) => {
7            return func(res);
8        }, v);
9    }
10}
11// more compact version:
12// const pipe = (...funcs) => v => funcs.reduce((res, func) => func(res), v);
13
14const addHero = (v) => `Bat${v}`;
15const addEmoji = (v) => `🦇 ${v}`;
16const addPrefix = str => {
17    return strX => `${str} ${strX}`;
18}
19const count = (v) => v.length;
20
21console.log(pipe(addHero, addPrefix('I\'m'), addEmoji)('Ciccio'));  // 🦇 I'm BatCiccio
22console.log(pipe(addHero, count)('Ciccio'));  // 9

1// JS Tip of the Day
2// Force ClassList Toggle
3
4let el = document.querySelector('#custom-header');
5
6const hero = {
7	name: 'Batman',
8  	isAwake: false,
9};
10	
11// It is the same of classList.remove
12el.classList.toggle("save-the-city", hero.isAwake); // hero.isAwake is false 
13console.log(el.classList.length); // 0
14
15hero.isAwake = true;
16// It is the same of classList.add
17el.classList.toggle("save-the-city", hero.isAwake); // hero.isAwake is true
18console.log(el.classList.length); // 1
19
20// It is the same of classList.add...It isn't toggled!
21el.classList.toggle("save-the-city", hero.isAwake); // hero.isAwake is true
22console.log(el.classList.length); // 1
23
24/*
25	The classItem.toggle method with second parameter is equivalent to:
26
27    let hasClass  = el.classList.contains('save-the-city');
28    if (hero.isAwake && !hasClass) el.classList.add('save-the-city')
29    if (!hero.isAwake && hasClass) el.classList.remove('save-the-city')
30*/