Podcast audio transcript

Transcript

[0:00] Music.

[0:08] Hey, now welcome back to the drupal Easy podcast. My name is Michael Anello,

and yes, we've been gone a while, but we're back and moving forward rather than focusing on getting a new episode out on a consistent schedule. We're gonna go with seasons.

So we're calling this season 14 as this is our 14th year of doing the podcast.

And in this season we will be releasing six,

episodes starting with today's episode with brian Perry,

Following that we've got Allison mccauley, Leslie, glen ted bowman, Rod martin and Ryan Price and this season and all seasons moving forward.

Our plan is to have a theme for each season And the theme for,

season 14 is how to, so the idea is that each episode of season 14 will answer the question how to do something drupal related.

[1:07] So in today's episode we'll be talking with brian Perry from Pantheon about how to get started with web components.

Now, before we get to the interview, let me tell you a little bit about drupal easy's newest long form drupal training course, professional module development.

We have been working on this course for about a year and a half.

We beta tested it with 17 students late in 2022.

The course is 90 hours of curriculum and we're going to present that over 15 weeks.

Starting on january 31st two half days a week.

The material, you know, the course includes material on developer tools like PHP CSS PHP stan x debug V s code PHP Storm.

[1:57] The I. D. Extensions and plug ins and recommended configuration as well as we'll be using both Landau and D DEV. So there's something for everybody from the developer tools standpoint.

Once we get into the drupal module development aspects, we'll be creating a custom plug in, will dive deep into services, will implement the Q A P I.

The batch aPI will use entity query and there is lots and lots of object oriented PHP coding.

The course is really designed to take you from a casual drupal module developer to a professional drupal module developer.

We'll also have a unit on cashing and we'll be writing a bunch of PHP unit test, unit colonel and functional test and we'll even throw in a custom drugs command as well.

So if you're interested, class begins january 31st and we're actually offering,

a light version as well granted it skip some of the topics I just mentioned but it's a little bit shorter at 60 hours and that starts on february 14th if you'd like more information, just go to drupal easy dot com,

slash p M D.

For professional module development.

[3:12] Brian welcome back to the drupal Easy podcast. You are now a two time guest I believe does that gel with your recollection as well.

It does. I'm actually surprised that I am back because I happened to notice yesterday that it looked like I may have killed the podcast by appearing last time but glad that I'm back in the podcast is back.

Yeah. Yeah. Yeah. So um I should explain a little bit, I don't know if this is gonna be the first one that's released because I'm recording six episodes over the next four or five days,

and then we're going to release all six weekly or bi weekly over, you know, starting in the very near future.

Um But yeah, so we had been on hiatus for a while um mainly because I got really busy, which is the problem I want, right, so I've always intended to getting back to the podcast,

um and what I kind of decided a few months ago was the way I'm going to get back to it is,

I'm not going to look at it as okay.

Now I've got to start recording podcasts and releasing every two weeks for an indefinite period of time.

[4:20] Moving forward, we're going to release in seasons, kind of like a TV model.

So as I just mentioned, I'm recording six,

episodes in the next few days, we'll get those all edited, we'll start releasing them and then they'll probably be a little break again before we, you know, have the bandwidth to produce another set.

[4:41] Sounds great. That the netflix model, the netflix model. Yeah, hopefully without the, you know, the year in between type of thing. Um,

So since this is the 14th year of the podcast, which is crazy to me, I'm calling this season 14.

[5:04] Anyway, we're not here to talk about me as easy as that is for me to do? We're here to talk about web components.

Yes. And you, you know a thing or two?

I do, yeah, they're one of one of my favorite things in the the current front end landscape.

So this season of podcast is really geared towards how to, So we really want to hammer home in the next 30 minutes or so how to get started with web components.

So we're not gonna go super deep into like history and stuff like that, but I really want this to be kind of practical so that people can listen and then just open up a browser and go somewhere and start doing stuff.

Okay, that's kind of the goal of this uh, this season. So explain it to me like I'm five, what's a web component?

[5:56] Yeah, the, you know, especially from the perspective of like your five, the way that I would think about it is um,

you know, you're familiar with, you know, standard html elements, things like,

paragraphs and links and divides what web components are is a set of browse respects that allow you to create your own essentially extend html to have your own custom elements.

So we can have like a brian tag and a mic tag technically,

