0:00 the day another live stream hopefully everyone's doing good 0:06 Let's uh check this out here 0:12 okay we're good I think we're live some confirmation in the chat hopefully 0:19 everyone's doing good today 0:25 got a cool topic today huh excellent excellent Mr Powers is here scrobbler 0:33 thank you for popping on Irwin glad you can make it 0:39 excellent Mr Cole 0:45 Okay so last week 0:50 um hey Franco um 0:56 hey Dave um so last week during the last week's hangout on Friday right you're joining 1:02 the Hangouts right um a user wolf at uh from Germany 1:10 and uh awesome awesome guy beautiful design if you haven't checked out his uh 1:16 talk was it last year the year before he did a talk at the summit on Timeless 1:21 web design and uh yeah check that out uh really really good stuff super talented guy 1:27 amazing photographer um hey while we're talking about Summit hey go get your ticket 1:34 summit.weavers.space it is in two months two months from almost today I think 1:39 it's two months exactly from today um that uh yeah we're doing the conference virtual Summit three days of 1:47 just learning about web design and building cool things with stacks and all 1:53 kinds of Awesomeness so um you know last year someone said uh Scott if you're here I'll give Scott the 1:59 credit he said that the Summit is the best add-on in the in the entire Stacks 2:04 Community right so I thought that was a pretty cool little little testimony right so uh yeah check out the summit 2:11 it's uh 99 bucks you get in for three days of just fun awesomeness it's it's 2:18 all virtual you don't need to go anywhere um and it is very interactive as well so 2:24 uh we have speakers I think I've uh 15 speakers oh man I I don't remember now 2:30 we'll I'll be sending out some emails hopefully by the end of this week it was my goal to send it out last week but hey 2:36 stuff got in the way so yeah check it out um we also do interacting with fellow 2:41 customer fellow Weavers right so uh so yeah you it's not just sit there and it's not like watching a YouTube video 2:48 or watching this live stream where you're just sitting um and watching and consuming and maybe have a little chat room you actually get 2:55 to interact um we bring in other users you know your fellow Community a lot of people here 3:01 watching this live stream are going to be speaking this year so Chris I know Chris is going to give a talk this year 3:07 so yeah it's fun to learn from other people right not just always hearing from me or you know whomever right so 3:15 um also have Isaiah come in um hopefully we should get a sneaker 3:21 stat of stacks app um yeah it's gonna be super awesome can't wait so uh yeah join in and 3:28 hopefully we'll see you guys at the summit um okay back to business 3:33 uh what was I talking about last week's hangout so last week's hangout um we started talking about privacy and 3:42 uh wolf was asking oh you know I can't use Font awesome because of you know gdpr or 3:49 dsgvo or you know all this stuff and I was like wait what why can't you use Font awesome 3:55 and he was like oh because you know um because it's getting loaded from other 4:00 places I can't use it and I was like whoa whoa that's actually not that's a misconception so 4:07 um I think what I'm going to address first is you know a lot of people think they hear oh you can't you load font to 4:13 awesome or you can't load jQuery and because those are against you know gdpr 4:18 or all these privacy laws and that's just not true 4:24 um it's not the libraries themselves that violate gdpr okay for the rest of 4:31 this I'm just gonna probably say gdpr Okay instead of like I know there's multiple of them there's dsv Geo not 4:38 d-s-gvo man why why didn't they if this is a web thing why have anything that's 4:43 close to SVG in it Jesus okay so I'll just say gdpr privacy or whatever but 4:50 um these libraries themselves don't violate any privacy laws 4:56 okay having an icon on your website doesn't violate any privacy laws loading jQuery 5:04 which is just a JavaScript library doesn't violate any privacy laws 5:10 what could potentially violate this is loading these libraries from what's 5:18 called a CDN okay a Content delivery Network 5:24 and the reason this is is because um you're now referencing this Library a 5:31 JavaScript file or font files or whatever from an external Source okay be 5:36 it Google or there's tons of different cdns around the world cloudflare is one some of them are privacy Centric some 5:44 are not right so just you can't blanketly say all cdns are bad 5:49 they're not right I mean um you know like for example cloudflare does take privacy 5:56 um you know seriously so they're there are some cdns that might not and 6:03 there are some cdns that do so you can't even do a blanket statement against all cdns but if you wanted to be safe 6:10 loading libraries from your own website is a safe bet so if you're loading font awesome from 6:17 your website if you're loading jQuery from your website you're loading anything else from your website you have 6:24 control of that that means the browser fully trusts it um as long as you know you and most 6:32 Stacks users aren't you know have any malicious custom malicious code that's going to track and put everything in the 6:38 database or whatever right as long as you're not tracking users information 6:44 you're golden right the scare here is when you're loading font awesome or jQuery from let's say Google I'm going 6:51 to pick on Google a lot today because yeah I I don't trust Google myself I don't use Chrome I don't use google.com 6:58 for search anymore I I haven't I've never used Gmail well maybe way way way 7:03 way back in the day I used it but um right I mean so I I don't trust Google either so 7:11 um you know Google analytics stuff like that right there's a lot to be said about 7:17 um if you're loading these libraries from Google Google then can track let's say the user's IP address and based on 7:25 that IP or other information about the requests you know because Google's all over the world they can like track that 7:31 user right they know they visited this website from this IP address or something like that right and so that's 7:38 the problem that's that's the Crux of what all these privacy laws are about it's about protecting your users 7:45 information so by hedging bets not loading any 7:51 content from these external domains okay trying to load as much as you can from 7:56 your own domain where you have control of everything will keep you in compliance with all of 8:02 these laws okay so with without further Ado enough of me talking let's dive in and uh start 8:09 looking at some of this stuff okay um should have had rapidver open already I 8:17 thought I had it open oops my bad 8:23 oops my uh hold on one second I gotta I gotta fix my thing here 8:35 what's going on 8:42 oh there it goes so you guys can see my beautiful beautiful face here 8:48 there we go now I'm back okay I missed that that was uh got de-linked 8:55 okay um I launched rapid either way to go okay here we go 9:01 so I'm gonna be uh side note later on we're gonna be looking at cookie jar and a bunch of other Stacks okay 9:09 um and I'm just gonna be using the cookie jar 3 demo file more on that later 9:15 uh let's wait for uh good old Stacks to load 9:20 [Music] 9:40 sometime today let's go man Okay cool so um 9:49 first off let's start dealing with controlling whether or not some of these libraries are loaded from a CDN or 9:56 loaded from um loaded from your domain um in particular let's talk about common 10:03 ones which are font awesome as well as a jQuery so um if you go into your Stacks 10:10 preferences again you click on the little button in the toolbar for stacks and you go to oh and I always forget 10:16 where these are okay here if you go to the HTML uh tab here you'll see that there is this for CDN okay and I I'm 10:24 pretty certain that all these are off by default okay so as long as all of these are off 10:30 [Music] um as long as they developed stack is doing it properly it will never load jQuery or 10:37 font awesome or any of these other libraries from a CDN 10:42 okay they will always be loaded from your website okay and I I should add let 10:49 me just quickly add here none of my stacks none of them 10:54 load external libraries from a CDN or from my website or anything everything 11:02 is loaded from your website okay unless well unless you're have like 11:08 a huge I guess some things that are obvious a YouTube embed obviously my YouTube stack loads stuff from YouTube 11:14 because I have to load the embed from YouTube right okay but there's nothing 11:20 outside of the obvious things like that that are loaded from an external library or website okay I go through great 11:32 extents okay I work really hard to make sure that everything is loaded from your 11:38 website as much as possible okay um so 11:43 with that said not all developers do that okay 11:49 um I don't have any examples I've seen Stacks from other developers out there 11:54 um that load their own version of jQuery from sometimes from a CDN sometimes not 12:00 I've seen other stack developers load fantasum instead of using the one that comes with Stacks or anything like that 12:08 so um even if you if you check 12:13 um you know that preference again I think that's pretty uh uncommon I've seen it though okay 12:21 um so yes I will teach you also uh in a second to 12:27 know if if something is loaded from an external domain or if it's loaded 12:33 um from your own domain okay so let's dive back in 12:40 so um yes there and I should I just want to say there are some Stacks out there 12:45 um that some developers will load their own version of jQuery um I think a lot of those developers 12:51 have kind of Gone by the wayside um you know but hey it happens Let's uh 12:57 let's go ahead and I'm gonna preview this in the browser it's easiest to preview a page in a browser 13:02 um we're looking at the cookie jar demo let's just ignore cookie jar for now um we're just looking at a web page okay 13:10 and um if you open up the developer inspector okay uh and let's go to the source tab 13:18 okay now in this tab you will see 13:25 um all the assets that are loaded onto a page 13:30 and if it's loaded from an external domain it'll actually list it here 13:35 okay another thing you could do is if you go to the network tab if we go to all resources and you can say refresh 13:42 okay um it tells you the domain that it's getting loaded from so inside preview 13:49 it's getting loaded from 127001 which is essentially saying that yes this is 13:55 getting loaded from your website when you publish this it'll get loaded from your website okay let's go ahead and 14:01 look at example I'm just going to click accept um on this really quick and that um this loads a Google font so 14:07 here's an example you'll see in the network tab that this asset's getting loaded from Google 14:13 this asset's getting loaded from uh g-static which is another Google domain 14:18 okay so um depending on your privacy laws or where you are you might not want that 14:25 okay we'll talk about how you know ways to get around some of these common things as well okay uh now if we go back 14:31 to the sources tab you'll also see in this you'll see that the domain gets listed here so if you go to sources 14:37 you'll see everything you'll see that this particular CSS file is loaded from fonts.googleapis.com 14:44 okay so that's an indication whether or not something is getting loaded from a CDN 14:50 okay so um let's go ahead and just for fun I'm gonna check some of these 14:57 I'm gonna check in a couple of those let's preview that 15:03 okay and what what we should see now 15:08 this particular theme oh this page doesn't have any Stacks that use J that use jQuery so 15:15 um and let's let's Chuck a stack on this page just for fun that I know uses 15:20 jQuery um none of my most recent Stacks even use 15:25 jQuery anymore either so uh 15:31 let's see what's uh how about impact 15:36 I think impact impact uses jQuery we're just gonna Chuck impact on this page um here I'll throw one image in there 15:42 doesn't really matter what it is all right 15:48 hi there we go okay so um now that I have a 15:55 stack on the page that uses jQuery we'll see that jQuery is getting loaded from ajax.googleapis.com 16:03 right um and again if we went to this network tab um and we were to reload we'd also see 16:09 oh look font awesome is getting loaded from a CDN uh Google The Google apis that's from 16:17 um uh my cookie jar demo okay but we'll see a lot of these are starting to get loaded from external domains and that 16:25 could be a concern for you so let's go ahead and I'm going to keep all of this on the page I'm going to go 16:30 ahead and turn off these cdns okay 16:36 let's preview and we'll see now all of those with the 16:41 exception of these font loading um are getting loaded from my local website 16:47 pretty cool right okay um Stephen that's Google web fonts yes 16:54 so we will definitely talk about Google fonts because I know that's a that's a big um you know concern for a lot of people 17:03 now there are other font Services out there such as you know Adobe fonts there's also Hoffler right 17:11 um You should look into their policies on what they do um on whether or not they comply with 17:16 gdpr and things of that nature okay so I know that I believe both as long as your 17:22 account permits it can actually download the fonts um so we're gonna be talking about that actually that's a solution for Google 17:28 fonts all Google fonts can actually be downloaded and then you can load them locally on your website Okay so 17:37 um so hopefully that I think that solves a lot of problem I know there was a lot of 17:42 confusion about this particular thing um and kind of opened the eyes of some 17:47 users on my hangout last week where they're like oh I didn't know that like um you know it's okay to load these 17:53 libraries as long as we're loading them locally okay 17:59 so what are what are things that we can do instead of loading let's let's start 18:06 tackling fonts okay so we talked about font awesome um now if you're using Foundation six 18:12 and you're loading font awesome five that never uses a CDN um that's something that's baked into foundation 18:19 and it always loads from your website always okay 18:25 um this font awesome that's baked into Stacks that's font Awesome version four 18:30 okay so just to let you know that 18:38 um oh it fonts let's talk about fonts so Google fonts is obviously a very 18:43 popular way of loading fonts uh most because well it's free right 18:49 um so let's go to fonts.google.com 18:56 okay 19:02 so with with Google fonts okay uh you can 19:07 go ahead and select a font right so let's um here's actually the font I'm loading 19:13 in the um demos for cookie jar just because it's 19:18 very you know apparent you can see it's very different okay um and if you if you go here you can go 19:26 ahead and let's add uh you know a font and then if I do you know what they always change 19:36 uh where is the little you all Style no 19:45 I think you know what they make it so like I think it's not very usable in Safari I need to load Chrome I think 19:53 that was the that was the trick darn Google fonts are discriminating 20:00 against Safari all right where's Chrome I know here it comes 20:10 I only load Chrome when I absolutely and whenever I manage my YouTube channel I do I do and whenever I have to go to 20:17 Google fonts I do because so go to fonts.google.com 20:31 oh look see look now it now it comes up over here okay this is what what uh 20:38 wasn't showing up in Safari very interesting okay 20:44 um so again I went to silk screen and it has this little selected family 20:49 thing and essentially what you can do is you copy this code right so so this code 20:55 over here is what you would load into [Music] um 21:01 your page okay or if you're using something like font Pro or Foundation 6 swatches 21:07 um those help you help you out because you just need to put the font name and the font size um or not the font size the font weight 21:14 and you're good to go it does all this stuff for you okay however 21:20 obviously we've seen that loading this font um 21:26 loads it from Google and that could potentially Break um you know your cookie laws or you know 21:33 let's say maybe even a dozen I I'll have to admit I I'm thinking that you know the world's in such a hoopla that Google 21:40 has is no longer tracking it I don't know but I don't trust Google either so um 21:45 if you don't want to put this in your page and then have a cookie message the other option is to just download the 21:51 font files okay so um on every Google font they're all available for free and guess what 21:58 you can just download it there's a download Family button here and it downloads it to your um to your machine 22:03 I already downloaded it here okay and you will see that we have 22:09 I thought there it goes I have the silk screen font in bold and 22:16 regular right here okay now I I did notice that this is 22:22 loading uh it does download the ttf version of this font 22:27 um it doesn't it's kind of kind of a little a little iffy of Google here but 22:34 um I think if we go to uh let's quick Chrome uh uses a lot of resources anyway let's 22:41 go back to Safari okay there is [Music] um hold on let me find it 22:48 I didn't notice that when you click the download that it actually downloads ttf versions of instead of woth files okay 22:57 um there is a 23:03 set this 23:10 where are they all 23:19 right let's find silk screen which is the one 23:28 so all these font files are stored on Google or I'm sorry are stored on GitHub 23:35 man there's a lot 23:53 all right let's go here let's go here oh it does have the ttfs so this 24:00 particular font only has ttf files okay um interesting that when I 24:07 um here we're gonna play around I I didn't plan on going down this rabbit hole but 24:12 let's uh let's go down it okay so this silk screen is this font on the page 24:18 and if we look at fonts see it loads the waff2 file okay 24:23 um so what you might want to do is here get this URL right and then you can put 24:29 it in your browser and download this particular resource or you might be able to just right click and say say file 24:36 right and that's the woth version of this particular font okay 24:43 um so Google they they they try to make you go through hoops they give you the ttf version which there are other 24:49 various apps out there that like or web services that can convert a ttf font to 24:54 a wa file but Google makes it makes you jump through some hoops to do that okay so um so yeah in the browser inspector 25:01 you can you know download the WAFF version of that which the reason you'd want to use WAFF versus ttf 25:08 [Music] um let's see I don't know what's browser support for ttf is a browser support is 25:14 really good for ttf okay but ttf files are a little bit bigger than WAFF files 25:20 Wall Files have better compression so um there we go the ttf file will work 25:27 um but the wa file is going to be better okay and um off let's look at waff2 yeah 25:34 and waff2 support it everywhere except for IE now okay so um so yeah waft 2 is 25:40 just better um a font file support for more compressed I have 25:45 I think I have some videos on the font Pro page about converting fonts and stuff like that you can check those out I don't want to go too far down the wall 25:52 the uh the font Rabbit Hole here okay now once once you have the font 25:59 files downloaded um obviously you can upload them to your server um or you can add them into rapid 26:04 resources it's all up to you okay and at that point you can use something like um 26:12 uh font Pro uh if you go to uh to font families right and then you can do web fonts so 26:20 then at this point you can upload it you put the URL to your normal and bold and all that jazz okay 26:27 and that will load it in and these will load from your domain right as long as the URLs that you put in here are the 26:34 URLs to the font files on your website okay so that is how we can get around 26:41 Google fonts a couple extra steps we need to download the files and then use something like font Pro to then load 26:47 that font file onto your web page okay hopefully that answers some 26:54 questions about fonts okay um again I didn't have time to look at the research for 27:01 um you know Hof now I know Hoffler as long as you have a Hoffler account you can actually uh they support downloading 27:06 and loading the fonts from your domain okay I actually do that on Weaver space okay the font files for Weaver space 27:12 like operator which is the Weaver space font um is loaded directly from my domain 27:18 right they're not even loaded from Hoffler at all um so as long as again as long as you purchase that And subscribe to Hoffler 27:26 um you can do that um in terms of adobe um I I haven't looked at that um if 27:32 anybody knows let us know in the chat what their kind of gdpr policy is um they do load the font files from 27:37 their servers though so I'm not sure exactly what their policy is in terms of 27:43 a privacy for end users but um from what I understand they do offer again I think it depends on the 27:50 level of your account uh to download the font file so you can use on a website potentially okay all right 27:59 so we talked about uh libraries we talked about font awesome we talk about fonts okay 28:06 um now let's dive into displaying like user like consent so 28:13 if you if you do need to you know load some of these resources from an external domain that includes Google analytics 28:20 right so um if you loading Google analytics if you're loading 28:26 um you know Facebook pixels or LinkedIn tracking or Twitter tracking because you 28:31 want to do ads on you know either Google ads or Facebook ads or Twitter ads or whatever okay insert evil tracking 28:38 platform here um you're gonna have to have something like cookie jar okay now um 28:45 I'll be up front there is a another there are other options out there cookie jar 28:51 um I think is pretty cool especially this lace version that I just shipped today Okay cookie jar version two it 28:57 wasn't the easiest to use okay I I uh I've been happy with it for a 29:04 long time and I knew I wanted to do this live stream so I pushed all weekend 29:09 um to make sure I got version three done um for us today okay 29:14 but with that said Carl has another great stack um that is very granular 29:22 um I think it's called privacy Center or something like that uh it's on um 29:28 rwpro.dev okay um so yeah check out privacy Center um he has much more granular control 29:34 okay I haven't used the stack but um here let's go ahead here why not let's 29:40 show Carl's site here let's go to RW I think if you just go to his home page it's right there right 29:46 um oh here let me I think I already accepted his cookie 29:51 thing before so oh wow let's see if I go to his page 29:58 privacy Center 30:07 darn it I think I I previously visited this page and clicked enable all so it remembered my consent 30:14 but here's a picture basically it allows you to like really fine grain control uh 30:20 the end user can choose you know what he can include I'm not sure how it's accomplished in the stack 30:26 um but you have this fine grain control um ultimate I I think this is way more than 30:33 most people need Okay um I think most people just want to 30:39 click OK and get on with their web browsing experience okay but um privacy control it's nice it gets 30:46 very granular control over things um I'm not sure if it's other features but today right now we're going to look 30:53 at cookie jar okay and this is my implementation so cookie jar ships with two stacks now 31:01 okay I'm looking at version three if you have version if you have version two you can get version three now 31:07 um I literally launched it like 20 minutes ago um and you get discounted upgrade and all that jazz okay 31:14 so completely revamped um there's two stacks there's cookie jar content and cookie jar 31:21 okay and let's let's start off with this cookie jar stack in here you can load whatever you want 31:27 just paste in whether this be your Google analytics code here I'm loading that font from Google fonts now the 31:34 reason I'm doing this is in this demo it's super easy to see when a font is loaded on the page because you see all 31:40 the fonts change right so um in this demo I'm just loading that silk screen font 31:46 um and then I'm applying it to everything on the page okay um but in here this is where you would 31:53 put in again all of your various cookie generated code ads add embeds all 32:00 that stuff analytics everything 32:05 um you it will support total CMS macros so if you want to store this content in total CMS you can just put the macro in 32:11 there it should work great okay um there are two essentially two options 32:16 here that you have uh first off when you when you add this to the page click this render and edit mode it'll just make 32:22 things a little bit faster for you okay so it's checked on by default um I I've made a feature request of 32:28 stacks this particular Stylo setting can only be on by default so turn that off okay if you see what this does and here 32:35 it actually loads the font inside to edit mode and while you might think that's cool that's going to slow down 32:41 edit mode a lot so turn that off okay so there we go 32:49 next these top two settings first we have remember across settings so this is 32:54 remembering your users consent whether or not they accepted or declined 33:00 uh the defaults option is remember across sessions that means even if you close the browser session and go to that 33:06 website again it's going to remember your last decision okay as long as you didn't like reset your browser or you 33:12 know empty out all your cash that she even should persist cash emptying okay 33:18 um but there are situations that it won't remember okay you can also say remember for this session meaning as 33:26 soon as the BR the user closes the browser and visits your site again that starts a new session it's going to ask 33:31 them all over again um now there's also an implied consent 33:37 option now I did a little bit of research on this and most countries do 33:43 not allow implied consent any longer okay with the exception of Italy and 33:49 Spain it seemed let me preface this with 33:55 I I am not an expert on any of these privacy laws um do your own research for whatever 34:01 country you are in okay um so check box that okay 34:07 um I did do a little bit of research on on the implied consent thing and it 34:13 seems like a gray area for Italy and Spain is that um as soon as a user like maybe does 34:20 some initial scrolling um then they're in they're they're implying that they're consenting to this 34:27 because they've maybe ignored um you know your warning that this has cookies 34:32 okay so um that does seem like a gray area 34:38 um and it only seems to be from what I've read this morning um Italy and Spain 34:44 but take that with a grain of salt do your own research okay 34:50 but what does implied consent do here implied consent means we're going to assume that you are going to accept our 34:57 stuff first so when you check this um let's go ahead and preview this page 35:03 what we'll see is that font is loaded by default oh here actually let's clear my consent 35:09 that font is loaded by default now if I decline then the page will reload and then it's 35:16 removed okay but it's basically assuming consent up front okay and it's the same 35:21 as you've clicked it accept right so that's what implied consent 35:27 means if you turn that off and I load this page oh let's go ahead and clear 35:33 then by default um the content that you added to cookie jar is not loaded until the user 35:39 actually clicks accept and there we go 35:44 okay pretty cool um now cookie jar has the ability uh I 35:49 have some various classes that you can do and for this demo purpose it's it's kind of cool I have this clear button so 35:56 if you want to test around with things let's say I want to decline oops 36:01 clear I want to accept this right and you want to clear stuff like that right 36:06 so um yeah it's pretty cool um this clear button will allow you to 36:12 you know kind of reset cookie jars Behavior which is nice 36:18 okay so that kind of goes over the cookie jar concept here um in terms of what's getting loaded here is a 36:25 reference of all the classes that are accepted and we'll go over these classes in a little bit okay 36:31 now we have the cookie jar content stack and uh this allows you to build your own 36:39 consent window right now you can really build whatever you want okay I do Supply a cookie jar Decline and accept Stacks 36:47 that you can access from this little thing that you can add whatever button you want in it okay and it will turn that into an accept button and a decline 36:53 button um you can really add whatever Stacks I just used default Stacks here so it's 37:00 just a normal one column the markdown stacks and the stacks button Stacks okay 37:05 um and built this out but you can really build whatever layout you want okay 37:11 um and then what's special about this this content stack um a it allows you to like Define the 37:17 position so if you want something you know fixed to the bottom and whenever you click an accept or decline button 37:24 uh that content stack will disappear so it controls the visibility of when 37:30 someone has declined or accepted uh content 37:35 now if you want full control and you don't want to have any of the cookie jar Stacks themselves okay you can go ahead 37:42 and go the full custom route um and so here's an example using Foundation six 37:49 um where essentially uh this uses implied consent by default it's clear consent 37:55 um here I built my own um cookie jar you know privacy statement 38:01 um and uh and yeah it just uses a container we have a dismiss button so we can 38:06 dismiss it um so there we go I can just dismiss that but you see if I dismiss it if I 38:12 never clicked accept or decline then it just comes back on page load okay I can 38:17 say decline this and there we go right I've declined it 38:23 um so that content will never come back and I've done this just by using the 38:28 various classes that are inside the cookie jar stack okay so we have cookie jar except cookies are decline cookies 38:34 are clear cookie jar dismiss and cookie jar content okay now 38:42 um right now you can't customize these classes um these are just here so you can easily copy paste however I I was talking with 38:50 uh Davide yesterday about this and he thought it would be interesting to be have the ability to customize this 38:56 because at that point you can do maybe um have multiple cookie jar instances on 39:01 the page that will load different things based on different buttons getting clicked 39:09 um so I might do that okay it's pretty cool so there we go 39:15 um that might come into a a future update which would allow you to I don't know maybe do um I allow you to load Google analytics 39:21 and then another instance where I could allow you to load something different right 39:27 um so it gets you maybe a little bit more granular control and just by giving you the ability to customize these 39:33 classes okay um 39:39 next so when I built 39:44 you know now that we have this kind of this nice way of just having a nice sight-wide instance of accepting and 39:52 declining stuff well what about like things like YouTube embeds and stuff like that right 39:58 and so my own bed stack that I released did I reset last year or this year I 40:03 don't remember now but oh embed I believe it was last year 40:10 Owen vet has always had the ability to optionally load um the content via a 40:16 button click so it was obvious that we needed to just 40:22 integrate oh embed with cookie jar so I shipped an update yesterday to oh embed 40:27 that integrates with cookie jar 3.0 okay so let's have this let's look at this page as an example 40:34 let's clear my consent okay so here 40:39 um I oh embed um had a YouTube video but I haven't accepted anything yet right so as soon 40:45 as I click accept it will then um allow if you see the font gets loaded 40:51 um and it'll allowed my YouTube embed okay so this is a way where we can you 40:56 know have a single integration with cookie jar to control um all of our content with Owen bed now 41:02 owenbed supports a lot more than just YouTube videos it also supports um you know Google Maps it supports 41:09 Twitter embeds a whole bunch of other stuff so check out om bed if you're not familiar with it it allows you just to 41:14 do various embeds from various online services and you can control whether or not those are loaded or not now with 41:20 cookie jar okay um also there was some uh asking like well what if you know I want to let the 41:27 user know that a video should be here um in in om bed you can supply default 41:32 content and then you can add data in here you can even add maybe an accept button in there right with cookie jar so 41:39 you can add a cookie jar accept button in there um that would then you know accept and 41:44 then it could reload the page and actually load the the YouTube video actually doesn't need to even need to 41:50 reload the page it'll just do it dynamically on the on on the spot okay so that's interesting as well so you can 41:56 have you know in actually an accept button inside of oh embed right here let's here for fun let's just do it 42:02 let's go ahead and do that okay so up there let's clear my decision 42:10 okay so you could have I have this accept button but you could have like a little blurb of text to say Hey you know 42:15 you have to accept us you know to the ability I click on accept and that will then trigger cookie jar it'll it'll load 42:23 everything right and then the button no longer shows where the video was so pretty cool there 42:30 foreign bed super nice integration 42:37 um with cookie jar I like it okay um next up is rain check now rain check 42:43 I definitely launched I think a month ago okay and rain check allows you to dynamically load any content you know 42:51 either on a delay it was built for performance okay it was it was built for dynamically loading content 42:57 um after everything else is loaded on the page in the background or on scroll okay so I added a new Option here to 43:05 um load based on cookie jar right so here I just have it an image as an 43:11 example um inside rain check and if we preview the page uh let's go 43:17 ahead and clear my consent okay as you see here that content is not loaded 43:23 at all on the page um and I go ahead and click accept and voila the content is loaded okay now 43:31 rain check the all the caveats of rain check check out the rain check videos and docs and all that jazz 43:38 um not every stack will be guaranteed to work inside rain check okay so like if 43:44 you have a complex you know slider stack in there or something like that it might 43:49 not load properly so um you know rain check is a very cool stack it's awesome 43:55 um but yeah it it might not work 100 all the time um depending on what you add into it 44:01 okay but I think having this cookie jar integration with it is a a nice a nice to have 44:07 okay so there's another another cool thing there um and I think we're winding down 44:15 um kind of went through uh you know a lot here let's look at the the questions here um from Adobe uh from Adobe support 44:22 okay thank you uh thanks Mr Len um can I host the web fonts on their own server no Adobe doesn't offer the 44:29 ability to locally host fonts there you go so um thanks for looking that up for 44:34 us Mr Len um Willy says cookie jar works well for him thank you 44:40 um is the page fully refreshed or is the container cookie jar protects okay so if 44:46 you click accept the entire page isn't reloaded um if you do a clear 44:52 um it is reloaded and if you do a decline it depends if you have implied consent 44:59 turns on um decline also reloads the page if you do not have implied consent turned on 45:07 um decline just removes the the um the cookie jar content stack from the 45:13 page so it doesn't reload the page so there are a couple situations it just depends clear the clear button does 45:21 um and sometimes the decline button does but only if you have implied consent turned on 45:27 what do you put in cookie jar if you want to be using F6 to load your Google fonts from your server 45:33 um so if you're loading Google fonts so let's go ahead and load here's a page with um 45:40 so if you're loading Google font okay 45:46 um if you're using this okay then um 45:53 yeah there isn't the there isn't the ability to integrate this stack yet with cookie jar 46:00 I'll have to think about that if that's possible okay um the only way to do that now okay is 46:08 to um if you want to be fully compliant is to make sure that you're uh you 46:13 download those fonts and then you use Font Pro to load the fonts locally 46:20 anyway just to be you know just to be open here I I think it's better to 46:26 always load as much as you can from your own domain regardless whether or not anything for any reason okay 46:33 so uh I think that's the best preference is to always download the font upload 46:39 the file to your server and then use web font Pro okay here this is a part of the font Pro Stacks this particular stack is 46:46 not a part of foundation six but font Pro integrates with Foundation okay 46:51 um I think that is your best option even if you if you care about gdpr privacy or not okay 46:59 um I would do this that way you don't even need to worry about any privacy or cookie issues period it's always loaded 47:06 from your server you don't you don't have external dependencies to google.com for your uh a critical thing such as the 47:13 way your site is designed Google doesn't go down very often but it 47:19 it it has right it has Google Google services have gone down 47:25 do you really want to to rely your site's design and look based on Google 47:30 being up I wouldn't right so that's why I always load all 47:37 the resources that I can from my domain because if if someone's visiting my 47:42 website I can ensure that all the files that are on it are accessible right so um 47:49 yeah privacy laws ignored I think that's best case period now um integrating that 47:56 Google fonts Swatch with G with cookie jar interesting idea I don't know if 48:02 that will be possible or not something I'll I'll look into for now load them 48:07 locally so hopefully that answers your question Steve um oh I wanted to share uh actually this 48:14 morning I was on a website and um I just saw this this was a this 48:20 was the Privacy alert right you know I in my demo I have like the one that has like a full paragraph you don't 48:25 necessarily need to need that this is something just super small and simple um you can totally build this with 48:31 cookie jar totally it's just it's just a container with a round with round corners one 48:37 sentence a link to your privacy policy the OK button is the accept the don't track me is the decline button 48:44 done right super clean minimal layout 48:52 um it's not super annoying I like this okay I actually I I might create a 48:57 little a little demo or something with this particular layout right super 49:02 minimalistic we all hate these messages right and if you have to have it 49:10 um then yeah this is a nice this is a nice one good example here I like it 49:16 um Franco said does does it apply for fond awesome too yes so again with font 49:21 awesome if you're using um well I should say if you're using 49:26 font awesome from Foundation um then you don't need to then it's already being loaded from your website 49:32 okay so if if you're using font awesome 5 Via Foundation 49:37 um you don't need to worry about gdpr because it's not it's getting loaded from your website 49:43 right so I should have note that if you ensure that everything is loaded 49:49 from your website from your domain then guess what you don't even need a cookie message 49:57 okay so yeah if you do the proper work to make sure that your website has 50:03 nothing loaded externally or the things that are loaded externally actually don't track your customers 50:10 information or data or anything like that then you don't need any you don't need that message 50:16 so there's that as well um font awesome as long as you're loading it via anything of mine 50:23 um won't load it for an external domain again font awesome and even jQuery and all that jazz it only matters if you're 50:29 loading it from external domains if you're using it from Foundation six 50:35 it loads it locally on your domain never loads anything external so you're good 50:40 to go um oh one more thing I should note 50:46 uh let me go back to screen um if you want to embed a YouTube video so 50:52 a my own bed uh stack is an option okay um but 50:59 my YouTube stack somewhere 51:07 where is it here it is okay um my YouTube stack let me just do 51:13 [Music] so if you want to load a YouTube video on your page okay by default I YouTube 51:21 has a has a special domain that doesn't load any of their cookies okay they don't publicize this it's not 51:28 really well known but I use that domain by default with my 51:33 YouTube stack so if you're loading a YouTube video with my YouTube stack 51:39 it will load it by default from the YouTube no cookie domain okay 51:45 um so there's that so now whether or not you trust Google's no cookie domain actually 51:51 doesn't load cookies I don't know but um you can dive into that and and if you want to trust them or not it's up to you 51:57 but um yeah YouTube no cookie domain it's a it's a feature of my YouTube stack 52:04 um and actually this morning I I double checked I will add that as a feature to video 52:10 wall as well um I think that would be a nice feature for video wall to 52:15 um automatically convert your images to use Google's no cookie domain I think that would be nice so 52:22 um you know if you're using YouTube videos and you check this does that mean you're a gdpr compliant 52:29 I don't know research that okay but um but it's an option 52:34 okay uh the OM bed stack does not support the no kuki domain um that's because the way the Owen bed 52:41 stack works it just kind of connects to um whatever it's Dynamic it just connects to the services says give me 52:47 your embed YouTube gives us the embed and obviously they don't Supply their no cookie domain because they want the 52:54 cookies because they want to track you so there's that 53:02 and with that I think we're I think we're done oh let's see uh Mr lean Mr lens says EU has many threats to 53:09 business about privacy truth is if you do the basics you will only ever need uh 53:14 be advised to improve not find thousands Simple Solution rule all right there you 53:20 go um so there we go cool thanks Mr Len I agree you know if you 53:26 um do a little bit of work um and a little bit extra work you can ensure that most things are not loaded 53:33 uh from external domains and at that point you don't even need this cookie jar 53:39 but if you want cookie jar go get it it's really cool it does the job really good it's extensible 53:46 um you know it allows you to Define your layout however you want it if you want to load it in a light box or if you want 53:51 to load it in a little animated things that comes in it's up to you you build it um cookie jars just handles the 53:57 acceptance Decline and loading of all the stuff so there we go and the oh embed integration is pretty slick I was 54:03 really happy with that um I'm happy with how that turned out so cool thanks guys go out there uh go make 54:10 some amazing websites see you on the Weaver space Community hopefully we'll see some of you or many of you on Friday 54:16 at the hangout um and uh enjoy cookie jar take care guys bye