Microsoft MVP per la quarta volta consecutiva!

E' sempre un'emozione incredibile ogni anno ricevere la mail il giorno del rinnovo.
Come ho scritto nel titolo del posto, quest'anno è stata la quarta volta che sono stato rinnovato e come lo scorso anno, nella categoria "Visual Studio and Development Technologies".
Gli ultimi mesi prima del rinnovo è stato un periodo difficile per me a livello personale, ma con questa notizia mi è tornata la voglia di fare di nuovo attività di community come prima e forse anche di più.
Ho già steso il piano di eventi a cui vorrei partecipare ed organizzare da settembre in avanti.
Preso leggerete la prima notizia relativa a questo argomento in uno dei prossimi post. :)

Grazie a tutti e ci vediamo al prossimo evento!

Global Azure Bootcamp - Pordenone 2017

Il 22 aprile a Pordenone si terrà uno dei più importanti eventi su Azure in Italia.
Anche questa volta 1nn0va mi ha invitato come speaker :)

Durante la mia sessione vedremo come sfruttare al meglio ASP.NET Core e alcuni servizi Azure fra cui:

  • Resource Group
  • App Service
  • SQL Azure
  • Traffic Manager

Scenderemo nel dettaglio di come creare un ambiente di produzione ridondato e deployato su diversi datacenter in modo da ottimizzare l'accesso da qualsiasi paese arrivi l'utente finale.
Oltre a questo vedremo anche come gli app service possono aiutare a creare diversi ambienti di test e sviluppo, senza troppi costi aggiuntivi e soprattutto senza troppo spreco di tempo.

Potete trovare l'agenda completa (la riporto anche sotto) alla pagina di Eventbrite dedicata all'evento, in cui potete anche prendere il biglietto: https://www.eventbrite.it/e/biglietti-global-azure-bootcamp-pordenone-2017-32810793968

Sbrigatevi perchè stanno andando a ruba!
Ci vediamo a Pordenone!

Aula S1

8.15

Registrazione

9.10

Saluti

9.30

Keynote: Digital Transformation: Resetting Your Defaults for the Modern World
(Andrea Benedetti)

10.30

Coffee Break

 

Aula S1
(App Deployment)

Aula S7
(VM And Data)

Aula S8
(Serverless)

11.00

Azure Container Services
(Alessandro Melchiori)

