GitLab Digital Experience, 19 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: 2021-02-19 Slippers UI: blog templating coding session

Description

In this video, Tyler Williams demonstrates a proposed workflow for using Storybook to implement Slippers UI components, along with ideas and proposals for how to integrate the results with other web properties.

We walk through the Figma file for blog components, a pull quote markup, data, and styles.

Related Figma file: https://www.figma.com/file/5mgvis6M0z3GN5kuEFADoW/CMS-%2F-Blog-Post?node-id=295%3A1453

Related MR:
https://gitlab.com/gitlab-com/marketing/inbound-marketing/slippers-ui/-/merge_requests/27

A

Hey everyone: uh it is friday february 19th, 2021, uh tyler williams. I am going to be doing a little bit of a coding session uh working on slippers design system for get lab digital experience. Team um purpose of this video is to sort of give primarily the rest of digital experience. Right now, um give folks an idea of like what I have in my head for how to use slippers, and uh you know, build things for about doculab.com um eventually.

A

I hope that this sort of uh goes a little more far-reaching so that either other gitlab team members or parts of the broader gitlab community can sort of get a sense of the direction or, at the very least, like my ideas on on how to use this, um and obviously I'm excited for some discussion and disagreement about what the best uh best practices are here, um but I feel pretty strongly about uh some of the stuff that I'm about to show.

A

So um this is the um we're looking at right now is the figma file from tina, uh and this is for the new blog template, um and this is this screen right now is there's a bunch of them here. um This is the blocks, uh so these are sort of the individual. um You know what in many ways like, I consider them components. I think we are not fully uh there on like what our nomenclature is for what a component is versus elements.

A

You know um molecules atoms, all that sort of stuff or the very least, I'm not clear, so um you know take take it with a grain salt when I say component, I'm really just thinking about like discrete blocks of code, I'm going to write in view, so um I want to work on this pull quote.

A

Let me show you what we got going on so so this is the the design itself right and we are going to um see it in figma and eventually it's going to end up living in uh living in storybook, which is what we're looking at there. So um so yeah, let's, let's hop right in um ignore the screen you're looking at right now, because it is not uh useful um so yeah talking about this pull quote. So this is a new component and I'm gonna pop into slippers close.

A

My work notes file there, and so this is the slippers repo and so um here's how I'm starting um so I can. Actually I don't need the design up right now, so I can go back into the storybook repository.

A

uh I start with a story and I'm gonna drop this into components, uh although we can kind of I've like I have some folder structure here. I don't feel strongly about it. I almost kind of want to pull that out of the folder structure, but um maybe in a different video, we'll talk more about that or in a different conversation, so for now um stories. So each story file uh right now we're using the js stories we're not doing the mdx for some for these.

A

Yet, although we could- um or at least I'm not on my branch, um so honestly, here's what I do is I, like I uh copy paste and then in components I just named another one. So we're going to call this slp blog poll quotes.

A

I'm actually you know I'm just going to call this a poll quote because I have a feeling that is going to be used outside of just the blog. I don't know yet for sure so yeah.stories.js, I literally just paste the other story in here, give it a little format there um and then so. This so you'll already see. So um before I even really change anything. The first thing I do is I change if you change the title, uh so this is in the default export, and so I call it components.

A

It was a poll quote. So if you change the title, you'll actually see in storybook it pops open on the left here. So now that's pull quote. This now looks like um I had an author avatar somewhere.

A

I don't know where it went strange.

A

A

Blog author avatar.

A

Okay, we'll come back to that later. I wonder if it got all uh messed up in the live reloading here. I'm just gonna reload this page yeah, author avatar. So this is the story for the author avatar and, as you can see, it's the same thing in this pull quote and in the left-hand panel is where I'm kind of clicking around there.

A

um So now I can actually start changing things. um So the first thing I'm going to do is I'm going to import something differently, so I'll import. The component, which I do which doesn't yet exist so I'll trigger an error here, which is nice to do so that I can confirm that the what I end up doing stops the error right. um So we'll call this slp pull quote and then we'll end up with that in the file name as well. Slp, pull quote dot view okay and then we'll get this error, which is excellent.

A

Exactly what I wanted now we can go to components and we can create sorry. My dog is playing with his squeaky toy slp, pull quote dot view. Now we've got a view file we'll still get an error because we don't have anything in it. It's a blank file, but it's a different error so again just seeing the progress as we go through there, um so we'll start with a template, uh and this is so this is a poll quote: let's see what we got.

A

So for this, my guess is that we'll probably have we'll probably have like it looks like we've got a some visual decorator element there, the quote itself and then a source, so I'm gonna go ahead and wrap this in. Oh, you know, there's an html element for this. Isn't there a black quote, html element trying to be semantic oops. I just watched my screen by accident. Okay block quote tag quoted from another source: perfect: let's do it so one of the great things about working this way is.

