1. Telegram – command line tg

Telegram è un sistema di messaggistica istantanea, concorrente di whatsapp. Telegram dispone di numerose API che ci permettono di creare un client personalizzato. Sono presenti delle interfaccie a linea di comando che ci permettono di utilizzare tutte le funzionalità scrivendo pochissime linee di codice e dei pacchetti python che fanno da wrapper e queste API permettendoci di richiamarle dal nostro applicativo python.

Le librerie che andremo ad utilizzare sono telegram CLI e PyTg

Nel seguente tutorial creeremo un piccolo bot che risponderà ai nostri amici alla ricezione di messaggi contenenti le stringhe definite da noi. Si deve utilizzare linux (ubuntu nell’esempio) e python 2.7 o 3.3 (o superiore).
Iniziamo installando le librerie richieste e clonando la repository:

Per poi compilare il tutto con:

Con queste semplici righe possiamo già iniziare ad utilizzare telegram da linea di comando, lanciando l’istruzione:

dove tg-server.pub è la chiave pubblica del nostro server, seguiamo le istruzioni e configuriamo il nostro account.

Per inviare un messaggio usiamo il comando:

I comandi supportati sono:
Messaging

msg Text – sends message to this peer
fwd – forward message to user. You can see message numbers starting client with -N
chat_with_peer starts one on one chat session with this peer. /exit or /quit to end this mode.
add_contact – tries to add contact to contact-list by phone
rename_contact – tries to rename contact. If you have another device it will be a fight
mark_read – mark read all received messages with peer
delete_msg – deletes message (not completly, though)
restore_msg – restores delete message. Impossible for secret chats. Only possible short time (one hour, I think) after deletion

Multimedia

send_photo – sends photo to peer
send_video – sends video to peer
send_text – sends text file as plain messages
load_photo/load_video/load_video_thumb/load_audio/load_document/load_document_thumb – loads photo/video/audio/document to download dir
view_photo/view_video/view_video_thumb/view_audio/view_document/view_document_thumb – loads photo/video to download dir and starts system default viewer
fwd_media send media in your message. Use this to prevent sharing info about author of media (though, it is possible to determine user_id from media itself, it is not possible get access_hash of this user)
set_profile_photo – sets userpic. Photo should be square, or server will cut biggest central square part

Group chat options

chat_info – prints info about chat
chat_add_user – add user to chat
chat_del_user – remove user from chat
rename_chat
create_group_chat … – creates a groupchat with users, use chat_add_user to add more users
chat_set_photo – sets group chat photo. Same limits as for profile photos.

Search

search pattern – searches pattern in messages with peer
global_search pattern – searches pattern in all messages

Secret chat

create_secret_chat – creates secret chat with this user
visualize_key – prints visualization of encryption key. You should compare it to your partner’s one
set_ttl – sets ttl to secret chat. Though client does ignore it, client on other end can make use of it
accept_secret_chat – manually accept secret chat (only useful when starting with -E key)

Stats and various info

user_info – prints info about user
history [limit] – prints history (and marks it as read). Default limit = 40
dialog_list – prints info about your dialogs
contact_list – prints info about users in your contact list
suggested_contacts – print info about contacts, you have max common friends
stats – just for debugging
show_license – prints contents of GPLv2
help – prints this help

Card

export_card – print your ‘card’ that anyone can later use to import your contact
import_card – gets user by card. You can write messages to him after that.

Other

quit – quit
safe_quit – wait for all queries to end then quit

The Pragmatic Programmer – Introduzione

Che riguarda prevalentemente l’attività pratica, l’azione; caratterizzato dal prevalere degli interessi pratici su quelli teoretici e sui valori ideali: avere un atteggiamento p. e realistico; ha sempre avuto una visione p. della vita. Anche come sost., riferito a persona: è un p. interessato soprattutto alla soluzione dei problemi concreti; nell’opinione comune gli americani sono considerati dei pragmatici.

