JavaScript – die neusten Beiträge

Warum funktioniert Flask und Websockets nicht?

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

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Python, Frontend, Python 3, Pycharm, Flask

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

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

HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Python, Webentwicklung, Frontend, Python 3, Flask

Warum funktioniert mein Websockets- Server nicht?

Hallo,

ich möchte mithilfe von Websockets über JS auf Python zugreifen, das ist mein Code:

Python:

def send_message_to_browser(message):
    url = "http://localhost:8000/?wake_word=luna"
    try:
        response = requests.get(url)
        if response.status_code == 200:
            print("Nachricht an den Browser gesendet:", message)
        else:
            print("Fehler beim Senden der Nachricht an den Browser")
    except requests.RequestException as e:
        print("Fehler beim Senden der Nachricht an den Browser:", e)

JavaScript:

// WEBSOCKET
var socket = new WebSocket('ws://localhost:8000/?wake_word=luna');

// Debugging-Ausgabe zur Überprüfung der Verbindung
console.log("WebSocket wird hergestellt...");

// Ereignisbehandlungsfunktion für Verbindungsherstellung
socket.onopen = function(event) {
    // Debugging-Ausgabe zur Bestätigung der erfolgreichen Verbindung
    console.log("WebSocket-Verbindung hergestellt.");
};

// Ereignisbehandlungsfunktion für Nachrichtenempfang
socket.onmessage = function(event) {
    // Nachricht vom Server erhalten
    var message = event.data;

    // Debugging-Ausgabe
    console.log("Nachricht empfangen:", message);

    // Überprüfen, ob die empfangene Nachricht "luna" ist
    if (message === "luna") {
        // Ändern der Hintergrundfarbe der Div mit der ID "luna_wake_word" auf Rot
        $('#luna_wake_word').css("background-color", "red");
    }
};

// Fehlerbehandlungsfunktion für WebSocket-Verbindung
socket.onerror = function(error) {
    console.error('WebSocket Error: ', error);
};

// Schließen der WebSocket-Verbindung
function closeWebSocket() {
    socket.close();
}

Doch immer, wenn ich das Programm starte und in die Konsole schaue kommt dieser Fehler:

WebSocket wird hergestellt...

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929 WebSocket connection to 'ws://localhost:8000/?wake_word=luna' failed: 

(anonym) @ index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1929

index.html?_ijt=bj6j8vutnl8e16bhrbgfck9djq&_ij_reload=RELOAD_ON_SAVE:1957 WebSocket Error: Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}

Kann mir jemand helfen?

Freundliche Grüsse

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Python, Webentwicklung, Python 3

Welchen Weg sollte ich als angehender Frontend-Entwickler einschlagen: JavaScript Vanilla oder ein Framework?

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

JavaScript Vanilla 100%
Framework / Bibliothek (Angular, React, Vue.js) 0%
CSS, JavaScript, HTML5, berufseinsteiger, Frontend, Junior

Labyrinth Algorithmus (mutierend) Tipps?

Guten Tag,

ich habe mich mal an mutierende Algorithmen als Amateur Programmierer herangewagt. Mein erstes Projekt ist ein Algorithmus, welcher den effizientesten Weg durch ein Labyrinth finden soll (Ich weiß, dass A* besser ist).