Azure Data Lake
(Francesco Diaz)
Azure IoT Hub
(Andrea Tosato, Simone Penna

12.10

Infrastrucutre as code: Kubernetes on ACS
(Maksim Sinik)

Azure DocumentDb
(Emanuele Zanchettin
Microsoft Cognitive Services
(Riccardo Cappello)

13.10

Lunch time

14.00

Deploy & Run on Azure App Service
(Andrea Dottor

Azure Virtual Machine & Networking
(Marco GuminiGiampiero Cosainz)

Serverless development
with Azure Functions
(Marco Parenzan)

15.15

ASP.NET Core & Azure in the Real World
(Emanuele Bartolesi)

Gestione dei servizi Azure con Monitor e OMS
(Marco GuminiMichele Ruberti)

Create your smart bots in Azure
(Jessica Tibaldi)

16.25

Azure AppInsight
(Grazia Cimino)

 Will you survive the titanic? A full story with Azure Machine Learning
(Guenda Sciancalepore)

Microsoft Cognitive Services
(Marco Minerva)

17.35

Chiusura

Visual Studio Code: scrivere un extension pack

Qualche mese fa avevo scritto un articolo, che ho aggiornato nel tempo, con le estensioni più utili per Visual Studio Code.
Dalle ultime versioni di Visual Studio Code è stata aggiunta la possibilità di aggiungere delle estensioni denominate "Template Pack" che in realtà sono delle raccolte di estensioni stesse.
In questo modo non dobbiamo installarle tutte una ad una, ma è possibile farlo con un passaggio unico.

Vediamo come fare per creare un Template Pack personalizzato.

Installare Yeoman

Per chi non sapesse cosa sia, Yeoman, in breve, è un generatore di codice da riga di comando che vi permette di creare nuovi progetti a partire da dei template.
Se non lo avete ancora installato sulla vostra macchina, dovete installarlo e installare anche il template per creare progetti per Visual Studio Code.
L'installazione è molto semplice.
Dovete aprire una finestra del command prompt, o una finestra di PowerShell o un terminale di vostro piacemento (anche su Mac e Linux) e inserire il seguente comando:

npm install --global yo

Per controllare che sia tutto a posto una volta che ha finito l'installazione, potete utilizzare il seguente comando:

yo --version

Installare in generatore di Code

Una volta installato Yeoman, bisogna installare il template per Visual Studio Code.
Per farlo, basta lanciare il seguente comando:

npm install -g yo generator-code

Creare l'Extension Pack

A questo punto, non dobbiamo altro che lanciare Yeoman con il rispettivo generatore per Visual Studio Code:

yo code

Nel vari template che si presenteranno, selezionate l'ultimo: New Extension Pack.

Adesso Yeoman vi farà alcune domande, tra cui se volete già aggiungere al vostro template, le estensioni correntemente installate nel vostro Visual Studio Code, il nome della vostra estensione e il vostro publisher name (cioè quello che gli altri utenti vedranno sul marketplate).
Fatto questo, potete lanciare il seguente comando per aprire il vostro progetto direttamente in Visual Studio Code:

cd <nome della vostra estensione>
code .

Personalizzare la vostra estensione

Una volta aperto Visual Studio Code, potete aprire il file package.json e iniziare a inserire i pacchetti che volete includere nella vostra estensioni.
C'è un tag apposito dove inserire i nomi, ricordandosi di inserirli nel formato "publisherid.extensionname".
Nell'esempio di codice, trovate alcuni dei pacchetti che ho inserito nella mia estensione:

    "extensionDependencies": [ 
        "abusaidm.html-snippets",
        "Zignd.html-css-class-completion",
        "qinjia.view-in-browser",
        "msjsdiag.debugger-for-chrome",
        "dbaeumer.vscode-eslint",
        "donjayamanne.jquerysnippets",
        "donjayamanne.githistory",
        "HookyQR.beautify",
        "joelday.docthis",
        "JerryHong.autofilename",
        "eamodio.gitlens"
    ]

Pubblicare l'estensione sul Marketplace

Una volta creata la vostra estensione, potete decidere di pubblicarla sul marketplace di Visual Studio oppure di testarla in locale.
Nella seconda ipotesi basta copiare i files che avete creato con Yeoman dentro la cartella %USERPROFILE%\.vscode\extensions e riavviare Visual Studio Code.
Per Linux e per Mac, la cartella dove inserire l'estensione è la seguente: ~/.vscode/extensions.

Se invece volete pubblicare la vostra estensione sul Marketplace, la procedura è un po' più lunga.

Per prima cosa dovete installare l'utility da riga di comando che si chiama vsce:

npm install -g vsce

Finita l'installazione dovete andare nel vostro tenant di Visual Studio Team Services al link: vostrotenant.visualstudio.com.
Una volta effettuato il login dovete cliccare sul vostro avatar e dopo sul link "Security".

A questo punto dovete cliccare sul pulsante "Add" sopra la griglia con la lista dei vostri "Personal Access Token" e crearne uno nuovo.

N.B. un vincolo molto importante per il corretto funzionamento è quello di selezionare in "Accounts" la voce "All Accessible Accounts".

Salvatevi il vostro token perchè servirà successivamente e soprattutto non potete più recuperarlo dalla griglia con la lista.
Adesso dovete creare il vostro publisher name con il seguente comando:

vsce create-publisher publisher_name

In questa fase il tool vi chiederà di inserire il Personal Access Token che avete creato in precedenza.
Adesso dovete aprire il file "package.json" e inserire alla voce "publishername" del json, quello che avete inserito in questa fase.
Effettuate il login con il comando:

vsce login publisher_name

Se avevate già creato il publisher name in precedenza e non avevate ancora effettuato il login nella stessa sessione, vi verrà chiesto di nuovo il Personal Access Token.

Adesso non vi rimane che spostarvi nella cartella del vostro progetto e lanciare i comandi di pubblicazione del vostro pacchetto.
I comandi per farlo sono:

vsce publish minor
vsce publish major
vsce publish patch

Facendo in questo modo, il vostro file "package.json" viene aggiornato automaticamente con il numero di versione corretto, quindi non dovete farlo a mano.

Per controllare che sia tutto andato a buon fine, potete andare a link della vostra estensione, che avrà il seguente formato: https://marketplace.visualstudio.com/items?itemName=publishername.nomepacchetto

Visual Studio 2017 Succinctly

Qualche giorno fa il mitico Alessandro Del Sole ha pubblicato un nuovo libro per Syncfusion: Visual Studio 2017 Succinctly

In questa introduzione a Visual Studio 2017 vengono descritte le principali novità dell'ambiente di sviluppo a partire dalla nuova installazione fatta a "moduli", alle novità dell'IDE vero e proprio, una panoramica su Roslyn fino alla parte riguardante lo sviluppo per il cloud e Web.
Come tutti gli altri libri di questa serie, lo potete scaricare gratuitamente dal link che vi ho lasciato sopra.

Buona lettura. :)

Vedere e scaricare le sessioni sul lancio di Visual Studio 2017

Come avevo scritto nell'articolo precedente, qualche giorno fa c'è stato il lancio di Visual Studio 2017.
Ovviamente le sessioni sono state registrate e rese disponibili su Channel9 a questo indirizzo: https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2017-Launch?sort=status&direction=desc

Nella stessa serie sono state anche inserite le sessioni dei giorni successivi sullo sviluppo Windows/Xamarin e quelle orientate al Web.

Per chi fosse interessato a scaricarsi le puntate e guardarle offline, ho creato (come tante altre volte ormai!!!) uno script PowerShell per fare il download in automatico di tutto.
Lo potete trovare a questo link su gist: https://gist.github.com/kasuken/f93408e8820d2c276199b9514f950374

[UPDATE] Ho inserito anche il download delle slides!!!  [/UPDATE]

$downloadDir = "~\Desktop\VS2017Launch"
mkdir $downloadDir
Set-Location $downloadDir
[Environment]::CurrentDirectory=(Get-Location -PSProvider FileSystem).ProviderPath
$r = ([xml](new-object net.webclient).downloadstring("https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2017-Launch/RSS/mp4high"))
$r.rss.channel.item | ForEach-Object{
    Set-Location $downloadDir  
    $url = New-Object System.Uri($_.enclosure.url)
    $title = $_.title.trim().Replace(":", "-").Replace("?", "").Replace("/", "-").Replace("<", "").Replace("|", "").Replace('"',"").Replace("*","")

    $videodir = $title

    $file = $title + " - " + $_.creator
    $file = $file.substring(0, [System.Math]::Min(120, $file.Length))
    $file = $file.trim()
	
    if (!(test-path "$downloadDir\$videodir\$file.txt")) {
        mkdir $videodir
        Set-Location "$downloadDir\$videodir\"
        $OutFile = New-Item -type file "$file.txt" -Force  
        $Content = ""
        $Content = $_.title.trim() + "`r`n" + $_.summary.trim()
        add-content $OutFile $Content
    }
	
    if (!(test-path "$downloadDir\$videodir\$file.mp4")) {
        "Downloading: " + $file + ".mp4"
        $wc = (New-Object System.Net.WebClient)  
        $wc.DownloadFile($url, "$file.mp4")
        Move-Item "$downloadDir\$file.mp4" "$downloadDir\$videodir\"
    }
}

$s = ([xml](new-object net.webclient).downloadstring("https://channel9.msdn.com/Events/Visual-Studio/Visual-Studio-2017-Launch/RSS/slides"))
$s.rss.channel.item | ForEach-Object{
    Set-Location $downloadDir  
    $url = New-Object System.Uri($_.enclosure.url)
    $title = $_.title.Replace(":", "-").Replace("?", "").Replace("/", "-").Replace("<", "").Replace("|", "").Replace('"',"").Replace("*","")

    $videodir = $title

    $file = $title + " - " + $_.creator
    $file = $file.substring(0, [System.Math]::Min(120, $file.Length))
    $file = $file.trim()
	
    if (!(test-path "$downloadDir\$videodir\$file.pptx")) {
        "Downloading: " + $file + ".pptx"
        $wc = (New-Object System.Net.WebClient)  
        $wc.DownloadFile($url, "$file.pptx")
        Move-Item "$downloadDir\$file.pptx" "$downloadDir\$videodir\"
    }
}

 

Lancio Visual Studio 2017 e Virtual Training Web

Oggi alle 17 partirà in diretta lo streaming del lancio di Visual Studio 2017, che potrete seguire da qui: https://launch.visualstudio.com/

L'agenda è ricca e ci saranno speaker come Julia Liuson, Brian Harry, Miguel de Icaza e Scott Hanselman.
Vi inserisco qua sotto lo screenshoot dell'agenda.

Se non riuscite a seguirlo in diretta, sicuramente verrà registrato e inserito su Channel 9 a breve.

Altro evento molto interessante è quello del giorno dopo, sempre in diretta ma su MVA: https://mva.microsoft.com/liveevents/visual-studio-2017-launch-and-20th-anniversary-event-web-development
In questo streaming verranno affrontati alcuni argomenti in comune con quelli del giorno precedente ma verrà fatta una full immersion sulla parte prettamente web.
L'agenda sembra molto interessante e le novità, se non le avete già viste nella RC, saranno tante.

  • 8–9am “What’s new for developers in Visual Studio 2017”
  • 9–10am “Getting Started with ASP.NET Core in Visual Studio 2017”
  • 10–11am “Exploring and migrating to TypeScript”
  • 11–12pm “Building web apps powered by Angular 2.x using Visual Studio 2017”
  • 12–1pm “Create awesome bots, connectors, and tabs in Microsoft Teams”
  • 1–2pm “DevOps from the Azure Portal”
  • 2–3pm “Top 10 Entity Framework features every developer should know”
  • 3–4pm “Getting started with DocumentDB, plus demos with .NET & Node.js”

Microsoft Azure Storage Explorer si aggiorna alla versione 0.8.8

E' stata da poco rilasciata la nuova versione di Microsoft Azure Storage Explorer.
Per chi non lo conoscesse è un'applicazione cross platform che permette di esplorare praticamente tutti i tipi di storage presenti sul proprio (o propri) account di Azure.
Oltre a navigare il contenuto, è anche molto comodo per fare upload o download di file molto grandi.

In questa release le novità sono tante, fra le più importanti secondo me:

  • da questa versione in poi si aggiornerà automaticamente, senza dover scaricare l'installer ogni volta
  • hanno aggiunto il supporto ai caratteri Unicode nei metadata
  • hanno migliorato la stabilità durante gli upload di file di grandi dimesioni

Potete comunque la release notes completa al seguente link: http://storageexplorer.com/releasenotes.html

.NET Core: Zero to Hero

Vorrei segnalarvi questo video di Channel 9 rilasciato a inizio di gennaio in cui viene fatta una panoramica di .NET Core, dalle basi a operazioni un po' più avanzate.
Questo video è utile anche per chi vuol approcciare ad ASP.NET Core, in quanto spiega alcuni concetti del nuovo framework che sta alla base della nuova piattaforma di sviluppo web.

Questo il link del video: https://channel9.msdn.com/Events/Microsoft-Azure/AZGroups-Scott-Guthrie-2017/NET-Core

Utilizzare Visual Studio Code per collegarsi a SQL Server

Qualche post fa avevo fatto una lista delle estensioni per Visual Studio Code che utilizzo e che ritengo utili.
Una delle ultime che ho provato e ritengo comodissima è l'estensione per collegarsi ed eseguire query su SQL Server: https://aka.ms/mssql-marketplace

Questa estensione, ancora in preview, permette di connettersi a SQL Server, Azure SQL Server e SQL Data Warehouse.
Oltre a questo ha un intellisense che funziona molto bene e sopratutto permette di visualizzare i risultati delle query in una griglia, direttamente dentro Visual Studio Code.

Per installare l'estensione è molto semplice, come sempre.
Potete andare direttamente nel pannello delle estensioni di Visual Studio Code, cercare "mssql" e installare il primo risultato fra quelli proposti.
Se invece siete amanti dei comandi, potete premere Ctrl + Shift + P e immettere il comando: "ext install mssql".

La prima connessione

A questo punto non ci resta che effettuare la prima connessione a un database.
Per farlo è sufficiente premere Ctrl + Shift + P e scrivere "sql".
Vi compariranno in un menu a tendina tutti i comandi disponibili per il nuovo plugin appena installato.
Selezionado "MS SQL: Connect" partirà un wizard che vi guiderà alla connessione del database.
Se la connessione avrà esito positivo, nella barra in basso a destra potete vedere a che database siete connessi e con che utenza.

Eseguire la prima query

Una volta che vi sarete connessi, potete eseguire le query come in un normalissimo SQL Management Studio.
Se create, per esempio, un file denominato "query.sql" e ci inserite una query del tipo:

SELECT * FROM dbo.Product
WHERE dbo.Product.ShowOnHomePage = 1
GO

Potete eseguirla sul vostro database, semplicemente utilizzando la sequenza di tasti Ctrl + Shift + E.

Immediatamente i vostri risultati saranno visualizzati all'interno della stessa schermata di Visual Studio Code, sotto la vostra query.

Se invece i risultati vi venissero visualizzati di lato, potete cambiarne la posizione, selezionando dal menu "View", il comando "Toggle Editor Group Layout".

Operazioni sulla griglia dei risultati

Oltre ad avere informazioni utilissime come il numero de righe interessate dalla vostra query e soprattutto il tempo di esecuzione, Visual Studio Code vi mette a disposizione alcune funzionalità sulla griglia molto interessanti.
Ad esempio se cliccate con il tasto destro sulla griglia e seleziona "Select all" e successivamente "Save as JSON" vi vengono esportate le righe a video in un file JSON che potete utilizzare come volete.
Stessa cosa con un file CSV.
Un'altra funzione molto utile nel menu contestuale nella griglia è la possibilità di copiare le righe nella clipboard, con anche le intestazioni.
Questo vi permette per esempio di incollare i risultati in un file Excel in modo semplice e veloce.

 

Ovviamente tutto quello che ho scritto sopra, è disponibile sia per Mac e Linux.
Direi che non è poco. :)

L'importanza di scrivere bene il codice HTML e CSS

Spesso quando scriviamo codice C# stiamo molto attenti alla sintassi, a commentare bene il codice o comunque sia cerchiamo di seguire degli standard per far sì che chi legga il codice dopo di noi o noi stessi dopo qualche mese, risulti facilmente interpretabile, soprattutto nei passaggi più complessi.
Purtroppo questa cosa non accade spesso quando invece scriviamo codice HTML o CSS.
I motivi sono semplici:

  • non abbiamo un compilatore che ci impedisce di scrivere "come vuole lui"
  • la parte di UI è quella più soggetta a modifiche (anche all'ultimo momento)

Ovviamente scrivere bene il codice HTML e CSS ci fa risparmiare molto tempo se dobbiamo apportare delle modifiche e sopratutto il browser riesce a interpretarlo meglio e quindi renderizzarlo più velocemente.
Qua sotto provo a fare un elenco di alcuni degli accorgimenti che andrebbero adottati.
Ce ne sono tanti, ma inserirò quelli più importanti.

HTML

  • Usare sempre il doppio apice e mai il singolo sugli attributi
  • Non chiudere mai i tag che non hanno bisogno di chiusura (es. img)
  • Chiudere sempre i tag che hanno la chiusura opzionale
<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/logo.png" alt="Logo">
    <h1 class="title">My first page</h1>
  </body>
</html>
  • Impostare sempre l'attributo della lingua sul tag html. Questo aiuta anche gli strumenti di sintesi vocale a utilizzare il dizionario giusto
<html lang="it-it">
  • Per una facile lettura, gli attributi dei tag html dovrebbero rispettare il seguente ordine:
    • class
    • id
    • data-
    • src, href, value
    • title, alt
<a class="..." id="..." data-toggle="modal" href="#">
  Link
</a>
  • Gli attributi booleani non hanno bisogno del valore, quindi meglio non specificarlo (es. disabled, checked)
<input id="todo" type="checkbox" value="1" checked>

CSS

  • Quando si usano più selettori per un classe, andare a capo per ognuno di essi
  • Inserire uno spazio dopo i :
  • Non inserire lo 0 quando un numero inizia per 0 (es. .8)
  • Usare i caratteri minuscoli per i valori esadecimali (es. #ccc)
  • Non specificare l'unità di misura per i valori impostati a 0 (es. margin: 0)
.title,
.title-secondary {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
  • Seguire sempre lo stesso ordine quando si dichiara un classe
    • Posizione
    • Box-model
    • Font e colori
    • Sfondo e bordi
    • Altro
.title-primary {
  /* Posizione */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Font */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Sfondo e bordi */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Altro */
  opacity: 1;
}
  • Le definizioni di classi di visualizzazione alternativa con media queries è buona norma inserirle subito sotto la classe originale. In questo modo si trova facilmente.
  • Non utilizzare file separati per le definizioni delle media queries
.title { ... }

@media (min-width: 960px) {
  .title { ...}
}
  • Evitare di utilizzare le dichiarazioni abbreviate per gli elementi che lo supportano. In questo modo vengono settati anche i valori che non vengono utilizzati.
    Gli elementi più comuni sono:
    • margin
    • padding
    • background
    • border
.title {
  margin-bottom: 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
  • Cercare di inserire commenti che spiegano il significato di quello che c'è scritto sotto
  • Non scrivere nel commento la stessa cosa che c'è scritta nel nome della classe
/* the title of homepage and contact page */
.title {
  ...
}
  • I nomi delle classi devono essere minuscoli
  • Si può usare il simbolo - per separare eventuali parole, non _
  • Cercare di fare le classi più piccole possibili, in modo da poter riutilizzarle più facilmente
.title { ... }
.important { ... }
.title-header { ... }

 

E voi, quanti di questi accorgimenti stavate usando? :)