Podcast audio transcript

[0:00] Music.

[0:05] Welcome back to the drupal Easy Podcast. This is season 15 episode number five and I am your host Mike Ao.
In today's episode, I will be talking with Andy Bloom, senior front end developer for Lullaby.
We'll be discussing the drupal smart snippets extension for visual studio code.
Now, this extension brings some really cool and useful drupal features to visual studio code including hook completion form and render array element completion, which is really cool and service and service method completion.
Now, before we get to all of that, let me tell you a little bit about Drupal's long form training courses.
Now, in the last few episodes of the podcast, I've been telling you all about the professional module development course and just as a quick reminder, the light version of that course begins August 22nd and you can learn all about that course at drupal dot com slash P MD.
Right now, I wanna focus a little bit more on our beginner class, which is called drupal Career online.
Now, this class meets for 12 weeks, two half days a week plus office hours.
One of the exciting things about drupal Career online is that there are full scholarships available and you can apply for them through August 9th.

[1:29] Over the last 12 years that we've been teaching. This course, we have received just some amazing feedback from our students.
Here's a quote from a recent student.
I'm impressed by the detail you are keeping for students. This shows how you value the efforts and expense we put into it.
I knew the DC O would be good, but it is exceeding my expectations.
I feel honored to be a part.
Well, that's just amazing. And we are actually quite honored that students put all of their trust in us to help them along their drupal journey.
If you're interested in becoming part of the drupal easy learning community class begins August 28th.
If you want to learn a little bit more about drupal career online before signing up, you might want to come to one of our free one hour taste of drupal webinars where we answer all of your questions and talk about what is involved with the drupal career online course.
We have a couple of those coming up, one on August 2nd and one on August 16th.
You can sign up for those and learn all about drupal career online at drupal dot com.
Slash DC. O.

[2:47] Welcome to the drupal Bluesy Podcast. Andy Bloom. How are you?
I'm good. Glad to be here. I think someone told me not too long ago that even though your name is Blum, it's pronounced bloom.
It is Bloom. Yes, it's German Heritage. So, there's no, um, uh, the guys at Ellis Island apparently didn't add the, um, las in.
So you must get Andy Blum a lot. Oh, all the time. Yeah. And it's totally fine.
Well, I'm kind of proud of myself that I introduced you properly because I forgot who told me.
But so you are a senior front end developer, LLA Bo I am. Yes.
And you're pretty active in the community. You are. I think you're one of the main Olivero currently, right? I am. Yeah, I am the better one over my.
Oh, well, that's for sure. Absolutely. How long have you been in the community?
I started working in drupal around 2016.
So, and I made my drupal dot org profile shortly after that.
So however long it's been since then. So I guess 78 years.
What were you doing before that? Just out of curiosity uh before, before I worked as a drupal developer. I was a high school science teacher. Oh, all right.
Like with beakers and explosions and uh well, no, the, the, no.
So I taught anatomy and physiology and environmental science and physics over the span of three years and then bailed on the profession.
Yeah. Yeah.

[4:13] There's not much more to say about that. It's a, it's, it's very different and that job is only getting more difficult.
Yeah, a lot of work on teachers, for sure, for sure. All right.
Well, we're not here to talk to you about that.
Oh, I do want to mention because I have on my list. You're also one of the community mentors for drupal career online.
So public. Thank you for that public. You're welcome.

[4:37] We're here to talk to you today about a really cool extension that you have written for visual studio code called drupal Smart Snippets.
So real quick, just kind of what's the 10,000 ft view of? What does this extension do?
Yeah. So drupal smart snippets provides a number of snippets for use in drupal development.
When I started working in drupal, I came in as a foreign developer, still obviously foreign developer and doing some of the more drupal things was always a little rough and I would always find myself going to look up documentation or code samples or something somewhere for all of the various hooks.
And so, you know, you're writing, you know, a hook, preproce hook you like OK.
What, what's the first hook mean? What's the second hook mean?
What are the arguments in this function?
And what, how does this all need to be written because it's all in PHP?
And so, you know, I might know this specific thing I want to do in the hook, but all of the boiler plate code, there was um something that for the longest time escapes me and I could never remember it.
And so I wound up making this extension. Well, actually, I guess I should say I started by using some other drupal eight snippets extension.
And around the time drupal nine was coming out, I realized there were a lot, there was a hook somewhere that I wanted to use, that wasn't in the extension because whoever made that one made it once, put one thing up there, pushed it and then just never touched it again.
And so I thought, well, let me open an issue on that one. Let me open APR to make all the new snippets for them and nothing.

