- 57
- 5 004
WebDev 1x1
Germany
เข้าร่วมเมื่อ 24 มิ.ย. 2022
In diesem Kanal erkläre ich die Grundlagen der modernen Web-Entwicklung mit JavaScript und diversen Frameworks wie ReactJS, MobX, VueJs, NodeJs, AstroJS, HTMX etc. Seit über 25 Jahren bin ich Software-Entwickler und seit über 15 Jahren im Bereich Web sowohl im Front- als auch im Backend tätig.
Impressum/Imprint:
www.haewss.de/imprint.html
Impressum/Imprint:
www.haewss.de/imprint.html
3 unbekannte JS Funktionalitäten
Lerne JavaScript & Web Development:
webdev1x1.info/
---
Hier stelle ich 3 eher unbekannte JavaScript Funktionalitäten vor. Vielleicht ist ja etwas dabei, was Dir in Zukunft das Coden erleichtert.
-----------
Weitere Informationen, Ressourcen und eine Liste meiner Kurse über Webentwicklung und Programmierung findet Ihr auf meiner Homepage:
webdev1x1.info/
webdev1x1.info/
---
Hier stelle ich 3 eher unbekannte JavaScript Funktionalitäten vor. Vielleicht ist ja etwas dabei, was Dir in Zukunft das Coden erleichtert.
-----------
Weitere Informationen, Ressourcen und eine Liste meiner Kurse über Webentwicklung und Programmierung findet Ihr auf meiner Homepage:
webdev1x1.info/
มุมมอง: 26
วีดีโอ
Ratespiel mit Alpine JS
มุมมอง 7621 วันที่ผ่านมา
Lerne JavaScript & Web Development: webdev1x1.info/ Wir implementieren ein Zahlenratespiel in HTML und JavaScript mit Hilfe der Library Alpine JS. Weitere Informationen, Ressourcen und eine Liste meiner Kurse über Webentwicklung und Programmierung findet Ihr auf meiner Homepage: webdev1x1.info/
Die Map-Datenstruktur in JavaScript
มุมมอง 8021 วันที่ผ่านมา
Lerne JavaScript & Web Development: webdev1x1.info/ Ich erkläre warum, wie und wann man eine Map als Datenstruktur in JS nutzen sollte. Weitere Informationen, Ressourcen und eine Liste meiner Kurse über Webentwicklung und Programmierung findet Ihr auf meiner Homepage: webdev1x1.info/
Map/Reduce mit JavaScript-Arrays
มุมมอง 5521 วันที่ผ่านมา
Lerne JavaScript & Web Development: webdev1x1.info/ Ich erkläre einem Beispiel, wie man die Array-Funktionen map und reduce verwenden kann, um z.B. HTML zu rendern. Weitere Informationen, Ressourcen und eine Liste meiner Kurse über Webentwicklung und Programmierung findet Ihr auf meiner Homepage: webdev1x1.info/
CSV Datei laden, parsen und rendern
มุมมอง 81หลายเดือนก่อน
Lerne JavaScript & Web Development: webdev1x1.info/ Wie man CSV Dateien (und andere) im Browser lädt und weiter verarbeitet. Weitere Informationen, Ressourcen und eine Liste meiner Kurse über Webentwicklung und Programmierung findet Ihr auf meiner Homepage: webdev1x1.info/
CSV (und anderes) in JavaScript parsen
มุมมอง 40หลายเดือนก่อน
Lerne JavaScript & Web Development: webdev1x1.info/ Wie man CSV (und anderes) parset und in ein Array von Objekten verwandelt, erkläre ich in diesem Video. Weitere Informationen, Ressourcen und eine Liste meiner Kurse über Webentwicklung und Programmierung findet Ihr auf meiner Homepage: webdev1x1.info/
Sprich Deine Webseitenbesucher an (Speech Synthesis API)
มุมมอง 26หลายเดือนก่อน
Lerne JavaScript & Web Development: webdev1x1.info/ Lass den Browser sprechen mit der Speech Synthesis API. Weitere Informationen, Ressourcen und eine Liste meiner Kurse über Webentwicklung und Programmierung findet Ihr auf meiner Homepage: webdev1x1.info/
Form Elements in AlpineJs
มุมมอง 99หลายเดือนก่อน
Learn JavaScript & Web Development: webdev1x1.info/ How to use Form Elements select and textarea in AlpineJs. A list of my courses on web development and programming can be found on my homepage: webdev1x1.info/Meine-Kurse-auf-Udemy/
Form Elements in VueJs
มุมมอง 109หลายเดือนก่อน
Learn JavaScript & Web Development: webdev1x1.info/ How to use Form Elements select and textarea in VueJs. A list of my courses on web development and programming can be found on my homepage: webdev1x1.info/Meine-Kurse-auf-Udemy/
Forms with VueJs
มุมมอง 22หลายเดือนก่อน
Learn JavaScript & Web Development: webdev1x1.info/ How to use Form Elements select and textarea in VueJs. A list of my courses on web development and programming can be found on my homepage: webdev1x1.info/Meine-Kurse-auf-Udemy/
How to use HTMX + AstroJs
มุมมอง 144หลายเดือนก่อน
Learn JavaScript & Web Development: webdev1x1.info/ HTMX AstroJS, is it a Dream Team for Web Development? Decide for yourself, but I will implement a simple Counter Project in this video to show you the absolute basics. Homepage All my Courses: webdev1x1.info
React forms: select and textarea
มุมมอง 84หลายเดือนก่อน
Learn JavaScript & Web Development: webdev1x1.info/ How to use Form Elements select and textarea in React. A list of my courses on web development and programming can be found on my homepage: webdev1x1.info/Meine-Kurse-auf-Udemy/
How to use form elements in React
มุมมอง 722 หลายเดือนก่อน
Learn JavaScript & Web Development: webdev1x1.info/ How to use Form Elements like input in React and what is different than in plain JS/HTML. A list of my courses on web development and programming can be found on my homepage: webdev1x1.info/Meine-Kurse-auf-Udemy/
Variable declaration with let and const
มุมมอง 722 หลายเดือนก่อน
Learn JavaScript & Web Development: webdev1x1.info/ Should you always use "let" instead of "var"? When should you use "const"? Is there still a use case for "var"? These questions will be answered in this video. Eine Liste meiner Kurse über Webentwicklung und Programmierung findet Ihr auf meiner Homepage: webdev1x1.info/Meine-Kurse-auf-Udemy/
Server schützen und Benutzereingaben drosseln mit JavaScript
มุมมอง 1095 หลายเดือนก่อน
Learn JavaScript & Web Development: webdev1x1.info/ In diesem Video erläutere ich, wie Ihr Benutzereingabe drosseln könnt und so eine unnötige Belastung Eures Server und des Netzwerks vermeiden könnt. Eine Liste meiner Kurse über Webentwicklung und Programmierung findet Ihr auf meiner Homepage: webdev1x1.info/Meine-Kurse-auf-Udemy/
HTML-Formulare: Daten übermitteln und validieren ohne JavaScript
มุมมอง 286 หลายเดือนก่อน
HTML-Formulare: Daten übermitteln und validieren ohne JavaScript
React, Svelte, VueJs, Alpine.js, ... - Welches Web-Framework soll ich lernen?
มุมมอง 606 หลายเดือนก่อน
React, Svelte, VueJs, Alpine.js, ... - Welches Web-Framework soll ich lernen?
HTMX mit Astro und AlpineJS: Crashkurs zum AHA-Stack
มุมมอง 2007 หลายเดือนก่อน
HTMX mit Astro und AlpineJS: Crashkurs zum AHA-Stack
Aufklappbare Sidebar mit CSS (kein JavaScript)
มุมมอง 358 หลายเดือนก่อน
Aufklappbare Sidebar mit CSS (kein JavaScript)
JavaScript: Bestimmte Elemente richtig löschen aus einem Array
มุมมอง 889 หลายเดือนก่อน
JavaScript: Bestimmte Elemente richtig löschen aus einem Array
Wie man in Tailwind CSS Klassen nicht(!) kombinieren darf und die Lösung
มุมมอง 219 หลายเดือนก่อน
Wie man in Tailwind CSS Klassen nicht(!) kombinieren darf und die Lösung
Chrome Dev Tools - Zugriff von JS auf DOM-Elemente
มุมมอง 259 หลายเดือนก่อน
Chrome Dev Tools - Zugriff von JS auf DOM-Elemente
Dev Tools in Chrome und Edge Kurzanleitung
มุมมอง 3910 หลายเดือนก่อน
Dev Tools in Chrome und Edge Kurzanleitung
Kommentare vermeiden und besseren Code schreiben
มุมมอง 13111 หลายเดือนก่อน
Kommentare vermeiden und besseren Code schreiben
Elemente eines Array gruppieren mit neuem JS-Feature groupBy
มุมมอง 36ปีที่แล้ว
Elemente eines Array gruppieren mit neuem JS-Feature groupBy
JavaScript Module-Import-Maps - warum und wie?
มุมมอง 59ปีที่แล้ว
JavaScript Module-Import-Maps - warum und wie?
Text/Elemente in HTML zentrieren, horizontal und(!) vertikal
มุมมอง 36ปีที่แล้ว
Text/Elemente in HTML zentrieren, horizontal und(!) vertikal
hey... "hamburg" steht unter Zitatschutz und darf nicht von Nicht-Hamburgern als Beispiel genutzt werden
Hmm, was soll ich sonst nehmen, "Bielefeld" :D ?
@@web-dev1x113 häää das gibt es gar nicht 🚀
boahh tolles spiel, durchdacht und einfach programmiert in einem coolen syntax, danke :)
Gern geschehen!
thanks it's a game changer for web development!
Vielen Dank für das Video, das ging ja super schnell! Hab einiges dabei gelernt.
Gern, war noch im Thema drin, also passte ganz gut.
An sich gutes Video, ich hätte mir aber noch ein paar Dinge gewünscht: - moderneren Syntax (funktional mit .map() statt index basierte Schleifen) - Fehlerbehandlung (kommt gar nicht vor), z.B. leere Zeilen ignorieren, bei unvollständigen Zeilen throw oder so. - Wofür kann ich das verwenden? Direkter Dateizugriff aus dem Browser ist ja nicht möglich, also vll eine kleine Datei-Upload Funktion?
Klar, kann man alles noch machen, Fokus war hier die Verwendung von split und wie man damit Strings parsen kann und war auch eher an Anfänger gerichtet (ich vermute, Du bist dann eher nicht die Zielgruppe?). Das Video wäre auch sonst zu lang geworden, aber vielleicht kann ich Deine angesprochenen Themen in weiteren Videos erklären.
Danke, ich kann mit diese meine Deutsch besser machen unde Vue auch lernen!
Sehr gut!
many thanks it's an awesome explanation!
I'm glad you liked it!
@@web-dev1x113 i'm glad to see this, think you one of rare guys who really use modern from scratch... :)
This video is a lesson from my upcoming course on ES6/ES.next, so if you have suggestions on how to improve it or what specific topic should be covered in the course, please leave a comment down below.
Weißt du, ich bin nur neugierig, ich habe gesehen, dass du so einen guten Kurs hast, aber es fehlen genug Studenten. Macht es Ihnen etwas aus, wenn wir über die Strategie diskutieren, um Ihnen aufregende Verkäufe zu erzielen und maximal 10.000 Studenten plus organische Bewertungen zu erhalten, um Ihren Kurs höher einzustufen
Hier fehlt noch der wichtige Kontext, dass der Server damit absolut nicht "geschützt" wird, sondern dass man hiermit verhindert dass der server den client drosselt. Das tatsächliche Schützen muss im backend gemacht werden (z.b. mit nginx rate-limit), sonst kann immernoch jeder die Anfrage aus dem network tab herauskopieren und den Server mit Anfragen zuspammen.
Ja, absolut richtig, hier geht es nur darum, den Server und das Netzwerk nicht aus der App heraus unnötig zu belasten und nicht um DOS-Attacken, die jemand (böswillig) begeht. Also Benutzereingaben drosseln (throttle) auf dem Client in der Webseite.
in alpine nennt man das x-models.denounce.500ms 😇
Danke für den Alpine.js-Verweis. Dort gibt es .throttle und .debounce, wobei throttle auch zwischendurch in einem Intervall triggered und debounce nur wenn nichts mehr eingegeben wird, soweit ich das verstehe.
@@web-dev1x113 ahh jetzt check ich den unterschied, vielen dank
thanks für dein tutorial, kann man auch eine liste mit form allein versenden?
Kommt darauf an, was die Eingabe sein soll. Man kann ein <select> <option> nehmen mit Mehrfachauswahl, dann wird auch eine "Liste" gesendet. Mehrere Dateien kann man auch senden lassen. Das geht mit dem Attribut multiple bei den Elementen, die das unterstützen.
@@web-dev1x113 vielen dank, das kannte ich nicht
Warum sollte man einen bubble sort (oder andere bestehende Sortierungen oder Algorithmen) selbst programmieren können? Es reicht, dass man weiß was es ist und wofür es genutzt wird. Den Code gibt es in jeder Sprache überall zu finden oder die KI schreibt ihn dir 100 mal schneller. Wahrscheinlich geht es dir darum, dass man Rekursionen versteht und richtig anwenden kann. Viel wichtiger ist, dass man kreative Lösungen für individuelle Probleme erschaffen kann. Man muss seine Ideen in Code umwandeln können. Das bekommt man nur durch Erfahrung hin, das kann man nirgendwo nachlesen. Ansonsten hat mir das Video und deine Tipps gut gefallen 👌🏼
Genau da sehe ich das Problem, wenn man kreative Lösungen finden möchte, braucht man auch das „Werkzeug“ bzw die Bausteine dafür. Wenn Du Dir alles von einer KI erzeugen lässt, hast Du diese Bausteine nicht zur Verfügung und kannst eben diese nicht nutzen um selbst Algorithmen zu schreiben. Wenn es dann an Performance Optimierung geht o.ä. kommt man evtl in Probleme. Den Code von Bubblesort gibt natürlich überall zum Nachlesen, aber zumindest sollte man sich das dann auch mal ansehen und nachvollziehen. In Mathe macht man ja auch das 1x1 zuerst bevor man Lineare Algebra macht. Aber muss auf der anderen Seite natürlich jeder selbst entscheiden, wie tief man da reingeht. Ich kann nur aus meiner Sicht (bin vermutlich nicht der einzige) sagen, dass ich Bedenken hätte jemanden einzustellen, der sich den Code nur von einer KI schreiben lässt. Kann man sicherlich als Hilfestellung verwenden, aber man muss auch beurteilen können, ob der Code korrekt und performant ist.
Ein ausgezeichnetes Video. Denken Sie darüber nach, einen AHA-Stack-Kurs für Fortgeschrittene bei Udemy zu belegen?
Danke, ja könnte sein, dass es bald einen Kurs dazu gibt.
Einfach nur der Traum... Sie haben gerade als erster die 1. Astro ist das Beste Backend Lösung von JS, viele JS Devs von NextJS zu Astro 2. HTMX ist simple und einfacher 3. AlpineJS ist die beste Lösung für Reactivity und DOM Manipulation Dein Stack ist sowohl simple als auch performant, Chapeau!
Für viele Anwendungsfälle wird HTMX ausreichend sein und das hat den Vorteil, dass man kein JS braucht und die Logik auf dem Server haben kann. Wenn man dann hier und da doch ein bisschen clientseitiges Skripting braucht, ist AlpineJS sehr gut geeignet, diese Aufgabe zu erfüllen. Man muss nur die Balance zwischen den Technologien richtig hinbekommen, dann kann man damit sicherlich einfache bis mittelkomplexe Webseiten und Webapps sehr gut und schnell hinkriegen.
Kleine Ergänzung, mit $1, $2, $3, etc. bekommt man die zuvor selektierten DOM-Elemente. Vielleicht nicht ganz so oft nützlich, aber wenn man zwei Elemente vergleichen möchte z.B., kann man die zwei nacheinander selektieren und dann mit $0 und $1 darauf zugreifen.
Tolles Video...vielen Dank!!
Super Video! Ich freue mich auf weitere. Mein Abo hast du :)
Vielen Dank!
Anstelle von kommentaren können unittests auch sehr hilfreich dabei sein, zu verstehen wie ein programm oder einzelne komponenten funktionieren. Generell sind oft beispiel in- & outputs einfacher zu verstehen als eine erklärung des codes selbst
Ja, ist richtig, das ist sicherlich auch eine gute Möglichkeit, um Code zu dokumentieren! 👍
Ich lernen deutsch mit deine videos danke schön!
Okay, das ist echt super smart. Wo hast du das gefunden oder gelernt?
Das ist ganz witzig, ich hab beim neusten TypeScript-Update gesehen, dass bei diesem Konstrukt die Typen besser erkannt werden und hab dann damit ein bisschen experimentiert. Ist sicherlich nicht für jeden, viele scheinen das auch überhaupt nicht zu mögen, aber manchmal kann das schon nützlich sein, solange JS noch kein Pattern-Matching hat (gibt es schon als Proposal allerdings).