WebDev 1x1
WebDev 1x1
  • Видео 45
  • Просмотров 3 971
How to use form elements in React
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/
Просмотров: 29

Видео

Variable declaration with let and const
Просмотров 6514 дней назад
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
Просмотров 1093 месяца назад
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
Просмотров 274 месяца назад
Learn JavaScript & Web Development: webdev1x1.info/ Hier zeige ich wie man Daten vom Benutzer auf einer Webseite eingeben und zum Server schicken lassen kann, ohne dabei ein Framework wie React oder VueJs einsetzen zu müssen. Homepage: webdev1x1.info/
React, Svelte, VueJs, Alpine.js, ... - Welches Web-Framework soll ich lernen?
Просмотров 544 месяца назад
Learn JavaScript & Web Development: webdev1x1.info/ Heute möchte ich mit euch über ein Thema sprechen, das viele von euch interessieren wird, die mit der Webentwicklung anfangen möchten oder schon angefangen haben. Und zwar geht es um die Frage: Was sollte man lernen, wenn man mit der Webentwicklung anfangen möchte und einen Job in diesem Bereich bekommen möchte? React, Svelte, VueJs oder doch ...
HTMX mit Astro und AlpineJS: Crashkurs zum AHA-Stack
Просмотров 1626 месяцев назад
Learn JavaScript & Web Development: webdev1x1.info/ In diesem Video stelle ich den AHA-Stack (AstroJS, HTMX, AlpineJS) vor und beleuchte am Beispiel einer Quiz-App die vielfältigen Möglichkeiten, die sich ergeben. Homepage: webdev1x1.info My AHA stack course on Udemy: www.udemy.com/course/create-web-apps-with-astrojs-htmx-and-alpinejs/?referralCode=98DF262B574D6F1A530B
Array Map - wofür und wie?
Просмотров 426 месяцев назад
Learn JavaScript & Web Development: webdev1x1.info/ In diesem Video erkläre ich die Verwendung der map-Funktion bei Arrays und wofür man sie benutzen kann. Homepage: webdev1x1.info
Array Reduce erklärt: wofür und wie?
Просмотров 486 месяцев назад
Learn JavaScript & Web Development: webdev1x1.info/ In diesem Video erkläre wie und wofür man die reduce Funktion bei Arrays am besten verwenden kann. Homepage: webdev1x1.info
Aufklappbare Sidebar mit CSS (kein JavaScript)
Просмотров 306 месяцев назад
Wenn Ihr versucht, bei der Webentwicklung möglichst ohne JavaScript auszukommen, dürfte Euch dieses Video interessieren: Eine auf- und zuklappbare Seitenleiste ohne JS, nur mit HTML/CSS. Den kompletten Code findet Ihr hier: gist.github.com/HdHeini/0e8d9db99bf6985a8d4a9d72e09b68d7
JavaScript: Bestimmte Elemente richtig löschen aus einem Array
Просмотров 867 месяцев назад
Elemente aus einem Array finden und mit splice löschen? Vorsicht, hier kann man leicht reinfallen. Homepage: webdev1x1.info
Wie man in Tailwind CSS Klassen nicht(!) kombinieren darf und die Lösung
Просмотров 217 месяцев назад
Dieser Fehler in Tailwind kann leicht passieren, wenn man die Funktionsweise von Klassen in CSS nicht genau kennt, aber es gibt eine einfache Lösung. Homepage: webdev1x1.info
Chrome Dev Tools - Zugriff von JS auf DOM-Elemente
Просмотров 257 месяцев назад
Wie kann man eigentlich in den Dev-Tools vom JS-Kontext (Konsole) auf Elemente im DOM zugreifen? Es geht sowohl auf herkömmliche Art und Weise als auch mit einem kleinen Trick. Werde Teil der Web-Dev-Community: skool.com/web-dev-1x1
Dev Tools in Chrome und Edge Kurzanleitung
Просмотров 348 месяцев назад
Wenn Ihr noch nicht so vertraut mit den Chrome Dev Tools seid, könnte dieses Video etwas für Euch sein. Ich erkläre die Grundlagen wie Setzen von Breakpoints, Variablenwerte auswerten, im CallStack navigieren, usw. Meine Skool.com Community: skool.com/web-dev-1x1
Kommentare vermeiden und besseren Code schreiben
Просмотров 1309 месяцев назад
Learn JavaScript & Web Development: webdev1x1.info/ Vielleicht ein etwas kontroverses Thema, aber Kommentare sind nicht immer gut und ich versuche in diesem Videos aufzuzeigen, warum man möglichst wenige Kommentare schreiben sollte. Homepage: webdev1x1.info
Elemente eines Array gruppieren mit neuem JS-Feature groupBy
Просмотров 3610 месяцев назад
In diesem Video geht es um ein sehr neues Feature in JavaScript, nämlich Object.groupBy, mit dem man Elemente nach beliebigen Kriterien gruppieren kann.
JavaScript Module-Import-Maps - warum und wie?
Просмотров 5711 месяцев назад
JavaScript Module-Import-Maps - warum und wie?
Webseiten verschönern mit CSS-Filtern
Просмотров 10811 месяцев назад
Webseiten verschönern mit CSS-Filtern
Text/Elemente in HTML zentrieren, horizontal und(!) vertikal
Просмотров 32Год назад
Text/Elemente in HTML zentrieren, horizontal und(!) vertikal
CSS: Abstand zwischen Elementen mit margin? Das geht besser.
Просмотров 101Год назад
CSS: Abstand zwischen Elementen mit margin? Das geht besser.
JavaScript Funktionen: Arrow-Functions oder function Keyword?
Просмотров 132Год назад
JavaScript Funktionen: Arrow-Functions oder function Keyword?
JavaScript Variablendeklaration: let? const? var?
Просмотров 67Год назад
JavaScript Variablendeklaration: let? const? var?
Macht switch (true) ... Sinn?
Просмотров 337Год назад
Macht switch (true) ... Sinn?
JavaScript spielerisch lernen: Funktionen
Просмотров 54Год назад
JavaScript spielerisch lernen: Funktionen
JavaScript spielerisch lernen: Arrays
Просмотров 39Год назад
JavaScript spielerisch lernen: Arrays
JavaScript spielerisch lernen: Gesamtbewertung der Fragen
Просмотров 49Год назад
JavaScript spielerisch lernen: Gesamtbewertung der Fragen
JavaScript spielerisch lernen: Punkte zählen
Просмотров 112Год назад
JavaScript spielerisch lernen: Punkte zählen
JavaScript spielerisch lernen: Bedingungen
Просмотров 54Год назад
JavaScript spielerisch lernen: Bedingungen
JavaScript spielerisch lernen: Variablen und Konstanten
Просмотров 73Год назад
JavaScript spielerisch lernen: Variablen und Konstanten
JavaScript spielerisch lernen: Dev-Tools und Konsole
Просмотров 78Год назад
JavaScript spielerisch lernen: Dev-Tools und Konsole
JavaScript spielerisch lernen: Benutzereingaben mit prompt()
Просмотров 101Год назад
JavaScript spielerisch lernen: Benutzereingaben mit prompt()