[6:06] Nothing ever came from that. So I was like, well, I guess I'll just make my own.
Right. So I did so for a long time, I believe, I believe that one was called just drupal eight Snippets, right? I think that's the one that it was. Yeah.
Yeah. And for a long time and it may even still be this way.
I'm not sure, but there is a documentation page on drupal dot org for like recommended visual studio code extensions and configuration or something like that.
And for a long time it was the recommended extension. Yeah.
And I don't believe it's been updated since 2018 at this point.
Yeah, I, I just pulled it up and its last commit was five years ago and it was built on the drupal 8.6 snippets. Right.
So, it was getting a little crusty. Yeah. Uh and it has almost 50,000 installs.
So there's probably people out there still using this one that just don't know that, hey, there's a, an alternative that's up to date now.
Yeah. And when we get, you know, when we talk about a little bit more about what the extension does I think people are gonna be sprinting towards the new version I do want.
So let's go back to hook replacement because this is something that if you're a PHP storm user and you check that little drupal project box, you kind of get that baked in.

[7:14] So that functionality, the hook, autocomplete, hook replacement, whatever you call it, that I don't wanna say it levels the playing field.
But that, that was a big one for visual studio code developers to actually have that.
But then over the past, I mean, no, 234 months, you've added a couple more really cool bits of functionality.
And I think these are the two that we're gonna talk about are the ones they're kind of like game changers because these are both things that I don't believe php Storm has out of the box.
Yeah, I, yeah, I don't, I don't have a ton of experience with php Storm, but I, I think you're right.
I don't think this is something that exists in php Storm. And I've heard from people that I've showed this to and say, hey, can you, can you sanity check me on this?
And they're like, I, I've never seen anything like this before.
The, the two things that got added and these were actually community contributions from Michael Chen who I believe is in, I don't want him to speak.
I think he's from Hong Kong, but he opened up an issue and opened up APR, we worked on a couple of things and the first thing that we added in was form and render array elements to it.
So that if you know what element you want to put into your.

[8:30] You know, into your form or into whatever render array you can type at render or add element or, or there's I think one other prefix that you could use and then say, you know, I want a text input and it will autofill in the render array for you with type text and a title and the translation function and some other stuff.
It also gives you a dropdown of the available form element type.

[8:54] It does. Yeah. So you could if you're like, I know I want something but I forget what it's called. You can just start scanning through and VS code has a really nice fuzzy match.
So if you know, you know, I'm thinking I want uh I think it's called details.
You can add element and then det and you see. Oh yeah, details is there and you can select it. It will autocomplete it for you.
Yeah, this is one of those things where if you're building custom modules and you're using hook form, alter all the time or you're building a configuration form for whatever I know.
Speaking from experience for the past few years, there's a lot of frustration.

[9:27] With the the drupal Docs because there's no one page that shows you all of the different types of form elements and all of their available potential attributes.
Now we have like this big obnoxious super wide table in drupal seven.
I don't know if you remember that that doc too. Yeah, it was like, you know, it was like 13 screens wide and they had a horizontally but it had all the information there.

[9:53] And so for me, when I, when, when you first told me about this feature and I saw I'm like, oh my gosh, this is gonna save so much freaking time.
Yeah. The, the one kind of caveat I would throw onto that is that?

