Learned lot of Tailwind and some Laravel tricks. Thanks

Loved that series. Pretty bummed out by the fact that Simon was laid off, as he was the main reason why I picked up Lifetime Access during last year’s Black Friday sale.

But, I understand the nature of things. It must be rough to lay great employees off for budgetary reasons, and to run an educational business in the current context.

After watching this lessons and comparing it to countless similar tutorials on other platforms, I'm once again convinced that Jeffrey is undoubtedly the best presenter. Not only for his explanations, but also for his ability to blend the old and the new and truly demonstrate how the past and future complement each other. I'm amazed.

Thank you, thank you so much.

This is where I feel every penny of my subscription is worth it. 😄

Very enjoyable course! Binged it in a couple of hours, compared/consolidated my knowledge, and learned a few new tricks!

Love the way you structure your lessons. Speedrun some bits, explain each step of the way. Really good stuff!

Oh and I am 100% guilty of doing the "it didn't work, try again" and adding layers of slop to my vibes 🤣

Taking good notes!

Outstanding lesson! Making AI do good UIs is super tricky, and I love this approach of starting up with a design styleguide. I've had success with a similar approach.

Essentially, it's providing context once again, but in terms of design decisions and opinions! 🤙

@bgass GSAP is awesome indeed, well worth investing time learning it properly.

@uzartom You're welcome, glad to hear you enjoyed it!

Hi, I really enjoyed this course, thank you!

If you're using the latest version of the Starter Kit with Wayfinder, I like this way of handling forms. We avoid using useForm, specify the PUT method, and the images are handled automatically. Just import Form from Inertia and PuppyController from actions.

<Form
    {...PuppyController.update.form.put(puppy)}
    options={{
        preserveScroll: true,
    }}
    onSuccess={() => setOpen(false)}
    className="space-y-6"
>
    {({ processing, errors }) => (
        <>
            <Label htmlFor="name">Name</Label>
            <Input
                id="name"
                name="name"
                className="mt-1 block w-full"
                defaultValue={puppy.name}
                required
                autoComplete="name"
                placeholder="Full name"
            />
            {errors.name && (
                <p className="mt-1 text-xs text-red-500">
                    {errors.name}
                </p>
            )}

            <Label htmlFor="trait">Personality trait</Label>
            <Input
                id="trait"
                name="trait"
                className="mt-1 block w-full"
                defaultValue={puppy.trait}
                required
                placeholder="Personality trait"
            />

            {errors.trait && (
                <p className="mt-1 text-xs text-red-500">
                    {errors.trait}
                </p>
            )}

            <Label htmlFor="image">Change image</Label>
            <Input
                id="image"
                name="image"
                type="file"
                className="mt-1 block w-full"
                placeholder="Profile picture"
            />

            {errors.image && (
                <p className="mt-1 text-xs text-red-500">
                    {errors.image}
                </p>
            )}

            <DialogFooter className="gap-2">
                <DialogClose asChild>
                    <Button variant="secondary">Cancel</Button>
                </DialogClose>

                <Button
                    className="relative disabled:opacity-100"
                    disabled={processing}
                    type="submit"
                >
                    {processing && (
                        <div className="absolute inset-0 grid place-items-center">
                            <LoaderCircle className="size-5 animate-spin stroke-primary-foreground" />
                        </div>
                    )}
                    <span
                        className={clsx(
                            processing && 'invisible',
                        )}
                    >
                        Update
                    </span>
                </Button>
            </DialogFooter>
        </>
    )}
</Form>

@Gelert that's pretty handy for sure!

@sean2025 You're making lots of great points! I hope you enjoy your time on Laracasts. Lifetime license is an incredible value-for-money deal for sure. I was a Laracasts customer long time before I became an instructor :)

This is really great information! I love some subtle animations for effect and hinting, but really dislike overly animated interfaces and pages.

I have even had to abandon sites in the past due to janky animations making it difficult to browse the content. A pity, as you can tell that the developer put a lot of time into those pages.

I'll add that most people probably don't know how to turn off motion in their system, unless they suffer from acute effects and have been advised on accessibility. They probably won't do it globally for one site or app, so the subtle approach recommended here is a good way to go.

If all these Laracasts tutorials are as good as the first ones I have jumped into, I'm going to be spending a lot of time with my new Laracasts lifetime purchase :)

@krekas you can hit the right arrow a couple of times to skip ahead!

oh god, the intro is too long and it's going to be in every lesson. the same was for the React, The Laravel Way course, the intro is too long

Thanks Simon !

@fernandoAlco Glad you enjoyed it!

@carferdas You're very welcome!

I’ve really enjoyed this course. Thank you so much for the good energy you bring and for the care you’ve put into it

Great course! I learned a lot, thank you

@josepdecid yeah, all of the TanStack ecosystem is really, really nice.

I can't recommend TanStack Query enough!

On top of all the benefits that @simonswiss commented regarding the easy handling of loading and errors, invalidation, caching... it's also super handy to use if we're using TS.

It has a very clever typing for the data-loading-error triad where, as an example it types data as undefined if loading is true or there are some errors. So if you try to access data before checking the loading state or presence of errors your IDE will raise some errors, catching many issues early in the development process!

ScrollSmoother will break the overflow-hidden settings. Be careful of that.

@oliverquynh Love to hear this! Glad this was helpful. ❤️

Thank you! Can't wait for the next section :)

Hi Simon. When you moved the "overflow-y-auto" from the header to the container of Logo and Navigation "div", you have to move also the pl-4 to keep the small square marker visible in the navigator. Then apply also the pl-4 to the UI to align everything.

for the triple dots hover color, using group-hover and all that seems too complex. I'd go with bg-current and changing the color on the wrapper (hover:text-red) would simply cascade down to the dots.

@dsdevelopers maybe I'm wrong but isn't the <div> inside the <li> tag?

Having a <div> as top level child inside an <ol> would be bad, but here the structure is <ol><li><div> which is perfectly fine, no?

@Tray2 well, this is still a list of posts (or articles, indeed). And it's "ordered" because it comes in chronological order. You could still use an <article> tag inside each <li> items.

Honestly I don't think it matters this much. As a general rule, whenever I have a list of things, I use a list tag (ul or ol). If the order of the items matter, I use ol.

@uzartom I do the exact opposite conversion everytime I see space-y-* utilities! Makes it much easier to alter the spacing for one of the children elements.

@Ispilledteaonthecarpet those are fair points!

@milliedarc you're welcome!

nice music at the end

Very well explained, thank you :)

This is how login screen looks on full 1980 resolution.

To properly align right panel to bit on left side.

i have given lg:mr-28 to main right panel div.

@fanpero87 If you do this, you won't be able to co some hover state effects to the SVGs. Inlining SVGs is visually annoying, but always more powerful than using them as an image tag.

@andreich1980 I practiced for 10,000 hours to get to that level! 😅

What an impressive skill of saying EEEEEE so fast :D

Wonderful thing to do. Full process of development explained by the best!

🔥🔥🔥 Can't wait to embark!!

Awesome guys!

Favorite authors in one workshop. Great beginning :)

The Intro is super-cool.

literally feels like i am watching trailer of upcoming thriller movie 😎

I am excited to follow along the series