Chapters

46 Chapters | 4:55:39 |

01

Symfony UX

5:34
02

Setting up Webpack Encore

5:11
03

encore watch & Code Splitting

4:06
04

Stimulus Controllers

5:53
05

Magic with Events, Properties & HTML from Ajax

4:43
06

Targets: Finding Elements

6:41
07

Actions: Listening to Events

4:43
08

Bootstrapping a "Color Selector" Form Element

9:06
09

Actions & currentTarget

6:41
10

Element.dataset

4:52
11

State in your Controller

6:26
12

The Values API

7:03
13

On Value Change Callback

8:07
14

Search Suggestions

5:49
15

Ajax with fetch(), Polyfills & async/await

5:24
16

HTML-Returning Ajax Endpoint

6:06
17

Stimulus Behaviors: stimulus-use

6:37
18

Form Submit Confirmation Controller

6:22
19

Making a Configurable, Reusable Controller

7:47
20

Multi Controller Communication

9:09
21

Listening to An Event From Another Controller

6:25
22

Ajax-Powered HTML Updates & a CSS Transition

5:13
23

Symfony UX & Chart.js

7:48
24

stimulus-bridge: How UX Packages Work

6:55
25

Extending a UX Controller

8:43
26

React (or Vue) ❤️ Stimulus

6:48
27

Pass Server Data Directly to React Props

7:02
28

Webpack Bundle Analyzer

4:58
29

Async/Dynamic import()

7:26
30

Magic: Lazy-Loading UX Controllers

5:13
31

Making your Custom Controllers Lazy

3:58
32

Product CRUD

7:42
33

Opening a Modal

8:14
34

Loading a Form into the Modal

8:46
35

Ajax-Submitting an Entire Form

6:25
36

Correcting the Form Action & Preventing Default

4:30
37

Ajax Form Response Status Codes

9:36
38

Ajax Element Reloading Controller

6:23
39

Dispatching an Event from modal-form

4:25
40

Reusing the "Reload Content" Controller

5:12
41

CSS Transitions with useTransition

7:05
42

CSS Transition Classes

5:03
43

Free 3rd Party Controllers!

4:31
44

Using the autocomplete-controller

9:45
45

Autocomplete with Transitions

6:08
46

useTransition in a Neat, Reusable Module

5:00

> JavaScript Frameworks & Tools > Symfony UX: Stimulus

Buy Access to Course

08.

Bootstrapping a "Color Selector" Form Element

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Challenge

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

8 Comments

Sort By

Login or Register to join the conversation

dbL-BzH 5 years ago edited

Hi Ryan, really very interesting this stimulus course but there is just one thing that I got a bit stuck on, I didn't understand how you were using the rgb format like this:
style="background-color: rgb({{ color.red }}, {{ color.green }}, {{ color.blue }})"
Then, I understood that you had created getRed(), getGreen() and getBlue() in your color entity.
For me, the easiest thing in my head was to do:
style="background-color: #{{color.hexColor}}"
It's just a detail but it stuck me for a moment because I like to understand everything I do and I couldn't find the way you made the connection.
In any case thank you for everything ! With you, I am progressing enormously by following your courses always of an excellent quality!

1 |

Ryan-L dbL-BzH 2 years ago

For anyone who was still confused (like I was):

Twig's color.red calls the color Entity's getRed() method, which returns a 0-255 value for the loaded product color. color.blue calls getBlue(), color.green calls getGreen().

There are three product colors, and they ... are red, green and blue. We're iterating over those in the template.
The first product color is red, so color.red returns 255, color.green returns 0, and color.blue returns 0. In twig, this ends up as rgb(255,0,0). It then repeats this for the other two product colors, to output rgb(255,0,0) for green, and rgb(0,255,0) for blue.

It's confusing because we're calling getRed(), getGreen() and getBlue() methods on colors, when the colors themselves are also red, green and blue. It might have been more clear if the product colors for this example were other psuedo-primary colors, like cyan, yellow and magenta.

1 |

weaverryan SFCASTS dbL-BzH 5 years ago edited

Hey dbL-BzH!

Thanks for the feedback and nice to chat with you! I should have been more clear about where these color.red things were coming from :). I didn't use hexColor... for some... very minor reason that I can't remember (there must have been one tiny spot in the tutorial where using rgb was just "smoother" - there is no problem with using hexColor).

> With you, I am progressing enormously by following your courses always of an excellent quality!

Woohoo! Keep up the good work :).

Cheers!

|