the the custom elements need to have a dash in them so that they don't conflict with the main name space for html elements that would have to be like, you know, our full name or something.

See we're learning something already. Fantastic. Very practical. So how long have these been around?

Is this something new or like. Yeah, they have actually and the, especially the spec for uh web components have been around for a long time.

Um I actually did Look this up yesterday, the initial working draft of the spec was 2013 which is the same year that react was open sourced.

So wow both the idea of web components and also the kind of modern front end component approach has been here for a very long time.

[7:17] Um, but what has taken time is getting to the point where they've had why browser adoption and are starting to kind of gain momentum in in usage, which I feel is definitely happening now.

So I would say on the timeline for that, like the very initial, one of the initial like Web component libraries was polymer, which was the 1.0 version that was released in 2015.

That has now evolved into lit, which is a google project and it is commonly used and then it was around 2018 I believe when the support for the main web components, A P I.

S made their way into Firefox, they were already in in chrome.

That was probably the tipping point I think for like pretty wide browser adoption, especially if you don't have to be concerned about ie 11.

That was kind of the big sticking point where you have to use a lot of polish pills for this stuff.

Do you like the way I I mentioned that we weren't gonna talk about history. Then I immediately asked you a history question.

[8:19] Yeah, it's it's fun though. And the other interesting thing I put on the web components, timeline is aside from the fact that you know, I feel like they're getting more attention. I'm seeing more and more of them in in the day to day.

There have also been some kind of cool like footnotes about modern uses of web components.

One fun one that, that people might have had some interaction with is word all.

Um if you were part of the word craze uh during the pandemic or you know, still play whirl.

The original version of that was completely built using web components which is kind of cool wow.

And then there also is a version of Photoshop for the web that was released I believe this year.

And that heavily uses web components as well. Adobe is making a pretty large investment in web components. So those are some things you might not have thought of as as things maybe that you've even used that rely on web components.

So is there something that web components can do that you wouldn't be able to do without a web component?

Or is it is it just streamlining? Like, like what? Like why?

Like what what problem am I going to run up against in the future where I need a web component?

[9:37] Yeah it's it's basically that that general concept of being able to extend html and create your own html element.

And frameworks like react and Vue and felt and all those have that concept,

um but they all do it slightly differently um and kind of have their their own version of how they bring that to the browser.

Like react for example you know it uses its own virtual dom that is different from the regular dom and then,

also too you can create you know let's say that you created your your brian component like we talked about before.

[10:19] Technically react you could actually just call it brian this is the Wild west that we're talking about that I think web components potentially helps with but.

[10:32] But it could be even if you could make it brian Perry too.

So if you have your brian perry component and react you still need to um in addition to loading all the necessary javascript you have to get,

react to mount in a div on the page and that brian component isn't a thing until you mount your react application and then that renders out um,

the brian perry component which is actually a bunch of javascript that creates the necessary elements on the page.

I didn't listen to anything you just said for the last 30 seconds.

I just hear overhead overhead overhead overhead yes overhead. That made a lot of things possible but overhead Sure.

And then the difference for web components is that,

you can create your your brian Perry element, you load a javascript file for that and as long as that javascript file is loaded, you can use your brian perry element in regular. Html.

[11:30] It just becomes like a new new thing that you can do in html and that same sort of concept applies within the javascript frameworks as well, you can use that brian perry element in html, you can use it and react, you can use it in view.

So you do you have this thing that doesn't reply doesn't depend on the specifics of a framework in the way that the things you build in react and Vue do,

and it's really something that you can write once and use everywhere, which has kind of always been the dream at least from my perspective.

So this definitely sounds like it's more geared towards front end developers. Is that accurate?

Yeah, I would say that is true. Okay, um and then what do I like, what do I need to know in order to like get started?

What knowledge should I have? Yeah, there are definitely kind of layers to that.

Um but you know these components are javascript so you're going to need to have some level of comfort with javascript.

[12:29] If you are if you have used, you know, kind of the modern es six and es six and beyond,

javascript, you know, kind of pass the j query,

days, you'll probably be comfortable and exactly, you know, how deep into the javascript you go can vary with a small amount of javascript, you can, you know, create a pretty simple web component,

depending on the level of interactivity you want to include if you want to use supporting libraries, you know that that's the thing, you have to get deeper into the javascript end of things.