Комментарии

  • @web-dev1x113
    @web-dev1x113 15 дней назад

    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.

  • @VictorTemitope-p6u
    @VictorTemitope-p6u Месяц назад

    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

  • @shadowpenguin3482
    @shadowpenguin3482 3 месяца назад

    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.

    • @web-dev1x113
      @web-dev1x113 3 месяца назад

      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.

  • @ahmadumar9387
    @ahmadumar9387 3 месяца назад

    in alpine nennt man das x-models.denounce.500ms 😇

    • @web-dev1x113
      @web-dev1x113 3 месяца назад

      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.

    • @ahmadumar9387
      @ahmadumar9387 3 месяца назад

      @@web-dev1x113 ahh jetzt check ich den unterschied, vielen dank

  • @ahmadumar9387
    @ahmadumar9387 4 месяца назад

    thanks für dein tutorial, kann man auch eine liste mit form allein versenden?

    • @web-dev1x113
      @web-dev1x113 4 месяца назад

      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.

    • @ahmadumar9387
      @ahmadumar9387 4 месяца назад

      @@web-dev1x113 vielen dank, das kannte ich nicht

  • @mugiwaranoadi5932
    @mugiwaranoadi5932 4 месяца назад

    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 👌🏼

    • @web-dev1x113
      @web-dev1x113 4 месяца назад

      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.

  • @alr5897
    @alr5897 5 месяцев назад

    Ein ausgezeichnetes Video. Denken Sie darüber nach, einen AHA-Stack-Kurs für Fortgeschrittene bei Udemy zu belegen?

    • @web-dev1x113
      @web-dev1x113 5 месяцев назад

      Danke, ja könnte sein, dass es bald einen Kurs dazu gibt.

  • @SpeedCodes-oc7ed
    @SpeedCodes-oc7ed 6 месяцев назад

    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!

    • @web-dev1x113
      @web-dev1x113 6 месяцев назад

      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.

  • @web-dev1x113
    @web-dev1x113 7 месяцев назад

    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.

  • @NeverCodeAlone
    @NeverCodeAlone 7 месяцев назад

    Tolles Video...vielen Dank!!

  • @developbaer
    @developbaer 9 месяцев назад

    Super Video! Ich freue mich auf weitere. Mein Abo hast du :)

  • @tobene
    @tobene 9 месяцев назад

    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

    • @web-dev1x113
      @web-dev1x113 9 месяцев назад

      Ja, ist richtig, das ist sicherlich auch eine gute Möglichkeit, um Code zu dokumentieren! 👍

  • @zzzzzzzzzzzzzzzzzzz13142
    @zzzzzzzzzzzzzzzzzzz13142 Год назад

    Ich lernen deutsch mit deine videos danke schön!

  • @pixobit5882
    @pixobit5882 Год назад

    Okay, das ist echt super smart. Wo hast du das gefunden oder gelernt?

    • @web-dev1x113
      @web-dev1x113 Год назад

      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).