Steven J. 5 years ago

progressive enhancement strikes back!

1 |

weaverryan SFCASTS Steven J. 5 years ago

😀😀😀

|

Vladyslav-Chernyshov 2 years ago edited

This comment probably will save you hours and your nerves.

Okay, if you did the same what author did and you still have no lines in console (controller not connected) run symfony server:stop than symfony server:start -d --port=8080, now check. Yup, I have no idea why and it's super weird but now run symfony serve -d where default port is 8000 and check that this doesn't work again! 😠 I believe it might be OS specific. I'm using Fedora 38. I'm curious does someone can reproduce this bug?

God, why this kind of errors always happens to me all this years? Please gimme something more debuggable 🙏

|

Vladyslav-Chernyshov Vladyslav-Chernyshov 2 years ago

Okay, it was some Firefox's plugin conflict I believe, works good in private window without any of them.

|

Victor SFCASTS Vladyslav-Chernyshov 2 years ago

Hey Vladyslav,

I'm glad it works for you now! Yeah, it also might be a cache problem, usually browser's hard reload that forces the cache to reset may help, or it's always a good idea to try in a private window first :)

Cheers!

1 |

This tutorial works perfectly with Stimulus 3!

Symfony 5.2 Stimulus 2

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "1.11.99.1", // 1.11.99.1
        "doctrine/annotations": "^1.0", // 1.11.1
        "doctrine/doctrine-bundle": "^2.2", // 2.2.3
        "doctrine/doctrine-migrations-bundle": "^3.0", // 3.0.2
        "doctrine/orm": "^2.8", // 2.8.1
        "phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
        "sensio/framework-extra-bundle": "^5.6", // v5.6.1
        "symfony/asset": "5.2.*", // v5.2.3
        "symfony/console": "5.2.*", // v5.2.3
        "symfony/dotenv": "5.2.*", // v5.2.3
        "symfony/flex": "^1.3.1", // v1.21.6
        "symfony/form": "5.2.*", // v5.2.3
        "symfony/framework-bundle": "5.2.*", // v5.2.3
        "symfony/property-access": "5.2.*", // v5.2.3
        "symfony/property-info": "5.2.*", // v5.2.3
        "symfony/proxy-manager-bridge": "5.2.*", // v5.2.3
        "symfony/security-bundle": "5.2.*", // v5.2.3
        "symfony/serializer": "5.2.*", // v5.2.3
        "symfony/twig-bundle": "5.2.*", // v5.2.3
        "symfony/ux-chartjs": "^1.1", // v1.2.0
        "symfony/validator": "5.2.*", // v5.2.3
        "symfony/webpack-encore-bundle": "^1.9", // v1.11.1
        "symfony/yaml": "5.2.*", // v5.2.3
        "twig/extra-bundle": "^2.12|^3.0", // v3.2.1
        "twig/intl-extra": "^3.2", // v3.2.1
        "twig/twig": "^2.12|^3.0" // v3.2.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
        "symfony/debug-bundle": "^5.2", // v5.2.3
        "symfony/maker-bundle": "^1.27", // v1.30.0
        "symfony/monolog-bundle": "^3.0", // v3.6.0
        "symfony/stopwatch": "^5.2", // v5.2.3
        "symfony/var-dumper": "^5.2", // v5.2.3
        "symfony/web-profiler-bundle": "^5.2" // v5.2.3
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@babel/preset-react": "^7.0.0", // 7.12.13
        "@popperjs/core": "^2.9.1", // 2.9.1
        "@symfony/stimulus-bridge": "^2.0.0", // 2.1.0
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets", // 1.1.0
        "@symfony/webpack-encore": "^1.0.0", // 1.0.4
        "bootstrap": "^5.0.0-beta2", // 5.0.0-beta2
        "core-js": "^3.0.0", // 3.8.3
        "jquery": "^3.6.0", // 3.6.0
        "react": "^17.0.1", // 17.0.1
        "react-dom": "^17.0.1", // 17.0.1
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "stimulus": "^2.0.0", // 2.0.0
        "stimulus-autocomplete": "^2.0.1-phylor-6095f2a9", // 2.0.1-phylor-6095f2a9
        "stimulus-use": "^0.24.0-1", // 0.24.0-1
        "sweetalert2": "^10.13.0", // 10.14.0
        "webpack-bundle-analyzer": "^4.4.0", // 4.4.0
        "webpack-notifier": "^1.6.0" // 1.13.0
    }
}

Previous Challenge

Next Chapter