← Torna al blog

Dev Tips

Un trucchetto al giorno leva le complicazioni di torno! Piccole "scorciatoie" che possono facilitare la vita degli sviluppatori e far risparmiare tempo...e righe di codice.

63

Work with the CSS classes of an element

2021-04-21

1// JS Tip of the Day
2// Work with the CSS classes of an element
3
4// <p id="hero" class="steel-wing">Batman</p>
5
6let elem = document.querySelector('#hero');
7
8// Add multiple classes
9elem.classList.add('dark-knight', 'caped-crusader'); 
10// class="steel-wing dark-knight caped-crusader"
11
12// Remove multiple classes
13elem.classList.remove('steel-wing');
14// class="dark-knight caped-crusader"
15
16// Toggle a class
17elem.classList.toggle('dark-knight');
18// class="caped-crusader"
19
20elem.classList.toggle('dark-knight');
21// class="dark-knight caped-crusader"
22
23// Replace a class
24elem.classList.replace("caped-crusader", "batsy");
25
26// Check if an element has a class
27if (elem.classList.contains('dark-knight')) {
28	console.log("I'm the night!");
29}
30
31// Get the number of classes 
32console.log(elem.classList.length); // 2
62

A tiny random ticker

2021-04-20

1// JS Tip of the Day
2// Random Ticker
3
4let minDelay = 1000;
5let maxRandomDelay = 3000;
6
7let timerId = setTimeout(
8  function request(randomDelay) {
9    let tickDelay = Math.floor(Math.random() * randomDelay + minDelay);
10    console.log('tick', tickDelay);
11    timerId = setTimeout(request, tickDelay, randomDelay);
12  }, 
13  minDelay, 
14  maxRandomDelay
15);
61

Displays tabular data as a table

2021-04-19

1// JS Tip of the Day
2// Displays tabular data as a table
3
4console.table(['Batman', 'Superman', 'Green Arrow']);
5console.table({ name: 'Batman', weapon: 'Batarang', vehicle: 'Batmobile' });
6console.table([
7                { name: 'Batman', superPower: 'Money', partner: 'Robin' },
8				{ name: 'Superman', superPower: 'Strenght', partner: 'Wonder Girl' },
9             ]);
60

How to detect the type of a function

2021-04-16

1// JS Tip of the Day
2// How to detect the type of a function
3
4Object.prototype.toString.call(function() {}); // [object Function]
5Object.prototype.toString.call(function*() {}); // [object GeneratorFunction]
6Object.prototype.toString.call(async function() {}); // [object AsyncFunction]
59

Simple and Quick Array Comparison (A better solution!)

2021-04-15

1// JS Tip of the Day
2// Simple and Quick Array Comparison (A better solution)
3
4const arrayComparison = (firstArray, secondArray) =>
5  firstArray.length === secondArray.length &&
6  firstArray.every((v, i) => v === secondArray[i]);
7
8const heroes = ['Batman', 'Superman', 'Green Arrow'];
9const moreHeroes = [new String('Batman'), 'Superman', 'Green Arrow'];
10
11arrayComparison(heroes, moreHeroes); // false
12
13moreHeroes[0] = 'Batman';
14
15arrayComparison(heroes, moreHeroes); // true

Contattaci.

Hai in mente un progetto e vorresti realizzarlo?
Sei interessato a migliorare le competenze del tuo team in ambito di programmazione e sviluppo?
Oppure vuoi semplicemente prendere prendere un caffè con noi e vedere la nostra collezione di Action Figure, allora scrivici tramite questo form.

Se, invece, vuoi far parte del team, guarda le nostre offerte di lavoro.

Questo sito è protetto da reCAPTCHA e si applicano le Norme sulla privacy e i Termini di servizio di Google.