Verwandte Themen

johndont
16.07.2024, 12:02
Mit Links
Next.js Provider ohne meine ganze App Client Side zu machen?

Als Beispiel wenn ich Redux nutzen möchte muss ich es um einen Provider wickeln und ein YouTuber hatte es mal erklärt wieso daraus dann nicht alle Untergeordneten Components auch automatisch Client Side werden aber ich habe es nicht verstanden wieso das so ist. Was genau passiert da im Hintergrund.

/app/layout.tsx :

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./assets/styles/globals/globals.scss";
import { StoreProvider } from "@/store/StoreProvider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "",
  description: "",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <StoreProvider>
      <html lang="de">
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
        </head>
        <body className={inter.className}>
          {children}
        </body>
      </html>
    </StoreProvider>
  );
}

/app/StoreProvider.tsx :

'use client';
import { store } from "./store";
import { Provider } from "react-redux";

export const StoreProvider = ({ children }
    : { children : React.ReactNode}) => {
    return <Provider store={store}>{children}</Provider>;
}

Denn normlerweise wenn ich "use client" in einer Contact.tsx benutze wird auch "ContactForm.tsx" automatisch use client.

Eigentlich sollte man ja nur einzelne Buttons use client machen wenn möglich damit Contact dennoch ohne JavaScript das erste mal gerendered wird für den Nutzer.

Bin gerade darauf gekommen weil ich das gleiche jetzt nochmal für einen Darkmode Provider mit TailwindCSS machen wollte wie im Video hier https://www.youtube.com/watch?v=7zqI4qMDdg8&ab_channel=DaveGray

Er sagt keine angst eure ganzen Server Components bleiben Server Components nur ich verstehe Sprachlich/Akustisch nicht was er da auf englisch genau meint obwohl ich gut englisch kann.

IT, Webseite, JavaScript, Code, Informatik, Programmiersprache, Webentwicklung, Frontend, TypeScript
0 Antworten
SENINJA
13.07.2024, 14:03
Mit Links
Bilderkennung erkennt nur 1 Objekt?

Warum erkennt mein Programm, dass Gefahren und Menschen mit Punkten markiert immer nur eine Gefahr und eine Person? Sobald mehr als ein Objekt (von Person oder Gefahr) springt der Punkt immer zwischen den beiden Objekten her, oder bleibt bei einem Objekt. Edit: Eine Person und eine Gefahr gleichzeitig geht.

JS:

const video = document.getElementById('video');
// Funktion zum Zugriff auf die Kamera
async function getCameraAccess() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({
            video: true
        });
        video.srcObject = stream;
        video.addEventListener('loadedmetadata', () => {
            video.play(); // Video abspielen, sobald die Metadaten geladen sind
            loadModel();
        });
    } catch (err) {
        console.error("Error accessing camera: ", err);
        alert("Kamerazugriff wurde verweigert. Bitte erlaube den Zugriff auf die Kamera.");
    }
}
// Modell laden und Objekterkennung starten
let model;
async function loadModel() {
    model = await cocoSsd.load();
    console.log("Modell geladen!");
    detectFrame();
}
// Objekterkennung in Echtzeit
function detectFrame() {
    model.detect(video).then(predictions => {
        console.log("Predictions: ", predictions); // Log predictions to see what is detected
        drawDetectionPoints(predictions);
        requestAnimationFrame(detectFrame);
    });
}
// Punkte für die Objekterkennung zeichnen
function drawDetectionPoints(predictions) {
    // Vorherige Punkte entfernen
    const detectionPoints = document.querySelectorAll('.detection-point');
    detectionPoints.forEach(point => point.remove());
    predictions.forEach(prediction => {
        const [x, y, width, height] = prediction.bbox;
        const className = prediction.class;
        // Mittelpunkt der Bounding Box berechnen
        const centerX = x + width / 2;
        const centerY = y + height / 2;
        // Erstelle ein div-Element für den Detektionspunkt
        const point = document.createElement('div');
        point.classList.add('detection-point');
        // Berechne die Position des Punktes relativ zum Video
        const videoRect = video.getBoundingClientRect();
        const offsetX = window.pageXOffset + videoRect.left; // Berücksichtige die Scrollposition horizontal
        const offsetY = window.pageYOffset + videoRect.top; // Berücksichtige die Scrollposition vertikal
        const pointX = (offsetX + centerX) * (video.offsetWidth / video.videoWidth);
        const pointY = (offsetY + centerY) * (video.offsetHeight / video.videoHeight);
        // Position des Punktes setzen
        point.style.left = `${pointX}px`;
        point.style.top = `${pointY}px`;
        // Zusätzliche Anpassungen für die Positionierung
        point.style.position = 'absolute'; // Absolute Positionierung
        point.style.width = '10px'; // Größe des Punktes
        point.style.height = '10px';
        point.style.borderRadius = '50%'; // Runder Punkt
        // Marker Farben basierend auf der erkannten Klasse setzen
        switch (className) {
            case 'person':
                point.style.backgroundColor = 'limegreen'; // Grüner Punkt für Personen
                break;
            case 'knife':
            case 'scissors':
            case 'gun':
                point.style.backgroundColor = 'red'; // Roter Punkt für Messer, Scheren und Pistolen
                break;
            default:
                point.style.backgroundColor = 'yellow'; // Gelber Punkt für andere erkannte Objekte
                break;
        }
        // Füge den Punkt zum Dokument hinzu
        document.body.appendChild(point);
    });
}
// Kamerazugriff anfordern
getCameraAccess();

