Esercizio: Aggiornare un portfolio JavaScript con GitHub Copilot

Completato

Si esamini ora come è possibile usare i suggerimenti per il codice da GitHub Copilot. In questo esercizio si aggiungeranno animazioni con suggerimenti live e si userà un prompt per personalizzare il comportamento di scorrimento da un repository di modelli JavaScript già esistente. Con GitHub Copilot è possibile lavorare rapidamente con una situazione JavaScript reale.

Portfolio JavaScript

Indipendentemente dal fatto che l'utente sia uno studente, un giovane laureato o un professionista esperto, il portfolio è il suo spazio personale per mostrare le proprie competenze ed esperienze.

Avere un portfolio fornisce credibilità e notorietà all'esperienza menzionata nel curriculum quando ci si candida per un impiego, per i Data Scientist come per gli UX Designer o gli sviluppatori front-end. Una forte presenza online può aiutare a ottenere un lavoro e farsi scoprire.

Nota

Per questo esercizio, usare Codespace con l'ambiente preconfigurato nel browser.

Personalizzare il portfolio JavaScript

In questo portfolio di modelli è disponibile un'applicazione Web basata su React per personalizzare e distribuire facilmente solo il Web browser.

Prima di iniziare, è possibile personalizzare il portfolio con i propri collegamenti. Passare a src/App.jsx e aggiornare siteProps con le proprie informazioni. La variabile siteProps è un oggetto JavaScript che contiene coppie chiave-valore usate per personalizzare il sito e dovrebbe essere simile a quanto segue:

const siteProps = {
  name: "Alexandrie Grenier",
  title: "Web Designer & Content Creator",
  email: "alex@example.com",
  gitHub: "microsoft",
  instagram: "microsoft",
  linkedIn: "satyanadella",
  medium: "",
  twitter: "microsoft",
  youTube: "Code",
};

Animare le icone dei social media con un prompt

Un'animazione può rendere più accattivante la sezione dei social media. Chiedere aiuto a Copilot per animare le icone. È possibile usare GitHub Copilot Chat per chiedere a Copilot o scrivere il commento richiesta seguente nel file src/styles.css :

/* add an amazing animation to the social icons */

Il suggerimento di Copilot dovrebbe essere simile al seguente:

img.socialIcon:hover {
  animation: bounce 0.5s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

Accettare il suggerimento premendo il tasto "Tab". Se non si riceve lo stesso suggerimento esatto, è possibile provare con il suggerimento fornito o continuare a digitare il codice CSS fino a quando non corrisponde.

Il sito dovrebbe essere già in esecuzione in Codespace e la modifica verrà ricaricata automaticamente nella pagina. Per vederla, passare il mouse su una delle icone dei social media nel piè di pagina e scoprire la magia.

Congratulazioni, tramite l'esercizio non solo si è usato Copilot per generare codice, ma lo si è fatto anche in modo interattivo e divertente. È possibile usare GitHub Copilot non solo per generare codice, ma anche per scrivere documentazione, testare applicazioni e altro ancora.

Al termine dell'esercizio in GitHub, tornare qui per:

• Una rapida verifica delle conoscenze
• Un riepilogo delle conoscenze acquisite
• Un badge per il completamento del modulo