And then the other thing that I had there is that beyond just building them, you could consume them. So maybe you want to use Web components that somebody else built.

That's a different story and that you might not have to really use much javascript at all. You can just use that custom element in your markup.

So the one thing I'll add based on what I've seen is that.

[13:25] Sure you need to know html and you need to know some javascript um and maybe this kind of what I'm about to say falls within your definition.

But I just want to say explicitly is object oriented, javascript like you need to know the basics of like a class and properties and methods and things like that, yep.

Yeah, that's a that's a good call out um Yeah, the base kind of web component spec yeah, it is a an html element class.

Um so you do need to know a little bit about object oriented programming.

It's not it doesn't go that deep into it. It's not super complicated but yeah, you'll either need to understand that or fake it.

[14:11] So how do I get started if I, you know, I'm listening to podcasts, I'm like man, that brian, he is super smart and I want to be just like him.

How do I get started? First off, I'm flattered listener but secondly,

yeah, this kind of some of my personal opinions kind of fold into this and and you know what worked for me and getting web components to click.

But what I would actually suggest is starting as for, you know, your first experiment with this actually starting as bare bones as possible.

So literally just kind of opening up your editor of choice,

and creating a html document and a javascript file where you would do this and you will need to run some sort of local web server to get those things to talk to each other.

What I'd suggest for that is just if you have node installed, you can just use uh, n p x serve, which will just it's the simple node web server that will just load that html file for you.

So let me ask a question. I mean, why do you why do you need the web server? Is this is all client side correct?

Can you just open up the html file directly in your browser?

Yeah, this starts to get into the weeds a little bit but.

[15:33] If you just take those files and open them up in your browser it won't allow you to load the javascript,

it won't the html file can't load a javascript file from your desktop due to course cross origin resource issues.

[15:51] And running that on a web server. Get you around that problem.

Got it, got it, got it. Got it.

Alright. So someone opens up, you know, their their their favorite code editor, they get an html a job script file, they've got, you know, local web server running.

So like where do they start? Is there like a really good tutorial that you recommend or like how like what's the first step?

Well I guess would be the second because we've already opened up their code editor. So what's the second step?

[16:17] So what I personally recommend is starting using the the library lit as as a way to build web components.

So what lit does is it provides some really nice helpers for things that require some boilerplate if you were to use, you know, create a completely vanilla javascript web component.

Like the biggest thing that I think is really helpful is that it handles uh template ng for you.

So you can just use an html template and essentially just write markup,

where if you didn't use a library like lit, you would actually have to use javascript to like create your template element and add that to the dom and you know, add things inside of that template.

So using something like lit, I think makes the process a lot easier and a lot more similar to what I'm used to, which is, you know, using some sort of template uh to to write. The thing, is that something that you would recommend just to learn?

Or is that something that you see people using, like in production?

[17:23] Definitely something that people use in production,

there are certainly differing opinions on this, but for me I kind of see lit as kind of 1 to 1 with web components there there are people who prefer to just use the browser api is alone.

Um but I think lit improves the experience so much.

Uh it's pretty widely adopted and also doesn't go too far away from the base browser spec that it is makes sense to use.

So that sounds like an official brian perry recommendation, yep, that is put the stamp on it.

Official brian perry recommendation right there.

So yeah and then the reason that I mentioned that first is lit, the lit documentation has really nice interactive tutorials and like a playground section.

So the interactive tutorial walks you through,

some of the basics and it's all done in browser and you actually, you know there's instructions on the left hand side and a code editor on the right hand side so you walk you through the code you need to add and what you need to change.

So that's a really easy way to get started start experimenting.

[18:36] Yeah, as a matter of fact I spent some time with it this morning. Oh awesome.

And it's exactly what I hoped it would be because it started at the very basics. It demonstrated what the heck these things are.

It demonstrated, you know the java script? It was it was very useful I think for someone, someone like me who is, you know, I I dabble in the front end but I'm definitely not like a front end developer.

Um But I can I can I can poke around and do stuff.

Yeah. Um So yeah, I think that was that was a good call.

[19:10] Yeah, it's definitely awesome. And uh the the reason why I also suggest you know trying it,

just starting in your, your favorite text editor as well is because I think it is really useful to understand like what is possible to do,

just in the browser today without a bundler um,

