Start Archiv nach Kategorie "Webentwicklung"

Kategorie: Webentwicklung

[TypeScript] Projekt im Visual Studio Code mit React, Typescript und Vite erstellen

Template-Projekt im Projektverzeichnis anlegen

npm create vite@latest my-mini-app --template react-ts

Pakatabhängigkeiten prüfen und abhängige Pakete installieren

npm install

Lokalen Testserver starten

npm run dev

Deployment-Preview starten

npm run preview

Paketabhängigkeiten prüfen

npm audit

Paketabhängigkeiten fixen

npm audit fix --force

Projekt in den Ordner /dist ausgeben/compilieren

npm run build

Projekt-Cache zurücksetzen

npm cache clean –force

React-Router installieren

npm install react-router-dom
npm install --save-dev @types/react-router-dom

Tailwind 4 installieren

Tailwind CSS v4 arbeitet komplett anders als Tailwind 3 – ohne tailwind.config.js. Stattdessen wird alles direkt in CSS konfiguriert.

npx tailwindcss init -p
npm install -D postcss

Datei: postcss.config.js anpassen

export default {
 plugins: {
 '@tailwindcss/postcss': {},
 },
}

Datei vite.config.ts editieren:

import { defineConfig } from 'vite'
import react, { reactCompilerPreset } from '@vitejs/plugin-react'
import babel from '@rolldown/plugin-babel'

export default defineConfig({
 plugins: [
 react(),
 babel({ presets: [reactCompilerPreset()] })
 // tailwindcss() - ENTFERNT!
 ],
})

Datei /src/index.css editieren:

@import "tailwindcss";

Links

[SVG] Transparentes SVG-Icon

Um SVG-Icons transparent anzuzeigen, muss der Abschnitt rect angepasst werden. Wenn das rect keine Füllfarbe hat, behandelt der SVG‑Renderer das rect ohne "fill" als schwarz gefüllt, also nicht transparent.

Dadurch verdeckt es den Hintergrund. Durch das explizite Setzen von rect mit einem fill="none" wird das SVG-Icon vollständig transparent, nur der feste Inhalt (Beispiel-Symbol) bleibt sichtbar.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
    <defs>
        <linearGradient id="grad-light" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#38bdf8"/>
            <stop offset="100%" stop-color="#3b82f6"/>
        </linearGradient>
        <linearGradient id="grad-dark" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#7dd3fc"/>
            <stop offset="100%" stop-color="#60a5fa"/>
        </linearGradient>
    </defs>

    <!-- Transparenter Hintergrund durch fill="none" -->
    <rect class="bg" width="64" height="64" rx="9" fill="none"/>
    <text class="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="45" font-family="sans-serif" font-weight="700" dy="0.087">&#x1f3a7;</text>
</svg>

[HTML] Favicon auf einer Webseite einbinden

Favicons

Ein Favicon unterstützt die Wiedererkennung einer Website und erfüllt dabei aber wichtige Funktionen für Orientierung, Markenwirkung und Professionalität.
Favicons werden in Browser‑Tabs, Lesezeichen, der Adressleiste und im Browserverlauf angezeigt. Moderne Suchmaschinen zeigen Favicons auch in den mobilen Suchergebnissen an.
Grundsätzlich werden die Favicons im head-Teil der HTML-Seite eingebunden. Hierbei können verschiedene Typen von Favicons (Größen, Dateiformate) für unterschiedliche Plattformen berücksichtigt werden. Für Progressive Web App (PWA) gibt es noch eine modernere Form über die Einbindung einer manifest.json.

Einbindung

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8"/>
		<title>Page title</title>
		<link rel="icon" href="./favicon.ico"/>
		<link rel="icon" type="image/png" sizes="96x96" href="./favicon-96x96.png"/>
		<link rel="icon" type="image/svg+xml" sizes="any" href="./favicon.svg"/>
		<link rel="apple-touch-icon" href="./apple-touch-icon.png"/>
		<link rel="manifest" href="./manifest.json"/>
	</head>
	<body>
	</body>
</html>

Links

[HTML] Manifest (manifest.json) zu einer Webseite hinzufügen

Progressive Web App (PWA)

Für die Nutzung von PWA‑Funktionen für eine Webseite ist ein Manifest in Form einer manifest.json sinnvoll. Die manifest.json teilt dem Browser mit, wie sich Ihre App verhalten soll, wenn sie auf einem Endgerät ausgeführt wird.

Beispiel

{
  "name": "Meine Webseite",
  "short_name": "MWS",
  "description": "Tolle Sachen zum Lesen",
  "start_url": ".",
  "display": "browser",
  "orientation": "any",
  "icons": [
    {
      "src": "/favicon.svg",
      "sizes": "any",
      "type": "image/svg+xml",
      "purpose": "any"
    },
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "categories": ["productivity", "utilities", "social"]
}

Tipps

  • Die Parameter sollten sorgfältig gesetzt werden, insbesondere der Parameter start_url. Gängige Werte sind z.B.: nicht angeben, "." oder "/"

Einbindung

Die manifest.json wird im der HTML-Seite eingebunden.

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8"/>
		<title>Page title</title>
		<link rel="manifest" href="./manifest.json"/>
	</head>
	<body>
	</body>
</html>

Links