Coding

Per il mese di Maggio sono stati selezionati questo 10 tools che renderanno la vita più facile agli sviluppatori:

CanIUse Shortcode

Questo script ha la funzione di monitorare il browser grazie alle moderne funzionalità; si tratta di un plugin WordPress che consente di visualizzare una cartella CanIUse per la funzionalità specificata attraverso un pratico shortcode.

cani

 

Jquery File Api

Questo plugin ha la funzione di far interagire il sito web con le API; include anche la possibilità di caricare più files nello stesso tempo.

fileapi

 

TabellaJS

Questo script permette di creare delle tabelle responsive in JavaScript per il tuo sito web.

tabella.js

 

StickyFill

Questo script ti permette di inserire gli sticky nel tuo sito web.

sticky

 

Basket.js

Questo script ha la funzione di ottimizzare il caricamento dei files JS, in pratica funziona un pò come la cache, nel senso che una volta che viene caricato, il file rimane in memoria e dal momento in cui verrà ricaricato sarà più veloce.

basketjs

 

HTMLHint

Questo tool permette all’utente di controllare gli errori HTML presenti nel tuo sito web.

hint

 

KSS Style guide

Questo script rende la creazione di uno style guide più semplice; in pratica questo strumento automatizza il processo di creazione.

style

 

Valley

E’ una raccolta di icone prese da Dropbox, Google Drive e Microsoft One Drive.

valley

 

 

Alla Prossima.

 

L’attributo rel=”noopener” impedisce alla pagina aperta da un link di controllare la finestra di origine tramite window.opener. È particolarmente rilevante quando usi target="_blank" per aprire una nuova scheda.

Il problema di window.opener

Senza isolamento, la pagina di destinazione può ottenere un riferimento alla scheda che l’ha aperta e tentare di modificarne l’indirizzo. Questo comportamento è stato sfruttato in attacchi detti reverse tabnabbing: l’utente torna alla scheda precedente e può trovarsi su una pagina contraffatta.

Esempio corretto

<a href="https://example.com"
   target="_blank"
   rel="noopener">
  Apri il sito esterno
</a>

I browser moderni trattano generalmente i link con target="_blank" come se avessero il comportamento noopener, ma dichiararlo resta utile per chiarezza, compatibilità e strumenti che generano HTML.

noopener e noreferrer non sono la stessa cosa

noopener isola window.opener. noreferrer chiede inoltre di non inviare l’header HTTP Referer alla destinazione e implica il comportamento noopener. Usa noreferrer soltanto quando vuoi anche ridurre le informazioni di provenienza, perché influenza analytics e attribuzione.

Differenza rispetto a nofollow

nofollow riguarda il rapporto con i motori di ricerca, non la sicurezza della nuova scheda. Non sostituisce noopener. Per link pubblicitari o di affiliazione Google indica attributi come sponsored; per contenuti generati dagli utenti può essere pertinente ugc.

Combinazioni comuni

rel="noopener"
rel="noopener noreferrer"
rel="sponsored noopener"
rel="ugc nofollow noopener"

Gli attributi sono separati da spazi. Inserisci soltanto quelli coerenti con funzione e relazione del link.

Quando non serve target=”_blank”

Aprire automaticamente una nuova scheda può sorprendere l’utente e rendere più difficile la navigazione da tastiera o con tecnologie assistive. Per molti link è preferibile la navigazione normale. Se scegli una nuova scheda, segnalalo quando il contesto non lo rende evidente.

WordPress e rel=”noopener”

L’editor di WordPress può aggiungere gli attributi opportuni quando imposti l’apertura in una nuova scheda. Il risultato dipende da versione, blocco e plugin. Controlla l’HTML finale anziché affidarti a vecchie guide.

Non rimuovere automaticamente noopener da tutto il sito. Se un’applicazione ha davvero bisogno di comunicare tra finestre, progetta esplicitamente il flusso con origini attendibili e postMessage, verificando sempre l’origine dei messaggi.

Controllare i link nel codice

