Alpine.js Crash Course

Поділитися
Вставка
  • Опубліковано 22 січ 2025

КОМЕНТАРІ • 178

  • @WebMentorDev
    @WebMentorDev 2 роки тому +150

    Finally. I can complete my TALL Stack (Tailwindcss, AlpineJs, Laravel, Livewire). Thank you so much. Appreciate it as always :)

    • @TheVertical92
      @TheVertical92 2 роки тому +6

      Now lets get to the SHORT Stack 😁

    • @brhh
      @brhh 2 роки тому +3

      @@TheVertical92
      Svelte
      H..
      Oracle
      R..
      Typescript
      yeah we will need to work on that lol

    • @gradientO
      @gradientO 2 роки тому +4

      @@brhh Hydrogen and React. Just mix 'em all

    • @WebMentorDev
      @WebMentorDev 2 роки тому +2

      @@TheVertical92 hopefully SHORT Stack will give me 7 digit salary 😂

    • @EntyFu
      @EntyFu 2 роки тому +11

      Have you tried bootstrap instead of tailwind? always wanted to try BALL stack

  • @dot6086
    @dot6086 2 роки тому +17

    I'm turning 20 today. I just want to say thank you so much brad for all your videos. I've been watching these videos since I was 18 and even though I had some prior knowledge into programming, your channel really helped me shape up into the developer I am today.

    • @TraversyMedia
      @TraversyMedia  2 роки тому +11

      Happy Birthday my friend. Thanks for sticking around. I really appreciate it and wish you the best. I am double your age and I would have loved to get started earlier.

  • @nausiac
    @nausiac 2 роки тому +2

    I follow you since 6 years back from Mexico

  • @JEsterCW
    @JEsterCW 2 роки тому +23

    Alpine is like jquery vue version, but more lightweight, but as powerful as vue.
    *My the most powerful stack combination is:*
    *- Alpine*
    *- HTMX*
    *- Lit*
    *- Tailwind*
    *- Express*
    I swear this is like the most hardest in the good way stack for building pretty powerful web apps without the whole boilerplate in react etc. I highly recommending this mix ;D

    • @MarkVolkmann
      @MarkVolkmann Рік тому

      I would replace Node and express with Bun and Elysia.

    • @deidyomega
      @deidyomega 11 місяців тому +1

      Replacing lit + express with Python + Django.
      I'm glad I can finally effectively write Python full stack.

    • @maximumcockage6503
      @maximumcockage6503 11 місяців тому +1

      On the off chance you read this comment, I'd suggest swapping Express and Node out with Hono and Bun.js. Hono and Bun are way faster than express. Elyisa is even faster than Hono and on par with Rust's Axum, but Hono's syntax is very similar to Express's so it's super easy to pick up.

  • @travholt
    @travholt 2 роки тому +9

    This is very helpful! My brain likes to learn _that_ something can be done. I might not remember exactly _how_ later, but then I can look it up.

  • @shaineelnayak3465
    @shaineelnayak3465 2 роки тому +3

    Plain, Simple and Elegant this is awesome

  • @MotionInMotion1975
    @MotionInMotion1975 9 місяців тому +1

    This is incredible, you just fucked up my mind after working with Angular for 5 years....

  • @seanszukhent3313
    @seanszukhent3313 2 роки тому +2

    Brad is at it again! Was happy to see this after your Laravel course. Great work!

  • @kaypakaipa8559
    @kaypakaipa8559 2 роки тому +1

    The land of Javascript never stops giving!
    Tht said, I like this one, its like VueJs

  • @JusticePeaceLoveHarmony
    @JusticePeaceLoveHarmony Рік тому +3

    I was using livewire for the last 2 years but I was always afraid to use alpine in livewire.but after watching this tutorial I have better alpine understanding and now I am not afraid of using alpine with livewire components.great work brad.
    Keep it up.

  • @CHRISCANHAMC4NH4M
    @CHRISCANHAMC4NH4M 2 роки тому +1

    This is a refreshing tutorial and I was kept engage which is sometimes a problem of mine but this great. Very helpful for getting my head around Alpine for a TALL Stack. :D

  • @janzenfaidiban
    @janzenfaidiban 2 роки тому +3

    Your tutorial is always amazing. Easy to learn for everyone. Thank you Brad.
    Can't wait for another tutorial

  • @th3ja
    @th3ja Рік тому

    Brad thanks for everything! First time trying out Alpine and I must say It's amazing!

  • @dynamics9000
    @dynamics9000 2 роки тому

    this is one of the best videos I have just watched today... thanks for sharing ...

  • @chelseabing
    @chelseabing 2 роки тому

    Absolutely enjoyed this video!
    This channel just never misses!

  • @dmitryzhuravlev-nevsky1388
    @dmitryzhuravlev-nevsky1388 6 місяців тому

    Thank you very much, you have a talent for explaining things. You helped me a lot with my pet project

  • @viner1000
    @viner1000 Рік тому

    Fantastic. Thanks as always, Brad!

  • @bobhafemeister9652
    @bobhafemeister9652 2 роки тому +1

    Thanks Brad, loving alpine and htmx

  • @anmarm.9487
    @anmarm.9487 2 роки тому +5

    Finally..... I been waiting for this... When we will see advance AlpineJS? Things Like Building Custom reusable components, cross components communication, building something bit complex like Store Check out that communicate with server using Fetch API. Just suggestions 😅

  • @JoeEnos
    @JoeEnos 2 роки тому

    Great video. I love this pace, getting to see a ton of material in a short time, so I can be better prepared for a deeper dive.

  • @Fullflexno
    @Fullflexno 2 роки тому +2

    Will check this out! Cheers from Norway👍

  • @maxwellkjr
    @maxwellkjr 2 роки тому +4

    As someone who is currently learning Laravel, this tutorial will definitely come in handy!

  • @SaidMetiche-qy9hb
    @SaidMetiche-qy9hb 5 місяців тому

    Alpine.JS looks like a great addition to my CHAD stack (Go, BadgerDB, Echo, Templ, HTMX, Tailwind), love the fact that it's only 6KB !

  • @aramkeusgerian9618
    @aramkeusgerian9618 2 роки тому

    My prayers were answered :D Thanks a lot Brad!

  • @this.channel
    @this.channel 2 роки тому +1

    Cool, Alpine is my go to JS library.

  • @kaderlakhdar5735
    @kaderlakhdar5735 2 роки тому +1

    Thank you brad , another video to add to my Brad playlist ❤️

  • @SalsaPaulInBaja
    @SalsaPaulInBaja Рік тому

    Nice tutorial, watched the whole thing

  • @mohamedmidou3494
    @mohamedmidou3494 5 місяців тому +1

    I have learned Tailwindcss and AlpineJs in the same video :p :p that's nice man thanks

  • @paulthomas1052
    @paulthomas1052 2 роки тому

    Thanks. Another great introduction.

  • @the6fallenangels596
    @the6fallenangels596 2 роки тому

    u taught me both tailwind and alpine👍

  • @noroi_289
    @noroi_289 2 роки тому +11

    It's feel very similar to Vue and I love it.

    • @hervenacitas8265
      @hervenacitas8265 2 роки тому

      Lately I’ve been thinking of buying cryptocurrency for retirement, I’ve set asides $350k to invest but along the line,I usually get cold feet, maybe because I have no idea what I’m doing, please I could really use some guidelines.

    • @mduvens
      @mduvens 2 роки тому +1

      Yeah great tool for small/ medium projects

  • @Sium0239
    @Sium0239 9 місяців тому

    Absolutely amazing! Thank you a lot!

  • @aogunnaike
    @aogunnaike 2 роки тому +3

    Thanks Brad 😀 i knew alpine js was gonna come after the Laravel tutorial, I wanna suggest a landlord tenancy tutorial for Laravel on ur next course for Udemy. Thanks for all you do. cheers!

  • @repotranstech
    @repotranstech 2 роки тому +4

    How about htmx.I have used it and it's pretty powerful.

  • @aibookclub-g2r
    @aibookclub-g2r 2 роки тому

    Very well explained ... Worth watching.. Good job👍👍👍

  • @bobbyiliev_
    @bobbyiliev_ 2 роки тому

    Thank you Brad! You ar an absolute legend!

  • @frankwang0721
    @frankwang0721 8 місяців тому

    Thank you so much for the tutorial!

  • @QuickInExplain
    @QuickInExplain 2 роки тому

    Easy, Simple & Useful 👍

  • @TioJobs
    @TioJobs 2 роки тому

    Nice video man! Thank you so much! 😍🚀

  • @hyggedev2124
    @hyggedev2124 2 роки тому

    Tailwind + AlpineJS = fun 😊

  • @Rider0fBuffalo
    @Rider0fBuffalo Рік тому

    I have used knockout for years and was interested in alpine... It appears to be pretty much the same thing on the surface but instead of ko- use x-. Obviously there are some differences that alpine has that improve on ko so I am looking forward to using it on a static product pages. Good intro.

  • @DanFarfan
    @DanFarfan 2 роки тому

    Excellent. Thanks for sharing.

  • @BlueTeK
    @BlueTeK 2 роки тому

    Thank you for this nice crash course 🙏

  • @hithere5607
    @hithere5607 Рік тому

    Thank you, amazing tutorial!

  • @ITEducationPakistan
    @ITEducationPakistan 2 роки тому +1

    Please make Vite Crash course for production build configuration that handles library-based syntax like JSX, Vue, and TypeScript. By using Rollup under the hood, Vite ensures performance optimization techniques like tree-shaking, lazy-loading, and common chunk splitting are implemented for your production build.

  • @nanonkay5669
    @nanonkay5669 Рік тому +2

    After seeing this, you have to do a tutorial on Alpine js, HTMX and templating

  • @ahoivik
    @ahoivik 2 роки тому +2

    Something I've been struggling with is identifying a best practice dealing with where and how to store data from external apis using fetch. At the Element x-data? as an external script function call?

  • @evolution3658
    @evolution3658 7 місяців тому

    Thanks, very useful!!!

  • @rajeevprasad5836
    @rajeevprasad5836 2 роки тому

    happy to see this video

  • @ogarjosephodama1878
    @ogarjosephodama1878 2 роки тому +1

    Sir Brad millions of thanks for what you have done for us here.
    Please, can you do a complete project on real estate ór property listing with agent registering, blóg section all the good stuff either a paid cost or fréé here . Thanks
    Using PHP and MySQL or Laravel or you decide

  • @mhmmdabrs6655
    @mhmmdabrs6655 2 роки тому

    awesome content 👌

  • @AstuceFx
    @AstuceFx Рік тому +1

    can we use it within react project?

  • @dot6086
    @dot6086 2 роки тому +2

    Brad three seconds into the video: *Introduces another framework
    Me: Another one?
    Brad: I can actually hear you sighing from here.

  • @nanobrains4982
    @nanobrains4982 2 роки тому

    Thanks Mr.Brad!

  • @briankgarland
    @briankgarland 2 роки тому

    Excellent!

  • @giftjonas2447
    @giftjonas2447 2 роки тому

    Thanks Brad 😃🙏🏽

  • @mduvens
    @mduvens 2 роки тому

    Great stuff

  • @potantirittisak8494
    @potantirittisak8494 8 місяців тому

    THANK YOU!

  • @Geomaverick124
    @Geomaverick124 2 роки тому +1

    This button feature would be good to swap between two different types of websites...like if you have a site on english and a site in french or spanish

  • @ferneyvilla7203
    @ferneyvilla7203 2 роки тому

    Super!! Thank you very helpful

  • @dev_jeongdaeri
    @dev_jeongdaeri 2 роки тому

    Yeah super cool! 🔥👨‍💻

  • @FunQuizzy88
    @FunQuizzy88 2 місяці тому

    Thanks a lottt this' very much helpful

  • @LouisDuran
    @LouisDuran 2 роки тому +2

    23:46 Money sign. LOL

  • @xrkalix
    @xrkalix 2 роки тому

    Thanks a lot. I was trying to find something good online about Alpine but I was unable.

  • @filiporkowski
    @filiporkowski 2 роки тому +3

    I will never use it but I will watch the entire video anyway.

    • @Dojo2000
      @Dojo2000 2 місяці тому

      Same but its so fun to watch this 😂is

  • @АлександрИнженер-д4б

    Thanks!

  • @shwackthenoobsac
    @shwackthenoobsac 2 роки тому

    This is pretty cool.

  • @sky333suraj
    @sky333suraj Рік тому +1

    Better to use Alpine as compared React or Vue as they make projects heavier to pack as standalone apps when using with vite of npm add.

  • @jlambert12013
    @jlambert12013 2 роки тому +1

    Is there any videos on using HTML, CSS and Vanillla JS, but that discusses maybe a Folder Structure or Standard to go by?

    • @ayushsrivastava8698
      @ayushsrivastava8698 2 роки тому

      Hey Jim you can check this out
      ua-cam.com/video/YGxzxUFlHZI/v-deo.html

  • @ramigamal6637
    @ramigamal6637 2 роки тому

    A grate video for a grate tool :)

  • @birsingh5388
    @birsingh5388 2 роки тому +5

    Please create your own JS framework as well, the name could be Traverse.js 😎😃😆

  • @PlotTwists
    @PlotTwists 2 роки тому +1

    I made an app using TALL stack where the A is Alpine back in 2021 ... it was good mostly, just some minor compatibility issue to fix

    • @mrsan385
      @mrsan385 2 роки тому

      what is TALL stack

    • @notkylo1881
      @notkylo1881 2 роки тому

      @@mrsan385 Tailwind, Alpine, Livewire, Laravel

  • @badcatdesign
    @badcatdesign 2 роки тому +2

    Tailwind is super cool, but I wish it wasn't being used in videos like this when it's not the focus of the vid. It feels like one of the "classless" or "no-class" frameworks would be perfect to use here and allow for really clean HTML.

  • @AhmadReshadZazai
    @AhmadReshadZazai 9 місяців тому

    Thank you.

  • @henrikrinne3639
    @henrikrinne3639 2 роки тому

    So it offers the same thing as vuejs but you get to learn a new syntax?

  • @mustaphaab7127
    @mustaphaab7127 2 роки тому

    Hi
    Thanks a lot for that tutorial, i wished that you cover consuming api using alpine js
    Thanks again

  • @heysander
    @heysander 6 місяців тому

    Whats wrong with using Jquery compared to another JS framework?

  • @bashiruibrahim8443
    @bashiruibrahim8443 2 роки тому

    Thank you Sir

  • @dimitmoto1716
    @dimitmoto1716 2 роки тому

    Many thanks!!!

  • @sinakaramian2479
    @sinakaramian2479 3 місяці тому

    hi dear, your tutorial is so awesome and short for quick learning alpine.js and you cover a large part of the contents of alpine.js
    I have success for you, dear.

  • @alannetherclift678
    @alannetherclift678 2 роки тому

    Any chance you can show how to use Alpine JS with a strict Content Security Policy? I've been told it's possible but a bit involved.

  • @ultimus579
    @ultimus579 2 роки тому

    what theme are you using?

  • @m.younusmorty4713
    @m.younusmorty4713 2 роки тому

    Hi, Where I can get $el other properties like parent or child?

  • @farhadbagheri5687
    @farhadbagheri5687 2 роки тому

    really that was helpful

  • @salimedia33
    @salimedia33 2 роки тому

    Thank you ;)

  • @edmotler2115
    @edmotler2115 2 роки тому

    As I write this it's only Thursday. So plenty of time then for at least another 3 JS frameworks to be released before the end of the week.

  • @ahmedhabeeb2499
    @ahmedhabeeb2499 2 роки тому

    Brad what is the next course udmey ? when ?

  • @virenkhokhar6305
    @virenkhokhar6305 11 місяців тому

    Money sign 🙌

  • @tacituskilgore2258
    @tacituskilgore2258 2 роки тому

    Which vscode theme does Brad use?

  • @kudamasangomai
    @kudamasangomai 2 роки тому +1

    Hey Brad, how do you learn something new and go from 0 to competency? And how long does it take you..do you mind sharing the process or tips

    • @giftjonas2447
      @giftjonas2447 2 роки тому +1

      The more you work on it the more you gain experience you should work on it make mistakes fix them, than you gain experience

    • @kudamasangomai
      @kudamasangomai 2 роки тому +1

      @@giftjonas2447 will have to work more i guess

    • @thecodingchef9292
      @thecodingchef9292 2 роки тому

      @@giftjonas2447 that's true I think his question comes from the fact that programming is vast and changing daily, new things are being released daily, do how does one get to learn things at such high speed when something new to learn comes up,,,,, I think I would also love to Know

  • @511cvxzlugynskii3
    @511cvxzlugynskii3 8 місяців тому

    i still did not understand, if we use htmx why do we need alpine js for

  • @alexdin1565
    @alexdin1565 11 місяців тому

    Please can you make a video about Fabric js?

  • @displayblock
    @displayblock 2 роки тому

    Can you do a crash course on Petite-vue?

  • @makadi86
    @makadi86 2 місяці тому

    why x-html did not work for me?

  • @EduardKhiaev
    @EduardKhiaev Рік тому +1

    can you also create an HTMX Crash course?

  • @muhmmadirshad7376
    @muhmmadirshad7376 2 роки тому

    Think you sir

  • @viallymboma9874
    @viallymboma9874 2 роки тому

    really interesting...

  • @ПетроКобзар
    @ПетроКобзар 2 роки тому

    Hello, please, make video about Solid (mini framework like React).

  • @Ndjdjsjrjjfjr
    @Ndjdjsjrjjfjr 7 місяців тому

    i learned Angular , Vue , React , Svelte , Htmx and now AlpineJs just to find out which is best for me 😂

  • @followthesalaf5657
    @followthesalaf5657 2 роки тому +1

    Need a tutorial on FARM stack