HTML:

<!DOCTYPE html>
<html lang="de">
   <head>
      <meta charset="UTF-8">
      <title>Objekterkennung: Test</title>
      <style>
         video {
         width: 100%; /* Breite auf 100% setzen */
         height: auto; /* Höhe automatisch anpassen */
         transform: scaleX(1) !important; /* Keine Spiegelung des Videos */
         }
         .bounding-box {
         position: absolute;
         border: 2px solid;
         }
         .bounding-box.danger {
         border-color: red;
         }
         .bounding-box.safe {
         border-color: green;
         }
      </style>
   </head>
   <body>
      <video id="video" autoplay></video>
      <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
      <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
      <script src="script.js"></script>
   </body>
</html>
HTML, JavaScript, Code, Programmiersprache, Bilderkennung
0 Antworten
tian007
01.07.2024, 12:35
Quereinstieg als Frontend Entwickler mit Background in Business Administration fast unmöglich?

Hallo zusammen, ich habe kürzlich meine Weiterbildung als Frontend-Entwickler abgeschlossen und bin nun auf Jobsuche. Trotz des oft berichteten Fachkräftemangels scheint der Markt für Junior-Stellen hart umkämpft zu sein. Meine Bewerbungsunterlagen wurden von der Weiterbildung geprüft, also können sie nicht so schlecht sein.

Ich habe einen B.Sc. in Business Administration und habe vor kurzem meine Weiterbildung zum Frontend-Entwickler abgeschlossen. Ich habe während des Studiums ein Praktikum im Bereich Operations bei einem IT-Startup absolviert und arbeite derzeit wieder dort als Praktikant, diesmal als Frontend-Entwickler. Aus Budgetgründen können sie im Moment keine neuen Mitarbeiter einstellen. Während dieser Zeit plane ich, mich weiter zum Fullstack-Entwickler (TypeScript + React) zu qualifizieren.

Alternativ denke ich darüber nach, ein SAP-Zertifikat zu erwerben, um eine Stelle im SAP-Bereich zu suchen. Hier gibt es wirklich Stellenangebote (Trainee/Junior) ohne Ende.

Eine weitere Option wäre eine Bewerbung als IT-Consultant, obwohl ich das Gefühl habe, dass ich dafür mehr Erfahrung als Entwickler benötige. Wie soll ich Unternehmen beraten, wenn ich selbst keine Ahnung habe?

Es ist frustrierend, nach dem Sparen und Absolvieren der Weiterbildung keine Stelle zu finden, aber ich bleibe optimistisch und offen für Möglichkeiten. Ich hoffe, ihr könnt mir vielleicht ein paar Tipps geben.

Vielen Dank im Voraus

JavaScript, Jobsuche, Webentwicklung, Frontend, Junior
3 Antworten

Meistgelesene Beiträge zum Thema JavaScript

Mehr meistgelesene Fragen zu JavaScript