Cerca link con target="_blank" privi di isolamento nei template e nei contenuti generati. Non applicare sostituzioni testuali cieche a JSON, shortcode o script. Modifica il componente che genera l’HTML e poi verifica il frontend.

JavaScript: window.open()

Quando apri una finestra via JavaScript, usa le funzionalità che impediscono l’accesso a opener e non inserire input non validato nell’URL.

window.open('https://example.com', '_blank', 'noopener');

FAQ

noopener nasconde il sito di provenienza?

No. Per limitare il referrer si usa una referrer policy o noreferrer. Noopener riguarda il collegamento tra le finestre.

nofollow rende sicuro target blank?

No. Nofollow è un’indicazione per i motori di ricerca; non impedisce l’uso di window.opener.

Devo aggiungerlo ai link nella stessa scheda?

Normalmente no, perché il problema riguarda l’apertura di un nuovo contesto con un riferimento all’origine.

Conclusione

rel="noopener" è una misura semplice per isolare le nuove schede aperte con target="_blank". Non confonderlo con noreferrer o nofollow e non rimuoverlo senza una ragione tecnica verificata. La documentazione MDN su noopener riassume il comportamento previsto.

Le novità del linguaggio PHP 7 – PHP (Hypertext Preprocessor) è un linguaggio di scripting open source molto utilizzato ed è specialmente indicato per lo sviluppo dei siti web e può essere integrato nel codice HTML (maggiori informazioni).

La versione PHP 7.0 contiene moltissime interessanti funzionalità che illustreremo in questo Post:

Nome della versione

Abbiamo deciso di passare dalla versione 5.6 alla 7.0 tralasciando la versione 6.0 perché quest’ultima era già stata adottata dagli sviluppatori in fase sperimentale e non ha mai raggiunto la fase di produzione.

Maggiore velocità

Utilizzando la versione PHP 7 il codice verrà eseguito più velocemente grazie al nuovo motore PHPNG che ha utilizza la memoria.

Le novità della versione PHP 7

Gestione degli errori

La gestione degli errori non è mai stato un compito semplice per i programmatori, ma in questa nuova versione PHP è stato introdotto una nuova classe che consente di intercettare sia gli errori che le eccezioni.

Supporto del sistema operativo Windows

L’ambiente nativo del linguaggio PHP è Linux, ma è anche possibile eseguirlo in un sistema Windows, con la versione PHP 7 sarà possibile eseguire in una maniera del tutto sicura il codice nella versione 64 bit di Windows.

Nuovi operatori su PHP 7

L’operatore Spaceship funziona sotto il nome ufficiale dell’operatore Combined Comparison.

La notazione del nuovo operatore viene raffigurata dal seguente simbolo: <=>.

Che cosa fa esattamente l’operatore Spaceship?

Spaceship confronta due valori, se il primo valore è maggiore del secondo restituisce 1, se il secondo valore è maggiore del primo restituisce -1 mentre se i valori sono uguali restituisce 0.

Quando viene utilizzato l’operatore Spaceship?

Questo operatore viene utilizzato prevalentemente durante l’operazione di ordinamento di un Array.

Con la versione PHP 7.0 è stato introdotto un altro operatore, ci riferiamo all’operatore Full Coalesce, ma che cosa fa esattamente questo operatore?

Questo operatore è denotato da due punti interrogativi (??) e può essere utilizzato per verificare se un determinato valore esiste e per restituire un valore predefinito nel caso non esistesse.

Ecco come l’operatore Full Coalesce riduce il tempo trascorso mediante le dichiarazioni di base:

Miglioramenti nel codice PHP

Le novità della versione PHP 7 La nuova versione PHP 7 consente agli sviluppatori di migliorare la qualità del codice permettendo di restituire delle determinate dichiarazioni.

<?php
function arraysSum(array …$arrays): array
{
    return array_map(function(array $array): int {
        return array_sum($array);
    }, $arrays);
}
print_r(arraysSum([1,2,3], [4,5,6], [7,8,9]));
Array
[0] => 6
[1] => 15
[2] => 24
)