Ich bin wie folgt vorgegangen:

  1. Labyrinth als zwei dimensionales Array (0 = Frei, 1 = Mauer)
  2. Start- und Endpunkt festgelegt
  3. STart Population erstellt aus zufälligen Pfaden (Ein Pfad ist ein Array, welches als Elemente 0,1,2 oder 3 enthalten, welche wiederum die Bewegungsrichtung vorgeben, die anschließend abgelaufen wird. Bspw. Hoch, hoch, links, rechts, runter.
  4. Dann score für jeden Agent aus Entfernung zum Ziel (Satz des Pythagoras) und Länge des Pfades gebastelt. Kürzere Entfernung gibt mehr Punkte, unnötiger Weg Abzug
  5. Danach werden für die 500 neuen agents jeweils zwei Eltern mit der Wahrscheinlichkeit basierend auf dem Score ausgewählt.
  6. Das „Kind“ wird aus den zwei Hälften der Pfade der Eltern erstellt, wobei jedes Element des neuen Pfades eine Chance hat zu mutieren (Hier sehe ich bedarf zur Verbesserung)
  7. Dies wiederholt sich solange ich will

Mein Problem ist, dass es bei kleinen Labyrinths den weg auch findet, aber die Wege noch teilweise sehr unnötig sind, obwohl ab dem Punkt, wo die meisten agents das Ziel erreichen, ja der längere weg rausselektiert werden sollte. Hatte überlegt auch minus punkte zugeben, wenn eine wand oder der Rand berührt wird, aber das hat nicht so funktioniert.

Mich würden eure Gedanken dazu interessieren und einfach ein paar Tipps zu der Thematik.

Code: https://hastebin.skyra.pw/aboladewoc.java

JavaScript, Algorithmus, maschinelles Lernen

Welches Backend + Hosting für kleine Webseiten?

Ich möchte eine Webseite für ein kleines Unternehmen erstellen.

Sie wird ziemlich Frontend-lastig sein bis auf ein zwei Besonderheiten:

  • Ein Kontakt-Formular, bei dem man eine Nachricht eingeben kann, die dem Unternehmer dann automatisch per Email zugesandt wird
  • Ein Blog, bei dem der Unternehmer selbst Posts (bestehend aus Text & Bildern) erstellen kann, in einer Art Admin-Panel mit WYSIWYG-Editor, und diese direkt oder zu einem bestimmten Zeitpunkt automatisch veröffentlichen kann

Beim Frontend fällt die Technologie-Auswahl noch relativ leicht, TypeScript und ein gängiges Framework wie z.B. React.
Als Datenbank würde ich MySQL oder PostgreSQL verwenden.

Beim Backend weiß ich nun aber nicht weiter.

Welches Framework würde sich für eine Webseite dieser Größe am besten anbieten?
Es sollte beim Hosting billig sein (z.B. durch niedrigen RAM-Verbrauch), der Code sollte einfach und schnell zu schreiben sein, und es sollte die oben genannten Features möglichst einfach ermöglichen.

Express, Next.js, Laravel, Django, Flask, ASP.Net, Spring, ... ?
Was würdet ihr nehmen und warum?

Und zum Hosting, muss ich die Webseite auf einem vServer hosten, oder reicht auch ein Webspace?

Homepage, HTML, Webseite, programmieren, CSS, WordPress, Java, JavaScript, ASP.NET, Datenbank, Express, Hosting, Informatik, PHP, Programmiersprache, Python, Softwareentwicklung, vServer, Webdesign, Webentwicklung, Webspace, Backend, Frontend, Flask

Ab wann beginnt Full-Stack Entwicklung im Webbereich und wie sieht es mit dem Gehalt aus?

Hallo liebe Community,

kurze Einleitung:

Ich bin Junior Webentwickler seit zirka 1 Jahr bei einer (relativ) kleinen Firma. Wir arbeiten viel mit Freelancer zusammen.

Ich bin mit HTML / CSS / JS eingestiegen und programmiere hier jetzt hauptsächlich über Wordpress die Websiten und Plugins.

Dazu wird bekannterweise → php genutzt. Daher geht hier Jquery, PHP, JS, MySQL, Git/hub und das Wissen in vielen bewährten Plugins und derer Programmierung für erweitere Funktionen einher.

Daher mache ich Backend und Frontend Entwicklung gleichermaßen. Das kann ich auch schon relativ gut, ich musste hier mir alles selbst beibringen und hab hauptsächlich mit Udemy und unserer tollen AI ChatGPT Hilfe mir alles beigebracht.
Die Codereviews hab ich mir von der AI machen lassen, Fehler aufzeigen, den Code bewerten und Verbesserungsmöglichkeiten zeigen.

So bin ich nun der Meinung, ein relativ solides Wissen angeeignet zu haben.
Jetzt zu meinen Fragen:

Frage 1:
Ab wann dürfte ich mich Full-Stack-Entwickler nennen? Ich hab großen Respekt vor erfahrenen Full-Stack-Entwicklern, weil da eine Menge zugehört. Aber ist es schon Full-Stack, wenn man Frontend und Backend macht?

Frage 2:
Ich arbeite in MV und bekomme noch 2600 € brutto gezahlt. Es ist noch relativ niedrig, weil ich zu Anfang viel gelernt habe, die ersten Monate, um den Anforderungen gerecht zu werden. 2400 € in den ersten 6 Monaten und bis jetzt (12. Monat) 2600.

Was wäre so eine faire Preisspanne? Die Firma gibts bald seit 10 Jahren und wir sind kein Start-up mehr. Auch läuft es gerade gut und ich konnte alle Aufgaben bewältigen, die mir seither gestellt wurden. Wenn ich auch für manche länger gebraucht habe (aber dafür bin ich ja auch ein Junior). Mich würde interessieren, wo es fair wäre? Ich möchte bald in die Gehaltsverhandlung gehen und wäre sehr dankbar über Ratschläge und eure Meinungen.

Liebe Grüße

Beruf, HTML, Webseite, programmieren, CSS, JavaScript, HTML5, Entwicklung, PHP, Programmiersprache, Webdesign, Webentwicklung, Backend, Frontend

Welche Programmiersprache für Backend (Web)?

An alle Programmierer,

welche Programmiersprache verwendet ihr im Backend und welche würdet ihr empfehlen?

Ich weis das ist eine sehr diskutierte Frage, aber was würdet ihr empfehlen, um in Deutschland einen Job zu bekommen?

Wenn man mal auf YouTube schaut, sagen die meisten Java - nein, C# (.Net) - veraltet (sind aber auch amerikanische YouTuber, da läuft es gefühlt anders).

Die Empfehlung ist: nimm Python (Django oder Flask), Ruby, GO, etc. (eben die neuen Sprachen).

Vergleicht man das allerdings mit den aktuellen Job Angeboten z.B. Stepstone dann gibt es aktuell 14 Jobangebote in Deutschland für Django, also für mich ein klares nein diese Sprache weiter zu lernen (genau so für alle anderen Sprachen)...

Gefordert werden Java oder C# (oder auch PHP, aber die Firmen setzten dann meistens auf WordPress), das sind allerdings auch die Sprachen, die keiner aktuell empfiehlt, daher bin ich da im Zwiespalt.

Aktuell verwende ich im Backend Django mit AWS, Ubuntu 22.04, NGINX und Gunicorn. Allerdings verwendet keiner in Deutschland Django, daher mal die Frage: Was macht denn eigentlich wirklich Sinn zu lernen, was auch viele Unternehmen verwenden?

Denn laut den Jobangeboten ist Java an erster Stelle und dann kommt C# an zweiter Stelle, für alle weiteren gibt es dann kaum Angebote.

Mit Frontend Frameworks ist das ja ein ähnliches Problem, es gibt gefühlt wöchentlich neuen Frameworks, aber bei Bewerbungen werden Angular (die meisten Job Angebote), dann React.js, dann Vue.js gefordert. Über allen anderen Frameworks brauchen wir nicht reden, da gibt es so gut wie keine Angebote.

Java 53%
C# 27%
PHP 20%
Python 0%
Node.js 0%
Weitere 0%
Webseite, Java, JavaScript, Programmiersprache, Python, Webentwicklung, Backend-Developer

Bootcamp Ja oder Nein?

Hallo zusammen,

Ich bin seit dem 08.01.2024 Fachinformatiker für Anwendungsentwicklung, soweit so gut. Leider habe ich erst mit einer Umschulung begonnen, die in die Hose ging, weil das ein Umschulungsunternehmen war, das einen rein gelockt hat, um an den Bildungsgutschein zu kommen, und das war's dann auch. Dadurch bin ich durch meine Abschlussprüfung durchgefallen. Im Anschluss habe ich direkt eine Ausbildung im 3. Lehrjahr begonnen bis zur Wiederholungsprüfung.

Das Ausbildungsunternehmen hat mich netterweise direkt angenommen. Allerdings war ich der einzige Entwickler vor Ort, und mein Ausbilder war jemand, der vor über 10 Jahren eine Umschulung zum FiAe gemacht hat, dann den Ausbilderschein erworben hat und seitdem keine Zeile Code mehr geschrieben hat. Dadurch konnte er nie meine Fragen beantworten, und ich musste mir eigenständig C# und Winforms aneignen, da das Unternehmen die Arbeiten der Mitarbeiter damit automatisieren / vereinfachen wollte. Ein Jahr lang habe ich für das Unternehmen native Desktop-Apps geschrieben und war für das Updaten der Programme zuständig.

In der Ausbildungszeit merkte ich, dass mich die Web-Entwicklung immer mehr interessiert, weshalb ich nach der Abschlussprüfung einen Udemy-Kurs über Web-Entwicklung begonnen habe. Hier habe ich bereits HTML und CSS durchgearbeitet und bin aktuell bei JavaScript.

Jetzt fragt sich der ein oder andere, warum hast du nicht auf der Arbeit gelernt? Nun ja, der Betrieb war der Meinung, solange er nicht 8 Stunden am Stück Code am Tippen ist, macht er Lagertätigkeiten und befüllt die Maschinen.

Jetzt kommt die Frage auf, dann hätte man das nach der Arbeit machen können. Richtig, jedoch musste ich mir hier die Theorie reinprügeln, die für die Abschlussprüfung benötigt wird, da ich in den 2 Jahren Umschulung nichts erklärt bekommen habe. Das heißt, in dem Jahr habe ich auf der Arbeit eigenständig mir C# und Winforms angeeignet und Lager- / Maschinen-Tätigkeiten ausgeübt und nach der Arbeit für die IHK-Prüfung gelernt.

Aus diesem Grund kann ich auch die Unternehmen verstehen, die Absagen schicken, weil die sehen, ich habe nur C# und Winforms gemacht und Daten an MySQL geschickt und abgerufen "woooow".

Da das Unternehmen auch der Meinung war, dass Git "Mist" sei und nur schlechte Programmierer Fehler machen und unprofessionell sind, wenn sie damit arbeiten, durfte ich das auch nicht während der Arbeitszeit lernen. Ergo eigne ich mir das neben dem Web-Entwickler Kurs auch noch an, in dem ich mit Visual Studio Code committe und pushe. Ja, das ist bei weitem nicht das, wofür Git da ist, aber ich bin noch am Lernen. :D

__________________________

Jetzt wurde es doch wieder ein langer Text, aber nun zu meiner Frage. :D

Ich habe demnächst ein Gespräch mit dem Arbeitsamt bezüglich des Bildungsgutscheins. Sehr wahrscheinlich werde ich einen erhalten, wurde mir im letzten Gespräch gesagt. Für den Fall, dass es funktioniert, will ich nicht viel Zeit verlieren, da ich schon 30 bin und immer noch keinen Job habe.

Deshalb kamen Bootcamps für mich in Frage und wollte euch fragen, ob Ihr selbst Erfahrungen mit einem Bootcamp gemacht habt oder vielleicht jemanden kennt und ein bestimmtes Bootcamp empfehlen könnt.

Ich bedanke mich schon mal im voraus für eure Zeit die Ihr mit dem Lesen der Frage und eurer Antwort investiert habt.

Gar kein Bootcamp, weiter eigenständig lernen 100%
Bootcamp Front-End Ja 0%
Bootcamp Full-Stack Ja 0%
HTML, CSS, JavaScript, Bildungsgutschein, Bootcamp, Programmiersprache, Webentwicklung, Backend, Frontend

Meistgelesene Beiträge zum Thema JavaScript