One place for hosting & domains

      Increase App Confidence Using CI/CD and Infrastructure As Code


      Video

      About the Talk

      Ever run code changes through CI/CD and everything passed clean and green in the pipeline checks, then experience undetected critical failures in the live target environment post-deployment?

      This scenario is very common and impacts many teams and organizations, even teams with the most rigorous testing practices. In most cases, this behavior can be eliminated by running basic smoke tests on the application live in their target environments. Smoke testing apps in target environments will expose unwanted patterns/behaviors and provide a solid understanding of how the application will perform.

      This talk will discuss the advantages of implementing smoke test patterns into CI/CD pipelines using Infrastructure as Code (IaC).

      What You’ll Learn

      • How teams can leverage automation to ensure apps are tested live in target environments.
      • How to leverage Infrastructure as Code to provision Kubernetes clusters, deploy apps, and test live then destroy all the resources created in a single CI/CD pipeline run.

      Resources

      About the Presenter

      Angel Rivera is a Developer Advocate at CircleCI. He started his career as an US Air Force Space Systems Operations specialist in Cape Canaveral AF Station where he realized his passion for technology and software development. He has extensive experience in the private, public and military sectors and his technical experience includes military/space lift operations, technical writing, software development, and SRE/DevOps engineering. He also has a wealth of experience in defense and federal sectors such as contracting, information systems security and management.



      Source link

      Verwenden der Git-Integration in Visual Studio Code


      Einführung

      Visual Studio Code (VS-Code) hat sich zu einem der beliebtesten Editoren für die Webentwicklung entwickelt. Dank seiner vielen integrierten Funktionen wie der Integration der Quellcodeverwaltung, insbesondere mit Git, hat er eine solche Popularität erlangt. Die Nutzung der Leistungsfähigkeit von Git innerhalb von VS-Code kann Ihren Workflow effizienter und robuster machen.

      In diesem Tutorial erkunden Sie die Verwendung der Quellcodeverwaltungs-Integration in VS-Code mit Git.

      Voraussetzungen

      Um dieses Tutorial zu absolvieren, benötigen Sie Folgendes:

      Schritt 1 — Vertrautmachen mit der Registerkarte Quellcodeverwaltung

      Was Sie zuerst tun müssen, um die Vorteile der Quellcodeverwaltung-Integration zu nutzen, ist die Initialisierung eines Projekts als Git-Repository.

      Öffnen Sie Visual Studio Code und greifen Sie auf das integrierte Terminal zu. Sie können dies durch Verwendung der Tastenkombination STRG+` unter Linux, macOS oder Windows öffnen.

      Erstellen Sie in Ihrem Terminal ein Verzeichnis für ein neues Projekt und wechseln Sie in dieses Verzeichnis:

      • mkdir git_test
      • cd git_test

      Erstellen Sie dann Git-Repository:

      Eine weitere Möglichkeit, dies mit Visual Studio Code zu bewerkstelligen, ist das Öffnen der Registerkarte Quellcodeverwaltung (das Symbol sieht aus wie eine Straßenverzweigung) im linken Bereich:

      Symbol für Quellcodeverwaltung

      Wählen Sie als Nächstes Open Folder (Ordner öffnen):

      Screenshot mit der Schaltfläche „Ordner öffnen“

      Dadurch wird Ihr Datei-Explorer für das aktuelle Verzeichnis geöffnet. Wählen Sie das bevorzugte Projektverzeichnis und klicken Sie auf Open (Öffnen).

      Wählen Sie dann Initialize Repository (Repository initialisieren):

      Screenshot, der die Schaltfläche „Repository initialisieren“ zeigt

      Wenn Sie nun Ihr Dateisystem überprüfen, sehen Sie, dass es ein Verzeichnis .git enthält. Verwenden Sie dazu das Terminal, um zu Ihrem Projektverzeichnis zu navigieren und alle Inhalte aufzulisten:

      Sie sehen das erstellte Verzeichnis .git:

      Output

      Nachdem das Repository nun initialisiert wurde, fügen Sie eine Datei namens index.html hinzu.

      Nachdem Sie dies getan haben, sehen Sie im Fenster Source Control (Quellcodeverwaltung), dass Ihre neue Datei mit dem Buchstaben U daneben angezeigt wird. U steht für unverfolgte Datei, d. h. eine Datei, die neu ist oder geändert wurde, aber dem Repository noch nicht hinzugefügt wurde:

      Screenshot einer unverfolgten Datei mit dem Buchstaben U-Indikator

      Sie können jetzt auf das Plus-Symbol (+) neben der Auflistung der Datei index.html klicken, um die Datei nach dem Repository zu verfolgen.

      Sobald die Datei hinzugefügt wurde, ändert sich der Buchstabe neben der Datei an eine A. A steht für eine neue Datei, die dem Repository hinzugefügt wurde.

      Um Ihre Änderungen zu übergeben, geben Sie eine Übergabe-Nachricht in das Eingabefeld oben im Fenster Source Control (Quellcodeverwaltung) ein. Klicken Sie dann auf das Prüfsymbol, um die Übergabe auszuführen.

      Screenshot einer hinzugefügten Datei mit dem Buchstabe-A-Indikator und der Übergabenachricht

      Danach werden Sie feststellen, dass keine Änderungen ausstehen.

      Fügen Sie als Nächstes Ihrer Datei index.html etwas Inhalt hinzu.

      Sie können eine Emmet-Verknüpfung verwenden, um ein HTML5-Skelett in VS-Code zu generieren, indem Sie die Taste ! drücken, gefolgt von der Taste Tab. Fahren Sie fort und fügen Sie dem <body> etwas wie eine Überschrift <h1> hinzu, und speichern Sie anschließend.

      Im Fenster Quellcodeverwaltung sehen Sie, dass Ihre Datei geändert wurde. Daneben wird der Buchstabe M angezeigt, der für eine modifizierte Datei steht:

      Screenshot der geänderten Datei mit dem Buchstabe-M-Indikator

      Zur Übung sollten Sie auch diese Änderung übergeben.

      Nachdem Sie nun mit der Bedienung des Quellcodeverwaltungsfensters vertraut sind, fahren Sie mit der Interpretation der „Gutter“-Indikatoren fort.

      Schritt 2 — Interpretation der Gutter-Indikatoren

      In diesem Schritt werfen Sie einen Blick auf das sogenannte „Gutter“ in VS-Code. Das Gutter ist der schmale Bereich rechts neben der Zeilennummer.

      Wenn Sie zuvor Code-Folding verwendet haben, befinden sich die Symbole für Maximieren und Minimieren im Gutter.

      Beginnen wir damit, eine kleine an Ihrer Datei index.html vorzunehmen, beispielsweise eine Änderung des Inhalts innerhalb des Tags <h1>. Danach werden Sie eine blaue vertikale Markierung im Gutter der Zeile, die Sie geändert haben, bemerken. Die vertikale blaue Markierung bedeutet, dass die entsprechende Codezeile geändert wurde.

      Versuchen Sie nun, eine Codezeile zu löschen. Sie können eine der Zeilen im Abschnitt <body> Ihrer Datei index.html löschen. Beachten Sie, dass im Gutter nun ein rotes Dreieck vorhanden ist. Das rote Dreieck kennzeichnet eine Zeile oder eine Gruppe von Zeilen, die gelöscht.

      Fügen Sie schließlich am Ende Ihres Abschnitts <body> eine neue Codezeile hinzu und beachten Sie den grünen Balken. Der vertikale grüne Balken steht für eine hinzugefügte Codezeile.

      Dieses Beispiel zeigt Gutter-Indikatoren für eine geänderte Zeile, eine entfernte Zeile und eine neue Zeile:

      Screenshot mit Beispielen der drei Arten von Gutter-Indikatoren

      Schritt 3 — Vergleichen von Dateien

      VS-Code bietet auch die Möglichkeit, einen Vergleich mit einer Datei auszuführen. Normalerweise müssten Sie dafür ein separates Diff-Tool herunterladen, sodass diese integrierte Funktion Ihnen dabei helfen kann, effizienter zu arbeiten.

      Um einen Vergleich anzuzeigen, öffnen Sie das Quellcodeverwaltungsfenster und doppelklicken Sie auf eine geänderte Datei. Doppelklicken Sie in diesem Fall auf die Datei index.html. Sie werden zu einer typischen Diff-Ansicht mit der aktuellen Version der Datei auf der linken und der zuvor übergebenen Version der Datei auf der rechten Seite gebracht.

      Dieses Beispiel zeigt, dass in der aktuellen Version eine Zeile hinzugefügt wurde:

      Screenshot mit einem Beispiel einer geteilten Bildschirmanzeige eines Vergleichs

      Schritt 4 — Arbeiten mit Zweigen

      In der unteren Leiste haben Sie die Möglichkeit, Zweige zu erstellen und zu wechseln. Wenn Sie einen Blick auf die unterste linke Ecke des Editors werfen, sollten Sie das Quellcodeverwaltungs-Symbol sehen (dasjenige, das wie eine Weggabelung aussieht), gefolgt höchstwahrscheinlich von master oder dem Namen des aktuellen Arbeitszweigs.

      Zweigindikator in der unteren Leiste von VS-Code mit der Anzeige „master“

      Um einen Zweig zu erstellen, klicken Sie auf diesen Zweignamen. Es sollte sich ein Menü öffnen, das Ihnen die Möglichkeit gibt, einen neuen Zweig zu erstellen:

      Eingabeaufforderung zur Erstellung eines neuen Zweigs

      Fahren Sie fort und erstellen Sie einen neuen Zweig namens test.

      Nehmen Sie nun eine Änderung an Ihrer Datei index.html vor, die anzeigt, dass Sie sich in dem neuen Zweig test befinden, indem Sie beispielsweise den Text „this is the new test branch“ (Dies ist der neue Testzweig) hinzufügen.

      Übergeben Sie diese Änderungen an den Zweig test. Klicken Sie dann erneut auf den Zweignamen unten links, um wieder zu dem Zweig master zu wechseln.

      Nach dem Wechsel zum Zweig master werden Sie feststellen, dass der Text this is the new test branch (Dies ist der neue Testzweig), der dem Zeig test übergeben wurde, nicht mehr vorhanden ist.

      Schritt 5 — Arbeiten mit Remote-Repositorys

      In diesem Tutorial wird nicht im Detail darauf eingegangen, aber über das Quellcodeverwaltungsfenster haben Sie Zugriff auf die Arbeit mit Remote-Repositorys. Wenn Sie schon mit einem Remote-Repository gearbeitet haben, werden Ihnen vertraute Befehle wie pull, sync, publish, stash usw. auffallen.

      Schritt 6 — Installieren nützlicher Erweiterungen

      VS-Code enthält nicht nur viele integrierte Funktionen für Git, es gibt auch einige sehr beliebte Erweiterungen, um zusätzliche Funktionalität hinzuzufügen.

      Git Blame

      Diese Erweiterung bietet die Möglichkeit, Git Blame-Informationen in der Statusleiste für die aktuell ausgewählte Zeile anzuzeigen.

      Dies kann einschüchternd klingen, aber keine Sorge, bei der Erweiterung „Git Blame“ geht es viel mehr um Praktikabilität als darum, jemandem ein schlechtes Gewissen einzureden. Bei der Idee, jemandem „ein schlechtes Gewissen“ für eine Code-Änderung einzureden geht es weniger darum, diese Person zu beschämen, als vielmehr darum, die richtige Person zu finden, der man Fragen zu bestimmten Teilen des Codes stellen kann.

      Wie Sie auf dem Screenshot sehen können, bietet diese Erweiterung in der unteren Symbolleiste eine subtile, auf die aktuelle Codezeile, die Sie gerade bearbeiten, bezogene Nachricht, die erklärt, wer die Änderung vorgenommen hat und wann sie vorgenommen wurde.

      Git Blame in der unteren Symbolleiste

      Git History

      Obwohl Sie mit den integrierten Funktionen in VS-Code aktuelle Änderungen anzeigen, Vergleiche durchführen und Zweige verwalten können, bietet es keinen detaillierten Einblick in Ihren Git-Verlauf. Die Erweiterung Git History löst dieses Problem.

      Wie Sie in der nachstehenden Abbildung sehen können, ermöglicht diese Erweiterung Ihnen, den Verlauf einer Datei, eines bestimmten Autors, eines Zweigs usw. sorgfältig zu untersuchen. Um das nachstehende Fenster „Git History“ zu aktivieren, klicken Sie mit der rechten Maustaste auf eine Datei und wählen Sie Git: View File History:

      Ergebnisse der Erweiterung „Git History“

      Zusätzlich können Sie Zweige und Übergaben vergleichen, Zweige aus Übergaben erstellen und vieles mehr.

      Git Lens

      Git Lens erweitert die in Visual Studio Code integrierten Git-Funktionen. Es hilft Ihnen, die Code-Autorenschaft auf einen Blick mittels Git Blame-Annotationen und Code Lens zu visualisieren, nahtlos durch Git-Repositorys zu navigieren und diese zu erkunden, wertvolle Erkenntnisse über leistungsstarke Vergleichsbefehle zu gewinnen und vieles mehr.

      Die Erweiterung „Git Lens“ ist eine der beliebtesten in der Gemeinschaft und ist auch die leistungsstärkste. In den meisten Fällen kann sie mit ihrer Funktionalität jede der beiden vorherigen Erweiterungen ersetzen.

      Für „Blame“-Informationen erscheint rechts neben der Zeile, an der Sie gerade arbeiten, eine subtile Nachricht, die Sie darüber informiert, werde die Änderung vorgenommen hat, wann sie vorgenommen wurde und die zugehörige Übergabemeldung. Es gibt einige zusätzliche Informationen, die angezeigt werden, wenn Sie mit der Maus über diese Nachricht fahren, wie die Code-Änderung selbst, der Zeitstempel und mehr.

      Git Blame-Funktionalität in Git Lens

      Für Git-Verlaufsinformationen bietet diese Erweiterung eine Vielzahl von Funktionen. Sie haben einfachen Zugriff auf zahlreiche Optionen, darunter die Anzeige des Dateiverlaufs, die Durchführung von Vergleichen mit vorherigen Versionen, das Öffnen einer bestimmten Revision und vieles mehr. Um diese Optionen zu öffnen, können Sie auf den Text in der unteren Statusleiste klicken, der den Autor enthält, der die Codezeile bearbeitet hat und wie lange es her ist, dass sie bearbeitet wurde.

      Dadurch wird das folgende Fenster geöffnet:

      Git History-Funktionalität in Git Lens

      Diese Erweiterung ist vollgepackt mit Funktionalität und es wird eine Weile dauern, bis Sie alles, was sie zu bieten hat, aufgenommen haben.

      Zusammenfassung

      In diesem Tutorial haben Sie erkundet, wie die Integration der Quellcodeverwaltung mit VS-Code verwendet wird. VS-Code kann mit vielen Funktionen umgehen, für die zuvor ein separates Tool heruntergeladen werden musste.



      Source link

      Cómo formatear código con Prettier en Visual Studio Code


      Introducción

      Formatear código de forma consistente puede ser un desafío, pero las herramientas modernas para el desarrollador hacen que sea posible mantener automáticamente la consistencia en toda la base de código de su equipo.

      En este artículo, configurará Prettier para que formatee de forma automática su código en Visual Studio Code, también conocido como VS Code.

      A efectos de demostración, aquí tiene el código de muestra que formateará:

      const name = "James";
      
      const person ={first: name
      }
      
      console.log(person);
      
      const sayHelloLinting = (fName) => {
      console.log(`Hello linting, ${fName}`)
      }
      
      sayHelloLinting('James');
      

      Si está familiarizado con el formateo de código, es posible que observe pasos erróneos:

      • Una mezcla de comillas simples y dobles.
      • La primera propiedad del objeto person debería estar en su propia línea.
      • La instrucción de la consola dentro de la función debería estar con sangría.
      • Es posible que no le gusten los paréntesis opcionales que rodean el parámetro de la función de flecha.

      Requisitos previos

      Para seguir este tutorial, necesitará descargar e instalar Visual Studio Code.

      Para trabajar con Prettier en Visual Studio Code, deberá instalar la extensión. Para hacer esto, busque Prettier - Code Formatter en el panel de extensión de VS Code. Si lo está instalando por primera vez, verá un botón install en vez del botón uninstall mostrado aquí:

      Readme de la extensión Prettier

      Paso 1: Usar el comando Format Document

      Con la extensión Prettier instalada, ahora puede usarla para formatear su código. Para comenzar, vamos a explorar el uso del comando Format Document. Este comando hará que su código sea más consistente con el espaciado formateado, el ajuste de líneas y las comillas.

      Para abrir la paleta de comandos, puede usar COMMAND + SHIFT + P en macOS o CTRL + SHIFT + P en Windows.

      En la paleta de comandos, busque format y seleccione Format Document.

      Paleta de comandos abierta con resultados para formatear

      Quizá se le pida elegir qué formato usar. Para hacerlo, haga clic en el botón Configure:

      Instrucción para seleccionar un formateador predeterminado

      Seleccione Prettier – Code Formatter.

      Selección de Prettier

      Nota: Si no ve una instrucción para seleccionar un formato predeterminado, puede cambiar esto manualmente en sus Ajustes. Establezca Editor: Default Formatter a ebsenp.prettier-vscode.

      Su código ahora está formateado con espacios, ajuste de líneas y comillas consistentes:

      const name="James";
      
      const person = { first: name };
      
      console.log(person);
      
      const sayHelloLinting = (fname) => {
        console.log(`Hello linting, ${fName}`);
      }
      
      sayHelloLinting('James');
      

      Esto también funciona en archivos CSS. Puede convertir algo con sangría inconsistente, corchetes, nuevas líneas y puntos y comas en código con un buen formato. Por ejemplo:

      body {color: red;
      }
      h1 {
        color: purple;
      font-size: 24px
      }
      

      Se formateará a:

      body {
        color: red;
      }
      h1 {
        color: purple;
        font-size: 24px;
      }
      

      Ahora que hemos explorado este comando, vamos a ver cómo esto puede implementarse para que se ejecute automáticamente.

      Paso 2: Formatear código en Save

      Hasta ahora, ha tenido que ejecutar manualmente un comando para formatear su código. Para automatizar este proceso, puede elegir un ajuste en VS Code para que sus archivos se formateen automáticamente cuando guarde. Esto también garantiza que el código no se comprueba a un control de la versión que no esté formateado.

      Para cambiar este ajuste, pulse COMMAND + en macOS o CTRL + ,en Windows para abrir el menú Settings. Una vez abierto el menú, busque Editor: Format On Save y asegúrese de que la opción está seleccionada:

      Editor: Format On Save seleccionado

      Una vez configurado esto, puede escribir su código de la forma habitual y se formateará automáticamente cuando guarde el archivo.

      Paso 3: Cambiar los ajustes de configuración de Prettier

      Prettier hace muchas cosas por usted de forma predeterminada, pero también puede personalizar la configuración.

      Abra el menú Settings. A continuación busque Prettier. Esto abrirá todos los ajustes que puede cambiar:

      Ajustes de configuración para Prettier

      Aquí tiene algunos de los ajustes más comunes:

      • Single Quote – Elija entre comillas sencillas y dobles
      • Semi – Elija si desea incluir o no puntos y comas al final de las líneas.
      • Tab Width – Especifique cuántos espacios desea que inserte el tabulador.

      La desventaja de usar el menú de ajustes integrados en VS Code es que no garantiza la consistencia entre los desarrolladores de su equipo.

      Paso 4: Crear un archivo de configuración de Prettier

      Si cambia los ajustes en VS Code, otra persona podría tener una configuración completamente diferente en su equipo. Puede establecer un formato consistente entre todo su equipo creando un archivo de configuración para su proyecto.

      Cree un nuevo archivo llamado .prettierrc.extension con una de las siguientes extensiones:

      Aquí tiene un ejemplo de un archivo de configuración sencillo usando JSON:

      {
        "trailingComma": "es5",
        "tabWidth": 4,
        "semi": false,
        "singleQuote": true
      }
      

      Para obtener más información sobre los archivos de configuración, eche un vistazo a la documentación de Prettier. Tras crear uno de estos archivos e introducirlo en su proyecto, puede garantizar que todos los miembros de su equipo siguen las mismas reglas de formato.

      Conclusión

      Tener un código consistente es una buena práctica. Es particularmente beneficioso cuando se trabaja en un proyecto con múltiples colaboradores. Acordar un conjunto de configuraciones ayuda en la legibilidad y comprensión del código. Puede dedicarse más tiempo a resolver problemas técnicos difíciles en vez de luchar contra problemas resueltos como la sangría del código.

      Prettier garantiza consistencia en el formato de su código y hace que el proceso sea automático.



      Source link