Chapters
32 Chapters
|
4:16:27
|
Login to bookmark this video
-
Course Code
Subscribe to download the code!
Subscribe to download the code!
-
This Video
Subscribe to download the video!
Subscribe to download the video!
-
Subtitles
Subscribe to download the subtitles!
Subscribe to download the subtitles!
-
Course Script
Subscribe to download the script!
Subscribe to download the script!
Scroll down to the script below, click on any sentence (including terminal blocks) to jump to that spot in the video!
Subscribe to jump to this part in the video!
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.
What PHP libraries does this tutorial use?
// composer.json
{
"require": {
"php": ">=8.2",
"ext-ctype": "*",
"ext-iconv": "*",
"babdev/pagerfanta-bundle": "4.x-dev", // 4.x-dev
"doctrine/doctrine-bundle": "^2.10", // 2.12.x-dev
"doctrine/doctrine-migrations-bundle": "^3.2", // 3.4.x-dev
"doctrine/orm": "^2.16", // 2.18.x-dev
"knplabs/knp-time-bundle": "dev-main", // dev-main
"pagerfanta/doctrine-orm-adapter": "4.x-dev", // 4.x-dev
"pagerfanta/twig": "4.x-dev", // 4.x-dev
"symfony/asset": "6.4.*", // 6.4.x-dev
"symfony/asset-mapper": "6.4.*", // 6.4.x-dev
"symfony/console": "6.4.x-dev", // 6.4.x-dev
"symfony/dotenv": "6.4.x-dev", // 6.4.x-dev
"symfony/flex": "^2", // 2.x-dev
"symfony/form": "6.4.x-dev", // 6.4.x-dev
"symfony/framework-bundle": "6.4.x-dev", // 6.4.x-dev
"symfony/monolog-bundle": "^3.0", // dev-master
"symfony/runtime": "6.4.x-dev", // 6.4.x-dev
"symfony/security-csrf": "6.4.x-dev", // 6.4.x-dev
"symfony/stimulus-bundle": "2.x-dev", // 2.x-dev
"symfony/twig-bundle": "6.4.x-dev", // 6.4.x-dev
"symfony/ux-autocomplete": "2.x-dev", // 2.x-dev
"symfony/ux-live-component": "2.x-dev", // 2.x-dev
"symfony/ux-turbo": "2.x-dev", // 2.x-dev
"symfony/ux-twig-component": "2.x-dev", // 2.x-dev
"symfony/validator": "6.4.x-dev", // 6.4.x-dev
"symfony/web-link": "6.4.*", // 6.4.x-dev
"symfony/yaml": "6.4.x-dev", // 6.4.x-dev
"symfonycasts/dynamic-forms": "dev-main", // dev-main
"symfonycasts/tailwind-bundle": "dev-main", // dev-main
"tales-from-a-dev/flowbite-bundle": "dev-main", // dev-main
"twig/extra-bundle": "^2.12|^3.0", // 3.x-dev
"twig/twig": "^2.12|^3.0" // 3.x-dev
},
"require-dev": {
"doctrine/doctrine-fixtures-bundle": "^3.4", // 3.6.x-dev
"phpunit/phpunit": "^9.5", // 9.6.x-dev
"symfony/browser-kit": "6.4.*", // 6.4.x-dev
"symfony/css-selector": "6.4.*", // 6.4.x-dev
"symfony/debug-bundle": "6.4.x-dev", // 6.4.x-dev
"symfony/maker-bundle": "^1.51", // dev-main
"symfony/panther": "^2.1", // v2.1.1
"symfony/phpunit-bridge": "7.1.x-dev", // 7.1.x-dev
"symfony/stopwatch": "6.4.x-dev", // 6.4.x-dev
"symfony/web-profiler-bundle": "6.4.x-dev", // 6.4.x-dev
"zenstruck/browser": "1.x-dev", // 1.x-dev
"zenstruck/foundry": "^1.36" // 1.x-dev
}
}What JavaScript libraries does this tutorial use?
// importmap.php
return [
'app' => [
'path' => './assets/app.js',
'entrypoint' => true,
],
'js-confetti' => [
'version' => '0.11.0',
],
'@hotwired/stimulus' => [
'version' => '3.2.2',
],
'@symfony/stimulus-bundle' => [
'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
],
'tom-select' => [
'version' => '2.3.1',
],
'tom-select/dist/css/tom-select.default.css' => [
'version' => '2.3.1',
'type' => 'css',
],
'@hotwired/turbo' => [
'version' => '7.3.0',
],
'stimulus-popover' => [
'version' => '6.2.0',
],
'debounce' => [
'version' => '1.2.1',
],
'turbo-view-transitions' => [
'version' => '0.3.0',
],
'stimulus-use' => [
'version' => '0.52.1',
],
'flowbite' => [
'version' => '2.2.1',
],
'@popperjs/core' => [
'version' => '2.11.8',
],
'flowbite-datepicker' => [
'version' => '1.2.6',
],
];
11 Comments
I think you have an example of getting "bad luck" with those "competing classes" when you change the "New voyage" button to use the Twig component. Seems like
font-mediumwins overfont-boldhere.But maybe I'm wrong since CSS is not really my favorite... watch closely from 9:20
Oh and could you please, from time to time, remind us of running the
tailwind:buildcommand please? :)Hey elkuku,
You spotted that minor difference, well done! Well, I'm not sure what happened exactly, but yeah, it seems like font-medium won in that specific case. Anyway, better to avoid competing classes :)
About the
tailwind:build- that's a good idea to remember about that indeed. Well, the--watchoption should help to do not forget it during the session, but the next day you may still forget :) Btw! you may want to check the new Symfony CLI feature and configure a special worker for this, see: https://symfony.com/bundles/TailwindBundle/current/index.html#symfony-cliI hope that will solve you problem :)
Cheers!
The CLI worker works perfect, thanks a bunch :)
Would be nice to add a note about it too ;)
Hey @elkuku
Great idea, I added the note in https://github.com/SymfonyCasts/30-days-last/commit/eb90e71259d048388842017cd054263c959fc16e
Thank you!
Cheers!
I'm using the prettier plugin for twig https://github.com/zackad/prettier-plugin-twig and when it encounters the Button.html.twig file it throws "Expected an element to start".
I'm trying to find a place in the twig documentation where
<{{ tag }}>usage is documented so that I can know if it just happens to work, or if it is an official part of twig which would mean that I could file an issue with the plugin to have their parser support it.I added the prettier-plugin-twig because I wanted to use prettier-plugin-tailwindcss which is supposed to put the tailwind classes in logical order.
Hey Jason,
Not sure how to help in your case :) Probably easier to avoid
<{{ tag }}>syntax, hardcode the tag name in 2 templates<button>and<a>and just use 2 different components, either Button or A. To avoid duplications, you can use a third template that will include in both if needed.I hope that helps! Otherwise probably should be fixed upstream somehow.
Cheers!
Using
symfony console lint:twig templatesreports no issues, so I think I'm going to start an issue with the prettier-plugin-twig to allow<{{ tag }}>Changing the new voyage button from the original <a> tag to a <button> tag at 9:16 messed up the alignment of the button.
"justify-between" is no longer pushing it to the right edge, but it's sitting close to the middle, and I can't figure out why.
Even setting the "tag" attribute to make it into an <a> tag again, it's still not aligned properly. I change it back to not using the button twig component and it aligns at the edge again. For some reason, simply making the element a twig component causes flex to stop working.
I had to remove flex from the parent div and make the <h1> and <button> inline-block and use float-end on the button to get it back to normal.
Hey @Nick-F
That's unexpected. Could you try re-building your CSS styles? FYI, TailwindCSS generates the corresponding CSS classes by reading your code, so if a CSS class does not apply at some point it could be that you need to rebuild your CSS or hint Tailwind that you need a specific class. You can read more here https://tailwindcss.com/docs/content-configuration
Cheers!
You are missing a
rin yourcomposercommand. ;)Hey Julien,
Good catch, thank you! I fixed it in https://github.com/SymfonyCasts/30-days-last/commit/b08b7e2ede5b94865179f2f86e6ff0a31ace782c
Cheers!
"Houston: no signs of life"
Start the conversation!