Il programmatore pragmatico è focalizzato sulla risoluzione immediata del problema. Ogni developer è unico, con dei punti di forza e delle debolezze, preferenze e non, questo porta a creare un ambiente che riflette le caratteristiche del programmatore. Ma i programmatori pragmatici hanno alcune caratteristiche in comune:

  • Early adapter/fast adapter. Avere l’istinto di adottare le nuove tecnologie e tecniche e integrarle al resto delle conoscenze. La confidenza nell’adozione e la scelta di una determinata tecnologia o metodologia nasce dall’esperienza e dallo studio
  • Curiosità. Tendere a fare molto domande per capire il senso e il significato di alcune scelte e poter prendere decisioni più ponderate negli anni a venire
  • Pensiero critico. Non accettare mai come risposta “perchè si è sempre fatto così”
  • Realismo. Capire la natura di ogni problema che si presenta davanti per comprenderne la difficoltà e quanto tempo richiederà la risoluzione. Capire che il progetto sarà difficile e/o che richiederà molto tempo può essere un grande vantaggio
  • Tuttofare. Diventare familiari con un grande numero di tecnologie ed ambiente permette di fare la scelta migliore per risolvere un determinato problema evitando di prendere le decisioni basate sul fatto che si conosce solo quel linguaggio o quell’ambiente. Anche se il tuo lavoro ti richiede di essere uno specialista devi essere in grado di poterti spostare e adattare a nuove aree o sfide.

Essere programmatori pragmatici è un processo continuo che deve iniziare e continuare per tutta la vita del programmatore. Ogni giorno deve essere dedicata una piccola quantità di tempo per studiare, imparare e migliorare le conoscenze del programmatore.

HTML5 – download attribute

L’attributo download del tag “a”, introdotto con l’arrivo di html5, permette di scaricare direttamente un file cliccando sul link.

Questo attributo viene utilizzato solo se l’attributo href è impostato. Il valore dell’attributo sarà il nome del file scaricato, se omesso viene utilizzato il nome originale del file. Non ci sono restrizioni sui valori consentiti, e il browser in grado di rilevare automaticamente l’estensione corretta e aggiungerla al file (.img, .pdf, .txt, .html, ecc).

Ad oggi l’attributo è supportato solamente da chrome, firefox, edge 13 e opera,

Firefox e chrome permettono il download diretto di file che si trovano solo sullo stesso dominio della pagina che include il link al file da scaricare per motivi di sicurezza

WordPress – Integrare bootstrap nel menu

Nello sviluppo di un tema wordpress molto spesso si sceglie di integrare il framework Bootstrap, ma nativamente wordpress non fornire un output del menu che si adatta alla struttura dei div e classi che bootstrap richiede.

Con wordpress è possibile gestire il menu dalle pagine di admin andando nella voce appearence -> menu e creare un menu da mostrare in una determinata zona del template, definita con il codice sotto.

Per integrare bootstrap ci possiamo servire dello script wp bootstrap navwalker che andrà salvato nella cartella del nostro teme – wp-content/themes/mytheme/ – e successivamente incluso tramite la funzione

Aggiungiamo inoltre la registrazione degli script jquery e bootstrap e dello stile, da aggiugnere sempre nel file functions.php del tema.

Nel nostro tema sarà sufficiente modificare la chiamata del menu – wp_nav_menu – passando come parametro aggiuntivo

Il file incluso prima estende la classe Walker_Nav_Menu e overrida i metodi start_lvl, start_el, display_element e fallback andando a modificare l’html restituito e uniformandolo alla struttura di bootstrap.
Possiamo modificare il codice della classe aggiunta per renderizzare un qualsiasi menu a nostro piacimento.

D3.JS – Grafico Multilinea

Dopo aver visto le basi di D3 possiamo iniziare a creare i primi grafici secondo le nostre esigenze. Iniziamo questa serie di esempi con un grafico multilinea.

Il grafico multilinea ci permette di mostrare più andamenti contemporaneamente sullo stesso grafico, permettendo all’utente di confrontare contemporaneamente più dati nello stesso momento.

