Alpine.js Crash Course

Sdílet
Vložit
  • čas přidán 13. 09. 2024

Komentáře • 186

  • @WebMentorDev
    @WebMentorDev Před 2 lety +141

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

    • @TheVertical92
      @TheVertical92 Před 2 lety +6

      Now lets get to the SHORT Stack 😁

    • @brhh
      @brhh Před 2 lety +3

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

    • @gradientO
      @gradientO Před 2 lety +4

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

    • @WebMentorDev
      @WebMentorDev Před 2 lety +2

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

    • @EntyFu
      @EntyFu Před 2 lety +11

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

  • @JEsterCW
    @JEsterCW Před 2 lety +20

    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 Před 9 měsíci

      I would replace Node and express with Bun and Elysia.

    • @deidyomega
      @deidyomega Před 7 měsíci

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

    • @maximumcockage6503
      @maximumcockage6503 Před 7 měsíci +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.

  • @dot6086
    @dot6086 Před 2 lety +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  Před 2 lety +9

      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.

  • @travholt
    @travholt Před 2 lety +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 Před 2 lety +3

    Plain, Simple and Elegant this is awesome

  • @nausiac
    @nausiac Před 2 lety +1

    I follow you since 6 years back from Mexico

  • @janzenfaidiban
    @janzenfaidiban Před 2 lety +3

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

  • @noroi_289
    @noroi_289 Před 2 lety +11

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

    • @hervenacitas8265
      @hervenacitas8265 Před 2 lety

      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 Před 2 lety +1

      Yeah great tool for small/ medium projects

  • @seanszukhent3313
    @seanszukhent3313 Před 2 lety +2

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

  • @repotranstech9614
    @repotranstech9614 Před 2 lety +4

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

  • @kaypakaipa8559
    @kaypakaipa8559 Před 2 lety +1

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

  • @yasinnabi
    @yasinnabi Před 2 lety

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

  • @safeerahmedfarooqi9193
    @safeerahmedfarooqi9193 Před rokem +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 Před rokem +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

  • @dmitryzhuravlev-nevsky1388
    @dmitryzhuravlev-nevsky1388 Před 2 měsíci

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

  • @th3ja
    @th3ja Před 11 měsíci

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

  • @chelseabing
    @chelseabing Před 2 lety

    Absolutely enjoyed this video!
    This channel just never misses!

  • @anmarm.9487
    @anmarm.9487 Před 2 lety +4

    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 😅

  • @SaidMetiche-qy9hb
    @SaidMetiche-qy9hb Před měsícem

    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 !

  • @bobhafemeister9652
    @bobhafemeister9652 Před 2 lety +1

    Thanks Brad, loving alpine and htmx

  • @Fullflexno
    @Fullflexno Před 2 lety +2

    Will check this out! Cheers from Norway👍

  • @MotionInMotion1975
    @MotionInMotion1975 Před 4 měsíci

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

  • @frankwang0721
    @frankwang0721 Před 4 měsíci

    Thank you so much for the tutorial!

  • @JoeEnos
    @JoeEnos Před rokem

    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.

  • @kaderlakhdar5735
    @kaderlakhdar5735 Před 2 lety +1

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

  • @aogunnaike
    @aogunnaike Před 2 lety +4

    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!

  • @this.channel
    @this.channel Před 2 lety +1

    Cool, Alpine is my go to JS library.

  • @viner1000
    @viner1000 Před 8 měsíci

    Fantastic. Thanks as always, Brad!

  • @nanonkay5669
    @nanonkay5669 Před rokem +2

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

  • @maxwellkjr
    @maxwellkjr Před 2 lety +4

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

  • @aramkeusgerian9618
    @aramkeusgerian9618 Před 2 lety

    My prayers were answered :D Thanks a lot Brad!

  • @mohamedmidou3494
    @mohamedmidou3494 Před měsícem

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

  • @evolution3658
    @evolution3658 Před 3 měsíci

    Thanks, very useful!!!

  • @Sium0239
    @Sium0239 Před 5 měsíci

    Absolutely amazing! Thank you a lot!

  • @ITEducationPakistan
    @ITEducationPakistan Před rokem +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.

  • @sky333suraj
    @sky333suraj Před rokem +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.

  • @paulthomas1052
    @paulthomas1052 Před rokem

    Thanks. Another great introduction.

  • @ajaysdigitalart3320
    @ajaysdigitalart3320 Před 2 lety

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

  • @nudecode
    @nudecode Před 2 lety +1

    As always great tutorial. Thanks Brad. Now for a full TALL Stack tutorial😜

  • @dot6086
    @dot6086 Před 2 lety +2

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

  • @filiporkowski
    @filiporkowski Před 2 lety +3

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

  • @ogarjosephodama1878
    @ogarjosephodama1878 Před 2 lety +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

  • @B3DFire
    @B3DFire Před 11 měsíci

    Nice tutorial, watched the whole thing

  • @the6fallenangels596
    @the6fallenangels596 Před 2 lety

    u taught me both tailwind and alpine👍

  • @potantirittisak8494
    @potantirittisak8494 Před 4 měsíci

    THANK YOU!

  • @birsingh5388
    @birsingh5388 Před 2 lety +5

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

  • @Rider0fBuffalo
    @Rider0fBuffalo Před rokem

    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.

  • @bobbyiliev_
    @bobbyiliev_ Před 2 lety

    Thank you Brad! You ar an absolute legend!

  • @hyggedev2124
    @hyggedev2124 Před rokem

    Tailwind + AlpineJS = fun 😊

  • @hithere5607
    @hithere5607 Před rokem

    Thank you, amazing tutorial!

  • @BlueTeK
    @BlueTeK Před rokem

    Thank you for this nice crash course 🙏

  • @DanFarfan
    @DanFarfan Před 2 lety

    Excellent. Thanks for sharing.

  • @AbuAbdirohman
    @AbuAbdirohman Před 2 lety

    Easy, Simple & Useful 👍

  • @TioJobs
    @TioJobs Před 2 lety

    Nice video man! Thank you so much! 😍🚀

  • @LouisDuran
    @LouisDuran Před 2 lety +1

    23:46 Money sign. LOL

  • @ahoivik
    @ahoivik Před 2 lety +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?

  • @AhmadReshadZazai
    @AhmadReshadZazai Před 4 měsíci

    Thank you.

  • @badcatdesign
    @badcatdesign Před 2 lety +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.

  • @Geomaverick124
    @Geomaverick124 Před 2 lety +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

  • @EduardKhiaev
    @EduardKhiaev Před 11 měsíci +1

    can you also create an HTMX Crash course?

  • @xrkalix
    @xrkalix Před 2 lety

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

  • @dev_jeongdaeri
    @dev_jeongdaeri Před 2 lety

    Yeah super cool! 🔥👨‍💻

  • @PlotTwists
    @PlotTwists Před 2 lety +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 Před 2 lety

      what is TALL stack

    • @notkylo1881
      @notkylo1881 Před 2 lety

      @@mrsan385 Tailwind, Alpine, Livewire, Laravel

  • @laughingvampire7555
    @laughingvampire7555 Před rokem

    this is just like htmx, reinventing angularjs

  • @edmotler2115
    @edmotler2115 Před 2 lety

    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.

  • @rajeevprasad5836
    @rajeevprasad5836 Před 2 lety

    happy to see this video

  • @mustaphaab7127
    @mustaphaab7127 Před 2 lety

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

  • @ferneyvilla7203
    @ferneyvilla7203 Před 2 lety

    Super!! Thank you very helpful

  • @nanobrains4982
    @nanobrains4982 Před 2 lety

    Thanks Mr.Brad!

  • @briankgarland
    @briankgarland Před 2 lety

    Excellent!

  • @giftjonas2447
    @giftjonas2447 Před 2 lety

    Thanks Brad 😃🙏🏽

  • @alexdin1565
    @alexdin1565 Před 7 měsíci

    Please can you make a video about Fabric js?

  • @virenkhokhar6305
    @virenkhokhar6305 Před 7 měsíci

    Money sign 🙌

  • @dankogulsoy
    @dankogulsoy Před rokem

    Awesome. Thanks

  • @mduvens
    @mduvens Před 2 lety

    Great stuff

  • @jlambert12013
    @jlambert12013 Před 2 lety +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 Před 2 lety

      Hey Jim you can check this out
      czcams.com/video/YGxzxUFlHZI/video.html

  • @mhmmdabrs6655
    @mhmmdabrs6655 Před rokem

    awesome content 👌

  • @Ndjdjsjrjjfjr
    @Ndjdjsjrjjfjr Před 2 měsíci

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

  • @bashiruibrahim8443
    @bashiruibrahim8443 Před 2 lety

    Thank you Sir

  • @shwackthenoobsac
    @shwackthenoobsac Před 2 lety

    This is pretty cool.

  • @ramigamal6637
    @ramigamal6637 Před 2 lety

    A grate video for a grate tool :)

  • @followthesalaf5657
    @followthesalaf5657 Před 2 lety +1

    Need a tutorial on FARM stack

  • @heysander
    @heysander Před měsícem

    Whats wrong with using Jquery compared to another JS framework?

  • @fcnealvillangca7943
    @fcnealvillangca7943 Před 7 měsíci

    I don't have a big application to maintain I think alphine is enough with htmx

  • @kudamasangomai
    @kudamasangomai Před 2 lety +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 Před 2 lety +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 Před 2 lety +1

      @@giftjonas2447 will have to work more i guess

    • @thecodingchef9292
      @thecodingchef9292 Před 2 lety

      @@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

  • @maulvieyazidaprilian5679
    @maulvieyazidaprilian5679 Před 2 lety +1

    Tailwind is great, but I don't think it's suitable for fullstack / backend developers
    because in the end, everyone will create components from it, which Bootstrap has already done
    and to beat Tailwind, Bootstrap just need to add more utilities

  • @abdo.magdy.
    @abdo.magdy. Před 2 lety +1

    this is for sure has XSS vulnerability it renders the HTML with the alpine attribute if we are on a blog website someone can create HTML with alpine attrs and redirect users etc u have to filter a lot to prevent this

    • @samuelwaller4924
      @samuelwaller4924 Před 9 měsíci

      it has an escape mechanism to prevent this, and ideally you shouldnt be rendering user provided html anyways.

  • @farhadbagheri5687
    @farhadbagheri5687 Před 2 lety

    really that was helpful

  • @alannetherclift678
    @alannetherclift678 Před rokem

    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.

  • @salimedia33
    @salimedia33 Před 2 lety

    Thank you ;)

  • @vincej151
    @vincej151 Před 2 lety +1

    This is interesting. However, I still have not understood what problem it solves over JQuery.

    • @101kawsar
      @101kawsar Před 2 lety +1

      jQuery is imperative. Alpine js is declarative. Alpine js can auto update the dom, when some value changes. Jquery can't do it.

  • @umeyama4
    @umeyama4 Před rokem

    Alpine + Livewire + Laravel tutorial please

  • @AstuceFx
    @AstuceFx Před rokem +1

    can we use it within react project?

  • @511cvxzlugynskii3
    @511cvxzlugynskii3 Před 4 měsíci

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

  • @黃先生-d7o
    @黃先生-d7o Před měsícem

    Good~

  • @displayblock
    @displayblock Před 2 lety

    Can you do a crash course on Petite-vue?

  • @henrikrinne3639
    @henrikrinne3639 Před 2 lety

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

  • @ПетроКобзар

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

  • @muhmmadirshad7376
    @muhmmadirshad7376 Před 2 lety

    Think you sir

  • @figuredout6383
    @figuredout6383 Před 2 lety +2

    am I the only Nigerian following Brad videos???

    • @aogunnaike
      @aogunnaike Před 2 lety +1

      Lol you can't be

    • @JM-st1le
      @JM-st1le Před 2 lety +1

      Nah bro

    • @favouritecomics2177
      @favouritecomics2177 Před 2 lety +1

      I am following Brad from Abuja 😂

    • @figuredout6383
      @figuredout6383 Před 2 lety +1

      @@favouritecomics2177 I’ve got a project idea, if you’re interested let me know, so we have a talk about it.