A

We can be really really good about having appropriate semantics.

A

I don't have my auto completion tag enabled in this project. I think um okay, so we got a block quote and then here.

A

Okay, let's see if they've got a, I want to grab like a full example.

A

Oh, this is fine. Okay, I've like used this one before and I feel like they sometimes come with footers. But that's that's plenty. Fine! uh I wonder if the block quote site tag, block quote site.

A

It's in mdn block quote mdn. There's like a nicer full example that I like to refer back to that. I just got like a block but yeah. This is what I wanted: okay, excellent, okay, so block quote and then we'll have a p tag which will have some content here, call that quotes and then we'll have a citation site and it looks like we've got in the figma files, says: source.

A

Site and then how does the site work so block quote itself takes a citation.

A

We'll probably turn this into a bound variable, so it'll be like site, and it's like citation call that and then.

A

Interesting: okay,.

A

I'm not sure I would have assumed that the citation element has the ability to like specify the citation okay, so you just wrap an anchor link with the site and we put the site up in the block thing, so it's not exactly as intuitive as I would have expected, but we'll use the citation, as the href attribute attribute format document like to do some formatting. As I go so cool.

A

This will be basically the semantics here right is: we've got um oh, and you know I'm going to want an image, for this quote: it'll, probably end up being an svg, I'm guessing yeah, I'm going to leave it for now, because what I'll probably do is pull this as an svg um into its own thing, but we'll come back when we're kind of doing the styling. This is really just the markup and then we'll talk about wiring up the data um but love it. That looks great, I think that's it yeah.

A

We got the quote itself and then we'll have a citation, cool, excellent and then so these things here in view we've got a couple things going on. So when you're in line in the markup, um you can use the double brackets uh for data and this when it's not specified, it just assumes that you're talking about like a prop or a computed value, um so uh we'll want to define that as a prop same thing.

A

So these these attributes- you can do the um this call in short, is shorthand for v bind which binds with view data driven stuff. um So what we'll end up doing is we'll have citation which again we can probably just make it a prop. So let's make a little script block export default.

A

Props uh I like to do it alphabetically, so we'll do citation.

A

uh The type is it'll, be a string.

A

It is not required um because I can see how, in many places, we like wouldn't have an actual link to cite it by um okay. So we'll probably need to do some conditional stuff on this anchor link, but that's fine, we'll get to that um up. Next is the quotes, uh which is also going to be a string.

A

uh This will be required required. True and usually I've had it before um uh with required props. In view um I'd like once, I had a linter that would complain if I didn't provide a default value. So that's what I'm doing here. Okay, there we go nice little formatting cool here. It is um super, exciting and we'll get to some of this other stuff we'll get to like yeah touching it up as we go, but now we actually have a thing, and so, if we go back into storybook, we should have.

A

Oh that's what I do. I'm going to name this as well. We need the name because of how we export things. I should grab a linter or set up a linter to warn people if they don't add names. So this the name of this will be slp poll quote there. We go format again: excellent, okay and then so here back in the stories slp pull quotes. So this error now is coming from um just the copy paste stuff.

A

So I'll change this. What we're doing here is we're setting up so we've imported this file into our stories. So stories are in the stories folder under stories, components and then we've got the components, view files up. So if you go up to directories, get to components, grab the pull quote, we get this and then in our template. We're using this in the story this this comes as like conventional from storybook itself, um and then you know we give it so here's what we do.

A

We tell it: okay, hey the components that you have available are slp pull quote we're gonna, define props, which basically takes arc types and I'll show you where that comes into play, but props become the keys of the arc types that we pass in and then we have a template which would be like how you would write it in, like the kebab case of vue being converted to um yeah kebab case. So you, like v, bind the props which we get from. This, um don't worry!

A

If none of that, if, like that's a little murky, you can really just copy and paste this and like it will start to make sense as you play around with stuff and like when you get to customizing things cool so up. Next, we have this default. So that's where, if you look on the left, pull quote default is literally just coming from the fact that we've named this constant default.

A

If I were to change it to like something else, I have to change it there too, because we refer to it, but now we've got something else right and I've caused some weirdness going on with it. But we've got something else, so I'm going to change it back to default.

A

I like default as a default, and then we bind the template to an empty object and that basically gives us access to what's going on here and then here are the args we just grab. We can basically say: okay, like I know what the props are.

A

So we write up our example, so we have a citation which in this case, so here's what I'm going to start with, because this will generally be like an href right value, um and you know maybe now that I'm saying this out loud, I'm actually going to change this to this prop name to href, because that's what it's going to be rendered and that's the attribute that'll be rendered out here as and it will be the citation attribute in the block quote but like I feel, like that's less commonly used than href, and I think that, like the idea here is like it's linked to something.