Supponiamo di avere una sorgente dati JSON come la seguente, dove il cliente rappresenta una serie di dati, l’anno sarà l’asse delle ordinate e il valore l’asse delle ascisse:

Modifichiamo la struttura dei dati per renderla più adatta alle nostre esigenze utilizzando la funziona d3.nest, la quale ci permette di raggruppare gli elementi di un array in una struttura gerarchica – funzionamento simile al GROUP BY di SQL -. Key rappresenta la chiave secondo cui vogliamo raggruppare e il parametro entries rappresenta i nostri dati.

La varibile dataGroup conterrà il seguente oggetto

Sarà sufficiente ciclare sui dati a nostra disposizione per disegnare delle linee

Per semplificare l’esempio sono stati tolti i tooltip e i puntini dal codice dei precedenti tutorial. Il codice completo per disegnare un grafico multilinea risulta il seguente:

Aggiornare automaticamente il browser con Gulp

Quando si sviluppa un sito web ci si trova di fronte a molte difficoltà, una delle quali è effettuare dei test su più browser. Grazie al nostro amico Gulp sarà possibile effettuare questi test senza dover ricaricare ogni singolo browser.

Il vantaggio principale di utilizzare browser-sync e l’aggiornamento in tempo reale senza dover ricaricare la pagina ad ogni modifica, permettendoci quindi di effettuare dei test cross browser (ideali se abbiamo più schermi).

Un altro vantaggio sta nel poter vedere e controllare i dispositivi connessi, oltre a poter fornire un IP esterno per vedere il lavoro.

Installiamo browser-sync

Browser-sync non necessita di una versione speciale per gulp. Ci basterà semplicemente installarlo così:

Creiamo il file gulp

Anche il file gulpfile.js è molto semplice, il codice è il seguente:

Oltre a caricare gulp e browser-sync  creeremo un tastk chiamato “serve” che ci permetterà di aggiornare automaticamente ad ogni modifica dei file css e html dentro la cartella “test”.

Ricordiamoci di scrivere un file html valido, quindi con un richiamo al file js e css nel modo corretto, come ad esempio:

Avviamo il tutto con

Se tutto è andato nel verso giusto si aprirà una nuova pagina sul nostro browser e vedremo il messaggio “Connected to BrowserSync”, proviamo ad aggiornare un file per vedere le modifiche in tempo reale.

Accedendo a localhost:3001 potremo vedere tutti i device connessi e l’IP esterno per raggiungerci.

Creare sprite CSS con Gulp

In questa guida andremo a vedere come creare delle sprite css con gulp. Cioè andremo a creare un’unico file contenente tutte le immagini e il relativo file css per recuperarle rapidamente. Il tutto con pochissime righe di codice.

Preparare le immagini

Creiamo una cartella denominata “img” dove all’interno inseriremo tutte le nostre immagini che verranno incluse nello sprite.

Quando inseriamo le immagini dobbiamo avere l’accortezza di:

  • dare un nome unico e sensato. Il file css che verrà creato userà il nome delle immagini, quindi più semplice ed intuitivo è più sarà facile per noi recuperarle
  • inseriamole delle dimensioni corrette, eviteremo uno spreco di spazio inutile e sarà più facile e immediato recuperarle ed usarle
  • carichiamole in formato png o con lo sfondo corretto (se le carichiamo con il formato png con sfondo trasparente sarà più facile utilizzarle su sfondi diversi)

Usiamo Gulp e creiamo lo sprite css

Se questo è il tuo primo incontro con Gulp ti consiglio di leggere la relativa guida “Primi passi con Gulp” per iniziare.

Una volta preparate le nostre immagini proseguiamo installando “spritesmith” e “gulp”, scrivendo nella relativa cartella dalla shell le seguente righe di codice.

Creiamo, sempre nella root del nostro progetto, il gile gulpfile.js con questo contenuto

Oltre a caricare gulp e spritesmith creeremo un task “sprite” che recupererà tutte le immagini png dentro la cartella “img” e creerà un file denominato “sprite.png”, contenente lo sprite di tutte le immagini e “sprite.css” contenente tutti i css necessari, inserendoli nella cartella output.