you know, it's a little bit different from what you might be familiar with in the past, where you might need to like compile your javascript, you might end up using a bundler when you get deeper into web components and build things for production.

But you, you really can actually just, you know, start with those two files, you can import, lit the library from C D M and just go, which is really cool.

So what are some, I mean you mentioned some examples of web components but those were kind of like you know,

higher level obviously word all and photo shop, you know, so where would like what are some simple examples like you know, where like how would I like, how would I know oh that's something that a web component would,

would be good for, you know, as a someone who's new to web components?

Yeah, there are a few different,

categories that that jump to mind for that one is like something that you, you wish was actually an html um and a like a common example of that is like an accordion or some sort of expand collapse.

[20:37] You know, there really isn't, there's no html accordion element but that could be something if you use that repeatedly on projects um that is a great case for a web component.

So, you know, you could essentially just extend html with that expandable collapsible thing, you can make your own that kind of fits what you use on projects.

There are also without question accordion web components out there on NPM that you could use instead if that's a good starting point.

And then beyond that, you know, the other kind of category are things that is, you know.

[21:14] Really just a reusable component that you find yourself using in your project.

So like you could say a card or you know a particular variation on like a hero component might be something that is worth building into a web component.

So rather than having you know the markup,

and global CSS you could just have a, you know,

mike's hero component that you could reuse,

and I think where it really makes sense to do that and consider making a web component is if you have the need to use that hero in different contexts so if you wanted to use it in drupal and you,

also wanted to use it in your react project or you had a project,

for example that using multiple javascript frameworks that could really make sense.

And then also if you do want to bundle in opinionated like styling and interactivity with that component,

um rather than just doing that with whatever template ng engine you're using,

um and having to make sure that all the javascript and styles are imported and work together,

um if you create a web component for that you can include all the necessary styles, all the necessary javascript interactivity in with that component um and it just ships with it essentially.

So it sounds like encapsulation is a kind of a big reason.

[22:40] Yes, yeah, from my opinion, I would agree with that, especially if you are used if you're going to use that thing in multiple places.

Yes. Right, so let's get back to drupal here because that is in the name of the podcast, it was probably a good idea.

[22:57] Um so I'm feeling that there is a lot of overlap in.

[23:04] Like a custom twig template and some javascript and some CSS what that can do.

[23:11] And what a web component can do.

[23:14] Yes. And so going back to what you just said, it seems like the big driver for using a web component over template file CSS javascript in your custom theme.

Is that encapsulation? So number one, is that correct?

And number two if so, are there any other reasons?

Yeah, I would agree that the encapsulation is a big part of it.

[23:41] Are there any other reasons? The portability,

is definitely another one in that um you know a lot of the component based design approaches for for drupal try to take this from the perspective of, you know, how do we just build the front end component then?

Drupal can use it fits pretty nicely into that um and then also I think some of it is that common um you know, case of,

do you have developers from developers working on this project that are potentially less familiar with Twigs, Twig and the ins and outs of Twig,

and are more comfortable either writing javascript or just using these new html elements that you create, just like regular markup and not necessarily,

worrying about, you know, Twig imports and includes and extends and all the specifics of that.

Alright, cool. So it would seem to me that to use a web component in drupal you basically just have to add it to a template file somewhere and you know, and.

[24:50] I guess you would add the javascript as its own library, like one library per per web component type of thing?

Yes, yeah, kind of wherever you think that the line to break things up make sense.

So if you find that, you know, the components are typically only used in certain context then yeah, having them in their own library probably makes sense if it really is a set of components that are used,

throughout the site, maybe it's a single library,

um but yeah, that's more of a kind of drupal aggregation thing, but.

[25:24] Yeah, make sure the library is loaded and then you,

can just start using that custom element in your markup in your Twig templates and it it really does just become conceptually another html element.

So that means you can keep doing all the things that you're doing in Twig but now with your, you know, brian perry element, so,

you can use drupal variables, you can use things like triples, attributes, functions and things like that.

Yeah, one thing we should mention, which you know, you know,

we should probably say out loud, another thing we should say out loud is that these custom,

html elements can also have, you know, whatever attributes you want, so it doesn't have to be just you know, open angle bracket, brian dash perry, close angle bracket, it can be, you know,

