Se ottieni il messaggio di errore “TypeError: a is null” utilizzando le Google Maps API, assicurati di aver definito correttamente il tag DIV dove dovrebbe apparire la mappa.

Cosa ho imparato oggi: scrivere uno script SASS per estendere Bulma.io

Questo è il mio primo script SAAS che ho creato per aggiungere al CSS Framework Bulma il supporto per margin e padding che trovo utile nello sviluppo di interfacce web.

/*
 * A spacing extension to Bulma.io
 *
 * This extension implements rules likes:
 * has-margin-none, has-padding-medium, has-margin-bottom-large, has-margin-auto
 *
 * The classes are built as follows (in rem):
 *
 * has-margin
 *     -(*|top|right|bottom|left)
 *         -(none|extra-small|very-small|small|medium|large|very-large|extra-large)
 * has-padding
 *     -(*|top|right|bottom|left)
 *         -(none|extra-small|very-small|small|medium|large|very-large|extra-large)
 * has-margin
 *     -(*|left|right)
 *         -auto
 */

$sizeUnit: rem;
$marginKey: "has-margin";
$paddingKey: "has-padding";
$separator: "-";
$spacingSizes: (
  ("none", 0),
  ("extra-small", 0.125),
  ("very-small", 0.25),
  ("small", 0.5),
  ("medium", 1),
  ("large", 2),
  ("very-large", 4),
  ("extra-large", 8)
);
$positions: (
  ("top", "top"),
  ("right", "right"),
  ("bottom", "bottom"),
  ("left", "left")
);

@function sizeValue($key, $value) {
  @return if($key == "none", 0, $value + $sizeUnit);
}

@each $size in $spacingSizes {
  $sizeKey: nth($size, 1);
  $sizeValue: nth($size, 2);
  .#{$marginKey}#{$separator}#{$sizeKey} {
    margin: sizeValue($sizeKey, $sizeValue);
  }
  .#{$paddingKey}#{$separator}#{$sizeKey} {
    padding: sizeValue($sizeKey, $sizeValue);
  }
}

@each $size in $spacingSizes {
  $sizeKey: nth($size, 1);
  $sizeValue: nth($size, 2);
  @each $position in $positions {
    $posKey: nth($position, 1);
    $posValue: nth($position, 2);
    .#{$marginKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
      margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
    }
    .#{$paddingKey}#{$separator}#{$posKey}#{$separator}#{$sizeKey} {
      padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
    }
  }
}

.has-margin-auto {
    margin-left: auto;
    margin-right: auto;
}

.has-margin-left-auto {
    margin-left: auto;
}

.has-margin-right-auto {
    margin-right: auto;
}

Cosa ho imparato oggi: come caricare un package locale nel composer.json (es. per sviluppo).

Nel file composer.json del proprio progetto aggiungere il seguente repository e require:

{
    "repositories": [{
        "type": "path",
        "url": "/path/al/proprio/package"
    }],
    "require": {
        "nome-completo/del-package": "@dev"
    }
}

Dove è “/path/al/proprio/package” è il path alla directory che contiene il composer.json del proprio package.
Mentre “nome-completo/del-package” è il nome presente nel composer.json del proprio progetto (es. filippo-toso/state-manager).

Una volta fatto ciò, via di composer install

Cosa ho imparato oggi? cPanel non esegue i file PHP con permessi di accesso 664. Per farglieli eseguire è necessario che siano 644. Inoltre assicurarsi che le cartelle in cui si trovano siano (755 e non 775).

Cosa ho imparato oggi: una alternativa a jQuery.ready() in Vanilla JS, et vaniitys online.

In jQuery si può attendere l’inizializzazione della pagina usando:

$( document ).ready(function() {
  // Handler for .ready() called.
});

oppure

$(function() {
  // Handler for .ready() called.
});

In Vanilla JS è possibile ottenere un comportamento simile (se si sa quello che si sta facendo), usando questo codice:

document.addEventListener('DOMContentLoaded', function() {
   // ...
});