Avviamo quindi il nostro tastk scrivendo da shell:

Nella cartella output verranno creati i due file. Ci basterà includere il file css e usare le relative classi per mostrare le immagini correttamente.

 

Il Css generato sarà come il seguente

Troviamo tutta la documentazione su github nel sito del progetto.

Primi passi con Gulp

Introduzione

Gulp è un tool che viene utilizzato per migliorare lo sviluppo di un sito web. In particolare può essere utile in questi casi:

  • Velocizzare un server e il sito web stesso
  • Usare un preprocessore come “Sass”o “Less”
  • Ottimizzare (e minimizzare) CSS, JavaScript e immagini

Gulp può fare molte altre cose e può essere impiegato in progetti semplici o molto complessi.

Cosa andremo a fare

In questa guida impareremo come:

  • Installare Gulp
  • Compilare un file Sass o Less
  • Ottimizzare i file CSS, js e le immagini

Installare Gulp

La prima cosa da fare è installare node.js. Questo passaggio è veramente molto semplice ed immediato. Ci basterà infatti scaricare il pacchetto di installazione per windows o seguire le istruzioni che troviamo nel sito nodejs.org.

Una volta installato node.js possiamo procedere all’installazione di Gulp con il comando che segue

Creare un progetto con Gulp

Spostiamoci (da shell) nella directory dove dobbiamo creare il nostro sito web e creiamo il nostro progetto scrivendo, sempre da shell:

Proseguiamo inserendo tutte le informazioni necessarie (puoi semplicemente premere invio se non sai cosa mettere) Verrà creato un file .json contenente tutte le informazioni necessarie.

Adesso che abbiamo creato il nostro file package.json possiamo installare gulp su questo progetto con il comando

Impostiamo il progetto

L’ultimo passaggio prima di iniziare ad usare Gulp sul serio è creare il nostro progetto. Possiamo creare una struttura del genere:

Dove dev sarà la cartella di sviluppo e dist sarà il posto dove si troveranno i file compilati e che useremo.

Creiamo il file gulp

Adesso che abbiamo impostato il nostro progetto possiamo aggiungere qualche utility che ci permetterà di fare quanto descritto in precedenza, sempre da shell scriviamo:

in particolare – andando in ordine – andremo ad installare:

  1. compila sass
  2. imagemin, ottimizza le immagini
  3. uglify, comprime i file js
  4. concat, unisce i file css e js
  5. strip-debug, elimina i console log, gli alert e tutto il codice “extra”
  6. csso, comprime i file css

Compiliamo un file Sass con Gulp

Abbiamo completato il nostro ambiente, è quindi arrivato il momento di fare il primo passo, compilare un file sass.

Creiamo quindi nella cartella “dev/scss” un file denominato “style.scss” con questo contenuto

e nel nostro file html che sarà sotto “dev” andiamo ad inserire il foglio di stile compilato e la classe (per poterne vedere le modifiche)

Infine apriamo il nostro file gulpfile.js ed inseriamo il seguente contenuto:

Nel particolare:

  • andiamo a caricare gulp e il tool per compilare sass
  • aggiungiamo 2 task, il primo si occuperà di prendere il file tutti i  file “.scss” dentro la cartella dev/scss (e sottocartelle), di compilarli e di salvare l’output dentro la cartella dev/css
  • il secondo task si occupa di controllare (watch) le modifiche ai file sass, html e javascript

Adesso non ci resta che lanciare il nostro comando per “avviare” gulp e quanto da noi scritto, scriviamo quindi nella console:

Aggiungiamo, quindi, per esempio il codice:

dove andremo a colorare il contenuto di rosso.

Ricarichiamo la pagine e vedremo il nostro testo diventare rosso per incanto.

Ottimizziamo le immagini

Ottimizzare le immagini è un’operazione molto semplice e praticamente immediata.

Ci basterà usare questo codice:

Nel particolare, dopo aver caricato il tool necessario creeremo un nuovo task che recupererà tutte le immagini sotto “dev/img” e le salverà, ottimizzate (comando “imagemin()”) sotto la cartella dist/img.

