Frontend – die besten Beiträge

Hallo welchen css Befehl brauche ich damit wenn ich nach unten scrolle dass der weiße Kasten hinter der Menüleiste oben ist und nicht vor?

Danke!

Hey Leute,

ich bin relativ neu in NextJS (nutze den AppRouter) und habe aktuell folgendes Problem:

Überblick:
Ich habe ein Server Component, welches eine Liste von Items darstellen soll, diese Items weden mit axios von einem externen Backend geladen.
Zudem habe ich noch ein Formular (auf einer anderen Seite), mit welchem ich neue Items hinzufügen kann.

Problem:
Wenn ich ein neues Item hinzufügen (egal ob über das Formular oder direkt in der Datenbank) und dann auf die Seite mit der Liste navigiere (oder umgeleitet werde), sehe ich die neuen Items nicht.
Ich muss zuerst einen vollständigen Reload über den Browser durchführen, damit die neuen Daten aus dem Backend geladen werden.

Meine Frage:
Bin ich zu doof das Server Component korrekt zu benutzen oder ist es einfach falsch, für ein solches Szenario Server Components zu nutzen und ich sollte einfach Client Components nutzen.

Relevanter Code:

const client = axios.create({
  baseURL: "http://localhost:9999"
})

async function getItems(): Promise<Item[]> {
  return client.get("/items")
    .then(response => response.data.items)
    .catch(error => {
      console.log(error);
    });
}

const ItemsList: FC = async () => {
  const items = await getItems();

  return (
    <>
      // rendering list
    </>
  );
};

export default ItemsList;

Mfg Jannick (L1nd)

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

Also ich will dass bei jedem Bild so copyright an der Seite ist und habe so ein Code gemacht aber alle copyright sachen werden an einer Stelle angezeigt und nicht bei den Bildern.

       <figure>
            <img class="cover" src="https://cdnb.artstation.com/p/assets/images/images/019/622/599/large/-3.jpg?1564323970"style="object-position: 50% 100%;">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by Denis Nigmatullin on artstation
            </figcaption>  
           <img style="position: absolute; left: 70%; top: 27%; width: 250px;" src="https://i.pinimg.com/originals/ca/83/ed/ca83ed22042d9846d568682d956d09bf.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption>
           <img style="position: absolute; right:91%;  top: 0%; width: 100px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg/910px-Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg"> 
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);position: absolute; right:91%;  top: 0%;">
               Image by Bibi Saint-Pol on wikimedia
           </figcaption>  
            <img style="position: absolute; right: 91%;  top: 18%; width: 100px;" src="https://64.media.tumblr.com/55d89b8a87818f817ec8851154739637/tumblr_npwai2nq8T1tfr4rfo1_640.jpg">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by sheepskeleton on artstation
            </figcaption>   
           <img style="position: absolute; right: 91%;  top: 42%; width: 100px;" src="https://i.pinimg.com/564x/c6/10/5f/c6105feba2db225b5d7e52af0e427584.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption> 
        <img style="position: absolute; right: 91%;  top: 65%; width: 100px;" src="https://i.pinimg.com/736x/df/71/bc/df71bc1594556b26d9383e37ece74da5.jpg">
    </p>
    </section>

Hallo,

ich verstehe nicht warum die Icons, mit Display Flex, in diesem Fall ganz nach Rechts geschoben werden?

Ist ja gut weil ich ne Responsive Navbar bauen will, aber ich wills auch verstehen.

Code Html:

    <div class="top-bar">
      <span><ion-icon name="call-outline"></ion-icon>111 222 333</span>
      <ul>
        <li><a href=""><ion-icon name="logo-facebook"></ion-icon></a></li>
        <li><a href=""><ion-icon name="logo-twitter"></ion-icon></a></li>
        <li><a href=""><ion-icon name="logo-instagram"></ion-icon></a></li>
      </ul>
     </div>

Und das Css:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: "DM Serif Text", serif; 


} 
a, a:hover {
    text-decoration: none;
}
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
Danke sehr.
LG

Hallo, in einem Dropdown was ich mit Bootstrap erstelle wird der Pfeil unten statt auf der rechten Seite angezeigt

Hier ist der HTML Code von dem Toggle Button des Dropdowns:

<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
   <div class="d-flex">
      <span class="material-symbols-outlined">language</span>
      <span class="ms-2">Automatisch</span>
   </div>
</button>

Ich hab schon herausgefunden das der Fehler vom Div kommt, allerdings wenn ich das Div Entferne sieht es so aus:

Wie man sieht ist dort, dann allerdings das Icon nicht mehr Zentriert. Weiß jemand wie man entweder die Positionierung vom Dropdown Pfeil oder die Ausrichtung vom Icon in Ordnung bringen kann.

Vielen Dank schon mal im Voraus für jede Antwort!

Moin moin meine Lieben,

React oder Angular? Oder doch lieber die Newcomer Vue.js oder Svelte? Oder etwas ganz anderes?? Ich weis, das ist eine niemals endende Diskussion, aber mich würde interessieren welches Framework ihr benutzt und warum ihr von diesem Framework überzeugt seit.

Ich fang mal an:

Ich benutzte React mit TypeScript, da es mir vom Aufbau und der Struktur gefällt. Ich kann mich mit React als funktionales Framework besser anfreunden als mit Angular, welches auf objektorientierte Programmierung setzt.

Vor allem in Verbindung mit NextJS überzeugt mich das Framework mit starker Performance und exzellentem SEO. Mit diesem Stack erziele ich bei jeder Website knapp ein 100er Ranking in allen Kategorien bei Google PageSpeed Insights.

Ein solch gutes Ranking hab ich z.B. bei einer Angularseite bisher noch nicht gesehen.

Auch bei der Weiterentwicklung des Frameworks sehe ich eine sehr gute Entwicklung bei React, z.B. bekommt React in der nächsten Version einen Compiler, worauf ich bereits sehr gespannt bin.

Hallo zusammen,

ich bringe mir seit ein paar Monaten HTML, CSS und JavaScript bei, habe mir ein Portfolio aufgebaut und lade dort die Projekte hoch, die ich privat entwickle, um einen einfacheren Berufseinstieg zu erhalten. Aktuell fühle ich mich in den drei oben genannten Bereichen fit genug, dass ich mich gerne in ein Framework einarbeiten würde.

Es gibt da draußen mehrere Videos über das Thema Angular, React, Vue.js, aber ich würde gerne von euch, die wirklich beruflich damit arbeiten und eventuell auch vom Hörensagen anderer Entwickler, wissen, was so im deutschen Arbeitsmarkt angesagt ist.

React ist ja, was die Rankings angeht, immer auf Platz 1, weswegen ich in diese Richtung gehen wollte. Jedoch, wenn ich auf Stepstone und anderen Plattformen schaue, werden öfters Angular-Stellen gesucht. Deswegen hat sich mir die Frage gestellt, ob React vielleicht eher im Rest der Welt populär ist und in Deutschland eventuell eher Angular oder gar ein ganz anderes Framework.

Ich bedanke mich im Voraus für eure Zeit und Hilfe.

Also Folgendes: ich hab hier ein PHP-Formular mit einem Eingabefeld und einem Submit Button, dass die eingegebenen Werte an eine bestimmte URL sendet. (Das ist erstmal simpel) Ich habe auch herausgefunden, wie man die URL z.b mit einer Zahlenfunktion variieren kann. Auch das geht relativ leicht. Was hingegen scheinbar weniger einfach ist: Ich würde das Action Attribut, also die URL, wo die Eingaben hingesendet werden nun gerne über einen HTML-Schalter z.b Checkbox dynamisch & in Echtzeit ändern. z.b Checkbox aktiv = Daten werden an URL2 gesendet, Checkbox nicht aktiv = Daten werden an URL1 gesendet. Oder es soll einfach ein URL-Zusatz hinzugefügt werden, je nachdem ob die Checkbox aktiv ist oder nicht. Meine jetzt ganz blöde Frage: Wie oder mit welchem Ansatz kann das funktionieren? Ich habe da jetzt bereits XX Stunden rumprobiert: Normale Variablen mit Conditions definieren, Sessions starten, der Versuch ein Cookie zu setzen, dass beim Ein und Ausschalten der Checkbox gesetzt bzw. gelöscht werden soll (klappt nicht). Mit JS Codeschnipseln herumprobiert. Nichts davon scheint zu funktionieren bzw. es wird einfach immer der Zustand "checkbox unchecked" an URL1 gesendet.

