Imparare ReactJs – day #1

Imparare ReactJs

Learn JavaScript, Deeply. Learn JavaScript, Deeply. Learn JavaScript, Deeply. Learn JavaScript, Deeply… ”

Voglio prendere sul serio il suggerimento di Matt ed imparare ad utilizzare javascript in modo più approfondito.
Voglio farlo un po’ per WordPress ed un po’ perchè sono veramente convinto che il futuro del web sia Javascript e per iniziare ho deciso di partire ed imparare ad utilizzare ReactJs integrandolo nei miei prossimi progetti WordPress (si, è vero Calypso mi ha impressionato).

Imparare ReactJs – da dove iniziare

Il primo problema che mi si è presentato è che non sapevo neppure da dove partire, quindi ho iniziato a cercare un po’ di materiale: guide, tutorial, esempi, video, ecc…

Questa una prima selezione delle cose che mi sono sembrate più interessanti:

  1. https://facebook.github.io/react/docs/getting-started.html
  2. https://scotch.io/tutorials/learning-react-getting-started-and-concepts
  3. https://www.codementor.io/reactjs/tutorial/the-reactjs-quick-start-guide
  4. https://blog.risingstack.com/the-react-way-getting-started-tutorial/
  5. https://www.codementor.io/reactjs/tutorial/react-js-flux-architecture-tutorial
  6. http://buildwithreact.com/ – Build with React is a periodical of tutorials and advanced articles for the ReactJS library.
  7. https://zapier.com/engineering/react-js-tutorial-guide-gotchas/
  8. https://egghead.io/technologies/react – Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it’s easy to try it out on a small feature in an existing project. (video)
  9. http://cosenonjaviste.it/react-tutorial/ (ita)
  10. http://www.html.it/articoli/react-linterfaccia-utente-costruita-componente-su-componente/ (ita)

Cosa ho imparato

ReactJs è una libreria javascript per costruire interfaccie utente fatte da componenti riutilizzabili.
Nei primi tutorial che ho letto sembra che il suo utilizzo sia piuttoto semplice ma per essere utilizzata in una applicazione reale ha bisogno di altri componenti per poter gestire richieste a servizi esterni.

 

CloudFlare: una CDN facile (e gratis)

Argomento un po’ complesso per cui preferisco partire con la definizione di CDN:

Le Content Delivery Network (CDN, Rete per la consegna di contenuti) … sono un sistema di computer collegati in rete attraverso Internet che collaborano in maniera trasparente, sotto forma di sistema distribuito, per distribuire contenuti agli utenti finali.

L’obiettivo di una CDN è di instradare una richiesta di contenuto sul nodo che viene individuato come ottimale. Se ottimizzate per le prestazioni, il nodo ottimale è quello che può soddisfare la richiesta nel minor tempo possibile: si può determinare per esempio scegliendo quello geograficamente o topograficamente (nel contesto di rete, minor numero di hops o minor ping) più vicino alla locazione del richiedente, oppure quello con un minor carico di lavoro (in inglese, load average).

Detto in modo più concreto si tratta di un sistema per ottimizzare e risparmiare carico server facendo in modo che alcuni contenuti (es. le immagini e/o i file statici come js e css) vengano erogati da server differenti ottimizzando la distribuzione a livello geografico in modo che sia il server più vicino a noi ad occuparsi del trasferimento.

Mi sono chiesto più volte in quale modo la nostra infrastuttura potesse beneficiare di questo tecnologia ma guardando le specifiche di Akamai e/o Amazon (che sono forse tra le più importanti realtà in questo settore) mi sono reso conto che i prezzi per la gestione di piccoli siti sono abbastanza proibitivi.

Poi, come sempre succede in queste cose, “la figlia del contadino” mi ha parlato di CloudFlare e del suo piano gratuito.