[10:07] The, the snippet that auto populates in for you. First off, it brings off everything it knows about.
So it's not like it brings in says, hey, here's the, you know, here's the five things or the 10th or however many things are available to you.
It just says here's all of them clap there it is. And if you want to get rid of them, you can and I guess deletion is much easier than finding what options are available.
But one potential issue and maybe we need to open a new issue on the get repo and somebody else can come in and, and figure out how to do this is that we don't, we don't actually put everything on.
So for example, we don't add an attributes key, we don't add a wrapper, attributes key.
And so these are things that you could add to your element that are valid on, you know, any, any render element, but that we haven't explicitly thrown in for you.
So I would, I wouldn't want to say it's the NLB all, here's every option you have available to you because that would be a really long list.
But we do give you the most important ones. Yeah. It's like, it's, it's like the 80 or 90% of the stuff that you're looking for all the time.
Yeah. Which is, yeah, it's, it's fantastic.
So, what's, what's the other, the other big feature? Yeah, the other one that came in that was actually a surprisingly simple ad is all the services that are defined in drupal core.
And so, you know, if you look in the the core repo, there's a core dot services dot yaml file.
And in there you've got a list of all of the defined services as well as the PHP class that is behind the scenes for that service.

[11:31] And so now you can also type in at service and start searching.
It does that same big drop down list where you can scan through everything or do some fuzzy searching to find, you know, I want the current user service and it will save that service to a PHP variable and it will give it a PHP doc comment just telling you the type of the thing that's being returned.
And that way when you're using some other extension, like the, the one that I recommend is PHP in te offense by Ben Murn and by annotating that, So that, so that app service that's really meant more for use inside of hooks because it doesn't handle any dependency injection if you're, if you want to.
Correct. Yeah, that one's that one's mainly for in hooks, as I've said for a developer, dependency injection is not something I've ever actually written before.
I'm not really sure how it works or what a good standardized way to implement that in a snippet would be. So, you know, if you have ideas, I'm, I'm open to them.

[12:37] All right. So that's, I mean, those three things right there.
That's I think worth the price of admission, which is free because it's, it's all open source and it's all on github the hook, autocomplete, the form, render element, autocomplete and the service, autocomplete.
Yeah. Huge time saver. All three of them.
I want to talk about the extension a little bit because I did not know anything about how, you know, visual studio code extensions were, were written or built and I started poking around and now I know why this is something that you were so comfortable doing because it's all written in javascript.

[13:10] It is. Yeah, it's, it's all typescripts. I, I guess it's typescript or javascript.
I didn't write it in typescript because when I started, I didn't know typescript yet, but yes, typescript or javascript.
And then it appears that you've got some type of script.
I don't know if this is part of the, the repo and dig that deep that goes through and harvests all of the hooks and all of the uh render elements and all of the services like you mentioned and saves those in, I believe it was Jason data, which is then I guess consumed by the extension as you know, as someone types one of the app service or app element.
Yep. So this past weekend, actually, I just updated it to take the, the new snippets from 10.1 that just got released last week.
And so if you go digging into the repo and look at index dot Js, there's a, a variable, I'm calling supported versions.
And so I'd say, hey, I know we want to support 10.1 0.0 and 9.5 0.9 because those are the two on the that you can download as tarballs right now.
And then when I tell it to go it.

[14:14] Iterates over those two and says, cool, I know I want this version and this version it goes, it downloads the tar balls to your to a temporary directory on, on my machine or whoever's building it.

[14:24] And then it starts scraping through all that stuff. And because of all of the work that's been gone, that's gone.
That's been put into the drupal community and the coding standards and whatnot.
We have predictable patterns of how to find hooks that are defined.
So we say, you know, show me all of the star dot api dot PHP files and then once you're in there, I'm using a package that I don't remember the name of, but it parses out the, the PHP file into its syntax tree.
And from there, I can find where a function has been defined.
And then what are the arguments that have gone into it? And what's the documentation comment above it?
And so I can harvest all of those things individually and then reshape them into adjacent structure that matches what VS code expects for snippets.
So how long does that process take for a couple of versions?
Like I said, I think you said two versions of drupal at a time.
Yeah. So for 10, 1 and 959, the honestly, the part that takes the longest is downloading the Tar Balls.
It downloads those, it extracts them, it does them one at a time.
And I think all told it's maybe, maybe two minutes on my machine to, to run through it.
And so every time I make an update and I'm ready to publish a new version, I run it once, make sure everything comes out well.
And then there's a, there's a tool that I think, I think it's Microsoft that put it out.
It's vs ce, it's whatever their extension vs code extension manager, plug in, whatever it is.
It's got a prep publish hook and so it reruns it all again. So as long as it ran fine for me locally, then I let it rerun again in the, the prep publish.