Hat irgendeiner mit Ahnung ne Idee wieso das nicht funktioniert und ob es einen lösbaren Ansatz für dieses Problem gibt?

Folgendes Problem: Ich hab hier eine Seite, die normalerweise einen Ladebalken generieren sollte. In der Style.css ist es wie folgt definiert:

.loader {

 position: relative;

}

.loader::before {

 content: "";

 position: absolute;

 top: 0;

 left: 0;

 width: 100%;

 height: 100%;

 border-radius: 100%;

 border-top: 5px solid red;

 border-left: 3px solid brown;

 border-bottom: 1px solid purple;

 border-right: transparent;

 animation: spinner 0.8s linear infinite;

}

@keyframes spinner {

 0% {

   transform: rotate(0deg);

 }

 100% {

   transform: rotate(360deg);

 }

}

In der Page selbst hab ich dann: <div class="loader">Ladebalken</div>

Die Loaderclass oben ist nur ein Beispiel. Ich hab es auch schon mit anderen Einstellungen probiert.

Nach allem was ich so finde und bisher verstanden habe müsste auf der Webseite eigentlich an der entsprechenden Position ein animierter Ladebalken angezeigt werden, wird es aber nicht, sondern egal was ich in der style.css definiere es erscheint das Wort "Ladebalken" auf weißem Grund. Die Style.css ist korrekt verlinkt, alle anderen Elemente wie z.b Buttons werden korrekt angezeigt.

Wo liegt das Problem bzw. woran könnte das liegen?

Hallo, ich programmiere zur Übung eine Automarken-Webseite.

Ich will, dass die Buttons so sind;

Und nicht so: (Der Rahmen dient nur zur Übersicht)

Aber wenn ich die Webseite verkleinere, dann sieht so aus; ich möchte aber, dass die sich richtig anpassen, also z.B. 2 nebeneinander sind.

Welchen Befehl kann ich dafür verwenden?

Hier habe ich den Befehl verwendet: .body {

margin-left: 28%;

    margin-right: 28%;

}

Guten Tag zusammen,

ich habe mich nun mit HTML und CSS beschäftigt ein Portfolio erstellt und würde nun den nächsten Schritt wagen und mir JavaScript oder TypeScript anschauen und aneignen.

Würdet Ihr mir eher raten Javascript zu lernen, weil darauf TypeScript aufbaut oder sagt ihr keine Zeit verschwenden direkt TypeScript da später Beruflich TypeScript mehr Sinn macht kann man ja mit React auch nutzen und Angular sogar ausschließlich soweit ich weis.

Ach ja wäre nett wenn Erfahrene Entwickler im Frontendbereich auch sagen könnten was man sich noch alles beibringen sollte im Anschluss.
Aktuelles Ziel wäre es eben JavaScript oder Typescript zu lernen dann mit React anzufangen aber was sollte man alles drauf haben bevor man zu React geht.
z.B. höre ich immer wie wichtig REST-APIs sind gibt es da vllt eine Seite wo man es verständlich erlernen kann? Bin für jeden Tipp sehr dankebar.

Guten Tag,

Wie würdet ihr diese Buttons designen?

Ich bin noch neu in der webentwicklung

Hier mein html code:

<ul class="list-category"></ul>

<li><button class="button1">Food🍕</button> </li>

<li><button>Food🍕</button> </li>

<li><button>Food🍕</button> </li>

Danke im voraus.

10 Stunden pro Tag.

Ohne Ausbildung oder Informatikstudium.

Ich möchte gerne eine Website mit backend und frontend weiß aber nicht wie das Geht? wisst ihr es?

Wenn ja bitte meldet euch zurück.

MFG.

Hallo, ich arbeite aktuell an einem NextJS Projekt mit TailwindCSS. Mein Problem ist, dass Font-Weight 600 und 700, 100 bis 500 und 800 und 900 gleich ausschauen. Das ist aber auch bei einem Normalen HTML Dokument so.

Das Problem besteht in allen Browsern.
Danke für die Antwort im Vorraus.