brian dash perry followed by attribute equals whatever attribute equals attribute to equals whatever and then the values of those attributes can be passed in via twig, just like any other html element.

Exactly, yep. Yeah the brian perry element could have a mood attribute and you can set if brian perry is happy, sad, silly.

Yeah um one other thing that is probably worth mentioning as well, um this probably does start to get us a little bit closer to the weeds but um.

[26:49] One thing to note about custom elements and their current implementation is that they require javascript, so what that means is that your.

[27:02] Custom element will not be, you know, fully interactive, fully progressively enhanced until the javascript loads on the page.

So that is something to be aware of and that they're not going to be server rendered in the way that your twig is.

Um so you need to make sure that, you know, it's not going to introduce things like layout shift on your page um and things like that.

Yes, good point there. Uh tell me about the G W D C project, first of all, what does it stand for and what is it and,

at what point in someone's web component, drupal journey, should they start looking at it?

[27:47] Yeah, so G G W C is the generic drupal Web components project, it's another one of my perfectly named,

projects um and the yeah, the idea is that it intends to be a community maintained library of web components that work nicely with drupal.

[28:07] So um ideally things that you could use,

in a twig template in drupal or use in one of your javascript frameworks in in a decoupled project,

um that just works easily with data that comes from drupal Jason A P I and yeah, where that would kind of fit in in your web component journey um,

you know, if you're looking for examples that you can just experiment with consuming and using that, that could be a place to start, like what happens if I install this thing and use the G W C card element on a page.

Um probably not where I would suggest starting for like just initial learnings about web components like those lit tutorials would would still probably where I would recommend.

Um But if you do get to the point where you're interested in web components um see a use for them in drupal Um I would definitely love for people to experiment more in that library.

It's definitely intended to be a home for many different use cases of components that could fit well with drupal,

So the more the more opinions we have on that, the more people we have contributing and building things I think the more useful this project would be.

[29:25] So I was trying to come up with an analogy for this module,

like where this module is to web components as some other module is to some other technology and I couldn't really think of one the closest I came, which I don't think it's very close is the examples module which is basically a showcase,

of different coding techniques in drupal but I don't think that's completely analogous to what G d w C is.

Yeah, so I think you're probably gonna agree that it's not completely analogous, but I'm wondering is there some other analogy, so we can better kind of describe what this, you know, what role this module has?

Yeah, I would say that kind of my my dream for what the end goal or like the evolution of this project would be.

[30:20] Would be like the bootstrap paragraphs module, are you familiar with that? Absolutely.

So, yeah, for anybody who isn't what bootstrap paragraphs is,

is a set of paragraph,

components that essentially make uh common things from the bootstrap library available for you to add to your drupal projects, so, you know, at a slider, at a grid etcetera.

So, yeah, this would be, you know, the goal is to have,

a set of web components that you can use in that same way, um and,

you know, down the line, uh you know, definitely want to find ways to make it easier to use them and install them and spin them up in your drupal project, that is a much better than I did.

[31:13] Are there any other drupal modules out there that you're aware of that are doing something with web components?

Yeah, so there is um Phase Two uh is maintaining a library called outline, um that is a set of web components, essentially design system,

and that is something that they use commonly on drupal projects as I understand it, so those can be used again in the context of drupal or not, but that's definitely something to look at.

There are there are a few other,

projects that do are intended to use web components or work with web components that are actually not super familiar with um but there is no skip.

[32:04] No definitely name drop them.

So there's the, there is a web components, uh, project on drupal dot org which is associated with the the hacks project, which is kind of another set of web components,

and there also is the, the lupus custom element renderers, which is kind of, it's supports, I believe like a web component focused,

distribution, but again, I haven't really had the time, I'd love to and I hope to play around with us a little bit more but I really haven't had time to do it yet.

And then the other thing I think that is interesting too, to note which is definitely a future facing thing and who knows if we'll get there.

But there has been um a lot of interest lately in a concept around single directory components, that hopefully is something that, that's going to be built for a future version of drupal.

[33:02] That's very exciting stuff.

Yeah, definitely, and that is not necessarily directly related to web components, but I do think it would make the developer experience for authoring web components in your drupal project better in that for example,

one of the concepts there is, you can have in a directory, a template and a javascript file and drupal is going to automatically create a library for it.

So you literally could just go in there, create the two files that we were talking about and be on your way, which I think is pretty exciting.