A

So I want to be like extremely clear when people are using it. So let's call href and we'll do the octathorp um as a good placeholder uh and talk to thorp is just my uh pretentious way of saying hashtag um and then we gotta quote and then I'll just grab. The quote from here go cool.

A

um I've run into this before when I've done like pull quote and block quote styling, where um you know it's a conversation of you know what I'm just. I I've had this conversation where it's like. Do we force people to include double quotes to include their quotations um in the past, I've kind of said yes, but it does get a little weird, because either people like forget to do it and then you don't have them um or like. Sometimes, if you're doing like a handful of layers of interpolation, it just becomes a hassle right.

A

So so what I'm going to do now is so I took out the I took them out from the data here and in my er here. Let me show you what's going on too um so in poll quote: template hey look at that. We got this value and this href will go to the octothorpe, which is which will bring us to this. If I were to do that manually, that's what kind of what you would see it's interesting.

A

I wonder if that must have something to do with the routing that it's bringing me to this iframe, but um one way or another. uh This link is linked up and you can see in the bottom. You can actually see the html.

A

This is going to be really important because so um I'm building everything in view, and I think that we should, even when we are not going to like end up applying everything as vue.js components, right like the this component, isn't going to get directly imported into the blog, but it gives us when we use it in storybook. It makes it super portable through storybook, eventually we're going to look into using vue.js as like a server-side rendering templating engine, and so like it's good to start here and then.

A

Finally, when we do this, um we get this html, which is like this is in itself super portable. So what I'll probably end up doing is taking this right and putting it in like an erb template for the blog, and so we can. You know eventually it'll be a little bit more tied together right now, we've got a little bit of overhead of some manual work.

A

We need to work on and do, um but at least this gives us a really good example of, like hey like here, is the markup for doing a pull quote right in our system, and we can be really like explicit about how that renders out. um We also get like all the cool like accessibility, stuff, um that's built in, and you can see here's the controls. So um you know, if I wanted to so this. I hopefully is coming kind of coming together over on the right side.

A

These args here are telling controls to do something so like this is coming from the control panel. It's dynamically bound right, um I think that's pretty cool. Thank you, javi for setting that up um so yeah. Here we are. What was I doing? Oh, I was changing I've locked my screen again. I was changing this so that pull quotes will always have quotation marks wrapped around them.

A

We're going to hard code that and all we're ever gonna ask people to do- is to drop in their.

A

Drop in there cool drop in their text, and I pause there because so the live reloading is pretty good, but not every not everything re-renders as expected.

A

um So like these quotation marks, I expected them to be there when I made this change and if I like, pull out the last one if we get the change up in the canvas, but we don't see it down in this control block, but if I refresh we do see the change so just something to watch out, for I think it's probably a matter of just like some configuration, or maybe some of these plugins like need to you know, file an issue or maybe they just will never do exactly what we want and that's fine cool, um so yeah here we are, I think, that's the markup right yeah, that's the markup.

A

um So the next thing that I do in here um is: I was talking about tina. I like try and find what so. um This is another piece that I expect will change in our process.

A

I'm just kind of like pushing forward on this, because I want to complete the blog templating task and I'm hoping that this is a process that people can like that. We can chat about asynchronously but anyways. I was talking to tina about like finding what slippers components are making each make making each one work, and I don't see, I don't think this one is connected to any assets, local components, blog posts, slippers, foundations,.

A

I'm still a little new to figma, but as far as I can tell, I don't think that this is actually using. I don't see any components, so I'm just going to keep moving forward. If I did see you know like if there was the slippers foundations, if we had one of these buttons in here, I would have gone back to refer to the slippers foundations file to build out what I'm about to do with our styling.

A

But for now I'm just going to kind of again move forward to to get the ball rolling, so cool. What do we got? Okay, but we do have okay, here's what we do have, and so this is going to be. I've got a couple of minutes left on what I want to do here. I want to show you so we've got this block quote.

A

We could do a style block in view it'll work. um Let's avoid that when we can and I'll do another video that talks about why and how- and instead I think the thing to do here is that we set up class. So this will be slp, pull quote and I'll. Show you why? So now, so I've set up this class on the block quote and if I refresh the html you'll see it show up here. So here's what this does by not using the scope style blocks.

A

We reduce our dependency on javascript and basically like if we use the view components to mostly define templating, perhaps a little bit of behavior. Basically, if we think of these view, components as how we build out storybook and make storybook easy to build, we will give ourselves easy, like low friction ways to include the appropriate classes into about.getlab.com or any other property, and so now that I have slp pull quote here's the next thing that I'll do I go into styles in the project I go into styles.css we'll probably end up.