Lanciamo quindi da shell

per avere le nostre immagini ottimizzate.

Comprimere css e Javascript

Anche la compressione dei file css e javascript risulta molto semplice e immediata, ci basterà scrivere il seguente codice:

Oltre a caricare uglify, concat e csso andremo a creare 2 tastk.

Il primo comprime tutti i file dentro “dev/js” e qualsiasi sottocartelle e li unisce in un singolo file chiamato main.js, che comprime (uglify) dentro la cartella “dist/js”.

Il secondo esegue le stesse operazioni per i file css.

Lanciamo quindi il comando per comprimere gli script

e quello per lo stile

Automatizzare la compressione di css, js e immagini

Allo stato attuale avremo finito il nostro script. Risulta però un po’ complicato aggiornare e richiamare manualmente ogni singolo task.

Se ti ricordi per compilare i file .scss di Sass avevamo automatizzato la procedura usando un .watch.

Andiamo quindi a riprendere quel codice e modifichiamolo come segue:

Poche modifiche ma sostanziali. Ad ogni modifica di una di quelle cartelle o file verranno richiamate tutte le funzioni e verranno quindi compilati i file sass, compilati e compressi i file js, le immagini e gli script.

Nel nostro file .html ci basterà fare riferimento all’unico file main.js e main.css presenti nelle cartelle dist, come il richiamo alle immagini stesse.

Ricordiamoci sempre di richiamare in console

Puoi scaricare il file demo (i moduli sono ovviamente esclusi) da questo link.

Flexbox: allineare i contenuti al centro con solo CSS3

Poche e semplici righe di codice per allineare i contenuti al centro di un “div”, senza usare le tabelle e senza usare Javascript. Ma come è possibile?

Semplice con flexbox e bastano veramente poche righe di codice:

Quello che siamo andati a fare è definire una classe “flex” che si occupa di allineare in verticale i contenuti e definirne altre due che li posizionano sopra e sotto e che necessitano di una sola riga di codice.

Il funzionamento è molto simile alle tabelle, non abbiamo però tutte le problematiche che essere comportano.

D3.JS – Le sorgenti dati

Nei tutorial precedenti abbiamo sempre utilizzato un array di oggetti javascript per rappresentare i nostri dati. Molto spesso però i dati che vogliamo rappresentare provengono da sorgenti dati più disparate e abbiamo uno strato software che ci permette di leggere, aggregare e restituire i dati nel formato da noi preferito.

Per fare queste operazioni ci vengono in aiuto le request di D3. D3 supporta le chiamate XHR (XMLHttpRequest) e ci permette di caricare i dati in modo asincrono – soluzione ottimale se abbiamo una grossa sorgente dati che impiega qualche secondo per essere letta ed elaborata -.

I metodi che d3 lascia a disposizione sono:

  • d3.xhr(url[, mimeType][, callback])
  • d3.text(url[, mimeType][, callback])
  • d3.json(url[, callback])
  • d3.xml(url[, mimeType][, callback])
  • d3.html(url[, callback])
  • d3.csv(url[, accessor][, callback])
  • d3.tsv(url[, accessor][, callback])

XHR permette di creare richieste asincrone ad un url specificao. Può essere specificato anche un mimeType come ad esempio “text/plain”. Nel callback vengono passato due argomenti, error e response. Se ci sono errori la risposta sarà undefined. Il codice per creare il nostro grafico verrà richiamato all’interno della funzione di callback.

Di solito non viene utilizzato ds.xhr, ma vengono tilizzati gli helper d3.text per plain text, d3.json per JSON, d3.xml per XML, d3.html per HTML, d3.csv per valori separati da virgola e d3.tsv per valori separati da tabulazione.

L’url può essere sia relativo che assoluto. Possiamo far funzionare anche senza un web server D3 a condizione che venga abiliato il cross domain request nel browser che stiamo utilizziamo.

Un esempio di chiamata potrebbe essere quello che segue.