Neue Basic Web Dev IDE mit Vite! 👍 [TUTORIAL]

[@martintows2369]

Gerne mehr von Vite.

[@chris93r]

Ein Guide für eine komplette Entwicklungsumgebung wäre toll! Auch Plugins / Shortcuts für bspw. Visual Studio Code die die Produktivität erhöhen sind natürlich interessant.

[@jerry9548]

Endlich mit Vite! Vite ist einfach absolut top und sorgt im Gegensatz zu Webpack und Gulp dafür, dass die Entwicklung selbst und nicht das Einrichten der IDE im Vordergrund steht.

[@UnleashedDesign]

Absolut, als ich es das erste mal genutzt hab dachte ich so WTF ist das schnell :D da war die Entscheidung gefällt

[@Defcon1702]

Also ich würde mich definitiv über nen Video zu Vite / TS / Autoprefixing und Assetprocessing freuen! Danke für die Weiterentwicklung der Umgebung!

[@UnleashedDesign]

wird kommen ;)

[@Tengino2022]

Sehr schöner Überblick! Ich selbst bin auch vor einigen Wochen zu Vite gewechselt. Es ist einfach einzurichten und sehr performant. Über ein komplettes Tutorial zu Vite würde ich mich freuen. Gibt bestimmt einiges, was ich selber noch anpassen könnte. 😆

[@UnleashedDesign]

Wird definitiv in einer Form kommen, jedoch wird das noch dauern :)

[@jodufan8754]

An dieser Stelle einmal einen Kuss an Evan You dafür das er dieses System entwickelt hat was ein krasser typ! Der hat vue nicht umsonst erstellt der kanns einfach!!

[@UnleashedDesign]

Absolut mega gut gemacht !

[@kobi-kobsen]

Wieder einmal vielen Dank!

[@UnleashedDesign]

Danke, freut mich wenn dir das Video gefällt :)

[@wunderbarrecordings]

sauber! und gerne auch die anderen Features berücksichtigen. wobei ich mir nicht sicher bin, ob mit Vite aktuell tatsächlich Bild Komprimierung möglich ist...

[@UnleashedDesign]

Doch geht, weil man jedes RollUp Plugin nutzen kann und RollUp bietet quasi alles

[@jerry9548]

vite-imagetools scheint dafür perfekt zu sein

[@MrGuitarMix]

Vite war schon vor 2 Jahren im Hype. Das ist an mir am Anfang total vorbei gegangen. Seit ein paar Wochen bin ich von Webpack auf Vite umgestiegen und bin sehr beeindruckt.

[@pimpulsiv]

Starkes Video! Bitte auch die weiteren Videos!

[@UnleashedDesign]

Wird kommen :)

[@tinobernhardt3806]

Danke Top erklärt. Vielen Dank für deine Bemühungen. 👍👍👍👍

[@UnleashedDesign]

Danke freut mich wenn es dir gefällt :)

[@ralfhein3207]

Mal wieder ein tolles Video. Ich werde diese Entwicklungsumgebung ausprobieren. Mach weiter so!

[@UnleashedDesign]

Danke, kann ich nur empfehlen so begeistert davon, weil es so schnell geht.

[@3dwebsites.]

Danke!

[@UnleashedDesign]

Gerne :)

[@FlorianBinder]

Tolles Video! Spannendes Thema ist das mit Vite! 👍

[@UnleashedDesign]

Danke :)

[@julianmorguet2575]

Danke für das Video. Würde mich sehr über ein umfängliches Vite Tutorial freuen 😊

[@UnleashedDesign]

Was würdest du da denn genau sehen?

[@paulpreu9822]

Super cool aufgesetzt und sehr anfängerfreundlich! Ich würde mir in Zukunft etwas zu React wünschen.

[@UnleashedDesign]

Danke :) aber zu React wird auf diesem Channel nichts kommen, einfach kein Freund davon :D

[@paulpreu9822]

@@UnleashedDesign Alles klar, deine Tutorials kann man ja auch problemlos übertragen ^^

[@crskunst]

ich wünsche mir tatsächlich ein tutorial zu vite an sich. wir haben in unserer schule einen mentor, der hauptsächlich damit arbeitet und vite in den höchsten tönen lobt. und ich möchte projekte, die es schon gibt von css auf sass umstellen und im prinzip gern in vite einbinden. ich tät gern wissen, wie man das am besten machen kann.

[@isniphsi7843]

Wie bekommt man das Fenster hin was den Browser Inhalt darstellt :o

[@plxcxs5855]

hi bin blutiger anfänger und habe in einem tutorial eine website mit vite gebaut mit 3d elementen wenn ich sie aber auf meine seite deployen will kommt nur der blanke text was kann ich machen ??

[@joachimlamberto3160]

Top Video! Gerne auch mehr von Vite. Nur noch mal nachgefragt, weil ich es gerade sehe. SASS selber empfiehlt statt @import auf @use zu setzen, da @import bald auslaufen soll. Du nutzt aber noch @import weil das derzeit nur mit der Dart-Lib läuft oder?

[@UnleashedDesign]

Ja, werde das umstellen wenn es ausgelaufen ist :)