A

I think this is going to end up getting pretty big, so we'll probably want to adjust it over time. But here now I can say: cool I've got slp pull quotes and this is in post css. So that's why we get to use the fancy like apply stuff. I don't have a good syntax highlighter, so all those red lines are, um I haven't, found a post, csx post css um plugin that, like lets me get rid of those errors. I've looked I've looked a little bit and it's just not there.

A

So if anyone knows let me know um so here we will apply so this. This is where it starts to get really cool right. Things start really coming together here, because this I won't talk about the the quote symbol right now, I'll do that different video, this the text color, is, in this gray scale right, grayscale 333, which is configured again. Thank you javi for configuring, this in our tailwind config file.

A

So in tailwind we have colors, we have grayscale and then is.

A

333 is the okay, so I don't actually see it here interesting. um I wonder what the label is on this.

A

Grayscale interesting, um okay! Well, I will do I'm gonna name. This 333.

A

Because I don't know, what's going on there, it doesn't match up. I expected to see like one of these named ones match up specifically with it, but I don't see that and that's fine um we're still like everything is work in progress right so anyway. So if I define this as 333 and then if I do- and I think it's just because the hex code- one two three cool so now- that's in our and post css has to spin up again, but now that's in here and now I can say, apply slp.

A

A

Grayscale 333 does that do what I want it to do?

A

It does check it out, so this changed so here's what's cool slp quote we define in our post css file right we're using that here for this block quote it's configured in tailwind, so we have all our utilities in one place and we can maintain a ton of consistency, and this at this slp denominator here comes from the prefix we added in the tailwind config and this class name itself is just if you were to like look up in tailwind. What text color right. um So these are like the default values that come with tailwind.

A

They won't work for us because for colors we're just writing our own. If we use the extended keyword, we would get all of these two, but I think it makes sense um like having made the right call by not using extends, because we have to build this library up ourselves, uh which is smart. It'll have us, make good decisions, but again so you know. Basically, I said I follow the same pattern drop slp in front of all of the utility styles.

A

That's how we're sort of prefixing things and then use. You know this text dash gray, but of course we have different keys here. We have gray scale and then dash 333, and then I can do that for all all of these other styles that are going on here, you know having it uh italicized the sizing itself, um gotta find the font size on this. What is this uh 24, so I can go and find in the font size, whatever rem value is going to map closely to 24.

A

What? If I can change the units here? I don't yet. No! Oh! I will not do this. Don't worry about that. I'm not gonna mess with anything anyways um yeah. I think this is super exciting and then uh we can basically use like again. We can use storybook as like this playground, where we define these components. We use view as like, basically, a templating engine.

A

The other thing, too is: it, gives us a really good sense, like we get the ability to basically build out like a true dependency graph on these things, um and then we can make smart decisions as we're making modifications, um and we don't have to worry about sort of like some of the like collision like the challenges of working on this stuff uh on the existing repo, which can, I know, can be like frustrating to develop on rapidly, and we can piece these things together too.

A

So I'll show you one final thing and then I'll make other videos too, but I want to keep this reasonably scoped, um so in the so I have template stories where I'm just pulling in here. I'll close this and the template stories, I'm just pulling in this blog component. This blog component is a template in and of itself. This is a full like view like basically like a page, and you can see that's showing up here, so I can pull this out right and so that's gone, and now I could also say import.

A

Slp pull quotes from components. Slp poll quotes dot view. We have to register it with our component here.

A

Oh and then we have to use it and then so it's slp pull quotes.

A

The quote is something someone said one time: I'm not dynamically binding it because I literally just want to pass in the string to demonstrate it here, but but yeah and then so we can. You know and here's the cool thing, so we can like mix and match change the order of everything and live reloads. So what I'm going to end up doing is building out these blocks.

A

That tina has designed and defined, and then I will be able to make these pressure test templates and I can do all the fun stuff in storybook 2 for different viewports right yeah. So that's my idea um again. I know that there's going to be some uh speed bumps on along the way. This doesn't 100 solve what we'll do with middleman and how we'll actually pull this into about.getlab.com, um but because it gives us this html, which is like robust and like portable right.

A

I think that we can make some make some smart decisions uh on how to make things easy for us to begin and eventually we'll move forward on being able to. You know take a template like this, take a view based template and have it statically build so that we can stay. You know true to the static site generator that we know and love um and have like a nicer developer experience so yeah um I'll. Probably I don't know I I got a bunch to do here.

A

So I imagine throughout today I'll do a couple more videos or maybe next week or something I'd go a little bit slower when I make the video rather than what I'm just working- and I know we want to get this out the door, so maybe I'll come back at the end of the sprint uh once this thing is wrapped and do more recaps on it. Cool awesome, thanks for watching.