Categories
Development Java Linux

GitHub Codespace

I was on JCON 2024 and beside other interesting talks I heard one talk about cloud-based IDEs, and I wanted to try out, if GitHub Codespaces could work for me.

Explore the evolving landscape of cloud-based integrated development environments (IDEs), focusing on Gitpod, GitHub codespaces and Devpod. Compare and contrast these cloud IDEs with traditional counterparts, emphasizing the role of container technology, specifically the devcontainer specification. The discussion includes advances, existing limitations, and the potential for developing polyglot, container-based distributed applications. A live demo illustrates the rapid setup and coding process across various languages and frameworks, showcasing testing capabilities and seamless deployment to Kubernetes. Discover how custom additions enhance flexibility. Additionally, uncover the impact of cloud IDEs on teaching and team projects, ensuring consistent development setups for enhanced efficiency and streamlined processes.

[EN] Codespaces, Gitpod, Devpod ... what cloud and container-based IDEs can do for you
by Matthias Haeussler (Novatec Consulting GmbH)

Create GitHub Account

Go to GitHub and create an account. Free plan is suitable.

Create Repository

Create a new repository with name “workshop”. Add a README file.

Create Codespace

TODO: funktioniert das GIF?

Change Keyboard Layout to German: In the lower right corner click on “Layout: US” and enter “German” in the upcoming window.

TODO: Ich hätte gerne die Sprache von Visual Code auf Englisch umgestellt. Wie?

Work in the Terminal

Copy & Paste

Type something into the terminal.
Mark it with your mouse.
One Right Click to copy into Clipboard.
Another Right Click to paste from Clipboard.

Timezone

Set Timzone to Europe -> Berlin

sudo dpkg-reconfigure tzdata

Internet

Do we have access to the Internet? Let’s try with curl:

curl google.com

HTTPie

A modern alternative to curl is HTTPie:

Install httpie:

sudo apt update && \
sudo apt upgrade -y && \
sudo apt install httpie -y

This will take a few minutes. Meanwhile we can work in another Terminal window. Later we come back and test HTTPie:

http google.com

Additional Terminal window

Open a second Terminal with bash:

VIM

ls -lisah
touch test.sh
ls -lisah
vim test.sh
chmod +x test.sh
./test.sh
name=Ingo
echo "My name is $name"
echo "But here I am: $(whoami)"

Python

Do we have Python in our Codespace? Which version(s)?

python3 --version
python --version
vim hello_world.py
python hello_world.py
# Print "Hello World" to the console 
print("Hello World") 

Docker

docker --version
docker-compose --version
docker run hello-world 

Apache HTTPD

docker run -p 8888:80 httpd

Open in Browser:

Find all open Ports in the Ports-Tab:

Normally Port 8888 should be listed here.
We need to add Port, just enter 8888:

Open Website just with a click on the Globus-Icon.

When we try to open the address in another browser, we will see a GitHub-Login.
When we login with another GitHub-Account, we will get a 404-error. Because the page is Private.
Switch to Public:

Now we can access the page in another brower.

At the end we can shutdown HTTPD with <STRG>+<C> in Terminal window. It should automatically disapear in the Ports-Tab. If not, you can remove it manually.

Microsoft Edge - Caching problem

Open the Public page in MS Edge.
Make the page Private again. Try to open in a new browser, won’t work.
Reload (the Public loaded) page in MS Edge: You can still see the site!
This is a cached version and we need to force MS Edge to reload from server.

Open Developer Tools (F12 or <STRG>+<SHIFT>+<I>), then you can Right Click on the reload button to have additional options:

Java

java --version
vim HelloWorld.java
javac HelloWorld.java
java HelloWorld
rm -f HelloWorld*
class HelloWorld { 
  public static void main(String args[]) { 
      System.out.println("Hello World"); 
  } 
}

Run Java Source as Shell Scripts

type -a java
# java is /home/codespace/java/current/bin/java
# java is /usr/local/sdkman/candidates/java/current/bin/java

vim HelloWorld.sh
chmod +x HelloWorld.sh
./HelloWorld.sh
rm HelloWorld.sh
#!/home/codespace/java/current/bin/java --source 21 

class HelloWorld { 
  public static void main(String args[]) { 
      System.out.println("Hello World"); 
  } 
}

Maven

Start

We create a new pom.xml from scratch.
We need a template. We will take “The Basics”-one from the Apache Maven POM Reference page.

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>
     
      <groupId>org.codehaus.mojo</groupId>
      <artifactId>my-project</artifactId>
      <version>1.0</version>
    </project>