Classe anonima PHP 7

La versione PHP 7 consente di utilizzare le classi anonime, cioè senza nome, la sintassi è uguale a quella a cui siamo abituati, manca solamente il nome.

Se le classi anonime vengono utilizzate correttamente, possono velocizzare il tempo di esecuzione e la codifica.

Facilità importazione classi

Attraverso la nuova funzione Group Use Declarations sarà possibile importare più classi dello stesso nome contemporaneamente ed attraverso questa funzione, il codice risulterà più semplice ed ordinato e sarà più semplice da leggere visto che le dichiarazioni di utilizzo di gruppo aiutano ad identificare le importazioni che appartengono allo stesso modulo.

Libera lo spazio

Le novità della versione PHP 7 L’obiettivo principale della nuova versione è quello di liberare lo spazio per consentirne il miglioramento, quindi era necessario liberarsi di moltissime funzionalità obsolete e non supportate.

Come modificare la versione PHP

Su Xlogic è semplicissimo modificare la versione PHP ed i relativi parametri, non devi far altro che accedere all’interno del pannello di controllo cPanel, scopri come:

 

Se stai utilizzando WordPress è consigliato impostare la versione PHP 7.0, aumenterai la sicurezza e la velocità del tuo Blog.

Alla prossima!

Le migliori risorse per gli sviluppatori – Aprile 2018 | Il linguaggio PHP è uno tra i linguaggi più utilizzati dagli sviluppatori per la creazione delle applicazioni web, con l’introduzione della versione php 7 la velocità è aumentata notevolmente.

In questo articolo verranno mostrate le migliori risorse PHP che uno sviluppatore deve conoscere:

Phar.io

Le migliori risorse per gli sviluppatori - Aprile 2018

Phar.io ti permetterà di installare PHP in una maniera più semplice, intuitiva e sicura; in pratica verrà controllato il pacchetto facendo corrispondere lo SHA e la chiave GPG dell’autore prima dell’installazione, assicurandosi così che i files siano gli stessi e che provengano da una fonte attendibile.

Cachet

Cachet è un sistema di monitoraggio dello stato basato su PHP, è gratuito, open source ed avrai il pieno controllo dei dati.

Whoops

Whoops è un Framework PHP che renderà il debugging del codice con un’interfaccia più piacevole e pulita.

BotMan

BotMan è un framework PHP che viene utilizzato per creare un Chat bot progettato per integrarsi con molte piattaforme di messaggistica come per esempio Telegram, Slack e HipChat.

PHPReact

Attraverso questo Framework potrai eseguire la programmazione basata sugli eventi con PHP che fornisce componenti come Stream, Promise ed EventLoop.

Matomo

Matomo è un’applicazione molto utile per analizzare i dati basata sul linguaggio PHP, in pratica è molto simile a Google Analytics e svolge le stesse funzioni con la sola differenza che potrai installarlo all’interno del tuo Server avendo in questo modo un maggiore controllo sui dati memorizzati.

RollUP

RollUP non è uno strumento basato sul linguaggio PHP ma può essere utile se hai intenzione di aggiungere all’applicazione PHP alcune espressioni speciali di Javascript.

Sylius

Sylius è un CMS di e-commerce basato su Simfony, uno tra i Frameworks PHP più popolari ed utilizzati nel mondo del web.

 

Alla prossima!

Le migliori risorse per gli sviluppatori – Gennaio 2018 – Ci sono stati moltissimi progressi in questi ultimi anni, ad oggi sono presenti sul mercato nuovi metodi, strumenti che hanno cambiato il modo di operare, per esempio esiste un nuovo modo di costruire i siti web, ci riferiamo a DOM (Document object model), un modello ad albero che definisce la struttura di un sito web.

Utilizzare DOM potrebbe essere un operazione costosa, quindi in questo articolo ti forniremo gli strumenti e le librerie che permetteranno l’implementazione di VirtualDOM.

