WebDev 1x1
WebDev 1x1
  • 57
  • 5 004
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/
มุมมอง: 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
Array Map - wofür und wie?
มุมมอง 448 หลายเดือนก่อน
Array Map - wofür und wie?
Array Reduce erklärt: wofür und wie?
มุมมอง 528 หลายเดือนก่อน
Array Reduce erklärt: wofür und wie?
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?
Webseiten verschönern mit CSS-Filtern
มุมมอง 110ปีที่แล้ว
Webseiten verschönern mit CSS-Filtern
Text/Elemente in HTML zentrieren, horizontal und(!) vertikal
มุมมอง 36ปีที่แล้ว
Text/Elemente in HTML zentrieren, horizontal und(!) vertikal

ความคิดเห็น

  • @ahmadumar9387
    @ahmadumar9387 วันที่ผ่านมา

    hey... "hamburg" steht unter Zitatschutz und darf nicht von Nicht-Hamburgern als Beispiel genutzt werden

    • @web-dev1x113
      @web-dev1x113 วันที่ผ่านมา

      Hmm, was soll ich sonst nehmen, "Bielefeld" :D ?

    • @ahmadumar9387
      @ahmadumar9387 วันที่ผ่านมา

      @@web-dev1x113 häää das gibt es gar nicht 🚀

  • @ahmadumar9387
    @ahmadumar9387 20 วันที่ผ่านมา

    boahh tolles spiel, durchdacht und einfach programmiert in einem coolen syntax, danke :)

    • @web-dev1x113
      @web-dev1x113 20 วันที่ผ่านมา

      Gern geschehen!

  • @SpeedCodes-oc7ed
    @SpeedCodes-oc7ed 27 วันที่ผ่านมา

    thanks it's a game changer for web development!

  • @thodin87
    @thodin87 หลายเดือนก่อน

    Vielen Dank für das Video, das ging ja super schnell! Hab einiges dabei gelernt.

    • @web-dev1x113
      @web-dev1x113 29 วันที่ผ่านมา

      Gern, war noch im Thema drin, also passte ganz gut.

  • @thodin87
    @thodin87 หลายเดือนก่อน

    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?

    • @web-dev1x113
      @web-dev1x113 หลายเดือนก่อน

      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.

  • @kabirkumar5815
    @kabirkumar5815 หลายเดือนก่อน

    Danke, ich kann mit diese meine Deutsch besser machen unde Vue auch lernen!

  • @SpeedCodes-oc7ed
    @SpeedCodes-oc7ed หลายเดือนก่อน

    many thanks it's an awesome explanation!

    • @web-dev1x113
      @web-dev1x113 หลายเดือนก่อน

      I'm glad you liked it!

    • @SpeedCodes-oc7ed
      @SpeedCodes-oc7ed หลายเดือนก่อน

      @@web-dev1x113 i'm glad to see this, think you one of rare guys who really use modern from scratch... :)

  • @web-dev1x113
    @web-dev1x113 2 หลายเดือนก่อน

    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 3 หลายเดือนก่อน

    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 5 หลายเดือนก่อน

    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 5 หลายเดือนก่อน

      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 5 หลายเดือนก่อน

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

    • @web-dev1x113
      @web-dev1x113 5 หลายเดือนก่อน

      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 5 หลายเดือนก่อน

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

  • @ahmadumar9387
    @ahmadumar9387 6 หลายเดือนก่อน

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

    • @web-dev1x113
      @web-dev1x113 6 หลายเดือนก่อน

      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 6 หลายเดือนก่อน

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

  • @mugiwaranoadi5932
    @mugiwaranoadi5932 6 หลายเดือนก่อน

    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 6 หลายเดือนก่อน

      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 7 หลายเดือนก่อน

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

    • @web-dev1x113
      @web-dev1x113 7 หลายเดือนก่อน

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

  • @SpeedCodes-oc7ed
    @SpeedCodes-oc7ed 8 หลายเดือนก่อน

    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 8 หลายเดือนก่อน

      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 9 หลายเดือนก่อน

    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 9 หลายเดือนก่อน

    Tolles Video...vielen Dank!!

  • @developbaer
    @developbaer 11 หลายเดือนก่อน

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

    • @web-dev1x113
      @web-dev1x113 11 หลายเดือนก่อน

      Vielen Dank!

  • @tobene
    @tobene 11 หลายเดือนก่อน

    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 11 หลายเดือนก่อน

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