mvn --version
vim pom.xml
mvn clean verify 

Sample Project

Open pom.xml in Explorer (GUI) and change:

  • org.codehaus.mojo to org.acme
  • my-project to workshop

No need to save: Changes are automatically saved

To doublecheck that everything is still ok run mvn clean verify  again.

mkdir -p src/main/java/org/acme
touch src/main/java/org/acme/HelloWorld.java 

Open HelloWorld.java with <STRG>+<MOUSECLICK> in GUI-Editor.

Install Extension Pack for Java as suggested:

And also the next two suggestions:

package org.acme;

class HelloWorld { 
  public static void main(String args[]) { 
      System.out.println("Hello World"); 
  } 
}
mvn package
java -classpath ./target/workshop-1.0.jar org.acme.HelloWorld

Maven - different version

In our Codespace we have Maven 3.9.6 and Java 21.
Let’s test with a different version. We will use Docker.

Official Maven Image on DockerHub.

We want to re-use the local Maven Cache. Let’s find out where it is:

sudo apt install locate -y
sudo updatedb
locate .m2
# /home/codespace/.m2

Adjust the “How to use this image” command:

docker run -it --rm \
--name workshop-maven-project \
-v /home/codespace/.m2:/root/.m2 \
-v "$(pwd)":/usr/src/workshop \
-w /usr/src/workshop \
maven:3.3-jdk-8 \
mvn clean package
java -classpath ./target/workshop-1.0.jar org.acme.HelloWorld

Sourcecode management

We have 7 uncommited changes, but only 2 files should go into the repository:

What we need is a .gitignore file.

touch .gitignore

There are two template files we will copy:

Now there are only 3 files we can commit:

Now we can see these files in our repository:

Secrets

Use GitHub Secrets for API-keys etc.

In the upper-right corner of any page, click your profile photo, then click Settings. Under Codespaces we can set our secrets:

In our Codespace we can access the secret as environment variable:

A running codespace has to be restarted!

Cleanup

Delete all files:

rm -rf target && \
rm -rf src && \
rm pom.xml && \
rm README.md && \
rm .gitignore

Stage & commit changes:

Now we have a clean repository:

Close browser window with codespace and delete the codespace:

Delete the repository:

Go to Settings → General → Danger Zone → Delete this repository

Categories
Development

GitHub Security

Dependabot

Habe gestern gehört, dass es auf GitHub einen Dienst gibt, der die Aktualität der verwendeten Bibliotheken überwacht und über neuere Versionen informiert.

Der Dienst heißt Dependabot

Auf GitHub gibt es einen Blog Eintrag dazu und GitHub-Dokumentation gibt es auch.

Dependabot einrichten

Im Projekt wird Maven verwendet und daher lautet das package-ecosystem laut Dokumentation überraschenderweise: "maven":

Pull request

Dass es funktioniert hat, konnte ich direkt daran sehen, dass ein Pull request angezeigt wird:

Merge & confirm pull request. Und schon ist die pom.xml wieder up to date. Das war ja einfach.

Dependabot security updates

Da die version updates so gut geklappt haben, aktiviere ich die security updates, für die auch die alerts aktiviert werden müssen:

Das Aktivieren hat keine Auswirkungen gezeigt, vermutlich ist mein Sample Projekt schon sicher.

Code scanning

Als Sprache wurde Java automatisch erkannt, daher kann die Konfigurationsdatei unverändert gespeichert werden.

Unter Actions kann ich sehen, dass der Code scanning workflow gelaufen ist und es Probleme gibt:

Logfiles suchen und herunterladen, da sie zu lang für den Webviewer sind.

Fatal error compiling: error: invalid target release: 17

Hier findet sich ein Hinweis: "Have you set up a Java 17 environment on Actions using https://github.com/actions/setup-java?"

Die Dokumentation hilft weiter und der Workflow wird um einen Schritt erweitert: Set up JDK 17

Docx4JSample/.github/workflows/codeql.yml
    - name: Set up JDK 17
      uses: actions/setup-java@v3
      with:
        java-version: '17'
        distribution: 'temurin'

Anschließend läuft der Job durch:

Der Erfolg des Scans findet sich im Security Tab unter Code scanning:

Secret scanning

Receive alerts on GitHub for detected secrets, keys, or other tokens.

https://github.com/DerIngo/Docx4JSample/settings/security_analysis

Klingt interessant. Mein Projekt hat keine Secrets, also füge ich erstmal eine Properties-Datei mit einem geheimen Passwort hinzu:

Anschließend wird das Secret scanning aktiviert:

Es wird kein Secret Alert ausgelöst:

Anschließend füge ich dem password auch noch ein username hinzu, aber das Ergebnis bleibt das Gleiche.

In der Dokumentation finden sich Supported secrets, ich probiere eines davon ("adafruit_io_key") als Property-Eintrag aus. aber das Ergebnis bleibt das Gleiche.

Ich suche nach "adafruit_io_key" und erweitere die Properties-Datei ein weiteres mal:

Aber das Ergebnis bleibt das Gleiche.

Ich probiere es mit einer weiteren Secret Datei:

Aber das Ergebnis bleibt das Gleiche.

Also sind meine Fake-Credentials zu billig, als dass GitHub darauf anspringt, oder das Feature funktioniert anders als gedacht.

Categories
Blog Development

Mermaid

Vor einigen Wochen hat ein Kollege in einem internen TecTalk das Tool Mermaid vorgestellt und mein Interesse geweckt.

Mit Mermaid kann man Diagramme erstellen. Das können andere Tools auch, aber Mermaid verfolgt einen eigenen Ansatz: Während andere Tools Diagramme erzeugen, die zB als Bilder (png, jpeg, ...) exportiert und so in anderen Dokumenten verwendet werden können, generiert Mermaid die Diagramme aus Code/Text heraus.

Mermaid
Generate diagrams from markdown-like text.

GitHub - mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

Dadurch, dass die Diagramme aus Code generiert werden, sind sie sehr leicht anpassbar und können beispielsweise in der Projekt Readme verwendet werden, ohne dass erst das Diagramm in einem eigenen Tool bearbeitet, exportiert, in das Projekt kopiert und in der Readme verlinkt werden muss.

-> "Documentation as Code"

Homepage von Mermaid

GitHub von Mermaid

Live Editor um direkt online loslegen zu können

Klingt auf jeden Fall sehr interessant, auf diese Weise etwas schnell grafisch dokumentieren zu können.

Ich werde die Integration in WordPress, GitHub und Eclipse ansehen.

Beispiel

Diesen Code:

Beispielcode

wandelt Mermaid in dieses Diagramm um:

Bild eines Mermaid-Diagrammes

Das Beispiel ist aus dem Live Editor von Mermaid.

WordPress

Die Auswahl an WordPress Plugins für Mermaid ist überschaubar:

Aufgrund der Anzahl aktiver Installationen entscheide ich mich für ein Plugin von Terry Lin. Ich habe erst überlegt, nur das reine Mermaid Plugin zu nehmen, mich dann aber für den kompletten Markdown Editor mit Mermaid Unterstützung entschieden, denn es könnte eine gute Ergänzung zu meinen Code Mirror Block Plugin sein.

WP Githuber MD installiert. Getestet. Deinstalliert.
Problem: Mit dem Plugin kann man NUR noch den Markdown Editor verwenden und nicht mehr den Live Editor von WordPress.
Ich möchte aber gezielt einzelne Markdown bzw. Mermaid Blöcke in meine Seite einbinden und ansonsten den bequemen WYSIWYG Editor verwenden.
Und während ich das hier im WP Editor schreibe, merke ich, dass ich das Plugin noch gar nicht deinstalliert habe und trotzdem kein Markdown verwenden muss. Nach einiger Suche finde ich dann die Möglichkeit, Markdown ein- bzw. auszuschalten. Allerdings geht das immer nur für den ganzen Post. Ich möchte das aber nur für einzelne Blöcke verwenden und nicht deswegen den ganzen Post im Texteditor schreiben müssen.

Nächster Test: WP Mermaid

WP Mermaid is smart enough that loads mermaid.js only when your posts contain Mermaid syntax, by detecting the use of shortcode and block. So it will not be loaded on your website everywhere.

https://www.commoninja.com/discover/wordpress/plugin/wp-mermaid

WP Mermaid Plugin installiert, neuen WP Mermaid Block hinzugefügt, in diesen den Code von der Live Seite hineinkopiert und so sieht es dann aus:

graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car]

Funktioniert. Schnell. Einfach. Funktional.

Perfekt, das wollte ich. Plugin bleibt installiert.

GitHub

Wie funktioniert es in GitHub?
Dieser Blogeintrag verrät es: Include diagrams in your Markdown files with Mermaid

Auf die GitHub Seite, eine README.md eines Projektes im Browser im Editor geöffnet, in Edit file den Code eingegeben und im Preview das Diagramm angesehen.