Code zum Nachmachen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font Weight Test</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* Using a widely available font */
        }
        .thin {
            font-weight: 100;
        }
        .light {
            font-weight: 300;
        }
        .normal {
            font-weight: 400;
        }
        .medium {
            font-weight: 500;
        }
        .semibold {
            font-weight: 600;
        }
        .bold {
            font-weight: 700;
        }
        .extrabold {
            font-weight: 800;
        }
        .black {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <h1>Font Weight Test</h1>
    <p class="thin">This is thin text (100).</p>
    <p class="light">This is light text (300).</p>
    <p class="normal">This is normal text (400).</p>
    <p class="medium">This is medium text (500).</p>
    <p class="semibold">This is semibold text (600).</p>
    <p class="bold">This is bold text (700).</p>
    <p class="extrabold">This is extrabold text (800).</p>
    <p class="black">This is black text (900).</p>
</body>
</html>   

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, der Hintergrund der Datei output.html seine Farbe ändert und rot wird. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('index.html')


@socketio.on('connect')
def handle_connect():
    print("Client verbunden")


@socketio.on('disconnect')
def handle_disconnect():
    print("Client getrennt")


@socketio.on('change_background')
def change_background(color):
    print("Hintergrundfarbe ändern:", color)
    socketio.emit('background_changed', color)

HTML /CSS:

... body {
  background-color: black;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
    -webkit-user-select: none; /* Für WebKit-Browser */
    -moz-user-select: none; /* Für Mozilla-basierte Browser */
    -ms-user-select: none; /* Für Microsoft Edge */
    user-select: none;
}  
</style>
</head>
<body>

JavaScript:

... // FLASK
    var socket = io();

    socket.on('connect', function() {
        console.log('Verbunden mit dem Server');
    });

    socket.on('disconnect', function() {
        console.log('Verbindung zum Server getrennt');
    });

    socket.on('background_changed', function(color) {
        console.log('Hintergrundfarbe geändert:', color);
        document.body.style.backgroundColor = color;
    });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Hintergrund nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

Hallo Leute,

ich hoffe, euch geht es gut und ihr habt einen angenehmen Tag.

Ich habe eine Frage an die erfahrenen Frontend-Entwickler unter euch, wie ihr dem Titel unschwer entnehmen könnt :).

Mein Ziel ist es, mich eigenständig so weit zu bilden, dass ich einen Job als Junior/Berufseinsteiger Frontendentwickler bekommen kann.

Bis dato habe ich bereits einen HTML5- und CSS3-Udemy-Kurs durchlaufen und einige Tutorials nachgebaut. Nun fühle ich mich fit genug für den nächsten Schritt.

Hierbei wollte ich wissen, ob ich mit JavaScript Vanilla starten soll und einen Kurs dazu machen soll oder direkt mit einem der bekannten JS-Frameworks wie Angular, React oder Vue.js?

Da ich während meiner Ausbildung bereits mit C# und WinForms gearbeitet habe, sind mir die Programmierungsgrundlagen nicht ganz fremd :D

Ich habe mal gehört, dass man JavaScript Vanilla nur lernen sollte, wenn man keinerlei Programmiererfahrung hat, z.B. über Schleifen, Verzweigungen usw., ansonsten sollte man direkt mit einem Framework starten.

Aktuell würde ich mich für React entscheiden, da man später das Wissen auch super in React Native implementieren kann und somit auch Apps entwickeln kann. Da Web und App meine Interessenbereiche in der Entwicklung sind, würde es sich super anbieten, es sei denn, die Mehrheit sagt nein, auf keinen Fall React. Dann bitte mit einer Begründung und was ich alternativ dazu dann lernen sollte :)

Ach ja, natürlich anhand meines Ziels dürft ihr mir auch alle anderen Tipps geben, was ich noch alles lernen könnte oder draufhaben sollte, damit eben keine Absagen mehr eintreffen als Junior :)

Ich bedanke mich bei allen schon einmal herzlich für die Zeit, die Ihr aufwendet, für das Lesen und Antworten :)

Viele Grüße,

JrDev

Hallo, ist es möglich ein Script für einen Online Shop zu kaufen der sicher ist, wo man dann nur das Frontend selber machen muss und wenn ja, ist es empfehlenswert?