Transcript

00:02 Hey everybody. Okay, here we
00:09 go. Let's get the chat up. I think the chat's going. Oh, here comes some viewers.
00:22 Excellent. Just let me know everyone in the uh audio and visuals are good as usual.
00:32 Okay. In the chat.
00:37 Hello. Is it connected? What did I post the Yeah, post the YouTube. Oh, there we go. Excellent. Now I get my chat.
00:47 Cool. Wonder if it's delayed. I don't know. Interesting. I should measure at some point how the delay is because
00:54 sometimes it feels like the chat's quite delayed.
00:57 Um anyway, so there's been uh yeah, a lot of really cool releases. Um some of the
01:07 new stacks that have been released I don't have, so I can't necessarily show them off, but uh we can talk about them
01:14 and uh you can watch the cool videos that they have for them and we can look at the demos and stuff like that. Um and then yeah, we'll talk about the cool
01:22 stuff that I released that I can definitely show off, right? And if we have some time at the end, I've started some cool stuff with a foundation update
01:31 last night. It's pretty simple, but I think it has some cool style implications uh for us all going forward. So, um yeah, it's going to be
01:38 fun. So, uh let's dive on in. Okay, let's see.
01:51 I guess maybe we'll start off with um some of the cool things that got
01:57 shipped that are not mine. Let's start off. Let's start off with that. Let's share some love to the others in the community.
02:09 Um I'm just going to search for Hold on.
02:12 It was It was Chris Powers actually. I think it's pretty recent. Chris
02:20 Chris Chris. Okay, obviously it's not on this page. I posted quite a few things. Oh,
02:28 quick off. Uh Michelangelo has 30% off multi themes. You didn't see that uh for the spring. Not sure when it's over, but
02:35 30% off. He's got some nice stuff. And actually, one of his stacks actually here, now that I I have his account, let's go into his posts because he
02:42 recently released um well, I guess it was a few weeks ago, but I don't think I've talked about it much. And uh it's Hype Titles version
02:49 two. Um super cool stack. Works awesome in Foundation. Um works great. Obviously it works in any theme, but uh yeah, it's
02:57 just got a bunch of really cool um animations. So check that out. Um I'm not sure which does he say what are the
03:06 new animations here? I know. I think there's three or four different new ones that you should. Let's go to the
03:13 end. So anyway, there there's just a bunch of really slick kind of 3D style animations that uh yeah are pretty cool.
03:22 So check those out. Hype titles on multi- themes.com and he's got a a 30% off sale going on right now. So no-brainer. Um if
03:31 you did own the the previous version, you do get a discount.
03:37 Um, I don't know if it's a code or Oh, he has Well, he has a 20% off discount here, but the 30% off discount is better for the spring sale.
03:48 Um, but it looks like I'm not sure how the upgrade goes. Um, if you guys have purchased from him, hopefully you know
03:55 how the upgrade goes. Is it like my system where it just automatically does?
03:58 I don't even Does he use cart loom? I don't know. Um, not 100% sure. Uh, that's actually a good question. Does he use cart loom? I don't know. Let's see.
04:06 What does he use? Uh, that does not look like cart loom. What is this? No clue what that is, but Oh, fat
04:15 free cart pro. Okay, fat free cart. That's what he uses. Very interesting. Never heard of
04:22 that one. Okay. Um, so hype titles number one. Sorry I I don't have the stack to play around with or show you,
04:29 but uh yeah, it's pretty cool. Um, he does a lot of really cool animation stuff. Um, and he builds them, I
04:36 believe, with Hype actually, which I haven't used for years, but I know it does some really cool animation stuff, and you can export it for your own website. So, um, there we
04:44 go. Next up, um, in the Oh. Oh, he posted
04:52 announcements. Thanks, Chris.Oop. There we go. Nice. Okay.
04:58 Um, so Scott Williams. So, Chris posted the announcement, but this is a stack from Scott Williams, okay? And it is a
05:06 two-factor authentication stack. Um, I watched the video. I got a live demo of it at the hangout on Friday, which small
05:13 plug, if you don't join the hangouts on Fridays, I I recognize a lot of people in the chat. You guys already join those hangouts, but anyone who hasn't joined
05:20 in on the chat yet, make sure you check out those hangouts on Fridays. They're awesome. Okay? uh definitely the best thing going on um in the community on a
05:29 weekly basis. And I think he has oh here this is the link to the product
05:36 page. Um let me see if I can get a is there a demo on here? I don't know if there's a demo. Well, we we'll quickly talk about what this is. Okay, so what
05:45 is this stack? It is two-factor authentication for page safe. So, page safe, if you don't know, is my one of my
05:52 stacks that just adds really simple authentication and password login for your web pages. It's super simple stack.
06:02 I think one of the best page locking authentication stacks out there if you need its feature set. It's awesome.
06:09 Okay. Um, Scott needed had a customer that needed two-factor authentication and um, I did I did have it planned for
06:17 version two of Page Safe, but Scott needed it now. So, he built his own. So, if you want to have two-factor authentication with Page Safe, boom,
06:26 here you go. And basically what it does um when you log into page safe um here
06:33 let's go ahead and well so you log into page safe and when instead of when you log into page safe instead of getting the uh web page basically what you'll do
06:42 is you'll get a page with your two-factor authentication okay and then no matter if you're using Google authenticator or one password even okay
06:50 um those password codes can get saved and then you can populate directly into there I use one password works fluidly
06:57 with that. Um, and then basically once you put in the correct six sixdigit code from your two-factor authentication app, again, either Google authenticator or
07:06 one password um or even uh Apple actually Apple's passcodes or their new passwords app in was it shipped in
07:15 Sequoia or the previous OS? I don't remember. But it also supports onetime passcodes as well. Um, so you could probably use that with it as well. And
07:23 boom, once you put once you put in the uh two-factor authentication code and again those codes are revolving like every, you know, 30 seconds or something like that. Um, and yeah, works great.
07:33 Uh, pretty cool. Um, it's awesome that it works with existing page safe stack.
07:38 Um, it's super simple to set up. So, make sure you check that out.
07:44 Okay. Um, so yeah. And Chris did a video. Watch this video. Actually, here if we go ahead and play it here. I'm going to fast forward to uh let's go.
07:55 We'll go full screen on this. We're going to we're going to fast forward to let's see where where he shows it off.
08:03 This is the setup. Oh, here. Here it here it goes. All right. So, right around here. Here I'm on my two factor authentication. Enable page safe page.
08:11 Okay. So, here it's on the page and he's going to type in the passcode.
08:19 Right. And it unlocks. And then boom.
08:22 Instead of getting the web page, you now get the two-factor authentication box. Um, and then it's going to uh go
08:29 ahead. I think Chris in this video is using one password to authenticate.
08:35 And yep, he's uses one password. And he copies the two-factor authentication code, pastes it in there. Not sure why
08:43 you didn't use the browser extension, Chris, because that makes it a little bit easier. Chris, you have a terrible password on this demo. Absolutely terrible. Oh, let's just fast forward.
08:54 We don't need to have learn how to create those passcodes inside page safe.
09:03 You just click and copy and he pastes it in there. Your AI talks too slow, Chris.
09:17 There we go. And now he's in. So there we go. Um, so yep. So again, log into page safe. Um, if you have the
09:24 two-factor uh authentication stack on the page, it will then instead of showing you the page, it'll then authenticate with that. So pretty cool.
09:31 Um, I like it. Very slick. Um, check that out again. Uh, yeah, check out the announcements, Chris. Uh, it's the post from Chris and
09:40 the link to the product page is right there. Okay. Pretty slick. Good job, Scott and
09:53 Chris. Okay. Um, that was all I had uh for announcements for third party stuff.
10:02 Uh, I think that was it. Uh, oh, Josh is having a training sale. If you missed that, I'm not sure if it's still going on. It said March.
10:09 We're still in March. I don't know.
10:11 Check that out if uh if you want some trainings from Master Josh. Not sure if he's here. Um, check that out. And then
10:19 we went to Pi. Okay. So, um, we're going to talk about three stacks today. Um, we're going to be talking about the new
10:27 PDF stacks and then we're going to be talking about feeds API. Okay? And we'll kind of go into depth. Um, if you have
10:35 any questions, uh, please put those in the chat as I'm going along and we'll answer them as we go. Okay. Um, the PDF
10:42 stacks will be pretty quick. I'll be honest. They're super easy to implement and, um, yeah, it should go pretty quick there. Okay. Um, just for fun, we're going to be using STAX app. Okay.
10:54 Um, yeah, for this build, uh, let me go ahead and there there's a couple little quirks in this beta. Let me just go ahead and, uh, do this here so we can kind of voila. Okay.
11:05 Um, let's do I'm I'm going to start off with PDF Pro and then we'll go back since I already have it on the page. We'll go
11:13 back and implement it with um, PDF embed and you'll see the difference. um their implementations are identical minus PDF
11:22 Pro just has more settings. Okay, so uh okay, here we go. So um in PDF
11:31 Pro, how do you get the STAX app? Um you can't yet. Um so right now it's a privilege few people have it. Um and it
11:40 will be a new beta should be released to those that are attending the summit.
11:44 Okay. Um, my conference is coming up in just about three weeks. Um, and yeah, it's going to be a lot of fun. So, two
11:51 and a half weeks, I think it is. Um, fun times. We're coming down to the end. Um, I'm going to be releasing um, the schedule hopefully by the end of this
11:59 week, at least a draft to the speakers and then I'll probably release that schedule to everybody else next week once I get the thumbs up and whatnot.
12:05 Okay. So, um, yeah. Um Isaiah's giving a couple talks and he's going to be ch talking about stacks app um the current
12:13 status and should be releasing hopefully a public beta. Um I currently have a beta version 30. Okay, beta 30. Um so
12:22 yeah, a lot's changed since then. Um but anyway, uh enough about that. Let's talk about PDF Pro for right now. Hey, PDF Pro when you add it to the page here.
12:31 Actually, just for fun, we'll go ahead and we'll add a new one to the page so you can see um everything here. Just search for PDF. PDF Pro.
12:42 Okay. Um so, implementing PDF Pro, super easy. Okay. U obviously there's a link stack um or there's a link setting,
12:50 sorry. Um and then you would either paste in the link to your your PDF. Um, right now resources are disabled in in STAX app, but uh you'll be able to
12:59 eventually add a PDF into that and then you can just type in the name of your PDF and it'll filter out and you can click on it. Okay. Um, right here I
13:07 could just type stuff out in the in the open quickly and if that was my PDF, it's not right. But I you could click enter and voila, you would then get that
13:16 uh linked super easy. Like I uh it's a really great way for uh for stacks. The new link engine is really cool. Okay.
13:23 Um, now if we are using Rapid Weaver, um, now that we're in the live, let's just go ahead and show you really quick.
13:29 Um, because I know this this comes up, uh, a lot with users. Okay. Uh, hopefully let's should have had this
13:37 preloaded. I think this page already has PDF embed on it. So,
13:43 um, basically, um, in PDF, um, in link settings, I this is the PDF embed sack,
13:51 but it's the same thing. Okay. Um, if you notice, I added my PDF to my resources. Okay. Um, you don't have to
13:59 do that. You can actually upload it to your server and then put it put just like we did before, paste the URL into here. Okay. However, I know a lot of people are going to go into here and go
14:08 to resources and then find their PDF right somewhere around here. Oh, there it is. Right. They're
14:16 going to click that and they're going to think, boom, I'm done. Do not do that.
14:20 That will not work. Okay. It's just the way that the settings are done in Rapid Weaver. It's not going to work. Okay.
14:27 Um, so what we need to do is you need to go to your resources, find your PDF, rightclick, say copy
14:34 URL, and then what you're going to do here is instead of you're going to go to URL, and then you're going to paste that URL into the setting. Okay? Now, it will
14:42 work once you publish. I've already had two people um not publish, and they're like, "It's not working." Okay? You need to publish in order for it to work.
14:50 Okay? U because Riot Weaver has to put this the the um PDF on your server because that's how it works. Okay. Um so yeah, there we go.
15:02 Um all right, that's how to get things working in Rapid Weaver. Now we're going to go back to um stacks.
15:09 Okay, so uh yeah, now once we got our uh URL loaded, um I'm just going to stick with the default, which is just a a
15:17 sample PDF that I have um stored on my server. Okay. Um, then we define our height, which is the size of our PDF
15:25 viewer. Okay. Now, here I'm going to go and preview this. Oops. What happened
15:33 here? Oh, did I I broke it. One second. There we go. Okay.
15:45 So, let's talk about the height of um this. And I've revamped the height settings from the old version. The old
15:53 version allowed you to provide just a p size in pixels, right? And that's not great. Um it worked because you could provide small, medium, and large sizing,
16:01 but I think um basing the size based on the viewport bases basically the size of the browser is definitely better. Okay.
16:09 Um, so here by default I think these default settings are probably what most people are going to be fine with. Okay,
16:16 essentially I have it set to 90% on all sizes. Okay, and what that means is it's 90% height of the browser
16:25 window. Now, if you wanted to be the height of the browser window, you would set this to be 100.
16:31 Okay, but I kind of like to see the entire PDF viewer within the context of
16:37 my page, right? So, I think 90 is a nice fit. Um, but adjust as you see fit.
16:43 Okay. And again, you can have different sizes on small, medium, and large. And then if you don't like that viewport height uh calculation, you can do uh
16:51 pixels, which is what the old version did. And then we also have percentage height, which basically will make it um the percentage of the parent container
16:58 it's within. kind of a more advanced option, but if you have some advanced uh layout options, that could be the best way to do it. But I think most time, most of the time, people are going to
17:07 want to use this viewport height percentage. Okay. Um, next up is you can either uh show the toolbar by default
17:15 and uh or we can hide that. Obviously, if you see if we turn that off, all those settings are gone. Uh, and then the toolbar is just completely gone and we have just our PDF viewer. Okay.
17:27 Um, we can also customize the colors.
17:30 Okay. Um, now I I I'll admit I reluctantly added this a little bit because
17:37 um yeah, I I kind I kind of think the default colors are nice. Okay. Um, now this new version has light mode and dark
17:45 mode. So, if I actually go into um actually I haven't tested this in preview. Uh, I've tested it in the browser but not in preview, but I think it should work. So, if I go into my
17:54 system preferences and I change my mode to be light, voila, we'll see that, excuse me, we'll see that the PDF viewer
18:01 completely changes themes. And because I have set my device to be light mode, I now get a light mode browser
18:12 embed. Um, back to dark mode because I can't stand being in light mode. Okay. Excuse me.
18:22 Um, so anyway, custom colors. Let's go ahead and uh let's play with something here. Just the body color. Uh, we'll just pick something that's maybe a
18:30 little obnoxious. So there I have a red body color. As you see, you can customize it to be whatever you like. Okay. Uh, we we have Chris in the house.
18:37 So maybe we should do like I don't know.
18:39 How do we get orange? Whatever. Here. Orange. Oh my goodness. Okay. We're gonna we're going
18:48 to make the one of the world's ugliest PDF viewers right now. Sorry, Chris. No offense. Um, and then uh here toolbar background. So, we can go ahead and
18:55 choose the toolbar background. U maybe we'll do like a purple. OMG. Okay.
19:07 Okay. Um, at least keep them white. I don't know. But again, you have free range to make it the colors that you
19:14 want. Okay. Um, so anyway, you have the power. Okay, I prefer the default colors. Um, I think they look quite nice, but um, yeah. Anyway, there we go.
19:26 Chris is going that that is going to be Chris PDF viewer of choice. Um, anyway, okay. Next up is so once we have the
19:34 toolbar enabled, you'll notice that there are a bunch of tools now that we can enable and disable. This is another huge feature request. People didn't want
19:42 to have, let's say, print or download options. They want to be able to customize that. Okay. So now, if you don't want a print button, turn that off. You don't want the download button,
19:50 turn that off. Okay. Uh and then all these buttons down here, you have full control over turning on and off all of these. Okay. Now, another big feature is
20:08 tool. Now, um some of these tools don't work the best inside preview. So, I'm going to preview this in the browser.
20:15 Okay. Um, actually it's the stamp tool.
20:17 Um, doesn't doesn't work too great because it actually requires that you uh And where is my where is my
20:26 browser? Preview, please. What happened? Preview. There it goes. Interesting. If you're in Okay, I
20:36 might have just found a bug. So, if I go into preview and then I hit command P to preview external. Oh, now it worked.
20:42 Whatever. Okay.
20:45 Um, so another thing about the PDF viewer, just a general tour. Um, obviously over here, um, you know, we have the the left pane where we can see
20:54 thumbnails of all the pages. Okay. Um, we can search the page. So we can search for, you know, PDF inside the page and
21:01 it highlights all the matches. Um, which is cool. Okay. So it's a nice search, uh, a much improved search from the last version. Uh, we can then navigate
21:10 through the pages with this or typing in the page number. We have uh zoom controls. So if you want, you know, various uh let's say I want like, you
21:17 know, fit the page width or actual size or automatic zoom or, you know, whatever. Okay. So there's all kinds of
21:24 zoom levels. And then next up, let's go into uh let's see the view settings. I'm going to skip these tools. We're going to save those cool things for last.
21:31 Okay. Um some cool things are you can like change the spread. So if you want to see multiple pages at once, right? So that there's some view and layout options. There's also horizontal
21:40 scrolling. Not sure h how or why that makes sense, but h if you like it. Okay.
21:46 Uh you do you. Okay. Um then there's the cool new annotation tools. Okay. Um so
21:55 let's first off let's go through the highlight tool. So I'm going to click on the highlight tool and um let's do green. Okay. U now I can go ahead and uh
22:03 select there. There's two different ways. You'll notice that if I have this, I can uh I can select the text and then
22:10 it will highlight the text. Okay. But I can also just kind of like uh if I hover over something, I can be like, "Oh, I want to highlight Oh, wait. Uh if you if
22:19 you get it just right, you can just highlight stuff on the page and kind of use it as a marker." Okay. Um you can then change the color of that, you know, to be whatever you want. You can delete
22:28 that. Okay. Um so nice little tool. You can change the thickness and all kinds of stuff. Okay. Um, now then there's a
22:37 uh text tool. Okay. So, you can go ahead and type your text. Okay. Hello world. Um, we can
22:47 adjust the size of that to be whatever we want. Right. And change the color of it as well.
22:53 Okay. Since we're doing orangey things today, we'll go for go for that. Right.
23:08 know a little um arrows or whatever. You can adjust the thickness and also use it as like a signature. Well signature you probably want thinner. Oh you can adjust
23:16 it dynamically. Look at that. Okay. Um and then we have a stamp tool. Okay.
23:22 Which allows us to embed an image. So um I can go here. I have an image there. We just go ahead and click on that one. Uh and then I can put this and I can resize
23:30 it anywhere I want. and I can put it wherever I want on the page. Okay. Kind of cool.
23:36 Um, what's the use case for a lot of this stuff? Um, I don't know. It'll be interesting to see. Um, especially the stamp tool. I don't know. Maybe you want
23:44 to have people to do that. Now, once I've annotated all this, I think the signature is kind of interesting, right?
23:50 And maybe some of the highlight stuff where you can take notes and whatnot.
23:53 But how is this interesting? So, I I upload this or I, you know, I add all this to the PDF. Then what? Okay. So,
24:02 uh, well, we can print it, okay, if we wanted. Okay, and it, as you see, generates a print. Uh, now I'm I don't have my color printer set up, so it
24:10 knows that this is black and white, but if I had my color printer set up, um, it would save it as color or print it as color. Okay? Or I can go ahead and just click the download button here. Okay?
24:21 And what we'll notice is it downloaded a PDF. And voila, here's the PDF um, with all my annotations on it.
24:30 So, that's pretty cool. Okay. Um, yeah, I think these annotation tools are are interesting. It'll be it'll be fun to see the various use cases. Um, I'm
24:39 working on a feature. Um, and I I'm not I cannot promise it, okay? Because I haven't been able to get it working yet.
24:46 But, um, it would be amazing if we if we could save these annotations like automatically up into the server like
24:54 uploaded that PDF instead of downloading it like uploading it. But um yeah, it's proven to be a challenge. Um so um I put
25:02 a lot of work into it already. Uh and I'm not giving up, but hopefully eventually we might be able to get that feature. Might. No promises. Okay. Um
25:09 but we got the download working with the annotations. Uh which is nice. Um and then maybe you can have a file upload utility so they can upload those changes
25:17 or something like that maybe. Right. But um anyway, it's nice that you can do all of this stuff all uh within the viewer. Okay.
25:30 Um, can you deep link? Can you link to pages that um, that is a great question, Danny. I
25:39 don't know the answer to that. I'll be honest. Um, can you I don't even know how you can link to pages within a PDF.
25:46 I'm not a I'm not a PDF wizard. Um, I'm a pretty much a uh I know how to generate a PDF from pages and and
25:54 whatnot, but I'm not sure how to link to pages. Um, so yeah, uh, I don't know if it works. Give it a go. Let me know. Um, I'm happy to add something if I need to.
26:05 Um, but I do not know if that will work. Okay. Do those print Oh. Oh, cool. Cool.
26:13 I saw the question. Do those tools print with the PDF? And the answer is yes.
26:16 Okay. or at least the the the tools themselves don't, but the annotations do, right?
26:22 Um, does PDF work seamlessly with Total CMS3? Um, it should. So, yeah. Um, if you have a PD, I'm assuming you mean you
26:31 you upload a PDF into Total CMS3 and you want it to display in here, should work.
26:36 If it doesn't, we'll make it work. That I can promise. Okay. Um, so there we go.
26:44 on tablet. Is it good uh is it good more choices played with on your Oh, yes. Uh, yep, David. So, yeah,
26:53 there there's slightly more there's definitely more options than we had in the last version. Okay. Um, so anyway, um, that is PDF Pro. Again, as you see,
27:02 it's a it's a really simple stack to implement. Um, there was a lot of challenges getting some of this stuff to work, but uh, yeah, we won't dive into
27:11 that. Okay. Um, so anyway, PDF embed, let's talk about that. Um, let's go ahead and I'll remove pro from the page.
27:18 Let's add PDF embed. And, um, setting it up is identical. Okay. Um, it just this the embed version just has less settings.
27:29 Now, you might be wondering, why did I decide to have two versions of the stack? Well, I I know people wanted to have a lot of these more granular
27:38 controls like changing the colors and customizing the toolbar. Um, and those weren't simple things to add. Um, so and
27:47 because it's such a niche product, I needed to to raise the price on on it.
27:53 However, not everyone needs those features. So, I thought adding a feature that was just the simple embed like we
28:10 Okay. Anyway, but I wanted to be able to, you know, people that just needed the simple features just have a more affordable option. So, um, that's why we
28:18 have PDF embed. Now, if you own PDF Pro, you don't need PDF embed. it. PDF embed does nothing that PDF Pro doesn't do.
28:27 Okay, so there we go. Okay. Um, how about turning on and off the tools on the PDF based on the user's login in total CMS3?
28:39 Uh you can uh so what you would do there Steve is you would uh have two PDFs
28:46 embed have have two PDF embed stacks on the page and then um based on the uh person's login you would show one or the other. That's how you would do that.
28:57 Steve, good question though. Challenged me for about five seconds. Okay.
29:05 Um, but that should totally work, Steve.
29:07 Sweet. Um, okay, cool. That's pretty much all with PDF embed. I went over every nook and cranny. Pretty simple stack to implement. I'm pretty happy
29:16 with it. I think it's nice. It'll be a a great one moving forward. It was It was a nice solid update to PDF embed. All right. Next up is Feeds API.
29:26 Now, sadly, um, Feeds API I I have to switch over to Rap Weaver. Um the well I
29:33 don't have to but it it doesn't work in preview yet in stacks. Um so um yeah,
29:40 we're working on that. Okay, but um let's go ahead. I'm going to dive into
29:47 um let's go into Rapid Weaver again or Stacks Classic as it is on my machine.
29:54 And where is my window? Apple Intelligence is
30:02 Hello. It's not working for me. I'm going to have to quit. Not sure what happened to Rapid Crasher as many people. Oh,
30:11 there it is. There's my window. All right, let's open up uh let's open up this one.
30:26 So, um, if you're not aware what feeds API is, okay, um, feeds API is a new stack. Uh, it's a new feeds add-on.
30:36 Let's just go to the product page really quick. Actually, there is no demo on on
30:45 the product page. Um, yeah, there is no demo. Um, we'll we'll see the demo.
30:52 um in a in a minute. Uh but it it I do have to say that it does um require feeds. Okay, so in order to use feeds API, you have to own the feeds stack.
31:05 Okay, so just a small disclaimer there.
31:07 Um yeah, it is an add-on for feeds. Even though it does show up as a new uh stack in the library, okay, um it does require that you have uh the feed stack. Okay.
31:19 Um, if you don't, you're not going to see any of these stacks inside Feeds API.
31:25 Okay, so there we go. So, what is Feeds API? Um, it allows
31:34 you to, uh, as you see, I have a couple feeds here. They're just CSV feeds. Um, now you can use any of the feeds, um,
31:42 that are available for feeds, right? It's kind of like saying stacks for stacks, right? We have feeds for feeds. Um anyway, um so it doesn't
31:51 matter what data source you use. Um you can turn it into a JSON API. Now I'm going to preview this page and what
31:58 we'll notice is um it doesn't produce a web page. What it does is it produces an
32:05 API, okay, an application programming interface and allows um you know people
32:12 that h that are in the know to access your data um
32:19 programmatically, right? Um if I preview this in the browser actually, we'll kind of see a nice a nicer representation than what we see inside preview. Okay.
32:29 Um yeah it's just a nice you know representation so we can see the raw data again um this is a w a this is data
32:37 format called JSON and it allows um easy access to data for many
32:46 different programming languages. Okay it's kind of like the standard for APIs at the moment um throughout the web um everything uses JSON for in
32:55 integrations. Now what are you going to use this integration for? Um, it could be whether or not you want to have um developers access. Maybe you have some
33:03 proprietary data that you want developer developers to be able to access. Maybe you want to integrate um some of your data with a service like active pieces
33:12 or Zapier and do some automations based on your data, right? Um you can do all of that because we have this standard
33:19 API interface for our data using feeds API. Okay.
33:26 Um, now let's go ahead and dive through some of the settings. Um, now I'm going to skip this API keys really quick.
33:33 Okay. And, uh, we're going to jump down to filtering and sorting. And the reason is because, um, these, if you've ever
33:41 used feeds, these settings are behave exactly the same as in feeds. You can sort the data, you can filter out the
33:49 data, and filter out by URLs. Okay. Um, what do I mean by that? Okay. So, um let's go back to that um or let's go
33:58 back to that preview. Okay. Um so, let's say I want to find uh because here I have a a
34:05 dynamic URL filter. Um if something contains let's do contains case insensitive and we're going to search
34:12 the title. Okay. Um so over here I can do um question mark title equals and let's find something with uh gate. Okay.
34:23 So we're find gate enter and there we go. As you see my I'm now filtering my API results dynamically um from the URL.
34:33 Okay. And again all those filter parameters behave exactly the same as they do in feeds. So um if you want curious on how that works, go ahead and
34:42 watch the feeds filtering and sorting video and it's behaves identical for feeds
34:49 API. Okay. Um, so right now what we're going to do is um I'm going to publish this. I actually I already think I have it online.
35:08 going to rep I am going to republish this page because I changed some of these options. Uh so we're going to go
35:18 publish. Woohoo. only only published four files. I'm lucky. Okay, we're gonna go to my sandbox site.
35:30 sandbox.joeworkman.neti. Okay, so I went to the browser and what you'll notice is it says access denied. Okay, and that's because I have um API keys are required.
35:42 Okay. And um essentially what this allows us to do is it allows us to say it's kind of like a API keys are used as
35:50 kind of like an authentication mechanism where you can give someone an API key.
35:54 Okay, which allows them grants them access to the API. So by default it it is
36:02 required, but if you don't if you want your API just to be open to the world, you can turn those off. Okay, but we're going to keep them on for right now. So, what I'm going to do is I'm going to go
36:10 ahead and pass um I'm going to pass it via the URL. Key equals 1 2 3 4 enter.
36:17 And there we go. Okay. So, I passed a key parameter to the URL and that allowed me access to the API.
36:27 Okay. Now, doing all this from the browser is not the best. Okay. If we're testing
36:35 APIs, the browser is not the best way to test your API. What is a great way to test our API, Joe? You might be asking.
36:42 Well, um, users that are watching this awesome stream, I'm going to use an app called Rapid API. Um, and lucky for you,
36:51 that app is now free. I've been using it for years. It used to be called Macpaw.
36:56 Um, and I paid a pretty penny for it, but now it's free for everybody to use.
37:04 Okay? and think of uh this rapid API as um kind of like a textbased browser to
37:12 be honest, right? Okay. So, we're going to go ahead and do https um
37:21 sandbox.joworkman.net. Okay. And I'm going to go ahead and just uh run that.
37:26 And as you see here, uh, just as we saw before, we get an access denied request because I didn't supply my API key.
37:35 Okay. So, just as we did in the browser, I'm going to go ahead and say key um equals. Now, here you go to URL
37:42 parameters, and you do key equals 1 2 3 4. Okay. And I'm going to run this again
37:49 with command R. And voila, it now granted me access. And you can see the URL up here where it added key equals 1
37:57 2 3 4. Now I can also then do our filters. Remember we added a title filter. So I can do title equals um and
38:05 let's do art. Okay. So the title has to contain the word art. And voila, there is the um results that we have um from my query. Okay.
38:17 Now, um, unless you have to, I don't recommend allowing API keys from the
38:25 URL. Okay, if we let's let's review the API key settings now that we kind of have a glimpse of what those are used
38:33 for. So, by default, um, this allow API key and URL is turned off. Okay. Now, when in that when that is turned off,
38:42 you cannot supply the API key via the URL. you have to do it a different way.
38:47 You have to do it with something called an HTTP header. Okay? And um it has to be if we look at the tool tip here.
38:56 Okay. Um it has to be the X API key HTTP header. So um you cannot add an
39:05 HTTP header with a browser which is why a tool such as Rapid API makes it nice.
39:11 So, what we're going to do is I'm going to go into this headers tab and I'm going to type x-appi key. Okay. And then I'm going to
39:18 add in my authentication method there. 1 2 3 4. Now, I'm going to turn that. I'm going to refresh that. And again, if we
39:26 go to our UR URL parameters, I'm actually here. I'll remove key. So, it's not even there. Even though I unchecked it, it's now gone. So, it will never
39:34 even possibly be sent. Um, now if I turn off this header, okay, and refresh, you'll see that we get an access denied.
39:41 Okay, but if I turn that header on and run my query, you notice now it works.
39:47 Okay, so um this um what's nice about this, okay, is this API key information
39:54 is sent as hidden information along with the request. It's not added to the URL, okay? So if some sort of you know hacker
40:03 happened to sniff the URL that was that you were trying to connect to or maybe you had it as a link or something right
40:10 um that API key is not visible to the world right it's it's slightly more protected especially if you have an
40:16 HTTPS connection because yeah that API key is now hidden inside of an encrypted response okay or an encrypted request header. Pretty cool.
40:29 Okay. Um, so that's a that's how API keys work. It allows you to have control over who can access um your API with
40:39 that key. Think of it as like a page safe passcode, right? Since we were talking about page safe earlier today.
40:46 Now, let's go back to the settings. We'll notice in here that um inside the settings uh you can add as
40:54 many API keys as you want with one API key per row.
40:59 In order to add a new row into here, you just hold down the option key and hit return. Okay. Then you can add that key.
41:06 Okay. Now, if you notice in here, um, I have a line here that has a hashtag. Oops. I have a a hashtag right there.
41:16 Okay. And basically, any line that starts with a hashtag or a pound sign, whatever you want to call it, okay, will be ignored.
41:26 So, uh, you can either use that to, let's say I quickly want to disable this API key, put a hashtag in front of it.
41:32 It's gone. It's disabled. Won't be used anymore. Obviously, you have to publish, but there we go. Okay. Now, another thing that this could be used for,
41:39 useful for, is adding little comments about who had that API key, like who was that API key for, right? So, yeah, a
41:48 nice little integration there. Um, you know, yeah, I like that. It allows us a slightly more um configuration and notes
41:56 for ourselves in here about what API keys are for who. Okay. Now, for those
42:03 that use total CMS, um I also added support for Total CMS one and three. Um and these are just going to be straight
42:11 up text areas. Okay? So, you just add a text uh object into Total CMS one or three. Um, basically when you set that,
42:18 you put in the object ID um, in there and then it will uh, and the syntax is the same as this. So it's one API key
42:26 per line and all lines with a hashtag will be ignored.
42:31 Okay. Now, what's cool is this this setting here um, is independent from what's inside total
42:39 CMS. Why is that important? Well, let's say you give your client control with Total CMS to edit API keys, but maybe
42:47 you keep one in here as like a master API key that you know, right? So that um it doesn't matter what is inside total
42:56 CMS, the ones that are inside the stack will always be used. Okay, so um yeah, the to the ones
43:03 in total CMS will be able to be managed externally. um it doesn't matter if you you know publish or don't publish they can edit and control the API keys.
43:12 However, the ones that are inside the stack are basically hard-coded master API keys that will always be available.
43:23 Okay. Uh let's look at some questions. I I know some questions come in. Um would an example uh uh showcase for feeds API
43:31 be the following. Joe's World Cup website store data in a data source.
43:35 Yes. Um uh if he wanted to give access to that data, he would create an API to allow uh the web. Exactly. Yes. So um if
43:45 for those who don't know, um I have a little side project that I manage that I actually have to do some work on to make it so it's World Cup's coming soon in
43:53 2026. So um I have a website called um World Cup brackets.info.
44:05 info and so yeah um this now this website uh it actually isn't uh it's designed by hand I was doing a bunch of
44:14 stuff this actually is um a very early version of prototype of total CMS3
44:21 manages this um all this data um very early prototype um I used it as a proof of concept for some things that I needed
44:28 in total CMS3 and yeah worked out great Okay. Um, so anyway, yeah, but yes,
44:35 let's say I wanted to, um, if I had if I wanted to make access to this data to people in JSON format, I could go ahead
44:43 and, you know, do that. And I have, if you, if you're curious, World Cups bracket.info. I have info about every World Cup all the way back to the very
44:51 first World Cup in 1930 in Uruguay. Um, so there we go.
44:57 Um the the I there's quite a bit of work for next year's World Cup. Sorry for the tangent, but the the the group because there's a lot more teams. I think
45:06 there's 64 teams now or something like that. Like it's an insane amount of teams. And then the the knockout stage
45:14 is a round of 32. So it's going to have an extra knockout stage. So I have quite a bit of design work to do to get uh
45:21 World Cup 2026 working. Uh because yeah, it's a completely new bracket format.
45:27 So, um that'll be fun. Um hopefully I'll find the time to do that before the World Cup
45:33 starts. Okay. Um so, yes, Sean, that is a valid. Now, here's another use
45:40 case. What why did I why did I even come up with feeds API? Okay. If you remember quite a while ago, I think it wasn't it Sean uh we wanted to create a um a site.
45:53 Excuse me. Let me wet my lip here.
45:58 Um during a hangout and actually did a live stream on this as well. Um, we wanted to create a form that queried
46:07 basically a user would type in their UK postal code and then it would autopop populate um the town or the village and the
46:16 county and the the city or whatever other information okay about um that postal code that the person typed into the URL or into a form field.
46:28 So, uh, we we found a solution that there is an open open public API that,
46:36 um, we were able to use that queried postal codes and returned back all the information we needed. Pretty cool, right? Now, I did a live stream on it.
46:46 It was we did it with Pi version two.
46:48 Um, actually that actually uh it we actually originally did it with Pi 1, but acquired a lot of custom code. I shipped Pi version two which made it a
46:57 lot easier and actually that demo is inside the PI demo files. So, and I did an entire live stream on it. But all right, circle back. What does this have
47:06 to do with feeds API? Well, this after we designed and developed that got me thinking of well, what happened if we if
47:14 we didn't find this free public API um that already supplied the data we
47:21 needed? What if what if you had a custom database of stuff, right, of data? Um
47:28 maybe it's postal codes in Spain. I don't know. And maybe there isn't a public API for that. But you could
47:36 manage that data, right? Um you know, postal codes don't change that often, I would think. Right? But um let's say you manage that data yourself either in a
47:44 database or even in a CSV file if you wanted, right? Um because as you saw here today, this data that we're looking
47:52 at, you know, today was all in a CSV file. So yeah, I want to be able to give you guys the power to create these data structures and create this cool new API.
48:05 And so that was my initial inspiration for feeds API um was to yeah to solve that use case that we had already solved
48:13 but in the case where we didn't we weren't lucky to find some public API that we can leverage. Okay. Um and then
48:21 obviously once I tested this out with some people they're like oh we need API keys. So I'm like okay let's add API keys. So we you know fully integrated
48:29 that before launch. Um, now what what are some use cases that people are going to use this for?
48:36 Um, I um have a couple customers. I I can't give all the details out, but um you know, one has a you manages a large
48:45 real estate um backend for a client and they'd like to give their partners programmatic
48:54 access to their projects and their developments and and the current things they have available for sale, right? And
49:02 this gives them that, right? So it gives a an API so that other competitors and banks um can tie into that data that
49:12 they're managing with Total CMS actually. Uh pretty cool stuff. So um yeah um pretty slick. I think it's going
49:20 to be a lot of fun. Um yeah and I can't wait to see what other use cases people come up with. Um I think it's going to be uh pretty exciting stuff here.
49:34 Okay. Um I think that I think we beat this with a dead horse. We went we went over all of this stuff. Okay. So, um now
49:42 let's go over something new that I've been working on. Anyway, I been working on I I just played with it at volleyball practice last night. Um and I haven't
49:50 even fully tested it yet. So, we're going to test it live right now. Um I haven't shipped this yet. Um let's go ahead and play around.
49:59 Uh, let me make sure that my uh my layout's working again. Sorry, little small little bug. Make sure this is uh is working. Oh, yeah, we're good. Okay.
50:08 Um, I'm going to go into this page. Let's just go ahead and delete that.
50:12 Um, I think uh let's add swatches. Um, let's add a
50:21 Let me make sure that I actually installed the latest version.
50:25 Um, H uh yes I did. Okay so um in selector add-on there's some new stuff. There's two new things in here.
50:36 Um there's first line and first letter.
50:40 Okay. Now another thing I actually was going to add um but realized I'd already added it is visited. We'll play with those three things today. Okay. Visited
50:50 first line and first letter. Okay. Um so what are we going to do?
50:56 Um, first off, I'm going to uh let's just I'm going to keep it simple. Okay. And uh let's just add in a header. Okay.
51:04 And I'm going to uh I'm going to add this make this a paragraph stack. And we're going to add in uh a bunch of data in
51:12 here. Oh, I'm not sharing my screen. I just saw a text message. Okay. Boom.
51:19 Just saw a text message from someone and I I didn't even read it, but I knew what I did wrong. Okay, we didn't get too far. Woohoo. Didn't get too far. Thank you, Josh. Joe, share.
51:32 Okay. Um I I didn't get far at all.
51:36 Okay. So, um what I want to do here is inside font style. Okay. My font style swatch. Okay.
51:45 Let's go ahead and remove that. Um, I have a header set to paragraph and let's give it uh, you know, uh, some a class
51:53 just to make it easy. Um, we're going to call this um, we'll just call it testing. Okay, so
52:10 Let's do font size of oops, I want it up. Let's go 18. And we're going to make it bold. Okay. But I don't want to I
52:20 don't want to make the entire paragraph bold. I want to make just the first line. Okay. So, um we're going to go
52:29 into uh oh my swatch. We're going to go into selector add-on and I'm going to go into this this new thing. Again, I
52:37 haven't shipped this yet, but selector add-on first line. And voila. Okay. I've
52:44 effectively I've just modified the style of the first line of text in my
52:56 paragraph. Pretty cool. Um, super simple. It just adds uh one drop down to the selector add-on, but it gives us
53:03 some pretty slick uh styling. Okay. And it what's cool about this is let's preview this in the
53:11 browser. Okay. is um is it only ever it doesn't it doesn't matter how long the line of text is. It only ever modifies
53:20 the style of that first line. Right? Pretty powerful. Again,
53:27 it's just a font style swatch. Um I targeted uh this with a class, okay, that I added to the header stack. I have the header stack set to be a paragraph.
53:35 A lot of you guys don't know a header stack is actually more than a header stack. Um you you can set it to be a paragraph. Okay. Now, one thing I I I
53:43 know I'm going to have to play around with is getting it to work with the tech stack. Um I might have to do a little bit of finagangling to get that to work.
53:50 We'll play around with that in a little bit. Okay. But and I'll make sure that's good before I I ship it. Um but yeah, another thing we can do
53:58 instead of first line, let's do first letter. Voila. And now for this, we could do something cool like um I don't know, 48, right?
54:13 There we go. Now, it' be interesting to see what can we do to make that, you know, that's interesting. Uh,
54:21 but what I wonder if it'd be cool if we can like make it drop down and do some some
54:29 stuff. I have an idea. Okay, let's let's try this.
54:34 Um, I think I think it's position swatch. I'm flying. I'm going by the seat of my pants here, guys. I I don't know uh if what I'm about to do is going
54:43 to work at all. Um but we're going to do testing selector first letter. And I
54:51 want Oh, I thought I had I thought the position swatch allowed
54:59 uh allowed floating. It doesn't.
55:08 I might need to add a float stack. I swear there was a stack that
55:15 allowed me to do floats. Well, we might have a new swatch
55:23 coming, too. I swore I had a swatch for floats.
55:28 Well, we'll just use a CSS stack for right now. CSS builder. Okay, we're going to do um
55:35 Um, testing. Oh, shoot. I didn't I didn't reinstall. It's not in here because it's the swatch pack. I didn't
55:42 recompile the swatch pack. All right. Uh, let me recompile the swatch pack really quick because I think this will be fun to play with.
55:53 Um, I just have to restart really quick.
55:56 Quit this. Wait for that compile to finish. And let's relaunch. All
56:06 right. So, now and we're in here. Um, and we're going to go selector add-on.
56:11 Uh, first oh, first letter. Okay. Um, by the way, did you notice I launched stacks and was
56:19 immediately going to work. Pretty slick, right? Okay. Um, we're going to go into here and I'm
56:26 going to do float. Um,
56:35 left. I have no clue if that's going to work. Let's see. Oh, here. Let me I got to fix my layout really quick. Sorry, guys. Just a quick little doohickey.
56:47 Make sure that Okay. Um.
56:53 Oh, it does work. Okay.
56:57 Interesting. But it Oh, man. How can we So, it did it did what I asked it to
57:03 do. Um, let's adjust the line height. Okay. And let's make it like way
57:11 bigger. Let's do the line height. Oh, yeah. I'm going to make the line height one. Okay. And we're we're going to make it like way bigger. Let's do like 96.
57:20 Like double the size.
57:26 Oh, but then, man, I don't want it I want the text to wrap around it here. Let's Let's just tweak it a little bit.
57:32 If I had more text, it would do what I was thinking to do, I think. Uh, let's make it like uh 64.
57:46 Interesting. I'm going to do this. Let's
57:53 Let's inspect this really quick. How do
58:04 you How do you debug that? Darn it.
58:26 Well, I'll have to play around with that. I'll I'll do some research and playing around to see how we can I want to move that up a little bit, you know.
58:36 Um, let's try something else. Let's No, but that that would make I don't know. I'll think about it,
58:44 guys. But I otherwise, you can see it's kind of cool, right? Um, even this doesn't look horrible. I mean, it's interesting, right? Uh, but hopefully
58:53 you can see the style I was trying to go for where I basically just kind of moved it down a little bit.
58:59 Um, yeah, maybe we add maybe if we added some like some negative margin to it or
59:06 something like that. Okay. Um, if you guys want to stick around and watch me play around, you're you're welcome to.
59:12 Um, I'm just going to be playing around with this a little bit. Um, and uh, yeah, it's kind of fun just to play around with this stuff sometimes. So,
59:20 uh, let's see. I'm gonna add, uh, let's add I'm add a margin swatch. And we're going to do
59:28 testing and the selector is first letter. And I'm going to add a negative
59:35 top margin of 32 pixels.
59:44 What does that do? Oh, interest. Oh. Oh, okay.
59:50 Um. Oh, I need to go into here. Need to go into this container or this container. Turn overflow auto, right?
59:58 And go back here. Oh, snap. Look at that, guys. That is That is cool. Come on, guys. That's cool.
01:00:13 Um, oh, Martin put some CSS in there.
01:00:16 Trying to do this swatches, Martin. But, uh, margin, right? Yeah. And font size calc. Okay. Yep.
01:00:23 Yep. Yep. Yep. Line height calc. Yep. Uh, bottom margin bottom negative.
01:00:29 Yep. Pretty similar to what I did actually. You're you're actually Yeah, you're um I didn't add a margin right.
01:00:36 You Yeah, if you want to add a little bit of margin to the to the right of that, that could work, right? So, we could just do margin right uh maybe 16
01:00:44 pixels. And if we want to bring we could try bringing the bottom margin up. You did that. Let's do like negative 12. Let's try
01:00:54 that. Oh, but that No, I didn't. Uh let's do a smaller bottom margin.
01:01:02 Four. Uh eight.
01:01:10 Eh, I don't like the negative bottom margin. Maybe we here instead of the negative top margin at 32, let's do like
01:01:18 24. What does that do? Yeah, not not bad. We can kind of just play with this and pre Oh, now
01:01:26 we're getting there. 20. What happens if I do 16? Oh, yeah. 12. Nope. 16 is the money. That's
01:01:36 the money shot. And I don't like that that bigger. Right. Let's do a rate like four. Oh, dude. That's money,
01:01:45 guys. That's money. I like it. I like it. There we
01:01:54 go. And again, that is the new first letter selector add-on. Okay. Um, now I
01:02:01 intentionally added it to the header stack because I knew it was kind of the simpler way to do it. Um, but I know everybody uses text stacks, right? So,
01:02:09 let's see if I can get the same thing working in a text stack.
01:02:15 Um, here I'm going to do this. We're going to we're going to duplicate this. Uh,
01:02:25 Oops. Oh, that's interesting. All right. All right. So, we're going to do this one is going to
01:02:32 be a text stack. So, we're going to add in a text stack and
01:02:45 um let's just add the same same Laurum text. Okay, so we have Laura text. I want to I want to modify these things.
01:02:53 So, um so first letter. So, if I did testing on the text
01:03:01 uh testing. Okay. Oh, wow. I did not anticipate that actually
01:03:09 working. Does that What? Oh, that's kind of cool,
01:03:14 [Laughter]
01:03:16 actually. Uh, that's cool. I did not expect that to work out of the box. I expected I'd have to work some magic to
01:03:24 to get that working. Very cool. Now, what happens if I do uh if I like up here I have a this this I'm sure is
01:03:32 going to is not going to work. Okay. I'm thinking it's going to all these styles are going to get
01:03:39 applied to that that M. Yeah. which is kind of interesting as well because um
01:03:47 so I I'm testing is on the text stack and we we want we're trying to modify the first letter and in this case the
01:03:54 first letter of the text stack is the M in this header. So um it did its job which is interesting. Okay, but let's
01:04:03 say we wanted to modify these um so that it got um it targeted this this paragraph
01:04:12 here. Um, let's see here. Uh, let's use a different
01:04:19 class. Okay. And, um, that,
01:04:26 uh, I'm going to cheat a little bit. I'm going to do P first letter. All right. That is a total
01:04:34 cheat. Um, but it gets the job done, right? And here, let's see if if
01:04:40 it if it gets the job done on all of
01:04:51 them. It does. Uh, but I think this is going to flat fall flat on its face when I have two paragraphs because I think
01:04:59 that this style that I just added here is going to target the first letter of every paragraph. And it does. Okay. Um,
01:05:09 So, this would require some more advanced. I think we could do like um first dash
01:05:22 child P first child. That doesn't work because P would have to be the first child, right? If I
01:05:30 deleted that header, then it would work. But paragraph isn't the first child.
01:05:59 Interesting. Darn. Let's see. Yep. I thought that. Yep. I thought
01:06:06 that too, Josh. Um because it does first child, but it's not the first child.
01:06:15 Um, here. Let's Oh, yeah. Let's just go to um I need a
01:06:23 CSS selector that will um target the
01:06:30 first paragraph in a div. The
01:06:39 paragraph might be below a
01:06:50 header. Uh you want to target the first first of type. Ah yes.
01:07:06 here. Okay, but um so we're going to do first of dash
01:07:15 type there we
01:07:25 go. Now uh okay so if if we look at this here let's make this a little bit bigger. Okay, if we look at the CSS
01:07:33 selector that got created, um let's look at the CSS builder since it's the whitest one, right? We have um texting,
01:07:40 okay, which is right here. So, we have texting P first of type and then we have this selector add-on first letter. Okay,
01:07:48 um so the texting is obviously uh going to target uh this texting class that's added to the text stack. Okay. Um, then
01:07:59 when I do space here, let's go step by step here. I'm gonna we'll just delete that really quick. Actually, here we'll
01:08:06 cut it. Okay. And then when I do space P, it then targets all the paragraphs.
01:08:12 Okay. But here I have multiple paragraphs. I only want to target the very first paragraph. Okay. So that's
01:08:21 why in here I then did the uh the first of type.
01:08:27 Okay. So, we're targeting the first paragraph in texting. Um, and then after that, we added the first letter. Okay.
01:08:35 Now, I I could, if you don't want this, you can actually go ahead and do um over here you could do colon first dash letter and Bob's your uncle.
01:08:48 Okay. But, uh, so basically, we needed two selector add-ons for this. And here I only allow you to add one selector add-on at a time. Okay.
01:08:59 Um, so I don't know. Not sure the best way to do this. Maybe I do I I could probably add something in here that's like um I'll have first letter, but then
01:09:08 maybe I do like first letter of first paragraph, you know, and then that will be P first of type first letter. Uh, I
01:09:15 think that's probably a good thing to add. Okay. Um, and then probably do I'll probably do the same thing for first line. So, a first line and then first
01:09:24 line of first paragraph or something like that. Um, so I'll I'll add those two options that you guys don't need to remember this trickery right here. Okay.
01:09:36 Um, but anyway, that should work, right?
01:09:38 And does so it works on the first paragraph. Uh, voila. I like it.
01:09:46 Um, yeah, we're going to need a float stack eventually. Um, yeah.
01:09:52 We'll we'll make that happen, too. Um, and then yeah, I added some margin, which played around with the positioning of it when I floated it. Uh, and then
01:10:01 obviously the font style sets it to be bold and whatever size. Line height of one is going to be important, right? Uh, actually probably make it actually maybe
01:10:10 a little bit smaller like 0.8 potentially. Let's see what that what that does.
01:10:17 Actually, that doesn't help. Keep it at one.
01:10:26 Right, cool, guys. Um, oh, I promised um, uh, one other thing. So, we went over first line. Okay. Um, here we'll
01:10:35 we'll change this one to be first line. Obviously, we don't want plug in that big. That's kind of big. Like 24 something like that.
01:10:48 Uh, and oh, first line. We don't want floats and we don't want margin. All right. So, there we go. Um, I'm not sure
01:10:55 it makes sense to style the first letter and the first line, but you might be able to do that. I don't know. I I think you probably probably pick one or the
01:11:03 other, I would think. Okay. Either the leading paragraph or uh the first letter. Okay.
01:11:09 Um, hey, last thing that uh we did or that I want to show off. Um, just go ahead and add a new
01:11:17 swatches stack down here. Just for fun, we're gonna All
01:11:24 right. Uh, let's add a button stack to the page. I'm going to add a link
01:11:31 button. Someone had a request earlier um for styling a
01:11:38 button that has already been visited um on a site.
01:11:45 Okay. So, let's just um here we'll set this one to be um right um feeds API. Sure. Right. So,
01:11:55 we linked to feeds API. Okay. In the current window and
01:12:03 um All right. And then we're going to do uh let's just add a radius. All right.
01:12:09 Um, so what I want to do is, um, we'll do this in the browser since make it a little bit easier. Um, when I preview
01:12:16 this, I want to be able to click on this and, um, if I were to go back, I want to be able to style this when I know that
01:12:25 someone's visited that or clicked on that link. Actually curious. I'm wondering those styles might only be on your
01:12:33 current domain. We can test that, too, though. Okay.
01:12:40 Um, all right. So, actually here what we're going to do is I'm going to link this to uh let's link this to F6 form.
01:12:47 All right. We're going to link to that page. So, it's on the domain. Okay. So, we're linking we're linking to this page here. Okay. Which is not exciting. Okay.
01:12:56 Um anyway, so uh let's just call this link then. So, let's say I want to I want to
01:13:03 change the background color of this button when it's been linked. Okay. Um, so let's just give this a class. Let's
01:13:11 just call this uh visited visited uh style. Okay. Let's call it that.
01:13:20 Okay. Um, so I'm going to go over here.
01:13:22 We're going to do a background uh background swatch. Uh, we're going to target visited style. You could just
01:13:30 target all buttons, too. Actually, here we could do that. We could just do um all buttons on the page.
01:13:36 Okay. and selector add-on. We're going to do visited. So, when a button has been visited, okay, we want to make the
01:13:45 background color. Let's just go simple. Well, oh no, Chris is here. We're going orange.
01:13:51 Okay, so when uh yeah, when a button has been visited, make it
01:13:58 orange. Have a look. Right. So, there uh I'm going to click on this link. Right. Took me to this page. It doesn't work.
01:14:06 Go back. And I visited that link and now it's orange. Pretty cool, right? Work like a
01:14:15 charm. Uh, now you can do this all kinds of stuff. It doesn't need to be a button. It could be menu items, right?
01:14:21 So if you want to style menu items a certain way for when they are visited, you can do that. Okay. Um so you know in
01:14:31 here instead of choosing buttons you could do um all menu items
01:14:37 visited done element all menu items selector add-on visited and at that point you probably don't want background color maybe you would do font color or
01:14:46 um I don't know what underline or something like that right so you but you could customize the style of menu items
01:14:53 that have been visited pretty cool and it's all with this selector add-on. You can also do
01:15:08 So, not not really sure how that is useful. Um but there we go. Okay. Hey guys, uh that was all I had to show off
01:15:17 today. Uh I think it was successful playground. Um hopefully you guys like the uh what do you guys think of the new uh first letter, first line? And it's
01:15:25 already there, the visited. You can play with that right now if you want to uh play around with customizing uh colors of buttons and links um if they've been visited already.
01:15:38 Okay, sweet. We went a little over today, but um yeah, I think it was worth it. It was kind of a fun thing. Um I should be able I should have that update
01:15:45 for this first line stuff. I'll probably have it out today, but by Friday. Let's give me till Friday. We'll get that out. Okay.
01:15:54 Um, sweet. Any last minute questions? Let me see if I missed anything. Um, sweet. That's it, guys. Take care.
01:16:04 Have a wonderful rest of your week. Go out, check out the new stacks that we shipped and we reviewed today. Um, lots of awesome stuff going on. And, uh,
01:16:12 can't wait. Get your ticket to the summit. Those people are going to be get access first to the new awesome stacks
01:16:20 um app that you saw me use most of today. Okay. Um so yeah, fun times. Take
01:16:27 care. We have a lot of great stuff in store this year. Um and I'm really excited about it. Hopefully you are too.
01:16:33 Take care and go make your websites