Eclipse

In meinem Eclipse habe ich noch keinen Markdown Editor, wenn ich eine .md Datei öffnen möchte, erscheint der Hinweis:

Da ich bisher selten Markdown verwendet habe, habe ich das ignoriert, auf die Vorschau verzichtet und im Texteditor gearbeitet.

Ich vermute, dass ich Mermaid nur in Markdown Dateien verwenden kann, daher muss ich einen passenden Editor suchen.

Bisher war übrigens ein Markdown Editor in Eclipse enthalten, aber im Release 2022-06 wurde er irrtümlich entfernt.
Über Install New Software ist Mylyn WikiText schnell nachinstalliert.

Code
Preview

Der Markdown Editor funktioniert, aber leider Mermaid nicht.

Kein Mermaid Support in Eclipse?
Kann ich mir eigentlich nicht vorstellen, aber ich konnte kein Plugin und keine Anleitung finden.
Ich belasse es erstmal dabei, zur Not erstelle ich die Diagramme online und sehe sie mir dann in GitHub an bis ich eine Lösung für Eclipse gefunden habe.

UPDATE

Das WP Mermaid Plugin scheint nicht richtig zu funktionieren, denn während es im Editor Modus so aussieht, wie es soll, sieht es bei "normalen" Aufruf der Seite verunglückt aus:

Und so sieht es im Editor aus:

Das Problem ist bekannt:

UPDATE 2

Heute (07.06.23) habe ich das WP Mermaid Plugin auf Version 1.0.2 geupdated.

So sieht es jetzt im Editor im Bearbeiten-Modus aus:

Mermaid Diagramm bearbeiten

Und so sieht es in der normalen Ansicht aus:

Mermaid Diagramm in der normalen Ansicht

Jetzt scheint es also wirklich zu funktionieren! 🥳

Categories
Development

GitHub Personal access token

Die Basic authentication wurde bei GitHub abgeschaltet.

Ein Commit mit Username & Password ist somit nicht mehr möglich. Statt dessen wird der Username & Personal access token benötigt.

Wie man einen Personal access token generiert und über die Command Line verwendet habe ich bereits hier dokumentiert.

Heute habe ich für eine Code Anpassung mit Eclipse gearbeitet und bin in diese Abschaltungsfalle gerannt. Die Generierung des Personal access tokens war leicht, ich brauchte lediglich meiner eigenen Doku folgen.

Schwieriger (nerviger) war es, Eclipse beizubringen, dass anstelle des alten, gespeicherten Passworts ein neues verwendet werden soll. (der zuvor generierte Token)

Die erste Version, mit der ich erfolgreich war:

How do I change my git credentials in eclipse?

Go to the Git Perspective -> Expand your Project -> Expand Remotes -> Expand the remote you want to save your password. Right-click on the Fetch or Push -> Select Change Credentials Enter username and password -> Select Ok.

Das war wirklich umständlich und schräg, hat aber erstmal zum erfolgreichen Commit verholfen.

Ich habe dann noch ein bisschen weiter geforscht und eine zweite Variante gefunden, die sinnvoller erscheint, aber mit einem Eclipse Neustart bezahlt werden muss:

1. From Eclipse toolbar navigate to Window > Preferences > Security > Secure Storage > Contents Tab > [Default Secure Storage] > GIT > "whatever github url"
2. Select the url and delete the current user.
3. Eclipse will ask for a restart. Do it.
4. Push new changes and this time egit will prompt to save credentials in secure storage which was removed from the previous step.
Categories
Development

Günstige Website

Domain

Für ein R&D-Projekt benötige ich eine eigene Domain. Diese soll möglichst günstig zu bekommen sein und das bei einem Anbieter, der eine Bezahlung über Bitcoin oä ermöglicht. Bei der Recherche bin ich dabei auf diesen Anbieter gestoßen: Porkbun

Das Projekt läuft unter dem Arbeitstitel: Dagobert Doge. Also suche ich nach einer entsprechenden Domain:

Es werden einige verfügbare Domains angezeigt:

Ich entscheide mich für DagobertDoge.space. Klingt cool und kostet nur 1,16 $ im ersten Jahr:

Registrieren, bezahlen und schon erscheint die Domain im Domain Management:

EMail

Die Einrichtung eines gehosteten Email Accounts wird in der Knowledge Base von Porkbun beschrieben. Der erste Monat ist kostenfrei.

Domain Management -> Email -> Option 1: Email Hosting -> Configure