[@ferdinandfidel1670]

Gern Vite!

[@noplay6360]

Vite wird denke über kurz oder lang die anderen Build Tools ablösen. Vue wird immer populärer und vite ist halt direkt vom gleichen Entwickler, somit kann man ne hohe Kompatibilität erwarten.

[@sascham.7217]

Danke für Dein Tutorial. Gern auch .env, autoprefixer und img processing ergänzen

[@UnleashedDesign]

Werde ich mir mal auf den Back-Log schreiben :)

[@jerry9548]

@@UnleashedDesign Vielleicht könnte man da eine Serie über Vite machen in welcher man in kurzen Videos zeigt wie man .env, bildoptimierung, autoprefixer und co. hinzufügt. Vielleicht so ein 100 Sekunden Format o.ä wo jeweils nur .env oder nur bildoptimierung etc. hinzugefügt wird ^^

[@la3el]

Erstmal cool und danke! Darauf hatte ich schon länger mal gehofft... Aber das hat wieder ne menge Fragen aufgeworfen und wahrscheinlich bin ich einfach nicht uptodate - z.B. wtf hashvalue hää? Oder, es ist schön dass seit einigen Jahren der Weg zum "Terminal" wieder gefunden und aufgelebt wurde, aber im Grunde, gerade bei solchen Sachen kommt es mir eher wie eine "rückentwicklung" vor - warum hat noch keiner eine IDE entwickelt wo man angibt was man haben will/braucht und dieser das alles automatisiert über terminal und npm usw im Hintergrund ausführt (sollte kein Hexenwerk sein - evtl. mach ich da mal was ;) ). Aber auf jeden Fall sehr interessant! Und ja, bitte mehr solche Videos! Der Weg mag zwar das Ziel sein, aber in bequemen Schuhen kommt man einfach entspannter an :D

[@UnleashedDesign]

Generell ist die Console meistens schneller als eine GUI es gibt ja Software z.B. WebStorm die direkt vieles können jedoch kann z.B. die Funktionswelt von Vite auch direkt in einer Pipeline ausgeführt werden. Was dann erst den wirklichen Mehrwert bringt :)

[@_SuperSadex]

Vielen Dank für das Video! Mich würde noch interessieren, welche Erweiterungen für VSCode verwendet werden.

[@UnleashedDesign]

Dazu kommt bald ein Video :)

[@barneysmith]

super video. als neuling in vite würde mich testen und typescript schon interessieren

[@yt7042]

Danke für das Video. Wie immer "kurz" & knackig. Warum wurde der public folder für statische Ressourcen eigentlich nicht berücksichtigt? Wegen der Minimalversion oder gib es da noch Folge-Videos? Schöne Woche!

[@UnleashedDesign]

Es sollte das Absolute Basic wissen vermittelt werden damit alle in Zukunft einfach mit meinem Setup die Videos nachbauen können :) daher vieles Weggelassen es wird aber ab und an neue Videos geben

[@ecomitgmbh3483]

Danke für das Vid. Ich würde gern etwas zu .env und Asset Processing sehen...da man es definitiv immer und auch recht schnell braucht

[@jackdanielz1116]

Cooles Video zu Vite! Ich habe aber eine kleine Frage. Im dist-Ordner wird ja die index.html generiert. Im Video (Minute 13:55) werden die Verlinkungen zur index.css und der index.js angezeigt. Der Pfad beginnt dort mit "/assets...". Er müsste aber nur mit "assets..." beginnen. Wie bekomme ich den Schrägstrich weg, damit die Verlinkungen korrekt sind?

[@UnleashedDesign]

Öhm warum willst du den Link anpassen das sollte eigentlich so funktionieren und keinen Unterschied machen

[@thisisgiuliano]

@@UnleashedDesign hab das selbe problem

[@Thailanderleben]

Super Video! Eine Anmerkung, für mein Empfinden redest du ein bisschen zu schnell! Zum Glück gibt es Pause und zurück spulen ;-)

[@UnleashedDesign]

Danke für das Feedback, Geschwindigkeit ist leider immer etwas "Relativ" also für manche ist das zu Langsam für andere zu schnell daher mach ich hier immer ein Mittelweg

[@trommelheinz]

Hey ich finde deine Videos super informativ und auch die Qualität die du da bietest ist 1A*! Mich würde interessieren welche Themes und Addons du in VS Code nutzt, weil am liebsten hätte ich mein VS Code genau so wie deins! Sieht einfach mega nice aus! Falls du darüber schon ein Video gemacht hast, tuts mir leid, hab dich erst gestern gefunden und bin sehr begeistert!

[@UnleashedDesign]

Moin zu Plug-Ins kommt in Zukunft ein Video, das Theme ist mein eigenes ist in allen Beschreibungen verlinkt :)

[@trommelheinz]

@@UnleashedDesign Ah okay alles klar! Vielen Dank :)

[@EmilAndLina]

