Fix jQuery and WordPress “url.indexOf is not a function” error

So, you have updated your WordPress to 5.6 and something strange happened to your website? You open the inspector (Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS), and you find a red message like url.indexOf is not a function error ? Wtf Javascript? How to fix it?

WordPress 5.6 viene fornito con una versione aggiornata di jQuery: 3.5.1.

WordPress 5.5 ha smesso di abilitare lo script helper jQuery Migrate per impostazione predefinita e con l'imminente rilascio di WordPress 5.6, la versione in bundle di jQuery verrà aggiornata (da 1.12.4-wp a 3.5.1).

Ciò che ciò comporta per gli utenti è che qualsiasi plugin o tema che in precedenza si basava sullo strumento jQuery Migrate per funzionare come previsto (a causa del codice più vecchio o solo di un aggiornamento mancato alle funzioni deprecate), potrebbe ora avere comportamenti imprevisti.

make.wordpress.org

.load, .unload, and .error, deprecati da jQuery 1.8, non ci sono più. Utilizzate .on() per registrare i listeners.

jQuery blog

So the correct way is to change in your javascript all your occurrences of

$(window).load(function() { ... });

in qualcosa di simile

$(window).on('load', function() { ... });

Ma a volte gli errori non sono relativi a codice che avete scritto voi, giusto? Cosa fare quindi?
Try adding this code before other javascript scripts and after jQuery inclusion.

jQuery.fn.load = function(callback){ jQuery(window).on("load", callback) };

Iubenda, check consent given in javascript

Logo Iubenda

Simple script to check if user have given consent to Iubenda privacy/cookie policy. Function will return true if user has given consent, false otherwise.

Semplice script per verificare se l’utente ha dato il consenso alla privacy / cookie policy di Iubenda. La funzione restituirà true se l’utente ha dato il consenso, altrimenti falso.

Event style use:

function iubendaConsentGiven(){
  var pairs = document.cookie.split(";");
  var cookies = {};
  for (var i=0; i<pairs.length; i++){
    var pair = pairs[i].split("=");
	if(pair[0].indexOf('_iub_cs-s') !== -1 || pair[0].indexOf('_iub_cs') !== -1 ) {
    	return true;
    }
  }
  return false;
}
var checkCookie = true;
var checkCookieInterval = setInterval(function(){
	if(iubendaConsentGiven()){
		console.log('ok');
		clearInterval(checkCookieInterval);
    }
}, 1000);

JS/CSS Moon Phases snippet

Simple script to generate moon phases ( https://en.wikipedia.org/wiki/Lunar_phase )

It uses 2 SVG (2 hemispheres) and some CSS transformation.

You can avoid JS if you don’t need real-time phase update.

HTML code

<div class="moon">
  <svg height="200" width="100" class="moon-left">
    <circle cx="100" cy="100" r="100" stroke="white" fill="white" class="bg"/>
    <circle cx="100" cy="100" r="100" stroke="white" fill="black" class="fg"/>
  </svg><svg height="200" width="100" class="moon-right">
    <circle cx="0" cy="100" r="100" stroke="white" fill="white" class="bg"/>
    <circle cx="0" cy="100" r="100" stroke="white" fill="black" class="fg"/>
  </svg>
  
  <div id="phase"></div>
</div>

 

CSS

html, body {width:100%;background-color:#333;margin:0;position:relative; font: 1em sans-serif;}
.moon {width:200px;margin:2rem auto;}
#phase {width:200px;margin:25px 0;}

.moon-left,.moon-right {display:inline-block;width:100px;position:relative;margin:0;}
.moon-left .bg,.moon-right .bg {stroke-width:2px;}

.moon-right .fg {stroke-width:2px;}
.moon-left .bg {fill:black;}
.moon-left .fg {fill:white;transform-origin: 0% 0%;}

.moon-right .fg {transform: scaleX(1);}
.moon-left .fg {transform: scaleX(0) translateX(0);}

 

and JS code. The code is prolix and redundant, but it helps to understand what happens.

jQuery( "#phase" ).slider({
      min: 0,
      max: 200,
      value: 2,
      step:10,
      slide: function( event, ui ) {
        updateMoon( ui.value );
      }
  });

Math.radians = function(degrees) {
  return degrees * Math.PI / 180;
};
function updateMoon(phase){
  var phaseScale = 1,
      phaseTrans = 100,
      phaseRight = 0;
  
  if(phase <= 100) {
    phaseRight = (1-phase/100);
  } 
  jQuery('.moon-right .fg').css({
    'transform':'scaleX(' + phaseRight + ')'
  });
  
  if(phase >= 100) {
    phaseScale = (1-(phase-100)/100);
    phaseTrans = 100*phaseScale;
  } 
  jQuery('.moon-left .fg').css({
    'transform':'translate('+phaseTrans+'px,0) scaleX(' + (1-phaseScale) + ')'
  });
  
}

 

and here the result JS/CSS Moon Phases

Software nello sviluppo web (e dintorni)

Una delle cose che spesso fa un po’ scervellare è la scelta corretta più adeguata del software da utilizzare in quelle che sono le quotidiane prassi, sia lavorative che organizzative.

Molti degli strumenti che solitamente nello sviluppo web mi è capitato di scegliere sono volti a migliorare quello che è il flusso di lavoro. Che fosse un’ottimizzazione di tempo o di risorse.
Vediamone alcuni.

Continua a leggere “Software nello sviluppo web (e dintorni)”