So I'm gonna ask you one more question and it's not the rundown because well two more questions. Actually. Neither in the rundown because I just did my people talk to you, they said nothing outside of the rundown. I have a very strict, well you know, I tend not to listen to your people.

So so obviously to get moving with web components, some javascript knowledge is needed.

I know that you mentioned the lit interactive tutorial but let's say someone's not they don't feel comfortable with their current javascript skills and it's okay if you don't have an answer for this.

But do you have a recommendation for where people can go or a resource for people to learn?

And I'm gonna use the phrase modern javascript, you know, for people who are used to like writing j query or you know, kind of rudimentary job script, like where like what's a good.

[34:28] Uh we'll start within a free, open source ish type of resource for people to learn modern javascript you have to go to.

Yeah, I I do have a personal go to there's definitely a lot of other resources out there and you know, might not be for everyone. But um the,

the it was actually a paid tutorial that helped react click for me by a developer called named West boss.

[34:57] Talking about, he also is one of the hosts of the syntax podcast and and that was react for beginners which just really worked for me as a way to describe the concepts.

Um I wouldn't start there but he does have like General Javascript,

courses um so I'd suggest looking at that and I think there is one that is free that is like Javascript 30 or something which is just like 30 days of Javascript exercises.

[35:26] I actually have that when I have the link to that one, I will definitely add that one to the show notes awesome.

So did we miss anything? Have you know folks now in the last you know 30 minutes or so now have the information they need to get started with building their first web component.

Have we achieved our goal of telling people how to get started?

I do think so, I mean we didn't necessarily go into some of these things but but I would encourage people just overall to try to start simple.

There are definitely a lot to web components, things that make them different,

there are places to get tangled up and confused,

but I do think there are a lot of kind of low effort simple starting points that can show you the value of these things and then if you do want to get into you know the ins and outs of,

uh styling and the shadow dom and like more complicated ways to encapsulate these components, that's definitely all there for you.

But um yeah, start with something simple and and hopefully you'll see the why, you know, for example, I'm so excited about what these make possible.

[36:31] Alright. And now, for the final question, which could absolutely, if we're not careful, double the length of the podcast.

[36:40] Knowing you, I've known you for a few years, we got to know each other. Um I know some of your hobbies.

Um, so I'm very curious to hear about your opinion of the upcoming super Mario brothers movie.

Oh yes. This will, this will take a very long time.

No. Um, yeah, I'm really excited about it. I think it was like two days ago at this point. They released the second trailer.

Yes. And I thought it was, it was really great. It seems like they are doing a really good job of like creating like a full world and introducing a lot of the characters in the Mario universe.

I still don't like chris pratt's voice, but I don't think that's enough to weigh down the whole movie.

So to me, based on the trailers, it seems like they're, they're really focused on adding a lot of like little touches that tie the movie to the various video games.

[37:39] Which I think is really cool, especially the second trailer.

I saw a lot of stuff and I'm not even, you know, I don't even compare in my, in my knowledge or love of, you know, Nintendo games that I assume your level is light years beyond mine.

Um, but if a casual player like me can notice all the stuff that I'm noticing, it must just be like a cornucopia for you.

Yeah, definitely. And it feels like they're doing it without like totally hitting you over the head with it, which I think is, uh, is great.

And the other thing I'll drop as a, as an interesting rumor that I still feel like might be possible.

There is a rumor that secretly it is a musical.

[38:25] So we'll see if that that comes to pass. But a lot of the different cast members have said like on the record that they have recorded songs for the movie.

[38:35] So we'll see how that works out.

[38:39] Was it like the lego movie? The first one at least had that had a bunch of songs and it didn't exactly just remembering it. Yeah.

[38:47] And then the second one had more. But yeah, it's definitely not something that you would expect out of the Mario movie.

So that would be cool. It comes to pass.

All right, well, I look forward to the full review.

Yeah, we'll have to do it. We'll definitely have to do a follow up podcast and that one will absolutely have to be extended.

Yeah, I've been marathon. Alright, brian, thank you very much for your time and for your knowledge today. And uh, you know, maybe if this one goes over, well then we'll have you on for a third time.

We'll see how it goes. Awesome. Thanks thanks for having me. And I'm very excited that I didn't kill the podcast after all.

[39:22] Music.