[15:52] Stage and then it publishes up there and adds the git tags and does all of the.
Release info and updates on the visual studio code marketplace.
Yeah, and there was uh I believe uh this past Saturday.
So we're recording this on June 26th. So a couple of days ago on June 24th, there was a new release and.

[16:10] It seems like you've been, you know, pretty uh predictable and pretty good about, you know, having a new release out with, you know, with releases of drupal, at least minor releases I think are the ones that are important, minor releases.
Yeah, if we have a new bug fix release, there's, there's nothing new in there as far as Hooks or services or anything.
So it's not worth running again. But every time we get a minor release, so every six months, you could, you should expect an, an update to this extension.
So I guess the caveat with all of this if I don't know if caveat is the right word is that it's a static list of hooks and elements and services that it's pulling from.
So it, it's not gonna pull, it's, it's not gonna see a custom service class.
It's not gonna see a service class that's implemented by con module X, it's not gonna see a hook that's been defined by a con module.
I, I was actually thinking about this and that would kind of be incredibly difficult to do because uh it, it sounds like those the json files that the extension uses would have to be kind of dynamic depending on what's in the project.

[17:15] Yeah. So what you would, what you would end up having to do there and it's something that I have looked into and kind of gone.
This is over my head at the moment. All of the snippet files are static because we're, we're scraping through a tar ball of drupal core or I guess two tarballs 1 10 and 19.
And then we're just packaging those up and shipping those off at the, at the end of the day, the majority of the code there is actually just there to make the snippets.
And if you look at the git repo and the snippets folder, there are three files in that folder, one for elements, one for hooks and one for services.
Those are the only three things. The extension actually needs to be usable at all.
The rest of it could theoretically be closed source and then you could just send out the snippets as, as they are.

[18:01] What you would need to do to start looking at other installed modules is using the language server protocol, which is Something I've never done before. But one of my coworkers, Chris de Luca, he's one of those oddballs that likes to code in Neo Vim.
And he has done all of his own, you know, I want my, my editor to be in my terminal and to work exactly the way that I want to.
So he's actually worked with language server protocol before and he has said that in, in some free time here and there, he's kind of poked at it to see how hard would this be to do.
But essentially you're running in a separate process on your machine from vs code a language server that is continually scanning and updating what it knows about the code base.
That's, it's kind of like what the intelligence is doing. Exactly.
Exactly. And so it knows, you know, I have this thing, I know its type and I know all of the, the various pieces of it and how the syntax of the language plays with, with the structure of the classes.

[18:58] So something like that would be really nice to do. I'd sent an email out to Ben Murn at one point in time, I never got a response back.
But like is there a way that I can just tap into your language server and say I know where these files and should be living?
Can I go get them and just make some dynamic snippets or whatever I need to do?
So it sounds like AAA version 2.0 That, that would definitely be a major version of it.
Yes, but would very quickly, at least in my opinion, make VS code the preferred tool for drupal development over PHP Storm II. I don't know.
I bet a lot of people who try out version 1.4 you know, might feel the same way because I, I I'm telling you the, the form array of the, the, the element, the render element, the the form array element stuff is it's such a big time saver because I don't remember any of that stuff.
I know there's an autocomplete widget. I just don't always remember that it's oh entity underscore autocomplete I think.

[19:56] And like what's the, you know, I know that in there, there's an attribute for saying it's a, a note or a user what I'm gonna autocomplete on, but I always have to look it up so huge time saver. So, Where else do you see? Like is there other low hanging fruit that you or other contributors, you know, might wanna look at in the near future before the big two point?
Oh, so there are, there are currently three open issues on the repo and they're all currently marked as on hold.
One of them I think came from one of your students about adding the, the types of adding types of hook declarations.
I'm not 100% sure what that one is, but it's a hard one to do with just generating the static snippets and there's not really a way in the VS code API to define the stuff that I think this person is asking for on top of that, removing drupal nine support in November of 2023 is just on hold, it's just there.
Um And then the other one that will be interesting and is also on hold because I don't think it's possible yet is downloading the source files from GIT lab rather than the Tar Balls from drupal dot org because eventually the Tar Balls, I think go away. Yeah.