Moin, kann ich eine .js aus dem dist Ordner eigentlich auch wieder in die Original Datei wiederherstellen? Frage für einen Freund, der eventuell seinen src Ordner gelöscht hat :-(

[@UnleashedDesign]

Nein, leider nicht ohne weiteres. Nutzt du Git?

[@EmilAndLina]

@@UnleashedDesign hab da ein account, nutze es aber nicht wirklich. Wird sich jetzt aber wohl ändern 🙃

[@JasonIllg]

Habe das mal getestet jetzt und habe festgestellt das es bei mir nicht funktioniert, so dachte ich nach dem ich genauer gesucht habe habe ich festgestellt das wenn ich build mache bei den Pfaden immer / macht und dann kann der Browser natürlich keinen css finden habe ihr da vielleicht eine Lösung oder Idee?

[@UnleashedDesign]

Hmm hast du den Root Path korrekt angelegt?

[@stevoes6683]

Hallo, finde vite echt super! Ich komme im Moment mit meinem Theming nicht weiter. Habe es im Discord schon gefragt. Aber wie kann ich die CSS Datei tauschen, wenn sie doch alle in eine Datei gepackt werden. Kann mir da jemand sagen wonach ich suche muss. Danke

[@UnleashedDesign]

Warum möchtest du CSS Dateien tauschen? Das kommt idR eigentlich nicht vor :)

[@Venistro]

Hab Vite auch noch auf der Liste der Dinge, mit denen ich mich als nächstes auseinandersetzen muss. Kam nur noch nicht dazu, weil es auf den ersten Blick so wirkte, als würde es größere Auswirkungen auf das Ergebnis haben, so dass man beispielsweise Vue CLI nicht einfach ersetzen kann.

[@JasonIllg]

Also ein Tutorial zu Vite würde mich auch sehr interessieren scheint ja ne coole Sache zu sein

[@UnleashedDesign]

Wird definitiv mehr kommen :) macht spaß damit zu arbeiten

[@casualtom9066]

Ist es möglich Angular Projekte mit Vite zu nutzen??

[@UnleashedDesign]

Nein, Angular ist anders als React & Vue ein "Full" Framework mit einem eigenen Build Tool (Ive) dieses nutzt aber ab v14 auch die gleiche Technologie wie Vite ist also ähnlich schnell

[@alexkuenzel]

Gibts einen Vorteil von SCSS gegenüber SASS? Oder hat es einen besonderen Grund, dass du SCSS nutzt? Finde es eigentlich echt super keine Klammern usw. mehr schreiben zu müssen.

[@UnleashedDesign]

Jain, es sieht mehr wie CSS aus und viele Nutzen es. Persönlich bin ich mehr ein fan von SASS :)

[@Robin-ym1jy]

Ein Thumbnail in 🇺🇦 Farben, so gefällt mir das. :)

[@siriusmarz512]

Erstmal ein super Video, wie immer:-) Hätte eine Frage: Nimmst du auch Aufträge von Privatleuten an? Thema wäre respnsives Design (UI Kit) Kommt sowas für dich in Frage?

[@UnleashedDesign]

Kommt drauf an, leider muss man sagen das die meisten Privat "Projekte" häufig Budget Probleme haben. Also habe kaum Projekt mit Privaten Auftraggebern, einfach weil man beim Preis nicht zusammen kommt. Projekte können ja schnell Größen erreichen wo man von Fünfstelligen Beträgen spricht.

[@siriusmarz512]

@@UnleashedDesigndanke für die Antwort. Gut zu wissen. Es ist so coden kann ich/möchte ich weiter ausbauen. Aber das ich ein responsive Design durchziehe fällt mir schwer 😂 Würde bei discord bei dir melden, wenn nichts dagegen spricht.

[@haraldvrbka9349]

Warum wird .scss und nicht .sass verwendet?

[@UnleashedDesign]

hallo, weil sich in einer Umfrage die Zuschauer dieses Channels für .scss statt .sass entschieden haben :)

[@SwOOp_de]

Machst du mal n Video zu qwik?

[@UnleashedDesign]

Steht auf jeden Fall auf der Liste, wann genau kann ich jedoch noch nicht sagen :)

[@lotharschmid656]

Was war die Motivation Vite zu nehmen und nicht Parcel?

[@UnleashedDesign]

Schlicht wie weit verbreitet es in der Community ist :)

[@peterjobst9655]

Bitte ein vite Video!

[@UnleashedDesign]

Wird kommen, was würdest du da denn gerne sehen ?

[@peterjobst9655]

@@UnleashedDesign testinv

[@Linuxdirk]

1:55 😅

[@dominic.vogl.design]

Vielen Dank für das Tutorial. Bin momentan bisschen genervt von meinem langsamem Gulp / Sass / JS Workflow und da kommt das jetzt genau richtig. Super wäre vielleicht noch in Vite Tutorial das tiefer geht, z.B. sourcemaps, iconfonts oder die Verwendung mit Mamp oder Valet, um z.B. auch lokale Wordpress Umgebungen damit abzudecken. Werde das auf jeden Fall fleissig testen, da es nen echt tollen Eindruck macht.

[@DI_Dev]

Gibt es eine Möglichkeit, dass man in der vite.conf es so einstellen kann, dass nicht mehr die index.html sondern eine index.php als Einstiegspunkt angesteuert werden kann?