Transcript

00:00 the day another live stream hopefully everyone's doing good
00:06 Let's uh check this out here
00:12 okay we're good I think we're live some confirmation in the chat hopefully
00:19 everyone's doing good today
00:25 got a cool topic today huh excellent excellent Mr Powers is here scrobbler
00:33 thank you for popping on Irwin glad you can make it
00:39 excellent Mr Cole
00:45 Okay so last week
00:50 um hey Franco um
00:56 hey Dave um so last week during the last week's hangout on Friday right you're joining
01:02 the Hangouts right um a user wolf at uh from Germany
01:10 and uh awesome awesome guy beautiful design if you haven't checked out his uh
01:16 talk was it last year the year before he did a talk at the summit on Timeless
01:21 web design and uh yeah check that out uh really really good stuff super talented guy
01:27 amazing photographer um hey while we're talking about Summit hey go get your ticket
01:34 summit.weavers.space it is in two months two months from almost today I think
01:39 it's two months exactly from today um that uh yeah we're doing the conference virtual Summit three days of
01:47 just learning about web design and building cool things with stacks and all
01:53 kinds of Awesomeness so um you know last year someone said uh Scott if you're here I'll give Scott the
01:59 credit he said that the Summit is the best add-on in the in the entire Stacks
02:04 Community right so I thought that was a pretty cool little little testimony right so uh yeah check out the summit
02:11 it's uh 99 bucks you get in for three days of just fun awesomeness it's it's
02:18 all virtual you don't need to go anywhere um and it is very interactive as well so
02:24 uh we have speakers I think I've uh 15 speakers oh man I I don't remember now
02: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
02:36 stuff got in the way so yeah check it out um we also do interacting with fellow
02: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
02: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
02:55 to interact um we bring in other users you know your fellow Community a lot of people here
03: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
03:07 so yeah it's fun to learn from other people right not just always hearing from me or you know whomever right so
03:15 um also have Isaiah come in um hopefully we should get a sneaker
03:21 stat of stacks app um yeah it's gonna be super awesome can't wait so uh yeah join in and
03:28 hopefully we'll see you guys at the summit um okay back to business
03:33 uh what was I talking about last week's hangout so last week's hangout um we started talking about privacy and
03:42 uh wolf was asking oh you know I can't use Font awesome because of you know gdpr or
03:49 dsgvo or you know all this stuff and I was like wait what why can't you use Font awesome
03:55 and he was like oh because you know um because it's getting loaded from other
04:00 places I can't use it and I was like whoa whoa that's actually not that's a misconception so
04: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
04:13 awesome or you can't load jQuery and because those are against you know gdpr
04:18 or all these privacy laws and that's just not true
04:24 um it's not the libraries themselves that violate gdpr okay for the rest of
04: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
04:38 d-s-gvo man why why didn't they if this is a web thing why have anything that's
04:43 close to SVG in it Jesus okay so I'll just say gdpr privacy or whatever but
04:50 um these libraries themselves don't violate any privacy laws
04:56 okay having an icon on your website doesn't violate any privacy laws loading jQuery
05:04 which is just a JavaScript library doesn't violate any privacy laws
05:10 what could potentially violate this is loading these libraries from what's
05:18 called a CDN okay a Content delivery Network
05:24 and the reason this is is because um you're now referencing this Library a
05:31 JavaScript file or font files or whatever from an external Source okay be
05:36 it Google or there's tons of different cdns around the world cloudflare is one some of them are privacy Centric some
05:44 are not right so just you can't blanketly say all cdns are bad
05:49 they're not right I mean um you know like for example cloudflare does take privacy
05:56 um you know seriously so they're there are some cdns that might not and
06: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
06:10 loading libraries from your own website is a safe bet so if you're loading font awesome from
06:17 your website if you're loading jQuery from your website you're loading anything else from your website you have
06:24 control of that that means the browser fully trusts it um as long as you know you and most
06:32 Stacks users aren't you know have any malicious custom malicious code that's going to track and put everything in the
06:38 database or whatever right as long as you're not tracking users information
06: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
06: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
06:58 for search anymore I I haven't I've never used Gmail well maybe way way way
07:03 way back in the day I used it but um right I mean so I I don't trust Google either so
07:11 um you know Google analytics stuff like that right there's a lot to be said about
07: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
07:25 that IP or other information about the requests you know because Google's all over the world they can like track that
07:31 user right they know they visited this website from this IP address or something like that right and so that's
07:38 the problem that's that's the Crux of what all these privacy laws are about it's about protecting your users
07:45 information so by hedging bets not loading any
07:51 content from these external domains okay trying to load as much as you can from
07:56 your own domain where you have control of everything will keep you in compliance with all of
08:02 these laws okay so with without further Ado enough of me talking let's dive in and uh start
08:09 looking at some of this stuff okay um should have had rapidver open already I
08:17 thought I had it open oops my bad
08:23 oops my uh hold on one second I gotta I gotta fix my thing here
08:35 what's going on
08:42 oh there it goes so you guys can see my beautiful beautiful face here
08:48 there we go now I'm back okay I missed that that was uh got de-linked
08:55 okay um I launched rapid either way to go okay here we go
09: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
09:09 um and I'm just gonna be using the cookie jar 3 demo file more on that later
09:15 uh let's wait for uh good old Stacks to load
09:20
09:40 sometime today let's go man Okay cool so um
09:49 first off let's start dealing with controlling whether or not some of these libraries are loaded from a CDN or
09: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 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 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 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 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 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