Mithrill

Mithrill è una potente libreria JavaScript che oltre a VirtualDOM e Components è dotato di Routing ed XHR con cui è possibile creare applicazioni web senza fare affidamento su altre librerie.

RiotJS

RiotJS è una soluzione più semplice da apprendere per i principianti in quanto consente di definire un componente personalizzato con l’elemento e gli attribuiti HTML mentre la maggior parte delle librerie impone di utilizzare la pura sintassi Javascript.

Ractive.js

Ractive.js è una libreria UI basata su modelli utilizzati per creare applicazioni web altamente interattive; Ractive è progettato per funzionare su Browser e su dispositivi Mobile.

Ractive include anche molte funzionalità necessarie per le moderne applicazioni web come ad esempio CSS Scoped, SVG, animazioni e componenti personalizzati.

 

WordPressify

Questo pacchetto consente di ottenere in pochi minuti un ambiente di sviluppo WordPress attivo e funzionante; di Default è stato configurato con strumenti moderni come Gulp, LiveReload, Babel, PostCSS.

Re-Dom

Re-Dom è una tra le migliori librerie in circolazione, con soli 2KB potrai creare una pagina web di Rendering con componenti HTML personalizzati.

MaquetteJS

MaquetteJS è un’implementazione di VirtualDOM che permette di creare un’interfaccia utente fluida che viene aggiornata con i dati che la circondano, in pratica è una libreria JavaScript non aperta, ciò significa che sarà possibile utilizzarla insieme ad un linguaggio come Typescript, Coffescript e JSX.

 

 

Le migliori risorse per gli sviluppatori – Febbraio 2017. Negli ultimi anni ci sono stati moltissimi progressi nel mondo del Web, con l’aggiornamento delle varie librerie all’utilizzo dell’HTML5 pubblicato nel 2014.

In questo articolo abbiamo raccolto una serie di nuovi strumenti che comprendono librerie Javascript, librerie CSS e molti altri tool che ti aiuteranno a migliorare l’esperienza con il tuo sito web.

Awesome OS X Command Line

Le migliori risorse per gli sviluppatori - Febbraio 2017

Awesome ti offrirà moltissime righe di comando per il sistema operativo OS X che ti permetteranno di svolgere svariate operazioni come ad esempio la compensazione della coda di stampa, nascondere cartelle nel Finder e molto altro.

 

Articulate

Articulate è una libreria Javascript in grado di leggere il tuo sito web e con lo scopo di migliorare la visibilità.

 

WP Docker

WP Docker è un ambiente Docker sviluppato specificamente per gli utenti WordPress, si tratta di un’alternativa a piattaforme come Mamp, Vagrant, etc.

 

WordPress Component Library

WordPress Component Library è una libreria progettata per gli utenti WordPress ed a differenza di molte altre librerie, oltre a fornire i Codici CSS ed HTML, vengono forniti anche pezzi di codice PHP che possono essere semplicemente incollati nel proprio tema WordPress.

 

Rellax

Rellax è una libreria Javascript che ha lo scopo di creare effetti Parallax ed effetti a scorrimento, viene fornito con molte opzioni ed è molto semplice da configurare.

 

Progressively

Questa libreria ha lo scopo principale di caricare progressivamente le immagini dal momento in cui vengono visualizzate, in pratica l’immagine verrà vista sfocata mentre il Browser sta caricando l’immagine completa.

 

Caption

Attraverso lo script Caption potrai cercare i sottotitoli .srt da associare ai video che stai guardando.

 

Trevor

Trevor attualmente sopporta solo NodeJS ed ha la funzione di far testare agli sviluppatori il loro Software per vedere se funziona in ambienti diversi.

 

QartJS

Si tratta di una libreria Javascript che rende il codice QR meno noioso, in pratica ha lo scopo di far sovrapporre il codice con un immagine personale.

 

PWA Rocks

Con PWA Rocks potrai utilizzare il tuo sito web offline ed in maniera semplice ed intuitiva.

 

Alla prossima!