hey everybody okay here we
go let's get the chat up i think the chat's
going oh here comes some viewers
excellent just let me know everyone in the uh audio and visuals are good as
usual okay in the chat
hello is it connected what did I post the Yeah post the YouTube oh there we go
excellent now I get my chat cool wonder if it's delayed i don't know
interesting i should measure at some point how the delay is because sometimes it feels like the chat's quite delayed
um anyway so there's been uh yeah a lot of
really cool releases um some of the 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 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 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 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 fun so uh let's dive on
in okay let's see i guess maybe we'll start off with
um some of the cool things that got 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
um I'm just going to search for Hold on it was It was Chris Powers actually i
think it's pretty recent chris
Chris Chris okay obviously it's not on this page i posted quite a few things oh
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
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 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 two um super cool stack works awesome in
Foundation um works great obviously it works in any theme but uh yeah it's 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 new
animations here i know i think there's three or four different new ones that you should let's go to the end
so anyway there there's just a bunch of really slick kind of 3D style animations
that uh yeah are pretty cool 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
you did own the the previous version you do get a discount
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 um but it looks like I'm not sure how
the upgrade goes um if you guys have purchased from him hopefully you know how the upgrade goes is it like my system where it just automatically does
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 what does he use uh that does not look like cart loom what is
this no clue what that is but Oh fat free cart
pro okay fat free cart that's what he uses very interesting never heard of
that one okay um so hype titles number one sorry I I don't have the stack to
play around with or show you but uh yeah it's pretty cool um he does a lot of really cool animation stuff um and he
builds them I 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 go next up
um in the Oh oh he posted announcements thanks
Chris.Oop there we go nice okay um so Scott Williams so Chris posted the
announcement but this is a stack from Scott Williams okay and it is a two-factor authentication stack um I
watched the video i got a live demo of it at the hangout on Friday which small 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 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 weekly basis and I think he has oh here this is
the link to the product 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 is this stack it is two-factor
authentication for page safe so page safe if you don't know is my one of my
stacks that just adds really simple authentication and password login for
your web pages it's super simple stack i think one of the best page locking
authentication stacks out there if you need its feature set it's awesome okay
um Scott needed had a customer that needed two-factor authentication and um
I did I did have it planned for 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 here you go and basically what it does um when you log into page safe
um here 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 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
um those password codes can get saved and then you can populate directly into there I use one password works fluidly
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 one password um or even uh Apple actually
Apple's passcodes or their new passwords app in was it shipped in 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 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 uh
pretty cool um it's awesome that it works with existing page safe stack um
it's super simple to set up so make sure you check that out
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 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 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 okay so here it's on the page and he's going to type in the
passcode right and it unlocks and then boom
instead of getting the web page you now get the two-factor authentication box um and then it's going to uh go
ahead i think Chris in this video is using one password to authenticate
and yep he's uses one password and he copies the two-factor authentication
code pastes it in there not sure why 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 we don't need to have learn how to create those passcodes inside page safe all
right now it created that onetime passcode you just click and
copy and he pastes it in there your AI talks too slow Chris 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 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 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 the link to the product page is right there okay
pretty slick good job Scott and
Chris okay um that was all I had uh for
announcements for third party stuff 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 we're still in March i don't know 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 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 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 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 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 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 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 back and implement it with um PDF embed
and you'll see the difference um their implementations are identical minus PDF
Pro just has more settings okay so uh okay here we go so um in PDF
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 will be a new beta should be released to
those that are attending the summit 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 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 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 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 status and should be releasing
hopefully a public beta um I currently have a beta version 30 okay beta 30 um
so 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 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 okay um so implementing PDF Pro super
easy okay u obviously there's a link stack um or there's a link setting 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 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 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 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 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 um because I know this this comes
up uh a lot with users okay uh hopefully let's should have had this
preloaded i think this page already has PDF embed on it so
um basically um in PDF um in link
settings I this is the PDF embed sack 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 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 to resources and
then find their PDF right somewhere around here oh there it is right they're going
to click that and they're going to think boom I'm done do not do that 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 um so what we need to do is you need to go to your
resources find your PDF rightclick say copy 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
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 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
um all right that's how to get things working in Rapid Weaver now we're going to go back to um stacks
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 sample PDF that I have um stored on my server okay um then we define our height
which is the size of our PDF viewer okay now here I'm going to go and preview
this oops what happened here oh did I I broke it one
second there we go okay
so let's talk about the height of um this and I've revamped the height
settings from the old version the old 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 but I think um basing the size based on
the viewport bases basically the size of the browser is definitely better okay um
so here by default I think these default settings are probably what most people are going to be fine with okay
essentially I have it set to 90% on all sizes okay and what that means is it's
90% height of the browser window now if you wanted to be the height of the browser window you would
set this to be 100 okay but I kind of like to see the
entire PDF viewer within the context of my page right so I think 90 is a nice
fit um but adjust as you see fit 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 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 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 want to use this viewport height percentage okay um next
up is you can either uh show the toolbar by default 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
um we can also customize the colors okay um now I I I'll admit I reluctantly
added this a little bit because 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 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 system preferences and I change my mode to be light voila we'll
see that excuse me we'll see that the PDF viewer completely changes themes and
because I have set my device to be light mode I now get a light mode browser
embed um back to dark mode because I can't stand being in light mode
okay excuse me 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 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 so maybe we should do like I don't know how do we get
orange whatever here orange oh my goodness okay we're gonna we're going 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 choose the toolbar background u maybe we'll do like a purple omg okay please don't do that
uh and then you can change the icon color as well which yeah please definitely don't do that okay um at
least keep them white i don't know but again you have free range to make it the
colors that you 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 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 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 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 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 some new tools that we
have there is a new highlight tool uh free text tool draw tool and a stamp
tool now um some of these tools don't work the best inside preview so I'm going to preview this in the browser
okay um actually it's the stamp tool um doesn't doesn't work too great because it actually requires that you uh And
where is my where is my browser preview please what
happened preview there it goes interesting if you're in Okay I
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
whatever okay 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 thumbnails of all
the pages okay um we can search the page so we can search for you know PDF inside
the page and 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 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
know fit the page width or actual size or automatic zoom or you know whatever
okay so there's all kinds of 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 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 scrolling not sure h how or why that makes sense but h if you like
it okay uh you do you okay um then
there's the cool new annotation tools okay um so 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 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 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 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 that okay um so nice little tool you can
change the thickness and all kinds of stuff okay um now then there's a uh text
tool okay so you can go ahead and type your
text okay hello world um we can adjust the size of that to be whatever we want
right and change the color of it as well okay since we're doing orangey things
today we'll go for go for that right okay um and then there is a uh drawing
tool as well now the drawing tool um you can use it to you know draw I don't 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
it dynamically look at that okay um and then we have a stamp tool okay 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 it anywhere I want and I can put it wherever I want on the page okay kind of
cool 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 to have people to do that now once I've
annotated all this I think the signature is kind of interesting right and maybe some of the highlight stuff where you
can take notes and whatnot 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 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 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 and what
we'll notice is it downloaded a PDF and voila here's the PDF um with all my
annotations on it 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 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 but um it
would be amazing if we if we could save these annotations like automatically up
into the server like 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 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 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 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
um can you deep link can you link to pages that
um that is a great question Danny i 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 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 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 um but I do not know if that will work
okay do those print Oh oh cool cool i saw the question do those tools print with the PDF and the answer is yes okay
or at least the the the tools themselves don't but the annotations do right
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 you upload a PDF into Total CMS3 and you want it to display in here should work
if it doesn't we'll make it work that I can promise okay um so there we go
on tablet is it good uh is it good more choices played with on
your Oh yes uh yep David so yeah 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 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 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 let's add PDF embed and um setting it up is identical
okay um it just this the embed version just has less settings 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 controls like changing the colors and customizing the toolbar um
and those weren't simple things to add um so and because it's such a niche
product I needed to to raise the price on on it however not everyone needs
those features so I thought adding a feature that was just the simple embed
like we had previously but just with the new UI and the new height settings um
fancy new icon too i I I'm happy with the icon actually pretty happy with that 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
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 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
uh you can uh so what you would do there Steve is you would uh have two PDFs
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 steve
good question though challenged me for about five seconds okay
um but that should totally work Steve 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 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 now sadly um Feeds API I I have to switch
over to Rap Weaver um the well I don't have to but it it doesn't work in
preview yet in stacks um so um yeah we're working on that okay but um let's
go ahead i'm going to dive into um let's go into Rapid Weaver again or Stacks
Classic as it is on my machine and where is my window apple Intelligence is
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 there it is there's my window all right let's open up
uh let's open up this one
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 let's just go to the product page really
quick actually there is no demo on on the product page um yeah there is no
demo um we'll we'll see the demo 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 okay so just a small disclaimer there 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 um if you
don't you're not going to see any of these stacks inside Feeds API
okay so there we go so what is Feeds API um it allows 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 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
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 we'll notice is um it doesn't produce a web page what it does is it produces an
API okay an application programming interface and allows um you know people
that h that are in the know to access your data um
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 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
format called JSON and it allows um easy access to data for many
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 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 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 or Zapier and
do some automations based on your data right um you can do all of that because
we have this standard API interface for our data using feeds
API okay 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 okay and
uh we're going to jump down to filtering and sorting and the reason is because um
these if you've ever used feeds these settings are behave exactly the same as
in feeds you can sort the data you can filter out the 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 back to that preview okay um so let's say I want to
find uh because here I have a a dynamic URL filter um if something contains
let's do contains case insensitive and we're going to search the title okay um
so over here I can do um question mark title equals and let's find something
with uh gate okay 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 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 watch the feeds filtering and sorting video and it's behaves identical
for feeds 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
actually instead of I'm going to show you online i'm going to go to um uh sand actually I'm
going to rep I am going to republish this page because I changed some of these options uh so we're going to go
publish woohoo only only published four files i'm lucky okay we're gonna go to my sandbox site
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 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 kind of like an authentication mechanism
where you can give someone an API key okay which allows them grants them access
to the API so by default it it is 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 ahead and pass um I'm going to pass it via the URL key equals 1 2 3 4 enter and
there we go okay so I passed a key parameter to the URL and that allowed me
access to the API okay now doing all this from the browser
is not the best okay if we're testing 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 well um users that are watching this
awesome stream I'm going to use an app called Rapid API um and lucky for you
that app is now free i've been using it for years it used to be called Macpaw um
and I paid a pretty penny for it but now it's free for everybody to use okay and so what I'm gonna do is I'm going to
create a new workflow here okay and think of uh this rapid API as um kind of
like a textbased browser to be honest right okay so we're going to go ahead and do https
um
sandbox.joworkman.net okay and I'm going to go ahead and just uh run that 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 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 parameters and you do key
equals 1 2 3 4 okay and I'm going to run this again with command R and voila it
now granted me access and you can see the URL up here where it added key equals 1 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
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 now
um unless you have to I don't recommend allowing API keys from the 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
for so by default um this allow API key and URL is turned off okay now when in
that when that is turned off you cannot supply the API key via the URL you have
to do it a different way 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 okay um it has to be the X API
key HTTP header so um you cannot add an HTTP header with a browser which is why
a tool such as Rapid API makes it nice 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
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 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 even possibly be sent um now if I turn off this header okay
and refresh you'll see that we get an access denied okay but if I turn that header on and run my query you notice
now it works okay so um this um what's nice about this okay is this API key
information 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 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 um that API key is not visible to the world right
it's it's slightly more protected especially if you have an HTTPS connection because yeah that API key is
now hidden inside of an encrypted response okay or an encrypted request header pretty cool
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 that key think of it as like a page safe passcode
right since we were talking about page safe earlier today now let's go back to the
settings we'll notice in here that um inside the settings uh you can add as
many API keys as you want with one API key per row 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
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 okay and basically any line that starts with a hashtag or a pound sign whatever you
want to call it okay will be ignored 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 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 useful for is adding
little comments about who had that API key like who was that API key for right
so yeah a nice little integration there um you know yeah I like that it allows
us a slightly more um configuration and notes for ourselves in here about what
API keys are for who okay now for those that use total CMS um I also added
support for Total CMS one and three um and these are just going to be straight
up text areas okay so you just add a text uh object into Total CMS one or
three um basically when you set that 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 per
line and all lines with a hashtag will be ignored okay now what's cool is this this
setting here um is independent from what's inside total CMS why is that important well let's say
you give your client control with Total CMS to edit API keys but maybe 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 CMS the ones that are inside the stack will always be
used okay so um yeah the to the ones 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
however the ones that are inside the stack are basically hard-coded master API keys that will always be
available 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 be the following joe's World Cup website
store data in a data source 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 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 2026 so um I have a website called um World Cup brackets.info
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 stuff this actually is um a very early
version of prototype of total CMS3 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 in total CMS3 and yeah worked out great
Okay um so anyway yeah but yes 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 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 first World Cup in 1930 in Uruguay um so there we go
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 there's 64 teams now or something like that like
it's an insane amount of teams and then the the knockout stage 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 World Cup 2026
working uh because yeah it's a completely new bracket format so um that'll be fun um hopefully I'll find
the time to do that before the World Cup starts okay um so yes Sean that is a
valid now here's another use 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 excuse me let me wet my lip here
um during a hangout and actually did a live stream on this as well um we wanted
to create a form that queried basically a user would type in their UK postal
code and then it would autopop populate um the town or the village and the
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
so uh we we found a solution that there is an open open public API that 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 it was we did it with Pi version two 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 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 to do with feeds API well this after we designed and
developed that got me thinking of well what happened if we if we didn't find this free public API
um that already supplied the data we needed what if what if you had a custom
database of stuff right of data um maybe it's postal codes in Spain i don't know
and maybe there isn't a public API for that but you could 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 database or even in a CSV file if you wanted right um
because as you saw here today this data that we're looking 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 and so that was my
initial inspiration for feeds API um was to yeah to solve that use case that we
had already solved 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 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
that before launch um now what what are some use cases that people are going to
use this for 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
real estate um backend for a client and they'd like
to give their partners programmatic access to their projects and their
developments and and the current things they have available for sale right and
this gives them that right so it gives a an API so that other competitors and
banks um can tie into that data that they're managing with Total CMS actually
uh pretty cool stuff so um yeah um pretty slick i think it's going 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
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
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 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
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 um I'm going to go into this page let's just go ahead and delete that
um I think uh let's add swatches um let's add a Let
me make sure that I actually installed the latest version 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 um there's first line and first letter
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 first line and first letter okay um so
what are we going to do 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 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
here oh I'm not sharing my screen i just saw a text message okay boom 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
okay um I I didn't get far at all okay so
um what I want to do here is inside font style okay my font style swatch okay
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 just to make it easy um we're going to call this
um we'll just call it testing okay so this is a testing and in my font style
I'm going to put I'm going to do testing okay and I want to change the font weight here maybe even font size
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 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
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 haven't shipped this yet but selector add-on
first line and voila okay i've effectively I've just modified the style
of the first line of text in my
paragraph pretty cool um super simple it just adds uh one drop down to the
selector add-on but it gives us some pretty slick uh styling okay and it what's cool about
this is let's preview this in the 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 the style of that first
line right pretty powerful again 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 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 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 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 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
there we go now it' be interesting to see what can we do to make that you know that's interesting uh but
what I wonder if it'd be cool if we can like make it drop down and do some some
stuff i have an idea okay let's let's try this
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 to work at all um but we're going to do testing
selector first letter and I want Oh I thought I
had I thought the position swatch allowed uh allowed floating it doesn't
i might need to add a float stack i swear there was a stack that
allowed me to do
floats well we might have a new swatch coming too i swore I had a swatch for floats
well we'll just use a CSS stack for right now css builder okay we're going to do um
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 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
um I just have to restart really quick quit this wait for that compile to
finish and let's relaunch all
right so now and we're in here um and we're going to go selector add-on uh
first oh first letter okay um by the way did you notice
I launched stacks and was immediately going to work pretty slick right okay um we're
going to go into here and I'm going to do
float um 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 make sure that
Okay um oh it does work okay
interesting but it Oh man how can we So it did it did what I asked it to
do um let's adjust the line height okay and let's make it like way
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 like double the size
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 if I
had more text it would do what I was thinking to do I think uh let's make it like uh
64 interesting i'm going to do
this let's Let's inspect this really
quick how do you How do you debug that darn it
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 um let's try something else let's No but
that that would make I don't know i'll think about it
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 you can see the style I was trying to go for where I
basically just kind of moved it down a little bit um yeah maybe we add maybe if we added some
like some negative margin to it or something like that okay um if you guys
want to stick around and watch me play around you're you're welcome to 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 uh let's see i'm gonna add uh let's add I'm add a margin
swatch and we're going to do testing and the selector is first
letter and I'm going to add a negative top margin
of 32 pixels what does that
do oh interest oh oh okay um oh I need to go into here need to go
into this container or this container turn overflow auto right and go back
here oh snap look at that guys that is
That is cool come on guys that's cool
um oh Martin put some CSS in there trying to do this swatches Martin but uh
margin right yeah and font size calc okay yep yep yep yep line height calc yep uh bottom
margin bottom negative yep pretty similar to what I did actually you're you're actually Yeah
you're um I didn't add a margin right 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 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
that oh but that No I didn't uh let's do a smaller bottom
margin four uh eight
eh I don't like the negative bottom margin maybe we here instead of the
negative top margin at 32 let's do like 24 what does that do yeah not not bad we can kind of just
play with this and pre Oh now we're getting there 20 what happens if I do 16 oh
yeah 12 nope 16 is the money that's the money shot and I don't like that that
bigger right let's do a rate like four oh dude that's money
guys that's money i like it i like
it there we go and again that is the new first
letter selector add-on okay um now I 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
let's see if I can get the same thing working in a text stack
um here I'm going to do this we're going to we're going to duplicate this uh
Oops oh that's interesting all right all right so we're
going to do this one is going to be a text stack so we're going to add in a text
stack and
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 so um so first letter so if I did testing on
the text uh testing okay oh
wow i did not anticipate that actually working does that
What oh that's kind of cool [Laughter] 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 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 going to is not going to work okay i'm thinking it's going to all
these styles are going to get applied to that that M yeah which is kind of
interesting as well because um 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 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 say we wanted
to modify these um so that it got um it targeted this this paragraph
here um let's see here uh let's use a different
class okay and um that
uh I'm going to cheat a little bit i'm going to do P first letter all right that is a total cheat
um but it gets the job done right and here let's see if if it
if it gets the job done on all of
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 that this style that I just added here is going to target the first letter of
every paragraph and it does okay um
So this would require some more advanced i think we could do like um first dash
child P first child that doesn't work because P would
have to be the first child right if I deleted that header then it would work but paragraph isn't the first child
interesting darn let's see yep i thought that yep i thought
that too Josh um because it does first child but it's not the first child
um here let's Oh yeah let's just go to
um I need a CSS selector that will um target the
first paragraph in a div the
paragraph might be below a
header uh you want to target the first first of type ah yes
yes okay so here we're going to do do I have first of I think I do have first of type i do have first of type is here
okay but um so we're going to do first of dash
type there we
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 selector that got created um let's look at the CSS builder since it's the whitest one right
we have um texting okay which is right here so we have texting P first of type
and then we have this selector add-on first letter okay um so the texting is
obviously uh going to target uh this texting class that's added to the text
stack okay um then 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 cut it okay and then when I do space P it then targets all
the paragraphs okay but here I have multiple paragraphs i only want to
target the very first paragraph okay so that's why in here I then did the uh the
first of type okay so we're targeting the first
paragraph in texting um and then after that we added the first letter okay 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
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
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 maybe I do like first letter of first paragraph
you know and then that will be P first of type first letter uh I 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 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 um but anyway that should work right and
does so it works on the first paragraph uh voila i like
it um yeah we're going to need a float stack eventually um yeah
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 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 a little
bit smaller like 0.8 potentially let's see what that what
that does actually that doesn't help keep it at one
right cool guys um oh I promised um uh one other thing so we went over first
line okay um here we'll 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 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 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 other I would think okay either the leading paragraph or uh the first letter okay
um hey last thing that uh we did or that I want to show off um just go ahead and add a new
swatches stack down here just for fun we're gonna All
right uh let's add a button stack to the page i'm going to add a link
button someone had a request earlier um for styling a
button that has already been visited um on a site
okay so let's just um here we'll set this one to be
um right um feeds API sure right so we linked to feeds API okay in the current
window and um All right and then we're going to do
uh let's just add a radius all right 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 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 someone's visited that or clicked on that
link actually curious i'm wondering those styles might only be on your
current domain we can test that too though okay
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 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 um anyway so uh let's just call this link
then so let's say I want to I want to change the background color of this button when it's been linked okay um so
let's just give this a class let's just call this uh visited visited
uh style okay let's call it that okay um so I'm going to go over here we're going
to do a background uh background swatch uh we're going to
target visited style you could just target all buttons too actually here we could do that we could just do um all
buttons on the page okay and selector add-on we're going to do
visited so when a button has been visited okay we want to make the background
color let's just go simple well oh no Chris is here we're going orange okay so
when uh yeah when a button has been visited make it
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 go back and I visited that link and now it's
orange pretty cool right work like a 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 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 here instead
of choosing buttons you could do um all menu items
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 um I don't know what underline or something like that right so you but you
could customize the style of menu items that have been
visited pretty cool and it's all with this selector add-on you can also do not
visited which is um any anything that is not been visited however I mean that's
kind of the default style 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 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 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
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 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 um sweet any last minute questions let
me see if I missed anything um sweet that's it guys take care 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 can't wait get your ticket to the summit those people are going to be get access first to the
new awesome stacks um app that you saw me use most of today okay um so yeah fun
times take care we have a lot of great stuff in store this year um and I'm really excited about it hopefully you
are too take care and go make your websites