Ho deciso quindi di provare l’integrazione su questa pagine limitando però l’uso alle immagini e ai file javascript e css.
Questo, in breve, quello che ho fatto.

  1. Comprato un nuovo dominio “mavidacdn.in” su whois.com (in offerti in questi giorni a 3.88 dollari).
  2. Ho girato i name server sui server di Cloudflare
  3. Impostato un nuovo sottominio maurizio.mavida.com in modo che punti sul mio ip
  4. Configurato Apache per indirizzare correttamente. (sia maurizio.mavida.com che static puntano adesso allo stesso sito)
  5. Scritto un microplugin per fare in modo che l’indirizzo delle immagini pubblicare su queste pagine punti sul sottodominio CDN.
  6. Modificato nella pagina nelle impostazioni dei media il “Percorso URL completa ai file” con il sottodominio configurato su CloudFlare (http://maurizio.mavida.com/wp-content/uploads)

In questo modo CloudFlare oltre a fare da CDN svolge anche un lavoro come Reverse Proxy facendo cache dei contenuti. Quando viene chiesta un’immagine, o un file javascript/css CloudFlare verifica se è già nella sua cache e solo nel caso non lo sia la chiede al mio server. I benefici nel mio caso sono molto limitati in quanto il traffico generato è relativamente piccolo ma in situazioni più complesse una soluzione come questa potrebbe ridurre notevolemente il traffico.

Questo è il risparmio di banda (e di richieste) ottenuto in 5 giorni di utilizzo:

Adesso qualche dettaglio tecnico:
Qui sotto potete vedere il modo in cui vado ad effettuare la sostituzione dei link alle immagini che viene usata su filtri: ‘the_content’, ‘post_thumbnail_html’ e ‘widget_text’.


function CloudFlareImageReplace ( $content ) {

$pattern="/(" .$this->blog_url . ")(\/wp-content\/)(.*)(png|gif|jpg)/";
$replacement = $this->cf_cdnurl. "$2$3$4";

return preg_replace($pattern, $replacement,$content );

}

Mentre questa quella per js e css che viene attiva dal filtro su “script_loader_src”.

function CloudFlareScriptReplace ( $src ) {

$pattern="/(" . $this->blog_url . ")(\/wp-content\/)(.*)(js|css)/";
$replacement = $this->CloudFlareUrl . "$2$3$4";

// remove Query Strings From Static Resources
$src_parts = explode('?', $src);
return preg_replace($pattern, $replacement, $src_parts[0] );

}

Su GitHub potete trovare il sorgente versione completa (ancora in versione beta) ma se volte installarlo potete usare quella che ho pubblicato sul codex: http://wordpress.org/extend/plugins/cloudflare-url-replacement/.

Anche in quato caso sono graditi consigli e suggerimenti.


image credits: Derek Heisler

WordPress e qualità: sistemi di cache manuali

Per parlare di qualità, tra le tante cose, si devono definire requisiti ed obiettivi e poi trovare degli indicatori per poterli misurare.
Io sto cercando di intrudurre una serie di linee quida nel mio modo di sviluppare ad una di queste si riferisce alla velocità ed al numero di query con cui vengono generate le pagine.

 

Gli indicatori che mi danno la misura e mi permettono di capire se sto rispettando i miei requisiti sono di tre tipi:

  1. Lato browser: YSlow, Page Speed ma anche il pannello “Net ” di Firebug. Con questi verifico i tempi di caricamento dei singoli componenti della pagina ed eventuali colli di bottiglia nel caricamento di js.
  2. Lato server: XHProf . Si tratta di un profiler gerarchico per verificare i tempi di esecuzione di ogni singola funzione.
  3. Lato WordPress: Debug Query e Debug Object. Tramite questi plugin ho sotto controllo il numero di query ed un dettaglio dei singoli oggetti interni a WordPress.

E’ ovvio che uno dei primi livelli di ottimizzazione sia l’intruduzione dei sistemi di cache.
Un uso appropriato può farci risparmiare diverse query e parecchi ciclo di CPU ma dato che in molti hanno già parlato dei plugin che possono aiutarci nella gestione “semiautomatica” della cache vado oltre e vi segnalo solo un articolo fatto da qualcuno che si è anche preoccupato di andare un po’ più a fondo preparando qualche test.

Continue reading “WordPress e qualità: sistemi di cache manuali”

WordPress: Alterare il layout durante un loop

Lo so. Il titolo è un po’ criptico ma provo a descrivervi lo scenario:

Installazione di WordPress. Siamo in homepage. Durante il listing dei contenuti devo gestire, a seconda del tipo e della posizione, il modo con cui i posts vengono visualizzati (es. immagini, allineamento, tassonomie ).

Mi spiego meglio. Ho registrato due nuovi tipi (ex. video e libri) ai quali ho associato delle tassonomie personalizzate (es. i video hanno i registi mentre i libri gli autori).

Nel mio loop voglio visualizzare film e libri con uno stile che indichi chiarmanete di che tipo è questo contenuto ed inoltre voglio aggiungere le informazioni reletive alla tassonomie proprietarie.

La cosa si complica ancora perchè i primi n contenuti (nel nostro caso 3) sono considerati “featured” e vanno visualizzati con thumbnail ed excerpt mentre gli altri sono con il titolo.

Continue reading “WordPress: Alterare il layout durante un loop”

La mia Checklist prima di andare online

Prima di andare “definitiviamente” online con un sito, indipendentemente dallo strumento usato (sia questo WordPress o codice “from scratch”),  è mia abitudine fare una serie di operazioni che in genere mi aiutano ad evitare problemi.

Con il tempo ho preparato questa Checklist in cui potrete trovare attività che vanno da quelle di competenze più  “seo” a quelle che sono operazioni puramente sistemistiche.

Come qualsiasi altra Checklist non va applicata “bovinamente”, ma adattata in base ella proprie competente ed agli accordi presi con il cliente.

  1. Preparazione profilo Google Analytics e condivisione accesso con email cliente
  2. Configurazione script tracciamento sul sito e configurazione custom_var (Google Analytics for WordPress)
  3. Preparazione sitemap (Google XML Sitemaps)
  4. Registrazione Google WebMaster Tools e segnalazione sitemap
  5. Registrazione Bing WebMaster Tools e segnalazione sitemap
  6. Verifica file Robots.txt con escusione aree riserate (iRobots.txt)
  7. Configurazione servizio di monitoraggio con segnalazione mail in caso di down (es Monastic)
  8. Configurazione backup file e database (WordPress Backup / WordPress database backup)
  9. Controllo funzionamento Form contatti
  10. Preparazione .htaccess per compressione gzip, configurazione cache ecc… (vedi High Performance Web Sites)

Qui sotto il download con il pdf della Checklist

Checklist: cosa fare prima della pubblicazione di un sito

Se pensate ci siano altre cose da aggiungere fatemelo sapere…

imapsync: trasferire una casella imap

Imap è una gran bella comodità e quando ti abitui finisci per non poterne fare più a meno.
Se poi sei anche il sysadmin del server che ospita la tua casella e per ovvie ragioni non hai problemi di spazio è come avere una “gmail” ancora più comoda.

L’unico problema è quando arriva il momento di cambiare server.
Ecco che allora ti fai una domanda: “ma io la posta come la sposto da un server all’altro?

Inizialmente ho pensato di fare la migrazione passando attraverso un client (vedi thunderbird) ma la cosa, avendola sperimentata con alcuni clienti, sarebbe stata decisamente lunga….
Continue reading “imapsync: trasferire una casella imap”

10 Searchbox stilosi + howto

Uno degli elementi tipici di un blog è il box per la ricerca e qualche giorno fa mi sono messo in mente di cambiare quello presente su questa pagine.

Ho quindi iniziato a guardarmi un giro cercando di trovare qualcosa che mi piacesse e dallo screening effettuato sono venute fuori diverse cose interessanti.

Quello che non ho trovato sono state le popolarissime “inspiration list” ed ho quindi deciso di presentarvene 10 che, secondo il mio gusto, ritengo siano decisamente “stilose“.

Sohtanaka: Web development & design

sohtanaka

Michael Tyson: Life, tech, Cocoa development, Mac

michaeltyson

Continue reading “10 Searchbox stilosi + howto”

Montate automaticamente periferiche USB

Ubuntu e molte altre distribuzioni “desktop” ci hanno abituato a quella piccola magia chiamata automount che permette il colleganeti automatico al filesystem di periferiche USB come un dischi removibili o sempici chiavette.

In pratica ci evita la “noia” del mount.

Come dicevo qualche riga sopra questa funzionalità è presente in moltissime distrubuzioni dotate di Desktop environment ma nel caso volessimo usarla sulla nostra debian minimale dobbiamo installare un pacchetto aggiuntivo.

liunx-usbmount

Fino a ieri avrei suggerito autofs il quale funziona egregiamente a patto di avere voglia di fare qualche piccola configurazione ma, oggi, dopo aver fatto una piccola ricerca per rispondere ad un mail ricevuta da un certo Riccardo sono venuto a conoscenda di USBmount.

The USBmount Debian package automatically mounts USB mass storage devices (typically USB pens) when they are plugged in, and unmounts them when they are removed. The mountpoints (/media/usb[0-7] by default), filesystem types to consider, and mount options are configurable.

Essendo presente nei reposity debian è sufficente il solito:

# apt-get install usbmount

Come già scritto anche in queste pagine il mount di chiavette formattate con fat32 richiede una modifica al file di configurazione (“/etc/usbmount/usbmount.conf”) aggiungendo “vfat” all’elenco dei filesystem riconosciuti.

FILESYSTEMS=”vfat ext2 ext3″

Infine per applicare i cambiamenti è necessario riavviare udev

# /etc/init.d/udev restart

A questo punto per poter poter accedere alla nostra chiavetta USB ci basterà spostarci sotto “/media/usb” (ovviamente dopo averla inserita) 😉

Controllo degli accessi su SSH

Questa mattina controllando i report di alcuni server relativi al traffico generato ho visto qualcosa di alquanto anomalo.

Il grafico che vedete rappresente l’attivita del protocollo ssh e come potete osservare dalle 4.30 alla 6.30 qualche simpatico amico a tentato un brute force.

Da una prima analisi non sembra essere successo nulla di grave in quanto dai log si può vedere un banale tentativo di dictionary attacks.

Sotto potete vedere una parte del log restituito da questo comando:

# cat /var/log/auth.log | grep ssh | grep “invalid user”

Nello stesso modo ho poi verificato gli accessi “autorizzati” e fortunatamente non ne risultano altri oltre a quelli fatti dal sottoscritto:

# cat /var/log/auth.log | grep ssh | grep Accepted

E’ anche vero che nel caso in cui il nostro hackers fosse riuscito ad accedere avrebbe potuto eliminare una parte dei log ma voglio pensare che avrebbe eliminato tutti i riferimenti al suo ip.

Anche se considero l’attacco fallito ho cercato in rete come evitare questo tipo di attacchi e come in tante altre occasioni la ricerca è durata meno di un minuto: Preventing SSH Dictionary Attacks With DenyHosts

DenyHosts è un tool di sicurezza scritto in Python per server SSH. È pensato per prevenire attacchi brute force verso server SSH monitorando i tentativi di login invalidi nel log di autenticazione e bloccando gli indirizzi IP. (via wikipedia)

Dopo aver verificato se il pacchetto fosse già presente nei repository debian ho provveduto al solito:

# apt-get install denyhosts

Una veloce occhiata al file di configurazione per modificare la mail a cui inviare gli avvisi sui nuovi hosts bloccati ed un controllo lo script fosse in funzione come servizio sono al momento sufficenti per <s>farmi dormire tranquillo</s> rimandare di 24 ore le prossime analisi.

5 nuovi indici per le tabelle di wordpress

Seguendo alcuni suggerimenti di un essere illuminato, sto lentamente mettendo in pratica quanto ascoltato durante l’ iWordCamp.

Mi appunto quindi i comandi da lanciare in modo non dovermi ricordare la sintassi ed evitare refusi…

CREATE INDEX autoload ON wp_options (autoload);
CREATE INDEX post_date ON wp_posts (post_date);
CREATE INDEX post_date_gmt ON wp_posts (post_date_gmt);
CREATE INDEX parent ON wp_term_taxonomy (parent);
CREATE INDEX name ON wp_terms (name);

In alcune installazioni il nome delle vostra tabelle potrebbe essere diverso… verificate quindi prima se avete usato un prefisso.
(file wp-config var $table_prefix)

Mi verrebbe anche voglia di scrivere un piccolo plugin per rendere il lavoro ancora più veloce, ma mi sembra una roba troppo banale.

N.B.
L’applicazione di questi indici è applicabile solo nel caso abbiate una versione di wordpress 2.3 o superiore.

Già che si sono segnalo anche questo script che suggerisce ulteriori tuning per il vostro database server preferito (via giorgio)

MySQL, indici FullText e la lunghezza delle strighe

Avete mai provato a cercare su un indice FullText con una stringa sotto i 4 caratteri ?

select * from tabella where match (nomecampo) against (‘abc’);

Bhe, io dopo essere diventato scemo, ho scoperto che per default la lunghezza minima è impostata a 4 caratteri.

MySQL, indici FullText e ricerca sotto i 4 caratteri

Se quindi state cercando stringhe come “php“,”htm” o “css“, e nonostante siate sicuri che ci siano riscontri, la ricerca non vi restituisce nessun record, non è dovuto ad una tabella corrotta, ma molto più semplicemente perché l’indice in condizioni normali non gestisce ricerche di questo tipo.

La soluzione, se siete nelle condizioni di modificare il file di configurazione, fortunatamente c’è, e prevede 3 operazioni

  1. E’ necessario definire il valore della variabile ft_min_word_len all’interno del file my.cfg
    ft_min_word_len=3
  2. Riavviare il server in modo che valorizzi in modo corretto la nuova impostazione
  3. Per finire, è necessario fare il rebuild degli indici, in modo che vengano ricostruiti con tutte le informazioni corrette
    REPAIR TABLE nometabella QUICK;

Facile come bere un chupito… basta saperlo.

Per la documentazione ufficiale basta guardare qui