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 comes with an updated jQuery version: 3.5.1.

WordPress 5.5 stopped enabling the jQuery Migrate helper script by default, and with the upcoming release of WordPress 5.6, the bundled version of jQuery will be upgraded (from 1.12.4-wp to 3.5.1).

What this involves for users, is that any plugin or theme that previously relied on the jQuery Migrate tool to work as expected (due to being older code, or just a missed update to deprecated functions), may now have unexpected behaviors.

make.wordpress.org

.load, .unload, and .error, deprecated since jQuery 1.8, are no more. Use .on() to register listeners.

jQuery blog

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

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

into something like

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

But sometimes errors are not related to your own code, right? So what to do?
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.

Continue reading “Software nello sviluppo web (e dintorni)”