[21:10] All right. But no other additional snippets. Not that I not that I've really thought of.
Uh, if they, if you have an idea, please open an issue and if you uh have a solution, open APR, that's even better.
I do have a project on drupal dot org for this where you can get drupal dot org credit for contributing.
Awesome. Have you tried it with VS code that, which is the open source, um I don't say equivalent open source version of VS code.

[21:37] It should work with VS code. I've not tried it with like a local install of VS code, but it does work with the in browser thing you get from GIT pod.
They are VS code based and their extensions are from OPEN VSX.
And so there's a the same exact code base runs the exact same stuff.
It's just a different tool that does the publishing. So when I run, you know, VS ce publish minor after that, I do OVSX publish minor and it does the same thing.
So yeah, it should be available for you on any anything running VS code or VS code.
And now this is more for my own curiosity. It's probably good for the podcast too.
But what other visual studio code extensions do you use that are kind of that are ones that you say like you, you have to have we mentioned in telephone?
Yeah, but are there other kind of drupal ones or maybe drupal adjacent ones that, that you, you know, you swear by at.
Yeah, let me uh let me open the list here and see what I've got installed and we'll let's get on the list. I use auto close tag by John.
Hopefully I'm pronouncing that correctly, but that one will automatically add a closing tag in html.
Markup works also in twig. As long as your file associations are correct, that same author has one called auto rename tag.
Where if you change the, you know, if you have a say an H one, you went.
Oh, I want this as an H two. If you change the first one, the closing tag also updates.

[23:07] I have a, a duplicate action by mrmlnc which adds a, a duplicate action to the context menu.
So if you right click on an item instead of having to copy it and then paste it in the same directory, uh you can just duplicate it and I use that one to map a keyboard shortcut to command D so I could just duplicate a copy of a file with command D.
Let's see. What else do we have here? I use GIT graph a lot by M Hutch.
Git graph is nice, especially if you're working in and this one works outside of drupal as well.
But it's really nice to be able to, to see like where merger quests happen and just get a nice visual look at where everything happens for a long, long time.
I was a, a Gooey Git user and I made it a, a personal mission to do more in the command line.
But GIT graph is nice to just have your, your, your GIT flow in the, in a uinvs code.
Let's see here. What else do we have uh in teen for CS S class names?
PHP debug by XTA bug. Which if you don't use XTA bug, that's something you should learn because it'll, it's, it's like a superpower.
PHP Dock blocker by Neil Brayfield inte defense by Ben Murn.
A yam one by Red Hat.

[24:26] What is that one? It's just Gammel by Red Hat. It's Yaml language support.
I heard something different. Ok. And then Twig language two by em blo there's several twig language ones out there.
Twig language two I still don't think is.
As good as it could be for drupal use. But I think it's the best one that I've encountered. So, all right.
So I'll, I'll put a link to all the ones you mentioned in the show notes for everyone so that they don't have to pull over and start writing these down because that would be dangerous.
So, final question. Are, are there any plans or is there any reason to bring maybe not all of this functionality, but maybe some of the functionality to php Storm?
I, I've had this question before and the answer right now is no, simply because I don't use php Storm.
And so I don't have the knowledge of how their system works.
I haven't really looked into how, I mean, like if you Google PHP Storm snippets, like they don't even call them snippets.
So like finding that it, it just hasn't been a priority.
But if there are people out there, that sounds like this all sounds great.
But I love PHP Storm and I just renewed my license and I don't want to walk away from it and you wanna work on it. Come on over, we'd be happy to have you.

[25:38] Yeah. Or I mean, if you know, perhaps there's some work that you've done on the javascript side that they can leverage to, you know, get started on the PHP storm side of things. That'd be great as well.
Absolutely. All right. Well, super fantastic. Andy. I think I've asked you everything.
I want to ask you about this stuff. Just go out and get this extension.
It's fantastic. Uh Obviously we have links in the show notes.
It's called drupal Smart Snippets, and Andy. Thank you very much for your time. Thanks for having me.
Thank you so much for listening to this episode of the drupal Easy podcast.
Don't forget to check out all of our long form drupal training courses at drupal easy dot com.

[26:25] Music.