Nach dem einmonatigem Testzeitraum wird die Gebühr für ein ganzes Jahr eingezogen, also noch flugs einen Reminder zum rechtzeitigen Löschen angelegt.

Anschließend werden die Email Configuration Settings angezeigt, sehr hilfeich. Außerdem eine DMARC Notice. Wenn man auf den Configure Button klickt, werden die Einstellungen automatisch vorgenommen. Was es mit DMARC genau auf sich hat muss ich bei Gelegenheit evaluieren.

Der Webmail Client präsentiert sich sehr aufgeräumt, nice:

Alternativ wäre auch ein dauerhaft kostenfreies Email Forwarding möglich:

Website auf Github Pages

Die Website soll auf Github Pages gehostet werden. Das ist kostenfrei und über die üblichen Git Tools editierbar. Zumindest stelle ich mir das so vor, der Test kommt jetzt:

In den Details des Domain Managements -> Quick Connect -> Manage:

Github auswählen und einen neuen Account anlegen:

Auf I Need One klicken, schon öffnet sich GitHub in einem neuen Tab:

Und siehe da, wenn wir jetzt DagobertDoge öffnen, sehen wir:

Die Website - Ein Template

Die HelloWorld-Seite sieht maximal spartanisch aus, daher habe ich ein frei verfüg- und nutzbares Template für eine fancy Website gesucht und auf html DESIGN gefunden:

Die Website - Das Projekt

Das Git Projekt auf meinen Arbeitsrechner clonen:

cd [...]/workspace
git clone https://github.com/DagobertDoge/dagobertdoge.github.io.git
cd dagobertdoge.github.io

Die Dateien aus dem Bitcypo Template werden in das dagobertdoge.github.io Verzeichnis kopiert.

Git einrichten und Änderungen in das Repository übertragen:

git config user.email "admin@dagobertdoge.space"
git config user.name "DagobertDoge"
git add *
git commit
git push
Username for 'https://github.com': DagobertDoge
Password for 'https://DagobertDoge@github.com': xxx

Dann noch ein paar kleine Anpassungen im HTML und in einem Image & dann das ganze ins GitHub Repository pushen.

Die Website - Das erste Resultat

DagobertDoge.space

Whois

Eine Whois-Abfrage ergab, dass keinerlei persönlichen Informationen von mir im Whois Record eingetragen wurden. Ich brauche also keine Angst vor zB Spam haben.

Abschluss

Die Etappenziele sind erreicht: Eine eigene Domain für schmales Geld, Webmail für zumindest einen Monat, danach wenigstens noch die Mailweiterleitung. Bei Gelegenheit sollte ich mal schauen, ob es nicht einen Dienst gibt, der einem gratis das Mailhosting übernimmt. Das müsste ja technisch möglich sein über einen entsprechenden Eintrag im MX Record.

Das Repository für den Code der Website und sogar das Hosting der (statischen) Seite gibt es for free.

Ein Template für die erste Version der Website gibt es auch for free.

Nachtrag: Basic authentication deprecation

Nach dem Checkin in GitHub erreichte mich diese EMail:

Hi @DagobertDoge,

You recently used a password to access the repository at DagobertDoge/dagobertdoge.github.io with git using git/2.20.1.

Basic authentication using a password to Git is deprecated and will soon no longer work. Visit https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/ for more information around suggested workarounds and removal dates.

Thanks,
The GitHub Team

Für die Verwendung über die Konsole benötige ich also einen personal access token, sonst ist bald Schluß mit Lustig.

Der Anleitung folgend auf das Profil Photo klicken -> Settings -> Developer Settings -> Personal access tokens -> Generate a personal access token:

Generate new token with descriptive name and permissions. To use your token to access repositories from the command line, select repo.

Es wird ein Personal access token generiert und angezeigt. Dieser ist unbedingt zu notieren, denn er kann nicht noch einmal angezeigt werden.

"Once you have a token, you can enter it instead of your password when performing Git operations over HTTPS."

Damit ich nicht bei jedem Commit etc. den Username & Token eingeben muss, aktiviere ich das Caching der Credentials:

# Set git to use the credential memory cache
$ git config --global credential.helper cache

# Set the cache to timeout after 1 hour (setting is in seconds)
$ git config --global credential.helper 'cache --timeout=3600'

Git kann jetzt wie zuvor verwendet werden. Beim ersten Befehl muss einmalig Username & Token eingegeben werden, diese werden für die darauffolgende Stunde gecached.