Debugging Typescript con Visual Studio Code

Il Debugging di un’applicazione è una fase importante per individuare e risolvere problemi e bug, altrimenti impossibili da individuare e correggere.

Oggi in questo articolo del nostro blog vorremmo affrontare come questo aspetto, viene gestito all’interno di un IDE di sviluppo di nuova generazione, Visual Studio Code utilizzato da molti sviluppatori proprio per la sua versatilità e configurabilità avendo a disposizione numerosi plugin di terze parti che lo rendono flessibile e completo.

In particolare una volta installato sulla vostra macchina il prodotto, liberamente scaricabile dall’ apposito sito, per cominciare  apriamo subito il nostro progetto e per prima cosa notiamo che posizionandosi  al lato sinistro del numero di riga presente nell’area del codice è possibile decidere dove posizionare il nostro breakpoint che sarà rappresentato da un pallino rosso pieno, quello sarà appunto il nostro punto dove vogliamo bloccare l’esecuzione del programa ed entrare a runtime per capire quel che succede step-by-step.

Se decidiamo di eliminarlo o ci si posiziona nella finestra di debug e lo si elimina o disabilità deselezionandolo oppure direttamente sul pallino rosso relativo e scompare, vediamolo nell’immagine successiva.
Continua la lettura di Debugging Typescript con Visual Studio Code

Installare Bootstrap 4 come dipendenza di app Angular 5

E’ un pò di tempo che non scrivo un nuovo articolo per il mio Blog, oggi volevo riprendere con questo argomento: come installare Bootstrap 4.0.0-beta-2 come dipendenza di un progetto Angular 5.

1. Posizionarsi sulla root del progetto, tramite terminale Node.js eseguire il seguente comando:

npm install bootstrap@4.0.0-beta.2 –save –style sass

per chi non conoscesse bene le opzioni di node.js  –save permette di includere automaticamente il pacchetto all’interno della sezione delle dipendenze del progetto nel file package.json e –style indica il tipo di foglio di stile da usare nel nostro caso se si preferisce usare sass lo indichiamo.

2. Una volta terminata l’installazione del modulo bootstrap verrà segnalato un warning che indica che è necessario installare due dipendenze per far funzionare correttamente bootstrap che sono le seguenti:

npm install jquery@1.9.1 –save –style sass

npm install popper.js@^1.12.9 –save –style sass

3. Aprire il vostro angular-cli.json e aggiungere lo stile e gli script nel seguente modo:

"styles": [
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/jquery.min.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

Continua la lettura di Installare Bootstrap 4 come dipendenza di app Angular 5

Configurare un Multi-store con Multi-Dominio in Magento

Uno dei maggiori punti di forza di Magento è la sua capacità di scalare per il supporto multi-store e multi-lingua dipendendo tutti da uno stesso backend.

In questo tutorial, vi mostreremo come trarre vantaggio dalla scalabilità di Magento con la creazione di più siti web con nomi di dominio unici che condividono lo stesso catalogo prodotti.

In  questo esempio,  noi andremo a configurare tre domini diversi:

www.dominio1.com, www.dominio.com e www.dominio3.com

In questo Tutorial diamo per assunto che l’istanza Magento è già stato installato nel server.

La prima cosa sarà la Scomposizione del Processo in diverse Fasi in base alle aree di configurazione in cui dovremo intervenire, serviranno sicuramente, Categorie, Configurazione Negozi lato Magento Admin, Configurazione dei Negozi lato server.

Continua la lettura di Configurare un Multi-store con Multi-Dominio in Magento

Ottimizzazione query My-Sql, conosciamo la Funzione EXPLAIN

Cari lettori,  dopo un lungo periodo di assenza, ho pensato in vista del nuovo anno di ritornare sul mio blog con nuovi ed interessanti articoli, che spero siano di vostro gradimento e di supporto per tutti voi.

Cominciamo oggi con un’articolo in cui analizzeremo un grande strumento, la funzione EXPLAIN che My-Sql ci mette a disposizione per analizzare le nostre Query per poter apportare ulteriori miglioramenti, prestazionali alle stesse.

Per eseguire lo strumento basterà semplicemente digitare il comando EXPLAIN prima della query di selezione e lasciare che My-SQL lo esegua.
MySQL non eseguirà la query di selezione, ma analizzerà e visualizzeà  il risultato.

Un semplice esempio

Inizieremo con una semplice query di selezione a contare tutti i contatti di sesso maschile contenuti in una tabella Rubrica.

SELECT COUNT(*) FROM rubrica WHERE genere = 'M';
+----------+
| COUNT(*) |
+----------+
|   123456 |
+----------+
1 ROW IN SET (0.25 sec)

Ora useremo il comando EXPLAIN per ottenere le informazioni su come i dati per questa query sono ottenuti.
Esempio:

EXPLAIN SELECT COUNT(*) FROM dipendenti WHERE genere = 'M';
+----+-------------+-----------+------+---------------+------+---------+------+--------+-------------+
| id | select_type | TABLE     | TYPE | possible_keys | KEY  | key_len | REF  | ROWS   | Extra       |
+----+-------------+-----------+------+---------------+------+---------+------+--------+-------------+
|  1 | SIMPLE      | rubrica | ALL  | NULL          | NULL | NULL    | NULL | 123456 | USING WHERE |

Andiamo a dare un’occhiata per capire che cosa My-SQL ci sta dicendo.

Continua la lettura di Ottimizzazione query My-Sql, conosciamo la Funzione EXPLAIN

Yii Framework: Come customizzare gii per generare codice per la tua App

A partire dalla versione 1.1.2 , Yii Framework si è dotato di uno strumento basato sul Web generazione di codice chiamato Gii.

Essa sostituisce la precedente yiic strumento shell di generazione che girava su riga di comando.

In questa sezione, descriveremo come  estendere Gii per aumentare la nostra produttività di sviluppo.

Mentre i generatori di codice di default che vengono con Gii in grado di generare codice molto potenti, spesso si ha l’esigenza di personalizzarli o crearne di nuovi per soddisfare i nostri gusti e le esigenze.

Ad esempio, potremmo volere che il codice generato sia basato su nostri stili di codifica preferiti, o potremmo voler rendere il codice utile a supportare più lingue.

Tutto questo può essere fatto facilmente con Gii.

Gii può essere esteso in due modi: personalizzando i template di codice dei generatori di codice esistenti, oppure utilizzando la scrittura di nuovi generatori di codice.

Continua la lettura di Yii Framework: Come customizzare gii per generare codice per la tua App

Le migliori pratiche CSS da seguire e cattive abitudini da evitare

Da un pò di tempo non dedico un pò del mio tempo a scrivere un’articolo del mio Blog, oggi finalmente l’ho trovato e vorrei riprendere il discorso parlando di CSS e la mia sfida di oggi sarà cercare di creare un set di regole CSS seguendo una determinata metodologia.

Attraverso la pratica, si dovrebbe essere in grado di evitare errori CSS. Elencheremo per darvi una mano in tal senso le migliori pratiche CSS seguire, così come le cattive abitudini da evitare.

Le Migliori Pratiche CSS

Usare CSS reset

Il diverso Rendering dei vari browser sul mercato rappresenta uno dei maggiori problemi che attualmente lo sviluppatore front-end deve affrontare quotidianamente. Infatti, Stili come margini, padding, altezze, intestazioni, dimensioni dei caratteri in base al browser utilizzato dall’utente può apparire diverso su diversi browser. L’obiettivo che vogliamo raggiungere con un foglio di stile di reset è quello di ridurre tali incongruenze, fornendo dei stili di carattere generali che possono essere modificati o addirittura estesi.

Un foglio di stile CSS di reset di riferimento uno dei migliori in circolazione è normalize.css, che potete scaricare cliccando dal precedente link. Le uniche operazioni che dovete fare è  includere il file css nella vostra pagina HTML nella sezione Head.

Continua la lettura di Le migliori pratiche CSS da seguire e cattive abitudini da evitare

PadiAct: uno strumento per migliorare il marketing del tuo E-commerce.

Oggi voglio consigliarvi uno strumento che può essere utile a migliorare il marketing del vostro sito e-commerce.

Non tutti gli utenti acquistano subito. La maggior parte abbandonano il sito subito e non ritornano mai più.

Quindi per te sarebbe fondamentale riuscire a raccogliere i loro indirizzi di posta, questo vi permetterà di rimanere in contatto con loro e di convertirli in clienti in seguito attraverso messaggi occasionali su offerte, nuovi arrivi, o contenuti di valore.

Utilizzare authManager per la gerarchia autorizzativa RBAC.

La scorsa volta abbiamo parlato dell’ RBAC (Role-based access control), e come abilitarne il modulo che gestisce la gerarchia autorizzativa con Yii Framework per poi salvarla sul nostro Database.

In questo nuovo articolo riprenderemo l’argomento, andando però a spiegare come utilizzare le API di authManager un componenete del Framework che mette a disposizione dei metodi che permettono la creazione di questi ruoli applicativi, le operazioni e le relazioni tra permessi e ruoli.

Come prima cosa diciamo che per proseguire nell’implementazione della nostra gerarchia autorizzativa avremo bisogno di popolare  le nostre tabelle del Database con i ruoli e permessi da noi definiti. Noi faremo questo usando le API messa a disposizione di authManager, ricordiamo che stiamo andando a definire solo i ruoli e le operazioni base, non setteremo per adesso alcuni task formali di RBAC .

In questo articolo andremo a definire una gerarchia base tipica di un Blog, in cui c’è un Proprietario del Blog, un’utente Registrato e un Lettore, come segue: gerarchia_autorizzativa Continua la lettura di Utilizzare authManager per la gerarchia autorizzativa RBAC.

Responsive Design scegliere tra CSS3 media queries e UI Framework.

Visto che è da un pò di giorni che non scrivo un nuovo articolo, oggi vorrei iniziare un’argomento nuovo che riguarda l’UX Design delle applicazioni web, introducendo un tema molto attuale qual’è il Responsive Design.

Se volete capire di cosa si tratta vi rimando ai link precedenti, per praticità cerco di essere il più semplice possibile, riguarda tecniche di Design e Css che permettono all’interfaccia grafica di adattarsi in modo perfetto sia graficamente che funzionalmente al dispositivo in uso.

Questo risulta essere di fondamentale importanza e attualità, oggi, in un mondo delle telecomunicazioni, nel quale ognuno di noi,  visualizza e usa applicazioni grafiche con numerosi dispositivi.

Attualmente esistono in merito, numerosi UI framework, framework grafici dedicati a redere facile l’approccio a questa complessa problematica, per chi come me, invece non si accontenta e vuole realizzare un suo mini framework  può costruirsene uno personalizzato tramite le cosidette  media queries messe a disposizione dalle nuove specifiche CSS3.

Continua la lettura di Responsive Design scegliere tra CSS3 media queries e UI Framework.

Come configurare il componente di controllo degli accesi basato sui Ruoli con Yii Framework.

La scorsa volta abbiamo chiarito un’aspetto fondamentale dell’autenticazione con Yii Framework che permetteva di implementare un semplice filtro di Controllo degli accessi come base per limitare l’accesso a utenti autorizzati.

Oggi vorrei focalizzare la vostra attenzione su qualcosa in più, rispetto al semplice  granulare controllo di accesso alla vostra applicazione. Come è facilmente ipotizzabile avremmo bisogno di distinguere all’interno della nostra applicaione gli Utenti, che avranno Ruoli diversi.

Iniziamo col definire questi possibili ruoli, per esempio per la gestione di un blog come questo. Per prima cosa cominciamo con individuare il ruolo principale, la nostra applicazione avrà di sicuro almeno un’ utente di tipo proprietario, che possono pensarlo come amministratore dell’Applicazione, inoltre saranno dati ad tutti i permessi per manipolare i contenuti. Quindi il ruolo del proprietario del sistema, avrà tutti i permessi di gestione applicazione, utenti e contenuti e commenti.

Continua la lettura di Come configurare il componente di controllo degli accesi basato sui Ruoli con Yii Framework.