 Good afternoon everyone. Welcome to work camp. My name is Vivian. I'll be introducing your speakers I first would like to acknowledge that we are on the unseated and ancestral territory of the Musqueam the Squamish and the Slewa Thaw Nation on behalf of us all I give thanks to our Indigenous brothers and sisters for use of their land this afternoon's talk is being given by Ryan Welcher And it is extending WordPress with slot fill. Please give a hand to Ryan Thank you, and thanks for hanging out. Well figured out all of the issues Okay, I think this is gonna work. If it doesn't work. We're just gonna talk about other WordPress stuff for the next half an hour So I just thank you for coming. I really appreciate you all taking time to come listen to me ramble on about slot fill Which is something that I'm very passionate about and I've done a bunch of talks on it And I've written some of the slot fills. Anyways, let's get into it So the first question you might have is what is slot fill? So at a high level slot fill is an extension paradigm that allows developers to add elements to existing UIs in WordPress specifically the post edit screen and the site edit screen You register plugins containing content or fills and they will be displayed in a specific location Or what I refer to as slots in the UI wherever that is Items are rendered outside of their element tree So if you're familiar with react portals, it works very similar where you put something over here and it actually renders out over here somewhere This is this is the imaginary website in my head Currently there are 13 locations or slots available and we're always trying to get more in there, so oh Speaking to the mic sorry Okay, I'm gonna be married to the podium here slots or location base So if you want to compare them to to something that most WordPress developers know You could you could compare them to an action in the hooks API in the sense of They don't work in any at all the same way, but but hook or sorry actions are I'm sorry Yes actions are location based and they usually render in the order in which things are registered So let's look at a a slotful system overview So a slotful system at its core in the context of WordPress anyways Consists of three components. We have what's called the slot component and it's wherever this component is rendered Any fills with the same name which will have their content rendered in that location So it accepts three props with the name prop the fill props object So if you wanted to have information that you want to pass to the fills that are getting their content rendered here You do that by it by a fill props and there's a third one called bubbles virtually and that just handles Event bubbling behavior depending on what you're doing. You may want to have it bubble virtually through react or through the regular dog So here is a an example code example of what a slot looks like. It's a very very simple component So the second part is the fill component So the contents of this fill component basically the items wrapped in the fill component Will be rendered in the slot location of the same name Regardless of where this fill is rendered so it only accepts a single prop which is the name of the slot this fills targeting So if we see what a an example of that would look like it looks like this So it only has a single property, you know everything is this why it does everything inside of here is what will be rendered inside the fill So the third one is the thought the slot fill provider component this whole talk is full of Really hard things to say many times in a row, so you'll know I'm sure I'll stop So this is the magical glue that connects fills with their slots So both the slot and the fill components need to be wrapped by this component at some level Doesn't have to be immediately wrapped it can search its children and its children's children all the way down the tree To find these slots and fills and then it can it connects them at runtime if you will And it accepts no no props and there's nothing to really see because it's just a named component so for me so basic slotful system We're going to take our application or component and we're going to wrap it inside of the slot fill provider then a named slot is rendered or exposed somewhere inside that application a fill with the same name is rendered somewhere else and then that that fill its content will be rendered it inside this Slots or sorry in the slots location So if we look at some sort of this is my very simple application here Just to get a sense of how this works slot fill provider wraps everything My awesome app is an app of stuff and then I have a slot and then below it have other components Then I've been filled at the very bottom This is not going to be very impressive because it'll just move it up one line But basically what happens if we had sort of a graphical representation of this We have our slot for the slot fill provider wrapping our app UI on the left side. We have a slot on the right side We have two fills when this renders Press the wrong button all of the fill contents get moved over into the slot location So that's kind of how it does it sort of so How does WordPress do it? Well, we're pressed does it with those three components But there's another level here because everything that we've just seen is sort of a closed system And we need as extenders to be able to get our code inside of Gutenberg or inside of the block editor and We can't recompile JavaScript for the for the Gutenberg Plug-in or for the core for core every single time. So we need to add two more pieces Excuse me The first sorry, so we have two new pieces to the puzzle the first piece is a function called register plug-in So this function provides an entry point to the slot the system by accessing this global array that contains all of the plug-ins And you'll see what a plug-in is in a second, and then the the the next piece is a plug-in area component So this piece is a hidden component that's buried deep in the bowels of the block editor And it accesses that same global array and renders those fills inside of it And we'll see so that's how we get it into the system So register plug-in is part of the WordPress plug-ins package It takes number of params or parameters the first one is the name which is the string identifying what this plug-in is called The next one is a settings object with Scott currently. There's three properties that it supports The most important one is render so render will be the component It expects to be a functional component and whatever you pass there is what's rendered inside the like that's how you build your fills You can pass an icon which can be either like a string to a dash a con or like a Basically a react like JSX Icon so I'm saying and the the last one is scope. So scope is new ish and When you do if you define the scope here, it will only render in the plug-in area that has that same scope now currently The plug-in areas in the site editor and the post editor are not scoped So if you add a scope there it won't render and where you're where you're thinking it's supposed to this was added after that was The those two screens were sort of made. It's really great for custom plug-in areas with sorry custom slot fill systems, which I'll show you So this is This is an example of how you would use it So we have our example plug-in is the the name of our plug-in and then we have an object This is a component that I've built out somewhere else You just have to put the name of the point in there and then whatever icon we want So the plug-in area component is the next piece and it renders all registered all the registered plug-ins inside a hidden div element It it has a scope prop like we just talked about so if you define a scope here Your plug-in must target that same scope when rendering and then and on and on error function Which just handles errors? Unless you're building something custom. You're probably not going to use this component But anyway, so this is what it looks like plug-in area. It's got two props pretty pretty straightforward stuff so Here's an overview of kind of how the wordpress like the actual wordpress system doesn't so slot fill provider wraps an editor provider component The editor provider component just creates a block editor and then that is sitting inside the post-edit screen and the site edit screen Various slots are exposed inside of a layout component Fills are registered using the API Fills are rendered inside the plug-in area and then fill content is rendered in the associated slot So this is sort of just a pseudo representation. This is kind of how it looks. There's a lot more going on in there In 6-4 this is going to change because I believe they're going to nest slot fill provider inside of the editor provider functionally It won't matter matter, but this I'll have to update this slide when 6-4 comes out So and here's a visual representation of what that looks like over here. We register a plug-in It's in this sort of global list the plug-in area component grabs Everything out of there renders it in here. We have our two slots in here and then when it runs all that stuff Goes in there. It's pretty pretty straightforward I guess so So far we've seen really basic Slot fill examples and the actual slot fills that are available to us are more complicated than that They're named components and they usually contain some other functionality or they have Intercomponents some of them respond to fill props some of them do all all kinds of stuff So and this is this is an example of the plug-in post status info slot And this is actually how it's how it's working. So you can see what we're doing here is Taking the fill And then we're putting a panel row in there and then any any children that sit that are wrapped inside this component Get rendered here, and then we're exposed it We're exposing the slot on a dot slot property And so the the slot and the fill are in the same component and that's where we get the name slot fill And so to expose that slot This is this is again a kind of a cut-down version of the post status panel on the left hand side of the block editor What we do is we just we import the plug-in post status info component and then we expose the dot slot property and then If you want to register a fill for that we would import register plug-in from WordPress plug-in Import plug-in post status info from the WordPress edit post package We and then we I love this point It's awesome, and then we have the name or plug-in and then our render function It can be like an inline sort of functional component like this or it can be an external Component that you use somewhere else and then we wrap the content that we want to render in the name of the Slot bill and that's that's it and then what that looks like is this so this is the this is literally where that would go And how that would look so it's a very I'm sure there's lots of plugins that that that puts stuff in there, so Currently there is nine slots available in the edit post screen I'm gonna show you an example of each one And one of them this main dashboard plug-in is still sorry This main dashboard button is still experimental, so use it with with caution, but the first one that we're gonna talk about is Plug-in pre-published panel, so this one appears in the pre-published sidebar So when you hit publish for the first time you get that little sidebar that says are you sure maybe want to add some categories that stuff So that's where that sits It has a couple of props a class name so you can add Classes the title to display at the top of the panel and whether or not it's open initially So we were to register a slot for that We would again import the register plug-in function and then we pull in the slot that we're looking for and then It's all sort of the same I'm probably not gonna walk through each one But we'll just we'll show an example and then when that renders it looks like this down here at the bottom So and in this one I I've added a custom icon here Because I'm a developer advocate so avocados my thing I guess and yeah And so the next one we'll talk about is the post-published panel. It's exactly the same thing, but it shows up after you said Yes, I actually do want to publish It's got the same properties basically class name title and initial open Code looks very similar. You're gonna sense the theme the code is very similar The thing that changes is this name and the stuff that's rendered in here. So it's very very very The the code is very similar across the bore here And I'll leave this up for a little like just long enough for it to be awkward so people can actually read it and So this would be what that looks like in In production The plug-in more menu item So this renders a menu item in the plug-ins group in the more menu drop-down. Yep These descriptions are hard. They're hard to say with words off to show you the example here It can be used as a button or link depending on the props Provided so yeah, so it accepts the hre an href. So this is When href is provided then the menu item is represented as an anchor rather than a button Again, we have icon we have on click so you can tell it what you want it to do when this is clicked And then there's down here There's just like the spread operator and what this means is basically any other props that you pass will be Pass down to the underlying button that our menu item component So yeah, so you can style that appropriately or you can add the the props that that component takes And this is an example of that so this one we're just going to be linking out to the slot fill reference guide on the developer.wordpress.org and That'll render in here. You click that and it'll take you to that page Plug-in block settings menu item They're all mouthfuls. It doesn't get better It adds a new item in the block settings menu on any allowed block So when you're when you have the toolbar above a block or if you if you pinned it to the top of the page That's where that would appear So you can you can specify what blocks should disappear on again? We have icon we have a label which is the menu and a text and then the on click again What do you want to do when you click on this? This is the example here. So we're only allowing this on the core paragraph block This is the label which I should be escaping but I didn't and then when I click it I just alerts click so when that renders it renders in here So I clicked this three button menu disappears I click on that and it doesn't alert. It's the most useless slot on the plan Well, this implementation is the most useless not the slot itself the plug-in sidebar one This is probably the one that most people would be the probably the most familiar with because this was one of the first ones That really got heavy usage. I think Yoast was the first one Yoaster Anyways, it's so it's this renders a sidebar when activated sits in the top right-hand corner And when you click it it opens a panel and there's stuff in that pin So it takes a name which is identifying the sidebar, which is good so you can open it and close it a Class name the title is pinnable, which is whether or not you can in the top right There's there's a button that will sit there and you can if it pinnable is false It won't show up in there and you have to get out of the different way and then again the icon So the example here looks like this So what I what I'm doing here is I'm making this a bit more complicated So I have a plug-in sidebar, but then the contents will appear in the flyout And so so it doesn't sit right against the edges. I wrap this inside of a panel body So it looks a little bit nicer and then when that's I'll sleep it up for a second actually And then when that is rendered it looks like this So I clicked on the avocado and it pops open and then the fill contents is in here That's the title that I've set and this button makes it pinnable basically. So if I turn that off this disappears One thing that this does now that it didn't used to do and there's I'll I'll talk about it in the next slide So this this is the menu item that's associated with that particular Plugin so it used to be that you had to do the sidebar and the menu item separately And now they've they've changed that so you may not always be needing to use this particular one But it so this targets the sidebar So if we look at back here, we have a name in this this one And so to target that we would need to pass that as the target to this particular slot fill Does that make sense? I feel like Okay And then the icon again and so here is so this is an example of doing both So down here we're registering the sidebar and I give it a sidebar name or sorry The name is sidebar name and then I have my more menu item that is going to target that This is the text and I absolutely left that in there on purpose and So when that is clicked it will basically toggle the sidebar or sorry They plug in sidebar with the same name open and close so clicking this button basically opens this Plug in document setting panel. This is my favorite because I wrote it but So this renders items below the status and event and availability panel This was in direct Relation to the lack of meta boxes that you could register inside of the post edit screen when Gutenberg first came out All the meta boxes were done at the bottom you had to do with PHP So this was added so people could insert stuff in there It takes a name which is identifying this panel. That's really useful if you want to programmatically open and close panels a Class name a title to be shown at the top and then again an icon So this is example of that We've got our name title or our class name. Oh, I should mention and I don't think I have yet But the icon down here Can be inherited sometimes and sometimes it it doesn't so not all slots have icons In fact, I think this one's been updated to no longer support the icon because the rest of them don't have icon So just ignore that out. Oh So this is basically creating a panel in here so you can add as many or as many as you want The main dashboard button this is experimental Please use it with with caution as everything in WordPress is experimental Everything that is experimental in in WordPress You need to be aware of using it in production because things can change it could break and so on so but this allows replacing the Default button in the when you're in the block editor and it's full screen and that little WordPress icon in the top left corner This allows you to replace that with whatever you want and So I'm doing bad things and experiment importing experimental stuff So I've got a the main dashboard button and then I'm using this full screen close mode icon Sorry full screen mode close component with my icon of avocado It looks like that. So if you were to click that it would take you out of the out of the edit experience into back to the WPM Okay, so the site editor has four component our slot fills currently We just got a new one in 6.3, which is plug-in template sanity a setting panel The they are All exactly the same. They are just Washington said the first three are exactly the same just imported from a different package So they they look the same they appear in the same place and they work the same they're just in a different location in inside the admin and So this the last one is the template plug-in settings panel And so this one appears it's very similar to the document setting panel in the post-edit screen There and so and I got I got to pick up the base here But it just appears in here, but this is in the template editor of the site edit screen Okay, so you're probably saying that's it. I want more. Well, you can't have more. We just need some help So go to go there open PRs Talk open issues talk about your use cases This is going to be very very similar to the way that like hooks and filters and actions and all that were added Sort of in WordPress core enough people Complaint about something being missing and it gets added enough people add some hacks to get something in and people started saying Oh, that's something that that we should add so let's do that Okay, let's talk about creating slot fills custom slot fills and I'm trying to go really fast because I'm gonna show a fun demo Yeah, so to create a slot fill you you import a function called a Called create slot fill from the wordpress Components what that's going to do is allow you it'll give you a fill in a slot component and we all know how those work now So once we have those we're going to create a Component a named Component that is going to be the same name as this parameter So this parameter is the name property for the slot and the fill that's how they get connected So best practice is to name the slot the component the same as this parameter And then we're going to return our fill with wrapped in the children We're going to create a dot slot property and sign it the slot component and then we're gonna export that oh And I realized I just kind of went through all that that's like so in our fake settings screen We've got a panel body a panel a panel body. We've got a panel row, and then I'm exposing this slot here So if I wanted to just render something inside of that We we use render plug-in or sorry register plug-in. We pass the render component again This code looks very similar. It's just the names have changed and then that would render something like this So if we want to use fill props We would we would expose our slot normally and then we would add a fill props object and then put whatever Information we we wanted in there. This is really handy if you want to get like the current user or the context of the page that you're on and so Yep, so once that's been exposed We're going to register plug-in in the same fashion that that we have now this gets a little bit more complicated Because this is actually a function that receives the props and then we're just This is a render. This is like an implicit return in JavaScript So this will just return this and it's going to do a p-tag and it says I was past fill props And it's going to say the props dot message which is that what I put in there Yeah, and then when that renders we see I was past fill props and then it sends me the message So you can also customize your fill structure so this is an example of The the structure around the Yes, the structure around the fill is is customized so in this case, I'm going to build a button and I'm going to expose the slot like we do normally Then I'm going to say customize fill structure and I'm going to put some text in there I'm doing three of them but one two three when this renders It's going to render a button for me and it's going to take the fill contents and make it the text that's in the button the very contrived example but Yeah, and then there's a custom slot structure, so To do that we're We're customizing our our slot component here, so we're wrapping slot This is a function again It takes all the fills and I'm just gonna say if it's got fills then I'm going to wrap them inside of a code Tag, otherwise, I'm not going to return anything and then I expose the slot again And then I say this will be rendered in a code tag And so when I when this is rendered it looks like it's rendered inside of code tag So you can customize both as well. So in this example, I'm basically building an unordered list So on each each fill will we'll have an li each slot or the slot I should say well will be wrapped wrapped in the unordered list tag and Again exposing so I'm going fast. So if you have questions, I'd be happy to answer And then this is the first item. This is the second item and then when that renders we we get a list So how much time do I? Five perfect. Okay. I'll slow down a little bit because this is the fun part so we could do a slot fill outside of the editor and So I have an example where I have a dashboard widget that supports slot fill and so this is just the boilerplate code that I'm using to Register a dashboard widget. All I'm doing is outputting a div with an ID so I can target that And now what I'm doing here is I've created my slot fill So I have a fill with a section and the div and the children in there This is just creating the slot fill The dashboard widget is wrapped inside of a slot fill provider because we need that to make this work I have an H4 that's saying this widget so there's no purpose I'm exposing my slot here, and then I'm adding my Plugin area down at the bottom with a scope for dashboard, and then I'm just using react to render the dashboard widget Into the div that I defined So now I'm going to register a plug-in So I import the register plug-in from the plug-ins API and then I use my widget I put in a component called bearded wonder and then I'm targeting my dashboard scope So this becomes important because if there was multiple so say say I had three different dashboard widgets And each one had its own scope because I don't I want to target widget one with some stuff and widget two with something else If these weren't scoped Anything that's registered will be placed in all all of them. So that's where the scope comes in It just you know makes it it it creates a context for your particular information. And so that's what this would look like This is the best gift on the internet Yeah, and it serves no it serves no purpose, but they get a really Ridiculous giggle anyways Okay, and so if all else fails you can still use portals so react portals is everyone show hands who's from familiar with react portals Sort of okay, so react portals is kind of what this is based off But what you can do is you can in your react application You can say this random piece of HTML is now part of my app, and I want you to put something in there It's like a magical portal that you can send something to and so George mom-a-dash really who is a Sponsored contributor for go daddy. I believe wrote this really cool example To basically add this little smiley button to a place that there is no slot So if you need to you can do this use it, you know with great power comes great responsibility So be careful, but That's that's that's that example Okay, so that is it for me you can steal all the code that you've seen including George's example is available at this link or this QR code. Please feel free to grab it steal it fork it use it as your own And it's got all the examples that you saw today and some other examples as well So there's a lot going on there So thank you You can find me on twitch youtube and discord as Ryan Vulture codes, so come hang out Ryan Vulture on X Twitter whatever it's called now and either welcher Ryan Welcher or some variation of that on most slack channels So any questions? I know I went really fast, so I'm happy to explain anything in further detail every show slides question Just curious. I'm not super familiar with all the components involved But is it possible when you're using slot fill to have it provide context based on content in The editor so the use case I'm thinking of is in the pre published slot fill component You had if someone has imaged in their content Yes, have something say hey Did you put in all text for accessibility as a reminder before they get published you can absolutely do that? Actually wrote something that did that Is I it's a pre-published checklist So one of the cool things about slot fill is that you don't just need to put components in there You can put any other Sort of JavaScript you want so if you have like so my initial iteration of this pre-published checklist did that exactly it checked It did a word count it did this check to see if you had anything that was like any categories that weren't Uncategorized and whether or not you added a featured image So when this is a bit more advanced when you get in there You have access to all of the the WordPress data stores that are in there So any information that that Gutenberg that like the API's that basically the Redux stores have available You can get access to so you can absolutely do that and I would recommend not doing it inside of the pre-published panel Because it's a setting that can be turned off So you but you can still you can still do it in the slot fill Because the plugin area is rendered somewhere in the bowel so that code is running even though that particular slot is not rendered So that's a that's a hack that I've done a few times just to get my code in there and then I deal with the UI elements later The later it iteration of that plug it's it's on it's on my github. So go on go and take a look It doesn't do anything with the pre-published panel In fact it runs entirely and it disables being able to press the publish button until those things are Whatever you've defined are Sort of are satisfied. So thank you. Yeah time. I can show you the repo after this too Yeah Questions anyone Does anyone want to see anything again? I went really quick. So feel free to say Brian just show me something because you'd talk too fast Yes, absolutely So I'm trying to understand where where you put this in the code okay, so That's it. You know, you know in So the way I have done for example custom Blocks is that you specify the what goes into the various fields inside this edit function that it's Is it and I find this very annoying because it shouldn't be there, right? It should be separate and is I Are we moving away from this kind of? Firing the actual render where does the render happen so that it's available and interacts with the block or other Okay, so I think there's two questions in there, so To answer your quite I to answer your question the Register plug-in calls that we've been looking at that should be in cute in a separate file The same with you would in cue regular JavaScript. So but just on the block editor assets And I don't know if I actually showed that so that's a really good point that I'll update Does that answer your first question about how to get it in Or How do you initiate any changes to this as a result of input or the fact that the block has been activated, etc You would have to do that inside of the component that you're that you're rendering so The render the redner property takes the the component and essentially renders that as its own JSX Component hidden inside that plug-in area. So it's a standard react Component so you don't just need to output JSX in there You can have calls to use state use effect You can do all that stuff in there and respond to anything that's happening in inside of Gutenberg So if you want to say say I know what you just say you you have a document setting sidebar panel and you want to Have some kind of indicator that let's use word count So you need to have a thousand words on this page So you can render that slot and then you would use like to use select the the data stores that are available to access The word count that's that that Gutenberg is keeping track of or at least being able to pull the word count out And then you can respond to those changes and update your UI accordingly. Does that? Does that sort of help okay, so it is actually rendered inside of the plug-in component Or sorry the plug-in area component. So your render happens there. You just can't see it But all that code is running regardless of the fact that you can't see it. I feel like I'm not quite answering your question, but Well, we can talk after if you want to yeah, that's easier anybody else have a question Yep Sure, you just want to see the GIF again, don't you? Can I just you just show the code? Thank you sure So there's a couple pieces for it There is registered. Sorry This this is standard registering a dashboard stuff that we're like if you wanted to register dashboard widget That's the function that you would call Which which code do you want to see or just all of it? Yeah, yeah for sure. So this is just creating a custom slot fill. So maybe is And this is the dashboard widget. This is probably what you're more concerned with right so again up here We have to make sure we're wrapping everything inside of the slot go provider if you don't do that none of this will work And then you need to just put the plug-in area somewhere because it gets rendered literally inside of the div That's hidden so it's displaying on or hidden. I can't remember. So and then Explode your slot wherever you need to be now This can be way more complicated markup You can do really complicated stuff in here and just put the slot in without where you want and then at this point The only thing that you have to do is you're going to register your plug-in and you're going to make sure to enqueue the javascript that contains this On to the dashboard's page like the dashboard widget page. So there's a it's not it's not the block editor a six hood It's like WP admin scripts hook I think but then you have to do like a check to see which actual page it's on In the code example repo. This is all in there. So you can like I said, you can steal it And I'll just leave that up. That's helpful way the back I'm wondering if is it possible to Kind of if I wanted to build a plug-in that shows like a tomato in front of the avocado Like is it possible to do it? Like is there like ordering? That's you can kind of do you brought that up didn't you? Okay, I don't know. There is no Okay, it is based on essentially source order and the or in a queue order at this point I Have a PR that adds ordering so go there and say I want this and maybe we'll get it in but basically you're at the whim of The order in which JavaScript is loaded So if you wanted to specify like if you don't have access to my code There's no guarantees that your your slot will render before mine. In fact, I Have a variation a block variation plug-in for the query loop block that adds a bunch of stuff and Depending on settings the UI bounces around because it's all slot fill-based. So it's a little bit Unfortunate so there is no Ordering right now. The best thing that you can do is register all of your plug-ins in one call Because I'm not sure if I mentioned it, but sorry in here You don't have to just have one slot you could literally have all 13 in here And and they will all be plunked in at the same time because they're all part of one render function So that's a problem about as close as you're gonna get to be able to really control the fine-grained detail So does that answer? Yeah, that's really cool. Thank you. No problem Anyone else questions? Kind of to this other comment. Are you able to contextualize like on your slot check on your plug-in check if another plug-in is loaded and Then oh, that's good. That's to it So there is a way to get so that the plug-ins API actually has more Functions available than just registering you can actually get a list of all the ones that have been registered But again, you're that that runs so late that Everything will be registered by then So it's hard. It's hard to know I mean you could you could do some checks to see if like you know is You know you can check to see if a plug-in is enabled like an actual WordPress plug-in But there's not there's not a ton that you can really do to There's some there's some limitations in the API right now like for example if I register a plug-in that's got 10 slots I could not through the API Get an act get actually I can get access to the plug-in that's been registered But I don't have access to the internal slots I I can I can unregister someone else's plug-in, but it'll de-register everything so all of their slots will just go Away it'd be great if you could say I want this plug-in and I want to get access to all the slots because I don't need this one I want everyone everything else to stay. We were just not there yet I don't know if we'll ever get there, but because that's kind of hard to do in react Performantly I guess it's a word Yeah, yeah it is today Questions Okay, cool. Well if anyone does have questions or whatever I'm around Please feel free to come up and tell me how crappy I did or whatever Thank you