ytnozto

GregorWedlich

_gregor_paul_

hello@sil3ntrunning.net

Erfahre, wie Next.js Server Actions und Tanstack Query deine Todo-App mit schnellem Datenmanagement und sicheren Mutationen!!

tanstack-query-server-actions-next.png

Das Dream-Team für dein Datenmanagement?

Next.js Server Actions & Tanstack Query

TanStackQuery

next.js

react

Ich bin aktuell ziemlich angetan von Deno und dessen Ökosystem. Seit Version 2 vor einigen Tagen erschienen ist, habe ich mich intensiver mit den verschiedenen Aspekten von Deno beschäftigt. Unter anderem habe ich den Package Manager JSR erkundet, der unabhängig arbeitet und nicht auf Deno selbst angewiesen ist, aber dennoch das gesamte Deno-Ökosystem ergänzt. In diesem kurzen Tutorial möchte ich dir einen Überblick geben, wie einfach es ist, eigene JSR-Pakete zu veröffentlichen.

## Projekt erstellen

Um zu starten, initialisiere dein Projekt mit folgendem Befehl:

```bash
deno init orakel-otter // Unser beispiel Projektname
```
## Projekt öffnen

Wechsel in das Projektverzeichnis:
```bash
cd orakel-otter
```

## Aufräumen

Für dieses Tutorial können wir die Datei main_test.ts löschen. Es ist jedoch auch in Ordnung, sie zu behalten. Öffne jetzt die `main.ts` und entferne den boilerplate Code.

## Unsere App erstellen

Ich habe hier ein einfaches Programm, das die aktuellen Bitcoin-Preise von einer API abruft. Mir ist nichts Besseres eingefallen, aber es dient dazu, zu veranschaulichen, wie das Veröffentlichen von JSR-Paketen mit Deno 2 funktioniert. Ich habe es 🦦 Orakel Otter 🔮 genannt, warum auch immer :-)

Hier ist unser Programm, das die aktuellen Bitcoin-Preise von einer API abruft:
```typescript
type Response = [string, number][];

async function orakelOtter(currency: string = "ALL"): Promise<Response> {
  try {
    const response = await fetch("https://mempool.space/api/v1/prices/");
    const pricesObj = await response.json();
    const prices = Object.entries(pricesObj);

    if (currency === "ALL") {
      return prices as Response;
    }

    const filteredPrice = prices.filter(
      (price) => price[0] === currency?.toUpperCase()
    );

    if (filteredPrice.length > 0) {
      return [...prices[0], filteredPrice[0]] as Response;
    } else {
      throw new Error(`Currency ${currency} not found.`);
    }
  } catch (error) {
    console.error(error);
    return [];
  }
}

const getPrice = await orakelOtter();
console.log(getPrice);
```

**Führe folgenden Befehl aus, um das Programm zu testen:**

```bash
deno task dev
```
Das Terminal wird um Erlaubnis bitten, auf das Netzwerk zuzugreifen. Bestätige dies mit y:
```bash
Watcher File change detected! Restarting!
┏ ⚠️  Deno requests net access to "mempool.space:443".
┠─ Requested by `fetch()` API.
┠─ Learn more at: https://docs.deno.com/go/--allow-net
┠─ Run again with --allow-net to bypass this prompt.
┗ Allow? [y/n/A] (y = yes, allow; n = no, deny; A = allow all net permissions) > y
```
Sobald der Zugriff gewährt ist, solltest du eine Ausgabe wie diese sehen:
```bash
✅ Granted net access to "mempool.space:443".
[
  [ "time", 1728830104 ],
  [ "USD", 62513 ],
  [ "EUR", 57121 ],
  [ "GBP", 47771 ],
  [ "CAD", 86060 ],
  [ "CHF", 53563 ],
  [ "AUD", 92464 ],
  [ "JPY", 9344100 ]
]
```
## Projekt zur Veröffentlichung auf JSR.IO vorbereiten

Um das Paket auf JSR.IO zu veröffentlichen, benötigst du ein Konto. Nach dem Einloggen gehst du auf dein Profilbild, wählst „+ Ein Paket veröffentlichen“ und erstellst einen Scope. Zum Beispiel kannst du deine Initialen als Scope verwenden. Danach benennst du dein Paket "orakel-otter" (oder wie auch immer du dein Projekt genannt hast) und klickst auf „Create“.

## Codeanpassungen

Vor der Veröffentlichung müssen wir uns noch die main.ts anpassen und eine Dokumentation hinzufügen.

In der main.ts nehmen wir folgende Änderungen vor:

1.	Entferne die console.log()-Zeile und die Instanzierung.
```typescript
const getPrice = await orakelOtter();
console.log(getPrice);
```
2.	Füge export zur orakelOtter-Funktion hinzu, damit sie als Modul zugänglich ist.
3.	Füge eine Dokumentation zur Funktion hinzu, was optional ist, aber für einen besseren JSR-Score empfohlen wird.
```typescript
/**
 * Fetches the current prices for various currencies from the Mempool.space API.
 *
 * @param currency - The currency (USD, EUR, GBP, CAD, CHF, AUD, JPY) to filter the prices for. If not provided, returns all available prices.
 * @returns An array of tuples, where the first element is the currency code and the second element is the current price.
 * @throws {Error} If the specified currency is not found in the API response.
 */
export async function orakelOtter(currency: string = "ALL"): Promise<Response> {
  // Funktion bleibt unverändert
}
```
4.	Aktualisiere die deno.json-Datei mit den erforderlichen Feldern: name, version und exports. Inklusive Lizenz (optional):
```bash
{
  "name": "@gw/orakel-otter",
  "version": "0.0.1",
  "license": "MIT",
  "exports": "./main.ts"
}
```
Der Name muss den Scope und den Paketname beinhalten **(@gw/orakel-otter)**, die Version muss dem SemVer-Format folgen.

## Paket veröffentlichen

Die Veröffentlichung kann über die CLI oder GitHub Actions erfolgen. Für dieses Tutorial verwenden wir die CLI.

Führe einen Testlauf durch, um sicherzustellen, dass alles korrekt eingerichtet ist:
```bash
deno publish --dry-run
```
Wenn der Testlauf erfolgreich ist, veröffentliche nun dein Paket in dem du den Befehl ohne `--dry-run` ausführst:

```bash
deno publish
```
Nun wirst du Automatisch zu deinem Default Browser weitergeleitet um dich zu authentifizieren, hier jetzt die bestätigen das alles ok ist und dein Paket wird veröffentlicht! Und das wars auch schon, dein erstes JSR Package wurde veröffentlicht :-)

## Fazit

Dieses Tutorial deckt nicht alle Details ab, geht aber auf die wichtigsten Punkte ein, um ein Paket auf JSR.io zu veröffentlichen. Beachte, dass JSR Pakete basierend auf verschiedenen Kriterien bewertet, die zum „JSR-Score“ beitragen. Ziel ist es, eine gute Dokumentation und Best Practices einzuhalten, um eine hohe Punktzahl zu erreichen. Ein gut dokumentiertes Paket kann dir wie in meinem Beispiel eine Bewertung von 94 Punkten einbringen!

**Weitere Details findest du in den folgenden Dokumentationen**

[JSR Documentation](https://jsr.io/docs/publishing-packages)

[Deno Documentation](https://docs.deno.com/runtime/reference/cli/publish/)

**Ryan Dahl der gründer von Nodejs und Deno über die neue Version Deno 2:**
[Rayen Dahl about Deno 2](https://www.youtube.com/watch?v=d35SlRgVxT8)

**Nützliche Links:**

[Project on GitHub](https://github.com/GregorWedlich/orakel-otter)

[Project on jsr.io](https://jsr.io/@gw/orakel-otter)



Wir lernen, wie man mit Deno 2 ein Paket auf JSR.io veröffentlicht.

jsr-deno-2.png

mit Deno 2

 Wie du ein Paket auf JSR.io veröffentlichts

deno

Wie wir mit React Fiber, Drei und Three.js in Next.js ein Metallic Flakes Material erstellen.

A simple Metalic Material Effekt with three.js and next.js

metallic-flakes-threejs.png

Wir wir einen Metallic Flakes Material erstellen

Metallic-Flakes Material in three.js und next.js

typescript

three.js

metropolis.png

Prinz_Monty_Coding_Future_Hacking_Binary_Website_Header_fe5f75f_1f86cac2-9fc0-4294-bcaf-dfe0dd968a98.png

SSH-Keys-Config-ed25519.png

Invalid-Regular-Expression-Image.png

oh-my-zsh-mid.png

Ice cream gingerbread danish muffin cheesecake icing tiramisu.

Biscuit dessert sweet roll cupcake sweet. Halvah jelly apple pie oat cake gummi bears marshmallow. Powder jujubes pudding gummies donut chocolate bar candy canes. Biscuit danish icing jujubes gummi bears dragée. 

CODING LIFE AND EVERYTHING & MEISTENS AUF DEUTSCH

Hallo Hello היי Hola Привіт Salut أهلاً 你好 Ciao

Next.js Server Actions & Tanstack Query

Das Dream-Team für dein Datenmanagement?

06.04.2025

Wie du ein Paket auf JSR.io veröffentlichts

mit Deno 2

13.10.2024

Metallic-Flakes Material in three.js und next.js

Wir wir einen Metallic Flakes Material erstellen

11.09.2024